/* ==========================================================================
   EARTHRISE LIVE - Stylesheet
   Cinematic, premium, sponsor-ready design system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color - deep space → sunrise palette */
  --c-space-deep:    #000814;
  --c-space-mid:     #001D3D;
  --c-space-light:   #003566;
  --c-night:         #02101e;

  --c-sunrise-gold:  #FFC300;
  --c-sunrise-warm:  #FFD60A;
  --c-sunrise-soft:  #FFEEB0;

  --c-electric:      #00B4D8;
  --c-electric-soft: #4ECDC4;

  --c-white:         #FFFFFF;
  --c-bone:          #F8F4E9;
  --c-cloud:         #E8EEF5;
  --c-mist:          #B7C3D4;
  --c-stone:         #6E7A8C;
  --c-charcoal:      #2A3441;

  /* Type */
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (fluid) */
  --t-hero:    clamp(2.75rem, 7vw + 0.5rem, 6.5rem);
  --t-h2:      clamp(2rem, 4vw + 0.5rem, 4rem);
  --t-h3:      clamp(1.25rem, 1vw + 0.875rem, 1.625rem);
  --t-lead:    clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-eyebrow: 0.75rem;

  /* Space */
  --sp-section: clamp(5rem, 10vw, 9rem);
  --sp-block:   clamp(2rem, 4vw, 4rem);
  --container:  1280px;
  --container-narrow: 920px;

  /* Other */
  --radius:    14px;
  --radius-lg: 22px;
  --shadow-glow: 0 0 80px rgba(255, 195, 0, 0.18);
  --shadow-card: 0 30px 70px -20px rgba(0, 8, 20, 0.65);
  --t-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-bone);
  background: var(--c-space-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

/* Global starfield - one continuous, calm deep-space backdrop woven behind the
   whole page. Fixed so content drifts over it. Deliberately faint (low-alpha
   dots) so it never competes with text - premium, not busy. The hero keeps its
   own brighter, animated stars on top of this. */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--c-space-deep);
  background-image:
    radial-gradient(1px 1px at 8% 12%,    rgba(255,255,255,0.45) 50%, transparent),
    radial-gradient(1px 1px at 17% 64%,   rgba(255,255,255,0.32) 50%, transparent),
    radial-gradient(1.5px 1.5px at 27% 28%, rgba(255,255,255,0.50) 50%, transparent),
    radial-gradient(1px 1px at 36% 82%,   rgba(255,255,255,0.30) 50%, transparent),
    radial-gradient(1px 1px at 44% 18%,   rgba(255,255,255,0.38) 50%, transparent),
    radial-gradient(1px 1px at 52% 54%,   rgba(255,255,255,0.30) 50%, transparent),
    radial-gradient(2px 2px at 61% 36%,   rgba(255,255,255,0.42) 50%, transparent),
    radial-gradient(1px 1px at 69% 76%,   rgba(255,255,255,0.32) 50%, transparent),
    radial-gradient(1px 1px at 76% 22%,   rgba(255,255,255,0.40) 50%, transparent),
    radial-gradient(1.5px 1.5px at 84% 58%, rgba(255,255,255,0.46) 50%, transparent),
    radial-gradient(1px 1px at 92% 34%,   rgba(255,255,255,0.34) 50%, transparent),
    radial-gradient(1px 1px at 96% 80%,   rgba(255,255,255,0.30) 50%, transparent),
    radial-gradient(1px 1px at 12% 92%,   rgba(255,255,255,0.28) 50%, transparent),
    radial-gradient(1px 1px at 33% 46%,   rgba(255,255,255,0.26) 50%, transparent),
    radial-gradient(1px 1px at 58% 8%,    rgba(255,255,255,0.34) 50%, transparent);
  background-repeat: repeat;
  background-size: 760px 760px;
}

a { color: inherit; text-decoration: none; transition: color 200ms var(--t-ease), opacity 200ms var(--t-ease); }
a:hover { color: var(--c-sunrise-gold); }

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

::selection { background: var(--c-sunrise-gold); color: var(--c-space-deep); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.05em 1.85em;
  font-family: var(--f-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 280ms var(--t-ease), box-shadow 280ms var(--t-ease), background 280ms var(--t-ease), color 280ms var(--t-ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--c-sunrise-warm) 0%, var(--c-sunrise-gold) 100%);
  color: var(--c-space-deep);
  box-shadow: 0 10px 30px -8px rgba(255, 195, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover {
  color: var(--c-space-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(255, 195, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--c-bone);
  border: 1px solid rgba(248, 244, 233, 0.25);
}
.btn-ghost:hover {
  border-color: var(--c-sunrise-gold);
  color: var(--c-sunrise-gold);
}

.btn-sm { padding: 0.75em 1.4em; font-size: 0.875rem; }
.btn-block { width: 100%; padding: 1.15em; font-size: 1rem; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background 300ms var(--t-ease), padding 300ms var(--t-ease), border-color 300ms var(--t-ease), backdrop-filter 300ms var(--t-ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(0, 8, 20, 0.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  padding: 0.7rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0;
  color: var(--c-white);
}
.brand:hover { color: var(--c-sunrise-gold); }
.brand-mark { display: inline-flex; align-items: center; }
.brand-divider {
  color: var(--c-sunrise-gold);
  margin: 0 0.05em;
  font-weight: 800;
}

.primary-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.primary-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-cloud);
  letter-spacing: 0.01em;
  position: relative;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--c-sunrise-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--t-ease);
}
.primary-nav a:hover { color: var(--c-bone); }
.primary-nav a:hover::after { transform: scaleX(1); }
/* Scroll-spy: the section currently in view gets a persistent gold underline
   and brighter label, so the nav reads as a live map of where you are. */
.primary-nav a.is-active { color: var(--c-white); }
.primary-nav a.is-active::after { transform: scaleX(1); }

/* Scroll-progress bar - thin gold line at the very top that fills as you
   scroll, giving a subconscious "there's more below / I'm X% through" pull. */
.scroll-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--c-sunrise-warm), var(--c-sunrise-gold));
  box-shadow: 0 0 10px rgba(255, 195, 0, 0.6);
  z-index: 120;
  transition: width 120ms linear;
}

.header-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 40px; height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 24px;
  background: var(--c-bone);
  transition: transform 250ms var(--t-ease), opacity 250ms var(--t-ease);
  margin: 0 auto;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(0, 8, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.5rem 2rem 2.5rem;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  padding: 0.95rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-nav .mobile-cta {
  margin-top: 1rem;
  padding: 1.1rem 1.5rem;
  background: var(--c-sunrise-gold);
  color: var(--c-space-deep);
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding: clamp(4.5rem, 9vh, 7.5rem) 0 3.5rem;
  overflow: hidden;
  background: var(--c-space-deep);
}

/* Tall screens (4K and large desktops): centre the hero vertically so the
   content isn't pinned to the top with a large void beneath it. The Earth is
   absolutely positioned and centred to match. */
@media (min-height: 950px) {
  .hero {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Vertical centering that PRESERVES the square. NOTE: this override is placed
     before the base .earth-container rule in source order, so it MUST out-rank
     it on specificity (.hero .earth-container = 0,2,0 > .earth-container = 0,1,0)
     or the base `top: clamp(...)` silently wins and only `transform` applies,
     shoving the planet off the top of the screen. top:50% + translateY(-50%)
     with bottom:auto keeps height == width so the Earth stays a true circle. */
  .hero .earth-container {
    top: 50%;
    bottom: auto;
    margin: 0;
    transform: translateY(-50%);
  }
}

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Stars layer */
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,0.8) 50%, transparent),
    radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1.5px 1.5px at 45% 15%, rgba(255,255,255,0.9) 50%, transparent),
    radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1px 1px at 75% 25%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(2px 2px at 88% 60%, rgba(255,255,255,0.85) 50%, transparent),
    radial-gradient(1px 1px at 18% 88%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1px 1px at 33% 38%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1.5px 1.5px at 52% 92%, rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1px 1px at 82% 12%, rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1px 1px at 95% 80%, rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.55) 50%, transparent),
    radial-gradient(1px 1px at 38% 75%, rgba(255,255,255,0.5) 50%, transparent),
    radial-gradient(1px 1px at 65% 8%, rgba(255,255,255,0.6) 50%, transparent);
  opacity: 0.85;
  animation: starsTwinkle 6s ease-in-out infinite alternate;
}

/* Sunrise glow */
.sunrise-glow {
  position: absolute;
  right: -10%;
  top: 30%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle at 30% 50%,
    rgba(255, 195, 0, 0.28) 0%,
    rgba(255, 214, 10, 0.16) 20%,
    rgba(0, 180, 216, 0.06) 40%,
    transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}

/* Earth - daylight Three.js canvas. Anchored to the same 3300px stage as the
   content (horizontally). On tall viewports it is vertically centred (see the
   min-height media query) via top:50% + translateY so the 1:1 aspect-ratio is
   preserved. Stage widened 2700 -> 3300 and width cap raised 1080 -> 1500 so the
   planet fills 4K displays and sits closer to the right edge. */
.earth-container {
  position: absolute;
  /* Floor at 0 (not -3vw) so on viewports narrower than the 3300 stage the
     planet sits flush to the right edge instead of being pushed off-screen and
     sliced. On wider screens it pulls inward with the centred stage. */
  right: max(0px, calc((100vw - 3300px) / 2));
  top: clamp(4.5rem, 9vh, 7.5rem);   /* mirrors .hero padding-top (short screens only) */
  /* Size: capped by width (48vw, max 1500) AND height (min of 80vh/80svh) so
     the 1:1 Earth always fits the hero and is never so large it gets sliced by
     the viewport edges. 80vh keeps 1080p/1440p unchanged; the 1500 cap only
     engages on tall 4K displays. */
  width: min(clamp(420px, 48vw, 1500px), 80vh, 80svh);
  aspect-ratio: 1/1;
  pointer-events: none;
  opacity: 0.97;
}

.earth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 0 80px rgba(0, 180, 216, 0.20))
    drop-shadow(0 0 120px rgba(255, 195, 0, 0.10));
}

/* Static CSS-only fallback when WebGL is unavailable */
.earth-fallback {
  display: none;
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%,
      #4a8fc9 0%,
      #1f5a8a 28%,
      #0c3a5e 55%,
      #06243d 78%,
      #02101e 100%);
  box-shadow:
    inset -20px -25px 60px rgba(0, 8, 20, 0.7),
    inset 20px 20px 60px rgba(255, 230, 180, 0.10),
    0 0 100px rgba(0, 180, 216, 0.18),
    0 0 160px rgba(255, 195, 0, 0.10);
}

.earth-aura {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 195, 0, 0.10) 0%, transparent 55%),
    radial-gradient(circle, rgba(0, 180, 216, 0.06) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  animation: auraPulse 10s ease-in-out infinite alternate;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0, 8, 20, 0.85) 0%, rgba(0, 8, 20, 0.6) 35%, rgba(0, 8, 20, 0.15) 65%, transparent 90%),
    linear-gradient(to bottom, transparent 60%, rgba(0, 8, 20, 0.85) 100%);
}

/* Hero content - left-anchored to the hero stage.
   At viewports up to ~3200px the stage is the full viewport (margin-left: 0).
   Beyond 3200px the stage caps and centers, so the content doesn't get marooned
   on the far-left of a very wide display while the Earth sits on the far-right.
   Stage was 2200 - bumped to 3200 so 4K viewports actually fill the screen. */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1500px;          /* wide enough to fit 192px headline on 3 lines */
  margin-left: max(0px, calc((100vw - 3300px) / 2));
  margin-right: auto;
  padding-left: clamp(1.25rem, 5vw, 120px);
}

.hero-eyebrow {
  font-size: clamp(0.75rem, 0.1vw + 0.7rem, 0.875rem);
  letter-spacing: 0.32em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--c-sunrise-soft);
  margin-bottom: clamp(1.25rem, 1.5vw, 2rem);
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  background: rgba(255, 195, 0, 0.08);
  border: 1px solid rgba(255, 195, 0, 0.22);
  border-radius: 999px;
}
.hero-eyebrow .brand-divider { color: var(--c-sunrise-gold); }

.hero-headline {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 8.5vw + 0.125rem, 12rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.028em;
  color: var(--c-white);
  margin-bottom: clamp(1.25rem, 1.5vw, 2.5rem);
  font-variation-settings: "opsz" 144;
}
.hero-headline .accent {
  font-style: italic;
  background: linear-gradient(135deg, var(--c-sunrise-warm) 0%, var(--c-sunrise-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
  /* Italic glyphs (esp. trailing punctuation) extend past the element's
     logical right edge. Without a touch of padding the gradient is clipped
     at the box boundary and you lose the right edge of the period. */
  padding-right: 0.08em;
}

.hero-sub {
  font-size: clamp(1.125rem, 1.2vw + 0.75rem, 2.75rem);
  color: var(--c-cloud);
  margin-bottom: clamp(1rem, 1.2vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.25;
}

.hero-body {
  /* Real viewport flex: ~18px at 1366 → ~23px at 1920 → caps at ~30px on 4K.
     Slope was 0.4vw (only ~2px change across desktop sizes); now 0.85vw so
     the body actually scales with the screen. */
  font-size: clamp(1rem, 0.85vw + 0.4rem, 1.85rem);
  line-height: 1.55;
  color: var(--c-mist);
  margin-bottom: clamp(1.25rem, 1.3vw, 2rem);
  /* Column width scales with viewport so the body always clears the Earth.
     The Earth occupies ~54vw on the right; body column stays under ~42vw on
     the left, leaving a small visual gap. Caps at 1100px on 4K. */
  max-width: clamp(580px, 42vw, 1100px);
}

.hero-pitch {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.3vw + 0.75rem, 2.75rem);
  font-style: italic;
  color: var(--c-sunrise-soft);
  margin-bottom: clamp(1.5rem, 2vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
.hero-ctas .btn {
  /* ~16px at 1366 → ~18px at 1920 → caps at 22px on 4K */
  font-size: clamp(0.9375rem, 0.35vw + 0.7rem, 1.375rem);
  padding: clamp(1em, 0.3vw + 0.95em, 1.25em) clamp(1.7em, 0.5vw + 1.5em, 2.4em);
}

.hero-credibility {
  font-size: clamp(0.8125rem, 0.2vw + 0.75rem, 1.125rem);
  color: var(--c-stone);
  max-width: 820px;
  line-height: 1.65;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-credibility strong { color: var(--c-cloud); font-weight: 600; }

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  z-index: 3;
}
.scroll-indicator span {
  width: 2px;
  height: 6px;
  background: var(--c-sunrise-gold);
  border-radius: 999px;
  animation: scrollDot 2.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   6. Section base
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  z-index: 1;                 /* sit above the fixed .sky starfield */
  padding: var(--sp-section) 0;
}

.section-eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-sunrise-gold);
  margin-bottom: 1.25rem;
}

.section-headline {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-white);
  margin-bottom: 2.5rem;
  max-width: 980px;
  font-variation-settings: "opsz" 144;
}

.section-intro {
  font-size: var(--t-lead);
  color: var(--c-cloud);
  margin-bottom: 3rem;
  max-width: 720px;
  line-height: 1.6;
}

.lead {
  font-family: var(--f-display);
  font-size: var(--t-lead);
  font-weight: 400;
  color: var(--c-bone);
  line-height: 1.5;
  font-variation-settings: "opsz" 24;
}

/* --------------------------------------------------------------------------
   7. The Moment
   -------------------------------------------------------------------------- */
.section-moment {
  background: transparent;
  padding-top: clamp(4rem, 8vw, 7rem);
}

.moment-body {
  max-width: var(--container-narrow);
}
.moment-body p { margin-bottom: 1.5rem; font-size: 1.125rem; color: var(--c-cloud); line-height: 1.7; }
.moment-body .lead { font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem); margin-bottom: 2.5rem; color: var(--c-white); }

.moment-list {
  list-style: none;
  margin: 2.5rem 0 3rem;
  border-left: 2px solid var(--c-sunrise-gold);
  padding-left: 1.75rem;
}
.moment-list li {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 1.5vw + 0.75rem, 1.875rem);
  font-weight: 300;
  font-style: italic;
  color: var(--c-bone);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.moment-list li em { color: var(--c-sunrise-soft); font-style: italic; font-weight: 400; }

/* --------------------------------------------------------------------------
   8. Movement
   -------------------------------------------------------------------------- */
.section-movement {
  background: var(--c-space-mid);
}

.movement-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.movement-text p {
  font-size: 1.125rem;
  color: var(--c-cloud);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.movement-verbs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2.5rem;
  background: rgba(255, 195, 0, 0.04);
  border: 1px solid rgba(255, 195, 0, 0.18);
  border-radius: var(--radius-lg);
}
.movement-verbs li {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  font-weight: 400;
  font-style: italic;
  color: var(--c-sunrise-soft);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   9. Partner Proposition
   -------------------------------------------------------------------------- */
.section-partner {
  background: linear-gradient(180deg, var(--c-space-mid) 0%, var(--c-space-deep) 100%);
}

.partner-intro {
  max-width: 900px;
  margin-bottom: 4rem;
}
.partner-intro p {
  font-size: 1.125rem;
  color: var(--c-cloud);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.promise-card {
  background: linear-gradient(160deg, rgba(255, 195, 0, 0.04) 0%, rgba(0, 180, 216, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.25rem 1.75rem 2rem;
  border-radius: var(--radius-lg);
  transition: transform 400ms var(--t-ease), border-color 400ms var(--t-ease), background 400ms var(--t-ease);
}
.promise-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 195, 0, 0.35);
  background: linear-gradient(160deg, rgba(255, 195, 0, 0.08) 0%, rgba(0, 180, 216, 0.05) 100%);
}
.promise-num {
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-sunrise-gold);
  letter-spacing: 0.18em;
  margin-bottom: 1.5rem;
}
.promise-card h3 {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--c-white);
  margin-bottom: 0.4rem;
  line-height: 1;
  font-variation-settings: "opsz" 60;
}
.promise-card p { font-size: 0.9375rem; color: var(--c-mist); line-height: 1.55; }

/* --------------------------------------------------------------------------
   10. Evidence
   -------------------------------------------------------------------------- */
.section-evidence {
  background: var(--c-space-deep);
  position: relative;
}
.section-evidence::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 195, 0, 0.4), transparent);
}

.evidence-intro {
  max-width: 900px;
  margin-bottom: 4rem;
}
.evidence-intro p {
  font-size: 1.125rem;
  color: var(--c-cloud);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}
.evidence-intro strong { color: var(--c-sunrise-soft); font-weight: 600; }

.number-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.num-tile {
  padding: 2.5rem 2rem;
  background: rgba(0, 29, 61, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: border-color 300ms var(--t-ease), transform 300ms var(--t-ease);
}
.num-tile:hover {
  border-color: rgba(255, 195, 0, 0.3);
  transform: translateY(-3px);
}
.num {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
  font-weight: 400;
  line-height: 1;
  background: linear-gradient(135deg, var(--c-sunrise-warm) 0%, var(--c-sunrise-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}
.num-unit {
  font-size: 0.55em;
  vertical-align: top;
  margin-left: 0.05em;
  display: inline-block;
  transform: translateY(0.2em);
}
.num-icon {
  background: linear-gradient(135deg, var(--c-electric) 0%, var(--c-electric-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 0.65em;
}
.num-label {
  font-family: var(--f-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-white);
  margin-bottom: 0.75rem;
  letter-spacing: 0.005em;
}
.num-label em { font-style: italic; color: var(--c-sunrise-soft); }
.num-tile p { font-size: 1rem; color: var(--c-mist); line-height: 1.65; }

/* --------------------------------------------------------------------------
   11. How It Works
   -------------------------------------------------------------------------- */
.section-how {
  background: linear-gradient(180deg, transparent 0%, rgba(0,29,61,0.6) 14%, rgba(0,29,61,0.6) 86%, transparent 100%);
}

.layers {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin: 3rem 0;
}

.layer {
  text-align: center;
  padding: 2.5rem 1.75rem;
  background: rgba(0, 53, 102, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: border-color 300ms var(--t-ease), background 300ms var(--t-ease);
}
.layer:hover {
  border-color: rgba(255, 195, 0, 0.35);
  background: rgba(0, 53, 102, 0.45);
}

.layer-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--c-stone);
  margin-bottom: 1.25rem;
}

.layer-brand {
  font-family: var(--f-sans);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-white);
  margin-bottom: 0.5rem;
}

.layer-tag {
  font-family: var(--f-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--c-sunrise-gold);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.layer-desc { font-size: 0.9375rem; color: var(--c-mist); line-height: 1.6; }

.layer-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
}
.layer-connector span {
  display: block;
  width: 32px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-sunrise-gold), transparent);
  position: relative;
}
.layer-connector span::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--c-sunrise-gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--c-sunrise-gold);
}

.how-summary {
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  color: var(--c-cloud);
  font-style: italic;
  max-width: 720px;
  margin: 3rem auto 0;
  line-height: 1.5;
  font-weight: 400;
}
.how-summary strong { color: var(--c-white); font-style: normal; font-weight: 600; }

/* --------------------------------------------------------------------------
   12. What Partners Help Power
   -------------------------------------------------------------------------- */
.section-power {
  background: var(--c-space-mid);
}

.power-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.power-card {
  padding: 2.25rem 1.75rem;
  background: rgba(0, 8, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: transform 320ms var(--t-ease), border-color 320ms var(--t-ease);
}
.power-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 180, 216, 0.4);
}

.power-icon {
  font-size: 1.875rem;
  color: var(--c-sunrise-gold);
  margin-bottom: 1.25rem;
  line-height: 1;
}
.power-card h3 {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: 0.6rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
  font-variation-settings: "opsz" 36;
}
.power-card p { font-size: 0.9375rem; color: var(--c-mist); line-height: 1.6; }

/* --------------------------------------------------------------------------
   13. Why Partners Join
   -------------------------------------------------------------------------- */
.section-why {
  background: linear-gradient(180deg, transparent 0%, rgba(0,29,61,0.6) 14%, rgba(0,29,61,0.6) 86%, transparent 100%);
}

.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem 3rem;
}

.reason {
  padding-left: 1.5rem;
  border-left: 2px solid rgba(255, 195, 0, 0.5);
}
.reason h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: 0.85rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 36;
}
.reason p { font-size: 1rem; color: var(--c-cloud); line-height: 1.7; }

/* --------------------------------------------------------------------------
   14. Partnership Routes
   -------------------------------------------------------------------------- */
.section-routes {
  background: transparent;
}

/* Routes intro uses the full content width so it lands in two lines, not three. */
.section-routes .section-intro {
  max-width: 1080px;
}

.routes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
  align-items: stretch;
  grid-auto-rows: 1fr; /* all 8 cards render exactly the same height */
}

.route-card {
  padding: 2.25rem 1.75rem 2rem;
  background: linear-gradient(160deg, rgba(255, 195, 0, 0.04) 0%, rgba(0, 8, 20, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  transition: transform 320ms var(--t-ease), border-color 320ms var(--t-ease), box-shadow 320ms var(--t-ease);
  position: relative;
}
.route-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 195, 0, 0.45);
  box-shadow: var(--shadow-card);
}
.route-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-sunrise-gold);
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(255, 195, 0, 0.35);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.route-card h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: 0.6rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  font-variation-settings: "opsz" 36;
}
.route-card p { font-size: 1rem; color: var(--c-mist); line-height: 1.65; }

/* "It doesn't need to cost the earth to support the earth." - warm
   reassurance line that lands right before the CTA, in place of published
   prices. */
.routes-affordable {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.875rem);
  font-weight: 400;
  text-align: center;
  color: var(--c-sunrise-soft);
  max-width: 760px;
  margin: 3rem auto 1.75rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 60;
}

.routes-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   15. Safety
   -------------------------------------------------------------------------- */
.section-safety {
  background: transparent;
}

.safety-body {
  max-width: 1180px; /* wider than narrow container so the lead lands in two lines */
  margin-bottom: 3rem;
}
.safety-body p { font-size: 1.125rem; color: var(--c-cloud); margin-bottom: 1.5rem; line-height: 1.7; }
/* All safety paragraphs use the full widened column so each lands in ~2 lines,
   keeping the section compact and the trust panel above the fold. */
.safety-body .lead { font-size: clamp(1.375rem, 1.5vw + 0.75rem, 1.875rem); color: var(--c-white); margin-bottom: 2.5rem; }
.safety-body strong { color: var(--c-sunrise-soft); font-weight: 600; }

.trust-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem 2rem;
  padding: 2.5rem;
  background: rgba(255, 195, 0, 0.04);
  border: 1px solid rgba(255, 195, 0, 0.2);
  border-radius: var(--radius-lg);
}
.trust-points li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1rem;
  color: var(--c-bone);
  font-weight: 500;
}
.trust-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--c-sunrise-gold);
  color: var(--c-space-deep);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   16. Media & Storytelling
   -------------------------------------------------------------------------- */
.section-media {
  background: linear-gradient(180deg, transparent 0%, rgba(0,29,61,0.6) 14%, rgba(0,29,61,0.6) 86%, transparent 100%);
}

/* Three-beat stanza. All lines share one size so the long third line doesn't
   balloon and break the rhythm - the gold colour carries the emphasis, not
   scale. Tight top margin keeps it close to the heading; tight line spacing
   makes the three beats read as one cohesive block. */
.media-statement {
  margin: 1.5rem 0 2.5rem;
}
.media-statement p { margin: 0; }
.media-statement .line {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 2.6vw + 0.6rem, 3rem);
  font-weight: 400;
  font-style: italic;
  color: var(--c-white);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 0.15rem;
  font-variation-settings: "opsz" 144;
  max-width: 34ch; /* long third line breaks to ~2 lines but still fills the width */
}
.media-statement p:last-child .line {
  font-weight: 500;
  background: linear-gradient(135deg, var(--c-sunrise-warm) 0%, var(--c-sunrise-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 0.5rem;
}

.media-body {
  font-size: 1.125rem;
  color: var(--c-cloud);
  line-height: 1.7;
  max-width: 1100px; /* two lines instead of three */
  margin-bottom: 3rem;
}

.assets-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-sunrise-gold);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

/* Media/story assets as a 2x3 card grid (matches the card language used
   across the page). Collapses to 1 column on narrow viewports. */
.media-assets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}
.asset-card {
  padding: 1.5rem 1.5rem;
  background: rgba(0, 8, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: transform 280ms var(--t-ease), border-color 280ms var(--t-ease);
}
.asset-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 195, 0, 0.35);
}
.asset-card h3 {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: 0.4rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 36;
}
.asset-card p {
  font-size: 0.9375rem;
  color: var(--c-mist);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   17. Briefing / Form
   -------------------------------------------------------------------------- */
.section-briefing {
  background:
    radial-gradient(ellipse at top left, rgba(255, 195, 0, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(0, 180, 216, 0.08) 0%, transparent 50%),
    transparent;
  position: relative;
}

.briefing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.briefing-intro .section-headline { margin-bottom: 1.75rem; }
.briefing-intro .lead { margin-bottom: 1.25rem; color: var(--c-cloud); }
.briefing-intro p { color: var(--c-cloud); margin-bottom: 1.25rem; font-size: 1.0625rem; line-height: 1.65; }

.briefing-secondary { font-size: 0.9375rem !important; color: var(--c-mist) !important; }
.briefing-secondary a { color: var(--c-sunrise-gold); border-bottom: 1px dashed rgba(255, 195, 0, 0.4); padding-bottom: 1px; }
.briefing-secondary a:hover { border-bottom-color: var(--c-sunrise-gold); }

.briefing-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  padding: 2.5rem;
  background: rgba(0, 8, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}

.form-row { display: flex; flex-direction: column; gap: 0.45rem; }
.form-row-wide { grid-column: 1 / -1; }

.form-row label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mist);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--f-sans);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: var(--c-white);
  transition: border-color 200ms var(--t-ease), background 200ms var(--t-ease), box-shadow 200ms var(--t-ease);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--c-sunrise-gold);
  background: rgba(255, 195, 0, 0.04);
  box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.15);
}
.form-row select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23FFC300' d='M5.5 7l4.5 5 4.5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}
.form-row textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

.form-consent { margin-top: 0.25rem; }
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
  font-size: 0.9375rem !important;
  color: var(--c-cloud);
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  line-height: 1.55;
}
.checkbox-row input {
  width: 18px; height: 18px;
  margin: 0;
  margin-top: 2px;
  accent-color: var(--c-sunrise-gold);
  flex-shrink: 0;
}

.form-row > .btn-block {
  margin-top: 0.5rem;
}
.briefing-form > button[type="submit"] {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}

.form-note {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--c-mist);
  text-align: center;
  margin-top: 0.5rem;
  line-height: 1.5;
}

.form-success {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 195, 0, 0.08);
  border: 1px solid var(--c-sunrise-gold);
  border-radius: 10px;
  margin-top: 1rem;
}
.form-success h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--c-sunrise-soft);
  margin-bottom: 0.5rem;
  font-style: italic;
  font-weight: 400;
}
.form-success p { color: var(--c-cloud); font-size: 1rem; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-night);
  padding: 5rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-brand .brand-mark {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-white);
  margin-bottom: 1rem;
}
.footer-brand p { color: var(--c-mist); font-size: 0.9375rem; line-height: 1.6; max-width: 380px; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
}
.footer-nav h4 {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-sunrise-gold);
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.footer-nav a {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.9375rem;
  color: var(--c-mist);
}
.footer-nav a:hover { color: var(--c-sunrise-gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
}
.footer-bottom p { font-size: 0.8125rem; color: var(--c-stone); max-width: 720px; line-height: 1.55; }
.footer-copy { white-space: nowrap; }

/* --------------------------------------------------------------------------
   ENHANCEMENTS - added during sponsor-readiness pass
   New sections: What children will do · Built from proven foundations ·
                 Built to reach the world · What partner support enables ·
                 Founding partner window
   -------------------------------------------------------------------------- */

.section-headline-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* "How the pieces fit together" - its content (preface, trust pill, layer
   cards, summary) is centered, so the eyebrow + heading are centered to match. */
.section-how .section-eyebrow,
.section-how .section-headline {
  text-align: center;
}
.section-how .section-headline {
  margin-left: auto;
  margin-right: auto;
}

/* What children will do - the warm, simple, human strip */
.section-children {
  background: linear-gradient(180deg, transparent 0%, rgba(0,29,61,0.6) 14%, rgba(0,29,61,0.6) 86%, transparent 100%);
  text-align: center;
  position: relative;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
/* (children gold top/bottom divider lines removed - consistency pass:
   gold is reserved for accents, not section framing) */

.section-children .section-eyebrow {
  text-align: center;
}

.children-actions {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2rem 0;
  margin: 2rem auto 3rem;
  max-width: 1100px;
}
.children-actions li {
  font-family: var(--f-display);
  font-size: clamp(1.875rem, 3vw + 0.75rem, 3.25rem);
  font-weight: 400;
  font-style: italic;
  color: var(--c-sunrise-soft);
  letter-spacing: -0.015em;
  line-height: 1.05;
  padding: 0 1.5rem;
  position: relative;
  font-variation-settings: "opsz" 144;
}
.children-actions li:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: -0.45rem;
  top: 50%;
  transform: translateY(-58%);
  color: var(--c-sunrise-gold);
  opacity: 0.55;
  font-style: normal;
  font-size: 1.5em;
  line-height: 1;
}

.children-supporting {
  font-family: var(--f-sans);
  font-size: 1.125rem;
  color: var(--c-cloud);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Built from proven foundations - reuses .number-tiles + .num-tile */
.section-foundations {
  background: linear-gradient(180deg, transparent 0%, rgba(0,29,61,0.6) 14%, rgba(0,29,61,0.6) 86%, transparent 100%);
  position: relative;
}

.foundations-intro {
  max-width: 900px;
  margin-bottom: 4rem;
}
.foundations-intro p {
  font-size: 1.125rem;
  color: var(--c-cloud);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}
.foundations-intro strong {
  color: var(--c-sunrise-soft);
  font-weight: 600;
}

/* Built to reach the world - four cards (Reach / Delivery / Trust / Flexibility) */
.section-reach {
  background: transparent;
}

.reach-intro {
  max-width: 900px;
  margin-bottom: 3.5rem;
}
.reach-intro p {
  font-size: 1.125rem;
  color: var(--c-cloud);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}
.reach-intro strong {
  color: var(--c-sunrise-soft);
  font-weight: 600;
}
.reach-link {
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 195, 0, 0.45);
  transition: border-color 200ms var(--t-ease);
}
.reach-link strong { color: var(--c-sunrise-gold); }
.reach-link:hover { border-bottom-color: var(--c-sunrise-gold); }

.reach-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.reach-card {
  padding: 2.25rem 1.75rem 2rem;
  background: linear-gradient(160deg, rgba(255, 195, 0, 0.04) 0%, rgba(0, 8, 20, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  transition: transform 320ms var(--t-ease), border-color 320ms var(--t-ease);
}
.reach-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 180, 216, 0.45);
}
.reach-label {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-electric-soft);
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(78, 205, 196, 0.4);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.reach-card h3 {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: 0.7rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  font-variation-settings: "opsz" 36;
}
.reach-card p {
  font-size: 1rem;
  color: var(--c-mist);
  line-height: 1.65;
}

/* What partner support enables - eight enabling cards */
.section-enables {
  background: linear-gradient(180deg, transparent 0%, rgba(0,29,61,0.6) 14%, rgba(0,29,61,0.6) 86%, transparent 100%);
}

/* Fixed 3-column grid (3×3 with 9 cards). Compacted padding + line-height so
   the section reads as one tidy block and does not overrun tall content into
   the next section. Collapses to 2-col then 1-col on narrower viewports. */
.enables-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}

.enables-card {
  padding: 1.5rem 1.5rem;
  background: rgba(0, 29, 61, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: transform 280ms var(--t-ease), border-color 280ms var(--t-ease);
}
.enables-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 195, 0, 0.35);
}
.enables-icon {
  font-size: 1.5rem;
  color: var(--c-sunrise-gold);
  margin-bottom: 0.75rem;
  line-height: 1;
}
.enables-card h3 {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: 0.4rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  font-variation-settings: "opsz" 36;
}
.enables-card p {
  font-size: 0.9375rem;
  color: var(--c-mist);
  line-height: 1.55;
}

.enables-summary {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  color: var(--c-cloud);
  font-style: italic;
  text-align: center;
  max-width: 820px;
  margin: 1rem auto 0;
  line-height: 1.5;
  font-weight: 400;
  font-variation-settings: "opsz" 60;
}
.enables-summary strong {
  color: var(--c-white);
  font-style: normal;
  font-weight: 600;
}

/* "How the pieces fit together" - definitional lead-in */
.how-preface {
  max-width: 820px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.how-preface-lead {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1vw + 0.875rem, 1.625rem);
  color: var(--c-cloud);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.005em;
}
.how-preface-trust {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-sunrise-soft);
  padding: 0.7rem 1.25rem;
  background: rgba(255, 195, 0, 0.06);
  border: 1px solid rgba(255, 195, 0, 0.28);
  border-radius: 999px;
  line-height: 1.4;
  max-width: 640px;
}

/* Founding partner window - urgent, prestigious CTA banner */
.section-founding {
  background:
    radial-gradient(ellipse at center, rgba(255, 195, 0, 0.10) 0%, transparent 60%),
    transparent;
}

.founding-card {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse at top left, rgba(255, 195, 0, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(0, 180, 216, 0.08) 0%, transparent 55%),
    rgba(0, 8, 20, 0.55);
  border: 1px solid rgba(255, 195, 0, 0.45);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow:
    0 30px 90px -30px rgba(255, 195, 0, 0.35),
    0 0 0 1px rgba(255, 195, 0, 0.15);
  overflow: hidden;
}
.founding-card::before {
  content: '';
  position: absolute;
  top: 0; left: -20%; right: -20%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--c-sunrise-gold), transparent);
  opacity: 0.85;
}

.founding-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: rgba(255, 195, 0, 0.10);
  border: 1px solid rgba(255, 195, 0, 0.4);
  border-radius: 999px;
  margin-bottom: 1.75rem;
}
.founding-pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-sunrise-gold);
  box-shadow: 0 0 0 0 rgba(255, 195, 0, 0.7);
  animation: foundingPulse 2.2s ease-out infinite;
}
.founding-status-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--c-sunrise-soft);
  font-weight: 600;
}

.founding-headline {
  font-family: var(--f-display);
  font-size: clamp(1.875rem, 3.5vw + 0.5rem, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-white);
  margin-bottom: 1.75rem;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-variation-settings: "opsz" 144;
}

.founding-body {
  font-size: 1.0625rem;
  color: var(--c-cloud);
  line-height: 1.7;
  max-width: 660px;
  margin: 0 auto 1.25rem;
}
.founding-body strong {
  color: var(--c-sunrise-soft);
  font-weight: 600;
}

.founding-cta {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   19. Reveal animations
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 900ms var(--t-ease), transform 900ms var(--t-ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .earth-aura, .stars, .scroll-indicator span { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   20. Keyframes
   -------------------------------------------------------------------------- */
@keyframes earthRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes auraPulse {
  0%   { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 1.0; transform: scale(1.05); }
}

@keyframes ptPulse {
  0%, 100% { opacity: 0.45; r: 3; }
  50%      { opacity: 1; r: 5; }
}

@keyframes arcDraw {
  0%   { stroke-dashoffset: 400; opacity: 0; }
  20%  { opacity: 0.8; }
  60%  { stroke-dashoffset: 0; opacity: 0.8; }
  100% { stroke-dashoffset: -400; opacity: 0; }
}

@keyframes starsTwinkle {
  from { opacity: 0.6; }
  to   { opacity: 0.95; }
}

@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

@keyframes foundingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 195, 0, 0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 195, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 195, 0, 0); }
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  .movement-grid { grid-template-columns: 1fr; }
  .movement-verbs { padding: 2rem 1.75rem; }

  .layers {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .layer-connector { display: none; }

  .briefing-grid { grid-template-columns: 1fr; }
  .briefing-form { padding: 1.75rem; grid-template-columns: 1fr; }

  /* 3-col → 2-col on tablet */
  .enables-grid { grid-template-columns: repeat(2, 1fr); }
  .media-assets-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Earth recedes at narrow viewports (≈ 200% zoom on a 1440 desktop) */
  .hero-content { padding-left: 0; max-width: 100%; }
  .earth-container { right: -18%; width: clamp(380px, 70vw, 640px); opacity: 0.65; }
  .hero-vignette {
    background:
      linear-gradient(to right, rgba(0, 8, 20, 0.92) 0%, rgba(0, 8, 20, 0.78) 50%, rgba(0, 8, 20, 0.4) 90%),
      linear-gradient(to bottom, transparent 50%, rgba(0, 8, 20, 0.88) 100%);
  }
}

/* Low-height laptops (1366×768 and similar). At default sizes the hero
   content stack exceeds 768px and the CTAs fall below the fold. Compress
   padding, margins, and reduce hero text sizes so the CTAs sit above the
   fold. Larger viewports unaffected.
   Padding-top floor (5.5rem ≈ 88px) is enough to clear the fixed header. */
@media (max-height: 820px) and (min-width: 900px) {
  .hero {
    padding-top: clamp(5.5rem, 8vh, 6.5rem);
    padding-bottom: 1.5rem;
  }
  .hero-eyebrow {
    margin-bottom: 0.875rem;
    padding: 0.45rem 0.95rem;
  }
  .hero-headline {
    font-size: clamp(2.25rem, 6.5vw + 0.125rem, 6rem);
    margin-bottom: 0.875rem;
    line-height: 0.96;
  }
  .hero-sub {
    font-size: clamp(1rem, 0.9vw + 0.55rem, 1.5rem);
    margin-bottom: 0.625rem;
  }
  .hero-body {
    /* Tighter font + line-height for the compressed layout. Column width is
       handled by the clamp() above, no override needed here. */
    font-size: clamp(0.9375rem, 0.55vw + 0.5rem, 1.15rem);
    line-height: 1.5;
    margin-bottom: 0.875rem;
  }
  .hero-pitch {
    font-size: clamp(1.05rem, 1.0vw + 0.5rem, 1.4rem);
    margin-bottom: 1rem;
  }
  .hero-ctas {
    margin-bottom: 1.25rem;
  }
  .hero-ctas .btn {
    font-size: 0.9375rem;
    padding: 0.85em 1.55em;
  }
}

@media (max-width: 640px) {
  .hero { padding: 8rem 0 5rem; min-height: auto; }

  .earth-container { right: -30%; opacity: 0.5; }
  .sunrise-glow { opacity: 0.7; }

  .hero-ctas .btn { width: 100%; }

  .trust-points { padding: 1.75rem; }

  /* 2-col → 1-col on phones */
  .enables-grid { grid-template-columns: 1fr; }
  .media-assets-grid { grid-template-columns: 1fr; }

  .children-actions { gap: 0.6rem; flex-direction: column; }
  .children-actions li { padding: 0; }
  .children-actions li:not(:last-child)::after { display: none; }

  .founding-card { padding: 2rem 1.5rem; }

  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .founding-pulse { animation: none !important; }
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--c-sunrise-gold);
  color: var(--c-space-deep);
  padding: 1rem 1.5rem;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--c-sunrise-gold);
  outline-offset: 3px;
  border-radius: 4px;
}