/* 14All41 — shared foundations and components. */
@font-face {
  font-family:'Bebas Neue';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/bebas-neue-latin.woff2') format('woff2')
}

@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../assets/fonts/inter-latin-var.woff2') format('woff2')
}

:root {
  --color-primary:#111;
  --color-primary-dark:#000;
  --color-primary-light:#ecebe6;
  --color-accent:#f6c343;
  --color-accent-dark:#c99a1a;
  --color-accent-light:#fdf3d6;
  --color-text:#333;
  --color-text-light:#595959;
  --color-text-heading:#111;
  --color-bg:#fff;
  --color-bg-alt:#f4f3ee;
  --color-border:#dcdbd6;
  --color-white:#fff;
  --color-action:#f6c343;
  --color-action-hover:#fbd468;
  --color-footer-bg:#111;
  --color-footer-text:#e6e6e2;
  --color-success:#246041;
  --color-error:#a72821;
  --font-heading:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --font-body:Inter,system-ui,sans-serif;
  --font-size-base:1rem;
  --font-size-sm:.875rem;
  --font-size-lg:1.125rem;
  --font-size-xl:1.75rem;
  --font-size-2xl:clamp(2.6rem,5vw,4.5rem);
  --font-size-hero:clamp(3.75rem,8vw,7.5rem);
  --space-xs:.25rem;
  --space-sm:.5rem;
  --space-md:1rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:3rem;
  --space-3xl:4rem;
  --space-section:clamp(4rem,7vw,7rem);
  --max-width:1280px;
  --max-width-narrow:800px;
  --border-radius:10px;
  --border-radius-sm:6px;
  --border-radius-lg:16px;
  --border-radius-xl:22px;
  --border-radius-pill:100px;
  --shadow-sm:0 2px 8px #00000008;
  --shadow-md:0 8px 28px #0000000d;
  --shadow-lg:0 16px 40px #00000018;
  --transition-fast:.15s ease;
  --transition-base:.25s ease;
}

*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:120px
}

body {
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased
}

img,video,svg {
  display:block;
  max-width:100%
}

img {
  height:auto
}

input,button,textarea,select {
  font:inherit
}

p,h1,h2,h3,h4,h5,h6 {
  overflow-wrap:break-word
}

ul,ol {
  list-style:none
}

a {
  text-decoration:none;
  color:inherit
}

button {
  cursor:pointer;
  border:0;
  background:none;
  color:inherit
}

a,button {
  -webkit-tap-highlight-color:transparent
}

:focus-visible {
  outline:3px solid #a85f0a;
  outline-offset:5px
}

h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-heading);
  color:var(--color-text-heading);
  font-weight:400;
  line-height:.95;
  letter-spacing:.01em
}

h1 {
  font-size:var(--font-size-hero)
}

h2 {
  font-size:var(--font-size-2xl)
}

h3 {
  font-size:var(--font-size-xl);
  letter-spacing:.02em
}

h4 {
  font-size:var(--font-size-lg)
}

.prose h2 {
  margin:2.5rem 0 1rem
}

.prose h2:first-child {
  margin-top:0
}

.container {
  width:min(100% - 96px,var(--max-width));
  margin-inline:auto
}

.container--narrow {
  max-width:var(--max-width-narrow)
}

.section {
  padding:var(--space-section) 0
}

.section--alt {
  background:var(--color-bg-alt)
}

.eyebrow,.section__eyebrow,.page-hero__eyebrow {
  display:block;
  font-size:.69rem;
  line-height:1.6;
  letter-spacing:.16em;
  font-weight:700;
  text-transform:uppercase;
  color:var(--color-primary);
  margin-bottom:1.25rem
}

.section__header {
  text-align:center;
  max-width:850px;
  margin:0 auto 3rem
}

.section__title {
  margin-bottom:1.3rem
}

.section__subtitle {
  max-width:670px;
  margin-inline:auto;
  font-size:1.05rem;
  line-height:1.8
}

.prose p+p {
  margin-top:1.1rem
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  min-height:48px;
  padding:.8rem 1.3rem;
  border:1px solid transparent;
  border-radius:var(--border-radius-pill);
  font-weight:700;
  font-size:.85rem;
  line-height:1.4;
  transition:background var(--transition-fast),transform var(--transition-fast),color var(--transition-fast)
}

.btn:hover {
  transform:translateY(-2px)
}

.btn--primary {
  background:var(--color-action);
  color:var(--color-primary);
  border-color:var(--color-primary);
  box-shadow:0 4px 0 var(--color-primary);
  font-weight:700
}

.btn--primary:hover {
  background:var(--color-action-hover);
  box-shadow:0 6px 0 var(--color-primary)
}

.btn--primary:active {
  transform:translateY(2px);
  box-shadow:0 2px 0 var(--color-primary)
}

.btn--secondary {
  border-color:var(--color-primary);
  color:var(--color-primary);
  background:transparent
}

.btn--secondary:hover {
  background:var(--color-primary-light)
}

.btn--lg {
  padding:1.05rem 1.7rem;
  font-size:.95rem;
  min-height:56px
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:1rem;
  color:var(--color-primary);
  font-size:.88rem;
  font-weight:600;
  border-bottom:1px solid var(--color-primary);
  padding-block:.4rem
}

.text-link:hover {
  border-bottom-width:2px
}

.card {
  padding:var(--space-xl);
  border:1px solid var(--color-border);
  border-radius:var(--border-radius-lg);
  background:var(--color-white)
}

.grid {
  display:grid;
  gap:var(--space-xl)
}

.grid--2 {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.grid--3 {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.skip-link {
  position:fixed;
  top:-150px;
  left:1rem;
  z-index:3000;
  padding:1rem 1.5rem;
  background:var(--color-primary);
  color:white;
  border-radius:8px
}

.skip-link:focus {
  top:1rem
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.site-header {
  position:sticky;
  top:0;
  background:var(--color-bg);
  z-index:1000;
  border-bottom:1px solid var(--color-border)
}

.site-header.is-scrolled {
  box-shadow:var(--shadow-sm)
}

.nav {
  max-width:var(--max-width);
  width:calc(100% - 96px);
  margin:auto;
  min-height:88px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}

.nav__logo {
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-heading);
  font-size:1.7rem;
  letter-spacing:.03em;
  color:var(--color-primary)
}

.nav__logo img {
  width:44px;
  height:44px;
  border-radius:50%
}

.nav__links {
  display:flex;
  align-items:center;
  gap:1.9rem
}

.nav__links a {
  font-size:.82rem;
  font-weight:600;
  padding:.8rem 0;
  display:block;
  color:var(--color-primary)
}

.nav__links a:hover,.nav__links a[aria-current] {
  text-decoration:underline;
  text-underline-offset:7px
}

.nav__actions {
  display:flex;
  align-items:center;
  gap:.8rem
}

.nav__mobile-only {
  display:none
}

.nav__hamburger {
  display:none;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  border:1px solid var(--color-border);
  border-radius:50%;
  flex-shrink:0
}

.nav__hamburger-line {
  width:20px;
  height:2px;
  background:var(--color-primary);
  transition:transform .2s
}

.nav__hamburger[aria-expanded=true] .nav__hamburger-line:first-child {
  transform:translateY(7px) rotate(45deg)
}

.nav__hamburger[aria-expanded=true] .nav__hamburger-line:nth-child(2) {
  opacity:0
}

.nav__hamburger[aria-expanded=true] .nav__hamburger-line:last-child {
  transform:translateY(-7px) rotate(-45deg)
}

.page-hero {
  padding:5rem 0 4.5rem;
  background:var(--color-bg-alt);
  text-align:center;
  border-bottom:1px solid var(--color-border)
}

.page-hero__title {
  max-width:1000px;
  margin:0 auto 1.5rem
}

.page-hero .cta-actions {
  margin-top:2rem
}

.page-hero__subtitle {
  max-width:670px;
  margin:auto;
  font-size:1.1rem;
  line-height:1.8
}

.cta-banner {
  padding:6rem 0;
  background:var(--color-accent-light);
  text-align:center;
  position:relative;
  overflow:hidden
}

.cta-banner h2 {
  font-size:clamp(2.5rem,5vw,4.7rem);
  max-width:930px;
  margin:auto
}

.cta-banner p:not(.eyebrow) {
  margin:1.5rem auto 2rem;
  max-width:590px;
  color:var(--color-primary)
}

.cta-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem
}

.cta-banner--photo {
  background:var(--color-primary) url('../assets/images/earth-960.webp') center/cover no-repeat;
  color:var(--color-footer-text)
}

@media(min-width:961px) {
  .cta-banner--photo {
    background-image:url('../assets/images/earth-1600.webp')
  }
}

.cta-banner--photo::before {
  content:"";
  position:absolute;
  inset:0;
  background:#000000a6
}

.cta-banner--photo .container {
  position:relative
}

.cta-banner--photo h2 {
  color:var(--color-white)
}

.cta-banner--photo p:not(.eyebrow) {
  color:var(--color-footer-text)
}

.site-footer {
  background:var(--color-footer-bg);
  color:var(--color-footer-text);
  padding:4.5rem 0 1.5rem
}

.footer__grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:2rem
}

.footer__brand-name {
  font-family:var(--font-heading);
  font-size:2rem;
  letter-spacing:.03em;
  color:var(--color-accent)
}

.footer__tagline {
  font-size:.83rem;
  line-height:1.85;
  max-width:300px;
  margin-top:1rem
}

.footer__col-title,.footer__heading {
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
  color:var(--color-accent)
}

.footer__links {
  display:grid;
  gap:.65rem
}

.footer__links li {
  font-size:.78rem;
  line-height:1.8
}

.footer__links a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.footer__social-links {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap
}

.footer__social-links a {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid #555;
  border-radius:50%
}

.footer__bottom {
  border-top:1px solid #333;
  margin-top:3rem;
  padding-top:1.5rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.7rem
}

.reveal,.reveal-pro {
  opacity:1;
  transform:none
}

@media(max-width:900px) {
  .container {
    width:calc(100% - 48px)
  }

  .nav {
    width:calc(100% - 48px);
    min-height:80px
  }

  .nav__hamburger {
    display:flex
  }

  .nav__actions {
    display:none
  }

  .nav__links {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--color-bg);
    padding:1.5rem 2rem 2rem;
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    max-height:calc(100dvh - 80px);
    overflow:auto;
    border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-lg)
  }

  .nav__links--open {
    display:flex
  }

  .nav__links a {
    font-size:1rem;
    padding:.65rem
  }

  .nav__links .btn--primary {
    color:var(--color-primary)
  }

  .nav__mobile-only {
    display:block;
    margin-top:.75rem
  }

  .menu-open {
    overflow:hidden
  }

  .footer__grid {
    grid-template-columns:repeat(2,1fr)
  }

  .footer__grid>div:first-child {
    grid-column:1/-1
  }

  .footer__tagline {
    max-width:400px
  }
}

@media(max-width:600px) {
  .container,.nav {
    width:calc(100% - 40px)
  }

  .nav {
    gap:.6rem
  }

  .nav__hamburger {
    width:44px;
    height:44px
  }

  .grid--2,.grid--3 {
    grid-template-columns:1fr
  }

  .footer__grid {
    grid-template-columns:1fr;
    gap:2rem 1rem
  }

  .footer__bottom {
    flex-direction:column
  }

  .page-hero {
    padding:3.5rem 0
  }

  .page-hero__title {
    font-size:3.2rem
  }

  .page-hero__subtitle {
    font-size:1rem
  }

  .cta-banner {
    padding:4rem 0
  }

  .cta-actions {
    flex-direction:column;
    align-items:center
  }

  .cta-actions .btn {
    width:min(100%,330px)
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}