/* ============================================================
   Above the Bell — How It Works
   (Rebuild in progress — hero first.)

   Responsive hero strategy: no baked-in text. The scene is built
   from independent layers so it holds at any width/height + mobile:
     • sky      — painterly gradient+clouds image over a CSS gradient base
     • landscape — one wide transparent PNG pinned to the bottom at
                   width:100% (never crops horizontally, just scales)
     • Wrigley  — transparent PNG pinned bottom-right, clamp() sized,
                  clipped to ~half by the curved divider in front of him
     • curve    — a wide, shallow arc (super-ellipse) that masks the base
                  of the scene + Wrigley's lower half, like the original
   ============================================================ */

:root {
  --hhero-band: #2465D6;          /* deep royal-blue band below the curve */
  /* width-proportional so the curve never outgrows the landscape strip */
  --hhero-curve-h: clamp(110px, 11vw, 210px);
  /* visible owl above the curve + copy block — keeps head + CTA in frame */
  --hhero-owl-visible: clamp(200px, 28vw, 340px);
  --hhero-copy-h: 340px;
  /* align owl's right edge with Mission Control (container right padding) */
  --hhero-owl-right: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  /* shared geometry, so the copy can center itself in the open sky gap:
     rendered landscape width and the schoolhouse's right edge within it
     (schoolhouse + flag occupy ~19% of the artwork, offset -3% left) */
  --hhero-owl-w: clamp(230px, 30vw, 420px);
  --hhero-land-w: max(106vw, 1240px);
  --hhero-school-right: calc(var(--hhero-land-w) * 0.19 - 3vw);
  /* balloon: always breathe below the nav; nudged right of Wrigley's lane */
  --hhero-balloon-inset-top: clamp(20px, 4vh, 44px);
  --hhero-balloon-right-offset: calc(var(--hhero-owl-w) * 0.3 - 36px);
  --hhero-text-glow:
    0 0 1px rgba(255, 255, 255, 0.95),
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 14px rgba(255, 255, 255, 0.65),
    0 0 28px rgba(255, 255, 255, 0.38),
    0 0 44px rgba(255, 255, 255, 0.18);
  /* faint navigation motif tiled behind the white sections: dashed
     flight-path arcs are the lead element, with whisper-quiet
     constellations, scattered stars, a sparkle and a compass ring.
     Large 960px tile + varied placement keeps the repeat from reading. */
  --hiw-nav-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='960' viewBox='0 0 960 960'%3E%3Cg fill='none' stroke='%232465D6' stroke-linecap='round'%3E%3Cpath d='M40 190 C 220 110, 420 130, 560 226' stroke-opacity='0.30' stroke-width='2' stroke-dasharray='2.5 12'/%3E%3Cpath d='M910 420 C 790 520, 640 560, 470 545' stroke-opacity='0.27' stroke-width='2' stroke-dasharray='2.5 12'/%3E%3Cpath d='M150 900 C 260 790, 420 760, 590 810' stroke-opacity='0.24' stroke-width='1.8' stroke-dasharray='2.5 12'/%3E%3Cpath d='M700 60 Q 800 130 830 250' stroke-opacity='0.21' stroke-width='1.7' stroke-dasharray='2.5 12'/%3E%3Cpath d='M120 380 L 210 340 L 262 412' stroke-opacity='0.055' stroke-width='1'/%3E%3Cpath d='M640 660 L 726 618 L 790 690 L 754 760' stroke-opacity='0.055' stroke-width='1'/%3E%3Ccircle cx='860' cy='800' r='17' stroke-opacity='0.11' stroke-width='1'/%3E%3Ccircle cx='860' cy='800' r='2' stroke-opacity='0.14' stroke-width='1'/%3E%3Cpath d='M860 777 v6 M860 817 v6 M837 800 h6 M877 800 h6' stroke-opacity='0.12' stroke-width='1'/%3E%3C/g%3E%3Cg fill='%232465D6'%3E%3Cpath d='M560 226 l-14 -1.6 9.6 -10.2 z' fill-opacity='0.30'/%3E%3Cpath d='M470 545 l13.4 -4.8 -5.9 12.9 z' fill-opacity='0.27'/%3E%3Ccircle cx='120' cy='380' r='2' fill-opacity='0.13'/%3E%3Ccircle cx='210' cy='340' r='2.5' fill-opacity='0.14'/%3E%3Ccircle cx='262' cy='412' r='2' fill-opacity='0.13'/%3E%3Ccircle cx='640' cy='660' r='2' fill-opacity='0.13'/%3E%3Ccircle cx='726' cy='618' r='2.5' fill-opacity='0.14'/%3E%3Ccircle cx='790' cy='690' r='2' fill-opacity='0.13'/%3E%3Ccircle cx='754' cy='760' r='2.2' fill-opacity='0.13'/%3E%3Ccircle cx='420' cy='80' r='1.6' fill-opacity='0.12'/%3E%3Ccircle cx='90' cy='620' r='1.5' fill-opacity='0.11'/%3E%3Ccircle cx='340' cy='300' r='1.4' fill-opacity='0.10'/%3E%3Ccircle cx='560' cy='420' r='1.6' fill-opacity='0.11'/%3E%3Ccircle cx='930' cy='150' r='1.5' fill-opacity='0.11'/%3E%3Ccircle cx='250' cy='690' r='1.4' fill-opacity='0.10'/%3E%3Ccircle cx='500' cy='920' r='1.5' fill-opacity='0.10'/%3E%3Cpath d='M370 520 l3.4 8.6 8.6 3.4 -8.6 3.4 -3.4 8.6 -3.4 -8.6 -8.6 -3.4 8.6 -3.4 z' fill-opacity='0.14'/%3E%3C/g%3E%3C/svg%3E");
  /* white night-sky companion for the dark stratosphere band: proper
     constellations with connected stars and four-point sparkles */
  --hiw-space-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='960' viewBox='0 0 960 960'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M110 150 L 205 105 L 300 140 L 360 220 L 330 305' stroke-opacity='0.22'/%3E%3Cpath d='M300 140 L 385 95' stroke-opacity='0.18'/%3E%3Cpath d='M620 560 L 710 505 L 800 545 L 845 635' stroke-opacity='0.22'/%3E%3Cpath d='M710 505 L 745 420' stroke-opacity='0.18'/%3E%3Cpath d='M120 700 L 190 660 L 255 705 L 235 780' stroke-opacity='0.19'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Ccircle cx='110' cy='150' r='2.6' fill-opacity='0.55'/%3E%3Ccircle cx='205' cy='105' r='3.2' fill-opacity='0.65'/%3E%3Ccircle cx='300' cy='140' r='2.6' fill-opacity='0.55'/%3E%3Ccircle cx='360' cy='220' r='2.9' fill-opacity='0.6'/%3E%3Ccircle cx='330' cy='305' r='2.4' fill-opacity='0.5'/%3E%3Ccircle cx='385' cy='95' r='2.2' fill-opacity='0.48'/%3E%3Ccircle cx='620' cy='560' r='2.6' fill-opacity='0.55'/%3E%3Ccircle cx='710' cy='505' r='3.2' fill-opacity='0.65'/%3E%3Ccircle cx='800' cy='545' r='2.6' fill-opacity='0.55'/%3E%3Ccircle cx='845' cy='635' r='2.9' fill-opacity='0.6'/%3E%3Ccircle cx='745' cy='420' r='2.2' fill-opacity='0.48'/%3E%3Ccircle cx='120' cy='700' r='2.5' fill-opacity='0.52'/%3E%3Ccircle cx='190' cy='660' r='3' fill-opacity='0.6'/%3E%3Ccircle cx='255' cy='705' r='2.5' fill-opacity='0.52'/%3E%3Ccircle cx='235' cy='780' r='2.3' fill-opacity='0.48'/%3E%3Cpath d='M480 360 l 4 10 10 4 -10 4 -4 10 -4 -10 -10 -4 10 -4 z' fill-opacity='0.5'/%3E%3Cpath d='M900 470 l 3 7.5 7.5 3 -7.5 3 -3 7.5 -3 -7.5 -7.5 -3 7.5 -3 z' fill-opacity='0.42'/%3E%3Cpath d='M60 420 l 2.6 6.5 6.5 2.6 -6.5 2.6 -2.6 6.5 -2.6 -6.5 -6.5 -2.6 6.5 -2.6 z' fill-opacity='0.4'/%3E%3Cpath d='M420 840 l 3 7.5 7.5 3 -7.5 3 -3 7.5 -3 -7.5 -7.5 -3 7.5 -3 z' fill-opacity='0.42'/%3E%3C/g%3E%3C/svg%3E");
  --hhero-accent-glow:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.38))
    drop-shadow(0 0 44px rgba(255, 255, 255, 0.18));
}

.hiw-body {
  /* the strip below the hero curve reads as leaving the atmosphere:
     royal blue at the crest sinking toward deep space */
  background: linear-gradient(180deg, #2465D6 0%, #16459F 55%, #0A2568 100%);
}

/* ============================== HERO ============================== */
.hhero {
  position: relative;
  overflow: hidden;
  /* center the copy between the nav (top) and the curve (bottom) so the
     space above the headline ≈ the space below the CTA */
  padding-top: var(--nav-h);
  padding-bottom: var(--hhero-curve-h);
  /* never shorter than copy + owl head + curve band */
  min-height: calc(var(--hhero-copy-h) + var(--hhero-owl-visible) + var(--hhero-curve-h) + 48px);
  height: max(
    calc(var(--hhero-copy-h) + var(--hhero-owl-visible) + var(--hhero-curve-h) + 48px),
    clamp(600px, 86svh, 820px)
  );
  display: flex;
  align-items: center;
  /* base gradient (also shows through if the sky image can't fully cover) */
  background: linear-gradient(180deg, #7FB8EA 0%, #B7DCF7 46%, #DCEFFD 74%, #EAF6FF 100%);
}

/* --- painterly sky + clouds --- */
.hhero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    image-set(
      url("../assets/images/g/web/hiw-hero-sky-a-1280.webp") type("image/webp"),
      url("../assets/images/b/hiw-hero-sky-a.png") type("image/png")
    ) center top / cover no-repeat;
  /* fade the very bottom of the sky into the pale horizon before the land */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}

/* --- soft sun rays fanning down from the top center --- */
.hhero__flare {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(120vw, 1500px);
  height: clamp(180px, 30vw, 400px);
  z-index: 0;
  pointer-events: none;
  background:
    /* core glow at the very top */
    radial-gradient(ellipse 52% 90% at 50% -10%,
      rgba(255, 251, 238, 0.95) 0%,
      rgba(255, 250, 240, 0.4) 42%,
      rgba(255, 250, 240, 0) 72%),
    /* soft ray wedges radiating from just above the frame */
    repeating-conic-gradient(from 158deg at 50% -14%,
      rgba(255, 255, 255, 0) 0deg 6deg,
      rgba(255, 253, 244, 0.3) 9deg 12deg,
      rgba(255, 255, 255, 0) 15deg 26deg);
  -webkit-mask-image: radial-gradient(ellipse 68% 100% at 50% 0%, #000 28%, transparent 76%);
  mask-image: radial-gradient(ellipse 68% 100% at 50% 0%, #000 28%, transparent 76%);
  filter: blur(2px);
}

/* --- high-altitude balloon + ascent trail (pinned to Wrigley's sky lane) --- */
.hhero__balloon-rig {
  position: absolute;
  /* above .hhero__inner (z4) so the balloon hotspot receives hover;
     everything in the rig except the hotspot is pointer-events:none */
  z-index: 5;
  top: calc(var(--nav-h) + var(--hhero-balloon-inset-top));
  right: calc(var(--hhero-owl-right) + var(--hhero-balloon-right-offset));
  width: clamp(130px, 15vw, 250px);
  aspect-ratio: 260 / 240;
  pointer-events: none;
}
.hhero__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hhero__balloon {
  position: absolute;
  top: 0;
  right: 0;
  width: 17%;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(2, 33, 81, 0.14));
  transition: transform 0.45s var(--ease, ease);
}

/* --- balloon hover: hotspot + live telemetry card --- */
/* generous invisible target around the balloon; the rig itself stays
   pointer-events:none so the rest of the sky doesn't capture the mouse */
.hhero__balloon-hot {
  position: absolute;
  top: -6%;
  right: -8%;
  width: 34%;
  height: 46%;
  pointer-events: auto;
}
/* glassy mission-telemetry card that unfolds beneath the balloon */
.hhero__balloon-card {
  position: absolute;
  top: 34%;
  right: -4%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px 11px;
  border-radius: 12px;
  background: rgba(2, 33, 81, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 26px rgba(2, 33, 81, 0.28);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px) scale(0.92);
  transform-origin: top right;
  transition: opacity 0.28s ease, transform 0.32s var(--ease, ease);
  pointer-events: none;
}
.hhero__balloon-hot:hover ~ .hhero__balloon-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hhero__bcard-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--atb-telemetry-green);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  margin-bottom: 2px;
}
.hhero__bcard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #48D97C;
  box-shadow: 0 0 6px rgba(72, 217, 124, 0.9);
  animation: hhero-bcard-ping 1.4s ease-in-out infinite;
}
@keyframes hhero-bcard-ping {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.hhero__bcard-row { color: rgba(255, 255, 255, 0.88); }
.hhero__bcard-row b { font-weight: 700; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hhero__bcard-dot { animation: none; }
}

/* --- distant mountains: depth layer behind the green hills --- */
.hhero__mountains {
  position: absolute;
  left: -1%;
  bottom: clamp(96px, 9.5vw, 205px);
  width: 102%;
  max-width: none;
  min-width: 1100px;
  /* squash vertically so the range reads low and far away */
  height: clamp(64px, 7.5vw, 165px);
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* --- ground scenery --- */
.hhero__landscape {
  position: absolute;
  left: -3%;
  bottom: 0;
  width: 106%;                 /* overshoot both sides so the artwork's edges stay off-screen */
  max-width: none;             /* global img{max-width:100%} would cap the overshoot */
  min-width: 1240px;           /* keeps the schoolhouse from getting tiny on small screens */
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* --- Wrigley (static, grounded, clipped to ~half by the curve) --- */
.hhero__owl {
  position: absolute;
  right: var(--hhero-owl-right);
  bottom: 0;
  width: var(--hhero-owl-w);
  max-width: none;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 26px rgba(2, 33, 81, 0.16));
}

/* --- curved bottom divider (masks Wrigley + base of the scene) --- */
.hhero__curve {
  position: absolute;
  left: -24%;
  right: -24%;
  bottom: 0;
  height: var(--hhero-curve-h);
  z-index: 3;
  /* deep "upper atmosphere" blue, brighter along the crest; the deepest tone
     sits mid-band (and is kept shallow) with a long, gentle rise back out, so
     the hand-off to the section below happens on a low, matched slope */
  background: linear-gradient(180deg, #4A87E6 0%, #2767D4 30%, #1F55BE 55%, #2B62C6 100%);
  overflow: hidden;
  /* wide shallow arc: only the top of a very wide ellipse is visible */
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  pointer-events: none;
  /* atmospheric bloom radiating off the crest: a bright tight halo with a
     restrained outer wash so the glow doesn't smother Wrigley/landscape */
  filter:
    drop-shadow(0 -2px 8px rgba(235, 248, 255, 0.6))
    drop-shadow(0 -6px 16px rgba(175, 220, 255, 0.38))
    drop-shadow(0 -16px 34px rgba(140, 195, 255, 0.18));
}
/* atmosphere glow + a soft feathered rim along the crest (same ellipse as the arc) */
.hhero__curve::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  background:
  /* feathered crest highlight — brighter, wider ramp (still no hard stroke) */
    radial-gradient(ellipse 50% 100% at 50% 100%,
      transparent 94.5%,
      rgba(190, 228, 255, 0.22) 97%,
      rgba(230, 245, 255, 0.5) 98.8%,
      rgba(255, 255, 255, 0.42) 99.6%,
      rgba(255, 255, 255, 0.3) 100%),
    /* cool bloom hugging the inside of the arc (fades out well before the
       band's bottom edge so the hand-off to the section below stays seamless) */
    radial-gradient(ellipse 52% 110% at 50% 100%,
      transparent 0 72%,
      rgba(130, 185, 250, 0.18) 88%,
      rgba(205, 236, 255, 0.4) 100%),
    radial-gradient(ellipse 60% 140% at 50% -18%,
      rgba(205, 236, 255, 0.75) 0%,
      rgba(130, 185, 250, 0.3) 42%,
      transparent 68%);
}
/* concentric arcs that follow the crest curvature + a few sparkles */
.hhero__curve::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  background:
    radial-gradient(circle at 16% 58%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 3px),
    radial-gradient(circle at 30% 82%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2.2px),
    radial-gradient(circle at 47% 70%, rgba(255, 255, 255, 0.4) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 66% 86%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2.2px),
    radial-gradient(circle at 92% 80%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2.2px),
    /* faint telemetry arcs: much wider ellipse than the crest so every ring
       runs past the viewport edges before it visibly turns down */
    radial-gradient(ellipse 115% 128% at 50% 100%,
      transparent 0 41%,
      rgba(255, 255, 255, 0.10) 41.2% 41.5%,
      transparent 41.7% 55%,
      rgba(255, 255, 255, 0.08) 55.2% 55.45%,
      transparent 55.65% 69%,
      rgba(255, 255, 255, 0.06) 69.2% 69.4%,
      transparent 69.6%);
}

/* --- copy (centered in the sky gap between schoolhouse and Wrigley) --- */
.hhero__inner {
  position: relative;
  z-index: 4;
  width: 100%;
}
.hhero__copy {
  /* the block spans exactly the open gap between the two landmarks, but its
     left edge never crosses left of the header logo (container left edge) */
  margin-left: max(calc(var(--hhero-school-right) + 12px), var(--hhero-owl-right));
  margin-right: calc(var(--hhero-owl-right) + var(--hhero-owl-w) + 12px);
  display: flex;
  justify-content: center;
}
.hhero__copy-box {
  /* ...and the text column centers itself inside that gap */
  max-width: 560px;
}
/* feathered halo tight to the letterforms — not a box panel */
.hhero__title {
  max-width: fit-content;
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--atb-deep-space);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hhero__title-shade {
  text-shadow: var(--hhero-text-glow);
}
.hhero__title-line {
  display: block;
  white-space: nowrap;
  overflow: visible;
}
.hhero__title-line:last-child {
  line-height: 1.2;
}
.hhero__accent {
  position: relative;
  display: inline-block;
  overflow: visible;
  /* extend the paint box below the baseline so background-clip: text
     covers the "g"/"p" descenders (negative margin keeps layout put) */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  /* atmosphere → bright sky → upper edge → deep space */
  background-image: linear-gradient(
    100deg,
    var(--atb-accent-blue) 0%,
    var(--atb-mission-blue) 26%,
    var(--atb-sky-blue) 48%,
    #6ecfff 60%,
    #2a6aad 78%,
    var(--atb-deep-space) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--atb-deep-space);
  filter: var(--hhero-accent-glow);
  animation: hhero-accent-rise 9s var(--ease) infinite alternate;
}
@keyframes hhero-accent-rise {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
.hhero__lede {
  margin: 18px 0 28px;
  max-width: 44ch;
  font-size: var(--text-lede);
  line-height: 1.55;
  font-weight: 500;
  color: var(--atb-accent-blue);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.9),
    0 0 5px rgba(255, 255, 255, 0.78),
    0 0 12px rgba(255, 255, 255, 0.58),
    0 0 24px rgba(255, 255, 255, 0.32);
}
.hhero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* faint telemetry readouts drifting in the curve band */
.hhero__telemetry {
  position: absolute;
  top: 56%;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.34);
  white-space: nowrap;
}
/* the band bleeds 24% past each side; ~19% ≈ just inside the viewport edge */
.hhero__telemetry--left { left: 19%; }
.hhero__telemetry--right { right: 19%; }

/* ============================== MISSION INTRO ============================== */
/* White stage for the 5-step overview; the top fades up from the curve's
   deep atmosphere blue so the horizon melts into the white content area */
.mintro {
  position: relative;
  /* continues the curve band's rising slope (#2B62C6, already lightening)
     straight up to white — one uninterrupted ramp across the seam */
  --mintro-fade: clamp(150px, 16vw, 200px);
  /* keep the decorative flight-path texture below the intro explanation so
     it never competes with the "How the Mission Works" paragraph. */
  --mintro-texture-start: calc(var(--mintro-fade) + clamp(360px, 34vw, 430px));
  background: linear-gradient(180deg,
    #2B62C6 0,
    #3169CC calc(var(--mintro-fade) * 0.22),
    #4A80D9 calc(var(--mintro-fade) * 0.40),
    #74A4E7 calc(var(--mintro-fade) * 0.56),
    #A0C4F0 calc(var(--mintro-fade) * 0.71),
    #CBE0F7 calc(var(--mintro-fade) * 0.83),
    #EAF4FC calc(var(--mintro-fade) * 0.93),
    #F9FCFF var(--mintro-fade),
    #F9FCFF 100%);
  /* let the steps rail climb up into the blue fade; the icons carry a white
     glow so they pop against it */
  padding-top: calc(var(--mintro-fade) * 0.3);
  padding-bottom: clamp(64px, 8vw, 110px);
  color: var(--atb-deep-space);
}
/* subtle "night-nav" texture over the white stage: faint constellations,
   dashed flight-path arcs and a small compass, plus soft color washes.
   Fades in below the blue ramp and back out before the section's bottom
   edge so the hand-off to the ascent band below is seamless. */
.mintro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* soft atmospheric washes drifting through the section */
    radial-gradient(ellipse 46% 34% at 8% 42%,
      rgba(55, 175, 245, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 42% 30% at 96% 62%,
      rgba(251, 149, 11, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 52% 36% at 42% 88%,
      rgba(36, 101, 214, 0.07) 0%, transparent 72%),
    /* constellation / flight-path tile */
    var(--hiw-nav-texture);
  background-size: auto, auto, auto, 960px 960px;
  /* fade in after the intro paragraph, fade out before the bottom edge */
  -webkit-mask-image: linear-gradient(180deg,
    transparent var(--mintro-texture-start),
    #000 calc(var(--mintro-texture-start) + 120px),
    #000 calc(100% - 140px),
    transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent var(--mintro-texture-start),
    #000 calc(var(--mintro-texture-start) + 120px),
    #000 calc(100% - 140px),
    transparent 100%);
}
.mintro > .container {
  position: relative;
  z-index: 1;
}

/* --- steps rail --- */
.mintro__steps {
  --mintro-icon-size: clamp(96px, 11.5vw, 156px);
  list-style: none;
  margin: 0 0 clamp(48px, 7vw, 84px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 3vw, 40px);
}
.mintro__steps > li {
  position: relative;
}
.mintro__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
  border-radius: 12px;
  transition: transform 0.2s var(--ease);
}
.mintro__step:hover,
.mintro__step:focus-visible {
  transform: translateY(-3px);
  outline: none;
}
/* little launch-arrow connectors between the circles */
.mintro__steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  /* vertically centered on the icon artwork, floating in the column gap */
  top: calc((var(--mintro-icon-size) / 2) - 8px);
  right: calc(-6px - clamp(9px, 1.5vw, 20px));
  width: 0;
  height: 0;
  border-left: 11px solid rgba(36, 101, 214, 0.75);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.mintro__badge {
  position: absolute;
  top: -4px;
  left: 8%;
  z-index: 1;
  width: clamp(30px, 3.4vw, 40px);
  height: clamp(30px, 3.4vw, 40px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--atb-deep-space);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(2, 33, 81, 0.25);
  color: #fff;
  font-weight: 800;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  transition: background 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.mintro__icon {
  width: var(--mintro-icon-size);
  /* square box regardless of each artwork's crop, so labels share a baseline */
  aspect-ratio: 1;
  object-fit: contain;
  /* feathered white halo so the circles pop while sitting in the blue fade */
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 34px rgba(255, 255, 255, 0.4))
    drop-shadow(0 12px 20px rgba(2, 33, 81, 0.10));
  transition: filter 0.25s var(--ease);
}
/* CTA gold glow on hover — matches .btn--gold box-shadow palette */
.mintro__step:hover .mintro__icon,
.mintro__step:focus-visible .mintro__icon {
  filter:
    drop-shadow(0 0 6px rgba(251, 149, 11, 0.95))
    drop-shadow(0 0 18px rgba(251, 149, 11, 0.65))
    drop-shadow(0 0 36px rgba(251, 149, 11, 0.4))
    drop-shadow(0 10px 24px rgba(251, 149, 11, 0.35))
    drop-shadow(0 12px 20px rgba(2, 33, 81, 0.10));
}
.mintro__step:hover .mintro__label,
.mintro__step:focus-visible .mintro__label {
  color: var(--atb-deep-space);
}
.mintro__step:hover .mintro__badge,
.mintro__step:focus-visible .mintro__badge {
  background: var(--atb-launch-gold);
  box-shadow:
    0 0 10px rgba(251, 149, 11, 0.55),
    0 4px 10px rgba(2, 33, 81, 0.2);
}
.mintro__label {
  margin-top: 14px;
  font-weight: 700;
  font-size: clamp(0.92rem, 1.25vw, 1.12rem);
  color: var(--atb-deep-space);
  transition: color 0.2s var(--ease);
}

/* scroll targets for step badges */
.hiw-step {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ============================== MISSION JOURNEY ============================== */
/* One continuous ascent below the intro: pale ground air deepens into the
   stratosphere for Launch, lightens again on descent, and touches down on a
   scenic landing strip just above the footer. All backgrounds are CSS
   gradients + soft cloud/star layers so the story scales at any width. */
.jny {
  --jny-rail-w: clamp(58px, 7vw, 96px);
  --jny-container-pad: 24px;
  position: relative;
}

/* --- phase backgrounds: the altitude ramp --- */
.jny__phase {
  position: relative;
  overflow: hidden;
}
/* ground air: continues the off-white of .mintro and slowly gains altitude */
.jny__phase--ascent {
  background: linear-gradient(180deg,
    #F9FCFF 0%,
    #F3F9FE 22%,
    #E9F3FC 48%,
    #D7E9F8 74%,
    #BDDAF3 100%);
}
/* continue the night-nav texture from .mintro into the low-altitude band,
   easing in from the (texture-free) seam and dissolving by mid-ascent as
   the clouds take over. Washes fade with the same mask, so nothing crosses
   the section boundary abruptly. */
.jny__phase--ascent::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 26% at 94% 14%,
      rgba(55, 175, 245, 0.09) 0%, transparent 70%),
    radial-gradient(ellipse 46% 24% at 4% 34%,
      rgba(251, 149, 11, 0.06) 0%, transparent 70%),
    var(--hiw-nav-texture);
  background-size: auto, auto, 960px 960px;
  /* offset the tile so it doesn't line up with the section above */
  background-position: 0 0, 0 0, 430px 260px;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0, #000 140px, #000 30%, transparent 60%);
  mask-image: linear-gradient(180deg,
    transparent 0, #000 140px, #000 30%, transparent 60%);
}
/* stratosphere: the dark climax band around Launch */
.jny__phase--space {
  background: linear-gradient(180deg,
    #BDDAF3 0%,
    #7FABE0 12%,
    #3D6EC2 30%,
    #17418F 48%,
    #0A2568 62%,
    #123579 80%,
    #3B72C4 100%);
}
/* descent: falling back through the atmosphere toward the landing strip */
.jny__phase--descent {
  background: linear-gradient(180deg,
    #3B72C4 0%,
    #6E9FDC 26%,
    #A3C6EE 56%,
    #CFE5F8 82%,
    #DFF0FC 100%);
}
/* let the discover card ride low, bordering the landing field below */
.jny__phase--descent .jny__row {
  padding-bottom: 0;
}

/* --- soft drifting clouds (pure CSS: layered blurred ellipses) --- */
.jny__clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.jny__cloud {
  position: absolute;
  width: clamp(260px, 34vw, 560px);
  aspect-ratio: 5 / 2;
  background:
    radial-gradient(ellipse 42% 58% at 30% 66%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 36% 52% at 56% 42%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 38% 48% at 76% 64%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(10px);
  opacity: 0.75;
}
.jny__cloud--a { top: 6%;  left: -6%;  opacity: 0.6; }
.jny__cloud--b { top: 26%; right: -8%; opacity: 0.8; }
.jny__cloud--c { top: 52%; left: -4%;  opacity: 0.7; transform: scale(0.8); }
.jny__cloud--d { top: 78%; right: -5%; opacity: 0.55; transform: scale(1.1); }
.jny__cloud--e { top: 24%; right: -7%; opacity: 0.6; }
.jny__cloud--f { top: 66%; left: -6%;  opacity: 0.75; transform: scale(0.9); }

/* --- faint stars in the stratosphere band --- */
.jny__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 22%,  rgba(255, 255, 255, 0.7) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 18% 58%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 27% 34%, rgba(255, 255, 255, 0.6) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 41% 70%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.65) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 63% 52%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 30%, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 84% 64%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 40%, rgba(255, 255, 255, 0.6) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 12% 84%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 86%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    /* second sprinkle of fainter in-between stars for depth */
    radial-gradient(circle at 5% 46%,  rgba(255, 255, 255, 0.30) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 14% 38%, rgba(255, 255, 255, 0.25) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 22% 74%, rgba(255, 255, 255, 0.30) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 33% 22%, rgba(255, 255, 255, 0.28) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 37% 52%, rgba(255, 255, 255, 0.25) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 46% 38%, rgba(255, 255, 255, 0.32) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 68%, rgba(255, 255, 255, 0.26) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 60% 30%, rgba(255, 255, 255, 0.30) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 69% 78%, rgba(255, 255, 255, 0.25) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 79% 46%, rgba(255, 255, 255, 0.30) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 90% 24%, rgba(255, 255, 255, 0.28) 0 0.8px, transparent 1.6px),
    radial-gradient(circle at 96% 70%, rgba(255, 255, 255, 0.26) 0 0.8px, transparent 1.6px);
  /* keep the stars to the dark heart of the band AND clear of the altitude
     rail on the left (the two mask layers intersect) */
  --jny-stars-clear: calc(max(0px, (100% - var(--container)) / 2) + 24px + var(--jny-rail-w) + 20px);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 26%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent var(--jny-stars-clear), #000 calc(var(--jny-stars-clear) + 100px));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 26%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent var(--jny-stars-clear), #000 calc(var(--jny-stars-clear) + 100px));
  mask-composite: intersect;
}
/* white constellations and sparkles over the starfield (the parent's mask
   already fades this layer at the band edges and around the rail) */
.jny__stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hiw-space-texture) 120px 40px / 960px 960px;
}
/* occasional shooting star streaking down-right through the dark band;
   bright head leads, tail fades. Visible for a moment of each long cycle. */
.jny__stars::before {
  content: "";
  position: absolute;
  top: 38%;
  left: 14%;
  width: 96px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 94%);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  opacity: 0;
  transform: rotate(27deg);
  animation: jny-shooting-star 13s linear infinite 4s;
}
@keyframes jny-shooting-star {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(27deg); }
  1.5% { opacity: 0.95; }
  7%   { opacity: 0; transform: translate3d(340px, 173px, 0) rotate(27deg); }
  100% { opacity: 0; transform: translate3d(340px, 173px, 0) rotate(27deg); }
}

/* --- the altitude rail: one continuous line down the left --- */
.jny__phase > .container {
  position: relative;
}
.jny__phase > .container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--jny-container-pad) + (var(--jny-rail-w) / 2));
  width: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(43, 108, 168, 0.28);
}
.jny__phase--space > .container::before {
  background: rgba(255, 255, 255, 0.3);
}
/* the journey's first and last rail segments taper off instead of stopping dead */
.jny__phase--ascent > .container::before {
  background: linear-gradient(180deg,
    transparent 0,
    rgba(43, 108, 168, 0.28) 90px);
}
.jny__phase--descent > .container::before {
  background: linear-gradient(180deg,
    rgba(43, 108, 168, 0.28) 0,
    rgba(43, 108, 168, 0.28) calc(100% - 140px),
    transparent 100%);
}
/* --- mission calendar: a small week-grid card that rides the rail.
   Fixed to the viewport on the rail's axis, so the rail (and its
   milestone markers) slide past beneath it like stations past a gondola.
   JS toggles .is-visible while the journey is on screen and sets
   data-active="learn|plan|build|launch|discover" as steps scroll by. --- */
.jny__cal {
  /* center of the rail line, in viewport coordinates */
  --jny-cal-x: calc(max(0px, (100% - var(--container)) / 2) + var(--jny-container-pad) + (var(--jny-rail-w) / 2));
  position: fixed;
  z-index: 6;
  left: var(--jny-cal-x);
  top: 56%;
  transform: translate(-50%, -50%) translateY(14px);
  width: clamp(104px, 12vw, 128px);
  padding: 10px 9px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 2px 6px rgba(2, 33, 81, 0.10),
    0 16px 36px rgba(2, 33, 81, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: default;
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease),
    visibility 0s linear 0.4s;
}
.jny__cal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease),
    visibility 0s;
}
/* little notch pointing back at the rail line above the card */
.jny__cal::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 14px;
  border-radius: 3px;
  background: rgba(43, 108, 168, 0.35);
}
/* hover estimate: JS updates data-hours as the active phase changes */
.jny__cal::after {
  content: attr(data-hours);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: max-content;
  max-width: 180px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(2, 33, 81, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 24px rgba(2, 33, 81, 0.22);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transform: translate(-50%, -4px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
  pointer-events: none;
}
.jny__cal:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s;
}
.jny__cal-head {
  margin: 0 0 7px;
  text-align: center;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atb-deep-space);
}
.jny__cal-head span {
  display: block;
  margin-top: 2px;
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--atb-orbit-gray);
}
.jny__cal-grid {
  display: grid;
  gap: 3px;
}
.jny__cal-days,
.jny__cal-week {
  display: grid;
  grid-template-columns: 0.8fr repeat(5, 1fr);
  gap: 3px;
  align-items: center;
  justify-items: center;
}
.jny__cal-days span {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--atb-orbit-gray);
}
.jny__cal-wk {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--atb-orbit-gray);
  justify-self: start;
  padding-left: 1px;
}
/* day cells: empty outlines that fill with the phase color */
.jny__cal-week i {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-width: 15px;
  border-radius: 4px;
  background: #EDF4FB;
  border: 1px solid #DCE9F6;
  transition:
    background 0.45s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    transform 0.45s var(--ease);
}
/* per-phase fill colors (match the step cards' top borders) */
.jny__cal-week[data-phase="learn"]    { --cal-fill: var(--atb-atmosphere-blue); --cal-edge: #8FC3EC; }
.jny__cal-week[data-phase="plan"]     { --cal-fill: var(--atb-accent-blue);     --cal-edge: var(--atb-accent-blue); }
.jny__cal-week[data-phase="build"]    { --cal-fill: var(--atb-mission-blue);    --cal-edge: var(--atb-mission-blue); }
.jny__cal-week[data-phase="launch"]   { --cal-fill: var(--atb-launch-gold);     --cal-edge: var(--atb-launch-gold); }
.jny__cal-week[data-phase="discover"] { --cal-fill: var(--atb-sky-blue);        --cal-edge: var(--atb-sky-blue); }
/* phases already flown: quietly filled */
.jny__cal-week.is-past i {
  background: var(--cal-fill);
  border-color: var(--cal-edge);
  opacity: 0.45;
}
/* the phase you're reading now: full color with a soft glow */
.jny__cal-week.is-active i {
  background: var(--cal-fill);
  border-color: var(--cal-edge);
  box-shadow: 0 0 7px color-mix(in srgb, var(--cal-edge) 55%, transparent);
  transform: scale(1.12);
}
.jny__cal-week.is-active .jny__cal-wk {
  color: var(--atb-deep-space);
}
/* launch Friday: the gold star day */
.jny__cal-day--launch {
  position: relative;
  background: transparent !important;
  border-color: transparent !important;
  color: #D9E3EF;
}
.jny__cal-day--launch svg {
  position: absolute;
  inset: -2px;
  width: auto;
  height: auto;
  transition: color 0.45s var(--ease), filter 0.45s var(--ease), transform 0.45s var(--ease);
}
.jny__cal-week.is-past .jny__cal-day--launch svg { color: var(--atb-launch-gold); opacity: 0.55; }
.jny__cal-week.is-active .jny__cal-day--launch svg {
  color: var(--atb-launch-gold);
  filter: drop-shadow(0 0 6px rgba(251, 149, 11, 0.75));
  transform: scale(1.15);
}
/* footer label: active phase + its weeks */
.jny__cal-label {
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid #E3EDF7;
  text-align: center;
  line-height: 1.3;
}
.jny__cal-label-phase {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--atb-mission-blue);
  transition: color 0.35s var(--ease);
}
.jny__cal[data-active="launch"] .jny__cal-label-phase { color: var(--atb-launch-gold); }
.jny__cal[data-active="plan"] .jny__cal-label-phase { color: var(--atb-accent-blue); }
.jny__cal[data-active="discover"] .jny__cal-label-phase { color: var(--atb-sky-blue); }
.jny__cal-label-weeks {
  display: block;
  margin-top: 1px;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--atb-orbit-gray);
}
@media (max-width: 960px) {
  .jny__cal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jny__cal,
  .jny__cal.is-visible {
    transition: opacity 0.2s ease, visibility 0s;
    transform: translate(-50%, -50%);
  }
  .jny__cal-week i,
  .jny__cal-day--launch svg { transition: none; }
  .jny__cal-week.is-active i { transform: none; }
}

.jny__rail {
  position: relative;
}
.jny__rail-marker {
  position: absolute;
  top: clamp(48px, 6vw, 84px);
  left: calc(var(--jny-rail-w) / 2);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.jny__rail-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--atb-deep-space);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--atb-mission-blue), 0 2px 8px rgba(2, 33, 81, 0.25);
}
.jny__rail-marker b {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--atb-accent-blue);
  background: rgba(255, 255, 255, 0.82);
  padding: 3px 7px;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(2, 33, 81, 0.1);
}
.jny__rail-marker--light .jny__rail-dot {
  box-shadow: 0 0 0 2px var(--atb-sky-blue), 0 0 12px rgba(55, 175, 245, 0.6);
}
.jny__rail-marker--light b {
  color: var(--atb-deep-space);
}

/* --- step rows: rail | card | visual --- */
.jny__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--jny-rail-w) minmax(0, 1.55fr) minmax(0, 0.75fr);
  gap: clamp(20px, 3.5vw, 48px);
  align-items: center;
  padding: clamp(36px, 5vw, 68px) 0;
}
.jny__row--flip {
  grid-template-columns: var(--jny-rail-w) minmax(0, 0.75fr) minmax(0, 1.55fr);
}
.jny__row--flip .jny__card { order: 3; }
.jny__row--flip .jny__visual { order: 2; }

/* --- the content card --- */
.jny__card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  padding: clamp(26px, 3.6vw, 44px);
  box-shadow: 0 18px 44px rgba(2, 33, 81, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.jny__card--learn    { border-top: 4px solid var(--atb-atmosphere-blue); }
.jny__card--plan     { border-top: 4px solid var(--atb-accent-blue); }
.jny__card--build    { border-top: 4px solid var(--atb-mission-blue); }
.jny__card--launch   { border-top: 4px solid var(--atb-launch-gold); box-shadow: 0 18px 50px rgba(1, 8, 34, 0.45); }
.jny__card--discover { border-top: 4px solid var(--atb-sky-blue); }

.jny__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--atb-mission-blue);
}
.jny__eyebrow--gold { color: var(--atb-launch-gold); }
.jny__num {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--atb-deep-space);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0;
}
.jny__num--gold { background: var(--atb-launch-gold); }
.jny__title {
  margin: 12px 0 0;
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--atb-deep-space);
}
.jny__lede {
  margin: 14px 0 0;
  font-size: var(--text-lede);
  line-height: 1.6;
  font-weight: 500;
  color: var(--atb-accent-blue);
  max-width: 62ch;
}

/* class vs. Above the Bell responsibility split */
.jny__split {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.5vw, 32px);
  padding-top: 20px;
  border-top: 1px solid #E3EDF7;
}
.jny__col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--atb-deep-space);
}
.jny__col-head svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.jny__col-head--class svg { color: var(--atb-mission-blue); }
.jny__atb-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(2, 33, 81, 0.16));
}
.jny__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.jny__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--atb-deep-space);
}
.jny__note-marker {
  font-size: 0.68em;
  line-height: 0;
  vertical-align: super;
}
.jny__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--atb-sky-blue);
}
.jny__chips {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.jny__chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: #F2F8FE;
  border: 1px solid #D9E9FA;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--atb-accent-blue);
  white-space: nowrap;
}

/* --- visual column: step icon (+ telemetry at Launch) --- */
.jny__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.jny__icon {
  width: clamp(130px, 14vw, 205px);
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.55))
    drop-shadow(0 14px 26px rgba(2, 33, 81, 0.14));
}
.jny__icon--learn-board,
.jny__icon--plan-map,
.jny__icon--build-prep,
.jny__icon--recover-scene {
  width: clamp(220px, 28vw, 380px);
  max-width: 100%;
  aspect-ratio: auto;
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.72))
    drop-shadow(0 16px 30px rgba(2, 33, 81, 0.16));
}
.jny__icon--glow {
  filter:
    drop-shadow(0 0 8px rgba(55, 175, 245, 0.55))
    drop-shadow(0 0 26px rgba(55, 175, 245, 0.3))
    drop-shadow(0 14px 26px rgba(1, 8, 34, 0.5));
}
/* --- layered launch badge: static sky disc + independently drifting balloon.
   Both PNGs share the same canvas, so absolutely stacking them at inset:0
   keeps the artwork perfectly registered. --- */
.jny__launch-stack {
  position: relative;
  display: block;
  line-height: 0;
}
.jny__launch-stack .jny__icon {
  display: block;
}
.jny__launch-balloon {
  position: absolute;
  inset: 0;
  /* ride high: the envelope crowns OVER the badge ring for a 3D pop-out */
  top: -4.5%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scale: 1.03;
  filter: drop-shadow(0 10px 16px rgba(1, 8, 34, 0.28));
  /* the balloon drifts like it's really flying: a slow vertical bob plus a
     hint of pendulum sway, out of phase so it never reads as a loop */
  animation:
    jny-balloon-bob 7.5s ease-in-out infinite,
    jny-balloon-sway 11s ease-in-out infinite;
}
@keyframes jny-balloon-bob {
  0%, 100% { translate: 0 4px; }
  50%      { translate: 0 -6px; }
}
@keyframes jny-balloon-sway {
  0%, 100% { rotate: -1.2deg; }
  50%      { rotate: 1.2deg; }
}
/* --- "Mission Objectives" note card: a handwritten checklist pinned under
   the step graphic, like a page torn from the mission notebook --- */
.jny__objectives {
  position: relative;
  width: clamp(220px, 26vw, 330px);
  max-width: 100%;
  padding: 18px 20px 14px;
  background:
    /* faint ruled lines, like notebook paper */
    repeating-linear-gradient(180deg,
      transparent 0 27px,
      rgba(36, 101, 214, 0.10) 27px 28px),
    #FFFDF6;
  border: 1px solid #E7DFC9;
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(2, 33, 81, 0.04),
    0 10px 24px rgba(2, 33, 81, 0.12);
  transform: rotate(-1.4deg);
}
/* tape strip holding the note to the page */
.jny__objectives::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 84px;
  height: 20px;
  transform: translateX(-50%) rotate(1.8deg);
  background: rgba(174, 214, 245, 0.5);
  border-left: 1px dashed rgba(255, 255, 255, 0.8);
  border-right: 1px dashed rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(2, 33, 81, 0.08);
}
.jny__obj-title {
  margin: 0 0 8px;
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--atb-deep-space);
}
/* hand-drawn underline swash beneath the title */
.jny__obj-title::after {
  content: "";
  display: block;
  width: 128px;
  height: 5px;
  margin-top: 3px;
  background: currentColor;
  opacity: 0.85;
  border-radius: 60% 40% 55% 45% / 80% 60% 90% 50%;
  transform: rotate(-0.6deg);
}
.jny__obj-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.jny__obj-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.15;
  color: #1E3A66;
}
/* sketchy checkbox: uneven radii read as hand-drawn */
.jny__obj-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid rgba(2, 33, 81, 0.75);
  border-radius: 26% 40% 32% 42% / 38% 30% 44% 30%;
  background: #fff;
  color: #2EA35C;              /* green marker check */
}
.jny__obj-check svg {
  width: 19px;
  height: 19px;
  /* the check overshoots the box a little, like a real marker tick */
  margin: -4px -3px 0 0;
  filter: drop-shadow(0 1px 1px rgba(46, 163, 92, 0.3));
}
/* alternate tiny tilts so the rows feel handwritten, not typeset */
.jny__obj-list li:nth-child(odd)  { transform: rotate(-0.4deg); }
.jny__obj-list li:nth-child(even) { transform: rotate(0.5deg); }

/* glassy telemetry readouts under the Launch icon (hero balloon-card palette) */
.jny__telemetry {
  --jny-tel-w: clamp(104px, 9.5vw, 122px);
  --jny-live-cycle: 9s;
  --jny-ascent-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.jny__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 var(--jny-tel-w);
  width: var(--jny-tel-w);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(2, 33, 81, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(1, 8, 34, 0.35);
}
.jny__tel span {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--atb-label-blue);
}
.jny__tel b {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}
.jny__tel b i {
  font-style: normal;
}
.jny__tel-value--alt {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.02em;
}
.jny__tel-value--alt .jny__tel-alt {
  display: inline-block;
  width: 7.2ch;
  text-align: right;
}
.jny__tel-value--alt em {
  flex: 0 0 auto;
  font-style: normal;
}
.jny__tel--live span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--atb-telemetry-green);
}
.jny__tel--live b {
  font-size: 0.76rem;
}
.jny__tel-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #48D97C;
  box-shadow: 0 0 6px rgba(72, 217, 124, 0.9);
  font-style: normal;
  animation: jny-tel-ping 1.4s ease-in-out infinite;
}
@keyframes jny-tel-ping {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.jny__tel--live b {
  color: var(--atb-telemetry-green);
}
.jny__tel--graph svg {
  width: 100%;
  max-width: 96px;
  height: 30px;
  display: block;
}
.jny__ascent-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: jny-ascent-line var(--jny-live-cycle) var(--jny-ascent-ease) infinite;
}
.jny__ascent-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: jny-ascent-dot var(--jny-live-cycle) var(--jny-ascent-ease) infinite;
}
@keyframes jny-ascent-line {
  0%   { stroke-dashoffset: 1; }
  82%,
  100% { stroke-dashoffset: 0; }
}
@keyframes jny-ascent-dot {
  0%,
  8%   { opacity: 0; transform: scale(0.65); }
  82%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.18); }
}

/* ============================== LANDING STRIP ============================== */
/* The scenic touchdown above the footer. Layered like the hero so it scales:
   sky gradient base -> dotted descent trail -> parachute rig -> ground strip
   pinned to the bottom at width >100%. */
.jny__landing {
  position: relative;
  overflow: hidden;
  /* hug the field artwork: its own transparent sky is the only gap above
     the tree line, so the discover card sits right on the scenery */
  min-height: clamp(200px, 22vw, 330px);
  /* pin the field strip to the container's bottom edge so no background
     sliver ever opens up between the grass and the footer */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* pick up exactly where the descent phase gradient ends (#DFF0FC) and
     hold that tone through the visible sky so the seam disappears; the
     brighter horizon tones sit behind the opaque ground artwork */
  background: linear-gradient(180deg,
    #DFF0FC 0%,
    #E2F2FD 45%,
    #EFF8FE 78%,
    #FBFEFF 100%);
}
.jny__landing-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* descending payload rig: high in the sky over the clearing (center-right) */
.jny__landing-rig {
  position: absolute;
  z-index: 2;               /* above the in-flow field strip */
  right: clamp(10%, 13vw, 17%);
  top: clamp(6px, 1.6vw, 20px);
  width: clamp(96px, 10.5vw, 150px);
  pointer-events: none;
}
/* generous invisible hover target over the chute (rig stays pointer-events:none) */
.jny__landing-hot {
  position: absolute;
  inset: -8% -12%;
  pointer-events: auto;
}
/* wrapper carries the slow drift toward the target; the image inside
   carries the pendulum wobble, so the two transforms don't fight */
.jny__landing-drift {
  display: block;
  transition: transform 1.6s var(--ease, ease);
}
.jny__landing-chute {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(2, 33, 81, 0.18));
  /* swing from the canopy, like a payload hanging under it */
  transform-origin: 50% 8%;
}
@media (hover: hover) {
  .jny__landing-hot:hover ~ .jny__landing-drift {
    /* shrinks as it goes, as if drifting away from the viewer */
    transform: translate(18%, 52%) scale(0.78);
    transition: transform 7s cubic-bezier(0.3, 0.1, 0.6, 0.9);
  }
  .jny__landing-hot:hover ~ .jny__landing-drift .jny__landing-chute {
    animation: jny-chute-wobble 2.8s ease-in-out infinite;
  }
}
@keyframes jny-chute-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-3.4deg); }
  75%      { transform: rotate(3.4deg); }
}
/* glassy live-telemetry card, same family as the hero balloon's card */
.jny__landing-card {
  position: absolute;
  top: 12%;
  right: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px 11px;
  border-radius: 12px;
  background: rgba(2, 33, 81, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 26px rgba(2, 33, 81, 0.28);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px) scale(0.92);
  transform-origin: top right;
  transition: opacity 0.28s ease, transform 0.32s var(--ease, ease);
  pointer-events: none;
}
.jny__landing-hot:hover ~ .jny__landing-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.jny__lcard-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--atb-telemetry-green);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  margin-bottom: 2px;
}
.jny__lcard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #48D97C;
  box-shadow: 0 0 6px rgba(72, 217, 124, 0.9);
  animation: jny-lcard-ping 1.4s ease-in-out infinite;
}
@keyframes jny-lcard-ping {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.jny__lcard-row { color: rgba(255, 255, 255, 0.88); }
.jny__lcard-row b { font-weight: 700; color: #fff; }

/* landing target: standalone pin planted on the foreground grass,
   sitting to the LEFT of where the payload finishes its hover descent */
.jny__landing-marker {
  position: absolute;
  z-index: 2;
  right: clamp(17%, 19vw, 23%);
  bottom: clamp(8px, 1.6vw, 24px);
  pointer-events: none;
}
.jny__landing-pin {
  display: block;
  width: clamp(26px, 2.8vw, 36px);
  height: clamp(26px, 2.8vw, 36px);
  filter: drop-shadow(0 4px 8px rgba(2, 33, 81, 0.3));
}
/* label chip floats off the pin's upper-left corner, callout style */
.jny__landing-label {
  position: absolute;
  bottom: calc(100% - 4px);
  right: calc(100% - 8px);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #E4D6BC;
  box-shadow: 0 6px 16px rgba(2, 33, 81, 0.16);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--atb-deep-space);
  white-space: nowrap;
}
.jny__landing-field {
  position: relative;
  display: block;
  /* the artwork's own transparent sky supplies the gap under the discover card */
  margin-top: 0;
  left: -3%;
  width: 106%;
  max-width: none;
  min-width: 900px;
  /* crop the artwork to a shallow strip; keep the tree line + hills visible
     and let the footer edge trim the foreground grass */
  height: clamp(200px, 22vw, 330px);
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}

/* ============================== JOURNEY RESPONSIVE ============================== */
@media (max-width: 960px) {
  .jny { --jny-rail-w: 0px; }
  .jny__phase > .container::before { display: none; }
  .jny__rail { display: none; }
  /* no rail to clear: restore the plain vertical fade */
  .jny__stars {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 78%, transparent 100%);
    mask-composite: add;
  }
  .jny__row,
  .jny__row--flip {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .jny__row--flip .jny__card { order: 0; }
  .jny__row--flip .jny__visual { order: 1; }
  .jny__visual { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .jny__icon { width: clamp(120px, 24vw, 160px); }
  .jny__icon--learn-board,
  .jny__icon--plan-map,
  .jny__icon--build-prep,
  .jny__icon--recover-scene { width: min(100%, 380px); }
}
@media (max-width: 640px) {
  .jny__split { grid-template-columns: 1fr; gap: 20px; }
  .jny__landing { min-height: 180px; }
  .jny__landing-field { min-width: 680px; height: 180px; }
  .jny__landing-rig {
    right: 10%;
    top: 4px;
    width: 84px;
  }
  .jny__landing-marker { right: 34%; bottom: 10px; }
  .jny__landing-card { display: none; }
}


/* --- intro copy + video row --- */
.mintro__row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 48px) clamp(32px, 5vw, 72px);
  align-items: start;
}
.mintro__copy {
  grid-column: 1;
  grid-row: 1;
}
.mintro__video {
  grid-column: 2;
  grid-row: 1;
}
.mintro__pills {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 100%;
}
.mintro__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #F2F8FE;
  border: 1px solid #D9E9FA;
  box-shadow: 0 3px 10px rgba(2, 33, 81, 0.05);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--atb-accent-blue);
  white-space: nowrap;
}
.mintro__pill svg {
  width: 19px;
  height: 19px;
  color: var(--atb-mission-blue);
  flex-shrink: 0;
}
.mintro__pill img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  flex-shrink: 0;
}
.mintro__title {
  font-size: var(--text-h2);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.mintro__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--atb-mission-blue);
}
.mintro__lede {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: var(--text-lede);
  line-height: 1.6;
  color: var(--atb-accent-blue);
  font-weight: 500;
}

/* --- Wrigley video card --- */
.mintro__video {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 8px 24px rgba(2, 33, 81, 0.12),
    0 28px 60px rgba(2, 33, 81, 0.14);
  /* own compositing layer so the rounded corners clip the video cleanly */
  transform: translateZ(0);
}
.mintro__video-el {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: contain;
  background: #fff;
}
.mintro__video-caption {
  padding: 13px 20px;
  background: var(--atb-deep-space);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-body);
}

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) {
  :root {
    --hhero-copy-h: 380px;
    --hhero-owl-visible: clamp(170px, 40vw, 240px);
    --hhero-owl-w: clamp(180px, 44vw, 260px);
    --hhero-land-w: max(106vw, 820px);
  }
  .hhero {
    height: auto;
    min-height: calc(var(--hhero-copy-h) + var(--hhero-owl-visible) + var(--hhero-curve-h) + 32px);
    padding-bottom: calc(var(--hhero-curve-h) + var(--hhero-owl-visible) * 0.35);
    align-items: flex-start;
  }
  .hhero__inner { padding-top: 24px; }
  .hhero__landscape { min-width: 820px; }
  .hhero__mountains { min-width: 860px; bottom: clamp(96px, 13vw, 150px); }
  .hhero__balloon-rig { width: clamp(110px, 20vw, 170px); }
  .hhero__curve { height: clamp(96px, 13vw, 130px); }
}

/* below this the schoolhouse–Wrigley gap is too narrow: center full-width */
@media (max-width: 640px) {
  :root {
    --hhero-copy-h: 400px;
    --hhero-owl-visible: 190px;
  }
  .hhero {
    min-height: calc(var(--hhero-copy-h) + var(--hhero-owl-visible) + var(--hhero-curve-h));
    padding-bottom: calc(var(--hhero-curve-h) + 150px);
  }
  .hhero__copy {
    margin-inline: 0;
    padding-inline: 24px;
  }
  .hhero__copy-box { text-align: center; }
  .hhero__title-line { white-space: normal; }
  .hhero__lede { margin-inline: auto; }
  .hhero__actions { justify-content: center; }
  .hhero__actions .btn { justify-content: center; }
  .hhero__owl { width: 176px; right: var(--hhero-owl-right); }
  .hhero__landscape { min-width: 680px; }
  .hhero__mountains { min-width: 700px; bottom: 92px; }
  /* narrow screens: tuck balloon against the right edge, clear of centered copy */
  .hhero__balloon-rig {
    top: calc(var(--nav-h) + 18px);
    right: 4px;
    width: 150px;
  }
  .hhero__balloon { width: 26%; }
  .hhero__trail { display: none; }
  .hhero__curve { height: 88px; }
}

/* --- mission intro responsive --- */
@media (max-width: 900px) {
  .mintro { --mintro-fade: clamp(120px, 17vw, 170px); }
  .mintro__row {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .mintro__copy,
  .mintro__video {
    grid-column: 1;
    grid-row: auto;
  }
  .mintro__video {
    max-width: 520px;
    justify-self: center;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .mintro { --mintro-fade: 110px; }
  /* stack the steps as rows: icon left, label right */
  .mintro__steps {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 360px;
    margin-inline: auto;
  }
  .mintro__step {
    flex-direction: row;
    gap: 18px;
    text-align: left;
  }
  .mintro__steps > li:not(:last-child)::after { display: none; }
  .mintro__icon { width: 88px; }
  .mintro__badge {
    top: -2px;
    left: -2px;
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
  .mintro__label { margin-top: 0; }
  .hhero__telemetry { display: none; }
}

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  .hhero__owl { animation: none !important; }
  .hhero__accent { animation: none; background-position: 12% 50%; }
  .mintro__step:hover,
  .mintro__step:focus-visible { transform: none; }
  .jny__landing-hot:hover ~ .jny__landing-drift { transform: none; }
  .jny__landing-hot:hover ~ .jny__landing-drift .jny__landing-chute { animation: none; }
  .jny__lcard-dot { animation: none; }
  .jny__tel-dot { animation: none; }
  .jny__launch-balloon { animation: none; }
  .jny__ascent-line { animation: none; stroke-dashoffset: 0; }
  .jny__ascent-dot { animation: none; opacity: 1; transform: none; }
  .jny__stars::before { animation: none; opacity: 0; }
}