/* ============================================================================
   COMCEPT — STANDALONE DESIGN SYSTEM  (The Forensic Instrument / Signal Lock)
   Consumes tokens.css. Zero Tailwind, zero made. CSS, zero external deps.
   ----------------------------------------------------------------------------
   CRITICAL FALLBACK CONTRACT:
   Every scroll-driven reveal / draw-on / gauge / wipe DEFAULTS to its FINAL,
   fully-visible state. The hidden/clipped/empty INITIAL state is applied ONLY
   inside @supports(animation-timeline: view()) (and/or behind html.js-ready),
   so Firefox / Safari / no-JS render everything visible and meaningful.
   ----------------------------------------------------------------------------
   AMBER DISCIPLINE: one PRIMARY amber signal per scene (node / active CTA /
   beam). Incidental amber (focus ring, persistent nav CTA, form checked/charge)
   is exempt. The crosshair MARK never gets glow — flat, sharp, radius-0.
   MONO text is slate-200 or white, NEVER slate-400.
   ============================================================================ */

/* ===========================================================================
   1. RESET
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;            /* clears the sticky nav on anchor jumps */
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0;
  background: var(--carbon-900);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

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

input, textarea, select {
  font: inherit;
  color: inherit;
}

:where(svg) { fill: currentColor; }

/* Numerics carry tabular figures everywhere */
.data, [data-odometer], .hud-strip, .panel__metric, .readout__value, .coordinate {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ===========================================================================
   2. FOCUS — visible amber ring on ALL interactive elements, never removed.
   =========================================================================== */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Box-shadow variant where outline can't sit cleanly (filled CTAs/chips). */
.btn-primary:focus-visible,
.chip__input:focus-visible + .chip__face {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ===========================================================================
   3. SKIP LINK
   =========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--carbon-800);
  color: var(--white);
  padding: 0.75rem 1rem;
  border: 2px solid var(--amber-500);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ===========================================================================
   4. LAYOUT — 12-col grid + container
   =========================================================================== */
.container,
.site-header__inner,
.hero__inner,
.matrix__inner,
.pipeline__inner,
.process__inner,
.capabilities__inner,
.difference__inner,
.evidence__inner,
.closer__inner,
.contact-terminal__inner,
.site-footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A reusable 12-col grid for the section bodies that opt in. */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* Standard section rhythm. svh/dvh for mobile URL-bar stability. */
.matrix, .pipeline, .process, .capabilities, .difference, .evidence, .closer {
  position: relative;
  padding-block: var(--section-pad);
}
/* Alternating instrument planes. */
.pipeline   { background: var(--carbon-850); }
.capabilities { background: var(--carbon-850); }
.evidence   { background: var(--carbon-850); }
.closer     { background: var(--carbon-950); }

/* ===========================================================================
   5. TYPOGRAPHY
   =========================================================================== */
.eyebrow,
.hero__eyebrow,
.contact-eyebrow,
.principles__label,
.chips__legend,
.field__label,
.uplink,
.hud-strip,
.panel__state,
.contrast__label,
.step__code,
.module__num,
.closer__readout,
.coordinate,
.readout__label,
.panel__tags,
.scroll-cue {
  font-family: var(--font-mono);
}

.eyebrow,
.hero__eyebrow,
.contact-eyebrow,
.principles__label,
.chips__legend {
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);               /* mono labels: slate-200, never slate-400 */
  line-height: 1.4;
  margin-bottom: var(--s-4);
}
.eyebrow--center { text-align: center; }

.h1, .hero__h1, .contact-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: var(--tracking-h1);
  line-height: var(--lh-h1);
  color: var(--white);
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--tracking-h2);
  line-height: 1.04;
  color: var(--white);
  text-wrap: balance;
  margin-bottom: var(--s-5);
}

.h3, .quadrant__title, .panel__title, .step__title, .module__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--white);
}

.lede {
  font-size: var(--fs-body);
  color: var(--slate-200);
  max-width: var(--measure);
}

p { max-width: var(--measure); }

/* Emphasis underline — amber draw-on; DEFAULT fully drawn/visible. */
.emph {
  font-style: normal;
  color: var(--white);
  position: relative;
  white-space: nowrap;
}
.emph::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 2px;
  background: var(--amber-500);
  transform: scaleX(1);                  /* DEFAULT: drawn */
  transform-origin: left;
}

/* ===========================================================================
   6. BUTTONS
   =========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: var(--amber-500);
  color: var(--carbon-950);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.85em 1.4em;
  min-height: 44px;                      /* touch target */
  border: 0;
  border-radius: var(--radius-md);
  transition: background var(--dur-ui) var(--ease-instrument),
              box-shadow var(--dur-ui) var(--ease-instrument),
              transform var(--dur-ui) var(--ease-instrument);
  will-change: transform;
}
.btn-primary:hover {
  background: var(--amber-400);
  box-shadow: var(--glow-amber-soft);
}
.btn-primary:active { background: var(--amber-600); }
.btn-primary--lg {
  font-size: 0.95rem;
  padding: 1.05em 1.8em;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-200);
  padding: 0.85em 1.2em;
  min-height: 44px;
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-ui) var(--ease-instrument),
              color var(--dur-ui) var(--ease-instrument);
}
.btn-ghost:hover { border-color: var(--carbon-500); color: var(--white); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);
  margin-top: var(--s-7);
  transition: color var(--dur-ui) var(--ease-instrument), gap var(--dur-ui) var(--ease-instrument);
}
.link-arrow:hover { color: var(--white); gap: 0.85em; }

/* ===========================================================================
   7. STICKY NAV
   =========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklch, var(--carbon-900) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border-bottom: 1px solid var(--carbon-600);
  transition: padding var(--dur-ui) var(--ease-instrument),
              background var(--dur-ui) var(--ease-instrument);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--carbon-900); }
}
/* Condense-on-scroll: nav.js adds .is-condensed. */
.site-header.is-condensed { background: color-mix(in oklch, var(--carbon-950) 92%, transparent); }
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-condensed { background: var(--carbon-950); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
  transition: padding var(--dur-ui) var(--ease-instrument);
}
.site-header.is-condensed .site-header__inner { padding-block: var(--s-3); }

.wordmark {
  display: inline-flex;
  align-items: center;
  /* view-transition-name:wordmark is inline in the markup (one per document) */
}
.wordmark__svg {
  height: clamp(28px, 3.4vw, 40px);
  width: auto;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--s-7);
}
.nav-menu__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.nav-link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);
  padding: 0.4em 0;
  position: relative;
  transition: color var(--dur-ui) var(--ease-instrument);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: var(--amber-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-instrument);
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--white); }

.nav-cta { white-space: nowrap; }
.nav-cta[aria-current="page"] { background: var(--amber-400); }

/* Body scroll-lock while the mobile overlay menu is open (nav.js toggles the
   class + pins the page via inline top:-scrollY). position:fixed makes that
   offset effective; width:100% + left/right:0 preserve layout width while
   fixed; overflow-y:scroll keeps the scrollbar gutter so the page can't reflow
   when scrolling is removed. unlockScroll() restores the prior offset. */
body.nav-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow-y: scroll;
}

/* Mobile toggle — three bars that morph to an X when open. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-sm);
  z-index: 120;
}
.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition: transform var(--dur-ui) var(--ease-instrument),
              opacity var(--dur-ui) var(--ease-instrument);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- FROM-SCRATCH MOBILE OVERLAY MENU (nav.js drives aria + scroll-lock) ---- */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    inset: 0;
    /* Explicit viewport height: the header's backdrop-filter makes it the
       containing block for this fixed overlay, so an inset:0-derived (auto)
       height would clamp to the ~77px header band instead of the screen.
       A viewport-relative height decouples the overlay from that containing
       block in every state (open AND closing), so it always fills the screen
       with no height-snap mid-transition. 100vh is the universal fallback. */
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-7);
    padding: max(var(--s-9), env(safe-area-inset-top)) var(--gutter) var(--s-9);
    background: color-mix(in oklch, var(--carbon-950) 96%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    /* DEFAULT visible-state contract does NOT apply to an interactive overlay:
       the menu is intentionally closed until nav.js opens it. With no JS the
       toggle never appears at this width? It does — so provide a no-JS path:
       :target / details would be ideal, but the markup is a plain <nav>.
       nav.js sets .is-open; absent JS the menu stays in normal flow (below). */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur-reveal) var(--ease-decisive),
                opacity var(--dur-reveal) var(--ease-decisive),
                visibility 0s linear var(--dur-reveal);
    overflow-y: auto;
  }
  @supports not (backdrop-filter: blur(1px)) {
    .nav-menu { background: var(--carbon-950); }
  }
  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--dur-reveal) var(--ease-decisive),
                opacity var(--dur-reveal) var(--ease-decisive),
                visibility 0s;
  }

  /* Drop the header's backdrop-filter while the menu is open. Nesting the
     menu's own backdrop-filter inside the header's makes the overlay composite
     semi-transparent (the hero bleeds through, hurting legibility); without it
     the 96%-carbon menu reads solid. The overlay's explicit height (above)
     means restoring it on close causes no height-snap. nav.js adds .nav-open. */
  .site-header.nav-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-menu__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-6);
    width: 100%;
  }
  .nav-link { font-size: 1.1rem; }
  .nav-cta { margin-top: var(--s-4); }

  /* No-JS safety net: if nav.js never runs, the menu must not be a permanently
     invisible black hole. html (no .js-ready) -> render the menu in flow. */
  html:not(.js-ready) .nav-menu {
    position: static;
    inset: auto;
    height: auto;                 /* undo the overlay's viewport height in-flow */
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: var(--s-4) 0 0;
    flex-direction: column;
    align-items: flex-start;
  }
  html:not(.js-ready) .site-header__inner { flex-wrap: wrap; }
  html:not(.js-ready) .nav-toggle { display: none; }
}

/* ===========================================================================
   8. CROSSHAIR MARK — flat, sharp, radius-0. NEVER glow on the mark itself.
   =========================================================================== */
.crosshair { color: var(--slate-400); }   /* (strokes use literal #4F5D75 in markup) */
.crosshair--hero {
  position: absolute;
  top: clamp(96px, 14vh, 160px);
  right: var(--gutter);
  z-index: 2;
  opacity: 0.9;
}
@media (max-width: 900px) { .crosshair--hero { display: none; } }

.crosshair--matrix { width: min(320px, 70vw); height: auto; }
.crosshair--closer { width: min(200px, 50vw); height: auto; margin: 0 auto var(--s-7); }
.crosshair--footer { flex: none; }
.crosshair--terminal { width: min(220px, 60vw); height: auto; }

/* ---- dotLottie animated crosshair twins (js/lottie-enhance.js) -------------
   Each overlays its static-SVG counterpart at the same size/position; it ships
   [hidden] and is revealed only once the Lottie paints, at which point the JS
   hides the static svg. Marks are amber+slate -> theme-agnostic (no light vars). */
.cc-anim { display: block; pointer-events: none; }
.cc-anim[hidden] { display: none; }
.cc-anim svg { display: block; width: 100%; height: 100%; }
.cc-anim--hero {
  position: absolute;
  top: clamp(96px, 14vh, 160px);
  right: var(--gutter);
  width: 160px; height: 160px;
  z-index: 2;
  opacity: 0.9;
}
@media (max-width: 900px) { .cc-anim--hero { display: none; } }
.matrix .cc-anim--matrix { width: min(320px, 70vw); aspect-ratio: 1; margin-top: var(--s-7); }

/* The amber node — solid, sharp, NO glow on the SVG mark. */
.crosshair__node { fill: var(--amber-500); }

/* Closer node lock pulse (CSS-only; reduced-motion calmed below).
   view-transition-name:fm-node is inline in markup (closer/contact only). */
.closer__node { transform-box: fill-box; transform-origin: center; }
@keyframes node-lock {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}
html.js-ready .closer__node { animation: node-lock 1600ms var(--ease-instrument) infinite alternate; }

/* ===========================================================================
   9. HERO  (critical first-paint rules live inline in <head>; this enriches.)
   =========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: clip;
  background: radial-gradient(120% 90% at 70% 10%, var(--carbon-850) 0%, var(--carbon-900) 45%, var(--carbon-950) 100%);
  padding-block: var(--s-10) var(--s-9);
}
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
.hero__canvas canvas { width: 100%; height: 100%; display: block; }
.hero__static {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* CSS-static scene is the no-WebGL fallback; canvas covers it when live. */
}
.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);
}
.hero__h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: var(--tracking-h1);
  line-height: var(--lh-h1);
  color: var(--white);
  margin: 0.5em 0 0.4em;
  max-width: 18ch;
  /* view-transition-name:page-title is inline in markup */
  font-variation-settings: 'wght' 500;   /* DEFAULT final weight; JS settles 300->600 */
}
.hero__sub {
  font-size: var(--fs-body);
  color: var(--slate-200);
  max-width: 44ch;
  margin: 0 0 var(--s-7);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(var(--s-7), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 48px;
  border: 1px solid var(--carbon-500);
  border-radius: var(--radius-pill);
}
.scroll-cue__tick {
  width: 3px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--amber-500);
}
html.js-ready .scroll-cue__tick { animation: scroll-tick 1800ms var(--ease-instrument) infinite; }
@keyframes scroll-tick {
  0%   { transform: translateY(-6px); opacity: 0; }
  30%  { opacity: 1; }
  60%  { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(8px); opacity: 0; }
}

/* ---- HUD STRIP — live mono readouts, slate-200/white, tabular-nums ---- */
.hud-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-4) var(--gutter) max(var(--s-4), env(safe-area-inset-bottom));
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-200);
  border-top: 1px solid var(--carbon-600);
  background: linear-gradient(to top, color-mix(in oklch, var(--carbon-950) 80%, transparent), transparent);
}
.hud-cell { white-space: nowrap; }
.hud-cell [data-hud-fps],
.hud-cell [data-hud-scroll],
.hud-cell [data-hud-section],
.hud-cell [data-hud-viewport] { color: var(--white); }
/* Separators are CSS bars, NOT shade glyphs (no font dependency, no tofu). */
.hud-sep {
  width: 1px;
  height: 12px;
  background: var(--carbon-500);
  flex: none;
}
@media (max-width: 600px) {
  .hud-strip { font-size: 0.62rem; gap: var(--s-2); }
  .hud-sep { height: 10px; }
}

/* ===========================================================================
   10. THESIS / FORENSIC MATRIX — sticky scene (desktop), stacked (mobile).
   Crosshair draws on; DEFAULT fully drawn. Q2 node snaps; DEFAULT in Q2.
   =========================================================================== */
.matrix__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: start;
}
.matrix__sticky {
  grid-column: 1 / 7;
  position: sticky;
  top: 96px;
  align-self: start;
}
.matrix .crosshair--matrix { margin-top: var(--s-7); }

.quadrants {
  grid-column: 7 / 13;
  display: grid;
  gap: var(--s-5);
}
.quadrant {
  border: 1px solid var(--carbon-600);
  border-left: 2px solid var(--carbon-500);
  border-radius: var(--radius-md);
  background: var(--carbon-800);
  padding: var(--s-6);
  transition: border-color var(--dur-ui) var(--ease-instrument),
              transform var(--dur-ui) var(--ease-instrument);
}
.quadrant__index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);
  margin-bottom: var(--s-3);
}
.quadrant__title { margin-bottom: var(--s-2); }
.quadrant__body { color: var(--slate-200); font-size: 1rem; }

/* Q2 target gets the amber left-border accent (the one signal in this scene). */
.quadrant--target { border-left-color: var(--amber-500); }
.quadrant--target .quadrant__index { color: var(--white); }

/* :has() quadrant highlight — neutral fallback where :has() is unsupported. */
.quadrants:has(.quadrant:hover) .quadrant:not(:hover),
.quadrants:has(.quadrant:focus-within) .quadrant:not(:focus-within) {
  opacity: 0.62;
}
.quadrant:hover,
.quadrant:focus-within { border-left-color: var(--amber-500); transform: translateX(2px); }

/* DEFAULT (no animation-timeline / no JS): crosshair FULLY DRAWN, node static. */
.crosshair--matrix .crosshair__axis { stroke-dashoffset: 0; }
.crosshair--matrix .crosshair__node[data-node-snap] { opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center; }

/* Mobile: drop the two-column scene to a single stack (heading + crosshair,
   then the quadrants). The 12-col grid alone left both halves far too narrow. */
@media (max-width: 768px) {
  .matrix__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .matrix__sticky { grid-column: 1; position: static; }
  .quadrants { grid-column: 1; }
}

/* ===========================================================================
   11. PIPELINE — DIAGNOSE / PILOT / SCALE.  Pinned panels (desktop) + gauge.
   =========================================================================== */
.pipeline__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--gutter);
  row-gap: var(--s-7);
}
.pipeline__rail {
  grid-column: 1;
  grid-row: 1 / span 3;
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  width: 36px;
  height: clamp(220px, 40vh, 360px);
  padding: var(--s-3) 0;
}
.pipeline__rail::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--carbon-600);
}
/* Vertical gauge fill — DEFAULT visible (full); scroll-timeline animates it. */
.pipeline__gauge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;                          /* DEFAULT: full fill, never empty */
  background: var(--amber-500);
  transform-origin: top;
}
.pipeline__tick {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  color: var(--slate-200);
  background: var(--carbon-850);
  padding: var(--s-1) 0;
}

.pipeline__head { grid-column: 2; grid-row: 1; }
.pipeline__head .eyebrow [data-odometer] { color: var(--white); }

.pipeline__panels {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: var(--s-6);
}
.panel {
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-md);
  background: var(--carbon-800);
  padding: clamp(var(--s-6), 4vw, var(--s-8));
}
.panel__state {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);
  margin-bottom: var(--s-5);
}
.panel__metric {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  margin-bottom: var(--s-4);
}
.data {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  font-weight: 500;
  color: var(--amber-500);             /* numerics READOUT accent (graphical, not label text) */
  line-height: 1;
}
.data__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);
}
.panel__title { margin: var(--s-2) 0; }
.panel__body { color: var(--slate-200); }
.panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.panel__tags li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-200);
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.6em;
}
.pipeline .link-arrow { grid-column: 2; grid-row: 3; }

/* Desktop pinned scroll-snap (dropped on mobile + reduced-motion). */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .pipeline__panels { scroll-snap-type: none; }
  .panel { scroll-snap-align: start; }
}

/* ===========================================================================
   12. PROCESS — horizontal stepper (desktop) / vertical (mobile). Rail fill
   DEFAULTS full/visible.
   =========================================================================== */
.process__inner { position: relative; }
.stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  margin-top: var(--s-8);
}
.step {
  position: relative;
  padding-top: var(--s-7);
}
.step__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--carbon-700);
  border: 2px solid var(--carbon-500);
  border-radius: var(--radius-0);        /* sharp = forensic */
  transform: rotate(45deg);
  z-index: 2;
}
.step:first-child .step__node { border-color: var(--amber-500); background: var(--amber-500); }
.step__code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  font-weight: 500;
  color: var(--slate-200);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.step__title { margin-bottom: var(--s-3); }
.step__body { color: var(--slate-200); font-size: 1rem; }
.step__keep {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-300);
}

/* The rail behind the nodes. */
.stepper__rail {
  position: absolute;
  top: 7px;                              /* centres on the 14px diamond nodes */
  left: 0;
  right: 0;
  height: 2px;
  background: var(--carbon-600);
  z-index: 1;
}
.stepper__fill {
  display: block;
  height: 100%;
  width: 100%;                           /* DEFAULT: full fill, visible */
  background: var(--amber-500);
  transform-origin: left;
}

@media (max-width: 768px) {
  .stepper { grid-template-columns: 1fr; gap: var(--s-7); }
  .step { padding-top: 0; padding-left: var(--s-7); }
  .step__node { top: 4px; }
  .stepper__rail {
    top: 0; bottom: 0; left: 6px;
    width: 2px; height: auto; right: auto;
  }
  .stepper__fill { width: 2px; height: 100%; }
}

/* ===========================================================================
   13. CAPABILITIES — bento grid + 3D pointer-tilt (hover/fine only).
   Column count reflows by viewport (media queries) below.
   =========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-8);
  perspective: 1200px;
}
.module {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 140px;
  padding: var(--s-6);
  background: var(--carbon-800);
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-ui) var(--ease-instrument),
              box-shadow var(--dur-ui) var(--ease-instrument),
              transform 120ms var(--ease-instrument);
  transform-style: preserve-3d;
  will-change: transform;
}
.module--lg { grid-column: span 2; }
.module__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);
}
.module__title { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.module__fits {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--slate-300);
}

/* Focus-within mirrors hover affordance (keyboard parity, no tilt on focus). */
.module:hover,
.module:focus-within {
  border-color: color-mix(in oklch, var(--amber-500) 50%, var(--carbon-600));
  box-shadow: var(--glow-amber-soft);
}
@supports not (color: color-mix(in oklch, red, blue)) {
  .module:hover, .module:focus-within { border-color: var(--amber-600); }
}

/* The cyan 'live' cell — the rare 2nd channel (graphical only). */
.module__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-200);
}
.module__live-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--cyan-400);
  box-shadow: 0 0 8px color-mix(in oklch, var(--cyan-400) 60%, transparent);
}
@supports not (color: color-mix(in oklch, red, blue)) {
  .module__live-dot { box-shadow: 0 0 8px rgba(0, 240, 255, 0.6); }
}
html.js-ready .module__live-dot { animation: live-pulse 1400ms var(--ease-instrument) infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* 3D tilt ONLY under fine pointer + hover capability.
   scenes.js writes --tilt-x/--tilt-y directly as degree values (capped ±6°) on
   the hovered card as inline style; the rest state is the --tilt-x/--tilt-y:0deg
   defaults declared on .module. CSS just consumes them in the transform — the
   property NAMES and units here MUST match what the JS writes. perspective()
   per-element so the 3D rotation reads even without the container's perspective. */
@media (hover: hover) and (pointer: fine) {
  .bento[data-tilt] .module {
    transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  }

  /* Magnetic CTAs — scenes.js writes --tx/--ty (px) on each [data-magnetic]
     and toggles .is-pulled; CSS applies the nudge here (gated to fine+hover).
     transform/opacity only; .btn-primary already declares the transition +
     will-change:transform. Reduced-motion zeroes this below. */
  [data-magnetic] {
    transform: translate(var(--tx, 0), var(--ty, 0));
  }
}

/* Reflow the bento by viewport. (These were @container rules keyed on .bento's
   own container-type — an element can't query its own container, so the
   grid-template-columns collapse never fired and the 4-col grid overflowed on
   mobile. The .module--lg span did fire, since modules ARE container children,
   which is why large tiles looked single-width while the grid stayed 4 wide.) */
@media (max-width: 768px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .module--lg { grid-column: span 2; }
}
@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr; }
  .module--lg { grid-column: span 1; }
}

/* ===========================================================================
   14. DIFFERENCE — Calibrated, not generic. Both columns ALWAYS visible.
   Amber scan-divider DEFAULT fully drawn. Scoped film-grain.
   =========================================================================== */
.difference { overflow: clip; }
.difference__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  background-image: repeating-linear-gradient(
    0deg, transparent 0 2px, rgba(255,255,255,0.5) 2px 3px);
  background-size: 3px 3px;
}
.difference__inner { position: relative; z-index: 1; }

.contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-7);
  align-items: start;
  margin-top: var(--s-8);
}
.contrast__col { display: flex; flex-direction: column; gap: var(--s-5); }
.contrast__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.contrast__col--usual { color: var(--slate-300); }
.contrast__col--usual .contrast__label { color: var(--slate-200); }
.contrast__col--usual ul { display: grid; gap: var(--s-4); }
.contrast__col--usual li { color: var(--slate-300); }

.contrast__col--comcept .contrast__label { color: var(--white); }
.contrast__col--comcept ul { display: grid; gap: var(--s-4); }
.contrast__col--comcept li {
  color: var(--white);
  padding-left: var(--s-5);
  position: relative;
}
.contrast__col--comcept li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--amber-500);
}

/* Vertical amber scan-line divider — DEFAULT fully drawn (scaleY 1). */
.contrast__divider {
  align-self: stretch;
  width: 2px;
  min-height: 100%;
  background: var(--amber-500);
  transform: scaleY(1);                  /* DEFAULT: drawn */
  transform-origin: top;
}
.difference__close {
  margin-top: var(--s-8);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: var(--white);
  max-width: 52ch;
}

@media (max-width: 768px) {
  .contrast { grid-template-columns: 1fr; gap: var(--s-7); }
  .contrast__divider { width: 100%; height: 2px; min-height: 0; justify-self: stretch; transform: scaleX(1); transform-origin: left; }
}

/* ===========================================================================
   15. EVIDENCE — readouts + glass principles panel + scoped scanlines.
   Checklist DEFAULT all ticked.
   =========================================================================== */
.evidence { overflow: clip; }
.evidence__scanlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: repeating-linear-gradient(
    0deg, transparent 0 2px, rgba(0,0,0,0.35) 2px 4px);
}
.evidence__inner { position: relative; z-index: 1; }
.evidence__head { margin-bottom: var(--s-8); }

.evidence__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
.readouts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7) var(--s-6);
}
.readout { display: flex; flex-direction: column; gap: var(--s-2); }
.readout__value {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-data);
  font-weight: 500;
  color: var(--amber-500);
  line-height: 1;
}
.readout__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-200);
  line-height: 1.4;
}

/* ---- GLASS panel ---- */
.glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--carbon-800); }
}
.principles { padding: clamp(var(--s-6), 4vw, var(--s-8)); }
.principles__label {
  color: var(--slate-200);
  margin-bottom: var(--s-5);
}
.checklist { display: grid; gap: var(--s-4); }
.check {
  position: relative;
  padding-left: var(--s-7);
  color: var(--white);
  font-size: 1rem;
}
/* The amber check — DEFAULT fully drawn (visible, opacity 1, full clip). */
.check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  border: 1px solid var(--carbon-500);
}
.check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.28em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--amber-500);
  border-bottom: 2px solid var(--amber-500);
  transform: rotate(-45deg);
  opacity: 1;                            /* DEFAULT: ticked */
}
.principles__body {
  margin-top: var(--s-6);
  color: var(--slate-200);
  font-size: 0.95rem;
}
.lineage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
  align-items: baseline;
}
.lineage__link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-200);
  transition: color var(--dur-ui) var(--ease-instrument);
}
.lineage__link:hover { color: var(--white); }
.lineage__principal {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-300);
}

@media (max-width: 768px) {
  .evidence__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ===========================================================================
   16. CLOSER — Target acquired. Centred, full-bleed carbon-950.
   =========================================================================== */
.closer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.closer__h2 { max-width: 18ch; margin-bottom: var(--s-5); }
.closer__body { color: var(--slate-200); max-width: 52ch; margin-bottom: var(--s-7); }
.closer__readout {
  margin-top: var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate-200);
}

/* ===========================================================================
   17. FOOTER — quiet instrument-grade close.
   =========================================================================== */
.site-footer {
  background: var(--carbon-950);
  border-top: 1px solid var(--carbon-600);
  padding-block: var(--s-9);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
.site-footer__brand { display: grid; gap: var(--s-4); }
.site-footer__name {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.site-footer__nav { display: grid; gap: var(--s-3); align-content: start; }
.site-footer__meta { display: grid; gap: var(--s-3); }
.footer-link {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-200);
  width: fit-content;
  transition: color var(--dur-ui) var(--ease-instrument);
}
.footer-link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-link[aria-current="page"] { color: var(--white); }
.coordinate {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--slate-300);
}
.copyright {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--slate-300);
}
@media (max-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ===========================================================================
   18. CONTACT — INPUT TERMINAL.  Two-pane (desktop) / stacked (mobile).
   =========================================================================== */
.contact-body { background: var(--carbon-900); }
.contact-terminal {
  min-height: 100svh;
  background: radial-gradient(120% 90% at 80% 0%, var(--carbon-850) 0%, var(--carbon-900) 45%, var(--carbon-950) 100%);
  padding-block: var(--s-9);
}
.contact-terminal__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-8);
  align-items: start;
}

/* ---- LEFT pane: sticky forensic-grid uplink (the SOLE fm-node here) ---- */
.terminal-panel {
  position: sticky;
  top: 104px;
  align-self: start;
  position: relative;
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-md);
  background: var(--carbon-850);
  overflow: clip;
}
.terminal-panel__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(var(--carbon-700) 1px, transparent 1px),
    linear-gradient(90deg, var(--carbon-700) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
}
.terminal-panel > *:not(.terminal-panel__grid) { position: relative; z-index: 1; }
.terminal-panel .contact-eyebrow { margin-bottom: var(--s-6); }
.crosshair--terminal { margin: 0 0 var(--s-7); }

.uplink {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-6) 0;
  font-family: var(--font-mono);
}
.uplink__row {
  display: grid;
  grid-template-columns: 8ch 1fr;
  gap: var(--s-4);
  align-items: baseline;
}
.uplink__key {
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--slate-300);
}
.uplink__val {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--white);
}
.terminal-panel__blurb { color: var(--slate-200); margin-bottom: var(--s-4); }
.terminal-panel__reassure { color: var(--slate-300); font-size: 0.9rem; margin-bottom: var(--s-6); }

/* ---- RIGHT pane: glass form instrument ---- */
.terminal-form { padding: clamp(var(--s-6), 4vw, var(--s-8)); }
.terminal-form__head { margin-bottom: var(--s-8); }
.contact-h1 {
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: var(--tracking-h1);
  line-height: 1;
  margin: 0.3em 0 0.4em;
  /* view-transition-name:page-title is inline in markup */
}
.terminal-form__sub { color: var(--slate-200); }

/* ---- FORM ---- */
.form { display: grid; gap: var(--s-7); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.field { position: relative; }
.field__input {
  width: 100%;
  background: var(--carbon-800);
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-sm);
  color: var(--white);
  padding: 1.4em 1em 0.6em;
  min-height: 56px;
  transition: border-color var(--dur-ui) var(--ease-instrument);
}
.field__textarea { resize: vertical; min-height: 132px; padding-top: 1.8em; }
.field__input::placeholder { color: transparent; }

/* Floating mono label (slate-200). Floats up when filled or focused. */
.field__label {
  position: absolute;
  left: 1em;
  top: 1.1em;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-200);
  pointer-events: none;
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-instrument),
              color var(--dur-ui) var(--ease-instrument);
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-0.7em) scale(0.72);
  color: var(--slate-300);
}
.field__input:focus + .field__label { color: var(--white); }
.field__opt { color: var(--slate-300); text-transform: none; letter-spacing: 0; }

/* Amber focus-underline that 'charges' left->right on :focus.
   DEFAULT (no focus) scaleX 0; this is an interactive state, not a scroll
   reveal, so default-collapsed is correct. */
.field__underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--amber-500);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.field__input:focus ~ .field__underline {
  transform: scaleX(1);
  transition: transform 360ms var(--ease-decisive);
}
.field__input:focus { border-color: var(--carbon-500); }

/* Inline errors (aria-describedby). */
.field__error {
  min-height: 0;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--amber-400);
}
/* JS adds .is-active to the slot when a message is present — slight emphasis
   so the inline error reads as live, not residual layout. */
.field__error.is-active { font-weight: 500; }
.field.is-invalid .field__input { border-color: var(--amber-500); }

/* ---- SERVICE CHIPS — real checkboxes; amber on :checked; DISTINCT focus ring. */
.chips { border: 0; padding: 0; margin: 0; }
.chips__legend {
  padding: 0;
  margin-bottom: var(--s-4);
}
.chips__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.chip { display: inline-flex; }
.chip__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.chip__face {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                      /* touch target */
  padding: 0.6em 1.05em;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-200);
  background: var(--carbon-800);
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease-instrument),
              border-color var(--dur-ui) var(--ease-instrument),
              background var(--dur-ui) var(--ease-instrument);
}
.chip__face:hover { border-color: var(--carbon-500); color: var(--white); }

/* :checked = amber FILL (selection signal). */
.chip__input:checked + .chip__face {
  background: var(--amber-500);
  border-color: var(--amber-500);
  color: var(--carbon-950);
}
/* :focus-visible = amber OUTLINE ring, visually DISTINCT from the filled
   checked state, so keyboard users can tell focus from selection. */
.chip__input:focus-visible + .chip__face {
  outline: 2px solid var(--amber-500);
  outline-offset: 3px;
}

/* ---- SUBMIT ---- */
.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
.form__submit { position: relative; }
.form__loader { display: none; }
/* Transmitting state (contact-form-comcept.js adds .is-transmitting). */
.form__submit.is-transmitting { pointer-events: none; opacity: 0.85; }
.form__submit.is-transmitting .form__submit-label { opacity: 0.6; }
.form__submit.is-transmitting .form__loader { display: inline-block; }
.form__loader-node { transform-box: fill-box; transform-origin: center; }
html.js-ready .form__submit.is-transmitting .form__loader-node {
  animation: transmit 900ms linear infinite;
}
@keyframes transmit {
  0%   { opacity: 0.3; transform: scale(0.7); }
  50%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 0.3; transform: scale(0.7); }
}
.form__reassure { color: var(--slate-300); font-size: 0.85rem; margin: 0; }

/* ---- STATUS REGION ---- */
.form__status {
  min-height: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.form__status:empty { display: none; }
.form__status.is-success {
  color: var(--cyan-400);                /* optional 'live' success flash (graphical) */
  border-left: 2px solid var(--amber-500);
  padding-left: var(--s-4);
  margin-top: var(--s-2);
}
/* CSS-drawn confirmation tick — replaces the literal U+2713 the success
   readout used to carry. Neither subset face (nor their source typefaces)
   ships a check-mark glyph, so rendering it as a glyph risked tofu. This is
   the same amber border-rotate idiom as .check; DEFAULT fully drawn (no JS
   dependency), and it inherits the calm path under prefers-reduced-motion. */
.form__status.is-success::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 4px;
  margin-left: 0.55em;
  vertical-align: 0.18em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.form__status.is-error {
  color: var(--amber-400);
  border-left: 2px solid var(--amber-500);
  padding-left: var(--s-4);
  margin-top: var(--s-2);
}
/* Node fires on submit success (single pulse) — contact-form-comcept.js adds
   .is-fired to the [data-node-fire] node and self-clears it on animationend
   (and leaves it as a static marker under reduced motion). CSS class and JS
   class MUST stay identical: .terminal__node.is-fired. */
.terminal__node { transform-box: fill-box; transform-origin: center; }
html.js-ready .terminal__node.is-fired { animation: node-fire 700ms var(--ease-decisive) 1; }
@keyframes node-fire {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}

@media (max-width: 860px) {
  .contact-terminal__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .terminal-panel { position: static; }
}

/* ===========================================================================
   19. SCROLL-DRIVEN ENHANCEMENTS — applied ONLY where animation-timeline is
   supported (Chromium). Every initial hidden/clipped/empty state lives HERE,
   so the default (Firefox/Safari/no-JS) stays fully visible.
   =========================================================================== */
@supports (animation-timeline: view()) {

  /* --- Hero H1: clip-mask reveal + variable-weight settle (also gated to JS). */
  html.js-ready .hero__h1 {
    animation: h1-settle 700ms var(--ease-instrument) both;
  }
  @keyframes h1-settle {
    from { clip-path: inset(0 0 100% 0); font-variation-settings: 'wght' 300; }
    to   { clip-path: inset(0 0 0 0);    font-variation-settings: 'wght' 600; }
  }

  /* --- Thesis crosshair draw-on (axes centre-out). DEFAULT 0 above; init here. */
  .crosshair--matrix .crosshair__axis {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;               /* INITIAL: undrawn — only under @supports */
    animation: draw-axis linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  @keyframes draw-axis { to { stroke-dashoffset: 0; } }

  /* --- Q2 node snap-in (scale .6->1 + opacity, once). */
  .crosshair--matrix .crosshair__node[data-node-snap] {
    opacity: 0;
    transform: scale(0.6);
    animation: node-snap var(--dur-snap) var(--ease-decisive) both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
  }
  @keyframes node-snap { to { opacity: 1; transform: scale(1); } }

  /* --- Quadrant cards: clip-path reveal one-by-one. */
  .quadrant {
    clip-path: inset(0 0 100% 0);        /* INITIAL: clipped */
    animation: card-reveal var(--dur-reveal) var(--ease-decisive) both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes card-reveal { to { clip-path: inset(0 0 0 0); } }

  /* --- Pipeline vertical gauge fill. DEFAULT full above; init empty here. */
  .pipeline__gauge {
    transform: translateX(-50%) scaleY(0);  /* INITIAL: empty */
    animation: gauge-fill linear both;
    animation-timeline: scroll(nearest);
    animation-range: 0% 60%;
  }
  @keyframes gauge-fill { to { transform: translateX(-50%) scaleY(1); } }

  /* --- Process rail fill. DEFAULT full above; init empty here. */
  .stepper__fill {
    transform: scaleX(0);                /* INITIAL: empty (horizontal desktop) */
    animation: rail-fill linear both;
    animation-timeline: view(--rail);
    animation-range: entry 10% cover 70%;
  }
  .stepper { view-timeline: --rail; }
  @keyframes rail-fill { to { transform: scaleX(1); } }
  @media (max-width: 768px) {
    .stepper__fill {
      transform: scaleY(0);
      animation-name: rail-fill-v;
    }
    @keyframes rail-fill-v { to { transform: scaleY(1); } }
  }

  /* --- Difference scan-divider wipe. DEFAULT drawn above; init collapsed here. */
  .contrast__divider {
    transform: scaleY(0);                /* INITIAL: undrawn */
    animation: divider-wipe linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 55%;
  }
  @keyframes divider-wipe { to { transform: scaleY(1); } }
  @media (max-width: 768px) {
    .contrast__divider { transform: scaleX(0); animation-name: divider-wipe-h; }
    @keyframes divider-wipe-h { to { transform: scaleX(1); } }
  }

  /* --- Emphasis underline draw-on. */
  .emph::after {
    transform: scaleX(0);                /* INITIAL: undrawn */
    animation: emph-draw var(--dur-reveal) var(--ease-decisive) both;
    animation-timeline: view();
    animation-range: entry 30% cover 60%;
  }
  @keyframes emph-draw { to { transform: scaleX(1); } }

  /* --- Evidence checklist tick draw-on. DEFAULT ticked above; init hidden here. */
  .check::after {
    opacity: 0;                          /* INITIAL: unticked */
    transform: rotate(-45deg) scale(0.4);
    animation: tick-in var(--dur-ui) var(--ease-decisive) both;
    animation-timeline: view();
    animation-range: entry 10% entry 80%;
  }
  @keyframes tick-in { to { opacity: 1; transform: rotate(-45deg) scale(1); } }

  /* --- Generic section content soft-reveal for headings/eyebrows. */
  html.js-ready .h2,
  html.js-ready .eyebrow {
    animation: soft-rise var(--dur-reveal) var(--ease-instrument) both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  @keyframes soft-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ===========================================================================
   20. VIEW TRANSITIONS — cross-document morph (/ <-> /contact).
   External (here) + @supports-gated so unsupported engines hard-cut cleanly.
   Each VT name appears on EXACTLY ONE element per document (inline in markup).
   =========================================================================== */
@supports (view-transition-name: x) {
  @view-transition { navigation: auto; }

  ::view-transition-group(fm-node),
  ::view-transition-group(page-title),
  ::view-transition-group(wordmark) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* The amber node morph should feel like a precise instrument lock. */
  ::view-transition-old(fm-node),
  ::view-transition-new(fm-node) { mix-blend-mode: normal; }
}

/* ===========================================================================
   21. CONSOLIDATED REDUCED-MOTION — the single calm path. A static instrument
   that is still fully meaningful. Belt-and-braces for the whole site.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {

  /* Kill smooth scroll + all transitions/animations to instant. */
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Every scroll-driven element -> final visible state. */
  .crosshair--matrix .crosshair__axis { stroke-dashoffset: 0 !important; }
  .crosshair--matrix .crosshair__node[data-node-snap] { opacity: 1 !important; transform: scale(1) !important; }
  .quadrant { clip-path: inset(0 0 0 0) !important; }
  .pipeline__gauge { transform: translateX(-50%) scaleY(1) !important; }
  .stepper__fill { transform: none !important; width: 100%; height: 100%; }
  .contrast__divider { transform: none !important; }
  .emph::after { transform: scaleX(1) !important; }
  .check::after { opacity: 1 !important; transform: rotate(-45deg) !important; }
  .hero__h1 { font-variation-settings: 'wght' 500 !important; clip-path: none !important; }
  .h2, .eyebrow { opacity: 1 !important; transform: none !important; }

  /* Frozen HUD (JS also skips rAF); no live tick, no scroll-cue motion. */
  .scroll-cue__tick { animation: none !important; }
  .closer__node,
  .module__live-dot,
  .terminal__node { animation: none !important; }

  /* No tilt / magnet residue. */
  .bento[data-tilt] .module,
  [data-magnetic] { transform: none !important; }

  /* Form charge -> instant. */
  .field__input:focus ~ .field__underline { transition: none !important; }

  /* Mobile menu still functions (transform-based), just without easing. */
  .nav-menu { transition: none !important; }

  /* View Transitions UA-skips; belt-and-braces. */
  ::view-transition-group(*) { animation: none !important; }
}

/* ===========================================================================
   22. PRINT — quiet, ink-friendly.
   =========================================================================== */
@media print {
  .hero__canvas, .hero__static, .hud-strip, .scroll-cue,
  .difference__grain, .evidence__scanlines, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ===========================================================================
   23. LIGHT THEME (additive)  —  "The Forensic Instrument, on paper."
   ----------------------------------------------------------------------------
   PURPOSE
   The DARK skin above is the brand default and is NOT touched. This section is
   a pure OVERRIDE LAYER. Nothing here changes a dark rule; everything is gated
   behind a light selector and overrides only what must change to read AA on
   paper. Remove this entire block and the site is byte-for-byte the dark site.

   ACTIVATION CONTRACT (explicit choice beats OS preference)
     • Explicit toggle  -> JS sets <html data-theme="light"> (persist localStorage)
                           or <html data-theme="dark"> to force-stay dark.
     • No explicit choice -> follow the OS via prefers-color-scheme: light, but
                           ONLY when neither data-theme="light" nor ="dark" is
                           present (so a user who chose dark is never overridden).
   Both paths funnel into ONE shared rule list via the LIGHT-SELECTORS below.
   (data-theme lives on <html> = :root.)

   STRATEGY
   Components consume RAW tokens (--carbon-*, --slate-*, --white, --amber-500…).
   We REMAP the raw tokens to paper values under the light selector, which flips
   ~all body/section/card/footer surfaces + text in one move. Then we add the
   few surgical overrides token-remapping can't express correctly:
     - the HERO + its descendants are RE-PINNED to dark (it must stay a dark
       instrument viewport in BOTH themes);
     - the NAV stays dark-glass at the top and only goes light-glass when
       .is-condensed (scrolled), so it reads over the dark hero correctly;
     - amber-as-TEXT/links/underlines darken to #8A6200 (amber-500 fails on
       paper ~1.7:1); amber-as-FILL stays #FFB800 with carbon ink;
     - the cyan live-dot -> #00A0AD; glows softened to a crisp 1px ring;
     - focus ring -> #E0A100 for contrast on paper.

   LIGHT PALETTE (machine targets, all AA on the stated bg)
     paper           #F4F5F7  page bg
     surface (alt)   #FFFFFF  alt sections + cards/panels/inputs
     raised          #EDEFF3  secondary/raised surface
     footer          #E8EBF0
     glass (cond.)   rgba(255,255,255,0.72) + 1px #D5DAE3
     ink (primary)   #0B0C10  ~17:1 on paper
     muted text      #4F5D75  ~7:1 on paper
     faint text      #5B6678
     hairline        #D5DAE3
     grid line       #C3C9D6
     amber text/link #8A6200  (AA on paper; never amber-500 as text)
     amber fill      #FFB800  + carbon ink #07080B (~10.7:1, both themes)
     cyan live-dot   #00A0AD
     focus ring      #E0A100
   =========================================================================== */

/* --- (a) RAW-TOKEN REMAP -------------------------------------------------- */
/* Explicit light. */
:root[data-theme="light"] {
  /* Carbon ramp -> paper planes. Note: carbon-950/-900 used as INK on a few
     fills (btn ink, chip-checked ink) must stay dark — handled in (e). Here
     they become page/surface planes for the bulk of components. */
  --carbon-950: #FFFFFF;   /* was deepest plane -> now alt/closer surface (light) */
  --carbon-900: #F4F5F7;   /* page base -> paper                                  */
  --carbon-850: #FFFFFF;   /* alt section bg -> white                             */
  --carbon-800: #FFFFFF;   /* raised glass panels / cards / inputs -> white       */
  --carbon-700: #C3C9D6;   /* grid lines (terminal panel grid)                    */
  --carbon-600: #D5DAE3;   /* hairline borders                                    */
  --carbon-500: #C3C9D6;   /* secondary hairline / scroll-cue ring                */
  --carbon-400: #C3C9D6;   /* structure/grid lines only                           */

  /* Slate text ramp -> paper-legible muted/faint text + hairlines. */
  --slate-400: #C3C9D6;   /* grid/hairline GRAPHICAL only                         */
  --slate-300: #5B6678;   /* faint text floor                                     */
  --slate-200: #4F5D75;   /* muted / mono labels (~7:1 on paper)                  */

  /* Text. white -> ink (primary text/headings); paper var unused for bg here. */
  --white: #0B0C10;       /* primary text/headings -> carbon ink (~17:1)         */

  /* Amber FILL stays the signal; amber as TEXT is overridden per-selector in (d). */
  --amber-500: #FFB800;
  --amber-400: #FFC629;
  --amber-300: #FFD152;
  --amber-600: #E0A100;

  /* Cyan live-dot darkened for visibility on paper (graphical). */
  --cyan-400: #00A0AD;
  --cyan-500: #00A0AD;

  /* Carbon ink for amber fills — keep TRUE dark so carbon-on-amber stays ~10.7:1
     even though --carbon-950/-900 were repurposed as light planes above. */
  --ink-on-amber: #07080B;

  /* Glass (condensed nav / form): light frost + light hairline. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: 1px solid #D5DAE3;

  /* Softened glows: drop the muddy amber halo, keep a crisp 1px amber ring. */
  --glow-amber:
    0 0 0 1px color-mix(in oklch, var(--amber-500) 70%, transparent);
  --glow-amber-soft:
    0 0 0 1px color-mix(in oklch, var(--amber-500) 55%, transparent);

  /* Focus ring on paper: 2px ring with a paper gap, amber-600 for contrast. */
  --focus-ring: 0 0 0 2px #F4F5F7, 0 0 0 4px #E0A100;

  color-scheme: light;
}

/* OS-default light: apply the SAME remap when the user hasn't chosen explicitly
   (no data-theme at all). data-theme="dark" or ="light" both opt OUT of this. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --carbon-950: #FFFFFF;
    --carbon-900: #F4F5F7;
    --carbon-850: #FFFFFF;
    --carbon-800: #FFFFFF;
    --carbon-700: #C3C9D6;
    --carbon-600: #D5DAE3;
    --carbon-500: #C3C9D6;
    --carbon-400: #C3C9D6;
    --slate-400: #C3C9D6;
    --slate-300: #5B6678;
    --slate-200: #4F5D75;
    --white: #0B0C10;
    --amber-500: #FFB800;
    --amber-400: #FFC629;
    --amber-300: #FFD152;
    --amber-600: #E0A100;
    --cyan-400: #00A0AD;
    --cyan-500: #00A0AD;
    --ink-on-amber: #07080B;
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: 1px solid #D5DAE3;
    --glow-amber:
      0 0 0 1px color-mix(in oklch, var(--amber-500) 70%, transparent);
    --glow-amber-soft:
      0 0 0 1px color-mix(in oklch, var(--amber-500) 55%, transparent);
    --focus-ring: 0 0 0 2px #F4F5F7, 0 0 0 4px #E0A100;
    color-scheme: light;
  }
}

/* color-mix fallback for the softened light glows (older engines). */
@supports not (color: color-mix(in oklch, red, blue)) {
  :root[data-theme="light"] {
    --glow-amber: 0 0 0 1px rgba(255, 184, 0, 0.7);
    --glow-amber-soft: 0 0 0 1px rgba(255, 184, 0, 0.55);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
      --glow-amber: 0 0 0 1px rgba(255, 184, 0, 0.7);
      --glow-amber-soft: 0 0 0 1px rgba(255, 184, 0, 0.55);
    }
  }
}

/* ----------------------------------------------------------------------------
   LIGHT SELECTOR GROUPS — one alias per concern so the override blocks below
   stay DRY across the explicit + OS-default paths. CSS can't store selector
   lists in a variable, so each override block lists BOTH light contexts.
   Convention used below:
     L  = :root[data-theme="light"]
     O  = @media (prefers-color-scheme: light) :root:not([data-theme]…)
   ---------------------------------------------------------------------------- */

/* --- (b) SURFACE / SECTION FINE-TUNING ----------------------------------- */
/* The raw remap above sends carbon-850/-800/-950 to #FFFFFF. A couple of
   planes want the RAISED #EDEFF3 / FOOTER #E8EBF0 tones instead of flat white,
   so the page reads as layered paper, not one slab. Section + body keep #F4F5F7
   from --carbon-900. */
:root[data-theme="light"] .pipeline,
:root[data-theme="light"] .capabilities,
:root[data-theme="light"] .evidence {
  background: #FFFFFF;                    /* alt instrument planes -> white  */
}
:root[data-theme="light"] .closer {
  background: #EDEFF3;                    /* raised plane (was carbon-950)   */
}
:root[data-theme="light"] .site-footer {
  background: #E8EBF0;                    /* baseplate -> light footer       */
  border-top-color: #D5DAE3;
}
:root[data-theme="light"] .terminal-panel {
  background: #EDEFF3;                    /* left uplink pane -> raised paper */
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .pipeline,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .capabilities,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .evidence {
    background: #FFFFFF;
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .closer {
    background: #EDEFF3;
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .site-footer {
    background: #E8EBF0;
    border-top-color: #D5DAE3;
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .terminal-panel {
    background: #EDEFF3;
  }
}

/* Contact body + contact-terminal radial gradient -> calm paper wash. */
:root[data-theme="light"] .contact-body { background: #F4F5F7; }
:root[data-theme="light"] .contact-terminal {
  background: radial-gradient(120% 90% at 80% 0%, #FFFFFF 0%, #F4F5F7 45%, #EDEFF3 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .contact-body { background: #F4F5F7; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .contact-terminal {
    background: radial-gradient(120% 90% at 80% 0%, #FFFFFF 0%, #F4F5F7 45%, #EDEFF3 100%);
  }
}

/* Quadrant cards: keep their 2px left accent reading; non-target left border
   was carbon-500 (now grid grey) which is fine. Skip-link stays high-contrast. */
:root[data-theme="light"] .skip-link {
  background: #FFFFFF;
  color: #0B0C10;
  border-color: #E0A100;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .skip-link {
    background: #FFFFFF;
    color: #0B0C10;
    border-color: #E0A100;
  }
}

/* Scoped texture overlays were tuned for dark; calm them on paper so they
   don't read as dirt. */
:root[data-theme="light"] .difference__grain { opacity: 0.04; mix-blend-mode: multiply; }
:root[data-theme="light"] .evidence__scanlines {
  opacity: 0.06;
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(11,12,16,0.18) 2px 4px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .difference__grain { opacity: 0.04; mix-blend-mode: multiply; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .evidence__scanlines {
    opacity: 0.06;
    background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(11,12,16,0.18) 2px 4px);
  }
}

/* --- (c) AMBER FILLS — re-assert carbon ink on amber (both themes ~10.7:1) - */
/* The raw remap repurposed --carbon-950/-900 as light planes, so any component
   that printed carbon-on-amber via those vars would now print paper-on-amber
   (invisible). Re-pin the ink on every amber FILL to --ink-on-amber (#07080B). */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .chip__input:checked + .chip__face,
:root[data-theme="light"] .nav-cta {
  color: var(--ink-on-amber);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .btn-primary,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .chip__input:checked + .chip__face,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .nav-cta {
    color: var(--ink-on-amber);
  }
}

/* --- (d) AMBER AS TEXT / LINKS / READOUTS -> #8A6200 (AA on paper) -------- */
/* amber-500 as TEXT on paper is ~1.7:1 (fails). These selectors render amber
   numerals/links/inline-errors AS TEXT, so they darken to amber-800 #8A6200.
   (The amber FILLS in (c) are untouched and keep #FFB800.) */
:root[data-theme="light"] .data,
:root[data-theme="light"] .readout__value,
:root[data-theme="light"] .field__error {
  color: #8A6200;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .data,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .readout__value,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .field__error {
    color: #8A6200;
  }
}

/* Form success flash reads as cyan TEXT -> use the darkened cyan for AA. */
:root[data-theme="light"] .form__status.is-success { color: #00A0AD; }
:root[data-theme="light"] .form__status.is-error { color: #8A6200; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .form__status.is-success { color: #00A0AD; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .form__status.is-error { color: #8A6200; }
}

/* --- (e) NAV — fully light in light mode. ----------------------------------
   The base .site-header / .nav-link / .nav-toggle / .theme-toggle rules are all
   token-driven, so the raw remap already lights the nav glass (carbon-900/-950
   -> paper/white), inks the links (slate-200 -> #4F5D75, white -> ink) and darks
   the toggle bars; the full-bleed mobile overlay (carbon-950 96%) goes white too.
   The amber-CTA ink is handled in (c). The ONE thing the remap can't reach is the
   wordmark, whose letterforms are a literal #FFFFFF fill (invisible on paper) and
   whose crosshair strokes are #4F5D75 — darken them to ink, in BOTH light
   contexts. (Amber node <rect fill="#FFB800"> stays the signal, untouched.) */
:root[data-theme="light"] .wordmark__svg g[fill="#FFFFFF"] { fill: #0B0C10; }
:root[data-theme="light"] .wordmark__svg path[stroke="#4F5D75"],
:root[data-theme="light"] .wordmark__svg line[stroke="#4F5D75"] { stroke: #5B6678; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .wordmark__svg g[fill="#FFFFFF"] { fill: #0B0C10; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .wordmark__svg path[stroke="#4F5D75"],
  :root:not([data-theme="dark"]):not([data-theme="light"]) .wordmark__svg line[stroke="#4F5D75"] { stroke: #5B6678; }
}

/* --- (f) HERO — fully light in light mode. ---------------------------------
   .hero background + h1/eyebrow/sub/scroll-cue/btn-ghost are all token-driven
   (carbon/white/slate vars), so the raw remap lights them automatically; the
   amber-CTA ink + amber-as-text are handled globally in (c)/(d). The only piece
   the remap can't reach is the WebGL oscilloscope: it's an ADDITIVE amber-on-
   dark shader (light grid/beam added over a dark base, opaque output) that can't
   be recoloured for paper, so in light mode hide its canvas and show the static
   SVG scene instead — with the amber trace darkened so it reads on paper. */
:root[data-theme="light"] .hero__canvas { display: none; }
:root[data-theme="light"] .hero__static { display: block !important; }
:root[data-theme="light"] .hero__static [stroke="#FFB800"] { stroke: #E0A100; opacity: 0.5; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero__canvas { display: none; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero__static { display: block !important; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero__static [stroke="#FFB800"] { stroke: #E0A100; opacity: 0.5; }
}

/* --- (g) THEME TRANSITION — short, calm color fade; OFF under reduced-motion */
/* A theme flip animates only bg/border/color so it doesn't flash. Scoped to the
   surfaces that change; the hero is excluded by selector. Reduced-motion users
   get an instant swap (the global reduce block already zeroes transitions, and
   this is belt-and-braces). */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="light"] body,
  :root[data-theme="light"] .pipeline,
  :root[data-theme="light"] .capabilities,
  :root[data-theme="light"] .evidence,
  :root[data-theme="light"] .closer,
  :root[data-theme="light"] .site-footer,
  :root[data-theme="light"] .quadrant,
  :root[data-theme="light"] .panel,
  :root[data-theme="light"] .module,
  :root[data-theme="light"] .glass,
  :root[data-theme="light"] .field__input,
  :root[data-theme="light"] .chip__face,
  :root[data-theme="light"] .terminal-panel {
    transition: background-color var(--dur-ui) var(--ease-instrument),
                border-color var(--dur-ui) var(--ease-instrument),
                color var(--dur-ui) var(--ease-instrument);
  }
}

/* --- (h) AMBER-AS-UNDERLINE — thin amber rules darken on paper ------------- */
/* The nav-link underline + emphasis underline are 2px amber accent rules.
   amber-500 reads muddy on paper; darken to amber-800 #8A6200 so they stay
   crisp + on-discipline (amber FILLS elsewhere are untouched). */
:root[data-theme="light"] .nav-link::after,
:root[data-theme="light"] .emph::after { background: #8A6200; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .nav-link::after,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .emph::after { background: #8A6200; }
}
/* (The nav is light over paper in every state now, so the underline keeps the
   paper-darkened #8A6200 above throughout — no bright-amber-over-dark exception.) */

/* ===========================================================================
   24. THEME TOGGLE BUTTON — nav control, just before the CTA. 44x44 tap target,
   amber :focus-visible ring. Square hairline chrome to match the .nav-toggle.
   Sun shows in DARK (click -> light); Moon shows in LIGHT (click -> dark).
   Token-driven so it recolours with the nav: light-on-dark at the top, and ink
   once the nav is condensed over paper (handled by the nav rules in section e).
   =========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--slate-200);
  background: transparent;
  border: 1px solid var(--carbon-600);
  border-radius: var(--radius-sm);
  transition: color var(--dur-ui) var(--ease-instrument),
              border-color var(--dur-ui) var(--ease-instrument),
              background var(--dur-ui) var(--ease-instrument);
}
.theme-toggle:hover { color: var(--white); border-color: var(--carbon-500); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
}
.theme-toggle__icon { display: block; }
/* Default = DARK: show SUN, hide MOON. */
.theme-toggle__icon--moon { display: none; }
/* LIGHT (explicit OR OS-default with no explicit attr): show MOON, hide SUN. */
:root[data-theme="light"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle__icon--sun { display: none; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-toggle__icon--moon { display: block; }
}

/* The theme-toggle is token-driven (slate-200 + carbon-600 hairline), so it inks
   to #4F5D75 on the light nav and white overlay automatically — no light-on-dark
   re-pin needed now that the nav is light in every state. */