/* ==========================================================================
   FANTOM DEFENSE — COMPONENTS
   assets/css/components.css
   --------------------------------------------------------------------------
   Every reusable block on defense.fantom.aero. Each component carries the
   exact markup it expects in the comment above it — copy it verbatim.
   Full snippets also live in docs/DESIGN_SYSTEM.md.

   HOUSE RULES (canon §9), enforced throughout:
     · Zero border-radius. No box-shadows. No gradients except film scrims.
     · --ember appears ONLY on: live/armed status marks, the active nav
       underline, hairline data ticks, one word in the hero, and focus rings.
     · --hud appears ONLY inside diagrams and sensor overlays.
     · Hairlines are 1px at rgba(255,255,255,.14) on ink / rgba(8,9,10,.14)
       on paper — read --rule, never hard-code.
     · Easing cubic-bezier(.16,1,.3,1); reveals 600–900ms.

   JS CONTRACT (assets/js/site.js owns these):
     .is-open      opens .mega / .search-overlay / .drawer
     .is-stuck     added to .nav once scrollY > 8
     .is-in        added to .reveal / [data-reveal] when it enters view
     body.is-locked  scroll lock while an overlay is open
   ========================================================================== */

/* ==========================================================================
   1. LOCKUP — the ghost mark + wordmark
   --------------------------------------------------------------------------
   Canon §9: ghost mark + FANTOM wordmark + hairline + DEFENSE in mono.
   NEVER let a model redraw the ghost — always the real file.

   <a class="lockup" href="/">
     <img class="lockup__mark" src="/assets/img/logo/ghost.png" alt="" aria-hidden="true">
     <span class="lockup__word">FANTOM</span>
     <span class="lockup__rule" aria-hidden="true"></span>
     <span class="lockup__sub">DEFENSE</span>
     <span class="sr-only">Fantom Defense — home</span>
   </a>
   ========================================================================== */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg);
  flex: none;
}

.lockup__mark {
  width: auto;
  height: 22px;
  flex: none;
  object-fit: contain;
  transition: opacity var(--tx-fast);
}

.lockup__word {
  font-family: var(--font-display);
  font-size: var(--t-21);
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.lockup__rule {
  width: var(--hairline-w);
  height: 16px;
  background: var(--rule-strong);
  margin-inline: var(--s-2);
  flex: none;
}

.lockup__sub {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: var(--wght-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1;
  white-space: nowrap;
  transition: color var(--tx-fast);
}

.lockup:hover .lockup__sub { color: var(--fg); }

.lockup--stacked {
  flex-wrap: wrap;
  row-gap: var(--s-1);
}

.lockup--lg .lockup__mark { height: 34px; }
.lockup--lg .lockup__word { font-size: var(--t-28); }
.lockup--lg .lockup__rule { height: 22px; }

@media (max-width: 560px) {
  .lockup__rule,
  .lockup__sub { display: none; }
}

/* ==========================================================================
   2. NAV — sticky header
   --------------------------------------------------------------------------
   Measured from the anduril capture (1100px-wide frame):
     bar height 55px -> 72px at design scale (--nav-h)
     centre link gap ~32px -> ~42px; links are 15px
     left edge = container gutter; right cluster = Search + "Company +"
   Order is LAW (canon §1):
     SUBTERRANEAN · SEA · LAND · AIR · SPACE · REVENANT · ARSENAL

   <header class="nav" data-nav>
     <div class="nav__inner container">
       <a class="lockup" href="/"> … </a>

       <nav class="nav__links" aria-label="Domains">
         <a class="nav__link" href="/subterranean/">Subterranean</a>
         <a class="nav__link" href="/sea/">Sea</a>
         <a class="nav__link" href="/land/">Land</a>
         <a class="nav__link" href="/air/" aria-current="page">Air</a>
         <a class="nav__link" href="/space/">Space</a>
         <a class="nav__link" href="/revenant/">Revenant</a>
         <a class="nav__link" href="/arsenal/">Arsenal</a>
       </nav>

       <div class="nav__utils">
         <button class="nav__util" type="button" data-search-toggle
                 aria-controls="search" aria-expanded="false">Search</button>
         <button class="nav__util" type="button" data-mega-toggle
                 aria-controls="mega" aria-expanded="false">
           Company <span class="nav__plus" aria-hidden="true">+</span>
         </button>
       </div>

       <button class="nav__burger" type="button" data-drawer-toggle
               aria-controls="drawer" aria-expanded="false">
         <span class="sr-only">Menu</span>
         <span class="nav__burger-bar" aria-hidden="true"></span>
         <span class="nav__burger-bar" aria-hidden="true"></span>
       </button>
     </div>
   </header>
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--ink);
  border-bottom: var(--hairline-w) solid var(--hairline);
  --fg: var(--white);
  --fg-muted: var(--fog);
  --rule: var(--hairline);
  --rule-strong: var(--white-28);
  color: var(--fg);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

/* Transparent-over-hero variant. JS adds .is-stuck past 8px of scroll. */
.nav--float {
  position: fixed;
  inset: 0 0 auto 0;
  background: transparent;
  border-bottom-color: transparent;
  transition:
    background-color var(--tx-fast),
    border-color var(--tx-fast);
}
.nav--float::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-nav);
  pointer-events: none;
  transition: opacity var(--tx-fast);
}
.nav--float.is-stuck {
  background: var(--ink);
  border-bottom-color: var(--hairline);
}
.nav--float.is-stuck::before { opacity: 0; }
.nav--float > .nav__inner { position: relative; z-index: 1; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  font-size: var(--t-15);
  font-weight: var(--wght-regular);
  line-height: 1;
  letter-spacing: var(--tr-normal);
  color: var(--fg);
  padding-block: var(--s-2);
  white-space: nowrap;
  transition: color var(--tx-fast);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--hairline-w);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tx-fast);
}

.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

/* THE ACTIVE NAV UNDERLINE — one of the four sanctioned ember uses. */
.nav__link[aria-current='page']::after,
.nav__link.is-active::after {
  background: var(--ember);
  transform: scaleX(1);
}

.nav__utils {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 42px);
  flex: none;
}

.nav__util {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-15);
  line-height: 1;
  color: var(--fg-muted);
  padding-block: var(--s-2);
  transition: color var(--tx-fast);
  white-space: nowrap;
}

.nav__util:hover,
.nav__util[aria-expanded='true'] { color: var(--fg); }

.nav__plus {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-15);
  line-height: 1;
  transition: transform var(--tx-base);
}

.nav__util[aria-expanded='true'] .nav__plus { transform: rotate(45deg); }

/* Burger — mobile only. Two 1px bars; becomes an X when the drawer is open. */
.nav__burger {
  display: none;
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
}

.nav__burger-bar {
  position: absolute;
  left: 2px;
  right: 2px;
  height: var(--hairline-w);
  background: var(--fg);
  transition: transform var(--tx-base), opacity var(--dur-1) linear;
}
.nav__burger-bar:nth-child(2) { top: 9px; }
.nav__burger-bar:nth-child(3) { top: 16px; }

.nav__burger[aria-expanded='true'] .nav__burger-bar:nth-child(2) {
  transform: translateY(3.5px) rotate(45deg);
}
.nav__burger[aria-expanded='true'] .nav__burger-bar:nth-child(3) {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 1120px) {
  .nav__links { gap: 20px; }
  .nav__link  { font-size: var(--t-13); }
  .nav__util  { font-size: var(--t-13); }
}

@media (max-width: 940px) {
  .nav__links,
  .nav__utils { display: none; }
  .nav__burger { display: block; }
  .nav__inner { justify-content: space-between; }
}

/* ==========================================================================
   3. MEGA — the Company dropdown panel
   --------------------------------------------------------------------------
   Full-width panel that drops out of the nav. Ink-2 surface, hairline top
   and bottom, 12-col grid inside, mono column headings, + bullet links.

   <div class="mega" id="mega" aria-hidden="true">
     <div class="mega__inner container grid">
       <div class="mega__col c-3">
         <p class="eyebrow">Company</p>
         <ul class="mega__list">
           <li><a class="plus-link" href="/company/">Mission</a></li>
           <li><a class="plus-link" href="/company/leadership/">Leadership</a></li>
         </ul>
       </div>
       <div class="mega__col c-3"> … </div>
       <div class="mega__feature c-6">
         <p class="eyebrow">Featured</p>
         <a class="mega__promo" href="/arsenal/">
           <img src="/assets/stills/forge-1.jpg" alt="">
           <span class="mega__promo-title">FORGE-1 — Savannah, Georgia</span>
         </a>
       </div>
     </div>
   </div>
   ========================================================================== */

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-mega);
  background: var(--ink-2);
  border-bottom: var(--hairline-w) solid var(--hairline);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity var(--tx-fast),
    transform var(--tx-base),
    visibility 0s linear var(--dur-3);
}

.mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--tx-fast),
    transform var(--tx-base),
    visibility 0s linear 0s;
}

.mega__inner {
  padding-block: clamp(32px, 4vw, 56px);
  align-items: start;
}

.mega__col > .eyebrow { margin-bottom: var(--s-5); }

.mega__list > li + li { margin-top: var(--s-3); }

.mega__feature { border-left: var(--hairline-w) solid var(--rule); padding-left: var(--s-5); }
.mega__feature > .eyebrow { margin-bottom: var(--s-4); }

.mega__promo { display: block; position: relative; overflow: hidden; }
.mega__promo img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  transition: transform var(--dur-6) var(--ease);
}
.mega__promo:hover img { transform: scale(1.02); }
.mega__promo-title {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-17);
  font-weight: var(--wght-medium);
}

@media (max-width: 940px) { .mega { display: none; } }

/* --- + bullet link (mega, footer, drawer) ------------------------------- */
/* <a class="plus-link" href="/company/">Mission</a> */

.plus-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-17);
  line-height: var(--lh-snug);
  color: var(--fg);
  transition: color var(--tx-fast);
}

.plus-link::before {
  content: '+';
  font-family: var(--font-mono);
  font-size: 0.78em;
  line-height: 1;
  color: var(--fg-muted);
  transition: color var(--tx-fast), transform var(--tx-fast);
  flex: none;
}

.plus-link:hover::before { color: var(--fg); transform: translateX(1px); }
.plus-link:hover { color: var(--fg); }

.plus-link--muted { color: var(--fg-muted); }

/* ==========================================================================
   4. SEARCH OVERLAY
   --------------------------------------------------------------------------
   Measured: a 90px-tall input row directly under the nav, hairline rule on
   its bottom edge, mono uppercase placeholder, magnifier flush right.
   The remaining viewport below it dims to ink.

   <div class="search-overlay" id="search" aria-hidden="true">
     <form class="search-overlay__bar" role="search" action="/search/" method="get">
       <div class="search-overlay__inner container">
         <label class="sr-only" for="q">Search Fantom Defense</label>
         <input class="search-overlay__input" id="q" name="q" type="search"
                placeholder="SEARCH FANTOM DEFENSE" autocomplete="off" spellcheck="false">
         <button class="search-overlay__submit" type="submit">
           <span class="sr-only">Search</span>
           <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <circle cx="10.5" cy="10.5" r="6.5" stroke="currentColor" stroke-width="1.25"/>
             <path d="M15.5 15.5 21 21" stroke="currentColor" stroke-width="1.25"/>
           </svg>
         </button>
       </div>
     </form>
     <button class="search-overlay__dismiss" type="button" data-search-close>
       <span class="sr-only">Close search</span>
     </button>
   </div>
   ========================================================================== */

.search-overlay {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: var(--z-search);
  display: grid;
  grid-template-rows: auto 1fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--tx-fast),
    visibility 0s linear var(--dur-3);
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--tx-fast), visibility 0s linear 0s;
}

.search-overlay__bar {
  background: var(--ink);
  border-bottom: var(--hairline-w) solid var(--hairline);
}

.search-overlay__inner {
  height: var(--search-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.search-overlay__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: var(--field-bg);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--t-15);
  font-weight: var(--wght-regular);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
  padding: 0;
}

.search-overlay__input::placeholder {
  color: var(--fog);
  opacity: 1;
}

.search-overlay__submit {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--white);
  transition: color var(--tx-fast);
}
.search-overlay__submit:hover { color: var(--ember); }

.search-overlay__dismiss {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(8, 9, 10, 0.92);
  cursor: default;
}

.icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* ==========================================================================
   5. DRAWER — mobile navigation
   --------------------------------------------------------------------------
   <div class="drawer" id="drawer" aria-hidden="true">
     <nav class="drawer__inner container" aria-label="Mobile">
       <a class="drawer__link" href="/subterranean/">Subterranean</a>
       … one per domain …
       <hr class="hairline drawer__rule">
       <p class="eyebrow">Company</p>
       <ul class="drawer__list">
         <li><a class="plus-link" href="/company/">Mission</a></li>
       </ul>
       <a class="btn drawer__search" href="/search/">Search</a>
     </nav>
   </div>
   ========================================================================== */

.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: var(--z-drawer);
  background: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity var(--tx-fast),
    transform var(--tx-base),
    visibility 0s linear var(--dur-3);
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--tx-fast),
    transform var(--tx-base),
    visibility 0s linear 0s;
}

.drawer__inner { padding-block: var(--s-6) var(--s-9); }

.drawer__link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-28);
  font-weight: var(--wght-semi);
  font-stretch: var(--wdth-wide);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  padding-block: var(--s-3);
  border-bottom: var(--hairline-w) solid var(--rule);
  color: var(--fg);
}

.drawer__link[aria-current='page'] { color: var(--ember); }

.drawer__rule { margin-block: var(--s-6) var(--s-5); }
.drawer__list { margin-top: var(--s-4); }
.drawer__list > li + li { margin-top: var(--s-3); }
.drawer__search { margin-top: var(--s-6); width: 100%; justify-content: center; }

@media (min-width: 941px) { .drawer { display: none; } }

/* ==========================================================================
   6. HERO — full-bleed muted autoplay looping film
   --------------------------------------------------------------------------
   Measured from the capture: headline uppercase, heavy, ~73px at 1440,
   leading 0.92, three lines, over a scrimmed film. Beneath it a mono meta
   row split into three cells (left claim / centre mark / right pointer).
   Exactly ONE word of the headline may be ember — wrap it in <em>.

   <section class="hero" data-surface="film">
     <video class="hero__media" autoplay muted loop playsinline
            poster="/assets/stills/wraith-hero.jpg">
       <source src="/assets/video/wraith-hero.mp4" type="video/mp4">
     </video>
     <div class="hero__scrim" aria-hidden="true"></div>

     <div class="hero__body container">
       <p class="eyebrow hero__eyebrow">Air · Collaborative Combat Aircraft</p>
       <h1 class="hero__title">
         Autonomy that keeps<br>fighting after the<br><em>network</em> dies
       </h1>
       <p class="hero__sub">Edge-resident autonomy with cryptographic accountability.</p>

       <div class="hero__meta">
         <span class="hero__meta-cell">Comms-denied first</span>
         <span class="hero__meta-cell hero__meta-cell--center">EST. 2026</span>
         <span class="hero__meta-cell hero__meta-cell--end">
           <a class="link-arrow link-arrow--mono" href="/air/wraith/">Wraith</a>
         </span>
       </div>
     </div>
   </section>

   Variants: .hero--inset (container-width film, matches the reference frame)
             .hero--short (60svh)  ·  .hero--tall (100svh)
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(520px, 88svh, 1080px);
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

.hero--short { min-height: clamp(400px, 60svh, 720px); }
.hero--tall  { min-height: 100svh; }

/* Container-inset framing: the film stops at the gutter, matching the
   reference site's home hero. */
.hero--inset {
  margin-inline: auto;
  width: 100%;
  max-width: calc(var(--container-max) + (var(--gutter) * 2));
  padding-inline: var(--gutter);
  background: transparent;
  overflow: visible;
}
.hero--inset .hero__media,
.hero--inset .hero__scrim {
  inset: 0 var(--gutter);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-media);
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim-hero);
  pointer-events: none;
}

.hero__body {
  position: relative;
  z-index: var(--z-content);
  padding-block: clamp(48px, 7vw, 96px);
  width: 100%;
}

.hero__eyebrow { margin-bottom: var(--s-5); color: var(--white-64); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-96);
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  text-transform: uppercase;
  color: var(--white);
  max-width: 20ch;
  text-wrap: balance;
}

.hero__title--xl { font-size: var(--t-140); }
.hero__title--center { max-width: none; text-align: center; margin-inline: auto; }

/* THE ONE EMBER WORD. Canon §9 permits exactly one per hero. */
.hero__title em {
  font-style: normal;
  color: var(--ember);
}

.hero__sub {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: var(--wght-regular);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: var(--lh-mono);
  color: var(--white-64);
  max-width: 52ch;
}

.hero__meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
  margin-top: clamp(32px, 4vw, 64px);
  padding-top: var(--s-5);
  border-top: var(--hairline-w) solid var(--hairline);
}

.hero__meta-cell {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: var(--wght-regular);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--white-64);
  line-height: var(--lh-mono);
}

.hero__meta-cell--center { text-align: center; color: var(--white); }
.hero__meta-cell--end    { text-align: right; }

/* Scroll cue. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  z-index: var(--z-content);
  width: var(--hairline-w);
  height: 40px;
  background: var(--white-28);
  overflow: hidden;
}
.hero__cue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  animation: hero-cue 2400ms var(--ease) infinite;
}

@keyframes hero-cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%);  }
  100% { transform: translateY(100%);  }
}

@media (max-width: 767px) {
  .hero { min-height: clamp(460px, 74svh, 760px); }
  .hero__meta {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    text-align: left;
  }
  .hero__meta-cell--center,
  .hero__meta-cell--end { text-align: left; }
  /* The cue would collide with the stacked meta row. */
  .hero__cue { display: none; }
}

/* ==========================================================================
   7. SECTION — the black -> cream inversion
   --------------------------------------------------------------------------
   <section class="section">                     … ink
   <section class="section section--paper">      … cream (token flip)
   <section class="section section--raised">     … ink-2
   <section class="section section--flush">      … no vertical padding

   Section head (measured: title left, link at the 50% line, hairline rule
   beneath the whole row):

   <header class="section__head container">
     <h2 class="section__title">News &amp; Insights</h2>
     <a class="link-arrow" href="/news/">All Articles</a>
   </header>
   ========================================================================== */

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--pad-section);
}

.section--sm    { padding-block: var(--pad-section-sm); }
.section--lg    { padding-block: var(--pad-section-lg); }
.section--flush { padding-block: 0; }
.section--top-0 { padding-top: 0; }
.section--bot-0 { padding-bottom: 0; }

.section--raised { background: var(--bg-raised); }

/* .section--paper also gets its token flip from tokens.css. */
.section--paper { background: var(--paper); color: var(--ink); }

/* Hairline seam between two sections of the same surface. */
.section--seam { border-top: var(--hairline-w) solid var(--rule); }

.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  column-gap: var(--grid-gap);
  padding-bottom: var(--s-5);
  border-bottom: var(--hairline-w) solid var(--rule);
  margin-bottom: clamp(28px, 3.2vw, 48px);
}

.section__title {
  font-size: var(--t-40);
  font-weight: var(--wght-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

.section__title--caps {
  text-transform: uppercase;
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  letter-spacing: var(--tr-hero);
}

.section__head > .eyebrow { grid-column: 1 / -1; margin-bottom: var(--s-4); }

/* Optional intro paragraph sitting in the right half of the head. */
.section__intro {
  font-size: var(--t-17);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 56ch;
}

@media (max-width: 767px) {
  .section__head {
    grid-template-columns: 1fr;
    row-gap: var(--s-4);
  }
}

/* ==========================================================================
   8. BENTO — the product grid
   --------------------------------------------------------------------------
   MEASURED GEOMETRY (anduril capture, 1100px frame, 1056px content box):
     · The whole grid is a 3-COLUMN SQUARE MODULE. Column = 342px,
       gap = 14px (1.27vw -> 20px at 1600).
     · Full-width tile  1056 x 352  -> span 3 cols, ratio 3:1
     · Standard tile     342 x 343  -> span 1 col,  ratio 1:1
     · Two-thirds tile    700 x 342 -> span 2 cols, ratio 2:1
     · Tall tile          342 x 696 -> span 1 col / 2 rows, ratio 1:2
     · A "1/3 + 2/3 row" is therefore a tall 1x2 on the left beside a 2x1
       banner over two 1x1 squares.

   <div class="bento container">
     <a class="tile tile--w3" href="/products/wraith/"> … </a>
     <a class="tile" href="/products/banshee/"> … </a>
     <a class="tile" href="/products/shade/"> … </a>
     <a class="tile" href="/products/specter-x/"> … </a>
     <a class="tile tile--h2" href="/products/leviathan/"> … </a>
     <a class="tile tile--w2" href="/products/styx/"> … </a>
     <a class="tile" href="/products/deadfall/"> … </a>
     <a class="tile" href="/products/tidewall/"> … </a>
   </div>

   TILE MARKUP:
   <a class="tile tile--w2" href="/products/wraith/">
     <video class="tile__media" autoplay muted loop playsinline
            poster="/assets/stills/wraith.jpg">
       <source src="/assets/video/wraith.mp4" type="video/mp4">
     </video>
     <span class="tile__scrim" aria-hidden="true"></span>
     <span class="pill pill--test tile__pill">IN TEST</span>
     <span class="tile__cap">
       <span class="tile__name">WRAITH</span>
       <span class="tile__tagwrap"><span class="tile__tag">Collaborative Combat Aircraft</span></span>
     </span>
     <span class="tile__arrow" aria-hidden="true">&#8599;</span>
   </a>

   HOVER (measured + canon §9): film scales 1.02, the name lifts and the
   tagline + arrow reveal beneath it, arrow translates 4px up-right, and a
   1px ember hairline draws around the tile.
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(var(--bento-cols), minmax(0, 1fr));
  gap: var(--bento-gap);
}

.bento--4 { --bento-cols: 4; }
.bento--2 { --bento-cols: 2; }

.tile {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-2);
  color: var(--white);
  aspect-ratio: 1 / 1;
  grid-column: span 1;
}

.tile--w2 { grid-column: span 2; aspect-ratio: 2 / 1; }
.tile--w3 { grid-column: span 3; aspect-ratio: 3 / 1; }
.tile--h2 { grid-row: span 2; aspect-ratio: auto; height: 100%; }
.tile--w2h2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.tile--portrait { aspect-ratio: 3 / 4; }

.tile__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-media);
  transform: scale(1);
  transition: transform var(--dur-6) var(--ease);
  will-change: transform;
}

.tile__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim-tile);
  pointer-events: none;
}

/* Ember hairline on hover / keyboard focus. Drawn on a pseudo-element so it
   never affects layout. */
.tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border: var(--hairline-w) solid transparent;
  pointer-events: none;
  transition: border-color var(--tx-base);
}

.tile:hover::after,
.tile:focus-visible::after { border-color: var(--ember); }

.tile:hover .tile__media,
.tile:focus-visible .tile__media { transform: scale(1.02); }

.tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-content);
  display: block;
  padding: var(--tile-pad);
  padding-right: calc(var(--tile-pad) + 48px);
}

.tile__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-21);
  font-weight: var(--wght-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--white);
}

.tile--w2 .tile__name,
.tile--w3 .tile__name,
.tile--w2h2 .tile__name { font-size: var(--t-28); }

.tile--caps .tile__name {
  text-transform: uppercase;
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  letter-spacing: var(--tr-tight);
}

/* The reveal mechanic: a 0fr -> 1fr grid row. The name is pushed up by
   exactly the tagline's height, which is what the reference does. */
.tile__tagwrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--tx-base);
}

.tile__tagwrap > * { overflow: hidden; min-height: 0; }

.tile__tag {
  display: block;
  font-size: var(--t-15);
  line-height: var(--lh-normal);
  color: var(--white-64);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--tx-fast),
    transform var(--tx-base);
  padding-top: var(--s-1);
}

.tile:hover .tile__tagwrap,
.tile:focus-visible .tile__tagwrap { grid-template-rows: 1fr; }

.tile:hover .tile__tag,
.tile:focus-visible .tile__tag { opacity: 1; transform: translateY(0); }

/* Always-on caption (product pages, single feature tiles). */
.tile--static-cap .tile__tagwrap { grid-template-rows: 1fr; }
.tile--static-cap .tile__tag { opacity: 1; transform: none; }
.tile--static-cap .tile__arrow { opacity: 1; transform: none; }

.tile__arrow {
  position: absolute;
  right: var(--tile-pad);
  bottom: var(--tile-pad);
  z-index: var(--z-content);
  font-family: var(--font-mono);
  font-size: var(--t-17);
  line-height: 1;
  color: var(--white);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition:
    opacity var(--tx-fast),
    transform var(--tx-base);
}

.tile:hover .tile__arrow,
.tile:focus-visible .tile__arrow { opacity: 1; transform: translate(0, 0); }

.tile__pill {
  position: absolute;
  top: var(--tile-pad);
  left: var(--tile-pad);
  z-index: var(--z-content);
}

/* --- Bento responsive --------------------------------------------------- */

@media (max-width: 1023px) {
  .bento { --bento-cols: 2; }
  .tile--w3 { grid-column: span 2; aspect-ratio: 2 / 1; }
  .tile--w2 { grid-column: span 2; aspect-ratio: 2 / 1; }
  .tile--w2h2 { grid-column: span 2; grid-row: span 1; aspect-ratio: 3 / 2; }
  /* A 1x2 tall tile in a 2-col grid depends on a second populated row to get
     its height, which auto-placement cannot guarantee. Make it a determinate
     portrait tile instead. */
  .tile--h2 { grid-row: span 1; aspect-ratio: 3 / 4; height: auto; }
}

@media (max-width: 639px) {
  .bento { --bento-cols: 1; }
  .tile,
  .tile--w2,
  .tile--w3,
  .tile--w2h2 {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .tile--h2 {
    grid-row: span 1;
    aspect-ratio: 4 / 5;
    height: auto;
  }
  /* Captions are always open on touch — there is no hover. */
  .tile__tagwrap { grid-template-rows: 1fr; }
  .tile__tag     { opacity: 1; transform: none; }
  .tile__arrow   { opacity: 1; transform: none; }
}

@media (hover: none) {
  .tile__tagwrap { grid-template-rows: 1fr; }
  .tile__tag     { opacity: 1; transform: none; }
  .tile__arrow   { opacity: 1; transform: none; }
}

/* ==========================================================================
   9. PILL — mono status chip
   --------------------------------------------------------------------------
   FIELDED / IN TEST / IN DEVELOPMENT. FIELDED is a live/armed mark, so it is
   one of the four sanctioned ember uses and carries a pulsing ember square.

   <span class="pill pill--fielded">Fielded</span>
   <span class="pill pill--test">In test</span>
   <span class="pill pill--dev">In development</span>
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-2) 4px;
  border: var(--hairline-w) solid var(--rule-strong);
  background: rgba(8, 9, 10, 0.42);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: var(--wght-medium);
  line-height: 1;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  backdrop-filter: blur(2px);
}

.pill::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: none;
  background: currentColor;
}

/* FIELDED — live. Ember, pulsing. */
.pill--fielded {
  border-color: var(--ember-40);
  color: var(--ember);
}
.pill--fielded::before {
  background: var(--ember);
  animation: pill-pulse 2000ms var(--ease) infinite;
}

/* IN TEST — white, steady. */
.pill--test {
  border-color: var(--white-28);
  color: var(--white);
}

/* IN DEVELOPMENT — fog, hollow mark. */
.pill--dev {
  border-color: var(--hairline);
  color: var(--fog);
}
.pill--dev::before {
  background: transparent;
  box-sizing: border-box;
  border: var(--hairline-w) solid currentColor;
}

/* No status dot. */
.pill--plain::before { display: none; }

/* On paper. */
[data-surface='paper'] .pill,
.section--paper .pill {
  background: transparent;
  border-color: var(--ink-28);
  color: var(--ink);
  backdrop-filter: none;
}
[data-surface='paper'] .pill--test,
.section--paper .pill--test { color: var(--ink); border-color: var(--ink-28); }
[data-surface='paper'] .pill--dev,
.section--paper .pill--dev { color: var(--slate); border-color: var(--hairline-d); }

@keyframes pill-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* ==========================================================================
   10. SPEC-TABLE — parameter / value
   --------------------------------------------------------------------------
   The workhorse of every product page. Mono, hairline-ruled, two columns.
   Parameter column is mono uppercase fog; value column is Archivo, --fg.
   Numerals are tabular so columns of figures align.

   <table class="spec-table">
     <caption class="eyebrow">WRAITH — parameters</caption>
     <tbody>
       <tr><th scope="row">Class</th><td>Group 5 CCA, Increment 2</td></tr>
       <tr><th scope="row">Length / Span</th><td>41.2 ft / 29.8 ft</td></tr>
       <tr><th scope="row">MTOW</th><td>18,400 lb</td></tr>
       <tr class="is-key"><th scope="row">Unit cost target</th><td>$21M at rate</td></tr>
     </tbody>
   </table>

   .is-key on a row draws the ember data tick (sanctioned ember use) and
   sets the value in --fg at medium weight.

   <dl> variant for prose-heavy pages:
   <dl class="spec-table spec-table--dl">
     <div class="spec-row"><dt>Endurance</dt><dd>6.4 h clean, unrefueled</dd></div>
   </dl>
   ========================================================================== */

.spec-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: var(--hairline-w) solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.spec-table caption {
  text-align: left;
  padding-bottom: var(--s-4);
}

.spec-table tr,
.spec-table .spec-row {
  border-bottom: var(--hairline-w) solid var(--rule);
}

.spec-table th,
.spec-table dt {
  width: 34%;
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: var(--wght-medium);
  line-height: var(--lh-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
  vertical-align: baseline;
  position: relative;
}

.spec-table td,
.spec-table dd {
  padding: var(--s-4) 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-17);
  font-weight: var(--wght-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-normal);
  color: var(--fg);
  vertical-align: baseline;
}

.spec-table td strong { font-weight: var(--wght-semi); }

/* Mono value column — used for designations, coordinates and hashes. */
.spec-table--mono td,
.spec-table--mono dd,
.spec-table td.mono {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
}

/* Key row: ember hairline data tick in the left margin. */
.spec-table tr.is-key th::before,
.spec-table .spec-row.is-key dt::before {
  content: '';
  position: absolute;
  left: -10px;
  top: calc(var(--s-4) + 0.34em);
  width: 4px;
  height: var(--hairline-w);
  background: var(--ember);
}

.spec-table tr.is-key td,
.spec-table .spec-row.is-key dd {
  color: var(--fg);
  font-weight: var(--wght-medium);
}

.spec-table tr.is-key th,
.spec-table .spec-row.is-key dt { color: var(--fg); }

/* Compact variant for sidebars. */
.spec-table--compact th,
.spec-table--compact dt { padding-block: var(--s-3); }
.spec-table--compact td,
.spec-table--compact dd { padding-block: var(--s-3); font-size: var(--t-15); }

/* <dl> layout */
.spec-table--dl { display: block; border-top: var(--hairline-w) solid var(--rule); }
.spec-table--dl .spec-row {
  display: grid;
  grid-template-columns: 34% 1fr;
  column-gap: var(--s-5);
  align-items: baseline;
  position: relative;
}
.spec-table--dl dt { width: auto; padding-right: 0; }

/* Two spec tables side by side. */
.spec-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
}

@media (max-width: 767px) {
  .spec-table th,
  .spec-table dt {
    width: 40%;
    padding-right: var(--s-4);
  }
  .spec-table td,
  .spec-table dd { font-size: var(--t-15); }
  .spec-table--dl .spec-row { grid-template-columns: 40% 1fr; column-gap: var(--s-4); }
  .spec-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 460px) {
  .spec-table th,
  .spec-table dt {
    display: block;
    width: 100%;
    padding: var(--s-4) 0 var(--s-1);
  }
  .spec-table td,
  .spec-table dd { display: block; padding: 0 0 var(--s-4); }
  .spec-table--dl .spec-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. STAT-ROW — big-number strip
   --------------------------------------------------------------------------
   <div class="stat-row">
     <div class="stat">
       <span class="stat__num">830<span class="stat__unit">nm</span></span>
       <span class="stat__label">Combat radius, 2x AIM-120D</span>
     </div>
     <div class="stat">
       <span class="stat__num">6.4<span class="stat__unit">h</span></span>
       <span class="stat__label">Endurance, clean</span>
     </div>
     <div class="stat">
       <span class="stat__num">40<span class="stat__unit">W</span></span>
       <span class="stat__label">Revenant Core SWaP envelope</span>
     </div>
   </div>
   ========================================================================== */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: var(--hairline-w) solid var(--rule);
  border-bottom: var(--hairline-w) solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.stat {
  padding: clamp(24px, 3vw, 48px) var(--s-5) clamp(24px, 3vw, 48px) 0;
  border-left: var(--hairline-w) solid var(--rule);
  padding-left: var(--s-5);
}

.stat:first-child { border-left: 0; padding-left: 0; }

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-64);
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  line-height: 0.96;
  letter-spacing: var(--tr-hero);
  color: var(--fg);
}

.stat__unit {
  font-size: 0.42em;
  font-weight: var(--wght-medium);
  font-stretch: var(--wdth-normal);
  letter-spacing: var(--tr-normal);
  color: var(--fg-muted);
  margin-left: 0.14em;
}

.stat__label {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: var(--lh-mono);
  color: var(--fg-muted);
  max-width: 26ch;
}

/* Hairline data tick above each figure — sanctioned ember use. */
.stat-row--ticked .stat { position: relative; }
.stat-row--ticked .stat::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 24px;
  height: var(--hairline-w);
  background: var(--ember);
}
.stat-row--ticked .stat:first-child::before { left: 0; }

.stat-row--lg .stat__num { font-size: var(--t-96); }
.stat-row--sm .stat__num { font-size: var(--t-40); }

@media (max-width: 767px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding-block: var(--s-5); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: var(--hairline-w) solid var(--rule); }
}

@media (max-width: 420px) {
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .stat { border-left: 0; padding-left: 0; }
  .stat + .stat { border-top: var(--hairline-w) solid var(--rule); }
}

/* ==========================================================================
   12. CALLOUT — the differentiator block
   --------------------------------------------------------------------------
   The three canon differentiators (COMMS-DENIED FIRST / AUDITABLE AUTONOMY /
   RUNWAY- AND PORT-INDEPENDENT) and any "here is where we beat them" panel.

   <aside class="callout callout--ember">
     <p class="eyebrow eyebrow--ember">Differentiator 02</p>
     <h3 class="callout__title">Auditable autonomy</h3>
     <p class="callout__body">Every sensor observation, classification and
        engagement decision is hash-chained and signed at the edge.</p>
     <a class="link-arrow" href="/revenant/#ledger">Revenant Ledger</a>
   </aside>

   Three across:
   <div class="callout-row"> …three .callout… </div>
   ========================================================================== */

.callout {
  position: relative;
  background: var(--bg-raised);
  padding: clamp(24px, 3vw, 40px);
  border-top: var(--hairline-w) solid var(--rule);
}

.callout__title {
  margin-top: var(--s-4);
  font-size: var(--t-28);
  font-weight: var(--wght-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

.callout__title--caps {
  text-transform: uppercase;
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  letter-spacing: var(--tr-tight);
}

.callout__body {
  margin-top: var(--s-4);
  font-size: var(--t-17);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 48ch;
}

.callout .link-arrow { margin-top: var(--s-5); }

/* EMBER variant — a 2px ember rule on the leading edge, read as a data tick
   on the block. This is the differentiator treatment. */
.callout--ember {
  border-top-color: transparent;
  border-left: 2px solid var(--ember);
  padding-left: clamp(20px, 2.4vw, 32px);
}

.callout--ember .callout__body { color: var(--fg); }

/* Flat variant — no raised surface, hairline only. */
.callout--flat {
  background: transparent;
  padding-inline: 0;
  padding-bottom: 0;
}

.callout-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1023px) {
  .callout-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .callout-row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   13. ARTICLE-CARD
   --------------------------------------------------------------------------
   Measured from the News & Insights section: 50/50 split, text left
   (date -> headline -> excerpt -> Read More), image right at ~16:9.

   <article class="article-card">
     <div class="article-card__body">
       <time class="article-card__date" datetime="2026-06-17">06/17/2026</time>
       <h3 class="article-card__title">
         <a href="/news/forge-1-groundbreaking/">Fantom breaks ground on FORGE-1</a>
       </h3>
       <p class="article-card__excerpt">1,100 acres on the Savannah River …</p>
       <a class="link-arrow" href="/news/forge-1-groundbreaking/">Read More</a>
     </div>
     <a class="article-card__media" href="/news/forge-1-groundbreaking/" tabindex="-1" aria-hidden="true">
       <img src="/assets/stills/forge-1.jpg" alt="">
     </a>
   </article>

   Stacked variant for 3-up news grids:
   <article class="article-card article-card--stack"> … </article>
   <div class="article-grid"> …three cards… </div>
   ========================================================================== */

.article-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gap);
  align-items: start;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article-card__date {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.article-card__title {
  margin-top: var(--s-3);
  font-size: var(--t-28);
  font-weight: var(--wght-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  max-width: 20ch;
}

/* Hairline underline on hover. text-decoration (not a background gradient —
   canon §9) so it stays correct across a wrapped two-line headline. */
.article-card__title a {
  text-decoration: underline;
  text-decoration-thickness: var(--hairline-w);
  text-underline-offset: 0.14em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--tx-base);
}

.article-card:hover .article-card__title a,
.article-card__title a:focus-visible { text-decoration-color: currentColor; }

.article-card__excerpt {
  margin-top: var(--s-5);
  font-size: var(--t-15);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 46ch;
}

.article-card .link-arrow { margin-top: var(--s-6); }

.article-card__media {
  display: block;
  overflow: hidden;
  background: var(--bg-raised);
}

.article-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--dur-6) var(--ease);
}

.article-card:hover .article-card__media img { transform: scale(1.02); }

/* Stacked */
.article-card--stack { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
.article-card--stack .article-card__media { order: -1; }
.article-card--stack .article-card__title { font-size: var(--t-21); max-width: none; }
.article-card--stack .link-arrow { margin-top: var(--s-5); }

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px) var(--grid-gap);
}

.article-list > .article-card + .article-card {
  margin-top: clamp(40px, 4.5vw, 72px);
  padding-top: clamp(40px, 4.5vw, 72px);
  border-top: var(--hairline-w) solid var(--rule);
}

@media (max-width: 1023px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .article-card { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .article-card__media { order: -1; }
  .article-card__title { max-width: none; }
  .article-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   14. DUO — the two-panel feature band
   --------------------------------------------------------------------------
   Measured: two full-bleed half-width panels, each with its own surface,
   a title + Read More on one baseline, a hairline rule, then an image.

   <div class="duo">
     <section class="duo__panel" data-surface="paper">
       <header class="duo__head">
         <h2 class="duo__title">Rebuild the arsenal</h2>
         <a class="link-arrow" href="/arsenal/">Read More</a>
       </header>
       <img class="duo__media" src="/assets/stills/forge-1.jpg" alt="">
     </section>
     <section class="duo__panel duo__panel--raised"> … </section>
   </div>
   ========================================================================== */

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

.duo__panel {
  padding: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 48px);
  background: var(--bg);
  color: var(--fg);
}

.duo__panel--raised { background: var(--bg-raised); }

.duo__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: var(--hairline-w) solid var(--rule);
  margin-bottom: clamp(24px, 3vw, 40px);
}

.duo__title {
  font-size: var(--t-40);
  font-weight: var(--wght-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

.duo__media {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (max-width: 767px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   15. MEDIA + CAPTION-ROW
   --------------------------------------------------------------------------
   The FORGE-1 treatment (canon §8): a full-width still, then a two-column
   caption beneath it — mono stamp on the left, eyebrow + line on the right,
   split at the 50% line. Measured gap image -> caption = 44px.

   <figure class="media">
     <img class="media__img" src="/assets/stills/forge-1.jpg" alt="FORGE-1, Savannah, Georgia">
     <figcaption class="caption-row">
       <p class="caption-row__stamp">Designed by Fantom<br>Built in Georgia</p>
       <div class="caption-row__note">
         <p class="eyebrow eyebrow--fg">FORGE-1</p>
         <p class="caption-row__line">A new standard in defense manufacturing.</p>
       </div>
     </figcaption>
   </figure>
   ========================================================================== */

.media { display: block; }

.media__img,
.media__video {
  width: 100%;
  display: block;
  object-fit: cover;
}

.media--16-9 .media__img, .media--16-9 .media__video { aspect-ratio: 16 / 9; }
.media--21-9 .media__img, .media--21-9 .media__video { aspect-ratio: 21 / 9; }
.media--3-1  .media__img, .media--3-1  .media__video { aspect-ratio: 3 / 1;  }
.media--4-3  .media__img, .media--4-3  .media__video { aspect-ratio: 4 / 3;  }
.media--1-1  .media__img, .media--1-1  .media__video { aspect-ratio: 1 / 1;  }

.caption-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gap);
  align-items: start;
  margin-top: clamp(24px, 2.8vw, 44px);
}

.caption-row__stamp {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--fg-muted);
}

.caption-row__note > .eyebrow { margin-bottom: var(--s-3); }

.caption-row__line {
  font-size: var(--t-17);
  line-height: var(--lh-normal);
  color: var(--fg);
  max-width: 44ch;
}

@media (max-width: 767px) {
  .caption-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
}

/* ==========================================================================
   16. BTN
   --------------------------------------------------------------------------
   Sharp rectangle, hairline border, mono uppercase label. There is no ember
   button — ember is reserved (canon §9).

   <a class="btn" href="/company/contact/">Request a briefing</a>
   <button class="btn btn--solid" type="submit">Submit</button>
   <a class="btn btn--sm" href="/arsenal/">FORGE-1</a>
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: var(--hairline-w) solid var(--rule-strong);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: var(--wght-medium);
  line-height: 1;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--tx-fast),
    color var(--tx-fast),
    border-color var(--tx-fast);
}

.btn:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.btn--solid {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.btn--solid:hover {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}

.btn--ghost { border-color: var(--rule); color: var(--fg-muted); }
.btn--ghost:hover { color: var(--bg); }

.btn--sm { padding: var(--s-3) var(--s-4); font-size: var(--t-11); }
.btn--lg { padding: var(--s-5) var(--s-7); }
.btn--block { display: flex; width: 100%; justify-content: center; }

.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn__arrow {
  font-family: var(--font-mono);
  transition: transform var(--tx-base);
}
.btn:hover .btn__arrow { transform: translate(3px, -3px); }

/* ==========================================================================
   17. LINK-ARROW
   --------------------------------------------------------------------------
   Text + the U+2197 affordance, with a hairline underline that draws in from
   the left on hover and an arrow that translates 4px up-right.

   <a class="link-arrow" href="/news/">All Articles</a>
   <a class="link-arrow link-arrow--mono" href="/air/wraith/">WRAITH</a>
   <a class="link-arrow link-arrow--lg" href="/arsenal/">Rebuild the arsenal</a>
   ========================================================================== */

.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-15);
  line-height: var(--lh-snug);
  color: var(--fg);
  padding-bottom: 3px;
}

.link-arrow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hairline-w);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tx-base);
}

.link-arrow::after {
  content: '\2197';
  font-family: var(--font-mono);
  font-size: 0.86em;
  line-height: 1;
  transition: transform var(--tx-base);
}

.link-arrow:hover::before,
.link-arrow:focus-visible::before { transform: scaleX(1); }

.link-arrow:hover::after,
.link-arrow:focus-visible::after { transform: translate(4px, -4px); }

/* Underline shown at rest, as on the reference site's section links. */
.link-arrow--ruled::before { transform: scaleX(1); opacity: 0.4; }
.link-arrow--ruled:hover::before { opacity: 1; }

.link-arrow--mono {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
}

.link-arrow--muted { color: var(--fg-muted); }
.link-arrow--muted:hover { color: var(--fg); }

.link-arrow--lg { font-size: var(--t-21); }

/* Back-link: arrow flips to point up-left. */
.link-arrow--back { flex-direction: row-reverse; }
.link-arrow--back::after { content: '\2196'; }
.link-arrow--back:hover::after { transform: translate(-4px, -4px); }

/* ==========================================================================
   18. HAIRLINE + TICK
   --------------------------------------------------------------------------
   <hr class="hairline">
   <hr class="hairline hairline--strong">
   <span class="hairline hairline--v" aria-hidden="true"></span>
   <span class="tick" aria-hidden="true"></span>          ember data tick
   <span class="tick tick--hud" aria-hidden="true"></span> sensor-graphic tick
   ========================================================================== */

.hairline {
  display: block;
  width: 100%;
  height: var(--hairline-w);
  background: var(--rule);
  border: 0;
  flex: none;
}

.hairline--strong { background: var(--rule-strong); }
.hairline--ember  { background: var(--ember); }

.hairline--v {
  width: var(--hairline-w);
  height: 100%;
  min-height: 1em;
}

.hairline--inset { width: auto; margin-inline: var(--gutter); }

/* Data ticks — sanctioned ember use. Sits above a figure or beside a label. */
.tick {
  display: inline-block;
  width: 18px;
  height: var(--hairline-w);
  background: var(--ember);
  vertical-align: middle;
  flex: none;
}

.tick--v { width: var(--hairline-w); height: 12px; }
.tick--hud { background: var(--hud); }   /* diagrams / sensor overlays only */

/* A row of ruled ticks used under sensor diagrams. */
.tick-scale {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 12px;
}
.tick-scale > i {
  display: block;
  width: var(--hairline-w);
  height: 6px;
  background: var(--rule-strong);
}
.tick-scale > i:nth-child(5n + 1) { height: 12px; background: var(--ember); }

/* ==========================================================================
   19. REVEAL — scroll reveal utility
   --------------------------------------------------------------------------
   Canon §9: 24px rise + opacity, 600–900ms, house easing.
   assets/js/site.js adds .is-in via IntersectionObserver. Both the class and
   the data-attribute forms work, so either JS implementation is fine.

   <div class="reveal">…</div>
   <div class="reveal reveal--d2">…</div>       stagger step 2
   <div data-reveal>…</div>
   ========================================================================== */

.reveal,
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-rise));
  transition:
    opacity var(--dur-5) var(--ease),
    transform var(--dur-5) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-in,
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.reveal--d1 { --reveal-delay:  80ms; }
.reveal--d2 { --reveal-delay: 160ms; }
.reveal--d3 { --reveal-delay: 240ms; }
.reveal--d4 { --reveal-delay: 320ms; }
.reveal--d5 { --reveal-delay: 400ms; }
.reveal--d6 { --reveal-delay: 480ms; }

.reveal--slow { transition-duration: var(--dur-6); }
.reveal--flat { transform: none; }   /* opacity only, for film */

/* Auto-stagger any direct children of a .reveal-stagger container. */
.reveal-stagger > .reveal:nth-child(1) { --reveal-delay: 0ms;   }
.reveal-stagger > .reveal:nth-child(2) { --reveal-delay: 80ms;  }
.reveal-stagger > .reveal:nth-child(3) { --reveal-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { --reveal-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { --reveal-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { --reveal-delay: 400ms; }

/* No-JS fallback: nothing is ever hidden if the observer never runs. */
.no-js .reveal,
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ==========================================================================
   20. FOOTER
   --------------------------------------------------------------------------
   Measured column positions (content box 1056px): link columns begin at
   50.7%, 67.4% and 84.5% -> grid columns 7, 9 and 11 of 12. So the brand
   block spans 6, then three 2-wide link columns. Column heading to first
   link = 60px; link line spacing = 27px. Links carry the + bullet.

   <footer class="footer">
     <div class="footer__inner container grid">

       <div class="footer__brand">
         <a class="lockup" href="/"> … </a>
         <p class="footer__blurb">Fantom Defense builds autonomous systems that
            keep fighting after the network dies.</p>
       </div>

       <nav class="footer__col" aria-label="Company">
         <p class="eyebrow footer__heading">Company</p>
         <ul class="footer__list">
           <li><a class="plus-link" href="/company/">Mission</a></li>
           <li><a class="plus-link" href="/news/">Newsroom</a></li>
           <li><a class="plus-link" href="/company/leadership/">Leadership</a></li>
         </ul>
       </nav>

       <nav class="footer__col" aria-label="Work with us"> … </nav>
       <nav class="footer__col" aria-label="Social"> … </nav>

       <div class="footer__sub">
         <div class="footer__subcol">
           <p class="eyebrow footer__heading">Contact</p>
           <a class="footer__contact" href="mailto:defense@fantom.aero">defense@fantom.aero</a>
         </div>
         <div class="footer__subcol">
           <p class="eyebrow footer__heading">Social</p>
           <ul class="footer__social">
             <li><a href="#">X</a></li><li><a href="#">YT</a></li>
             <li><a href="#">IG</a></li><li><a href="#">LI</a></li>
           </ul>
         </div>
       </div>
     </div>

     <div class="footer__bar">
       <div class="container footer__bar-inner">
         <p class="footer__legal">&copy; 2026 Fantom Defense. All rights reserved.</p>
         <ul class="footer__legal-links">
           <li><a href="/legal/privacy/">Privacy</a></li>
           <li><a href="/legal/terms/">Terms</a></li>
         </ul>
       </div>
     </div>
   </footer>
   ========================================================================== */

.footer {
  background: var(--ink);
  color: var(--white);
  --fg: var(--white);
  --fg-muted: var(--fog);
  --rule: var(--hairline);
  --rule-strong: var(--white-28);
  border-top: var(--hairline-w) solid var(--hairline);
}

.footer__inner {
  padding-block: clamp(56px, 6vw, 96px) clamp(40px, 4vw, 64px);
  align-items: start;
  row-gap: clamp(40px, 4.5vw, 72px);
}

.footer__brand { grid-column: span 6; }

.footer__blurb {
  margin-top: var(--s-5);
  font-size: var(--t-15);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: 40ch;
}

.footer__col { grid-column: span 2; }

.footer__heading { margin-bottom: clamp(28px, 3vw, 44px); }

.footer__list > li + li { margin-top: var(--s-3); }

.footer__sub {
  grid-column: 1 / span 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-top: clamp(32px, 3.5vw, 56px);
  border-top: var(--hairline-w) solid var(--rule);
}

.footer__contact {
  font-size: var(--t-17);
  color: var(--fg);
  border-bottom: var(--hairline-w) solid transparent;
  transition: border-color var(--tx-fast);
}
.footer__contact:hover { border-bottom-color: currentColor; }

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.footer__social a {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: var(--wght-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg);
  transition: color var(--tx-fast);
}
.footer__social a:hover { color: var(--fg-muted); }

.footer__bar {
  border-top: var(--hairline-w) solid var(--rule);
}

.footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  flex-wrap: wrap;
}

.footer__legal,
.footer__legal-links a {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.footer__legal-links {
  display: flex;
  gap: var(--s-5);
}

.footer__legal-links a { transition: color var(--tx-fast); }
.footer__legal-links a:hover { color: var(--fg); }

/* A film strip sitting under the footer, as on the reference site. */
.footer__film {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

@media (max-width: 1023px) {
  .footer__brand { grid-column: span 12; }
  .footer__col   { grid-column: span 4; }
  .footer__sub   { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .footer__col { grid-column: span 12; }
  .footer__sub { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .footer__heading { margin-bottom: var(--s-4); }
  .footer__bar-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   21. MISC BLOCKS the page agents will reach for
   ========================================================================== */

/* --- Page masthead: the standard non-film page header -------------------
   <header class="masthead container">
     <p class="eyebrow">Air · Collaborative Combat Aircraft</p>
     <h1 class="masthead__title"><em>Wraith</em></h1>
     <p class="masthead__sub">The wingman that does not get tired, scared, or old.</p>
   </header>                                                              */

.masthead {
  padding-block: clamp(56px, 7vw, 120px) clamp(32px, 4vw, 56px);
}

.masthead__title {
  margin-top: var(--s-5);
  font-size: var(--t-96);
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  text-transform: uppercase;
  max-width: 18ch;
}

.masthead__title em { font-style: normal; color: var(--ember); }

.masthead__sub {
  margin-top: var(--s-5);
  font-size: var(--t-21);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  max-width: 52ch;
}

/* --- Two-column prose block --------------------------------------------
   <div class="split">
     <div class="split__side"><p class="eyebrow">Design point</p></div>
     <div class="split__main prose"> … </div>
   </div>                                                                 */

.split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: clamp(24px, 4vw, 80px);
  align-items: start;
}

.split--even { grid-template-columns: 1fr 1fr; }
.split__side { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }

@media (max-width: 767px) {
  .split { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .split__side { position: static; }
}

/* --- Index rows: the arsenal / product list ----------------------------
   <a class="index-row" href="/products/leviathan/">
     <span class="index-row__id">SEA-01</span>
     <span class="index-row__name">Leviathan</span>
     <span class="index-row__desc">Extra-large UUV, 68 ft, 190 t</span>
     <span class="pill pill--dev">In development</span>
     <span class="index-row__arrow" aria-hidden="true">&#8599;</span>
   </a>                                                                   */

.index-row {
  display: grid;
  grid-template-columns: 7rem 1fr 1.4fr auto 1.5rem;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: var(--hairline-w) solid var(--rule);
  color: var(--fg);
  transition: background-color var(--tx-fast), padding-inline var(--tx-base);
}

.index-row:first-child { border-top: var(--hairline-w) solid var(--rule); }
.index-row:hover { background: var(--bg-wash); }

.index-row__id {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.index-row__name {
  font-size: var(--t-21);
  font-weight: var(--wght-semi);
  letter-spacing: var(--tr-snug);
}

.index-row__desc {
  font-size: var(--t-15);
  color: var(--fg-muted);
}

.index-row > .pill { justify-self: start; }

.index-row__arrow {
  font-family: var(--font-mono);
  font-size: var(--t-15);
  color: var(--fg-muted);
  transition: transform var(--tx-base), color var(--tx-fast);
  justify-self: end;
}

.index-row:hover .index-row__arrow {
  transform: translate(4px, -4px);
  color: var(--fg);
}

@media (max-width: 900px) {
  .index-row {
    grid-template-columns: 1fr auto;
    row-gap: var(--s-2);
  }
  .index-row__id   { grid-column: 1 / -1; }
  .index-row__desc { grid-column: 1 / -1; }
  .index-row__arrow { justify-self: end; }
}

/* --- Quote -------------------------------------------------------------
   <blockquote class="quote">
     <p class="quote__text">A runway is a coordinate.</p>
     <footer class="quote__by">Chief Engineer, Air Systems</footer>
   </blockquote>                                                          */

.quote { border-left: 2px solid var(--ember); padding-left: clamp(20px, 2.4vw, 32px); }

.quote__text {
  font-size: var(--t-28);
  font-weight: var(--wght-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  max-width: 34ch;
}

.quote__by {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* --- Notice bar --------------------------------------------------------
   <p class="notice">Concept program. Specifications are design targets.</p> */

.notice {
  padding: var(--s-4) var(--s-5);
  border: var(--hairline-w) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: var(--lh-mono);
  color: var(--fg-muted);
}

.notice--ember { border-color: var(--ember-40); color: var(--ember); }

/* ==========================================================================
   SHELL RECONCILIATION — added by the orchestrator, 2026-07-31
   --------------------------------------------------------------------------
   WHY THIS EXISTS
   Two shell vocabularies shipped in parallel. docs/DESIGN_SYSTEM.md (and the
   rules above) use .nav__links / .nav__utils / .drawer__inner / .footer__*.
   docs/SHELL_MARKUP.md — which site.js's hooks were written against — uses
   .nav__primary / .nav__actions / .drawer__panel / .foot__*, and site.js
   INJECTS the search overlay as .search / .search__* on every page.

   The two class sets are not a prefix rename (the footer sub-elements differ
   outright), so renaming markup would have been wrong. This block styles the
   SHELL_MARKUP vocabulary with the same canon tokens so BOTH sets render
   correctly and no page needs editing.

   Canon discipline holds: zero border-radius, no shadows, ember only on the
   sanctioned marks. Consumes tokens.css only.
   ========================================================================== */

/* ---- NAV aliases ------------------------------------------------------- */
.nav__primary {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-left: auto;
}
.nav__primary a,
.nav__actions a,
.nav__actions button {
  font: 500 13px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted, var(--fog));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.nav__primary a:hover,
.nav__actions a:hover,
.nav__actions button:hover { color: var(--fg, var(--white)); }
.nav__primary a[aria-current],
.nav__primary a.is-active {
  color: var(--fg, var(--white));
  box-shadow: inset 0 -1px 0 0 var(--ember);
}

/* ---- DRAWER alias ------------------------------------------------------ */
.drawer__panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 96px clamp(20px, 5vw, 48px) 48px;
  background: var(--bg, var(--ink));
  min-height: 100%;
}

/* ---- FOOTER (SHELL_MARKUP vocabulary) ---------------------------------- */
.foot__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px);
}
.foot__brand   { grid-column: span 6; }
.foot__col     { grid-column: span 2; }
.foot__sitemap { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .foot__brand { grid-column: 1 / -1; }
  .foot__col   { grid-column: span 4; }
}
@media (max-width: 560px) {
  .foot__col   { grid-column: span 6; }
}
.foot__h,
.foot__label,
.foot__map-h {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted, var(--fog));
  margin: 0 0 16px;
}
.foot__desc {
  max-width: 42ch;
  color: var(--fg-muted, var(--fog));
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 28px;
}
.foot__list,
.foot__legal-list,
.foot__map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot__legal-list { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.foot__map-list   { gap: 8px; }
.foot__link,
.foot__list a,
.foot__legal-list a,
.foot__map-list a {
  color: var(--fg, var(--white));
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: color 200ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.foot__list a:hover,
.foot__legal-list a:hover,
.foot__map-list a:hover { color: var(--ember); }
.foot__plus { color: var(--fg-muted, var(--fog)); flex: none; }
.foot__list--plain a,
.foot__plain a { }
.foot__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--rule, var(--hairline));
}
.foot__legal,
.foot__copy,
.foot__note {
  font: 400 12px/1.5 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.06em;
  color: var(--fg-muted, var(--fog));
  margin: 0;
}
.foot__map {
  border-top: 1px solid var(--rule, var(--hairline));
  padding: clamp(32px, 4vw, 56px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

/* ---- SEARCH OVERLAY — site.js injects this markup on all 34 pages ------ */
.search {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.search.is-open { display: block; }
.search[hidden]  { display: none; }
.search__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.search__panel {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
  width: calc(100% - 32px);
  margin-top: clamp(56px, 10vh, 132px);
  background: var(--ink-2, #101214);
  border: 1px solid var(--hairline);
  max-height: calc(100vh - clamp(80px, 16vh, 200px));
  display: flex;
  flex-direction: column;
}
.search__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  height: 90px;
  border-bottom: 1px solid var(--hairline);
  flex: none;
}
.search__icon  { color: var(--fog); flex: none; }
.search__input {
  flex: 1 1 auto;
  background: none;
  border: 0;
  outline: 0;
  color: var(--white);
  font: 400 clamp(18px, 2.2vw, 28px)/1.2 var(--font-sans, Archivo, system-ui, sans-serif);
  letter-spacing: -0.01em;
  min-width: 0;
}
.search__input::placeholder {
  color: var(--fog);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
.search__kbd {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em;
  color: var(--fog);
  border: 1px solid var(--hairline);
  padding: 5px 8px;
  flex: none;
}
.search__close {
  background: none;
  border: 0;
  color: var(--fog);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  flex: none;
  transition: color 200ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.search__close:hover { color: var(--ember); }
.search__status {
  font: 400 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  padding: 14px 20px 0;
  margin: 0;
}
.search__results {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.search__item { border-bottom: 1px solid var(--hairline); }
.search__hit {
  display: grid;
  grid-template-columns: 132px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--white);
}
.search__item.is-selected,
.search__item:hover { background: rgba(255, 255, 255, 0.04); }
.search__item.is-selected .search__hit-go { color: var(--ember); }
.search__hit-domain,
.search__hit-desig {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}
.search__hit-body { min-width: 0; }
.search__hit-name {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.search__hit-blurb {
  display: block;
  font-size: 13px;
  color: var(--fog);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search__hit-go { color: var(--fog); }
.search__mark { background: none; color: var(--ember); }
.search__hint {
  font: 400 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  padding: 14px 20px;
  margin: 0;
  border-top: 1px solid var(--hairline);
  flex: none;
}
@media (max-width: 720px) {
  .search__hit { grid-template-columns: 1fr auto; }
  .search__hit-domain,
  .search__hit-desig { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .search__scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* ==========================================================================
   SHELL RECONCILIATION — PASS 2 (orchestrator, 2026-07-31)
   --------------------------------------------------------------------------
   A per-page audit (global CSS + each page's own <style>) found 73 classes in
   markup with no rule anywhere. Most came from a THIRD shell vocabulary that
   several domain agents took from SHELL_MARKUP.md §8's reference CSS, which was
   never merged into components.css.

   Pure BEM modifiers on an already-styled base (.section--mission, .tile--w2 …)
   are intentionally left alone — the base class carries them. This block covers
   only the classes that actually break layout.
   ========================================================================== */

/* ---- NAV: third vocabulary -------------------------------------------- */
.nav__lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); }
.nav__ghost  { width: 26px; height: 26px; flex: none; }
.nav__word   { font-weight: 700; letter-spacing: 0.02em; font-size: 19px; color: var(--white); }
.nav__rule   { width: 1px; height: 18px; background: var(--hairline); display: inline-block; }
.nav__sub    { font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog); }
.nav__list, .nav__domains {
  display: flex; align-items: center; gap: clamp(18px, 2.6vw, 42px);
  list-style: none; margin: 0; padding: 0;
}
.nav__item { display: inline-flex; }
.nav__utility { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); margin-left: auto; }
.nav__btn, .nav__util-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fog); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  transition: color 200ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.nav__btn:hover, .nav__util-link:hover { color: var(--white); }
.nav__btn-txt { display: inline; }
.nav__icon { width: 15px; height: 15px; flex: none; }
@media (max-width: 1024px) {
  .nav__list, .nav__domains, .nav__utility { display: none; }
}

/* ---- DRAWER: full third vocabulary ------------------------------------ */
.drawer__scrim { position: absolute; inset: 0; background: rgba(8, 9, 10, 0.86); }
.drawer__nav {
  position: relative; margin-left: auto; height: 100%; width: min(460px, 100%);
  background: var(--ink-2, #101214); border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 32px); border-bottom: 1px solid var(--hairline); flex: none;
}
.drawer__close { background: none; border: 0; color: var(--fog); cursor: pointer; padding: 6px; display: inline-flex; }
.drawer__close:hover { color: var(--ember); }
.drawer__eyebrow {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog);
  padding: 24px clamp(20px, 5vw, 32px) 10px; margin: 0;
}
.drawer__acc { border-bottom: 1px solid var(--hairline); }
.drawer__idx {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  color: var(--fog); margin-right: 12px; flex: none;
}
.drawer__sub { list-style: none; margin: 0; padding: 0 clamp(20px, 5vw, 32px) 16px; display: flex; flex-direction: column; gap: 10px; }
.drawer__sublink { color: var(--fog); text-decoration: none; font-size: 15px; display: inline-flex; align-items: baseline; gap: 8px; }
.drawer__sublink:hover { color: var(--ember); }
.drawer__plus { color: var(--fog); flex: none; }
.drawer__foot { margin-top: auto; padding: 24px clamp(20px, 5vw, 32px) 40px; border-top: 1px solid var(--hairline); }
.drawer__mail {
  font: 400 13px/1.4 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  color: var(--fog); text-decoration: none; letter-spacing: 0.04em;
}
.drawer__mail:hover { color: var(--ember); }

/* ---- MEGA: feature card variant --------------------------------------- */
.mega__h {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); margin: 0 0 16px;
}
.mega__link { color: var(--white); text-decoration: none; font-size: 15px; display: inline-flex; align-items: baseline; gap: 8px; }
.mega__link:hover { color: var(--ember); }
.mega__plus { color: var(--fog); flex: none; }
.mega__feature-media { display: block; overflow: hidden; margin-bottom: 14px; }
.mega__feature-img { display: block; width: 100%; height: auto; object-fit: cover; }
.mega__feature-eyebrow {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); margin: 0 0 6px;
}
.mega__feature-title { font-size: 19px; font-weight: 600; color: var(--white); margin: 0 0 4px; letter-spacing: -0.01em; }
.mega__feature-copy { color: var(--fog); font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.mega__feature-go { color: var(--fog); font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace); letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- FOOTER: third vocabulary ----------------------------------------- */
.foot { background: var(--ink); border-top: 1px solid var(--hairline); }
.footer__grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 40px); padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px);
}
.footer__lockup, .lockup--foot { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); margin-bottom: 20px; }
.footer__subcol { grid-column: span 2; }
@media (max-width: 900px) { .footer__subcol { grid-column: span 4; } }
@media (max-width: 560px) { .footer__subcol { grid-column: span 6; } }
.footer__line { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: 24px 0 40px;
  font: 400 12px/1.5 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.06em; color: var(--fog);
}

/* ---- HERO: product variant -------------------------------------------- */
.hero--product { min-height: clamp(560px, 78vh, 860px); }
.hero__designation {
  font: 500 13px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog); margin: 0 0 10px;
}
.hero__lede { max-width: 54ch; color: var(--fog); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; margin: 18px 0 0; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
  border: 1px solid var(--hairline); padding: 7px 12px; background: rgba(8, 9, 10, 0.55);
}

/* ---- BODY COMPONENTS --------------------------------------------------- */
.breadcrumb { padding: 20px 0; }
.breadcrumb__list {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0;
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog);
}
.breadcrumb__list a { color: var(--fog); text-decoration: none; }
.breadcrumb__list a:hover { color: var(--ember); }

.panel { border: 1px solid var(--rule, var(--hairline)); padding: clamp(20px, 3vw, 36px); background: var(--ink-2, #101214); }
[data-surface="paper"] .panel { background: var(--paper-2, #E4E2DC); }

.conops { display: grid; gap: 1px; background: var(--rule, var(--hairline)); border: 1px solid var(--rule, var(--hairline)); }
.conops__step { background: var(--bg, var(--ink)); padding: clamp(20px, 2.6vw, 32px); }
.conops__step > :first-child { margin-top: 0; }
@media (min-width: 900px) { .conops { grid-template-columns: repeat(2, 1fr); } }

.split__main { min-width: 0; }
.bento--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .bento--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bento--3 { grid-template-columns: 1fr; } }

.stat__value { display: block; font-size: clamp(40px, 5vw, 68px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.spec-table__caption {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog);
  text-align: left; padding-bottom: 14px;
}
.tile__eyebrow {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fog); margin: 0 0 6px;
}
.tile__body { color: var(--fog); font-size: 14px; line-height: 1.5; margin: 0; }
.related { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cta { padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--rule, var(--hairline)); }
.rv-rung__body { min-width: 0; }
.is-result { display: block; }

/* Canon says there is no ember button (DESIGN_SYSTEM §5.14). Any .btn--ember
   in markup renders as the solid button rather than shipping an unstyled one. */
.btn--ember { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--ember:hover { background: var(--ember); border-color: var(--ember); color: var(--white); }
.pill--ember { border-color: var(--ember); color: var(--ember); }


/* ---- CRITICAL: no-JS reveal guard (orchestrator fix) -------------------
   components.css sets .reveal{opacity:0} ungated, and its fallback keyed on
   .no-js — which nothing ever sets (site.js sets .fd-js on <html>). If site.js
   failed to load, every reveal block on the site rendered blank. This gates on
   the class that is actually set, so content is visible by default and only
   animates once JS is confirmed present. */
html:not(.fd-js) .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---- Mobile hero guard --------------------------------------------------
   The --t-96 clamp bottoms out at 44px, which is still wide enough for a
   long word pair ("NOBODY GOES") to run past the viewport on a phone. The
   previous guard only fired under 420px and used hyphens:auto, which broke
   words mid-glyph in a display face. Step the size down instead, and keep
   overflow-wrap purely as a backstop for a single unbreakable long word. */
@media (max-width: 560px) {
  .hero__title, .hp-hero-title {
    font-size: clamp(30px, 8.2vw, 44px);
    max-width: none;
    overflow-wrap: break-word;
  }
}

/* ---- LEADERSHIP (orchestrator) — named exec grid, mirrors fantom.aero/founders ---- */
.ldr-grid {
  display: grid;
  gap: 1px;
  background: var(--rule, var(--hairline));
  border: 1px solid var(--rule, var(--hairline));
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.ldr {
  background: var(--bg, var(--ink));
  padding: 0 0 clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
}
.ldr__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(1) contrast(1.06);
  transition: filter 500ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  margin-bottom: clamp(18px, 2vw, 26px);
}
.ldr:hover .ldr__photo { filter: grayscale(0) contrast(1); }
.ldr__body { padding: 0 clamp(18px, 2vw, 26px); }
.ldr__role {
  font: 500 11px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 10px;
}
.ldr__name {
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--fg, var(--white));
}
.ldr__sub {
  font: 400 12px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted, var(--fog));
  margin: 0 0 16px;
}
.ldr__bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted, var(--fog));
  margin: 0;
}
.ldr__bio + .ldr__bio { margin-top: 10px; }
.ldr--founder { grid-column: span 1; }
@media (min-width: 1100px) {
  .ldr-grid--founders { grid-template-columns: repeat(2, 1fr); }
  .ldr-grid--team     { grid-template-columns: repeat(3, 1fr); }
}