/* ==========================================================================
   Legacy Aviation Group — v2 site-wide polish
   Loaded after tokens/styles/pages. Everything below is a deliberate
   refinement layer: surfaces, depth, motion, hero system, product stage,
   pinned story, footer, forms. Class names from the existing templates are
   kept so the promotion to production is a stylesheet swap.
   ========================================================================== */

/* --- 0. Base ------------------------------------------------------------- */
body { color: var(--ink); }
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.h1 { line-height: 1.02; }
.h2 { line-height: 1.08; }
.lead { max-width: var(--measure-wide); line-height: 1.5; }
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-3);
}
.eyebrow--light { color: var(--white-50); }
.eyebrow--brand { color: var(--brand-medium); }
.text-muted { color: var(--ink-2); }
.section-head .h2 { margin-bottom: var(--space-lg); }
.section-head .lead { max-width: var(--measure-wide); }
.accent { letter-spacing: -0.005em; }

/* Hairlines everywhere sit at the same tone. */
.rule, .specs, .spec, .faq__list, .faq__item, .program-list, .list-link,
.svc, .sector, .pillar, .tl, .timeline, .compare th, .compare td,
.stats__row, .ac-specbar { border-color: var(--line); }

/* --- 1. Surfaces ---------------------------------------------------------- */
.section--dark,
.section--brand-tint {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: var(--white);
}
.section--brand {
  background:
    radial-gradient(120% 90% at 85% 0%, rgb(0 158 210 / 0.22), transparent 55%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-950) 100%);
}
.section--dark::before { opacity: 0.045; }
.section--dark .text-muted-light { color: var(--white-70); }
.section--dark .ticks li { color: var(--white-70); }

/* Bone sections fade their ground in as they enter (motion.js writes --p). */
.v2 .section--bone[data-tone] {
  --tone: calc(min(1, var(--p, 1) * 1.6) * 100%);
  background: color-mix(in oklab, var(--surface-0), var(--surface-1) var(--tone));
}
.v2-reduce .section--bone[data-tone] { background: var(--surface-1); }

/* --- 2. Buttons, links, micro-interactions ------------------------------- */
.btn {
  padding: 0.95rem 2rem;
  font-size: var(--text-rg);
  font-weight: var(--w-regular);
  letter-spacing: 0.01em;
  transition: color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              background-color var(--dur-ui) var(--ease-out);
}
.btn:hover, .btn:focus-visible, .btn:active { transform: none; box-shadow: none; }
.btn:not(.btn--secondary):not(.btn--alt):hover { box-shadow: none; }
.btn::after { transition: transform var(--dur-ui) var(--ease-out); }
.btn--secondary { border-color: var(--line-strong); color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink); --btn-ink: var(--white); }
.btn--secondary::after { background: var(--ink); }
.btn--alt { border-color: var(--line-light-strong); }
.btn--sm { padding: 0.7rem 1.4rem; font-size: var(--text-sm); }
.btn-group { gap: var(--space-md) var(--space-lg); }

.link {
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  gap: 0.6rem;
}
.link::after { display: none; }
.link .link-arrow { transition: transform var(--dur-micro) var(--ease-out); }
.link:hover .link-arrow { transform: translateX(4px); }
.link-arrow { transition: transform var(--dur-micro) var(--ease-out); }
.list-link:hover .link-arrow { transform: translateX(4px); }
.prog-card:hover, .article--link:hover { transform: none; }

/* Underline that draws from the left, for in-copy links. */
.prose a, .footer__link, .footer__legal a, .nav__drawer-sub a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-ui) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.prose a:hover, .footer__link:hover, .footer__legal a:hover, .nav__drawer-sub a:hover { background-size: 100% 1px; }
.footer__link:hover, .footer__col-title:hover { padding-left: 0; }
.prose--legal a { background-image: none; text-decoration: underline; }

/* Focus rings: one style, always visible, never clipped by overflow. */
:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: 2px; }
.btn:focus-visible { outline-offset: 4px; border-radius: var(--radius-pill); }

/* --- 3. Navigation -------------------------------------------------------- */
.nav {
  min-height: var(--nav-h);
  transition: background-color var(--dur-ui) var(--ease-out),
              min-height var(--dur-ui) var(--ease-out),
              backdrop-filter var(--dur-ui) var(--ease-out);
}
.nav::before { background: linear-gradient(to bottom, rgb(6 16 26 / 0.6), transparent); }
.nav.is-solid {
  background: rgb(10 23 35 / 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  min-height: var(--nav-h-solid);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06);
}
.nav.is-open { background: rgb(10 23 35 / 0.96); }
.nav__logo img { transition: height var(--dur-ui) var(--ease-out); }
.nav.is-compact .nav__logo img { height: 2.5rem; }
.nav__progress { height: 1px; }
.nav__progress > span { background: linear-gradient(to right, var(--brand-medium), var(--brand-light) 70%, #7fd3ef); }
.nav__phone { color: var(--white-70); font-size: var(--text-xs); letter-spacing: 0.08em; }

.nav__drawer,
.nav__drawer.is-open { background: rgb(8 19 30 / 0.92); }
@media (min-width: 640px) {
  .nav__drawer { background: rgb(8 19 30 / 0.86); box-shadow: 40px 0 80px -30px rgb(0 0 0 / 0.5); }
}
.nav__drawer > a,
.nav__drawer-row { font-size: var(--text-md); letter-spacing: 0.1em; border-color: var(--line-light); }
.nav__drawer > a, .nav__drawer-link {
  position: relative;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav__drawer > a:hover, .nav__drawer-link:hover { color: var(--white); }
.nav__drawer a[aria-current="page"] { color: var(--white); }
.nav__drawer > a[aria-current="page"]::before,
.nav__drawer-link[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: var(--brand-light);
}
.nav__drawer-caret span { transition: transform var(--dur-content) var(--ease-out); }
.nav__drawer-sub { transition: max-height var(--dur-content) var(--ease-out), opacity var(--dur-content) var(--ease-out); }
.nav__drawer-sub a { background-position: 100% 100%; }

/* --- 3b. Drawer motion: identical to production (lag-systems.com) ----------
   Only the skin changed to navy. Every timing below is the production value,
   restated because the v2 tokens (--dur-md, --ease-lux) were retuned. */
.nav__drawer { transition: transform 820ms cubic-bezier(0.16, 1, 0.3, 1), background 480ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav__drawer > a, .nav__drawer > .nav__drawer-group { transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 480ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav__drawer-caret span { transition: transform 1400ms cubic-bezier(0.65, 0, 0.35, 1); }
.nav__drawer-sub { transition: max-height 1400ms cubic-bezier(0.65, 0, 0.35, 1), opacity 1400ms cubic-bezier(0.65, 0, 0.35, 1); }
.nav__drawer > a, .nav__drawer-row { font-size: var(--text-lg); letter-spacing: 0.08em; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms linear; }
.nav { transition: background 480ms cubic-bezier(0.22, 1, 0.36, 1), min-height 480ms cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 480ms cubic-bezier(0.22, 1, 0.36, 1); }

/* --- 4. Hero system ------------------------------------------------------- */
/* Editorial composition: title anchored low-left, lead + actions to its right
   on wide screens. Media parallaxes and eases back as the page scrolls on
   (motion.js writes --p from 0 at the top to 1 once the hero has left). */
.hero { align-items: flex-end; background: var(--navy-950); }
.hero--photo { min-height: 86svh; }
.hero--photo.hero--tall { min-height: 100svh; }
.hero--photo.hero--short { min-height: 62svh; }
.hero__media { will-change: transform; }
.v2 .hero__media {
  transform: translate3d(0, calc(var(--p, 0) * 18%), 0) scale(calc(1.04 + var(--p, 0) * 0.06));
  transform-origin: 50% 100%;
}
.v2 .hero__media img, .v2 .hero__poster, .v2 .hero--photo .hero__media img { animation: none; }
.v2 .hero__scrim {
  background:
    linear-gradient(to top, rgb(6 16 26 / 0.92) 0%, rgb(6 16 26 / 0.55) 30%, rgb(6 16 26 / 0.1) 60%, transparent 80%),
    linear-gradient(to right, rgb(6 16 26 / 0.45) 0%, transparent 60%),
    rgb(6 16 26 / 0.12);
}
.v2 .hero__vignette { background: radial-gradient(130% 90% at 50% 40%, transparent 50%, rgb(6 16 26 / 0.4) 100%); }
.hero__inner { padding-block: calc(var(--nav-h) + var(--space-3xl)) clamp(4.5rem, 12vh, 8rem); }
/* A floating quote bar follows these heroes; leave it room below the actions. */
.hero--video .hero__inner, .hero:has(+ .quotebar-wrap--float) .hero__inner { padding-bottom: clamp(9rem, 20vh, 13rem); }
.v2 .hero__inner {
  opacity: calc(1 - var(--p, 0) * 1.6);
  transform: translate3d(0, calc(var(--p, 0) * -6vh), 0);
}
.hero__content {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas: "eyebrow eyebrow" "title lead" "title actions";
  align-items: end;
  column-gap: var(--space-3xl);
  row-gap: var(--space-lg);
}
@media (min-width: 1151px) { .hero__content { max-width: none; } }
.hero__content .h1 { grid-area: title; margin: 0; max-width: 16ch; }
.hero__eyebrow { grid-area: eyebrow; margin: 0 0 var(--space-xs); }
.hero__lead { grid-area: lead; margin: 0; max-width: var(--measure); color: var(--white-70); font-size: var(--text-lg); }
.hero__content .btn-group { grid-area: actions; margin: 0; }
.hero__content > :only-child { grid-column: 1 / -1; }
.hero__cue { bottom: var(--space-lg); left: auto; right: var(--gutter); transform: none; align-items: flex-end; color: var(--white-40); }
.hero__cue-line { height: 2.5rem; }
.hero--short .hero__cue { display: none; }
.hero:has(+ .quotebar-wrap--float) .hero__cue, .hero--video .hero__cue { bottom: clamp(7rem, 16vh, 10rem); }

/* --- 5. Quote bar (floating) ---------------------------------------------- */
.quotebar { border: 0; box-shadow: var(--shadow-3); padding: var(--space-xl) var(--space-2xl); }
.quotebar-wrap--float { margin-top: calc(var(--space-3xl) * -1.1); }
.qb-field__label, .quotebar__eyebrow { color: var(--ink-3); }
.qb-field__input { border-bottom-color: var(--line-strong); padding-block: 0.55rem; }
.qb-field { position: relative; }
.qb-field::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand-light);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-ui) var(--ease-out);
}
.qb-field:focus-within::after { transform: scaleX(1); }
.qb-field__input:focus { border-bottom-color: var(--line-strong); }
.qb-submit { padding: 0.95rem 1.75rem; }
.qb-submit svg { transition: transform var(--dur-micro) var(--ease-out); }
.qb-submit:hover svg { transform: translateX(3px); }

/* --- 6. Stats band -------------------------------------------------------- */
.stats { padding-block: var(--section-sm); }
.stats__row { border-color: var(--line); padding-block: var(--space-xl); gap: var(--space-lg); }
.stat { text-align: left; position: relative; padding-left: var(--space-md); }
.stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0.25rem; bottom: 0.25rem;
  width: 1px;
  background: var(--brand-light);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--dur-section) var(--ease-out);
}
.stat.is-in::before { transform: scaleY(1); }
.stat__num { font-size: clamp(2.5rem, 4.2vw, 4rem); letter-spacing: -0.03em; }
.stat__label { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--ink-3); }

/* --- 7. Aircraft product stage -------------------------------------------- */
.stage {
  position: relative;
  height: 230vh;
  background: var(--surface-0);
}
.stage--single { height: 190vh; }
.stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.stage__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.stage__sky video {
  width: auto; min-width: 100%; height: 100%;
  margin-inline: auto;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: calc(0.3 + var(--p, 0) * 0.3);
  transition: opacity var(--dur-hero) var(--ease-out);
}
.stage__sky::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--white) 0%, rgb(255 255 255 / 0) 22%, rgb(255 255 255 / 0) 72%, var(--white) 100%),
    linear-gradient(to right, var(--white) 0%, rgb(255 255 255 / 0) 12%, rgb(255 255 255 / 0) 88%, var(--white) 100%);
}
.stage__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "head head"
    "scene specs"
    "label specs"
    "nav nav";
  gap: 0 var(--space-3xl);
  padding-top: calc(var(--nav-h-solid) + var(--space-xl));
  padding-bottom: var(--space-xl);
  height: 100%;
}
.stage__head { grid-area: head; max-width: 40rem; margin-bottom: var(--space-md); }
.stage__head .eyebrow { margin-bottom: var(--space-sm); }
.stage__head .h2 { font-size: var(--h3); }
.stage__lead { margin-top: var(--space-sm); }
/* The heading eases back as the aircraft arrives, so the object owns the frame. */
.v2 .stage__head { opacity: calc(1 - max(0, var(--p, 0) - 0.5) * 1.3); transform: translate3d(0, calc(max(0, var(--p, 0) - 0.5) * -1.5rem), 0); }

.stage__scene {
  grid-area: scene;
  position: relative;
  min-height: 0;
  outline-offset: 12px;
}
.stage__horizon {
  position: absolute;
  left: 8%; right: 8%;
  bottom: 26%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent);
  transform: scaleX(calc(0.2 + var(--p, 0) * 0.8));
}
.stage__jet {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  align-items: center;
  pointer-events: none;
  /* approach: far → near. Each factor is driven by scroll progress. */
  --arrive: clamp(0, calc(var(--p, 0) * 2.1), 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out), filter var(--dur-hero) var(--ease-out), visibility 0s linear var(--dur-hero);
}
.stage__jet img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  filter: var(--shadow-jet);
  transform-origin: 50% 70%;
  will-change: transform;
}
.stage__jet.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out), filter var(--dur-hero) var(--ease-out), visibility 0s;
}
/* Scroll-driven approach on the active jet. Composited: transform + filter only. */
.stage__jet .fs-hero, .stage__gl { position: relative; z-index: 1; width: 100%; aspect-ratio: 1713 / 505; transform-origin: 50% 70%; will-change: transform; }
.stage__jet .fs-hero__img { filter: var(--shadow-jet); }
.v2 .stage__jet.is-on img, .v2 .stage__jet.is-on .fs-hero {
  transform:
    translate3d(calc((1 - var(--arrive)) * 8%), calc((1 - var(--arrive)) * -22%), 0)
    scale(calc(0.62 + var(--arrive) * 0.38));
  filter: blur(calc((1 - var(--arrive)) * 4px)) var(--shadow-jet);
  opacity: calc(0.4 + var(--arrive) * 0.6);
}
.stage__shadow {
  position: absolute;
  left: 12%; right: 12%;
  bottom: 22%;
  height: 14%;
  background: radial-gradient(50% 55% at 50% 50%, rgb(6 16 26 / 0.22), transparent 70%);
  opacity: var(--arrive);
  transform: scale(calc(0.6 + var(--arrive) * 0.4));
  filter: blur(6px);
}
/* Switching between aircraft: the outgoing glides off, the incoming glides in. */
.stage__jet.is-off {
  opacity: 0;
  transform: translate3d(calc(var(--dir, 1) * -10%), 0, 0) scale(0.96);
  filter: blur(6px);
}
.v2 .stage__jet:not(.is-on):not(.is-off) img, .v2 .stage__jet:not(.is-on):not(.is-off) .fs-hero { transform: translate3d(calc(var(--dir, 1) * 12%), 0, 0) scale(0.94); }

.stage__label { grid-area: label; align-self: end; padding-top: var(--space-md); }
.stage__cat { margin: 0 0 var(--space-2xs); font-size: var(--text-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.stage__name { margin: 0; font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; }
.stage__label > * { transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.stage__label.is-swapping > * { opacity: 0; transform: translateY(0.4rem); }

.stage__specs { grid-area: specs; align-self: end; }
.stage__list { margin: 0; border-top: 1px solid var(--line); }
.stage__spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  /* each row settles in as the aircraft arrives, one after the other */
  --row: clamp(0, calc((var(--p, 0) - 0.42 - var(--n, 0) * 0.05) * 7), 1);
  opacity: var(--row);
  transform: translate3d(0, calc((1 - var(--row)) * 0.75rem), 0);
}
.stage__spec dt { font-size: var(--text-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.stage__spec dd { margin: 0; font-size: var(--text-rg); font-weight: var(--w-regular); text-align: right; font-variant-numeric: tabular-nums; transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); transition-delay: calc(var(--n, 0) * 30ms); }
.stage__list.is-swapping dd { opacity: 0; transform: translateY(-0.3rem); }
.stage__cta { margin-top: var(--space-lg); --row: clamp(0, calc((var(--p, 0) - 0.7) * 7), 1); opacity: var(--row); }

.stage__nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  --row: clamp(0, calc((var(--p, 0) - 0.5) * 5), 1);
  opacity: var(--row);
}
.stage__thumbs {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 2px;
}
.stage__thumbs::-webkit-scrollbar { display: none; }
.stage__thumb {
  flex: 0 0 auto;
  display: grid;
  gap: 0.35rem;
  width: 8rem;
  padding: 0.5rem 0.5rem 0.4rem;
  opacity: 0.45;
  border-radius: 2px;
  transition: opacity var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.stage__thumb img { width: 100%; height: 2.4rem; object-fit: contain; transition: transform var(--dur-ui) var(--ease-out); }
.stage__thumb span { font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--ink-2); white-space: nowrap; text-align: center; }
.stage__thumb:hover { opacity: 0.8; }
.stage__thumb:hover img { transform: translateY(-2px); }
.stage__thumb.is-on { opacity: 1; }
.stage__thumb.is-on span { color: var(--ink); }
.stage__thumb::after { content: ""; height: 1px; background: var(--brand-light); transform: scaleX(0); transition: transform var(--dur-ui) var(--ease-out); }
.stage__thumb.is-on::after { transform: scaleX(1); }
.stage__arrow {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
.stage__arrow svg { width: 1.1rem; height: 1.1rem; }
.stage__arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.stage__arrow:disabled { opacity: 0.25; pointer-events: none; }

/* --- 7b. Promoted 3D fleet showcase (shared with production) --------------
   Only depth and rhythm are added here; the showcase's own renderer and
   choreography are untouched. The stage settles into place as it enters and
   the ground tint deepens once the aircraft has the frame. */
.v2 .fs__stage {
  transform: translate3d(0, calc((1 - var(--p, 1)) * 5vh), 0) scale(calc(0.965 + var(--p, 1) * 0.035));
  transform-origin: 50% 100%;
  will-change: transform;
}
.v2 .fs__picker, .v2 .fs__specs { transform: translate3d(0, calc((1 - var(--p, 1)) * 2vh), 0); }

/* The stage at dusk. Pale sky above the aircraft, a dark polished apron below
   it, the horizon glowing between — and the apron carries straight on into the
   navy programs story beneath, so the two read as one product chapter.
   Sky and apron are pseudo-elements of the stage (so their geometry follows
   the stage box), bleeding sideways to the section edge and down to its end;
   .fs { overflow: hidden } clips them. The showcase's own light, floor shadow
   and renderer are untouched. */
.v2 .fs { background: var(--white); }
.v2 .fs__stage { z-index: 1; }
.v2 .fs__stage::before {
  content: "";
  position: absolute;
  left: -50vw; right: -50vw;
  top: -60%;
  height: 134%;
  z-index: -1;
  background: linear-gradient(to bottom,
    var(--white) 0%, #f6f8fa 38%, #e9eef3 62%, #d6e0e8 80%, #bccbd7 93%, #a7bac8 100%);
  pointer-events: none;
}
.v2 .fs__stage::after {
  content: "";
  position: absolute;
  left: -50vw; right: -50vw;
  top: 74%;
  height: 400vh;
  z-index: -1;
  /* the apron's lit edge, then depth */
  background: linear-gradient(to bottom,
    rgb(255 255 255 / 0.7) 0px, rgb(200 224 236 / 0.5) 2px, rgb(0 158 210 / 0.14) 6px, var(--navy-700) 18px,
    var(--navy-800) 10vh, var(--navy-900) 30vh, var(--navy-900) 100%);
  pointer-events: none;
}
/* rolling clouds in the sky half, masked soft */
.v2 .fs__sky {
  position: absolute;
  inset: -30% 0 30% 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 80%, transparent 100%);
}
.v2 .fs__sky video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.v2 .fs__atmo-light {
  z-index: 1;
  background: radial-gradient(ellipse 46% 36% at calc(50% + var(--bx) * 4%) calc(40% + var(--by) * -3%),
    rgb(255 255 255 / 0.9) 0%, rgb(255 255 255 / 0.4) 40%, transparent 72%);
  /* stays in the sky: fades out before the horizon so nothing is clipped on the apron */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 74%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 74%);
}
.v2 .fs__atmo-floor {
  z-index: 1;
  /* bounce light on the apron beneath the aircraft: on brand, restrained */
  background: radial-gradient(ellipse 40% 14% at 50% 80%, rgb(0 158 210 / 0.2), rgb(0 158 210 / 0.05) 55%, transparent 80%);
  -webkit-mask-image: none;
  mask-image: none;
}
.v2 .fs__atmo-grain { z-index: 2; opacity: 0.06; mix-blend-mode: soft-light; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 72%); mask-image: linear-gradient(to bottom, #000 58%, transparent 72%); }
/* the studio's own edge mask would print a box on the dark apron: fade only the sides */
.v2 .fs__atmo { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
/* foreground haze becomes apron depth: the belly sinks into the dark */
.v2 .fs__haze { display: none; }
.v2 .fs__shadow--soft { width: 40%; height: 46%; background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.12) 50%, transparent 72%); }
.v2 .fs__shadow--atmos { display: none; }
.v2 .fs.is-gl .fs__ground { bottom: -4%; height: 14%; }

/* Everything below the horizon is now on navy: flip the type and hairlines. */
.v2 .fs__picker, .v2 .fs__specs, .v2 .fs .spec-note, .v2 .fs > .container > [data-fs-in]:last-child { position: relative; z-index: 2; }
.v2 .fs__pick img { filter: grayscale(1) brightness(1.7); opacity: 0.38; }
.v2 .fs__pick:hover img, .v2 .fs__pick:focus-visible img { opacity: 0.8; filter: grayscale(0.3) brightness(1.15); }
.v2 .fs__pick.is-on img { opacity: 1; filter: none; }
.v2 .fs__pick-name { color: var(--white-50); }
.v2 .fs__pick.is-on .fs__pick-name { color: var(--white); }
.v2 .fs__specs { border-color: var(--line-light); }
.v2 .fs__spec { border-left-color: var(--line-light); }
.v2 .fs__spec-label, .v2 .fs__spec-icon { color: var(--white-50); }
.v2 .fs__spec-primary { color: var(--white); }
.v2 .fs__spec-secondary { color: var(--white-50); }
.v2 .fs__cta { --btn-fill: transparent; --btn-ink: var(--white); border-color: var(--line-light-strong); color: var(--white); }
.v2 .fs__cta::after { background: var(--white); }
.v2 .fs__cta:hover { --btn-ink: var(--ink); border-color: var(--white); }
.v2 .fs .spec-note { color: var(--white-50); }
.v2 .fs__label { z-index: 3; }
/* The section ends in navy and the programs story begins in navy: no seam. */
.v2 .fs + .story.section--dark { background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%); }
.v2 .fs + .story.section--dark::before { opacity: 0.03; }
.v2-reduce .fs__sky { display: none; }

.fs__title { text-wrap: balance; }
.fs__arrow { border-color: var(--line-strong); transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.fs__arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.v2-reduce .fs__stage, .v2-reduce .fs__picker, .v2-reduce .fs__specs { transform: none; }

/* --- 7c. Open the cabin (aircraft pages) ---------------------------------- */
.open { position: relative; height: 300vh; background: var(--navy-950); color: var(--white); }
.open__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  /* phases, shared by every layer below */
  --lift: clamp(0, calc((var(--p, 0) - 0.28) * 2.2), 1);    /* 0.28 → 0.73: shell lifts, cabin opens */
  --settle: clamp(0, calc((var(--p, 0) - 0.6) * 3), 1);     /* 0.60 → 0.93: specification settles */
}
.open::before { display: none; }
/* --- Backdrop: a hangar at night, drawn as a technical sheet --------------- */
.open__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.open__bg > span { position: absolute; display: block; }
.open__sky {
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% -10%, rgb(120 170 205 / 0.16), transparent 70%),
    radial-gradient(100% 60% at 50% 105%, rgb(0 30 48 / 0.9), transparent 60%),
    linear-gradient(180deg, #08131e 0%, var(--navy-950) 55%, #040a12 100%);
}

/* --- Blueprint sheet ------------------------------------------------------
   The cutaway is a drawing, so the backdrop is the sheet it was drawn on. A
   cyanotype ground, a two-scale drafting grid, a drawn border, reference axes
   and dimension callouts — all of it faint at the top of the section and fully
   inked by the time the airframe has opened, so the act of scrolling is what
   develops the print. --p is the section's scroll progress; --lift is the
   phase in which the shell rises. */
.open__bg--blueprint ~ * { --blueprint: 1; }
.open__bg--blueprint .open__sky {
  background:
    radial-gradient(76% 58% at 50% 6%, rgb(46 118 168 / 0.30), transparent 72%),
    radial-gradient(120% 70% at 50% 108%, rgb(2 18 38 / 0.94), transparent 62%),
    linear-gradient(180deg, #06172c 0%, #082139 46%, #04101f 100%);
}
.open__grid {
  inset: -2%;
  --ink: rgb(126 196 235 / 1);
  background-image:
    linear-gradient(to right, rgb(126 196 235 / 0.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(126 196 235 / 0.30) 1px, transparent 1px),
    linear-gradient(to right, rgb(126 196 235 / 0.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(126 196 235 / 0.11) 1px, transparent 1px);
  background-size: 9rem 9rem, 9rem 9rem, 1.5rem 1.5rem, 1.5rem 1.5rem;
  background-position: 50% 50%;
  /* the sheet drifts a little under the aircraft as you scroll */
  transform: translate3d(0, calc(var(--p, 0) * -2.5rem), 0);
  -webkit-mask-image: radial-gradient(85% 78% at 50% 46%, #000 30%, rgb(0 0 0 / 0.35) 72%, transparent 100%);
  mask-image: radial-gradient(85% 78% at 50% 46%, #000 30%, rgb(0 0 0 / 0.35) 72%, transparent 100%);
  opacity: calc(0.18 + var(--p, 0) * 0.62);
}
/* Drawn border with the corner ticks of a real drawing frame. */
.open__frame {
  inset: clamp(1rem, 2.6vw, 2.4rem);
  border: 1px solid rgb(126 196 235 / 0.34);
  opacity: calc(0.15 + var(--lift) * 0.85);
}
.open__frame::before,
.open__frame::after {
  content: ""; position: absolute; inset: 0.55rem;
  border: 1px solid rgb(126 196 235 / 0.16);
}
.open__frame::after {
  inset: -1px;
  border: 0;
  background:
    linear-gradient(to right, rgb(126 196 235 / 0.55) 2px, transparent 2px) 0 0 / 3.5rem 1px no-repeat,
    linear-gradient(to left, rgb(126 196 235 / 0.55) 2px, transparent 2px) 100% 0 / 3.5rem 1px no-repeat,
    linear-gradient(to right, rgb(126 196 235 / 0.55) 2px, transparent 2px) 0 100% / 3.5rem 1px no-repeat,
    linear-gradient(to left, rgb(126 196 235 / 0.55) 2px, transparent 2px) 100% 100% / 3.5rem 1px no-repeat;
}
/* Reference axes — butt line and water line, the way an airframe drawing
   labels its datum. They extend across the sheet as the shell lifts. */
.open__axis {
  font: 500 0.5625rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.16em; color: rgb(150 210 240 / 0.72);
  opacity: calc(var(--lift) * 0.9);
  white-space: nowrap;
}
.open__axis::before {
  content: ""; position: absolute; top: 50%;
  height: 1px; background: rgb(126 196 235 / 0.40);
}
.open__axis--wl { left: 4.5rem; top: 52%; padding-left: 0.5rem; }
.open__axis--wl::before { left: -0.25rem; width: calc(4rem + var(--lift) * 62vw); transform-origin: 0 50%; }
.open__axis--bl { left: 50%; top: 18%; transform: translateX(-50%); padding-top: 0.6rem; }
.open__axis--bl::before {
  top: auto; bottom: -0.1rem; left: 50%; transform: translateX(-50%);
  width: 1px; height: calc(var(--lift) * 44vh);
  background: rgb(126 196 235 / 0.34);
}
/* Dimension callouts: a rule with end ticks, and its figure. */
.open__dim {
  display: flex; align-items: center; gap: 0.5rem;
  opacity: calc(clamp(0, (var(--lift) - 0.25) * 1.8, 1) * 0.95);
}
.open__dim i {
  display: block; height: 1px; background: rgb(126 196 235 / 0.5); position: relative;
  transform: scaleX(clamp(0, (var(--lift) - 0.2) * 1.6, 1)); transform-origin: 0 50%;
}
.open__dim i::before, .open__dim i::after {
  content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: rgb(126 196 235 / 0.7);
}
.open__dim i::before { left: 0; }
.open__dim i::after { right: 0; }
.open__dim b {
  font: 500 0.5625rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgb(150 210 240 / 0.8); white-space: nowrap;
}
/* Kept clear of the feature chips along the bottom and of the specification
   block on the right, so the sheet never fights the content it annotates. */
.open__dim--len { left: 4.5%; bottom: 31%; }
.open__dim--len i { width: 22vw; }
.open__dim--span { left: 4.5%; bottom: 26.5%; }
.open__dim--span i { width: 17vw; }
.open__stamp {
  left: clamp(1.6rem, 3.2vw, 3rem); top: clamp(5.5rem, 9vh, 7rem);
  font: 500 0.5625rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.16em; color: rgb(150 210 240 / 0.55);
  opacity: calc(0.2 + var(--lift) * 0.8);
}
.open__bg--blueprint .open__floor {
  background-image:
    linear-gradient(to right, rgb(126 196 235 / 0.26) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(126 196 235 / 0.26) 1px, transparent 1px),
    linear-gradient(to right, rgb(126 196 235 / 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(126 196 235 / 0.12) 1px, transparent 1px);
}
.open__bg--blueprint .open__horizon {
  background: linear-gradient(to right, transparent, rgb(126 196 235 / 0.55) 30%, rgb(126 196 235 / 0.55) 70%, transparent);
}
.open__bg--blueprint .open__beam { opacity: calc((0.35 + var(--lift) * 0.65) * 0.55); }
@media (prefers-reduced-motion: reduce) {
  .open__grid, .open__frame, .open__axis, .open__dim, .open__stamp { transition: none; }
  .open__dim i { transform: none; }
}
@media (max-width: 900px) {
  .open__axis, .open__dim, .open__stamp { display: none; }
  .open__grid { background-size: 6rem 6rem, 6rem 6rem, 1.1rem 1.1rem, 1.1rem 1.1rem; }
}
/* inspection light: a soft cone from a fixture above the cabin, warming as the roof lifts */
.open__beam {
  left: 50%; top: -12%;
  width: 46%; height: 120%;
  transform: translateX(-50%) perspective(600px) rotateX(calc(4deg - var(--lift) * 2deg));
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgb(200 225 240 / 0.20) 0%, rgb(160 200 225 / 0.08) 45%, transparent 100%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(18px);
  opacity: calc(0.35 + var(--lift) * 0.65);
}
/* drafting-grid floor in perspective; it resolves as the roof lifts and drifts with scroll */
.open__floor {
  left: -30%; right: -30%;
  top: 56%; height: 90%;
  transform-origin: 50% 0;
  transform: perspective(900px) rotateX(64deg) translate3d(0, calc(var(--p, 0) * -6%), 0);
  background-image:
    linear-gradient(to right, rgb(0 158 210 / 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 158 210 / 0.22) 1px, transparent 1px),
    linear-gradient(to right, rgb(0 158 210 / 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 158 210 / 0.10) 1px, transparent 1px);
  background-size: 12rem 12rem, 12rem 12rem, 2.4rem 2.4rem, 2.4rem 2.4rem;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(60% 90% at 50% 0%, #000 20%, transparent 100%);
  mask-image: radial-gradient(60% 90% at 50% 0%, #000 20%, transparent 100%);
  opacity: calc(0.25 + var(--lift) * 0.75);
}
.open__horizon {
  left: 8%; right: 8%; top: 56%; height: 1px;
  background: linear-gradient(to right, transparent, rgb(0 158 210 / 0.45) 30%, rgb(0 158 210 / 0.45) 70%, transparent);
  transform: scaleX(calc(0.3 + var(--lift) * 0.7));
  opacity: calc(0.4 + var(--lift) * 0.6);
}
/* the aircraft's shadow on the floor; it swings and softens as the aircraft turns */
.open__ground {
  left: 50%; top: 74%;
  width: 62%; height: 9%;
  transform: translate(-50%, -50%) rotate(calc(-4deg - var(--lift) * 18deg)) scale(calc(1 - var(--lift) * 0.25), calc(1 + var(--lift) * 1.6));
  background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.2) 50%, transparent 75%);
  filter: blur(22px);
  opacity: calc(0.9 - var(--lift) * 0.35);
}
/* drawing-sheet title block, lower left, settles with the specification */
.open__sheet {
  position: absolute; right: var(--gutter); bottom: calc(var(--space-xl) + 11.5rem);
  z-index: 2;
  padding-right: var(--space-md);
  border-right: 1px solid rgb(0 158 210 / 0.5);
  text-align: right;
  color: var(--white-70);
  opacity: var(--settle);
  transform: translate3d(0, calc((1 - var(--settle)) * 0.75rem), 0);
}
.open__sheet-title { margin: 0 0 var(--space-sm); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); }
.open__sheet-title span { display: block; margin-top: 0.2rem; color: var(--brand-light); }
.open__dims { margin: 0; display: grid; gap: 0.35rem; }
@media (max-height: 760px) { .open__sheet { display: none; } }
@media (max-width: 1150px) { .open__sheet { display: none; } }
.open__dims div { display: grid; grid-template-columns: auto 7rem; gap: var(--space-sm); align-items: baseline; --in: clamp(0, calc((var(--settle) - var(--n, 0) * 0.12) * 2.5), 1); opacity: var(--in); transform: translate3d(calc((1 - var(--in)) * 0.5rem), 0, 0); }
.open__dims dt { order: 2; }
.open__dims dd { order: 1; text-align: right; }
.open__dims dt { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-50); }
.open__dims dd { margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--white); }
.open__head, .open__scene, .open__foot { z-index: 1; }
.open__head {
  position: absolute; left: 0; right: 0;
  top: calc(var(--nav-h-solid) + var(--space-xl));
  z-index: 2;
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.open__head .eyebrow { margin-bottom: var(--space-md); }
.open__head .h2 { margin-bottom: var(--space-md); }
.open__lead { margin-inline: auto; max-width: 34rem; }
/* the heading yields as the cabin opens */
.v2 .open__head { opacity: calc(1 - var(--lift) * 1.6); transform: translate3d(0, calc(var(--lift) * -3rem), 0); }

.open__scene {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--nav-h-solid) + var(--space-md));
  bottom: 12.5rem;
  width: min(100%, 84rem);
  margin-inline: auto;
}
.open__shell, .open__inside { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; }
/* WebGL cutaway owns the scene once its mesh is ready; the image stack is the fallback. */
.open__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.open__tex { display: none; }
.open.is-gl .open__canvas { display: block; }
.open.is-gl .open__shell, .open.is-gl .open__inside { display: none; }
.open.is-gl .open__scene::before { display: none; }
.open__shell { z-index: 1; }
.open__shell img {
  width: 86%;
  max-height: 60%;
  object-fit: contain;
  filter: var(--shadow-jet) brightness(1.02);
  /* starts under the heading, lifts up and away */
  transform:
    translate3d(0, calc(24% - var(--lift) * 74%), 0)
    scale(calc(1 - var(--lift) * 0.3));
  opacity: calc(1 - var(--lift) * 0.94);
  will-change: transform, opacity;
}
.open__inside { z-index: 0; padding-inline: var(--gutter); }
.open__inside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a slit at the aircraft's beltline opens into a wide panel that fills the frame */
  clip-path: inset(calc(60% - var(--lift) * 60%) calc(26% - var(--lift) * 26%) calc(40% - var(--lift) * 40%) calc(26% - var(--lift) * 26%));
  transform: scale(calc(1.12 - var(--lift) * 0.12));
  opacity: clamp(0, calc(var(--lift) * 4), 1);
  box-shadow: var(--shadow-3);
  will-change: clip-path, transform;
}
.open__glow {
  position: absolute; left: 12%; right: 12%; top: 60%; height: 3px;
  background: linear-gradient(to right, transparent, rgb(255 255 255 / 0.7), transparent);
  filter: blur(3px);
  opacity: calc(clamp(0, var(--lift) * 8, 1) * clamp(0, 1 - var(--lift) * 1.8, 1));
  pointer-events: none;
}
.open__foot { position: absolute; left: 0; right: 0; bottom: var(--space-xl); z-index: 2; }
.open__chips { justify-content: center; gap: 0.4rem; max-width: 74rem; margin-inline: auto; }
.open__chips .chip {
  padding: 0.45rem 0.85rem;
  font-size: var(--text-xs);
  border-color: var(--line-light);
  color: var(--white-70);
  background: rgb(6 16 26 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  --in: clamp(0, calc((var(--settle) - var(--n, 0) * 0.03) * 3), 1);
  opacity: var(--in);
  transform: translate3d(0, calc((1 - var(--in)) * 0.6rem), 0);
}
.open__chips .chip:hover { border-color: var(--white-70); color: var(--white); }
.open__cta { display: flex; justify-content: center; margin-top: var(--space-md); opacity: var(--settle); transform: translate3d(0, calc((1 - var(--settle)) * 0.6rem), 0); }
.open__cta .btn { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgb(6 16 26 / 0.45); }
.open + .story .story__sticky { padding-top: 0; }
@media (max-width: 900px) {
  /* Static on phones: heading, the aircraft, the cabin, the specification. */
  .open { height: auto; }
  .open__sticky { position: static; height: auto; overflow: visible; --lift: 1; --settle: 1; padding-block: var(--section-lg) var(--section-md); }
  .open__head { position: static; margin-bottom: var(--space-xl); }
  .v2 .open__head { opacity: 1; transform: none; }
  .open__scene { position: relative; top: auto; bottom: auto; aspect-ratio: 4 / 3; margin-bottom: var(--space-xl); }
  .open__shell { display: none; }
  .open__inside img { clip-path: none; transform: none; opacity: 1; }
  .open__glow { display: none; }
  .open__foot { position: static; }
  .open__chips .chip { opacity: 1; transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }
  .open__sheet, .open__ground, .open__beam, .open__horizon { display: none; }
  .open__floor { top: 40%; opacity: 0.5; transform: perspective(900px) rotateX(64deg); }
  .open__cta { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .open { height: auto; }
  .open__sticky { position: static; height: auto; overflow: visible; --lift: 1; --settle: 1; padding-block: var(--section-lg) var(--section-md); }
  .open__head { position: static; margin-bottom: var(--space-xl); }
  .v2 .open__head { opacity: 1; transform: none; }
  .open__scene { position: relative; top: auto; bottom: auto; aspect-ratio: 16 / 9; margin-bottom: var(--space-xl); }
  .open__shell { display: none; }
  .open__foot { position: static; }
  .open__chips .chip { opacity: 1; transform: none; }
  .open__sheet, .open__ground, .open__beam { display: none; }
  .open__floor { opacity: 0.5; transform: perspective(900px) rotateX(64deg); }
}

/* --- 8. Pinned programs story --------------------------------------------- */
.story { position: relative; height: 460vh; }
.story__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-4xl);
  align-items: center;
  width: 100%;
  padding-top: var(--nav-h-solid);
}
.story__copy .eyebrow { margin-bottom: var(--space-md); }
.story__copy .h2 { margin-bottom: var(--space-md); font-size: var(--h3); }
.story__lead { margin-bottom: var(--space-xl); font-size: var(--text-rg); max-width: 34rem; }
.story__list { border-top: 1px solid var(--line-light); margin: 0; padding: 0; list-style: none; }
.story__item { border-bottom: 1px solid var(--line-light); }
.story__link {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  color: var(--white-50);
  transition: color var(--dur-ui) var(--ease-out);
}
.story__num { font-family: var(--font-accent); font-style: italic; font-size: 1.25rem; line-height: 1.6; color: var(--white-30); transition: color var(--dur-ui) var(--ease-out); }
.story__title { display: block; font-size: var(--text-md); font-weight: var(--w-light); line-height: 1.3; transition: color var(--dur-ui) var(--ease-out); }
/* slower, softer item transitions to match the longer hold */
.story__blurb, .story__cue {
  display: block;
  font-size: var(--text-sm);
  color: var(--white-50);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-content) var(--ease-out), opacity var(--dur-content) var(--ease-out), margin var(--dur-content) var(--ease-out);
}
.story__cue { display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--text-xs); color: var(--brand-light); }
.story__cue svg { width: 0.9rem; height: 0.9rem; transition: transform var(--dur-micro) var(--ease-out); }
.story__item.is-on .story__link, .story__item.is-on .story__title { color: var(--white); }
.story__item.is-on .story__num { color: var(--brand-light); }
.story__item.is-on .story__blurb { max-height: 6rem; opacity: 1; margin-top: 0.5rem; }
.story__item.is-on .story__cue { max-height: 2rem; opacity: 1; margin-top: 0.75rem; }
.story__link:hover .story__cue svg { transform: translateX(3px); }
.story__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  isolation: isolate;
}
.story__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1100ms var(--ease-out), transform 1600ms var(--ease-out);
}
.story__img.is-on { opacity: 1; transform: scale(1); }
.story__img.is-past { transform: scale(1); }
.story__counter {
  position: absolute;
  left: var(--space-lg); bottom: var(--space-lg);
  z-index: 2;
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-xs); letter-spacing: 0.1em;
  color: var(--white-70);
  font-variant-numeric: tabular-nums;
}
.story__counter-rule { width: 3rem; height: 1px; background: var(--white-30); }

/* --- 9. Split, frames: photographs grow into place ------------------------ */
.split { gap: var(--space-4xl); }
.frames__lg-wrap { display: block; position: relative; z-index: 1; width: 88%; overflow: hidden; }
.frames--flip .frames__lg-wrap { margin-left: auto; }
.frames__lg-wrap .frames__lg { width: 100%; }
@media (min-width: 48rem) { .split .frames .frames__lg-wrap { width: 92%; } }
/* The large frame's mask opens and the image settles as the section enters. */
.v2 .frames__lg-wrap { clip-path: inset(calc((1 - var(--p, 1)) * 8%) calc((1 - var(--p, 1)) * 10%) calc((1 - var(--p, 1)) * 8%) 0); }
.v2 .frames--flip .frames__lg-wrap { clip-path: inset(calc((1 - var(--p, 1)) * 8%) 0 calc((1 - var(--p, 1)) * 8%) calc((1 - var(--p, 1)) * 10%)); }
.v2 .frames__lg { transform-origin: 50% 50%; }
.frames__sm { border-width: 6px; }
.v2 .split__media { overflow: hidden; }
.split__media--tall img { aspect-ratio: 4 / 5; }
.lead-prose { font-size: var(--text-md); line-height: 1.6; }
.split--editorial .split__copy .eyebrow { margin-bottom: var(--space-lg); }
.v2-reduce .frames__lg-wrap, .v2-reduce .frames--flip .frames__lg-wrap { clip-path: none; }
.v2-reduce .frames__lg, .v2-reduce .split__media img, .v2-reduce .frames__sm { transform: none; }

/* --- 9b. Photographic depth -------------------------------------------------
   Every photograph sits inside a mask and drifts against it as the page moves
   (--t is continuous travel, 0.5 when the frame is centred). Foreground layers
   travel farther than background layers, so overlapping frames separate in Z.
   Shadows are long and low. Transforms only. */
.v2 [data-progress="travel"] { --d: calc(0.5 - var(--t, 0.5)); }   /* +0.5 → −0.5 as it passes */

/* Overlapping frame pairs: the big frame is the background plate, the small
   frame floats in front and travels farther, against it. */
.v2 .frames { --d: calc(0.5 - var(--t, 0.5)); }
.v2 .frames__lg-wrap {
  box-shadow: var(--shadow-2);
  transform: translate3d(0, calc(var(--d) * 4%), 0);
}
.v2 .frames__lg { transform: translate3d(0, calc(var(--d) * -7%), 0) scale(calc(1.18 - var(--p, 1) * 0.06)); }
.v2 .frames__sm {
  box-shadow: 0 30px 60px -20px rgb(11 15 20 / 0.45), 0 12px 24px -12px rgb(11 15 20 / 0.3);
  transform: translate3d(0, calc((1 - var(--p, 1)) * 3rem + var(--d) * -28%), 0);
}
.v2 .frames::after {
  /* a soft contact shadow under the pair, grounding it on the page */
  content: "";
  position: absolute;
  left: 10%; right: 14%; bottom: 16%;
  height: 10%;
  z-index: 0;
  background: radial-gradient(50% 60% at 50% 50%, rgb(11 15 20 / 0.18), transparent 70%);
  filter: blur(14px);
  transform: translate3d(0, calc(var(--d) * 8%), 0);
  pointer-events: none;
}
.v2 .frames--flip::after { left: 14%; right: 10%; }

/* Single photographs: image drifts inside its mask. */
.v2 .split__media img { transform: translate3d(0, calc(var(--d, 0) * -9%), 0) scale(calc(1.16 - var(--p, 1) * 0.06)); }
.v2 .split__media { box-shadow: var(--shadow-2); }
.v2 .route img, .v2 .office img, .v2 .article__media img, .v2 .prog-card__media img, .v2 .cat-card__media img, .v2 .programs__media img, .v2 .vidcard__media img {
  transform: translate3d(0, calc(var(--d, 0) * -6%), 0) scale(1.1);
  transition: transform var(--dur-hero) var(--ease-out);
}
.v2 .rail__item img, .v2 .rail__item video { transform: translate3d(0, calc(var(--d, 0) * -5%), 0) scale(1.08); }
.v2 .tile__img { transform: translate3d(0, calc(var(--d, 0) * -6%), 0) scale(1.08); }
.v2 .prod__photo img { transform: translate3d(0, calc(var(--d, 0) * -6%), 0) scale(1.1); }
.v2 .ig-reel__media img, .v2 .ig-reel__media video { transform: translate3d(0, calc(var(--d, 0) * -5%), 0) scale(1.08); }
/* hover states keep their lift on top of the drift */
.v2 .route:hover img, .v2 .office:hover img, .v2 .article:hover .article__media img, .v2 .prog-card:hover .prog-card__media img, .v2 .cat-card:hover .cat-card__media img, .v2 .vidcard:hover .vidcard__media img {
  transform: translate3d(0, calc(var(--d, 0) * -6%), 0) scale(1.14);
}
.v2 .tile:hover .tile__img { transform: translate3d(0, calc(var(--d, 0) * -6%), 0) scale(1.12); opacity: 0.8; }
.v2 .prod:hover .prod__photo img, .v2 .prod:focus-visible .prod__photo img { transform: translate3d(0, calc(var(--d, 0) * -6%), 0) scale(1.04); opacity: 1; }
.v2 .ig-reel:hover .ig-reel__media img, .v2 .ig-reel:hover .ig-reel__media video { transform: translate3d(0, calc(var(--d, 0) * -5%), 0) scale(1.12); }

/* Frame edges: a hairline of light on the top edge of dark-backed photographs
   reads as a physical print rather than a flat fill. */
.v2 .route, .v2 .office, .v2 .prog-card__media, .v2 .article__media, .v2 .story__media, .v2 .split__media, .v2 .frames__lg-wrap, .v2 .frames__sm, .v2 .vidcard__media { position: relative; }
.v2 .route::after, .v2 .office::after, .v2 .prog-card__media::after, .v2 .article__media::after, .v2 .story__media::after, .v2 .split__media::after, .v2 .frames__lg-wrap::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(11 15 20 / 0.06);
}
.v2 .route .route__label, .v2 .office figcaption { z-index: 3; }

/* Editorial photographs lift as they arrive: shadow deepens with entry. */
.v2 .split__media, .v2 .frames__lg-wrap, .v2 .story__media { transition: box-shadow var(--dur-hero) var(--ease-out); }

/* Programs / articles / offices: cards separate from the page on hover. */
.v2 .prog-card:hover .prog-card__media, .v2 .article--link:hover .article__media { box-shadow: var(--shadow-2); }
.v2 .prog-card__media, .v2 .article__media { transition: box-shadow var(--dur-ui) var(--ease-out); }

@media (max-width: 767px) {
  /* Phones: half the travel, so nothing crops tightly on tall frames. */
  .v2 [data-progress="travel"], .v2 .frames { --d: calc((0.5 - var(--t, 0.5)) * 0.5); }
  .v2 .frames::after { display: none; }
}
.v2-reduce [data-progress="travel"], .v2-reduce .frames { --d: 0; }
.v2-reduce .frames__lg, .v2-reduce .split__media img { transform: none; }

/* --- 10. Tiles, cards, product tiles --------------------------------------- */
.tile { min-height: 30rem; padding: var(--space-xl); background: var(--navy-900); }

.tile__img { opacity: 0.72; transition: opacity var(--dur-hero) var(--ease-out); }
.tile::after { background: linear-gradient(to top, rgb(6 16 26 / 0.85) 0%, rgb(6 16 26 / 0.25) 45%, transparent 70%); }
.tile__reveal { font-size: var(--text-xs); }

.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xs);
}
.prod {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 26rem;
  padding: var(--space-lg);
  background: var(--surface-1);
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.prod__photo { position: absolute; inset: 0; z-index: 0; }
.prod__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--dur-content) var(--ease-out), transform var(--dur-hero) var(--ease-out);
}
.prod::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(6 16 26 / 0.85), rgb(6 16 26 / 0.2) 55%, transparent);
  opacity: 0;
  transition: opacity var(--dur-content) var(--ease-out);
}
.prod__jet {
  position: relative;
  z-index: 2;
  align-self: center;
  display: block;
  padding: var(--space-md) 0;
  transition: transform var(--dur-hero) var(--ease-out);
}
.prod__jet img { width: 100%; filter: drop-shadow(0 18px 22px rgb(6 16 26 / 0.18)); }
.prod__body { position: relative; z-index: 2; display: grid; gap: 0.35rem; transition: color var(--dur-content) var(--ease-out); }
.prod__name { font-size: var(--h5); font-weight: var(--w-light); line-height: 1.2; }
.prod__specs { min-height: 2.4em; font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color var(--dur-content) var(--ease-out); }
.prod__cue {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: var(--space-xs);
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-medium);
  opacity: 0;
  transform: translateY(0.3rem);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.prod__cue svg { width: 0.9rem; height: 0.9rem; }
.prod:hover, .prod:focus-visible { color: var(--white); }
.prod:hover .prod__photo img, .prod:focus-visible .prod__photo img { opacity: 1; transform: scale(1); }
.prod:hover::after, .prod:focus-visible::after { opacity: 1; }
.prod:hover .prod__jet, .prod:focus-visible .prod__jet { transform: translate3d(3%, -4%, 0) scale(1.04); }
.prod:hover .prod__specs, .prod:focus-visible .prod__specs { color: var(--white-70); }
.prod:hover .prod__cue, .prod:focus-visible .prod__cue { opacity: 1; transform: none; color: var(--white); }

.prog-card { border-top-color: var(--line-light); }
.prog-card__media img { transition: transform var(--dur-hero) var(--ease-out); }
.jet-chip, .cat-chip, .ac-card { border-color: var(--line); }
.jet-chip:hover, .cat-chip:hover, .ac-card:hover { transform: none; border-color: var(--line-strong); background: var(--surface-1); }
.fx__tab { border-color: var(--line); }
.fx__tab.is-on { background: var(--ink); border-color: var(--ink); }
.fx__cue { color: var(--brand-medium); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.fx__item:hover .fx__jet img { transform: translate3d(2%, -4px, 0) scale(1.02); }
.chip { border-color: var(--line); color: var(--ink-2); }
.chip:hover { border-color: var(--ink); }

/* --- 11. Marquee / logo strips -------------------------------------------- */
.logo-strip .eyebrow { margin-bottom: var(--space-lg); }
.logo-strip__row img { opacity: 0.5; }
.marquee { mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }

/* --- 12. Testimonial: an editorial statement ------------------------------ */
.quote-section { padding-block: var(--section-lg); }
.quote { max-width: 60rem; margin-inline: auto; text-align: center; }
.quote__mark { font-size: 9rem; height: 2rem; margin: 0 auto var(--space-md); color: var(--brand-light); opacity: 0.9; }
.quote__text { font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.22; letter-spacing: -0.02em; margin-bottom: var(--space-xl); }
.quote__author { justify-content: center; }
.quote__avatar { border-color: var(--line-strong); color: var(--ink-2); }
.quote__role { color: var(--ink-3); }

/* --- 12b. Site-wide composition fixes --------------------------------------- */
/* Pillars with only two items: two columns, not a three-column grid with a hole. */
.pillars:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 64rem; }
/* Bloomberg band on the home page: the interview card earns more of the row. */
.bloomberg-band__inner { padding-block: var(--space-2xl); border-color: var(--line); }
@media (min-width: 1200px) { .bloomberg-band__inner { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr) auto; gap: var(--space-2xl); } }
.bloomberg-band__title { font-size: var(--h4); }
.bloomberg-band__cue { color: var(--brand-medium); }
/* Aircraft detail stage: give the airframe more of the row. */
.stage__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 19rem); gap: 0 var(--space-2xl); }
/* Split frames on inner pages: the small frame carries a white mat, like a print. */
.frames__sm { border-width: 8px; }
/* Service grids: hairline colour and a touch more air */
.svc-grid { gap: var(--space-2xl) var(--space-xl); }
/* Tiles: captions sit on a graded band, not on the raw photo */
.tile__body { padding-top: var(--space-xl); }

/* --- 13. FAQ --------------------------------------------------------------- */
.faq__trigger { padding-block: var(--space-md); transition: color var(--dur-micro) var(--ease-out), padding-left var(--dur-ui) var(--ease-out); }
.faq__trigger:hover { color: var(--brand-medium); }
.faq__trigger .h5 { font-size: var(--text-md); }
.faq__icon::before, .faq__icon::after { transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out); }
.faq__panel { transition: height var(--dur-content) var(--ease-out); }
.faq__panel-inner { transition: opacity var(--dur-content) var(--ease-out), transform var(--dur-content) var(--ease-out); color: var(--ink-2); }
.faq__still .h3 { font-size: var(--h4); }

/* --- 14. Tables ----------------------------------------------------------- */
.compare th, .compare td { padding: var(--space-sm) var(--space-md); }
.compare tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
.compare tbody tr:hover td, .compare tbody tr:hover th { background: var(--surface-1); }
.section--bone .compare tbody tr:hover td, .section--bone .compare tbody tr:hover th { background: var(--surface-2); }
.compare thead th { border-bottom-color: var(--line-strong); font-size: var(--text-xs); }
.fleet-compare__field select { border-color: var(--line-strong); border-radius: 0; padding: 0.6rem 2rem 0.6rem 0.75rem; }

/* --- 15. Forms ------------------------------------------------------------ */
.field { position: relative; }
.field > span { color: var(--ink-3); transition: color var(--dur-micro) var(--ease-out); }
.field:focus-within > span { color: var(--brand-medium); }
.field input, .field select, .field textarea { border-bottom-color: var(--line-strong); padding-block: 0.8rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--line-strong); }
.field::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand-light);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-ui) var(--ease-out);
  pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }
.field--group::after, .field--trap::after { display: none; }
.field select {
  appearance: none;
  padding-right: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0f14' stroke-width='1.25'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.25rem center / 1rem;
}
.form .btn { margin-top: var(--space-md); }
.form__success { padding: var(--space-lg); border: 1px solid var(--line); background: var(--surface-1); }
.field__err { color: #a3261f; }
.form__note--error { color: #a3261f; }
.check input { accent-color: var(--brand-light); }

/* --- 16. CTA ------------------------------------------------------------- */
.cta .h2 { margin-bottom: var(--space-lg); }
.cta__clouds { opacity: 0.16; }

/* --- 17. Footer: the final brand moment ---------------------------------- */
.page { position: relative; z-index: 1; background: var(--surface-0); }
.footer {
  position: relative;
  padding: 0;
  background: var(--navy-950);
  color: var(--white);
}
.footer::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 20% 0%, rgb(0 158 210 / 0.14), transparent 60%);
  pointer-events: none;
}
.footer__inner { position: relative; padding-block: var(--section-md) var(--space-xl); }
.footer__desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-xl);
  padding: 0 0 var(--space-2xl);
  border-bottom: 1px solid var(--line-light);
}
.footer__desk .eyebrow { margin-bottom: var(--space-md); }
.footer__phone { display: inline-block; color: var(--white); transition: color var(--dur-micro) var(--ease-out); }
.footer__phone-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--w-display);
  font-size: clamp(2.75rem, 7.5vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.footer__phone:hover { color: var(--brand-light); }
.footer__phone-alt { margin: var(--space-md) 0 0; font-size: var(--text-sm); color: var(--white-50); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: var(--space-3xl);
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--line-light);
}
.footer__newsletter { display: block; padding: 0; margin: 0; border: 0; }
.footer__newsletter .h5 { margin-bottom: var(--space-xs); }
.footer__newsletter-note { margin: 0 0 var(--space-lg); font-size: var(--text-sm); color: var(--white-50); max-width: 26rem; }
.footer__newsletter-note a { color: var(--white-70); }
.subscribe { display: block; min-width: 0; }
.subscribe__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--line-light-strong);
  max-width: 26rem;
}
.subscribe__row::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--brand-light);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-ui) var(--ease-out);
}
.subscribe__row:focus-within::after { transform: scaleX(1); }

/* Invalid state. The input carries `border: 0` — the visible rule belongs to
   the row — so the row has to answer for it. Without this, a bad address set
   aria-invalid and nothing changed on screen: the form simply refused to send
   and never said why. The underline is drawn as well as recoloured, because on
   the dark footer a 1px colour change alone is easy to miss. */
.subscribe__row:has(input[aria-invalid="true"]) { border-bottom-color: #ff8a80; }
.subscribe__row:has(input[aria-invalid="true"])::after { transform: scaleX(1); background: #ff8a80; }
.subscribe input, .subscribe__row input {
  flex: 1;
  height: 3rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--white);
  font: inherit;
}
.subscribe input:focus { outline: none; }
.subscribe__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white-70);
  transition: color var(--dur-micro) var(--ease-out);
}
.subscribe__btn svg { width: 1rem; height: 1rem; transition: transform var(--dur-micro) var(--ease-out); }
.subscribe__btn:hover { color: var(--white); }
.subscribe__btn:hover svg { transform: translateX(3px); }
.subscribe__note { margin-top: var(--space-sm); }
.footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); padding: 0; }
.footer__col-title { color: var(--white); font-size: var(--text-xs); letter-spacing: var(--track-eyebrow); margin-bottom: var(--space-md); }
.footer__link { padding-block: 0.35rem; font-size: var(--text-sm); color: var(--white-50); }
.footer__link:hover { color: var(--white); }
.footer__bottom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 0;
}
.footer__logo img { height: 2.25rem; opacity: 0.9; }
.footer__legal { justify-content: center; gap: var(--space-md) var(--space-lg); }
@media (min-width: 1024px) { .footer__legal { flex-wrap: nowrap; white-space: nowrap; } }
.footer__legal a { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--white-50); }
.footer__credit { margin: 0; font-size: var(--text-xs); color: var(--white-40); text-align: right; }

/* The page lifts to reveal the footer beneath it. Desktop only: the footer
   there is shorter than a screen, which is what makes the reveal read. */
@media (min-width: 1024px) and (min-height: 700px) {
  .v2:not(.v2-reduce) .footer { position: sticky; bottom: 0; z-index: 0; }
}

/* --- 18. Reveal system ---------------------------------------------------- */
.js [data-reveal] { transform: translate3d(0, 1.25rem, 0); transition: opacity var(--dur-section) var(--ease-out), transform var(--dur-section) var(--ease-out); }
.js .reveal-line > span { transition: transform var(--dur-section) var(--ease-out); }
.reveal-line { padding-bottom: 0.14em; margin-bottom: -0.14em; }

/* --- 19. 404 / legal -------------------------------------------------------- */
.nf { min-height: 100svh; display: flex; align-items: center; }
.legal-toc { border-color: var(--line); }

/* --- 20. Instagram / video ---------------------------------------------- */
.ig-reel { background: var(--navy-900); }
.ig-reel::after { background: linear-gradient(to top, rgb(6 16 26 / 0.8), rgb(6 16 26 / 0.1) 46%, transparent); }
.vidcard__play { transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.vidcard:hover .vidcard__play { transform: scale(1.04); }

/* --- 20b. Floating call to action ---------------------------------------
   A quiet pill docked bottom-right that follows the reader once the hero has
   gone by, and steps aside when the footer's own desk number is on screen.
   Phones keep the existing action bar instead. */
.float-cta {
  position: fixed;
  right: var(--gutter); bottom: var(--space-lg);
  z-index: calc(var(--z-nav) - 1);
  display: none;
  align-items: center;
  gap: 0;
  padding: 0.35rem 0.35rem 0.35rem 1.1rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-pill);
  background: rgb(8 19 30 / 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--white);
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.6);
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  pointer-events: none;
}
.float-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.float-cta__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding-right: 1rem;
  font-size: var(--text-xs); letter-spacing: 0.08em;
  color: var(--white-70);
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.float-cta__phone:hover { color: var(--white); }
.float-cta__phone .nav__phone-icon { width: 0.45rem; height: 0.45rem; }
.float-cta__quote {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--brand-light);
  color: var(--white);
  font-size: var(--text-sm); font-weight: var(--w-regular);
  white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.float-cta__quote:hover { background: var(--brand-medium); }
.float-cta__quote svg { width: 0.9rem; height: 0.9rem; transition: transform var(--dur-micro) var(--ease-out); }
.float-cta__quote:hover svg { transform: translateX(3px); }
@media (min-width: 1151px) { .float-cta { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .float-cta { transition: none; } }

/* --- 21. Mobile action bar ---------------------------------------------- */
.actionbar { background: var(--navy-950); }

/* --- 22. Responsive ---------------------------------------------------- */
@media (max-width: 1150px) {
  .hero__content { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "lead" "actions"; row-gap: var(--space-md); }
  .hero__content .h1 { max-width: 20ch; }
  .stage { height: 210vh; }
  .stage__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "head" "scene" "label" "specs" "nav";
    gap: 0;
    padding-top: calc(var(--nav-h-solid) + var(--space-md));
    padding-bottom: var(--space-md);
  }
  .stage__head .h2 { font-size: var(--h4); }
  .stage__label { padding-top: var(--space-sm); }
  .stage__name { font-size: clamp(1.75rem, 5vw, 2.5rem); }
  .stage__specs { margin-top: var(--space-md); }
  .stage__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-lg); }
  .stage__spec { padding-block: 0.55rem; }
  .stage__spec:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
  .stage__cta { margin-top: var(--space-md); }
  .stage__nav { margin-top: var(--space-md); padding-top: var(--space-sm); }
  .stage__thumbs { justify-content: flex-start; }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .story { height: auto; }
  .story__sticky { position: static; height: auto; overflow: visible; display: block; padding-block: var(--section-lg); }
  .story__grid { grid-template-columns: 1fr; gap: var(--space-2xl); padding-top: 0; }
  .story__media { display: none; }
  .story__item .story__link, .story__item .story__title { color: var(--white); }
  .story__item .story__num { color: var(--brand-light); }
  .story__item .story__blurb { max-height: none; opacity: 1; margin-top: 0.5rem; }
  .story__item .story__cue { max-height: none; opacity: 1; margin-top: 0.75rem; }
}
@media (max-width: 767px) {
  .open__beam, .open__ground, .open__horizon, .open__sheet { display: none !important; }
  .hero { min-height: 100svh; }
  .hero--photo { min-height: 78svh; }
  .hero--photo.hero--tall { min-height: 88svh; }
  .hero--photo.hero--short { min-height: 60svh; }
  .hero__inner { padding-bottom: clamp(5rem, 14vh, 7rem); }
  .hero__content .h1 { font-size: clamp(2.4rem, 11vw, 3.25rem); max-width: none; }
  .hero__lead { font-size: var(--text-rg); }
  .btn { width: auto; }
  .btn-group { gap: var(--space-sm); }
  .hero__cue { display: none; }
  .v2 .hero__media { transform: none; }
  .quotebar { padding: var(--space-lg); }
  .quotebar-wrap--float { margin-top: calc(var(--space-xl) * -1); }
  .stat__num { font-size: 2.25rem; }
  .stage { height: 180vh; }
  .stage--single { height: 160vh; }
  .stage__grid { padding-top: calc(var(--nav-h-solid) + var(--space-sm)); }
  .stage__head { margin-bottom: var(--space-xs); }
  .stage__head .eyebrow { margin-bottom: var(--space-2xs); }
  .stage__lead { display: none; }
  .stage__horizon { display: none; }
  .stage__thumb { width: 6.5rem; }
  .stage__thumb img { height: 2rem; }
  .stage__arrow { display: none; }
  .stage__nav { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .prod { min-height: 20rem; }
  .prod__cue { opacity: 1; transform: none; }
  .quote__text { font-size: 1.5rem; }
  .footer__desk { grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; }
  .footer__phone-num { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__bottom { grid-template-columns: 1fr; gap: var(--space-md); text-align: left; }
  .footer__legal { justify-content: flex-start; gap: var(--space-md); }
  .footer__credit { text-align: left; }
  .split { gap: var(--space-2xl); }
  .quote-section { padding-block: var(--section-md); }
}
@media (max-width: 430px) {
  .footer__cols { grid-template-columns: 1fr; }
  .stage__list { grid-template-columns: 1fr; }
  .stage__spec:nth-last-child(1):nth-child(odd) { grid-column: auto; }
}

/* --- 23. Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v2 .hero__media, .v2 .hero__inner { transform: none; opacity: 1; }
  .stage, .stage--single { height: auto; }
  .stage__sticky { position: static; height: auto; overflow: visible; }
  .stage__grid { height: auto; padding-block: var(--section-lg); }
  .stage__scene { min-height: clamp(14rem, 34vw, 26rem); }
  .stage__jet, .stage__jet img, .stage__spec, .stage__cta, .stage__nav, .stage__head, .stage__shadow, .stage__horizon { --p: 1; --arrive: 1; --row: 1; opacity: 1; transform: none; filter: none; transition: none; }
  .stage__jet:not(.is-on) { display: none; }
  .story { height: auto; }
  .story__sticky { position: static; height: auto; overflow: visible; padding-block: var(--section-lg); }
  .story__img.is-on { transform: none; }
  .frames__lg-wrap { clip-path: none; }
}

/* --- Cabin reveal on phones ----------------------------------------------
   The @media block above settles this section statically on phones, and that
   is still exactly what a device without WebGL gets. Where the cutaway did
   initialise (.is-gl), give the section its scroll height back so the roof can
   lift: the reveal is the point of it, and on a phone this is the only place
   the cabin is shown at all. Scoped to .is-gl so the fallback is untouched. */
@media (max-width: 900px) {
  .open.is-gl { height: 260vh; }
  .open.is-gl .open__sticky {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    overflow: hidden; padding-block: 0;
    --lift: clamp(0, calc((var(--p, 0) - 0.28) * 2.2), 1);
    --settle: clamp(0, calc((var(--p, 0) - 0.6) * 3), 1);
  }
  .open.is-gl .open__head {
    position: absolute; left: 0; right: 0;
    top: calc(var(--nav-h-solid) + var(--space-sm));
    margin-bottom: 0; padding-inline: var(--space-md);
  }
  /* The lead reads as an intro on a static page; against the moving cutaway it
     is just three lines between the title and the aircraft. */
  .open.is-gl .open__lead { display: none; }
  /* Near-square rather than full height: the airframe is framed by the canvas
     width, so a very tall canvas only buys empty sky above and below it. */
  .open.is-gl .open__scene {
    position: absolute; left: 0; right: 0;
    top: 8.5rem; height: 48svh; bottom: auto;
    aspect-ratio: auto; margin-bottom: 0;
  }
  .open.is-gl .open__foot { position: absolute; left: 0; right: 0; bottom: var(--space-md); }
  .open.is-gl .open__chips .chip {
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    background: rgb(6 16 26 / 0.55);
  }
}