/* ==========================================================================
   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 (legacyaviationgroup.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;
  /* min-content, not 0: the legal links are forced onto one line below (see
     the nowrap rule on .footer__legal), so this track must never be given
     less than that line actually needs. At 0 it could — the long copyright
     credit's own auto column claims space first, and around 1024–1280px
     that left too little for the links, which then overflowed straight into
     the credit text next to them. */
  grid-template-columns: auto minmax(min-content, 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); }

/* The footer redesign's `padding: 0` above (section 17) silently overwrote
   styles.css's `padding-bottom: 6.5rem` — the clearance that keeps the fixed
   action bar from sitting on the footer's last row below 1150px. Same value,
   restored here so the two features don't fight each other. */
@media (max-width: 1150px) {
  .footer { padding-bottom: 6.5rem; }
}

/* --- 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);
  }
}