/* ============================================================================
   AMEOT — dark technical system
   ----------------------------------------------------------------------------
   Structure and surface craft modelled on the Finite State reference; voice,
   palette and content are AMEOT's. The load-bearing decisions, each measured
   off the reference and re-tuned here:

     · a cool-neutral dark ramp where each tier is ~10 luminance points apart
       and every value is blue-shifted (B > R). Grey ramps read muddy.
     · a 256px noise tile at ~22% on every elevated surface. Without it a
       10-point step bands and reads flat; with it, it reads as material.
     · depth = 1px light edge + backdrop blur + an INSET glow. No drop shadows
       on cards; the only real shadow is on genuinely floating panels.
     · tracking inverts: -0.055em on display, +0.05em on uppercase micro-type.
       Body stays at exactly 0.
     · line-height is three fixed values — 1.10 display, 1.30 sub-head,
       1.50 body. Never interpolated.
     · radius is binary: 999px for anything you click, 12px for anything that
       contains, 0px for editorial cards.
     · the accent is spent on LIGHT, never on area.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  /* ground ladder — cool-neutral, ~10 points a tier */
  --ground:      #0e1013;
  --ground-deep: #08090b;
  --surface:     #181b1f;
  --surface-2:   #1f2327;
  --line:        #2c3035;
  --line-soft:   #ffffff14;
  --line-glass:  #ffffff4d;

  /* text */
  --fg:          #fafafb;
  --text:        #e4e6e8;
  --text-2:      #b3b8bd;
  --text-3:      #848a90;   /* raised from #7c8288: at 13-14px on the card
                              surface it measured 4.45:1 — just under AA.
                              Now 4.95 on card, 5.46 on ground. */

  /* accent — AMEOT's established sky blue, carried from earlier builds */
  --gov:         #5fa8ff;
  --gov-soft:    #5fa8ff29;
  --gov-glow:    rgba(95,168,255,.40);
  --gov-rim:     rgba(95,168,255,.16);

  /* the single warm value, reserved for the uncontained interval */
  --exposed:     #e0674a;

  /* type */
  --display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-face: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;

  /* measure */
  --container: 1440px;
  --gutter: 16px;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);   /* expo-out — the reveal curve */
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --t-ui: 150ms;
  --t-media: 300ms;
  --t-wash: 400ms;

  /* generated at runtime by main.js */
  --noise: none;
}

@media (min-width: 640px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--text-face);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;              /* body is never tracked */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gov-soft); color: var(--fg); }

/* ring AND glow, the way the reference does it */
:focus-visible {
  outline: 2px solid var(--gov);
  outline-offset: 2px;
  box-shadow: 0 0 20px rgba(95,168,255,.6);
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  padding: 10px 18px; background: var(--fg); color: var(--ground);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 999px;
  transform: translateY(-200%); transition: transform var(--t-ui) var(--ease-ui);
}
.skip-link:focus-visible { transform: none; }

/* ---------------------------------------------------------------- type kit */
/* Three line-heights, no interpolation. Tracking crosses zero at ~18px. */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  color: var(--fg);
  line-height: 1.10;
  font-weight: 600;
  text-wrap: balance;
}

.d1 { font-size: clamp(46px, 5vw, 72px); letter-spacing: -0.055em; }
.d2 { font-size: clamp(38px, 3.9vw, 54px); letter-spacing: -0.05em; }
.d3 { font-size: clamp(28px, 2.4vw, 34px); letter-spacing: -0.04em; line-height: 1.15; }
.d4 {
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: -0.017em;
  line-height: 1.30;
  font-weight: 500;
}

.lede {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.50;
  color: var(--text-2);
  font-weight: 400;
  text-wrap: pretty;
}

.body { font-size: 16px; line-height: 1.50; color: var(--text-2); text-wrap: pretty; }
.body-s { font-size: 14px; line-height: 1.50; color: var(--text-3); text-wrap: pretty; }

/* The inversion: the only positive tracking in the system. */
.label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.label--gov { color: var(--gov); }

/* light -> grey clipped headline gradient */
.grad {
  background-image: linear-gradient(92deg, var(--fg) 0%, #8b9096 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ------------------------------------------------------------------ layout */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section padding runs ~1.6-1.8x the headline it contains. */
.sec { padding-block: 64px; position: relative; }
@media (min-width: 768px) { .sec { padding-block: 96px; } }

.sec--lg { padding-block: 80px; }
@media (min-width: 768px) { .sec--lg { padding-block: 112px; } }

/* deliberate asymmetry — bands push apart rather than sit evenly */
.sec--open  { padding-block: 64px 24px; }
@media (min-width: 768px) { .sec--open { padding-block: 80px 20px; } }

.sec--deep { background: var(--ground-deep); }

/* full-bleed hairline that escapes the container */
.rule-bleed {
  height: 1px; background: var(--line);
  width: 100vw; position: relative; left: calc((100vw - 100%) / -2);
}

/* the reference's signature split: ~30/70, tight gap */
.split {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 30.3%) minmax(0, 1fr); gap: 48px; }
}

/* headline + CTA rows align on the LAST BASELINE, not centred */
.row-end {
  display: flex; flex-direction: column; gap: 24px;
}
@media (min-width: 1024px) {
  .row-end { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
}

/* --------------------------------------------------------------- surfaces */
/* flat colour + tiled noise. The noise is what stops a 10-point step banding. */
.surface {
  background-color: var(--surface);
  background-image: var(--noise);
  background-repeat: repeat;
  background-size: 256px 256px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* depth without a drop shadow: light edge + blur + inset glow */
.glass {
  background: rgba(14,16,19,.56);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  border: 0.8px solid var(--line-glass);
  border-radius: 999px;
}

/* genuinely floating panels are the ONLY things that get a real shadow */
.raised { box-shadow: 0 12px 48px rgba(0,0,0,.52); }

/* ----------------------------------------------------------------- buttons */
/* Radius is binary. Anything clickable is a full pill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 40px; padding-inline: 16px;
  border: 0; border-radius: 999px;
  font-family: var(--text-face);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background var(--t-ui) var(--ease-ui),
              box-shadow var(--t-ui) var(--ease-ui),
              border-color var(--t-ui) var(--ease-ui),
              color var(--t-ui) var(--ease-ui);
}
@media (min-width: 768px) {
  /* weight goes DOWN as size goes up */
  .btn { height: 48px; padding-inline: 24px; font-size: 16px; font-weight: 500; }
}

.btn--primary { background: var(--fg); color: var(--ground); }
.btn--primary:hover {
  background: rgba(250,250,251,.9);
  box-shadow: 0 0 20px var(--gov-glow);
}

.btn--ghost {
  background: rgba(14,16,19,.56);
  border: 0.8px solid var(--line-glass);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  color: var(--text);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.02);
  border-color: transparent;
  box-shadow: 0 8px 16px var(--gov-rim), inset 0 0 4px var(--gov);
}

.btn--link {
  height: auto; padding: 0; background: none;
  color: var(--gov); font-weight: 500;
}
.btn__arrow { transition: transform var(--t-ui) var(--ease-ui); }
.btn--link:hover .btn__arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* badge / pill */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ reveal */
/* opacity + rise + BLUR. The blur is the part most implementations skip and
   the reason it reads as settling rather than sliding. */
[data-rv] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
  transition-delay: var(--rv, 0ms);
}
[data-rv].in { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  [data-rv] { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================================
   NAV — glass on a pseudo-element so dropdowns can escape the blur
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  isolation: isolate;
  overflow: visible;
  background-color: rgba(14,16,19,.6);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.06);   /* hairline, not a border */
}

/* The blur lives on ::before at z-index:-1. This is the trick that lets the
   bar keep overflow:visible for menus while the blur stays clipped — the
   usual backdrop-filter + overflow:hidden trade-off, avoided. */
.nav::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  background-color: rgba(14,16,19,.6);
  pointer-events: none;
}

.nav__in {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
@media (min-width: 1024px) { .nav__in { height: 80px; } }

.nav__brand { display: flex; align-items: center; flex: none; }
.nav__mark { width: 86px; height: 24px; }
.nav__mark path, .nav__mark circle { stroke: var(--fg); }

.nav__links { display: none; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .nav__links { display: flex; } }

.nav__link {
  display: inline-flex; align-items: center; height: 40px;
  padding-inline: 16px;
  font-size: 16px; font-weight: 500;
  color: var(--text);
  border-radius: 999px;
  transition: color var(--t-ui) var(--ease-ui), background var(--t-ui) var(--ease-ui);
}
.nav__link:hover { color: var(--fg); background: rgba(255,255,255,.03); }
.nav__link.is-current { color: var(--fg); }

.nav__cta { display: none; }
@media (min-width: 1024px) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  transition: box-shadow var(--t-ui) var(--ease-ui);
}
.nav__toggle:hover { box-shadow: 0 0 20px rgba(95,168,255,.3); }
@media (min-width: 1024px) { .nav__toggle { display: none; } }

.nav__burger { position: relative; width: 18px; height: 1px; background: var(--fg); }
.nav__burger::before, .nav__burger::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1px;
  background: var(--fg); transition: transform 240ms var(--ease-ui);
}
.nav__burger::before { top: -6px; }
.nav__burger::after { top: 6px; }
.menu-open .nav__burger { background: transparent; }
.menu-open .nav__burger::before { transform: translateY(6px) rotate(45deg); }
.menu-open .nav__burger::after { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 60px 0 0; z-index: 99;
  background: var(--ground);
  padding: 24px var(--gutter) 48px;
  overflow-y: auto;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 240ms var(--ease-ui), transform 240ms var(--ease-ui);
}
.drawer[hidden] { display: none; }
.menu-open .drawer { opacity: 1; transform: none; }
.menu-open { overflow: hidden; }

.drawer__link {
  display: block;
  font-family: var(--display);
  font-size: 30px; font-weight: 600; letter-spacing: -0.04em;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
}
.drawer__cta { margin-top: 28px; width: 100%; }
@media (min-width: 1024px) { .drawer { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; overflow: hidden; }



/* Stacked scrim: radial vignette + top fade, as a sibling layer rather than a
   pseudo-element on the art, so the two can be tuned independently. */


.hero__in {
  position: relative; z-index: 2;
  padding-block: 96px 72px;
}
@media (min-width: 1024px) { .hero__in { padding-block: 152px 112px; } }

.hero__eyebrow { margin-bottom: 24px; }

/* 23-26 characters is the measure that keeps a display headline composed */
.hero__h { max-width: 15ch; }

.hero__lede { margin-top: 24px; max-width: 40ch; }
.hero__cta { margin-top: 36px; }

/* a small glass readout floating over the field, the way the reference
   floats a stat chip over its hero art */
.hero__chip {
  margin-top: 56px;
  display: inline-flex; align-items: stretch;
  border-radius: 12px;
  overflow: hidden;
}
.chip {
  background: rgba(14,16,19,.56);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  border: 0.8px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,.52);
}
.chip__n {
  font-family: var(--display);
  font-size: 30px; font-weight: 600; letter-spacing: -0.04em;
  color: var(--fg); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chip__d { width: 1px; align-self: stretch; background: var(--line); }
.chip__t { max-width: 20ch; }

/* ==========================================================================
   EDITORIAL GRIDS
   ========================================================================== */
/* gap-0 grid where a fading pseudo-element does the dividing — the divider
   dies out at the bottom instead of running the full height */
.cols {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .cols--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 767px) { .cols--4 { grid-template-columns: repeat(2, 1fr); } }

.col {
  position: relative;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .col { padding: 40px 32px 48px; border-bottom: 0; }
  .col:first-child { padding-left: 0; }
  .col:last-child { padding-right: 0; }
  .col:not(:first-child)::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 1px; height: 100%;
    background: linear-gradient(to bottom, rgba(250,250,251,.2), transparent);
  }
}

.col__n { display: block; margin-bottom: 20px; color: var(--gov); }
.col__t { margin-bottom: 12px; }

/* ==========================================================================
   CARDS — editorial cards are hard-cornered; only controls are round
   ========================================================================== */
.card {
  position: relative;
  /* column + auto margin on the CTA so "Read article" sits on one line across
     the row regardless of how long each excerpt runs */
  display: flex;
  flex-direction: column;
  padding: 28px 24px 32px;
  background-color: var(--surface);
  background-image: var(--noise);
  background-repeat: repeat;
  background-size: 256px 256px;
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}

/* hover is a radial wash fading in — no lift, no scale, no translate */
.card::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  opacity: 0; pointer-events: none;
  background: radial-gradient(110% 100% at 0 100%,
    rgba(95,168,255,.16) 0%, rgba(95,168,255,.09) 22%,
    rgba(95,168,255,.05) 42%, rgba(140,150,160,.04) 62%, transparent 100%);
  transition: opacity var(--t-wash) var(--ease-ui);
}
.card:hover::before { opacity: 1; }

.card__meta { margin-bottom: 18px; }
.card__t { margin-bottom: 14px; transition: color var(--t-ui) var(--ease-ui); }
.card:hover .card__t { color: var(--gov); }
.card__more { margin-top: auto; padding-top: 20px; align-self: flex-start; }
.card:hover .btn__arrow { transform: translateX(4px); }

.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   FIGURE — the one statistic, given weight
   ========================================================================== */
.figure { display: flex; align-items: baseline; gap: 20px; }

.figure__n {
  font-family: var(--display);
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 600; line-height: 1; letter-spacing: -0.055em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.figure__u { font-size: .42em; color: var(--text-3); margin-left: 2px; }
.figure__c { max-width: 28ch; }

.meter {
  position: relative; height: 2px; margin-top: 26px;
  background: var(--line); overflow: hidden;
}
.meter::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--gov), rgba(95,168,255,.35));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s var(--ease) .1s;
}
[data-rv].in .meter::after, .in > .meter::after { transform: scaleX(1); }

/* ==========================================================================
   LEDGER — flat rows, no bullets
   ========================================================================== */
.ledger { border-top: 1px solid var(--line); }
.ledger li {
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 18px; line-height: 1.5; color: var(--text);
}

/* ==========================================================================
   TERMS readout
   ========================================================================== */
.terms {
  display: flex; flex-wrap: wrap; gap: 10px 32px;
  padding-block: 24px;
  border-block: 1px solid var(--line);
  margin-block: 40px;
}
.terms span {
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  color: var(--text);
}
.terms .on { color: var(--gov); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { border-top: 1px solid var(--line); padding-block: 72px 40px; background: var(--ground-deep); }
.foot__grid {
  display: grid; gap: 40px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .foot__brand { grid-column: auto; } }
.foot__mark { width: 104px; height: 28px; margin-bottom: 16px; }
.foot__mark path, .foot__mark circle { stroke: var(--fg); }
.foot__t { margin-bottom: 18px; color: var(--text-3); }
.foot__list li + li { margin-top: 12px; }
.foot__l { font-size: 15px; color: var(--text-2); transition: color var(--t-ui) var(--ease-ui); }
.foot__l:hover { color: var(--gov); }
.foot__base {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
}
.foot__fine { font-size: 13px; color: var(--text-3); }

/* ==========================================================================
   THE EXECUTION AXIS
   AMEOT's claim is about TIME, so it is drawn on a time axis rather than
   illustrated. Two lanes share one t=0. The upper lane carries the only warm
   value in the system across the interval where execution is running but not
   yet contained; the lower lane has no interval at all.
   ========================================================================== */
.axis { margin: 36px 0 0; }

.axis__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.axis__scroll:focus-visible { outline: 2px solid var(--gov); outline-offset: 4px; }

/* The stage's aspect box MUST match the viewBox aspect, or the SVG letterboxes
   inside it and every percentage-positioned label drifts off the drawing. */
.axis__stage {
  position: relative;
  min-width: var(--ax-min, 560px);
  padding-bottom: var(--ar);
  height: 0;
}
.axis__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.ax-rail path, .ax-tick path, .ax-gap path, .ax-hold path, .ax-thread path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
}
.ax-rail path   { stroke: var(--line); stroke-width: 1; }
.ax-tick path   { stroke: var(--text-2); stroke-width: 1; }
.ax-gap path    { stroke: var(--exposed); stroke-width: 5; }
.ax-hold path   { stroke: var(--gov); stroke-width: 1.5; }
.ax-thread path { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }

/* Labels live in HTML, not <text>: text inside a scaling viewBox shrinks with
   the drawing and becomes illegible. Percent positions keep them locked on. */
.ax-t {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ax-t--dim  { color: var(--text-3); font-size: 11px; }
.ax-t--warn { color: var(--exposed); font-size: 11px; }
.ax-t--gov  { color: var(--gov); }

/* draw-on: the line work builds in flow order, so the motion states the
   direction of the process rather than decorating it */
.axis [class^="ax-"] path { transition: stroke-dashoffset 1s var(--ease); }
.axis.drawn [class^="ax-"] path { stroke-dashoffset: 0 !important; }
.ax-t { opacity: 0; transition: opacity .6s var(--ease); }
.axis.drawn .ax-t { opacity: 1; }

.scroll-hint {
  display: none;
  margin-top: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-3);
}

@media (max-width: 767px) {
  .axis__stage { --ax-min: 470px; }
  .ax-t { font-size: 11px; letter-spacing: .03em; }
  .ax-t--dim, .ax-t--warn { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-t { opacity: 1; }
  .meter::after { transform: scaleX(1); }
}

/* ==========================================================================
   INTERIOR PAGE HEAD
   No video here — the hero owns that. Interior pages get the same glow so the
   family reads, at a fraction of the height.
   ========================================================================== */
.phead { position: relative; overflow: hidden; padding-block: 128px 64px; }
@media (min-width: 1024px) { .phead { padding-block: 176px 88px; } }
.phead--tight { padding-block: 128px 48px; }
@media (min-width: 1024px) { .phead--tight { padding-block: 168px 64px; } }

.phead__in { position: relative; z-index: 1; }
.phead__h { max-width: 18ch; margin-top: 20px; }

/* ------------------------------------------------------------------ prose */
.prose { max-width: 62ch; margin-top: 24px; }
.prose .body + .body { margin-top: 16px; }

/* the one line on a page allowed to speak at display scale */
.pull {
  max-width: 26ch;
  margin: 64px auto 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.04em;
  color: var(--fg);
  padding-top: 40px;
  border-top: 1px solid var(--line);
  text-align: center;
  text-wrap: balance;
}

.cols--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .cols--2 { grid-template-columns: repeat(2, 1fr); } }

/* diagram label variants used on the Sentry page */
.ax-t--mid { transform: translate(-50%, -50%); }
.ax-t--wrap { white-space: normal; width: 34%; }
.axis--wide { margin-top: 56px; }

/* ==========================================================================
   COVERAGE MATRIX
   A real table, because this is real tabular data — on the live site it exists
   only inside an SVG, where no screen reader or phone can reach it.
   ========================================================================== */
.matrix-wrap { overflow-x: auto; overflow-y: hidden; }
.matrix-wrap:focus-visible { outline: 2px solid var(--gov); outline-offset: 4px; }

.matrix {
  width: 100%; min-width: 560px;
  border-collapse: collapse; text-align: left;
}
.matrix th, .matrix td { border-bottom: 1px solid var(--line); }

.matrix thead th {
  vertical-align: bottom;
  padding: 0 16px 20px 0;
  border-bottom-color: var(--text-3);
  font-weight: 400;
}
.matrix__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--fg);
}
.matrix__n--gov { color: var(--gov); }
/* .label sets line-height:1, which makes a wrapped limit string overlap
   itself. Any label that can wrap needs its leading back. */
.matrix__l { display: block; margin-top: 10px; line-height: 1.45; }

.matrix tbody th {
  font-family: var(--text-face);
  font-size: 16px; font-weight: 400; line-height: 1.45;
  color: var(--text-2);
  padding: 15px 24px 15px 0;
}
.matrix td { width: clamp(104px, 16%, 180px); padding: 15px 16px 15px 0; }

/* marks are drawn at the same hairline weight as everything else, not glyphs */
.matrix td::before {
  content: ''; display: block;
  width: 13px; height: 13px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}
.matrix td.y { color: var(--gov); }
.matrix td.n { color: var(--text-3); }
.matrix td.n::before {
  width: 12px; height: 1.5px; border: 0;
  background: currentColor; transform: none; margin-top: 6px;
}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.feature {
  display: block;
  padding-block: 40px 48px;
  border-top: 1px solid var(--text-3);
  border-bottom: 1px solid var(--line);
  transition: border-bottom-color var(--t-media) var(--ease-ui);
}
.feature:hover { border-bottom-color: var(--gov); }
.feature__meta { display: flex; gap: 20px; align-items: center; margin-bottom: 22px; }
.feature__t { max-width: 20ch; transition: color var(--t-ui) var(--ease-ui); }
.feature:hover .feature__t { color: var(--gov); }
.feature__x { max-width: 62ch; margin-top: 24px; }
.feature__more { margin-top: 26px; }
.feature:hover .btn__arrow { transform: translateX(4px); }

.arch { border-top: 1px solid var(--line); }
.arch li { border-bottom: 1px solid var(--line); }
.arch__l {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 0 16px;
  padding-block: 28px;
}
.arch__d { display: block; margin-bottom: 14px; }
.arch__t { grid-column: 1; max-width: 34ch; transition: color var(--t-ui) var(--ease-ui); }
.arch__l:hover .arch__t { color: var(--gov); }
.arch__p { grid-column: 1; max-width: 70ch; margin-top: 12px; }
.arch__a {
  grid-column: 2; grid-row: 1 / span 3;
  align-self: center; justify-self: end;
  color: var(--text-3);
  transition: transform var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui);
}
.arch__l:hover .arch__a { transform: translateX(4px); color: var(--gov); }
@media (max-width: 639px) {
  .arch__l { grid-template-columns: 1fr; }
  .arch__a { display: none; }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 1024px) {
  .contact { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
}

.aside { border-top: 1px solid var(--text-3); padding-top: 26px; }
@media (min-width: 1024px) { .aside { position: sticky; top: 108px; } }
.aside__i + .aside__i { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.aside__l { display: block; margin-bottom: 10px; }

.fgroup + .fgroup {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--line);
}
.fgroup__l { display: block; margin-bottom: 28px; }

.field { margin-bottom: 30px; border: 0; padding: 0; min-width: 0; }
.field:last-child { margin-bottom: 0; }

.field__lb {
  display: block; padding: 0;
  font-family: var(--text-face);
  font-size: 15px; font-weight: 500;
  color: var(--fg);
  margin-bottom: 10px;
}
.req { color: var(--text-3); font-weight: 400; }
.field__hp { font-size: 13px; color: var(--text-3); margin: -4px 0 12px; }
.field__note {
  font-size: 13px; color: var(--text-2);
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}

/* An underline, not a box: less furniture, and the focus state has somewhere
   to go. The rule doubles via box-shadow so nothing reflows. */
.field__in {
  width: 100%;
  font-family: var(--text-face);
  font-size: 16px; line-height: 1.5;
  color: var(--fg);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0;
  appearance: none;
  transition: border-color var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui);
}
.field__in::placeholder { color: var(--text-3); }
.field__in:hover { border-bottom-color: var(--text-3); }
.field__in:focus {
  outline: none;
  border-bottom-color: var(--gov);
  box-shadow: 0 1px 0 0 var(--gov);
}
.field__sel {
  cursor: pointer; padding-right: 24px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field__sel option { background: var(--surface); color: var(--fg); }
.field__in--other { margin-top: 12px; }

.chs { display: flex; flex-direction: column; gap: 12px; }
.chs--row { flex-direction: row; flex-wrap: wrap; gap: 12px 26px; }
.ch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 26px; }
.ch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ch__b {
  flex: none; position: relative;
  width: 16px; height: 16px;
  border: 1px solid var(--line); border-radius: 50%;
  transition: border-color var(--t-ui) var(--ease-ui);
}
.ch__b--sq { border-radius: 3px; }
.ch:hover .ch__b { border-color: var(--text-3); }
.ch__b::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: inherit; background: var(--gov);
  transform: scale(0); transition: transform var(--t-ui) var(--ease-ui);
}
.ch input:checked + .ch__b { border-color: var(--gov); }
.ch input:checked + .ch__b::after { transform: scale(1); }
.ch input:focus-visible + .ch__b { outline: 2px solid var(--gov); outline-offset: 3px; }
.ch__t { font-size: 15px; color: var(--text-2); }

.field__er { font-size: 13px; line-height: 1.45; color: var(--exposed); margin-top: 8px; }
.field.is-invalid .field__in { border-bottom-color: var(--exposed); }
.field.is-invalid .field__lb { color: var(--exposed); }
.field.is-invalid .ch__b { border-color: var(--exposed); }
/* focused AND invalid: error wins, or the rule renders two signal colours */
.field.is-invalid .field__in:focus {
  border-bottom-color: var(--exposed);
  box-shadow: 0 1px 0 0 var(--exposed);
}

.ffoot { margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--line); }
.fstatus { font-size: 15px; line-height: 1.55; color: var(--text-2); margin-bottom: 18px; max-width: 52ch; }
.form.has-errors .fstatus { color: var(--exposed); }
.form.is-sent .fstatus { color: var(--gov); }
.fsubmit { min-width: 190px; }
.fsubmit:disabled { cursor: default; background: var(--gov); color: var(--ground); }
.form.is-sending .fsubmit { opacity: .72; cursor: progress; }
.ffine { margin-top: 16px; }

/* Radio and checkbox rows are fine for a cursor at 26px and too small for a
   thumb. Give them a real target on touch without changing the mark. */
@media (max-width: 1023px) {
  .ch { min-height: 44px; }
  .chs { gap: 4px; }
  .chs--row { gap: 4px 22px; }
}

@media (max-width: 767px) {
  .axis__stage { --ax-min: 470px; }
  .ax-t--wrap { width: 34%; }
  .matrix tbody th { font-size: 15px; padding-right: 16px; }
  .pull { max-width: none; }
}

/* A grid item's automatic minimum size is min-content, so a wide child — the
   diagram's min-width, a long unbroken string — pushes the whole track wider
   than the viewport and the PAGE scrolls sideways, even though the diagram has
   its own overflow-x:auto. min-width:0 lets the track shrink and hands the
   overflow back to the scroller that is meant to own it. */
.split > *,
.cols > *,
.contact > *,
.row-end > * { min-width: 0; }

/* ==========================================================================
   SITE BACKDROP — fixed behind every page
   --------------------------------------------------------------------------
   The video runs once, under the whole document, rather than per-section. For
   it to be visible at all the section grounds above it become translucent —
   but only just: alphas are kept high enough that text contrast is effectively
   unchanged, and the hero is the one place with no plate over it.
   ========================================================================== */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ground);
}

/* The shader canvas fills the fixed backdrop. It is graded down rather than
   overlaid: the raw output peaks bright enough to break hero text, and a
   uniform grade keeps it a gradient instead of a gradient-under-a-sheet. */
.site-bg__canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(.52) saturate(1.05);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.site-bg.gradient-on .site-bg__canvas { opacity: .85; }





.site-bg__glow {
  position: absolute; z-index: 0;
  top: 0; left: 50%;
  width: 130%; max-width: none; height: 68%;
  transform: translateX(-50%);
  mix-blend-mode: screen;
}
@media (max-width: 639px) {
  .site-bg__glow { width: 190%; height: 52%; }
}

/* decorative: under reduced motion the flat ground stands in (gradient.js
   also returns early, so no canvas is even created) */
@media (prefers-reduced-motion: reduce) { .site-bg__canvas { display: none; } }

/* --- content rides above the backdrop ----------------------------------- */
body { background: transparent; }
.nav, .drawer, .foot, main { position: relative; z-index: 1; }

/* --- translucent section plates ------------------------------------------
   Order matters: `.sec` and `.sec--deep` are equal specificity, so the plain
   rule must come FIRST or it wipes the deep tone off every band carrying both
   classes. The deep rule is written `.sec.sec--deep` so it also outranks the
   opaque declaration earlier in this file. */
.sec { background: rgba(14,16,19,.86); }
.sec.sec--deep { background: rgba(8,9,11,.91); }
.foot { background: rgba(8,9,11,.93); }

/* Hero and page heads carry no plate, so the video is at full strength there
   and recedes as soon as the reader scrolls into content. */
.hero, .phead { background: transparent; }

/* The hero and page heads sit directly on the video with no plate under them,
   so their micro-labels move off --text-3 (which needs a near-black ground)
   and onto white. Body and headline colours are unchanged. */
.hero .label,
.phead .label { color: rgba(255,255,255,.82); }

/* ==========================================================================
   CONTINUITY PASS
   --------------------------------------------------------------------------
   One environment, not a stack of pages. Every rule here removes something:
   the per-section plates that banded the background, and every hairline that
   announced a boundary. Nothing is hidden behind an overlay — the declarations
   that drew them are switched off.

   What survives, deliberately: form field underlines and table row rules are
   functional affordances, not section furniture, and the diagram line work IS
   the content.
   ========================================================================== */

/* --- 1. one uniform veil instead of per-section plates -------------------- */
/* The backdrop peaks at luma 180, which is too bright to carry a 13px label.
   Previously each section painted its own translucent plate, which is exactly
   what made the page read as bands. This is a single flat wash across the
   whole fixed backdrop — no gradient, no edges, so it cannot create a seam. */
.site-bg__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 9, 11, 0.66);
  pointer-events: none;
}

/* sections stop painting grounds entirely — the background is continuous */
.sec,
.sec.sec--deep,
.sec--deep,
.hero,
.phead,
.foot { background: transparent; }

/* --- 2. no section furniture --------------------------------------------- */
.foot { border-top: 0; }
.foot__base { border-top: 0; }

.cols { border-top: 0; }
.col { border-bottom: 0; }
.col:not(:first-child)::before { content: none; }   /* the fading column rules */

.ledger { border-top: 0; }
.ledger li { border-bottom: 0; }

.terms { border-block: 0; }

.feature { border-top: 0; border-bottom: 0; }
.arch { border-top: 0; }
.arch li { border-bottom: 0; }

.aside { border-top: 0; }
.aside__i + .aside__i { border-top: 0; }
.fgroup + .fgroup { border-top: 0; }
.ffoot { border-top: 0; }

.rule-bleed { display: none; }

/* --- 3. cards stop being boxes -------------------------------------------- */
/* The insight cards kept their layout and hover wash, but lose the 1px frame
   and the surface fill that made them read as objects sitting on a page. */
.card {
  background-color: transparent;
  background-image: none;
  border: 0;
  padding: 0 0 4px;
}
.card::before { border-radius: 0; }

.grid-cards { gap: clamp(32px, 4vw, 56px); }

/* --- 4. rhythm now comes from space, not from lines ----------------------- */
/* With the rules gone, list items need their own breathing room or they read
   as one undifferentiated block. */
.ledger li { padding-block: 14px; }
.arch__l { padding-block: clamp(26px, 3.2vw, 40px); }
.col { padding-block: 28px; }
@media (min-width: 768px) { .col { padding-block: 32px 40px; } }

.aside__i + .aside__i { margin-top: 30px; padding-top: 0; }
.fgroup + .fgroup { margin-top: clamp(48px, 6vw, 76px); padding-top: 0; }
.ffoot { margin-top: clamp(44px, 5.5vw, 64px); padding-top: 0; }
.foot__base { margin-top: clamp(48px, 6vw, 72px); padding-top: 0; }
.feature { padding-block: clamp(34px, 4.5vw, 52px); }
.terms { padding-block: 0; margin-block: clamp(36px, 4.5vw, 52px); }

/* Sections themselves overlap slightly less abruptly: trimming the doubled
   padding at every seam stops the "new page starts here" beat. */
.sec { padding-block: 56px; }
@media (min-width: 768px) { .sec { padding-block: 84px; } }
.sec--lg { padding-block: 72px; }
@media (min-width: 768px) { .sec--lg { padding-block: 104px; } }

/* --- 5. the matrix keeps row rules (data), but softer -------------------- */
.matrix th, .matrix td { border-bottom-color: rgba(255, 255, 255, .07); }
.matrix thead th { border-bottom-color: rgba(255, 255, 255, .16); }

/* --- 6. hover affordance replaces the removed frames --------------------- */
.feature,
.arch__l {
  transition: opacity var(--t-ui) var(--ease-ui);
}
.arch li:hover .arch__t,
.feature:hover .feature__t { color: var(--gov); }

/* ==========================================================================
   LIVE DIAGRAMS
   --------------------------------------------------------------------------
   Motion that carries meaning, not decoration: execution travels along the
   uncontained interval, containment breathes to show it is armed, and the
   decision branches respond to the pointer. All of it is CSS on transform /
   opacity / dashoffset — no new rAF loop, and it stops for reduced motion.
   ========================================================================== */

/* execution moving along the interval it has not yet been contained in */
.ax-flow path {
  fill: none;
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 5;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 26;
  opacity: 0;
  transition: opacity .8s var(--ease) .9s;
}
.axis.drawn .ax-flow path {
  opacity: .55;
  animation: ax-travel 2.6s linear infinite;
}
.ax-flow--rail path { stroke: var(--gov); stroke-width: 3; stroke-dasharray: 2 30; }
.axis.drawn .ax-flow--rail path { opacity: .7; animation-duration: 4.2s; }

@keyframes ax-travel { to { stroke-dashoffset: -29; } }

/* containment armed: a slow breath, not a blink */
.axis.drawn .ax-hold { animation: ax-armed 3.4s ease-in-out infinite; }
@keyframes ax-armed { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }

/* the decision diagram answers the pointer: hovering a branch brings it
   forward and lets the other recede, so the path being described is obvious */
.axis svg .br-yes,
.axis svg .br-no { transition: stroke .25s var(--ease-ui), opacity .25s var(--ease-ui); }
.axis:hover svg .br-yes,
.axis:hover svg .br-no { opacity: .35; }
.axis svg:hover .br-yes:hover,
.axis svg:hover .br-no:hover { opacity: 1; stroke: var(--gov); }

@media (hover: none) {
  .axis:hover svg .br-yes, .axis:hover svg .br-no { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .axis.drawn .ax-flow path,
  .axis.drawn .ax-hold { animation: none; }
  .ax-flow path { opacity: .4; }
}

/* --- touch targets -------------------------------------------------------
   Text links sit at their line box, which is fine for a cursor and too small
   for a thumb. Padding is added with a negative margin so the target grows
   without the text moving — the composition is unchanged. */
@media (max-width: 1023px) {
  .btn--link,
  .foot__l {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 12px;
    margin-block: -12px;
  }
  .foot__list li + li { margin-top: 4px; }
  .nav__brand { min-height: 44px; align-items: center; }
}

/* the menu trigger was 40px — a hair under the thumb minimum */
@media (max-width: 1023px) {
  .nav__toggle { width: 44px; height: 44px; margin-right: -10px; }
}

/* Buttons sit at 40px on mobile (the reference's own h-10 step). 44 is the
   thumb minimum, and 4px does not disturb the composition. */
@media (max-width: 767px) {
  .btn { height: 44px; }
}

/* ==========================================================================
   DECRYPT TEXT
   --------------------------------------------------------------------------
   Lock state is carried by OPACITY, not colour. The headlines are
   gradient-clipped (`background-clip: text` + transparent fill), and a child
   that sets its own colour punches a hole straight through that gradient — so
   the type keeps its designed treatment and the effect rides on top of it.
   ========================================================================== */
.dc-w { display: inline-block; white-space: pre; }

/* Characters MUST stay `inline`. An inline-block child breaks the ancestor's
   `background-clip: text`, and the gradient headline renders completely
   invisible — transparent fill with nothing clipped behind it. Only the WORD
   wrapper may be inline-block; that is what keeps wrapping stable. Glyph
   widths jitter slightly during the scramble, which is the original's
   behaviour and the acceptable half of this trade. */
.dc-c {
  display: inline;
  opacity: 1;
  transition: opacity .18s linear;
}

/* scrambling: present but clearly unresolved */
.dc-on .dc-c[data-s="x"] { opacity: .34; }

/* the moment a character resolves */
.dc-on .dc-c[data-s="l"] { opacity: 1; animation: dc-lock 420ms cubic-bezier(.2, 0, 0, 1); }

@keyframes dc-lock {
  0%   { opacity: 1; text-shadow: 0 0 22px rgba(95, 168, 255, .75); }
  100% { opacity: 1; text-shadow: 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-c { opacity: 1 !important; animation: none !important; }
}

/* A decrypt headline cannot also be gradient-clipped. `background-clip: text`
   paints the gradient through the element's OWN text, and decrypt replaces that
   text with a tree of per-character spans — the clip finds nothing to fill and
   the headline renders fully transparent. Solid foreground wins over an
   invisible headline; the light-to-grey sweep is dropped only on these two. */
.grad[data-decrypt] {
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--fg);
  color: var(--fg);
}



/* ==========================================================================
   OPENING SHOT
   Pure black, one mark, no gradient and no glow. It exists for ~2.3s and then
   removes itself from the DOM entirely.
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  transition: opacity 620ms cubic-bezier(.4, 0, .2, 1);
}
.intro--gone { opacity: 0; pointer-events: none; }

/* scroll is locked only while the intro is up */
.intro-lock, .intro-lock body { overflow: hidden; }

.intro__mark { width: min(280px, 46vw); height: auto; }
.intro__mark path, .intro__mark circle {
  stroke: #f4f5f6;
  fill: none;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 900ms cubic-bezier(.22, 1, .36, 1);
}
.intro--draw path, .intro--draw circle { stroke-dashoffset: 0 !important; }

/* the mark settles with a whisper of scale — no bounce, no glow */
.intro__mark {
  opacity: .001;
  transform: scale(.985);
  transition: opacity 700ms ease, transform 1400ms cubic-bezier(.22, 1, .36, 1);
}
.intro--draw .intro__mark, .intro--static .intro__mark { opacity: 1; transform: none; }
.intro--static .intro__mark path, .intro--static .intro__mark circle { stroke-dashoffset: 0 !important; }

/* ==========================================================================
   DEPLOYMENT — pinned scroll sequence
   ========================================================================== */
.dep { position: relative; height: 400vh; }
.dep--static { height: auto; }

.dep__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.dep--static .dep__pin { position: static; min-height: 0; display: block; }

.dep__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .dep__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
}

/* ---- media: full-bleed image, no frame, no white edge ------------------- */
.dep__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  /* No border and no background: a light frame or an exposed plate is exactly
     the "white edge around the image" that had to go. The image is masked into
     the dark environment instead. */
  background: transparent;
}
@media (min-width: 900px) { .dep__media { aspect-ratio: 5 / 4; } }

.dep__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 800ms cubic-bezier(.22, 1, .36, 1), transform 1200ms cubic-bezier(.22, 1, .36, 1);
}
.dep__shot.is-on { opacity: 1; transform: none; }

.dep__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  /* grayscale keeps the green-keyed source art inside the monochrome system */
  filter: grayscale(1) brightness(.86) contrast(1.1);
}

/* feather the edges so the picture sits IN the environment rather than on it */
.dep__media::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(8,9,11,0) 55%, rgba(8,9,11,.85) 100%);
}

/* ---- text: one capability owns the frame -------------------------------- */
.dep__text { position: relative; min-height: 260px; }
@media (min-width: 900px) { .dep__text { min-height: 300px; } }

.dep__state {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1), transform 620ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.dep__state.is-on { opacity: 1; transform: none; pointer-events: auto; }

.dep__n { display: block; margin-bottom: 22px; color: var(--gov); }

/* substantially larger than the card it replaced */
.dep__t {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin-bottom: 20px;
  text-wrap: balance;
}
.dep__c {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 46ch;
}

/* ---- progress rail ------------------------------------------------------ */
.dep__rail { display: flex; gap: 8px; margin-top: clamp(32px, 4vh, 56px); }
.dep__tick {
  height: 2px; flex: 1;
  background: rgba(255, 255, 255, .10);
  transition: background 500ms cubic-bezier(.22, 1, .36, 1);
}
.dep__tick.is-on { background: var(--gov); }

/* ---- static / reduced-motion: all four simply stack -------------------- */
.dep--static .dep__text { min-height: 0; }
.dep--static .dep__state { position: static; opacity: 1; transform: none; margin-bottom: 40px; }
.dep--static .dep__media { display: none; }
.dep--static .dep__rail { display: none; }

@media (max-width: 899px) {
  .dep { height: 340vh; }
  .dep__pin { min-height: 100svh; padding-block: 24px; }
  .dep__text { min-height: 230px; }
}

/* ==========================================================================
   CONTAIN FIRST — luminous execution path
   --------------------------------------------------------------------------
   Same geometry, same labels, same meaning. What changes is hierarchy: the
   uncontained interval now reads as a live signal, containment is the brightest
   event in the frame, and detection/response recede to where they belong —
   after the fact. Glow is an SVG drop-shadow on the stroke, so it costs one
   filter rather than a stack of blurred duplicates.
   ========================================================================== */

/* the interval execution runs through before anything catches it */
.ax-gap path {
  filter: drop-shadow(0 0 6px rgba(224, 103, 74, .55));
}

/* traveling signal along that interval — the path is alive, not drawn */
.ax-flow path {
  stroke: rgba(255, 238, 232, .95);
  filter: drop-shadow(0 0 5px rgba(224, 103, 74, .8));
}

/* CONTAINMENT: the key moment. Brightest element in the diagram. */
.ax-hold path {
  stroke: var(--gov);
  stroke-width: 2;
  filter: drop-shadow(0 0 7px rgba(95, 168, 255, .85))
          drop-shadow(0 0 16px rgba(95, 168, 255, .35));
}

/* a single pulse ring at t=0 so the eye is told where the decision happens */
.ax-pulse circle {
  fill: none;
  stroke: var(--gov);
  stroke-width: 1;
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.axis.drawn .ax-pulse circle { animation: ax-ring 3.4s cubic-bezier(.22, 1, .36, 1) infinite; }
.axis.drawn .ax-pulse circle:nth-child(2) { animation-delay: 1.1s; }
@keyframes ax-ring {
  0%   { opacity: .55; transform: scale(.35); }
  70%  { opacity: 0;   transform: scale(1.9); }
  100% { opacity: 0;   transform: scale(1.9); }
}

/* detection and response are consequences — quieter than the containment mark */
.ax-tick path { stroke: var(--text-3); }
.axis .ax-t--dim { opacity: .82; }

/* the rails themselves get the faintest lift so the geometry reads as a system
   rather than as two separate drawings */
.ax-rail path { stroke: rgba(255, 255, 255, .13); }

@media (prefers-reduced-motion: reduce) {
  .axis.drawn .ax-pulse circle { animation: none; opacity: .3; transform: scale(1.2); }
}

/* AMEOT's Zero-Touch SVG has white margins baked into the artwork itself, so
   object-fit alone cannot remove them — cover has nothing to crop against on a
   square source. Scaling the image past the frame pushes those edges outside
   it. The asset is untouched; only what we show of it changes. */
.dep__shot img { transform: scale(var(--crop, 1)); transform-origin: center; }
.dep__shot--crop img { --crop: 1.42; }

/* belt and braces: nothing white can reach the edge of the frame */
.dep__media { background: #06070a; }

/* Crossfading two blocks of TYPE reads as a double exposure — both legible at
   once, neither readable. The outgoing state clears first, then the incoming
   one arrives; the image beneath still crossfades, where overlap is fine. */
.dep__state { transition: opacity 300ms cubic-bezier(.4,0,1,1), transform 300ms cubic-bezier(.4,0,1,1); }
.dep__state.is-on {
  transition: opacity 520ms cubic-bezier(.22,1,.36,1) 240ms,
              transform 620ms cubic-bezier(.22,1,.36,1) 240ms;
}

/* --------------------------------------------------------------------------
   DEPLOYMENT — rebalanced toward the copy
   The picture supports the capability; it is not the capability. It stays on
   the left, drops to a medium fixed width, and the text column takes the space
   it gives up. The whole section is shorter too — a 400vh runway made four
   states feel like four pages.
   -------------------------------------------------------------------------- */
.dep { height: 290vh; }

@media (min-width: 900px) {
  /* media column is now a medium fixed panel, not half the screen */
  .dep__grid {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: clamp(36px, 4.5vw, 72px);
  }
  .dep__media { aspect-ratio: 1 / 1; max-width: 360px; }
}

@media (min-width: 1280px) {
  .dep__grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .dep__media { max-width: 400px; }
}

/* tablet: keep it left, just narrower */
@media (min-width: 700px) and (max-width: 899px) {
  .dep__grid { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 32px; align-items: center; }
  .dep__media { aspect-ratio: 1 / 1; max-width: 280px; }
}

/* mobile: image sits above at a contained size rather than filling the screen */
@media (max-width: 699px) {
  .dep { height: 260vh; }
  .dep__media { aspect-ratio: 3 / 2; max-width: 300px; }
}

/* with the extra room, the copy carries the section */
@media (min-width: 900px) {
  .dep__t { font-size: clamp(34px, 3.9vw, 54px); }
  .dep__c { font-size: clamp(16px, 1.35vw, 19px); max-width: 48ch; }
  .dep__text { min-height: 280px; }
}