/* ============================================================================
   APEX STRATEGIC INTELLIGENCE — site styles
   Refined executive advisory · chrome, electric-blue, near-black.
   ============================================================================ */

:root {
  /* — BACKGROUNDS (near-black milled metal) — */
  --void: #06080b;  --bg: #0a0d12;  --bg-2: #0d1219;
  --surface: #11151c;  --surface-2: #141a22;  --trench: #04060a;

  /* — HAIRLINES & EDGES (cool steel) — */
  --line: #1b212b;  --line-2: #233141;  --line-faint: #12171e;  --line-hot: #2f4456;

  /* — INK (never pure white) — */
  --ink: #e9eef3;  --ink-2: #aab4bf;  --ink-dim: #8a939e;  --ink-faint: #737c87;

  /* — CHROME (milled metal — strictly confined) — */
  --chrome-hi: #f2f5f8;  --chrome-1: #e8edf2;  --chrome-2: #c3cad2;
  --chrome-mid: #9aa3ad;  --chrome-lo: #5b626b;  --chrome-valley: #3d444d;  --chrome-bevel: #1a1d22;
  --chrome-grad-type: linear-gradient(168deg, var(--chrome-hi) 0%, var(--chrome-1) 16%, var(--chrome-mid) 52%, var(--chrome-lo) 78%, var(--chrome-valley) 100%);
  --chrome-grad-plate: linear-gradient(105deg, var(--chrome-1) 0%, var(--chrome-hi) 14%, var(--chrome-mid) 50%, var(--chrome-valley) 100%);

  /* — SIGNAL (the one saturated accent) — */
  --signal-core: #0a6cff;  --signal: #1496ff;  --signal-hi: #5ec8ff;  --signal-crest: #7df4ff;
  --signal-glow: rgba(20,150,255,0.40);  --signal-glow-soft: rgba(94,200,255,0.22);

  /* — STATE (status colors) — */
  --ok: #34d399;  --warn: #ffb547;  --alert: #c2342b;

  /* — REVEAL (wipe-reveal cover + leading edge) — */
  --reveal-cover: #0e1116;  --reveal-edge: var(--signal-hi);

  /* — GLOW DISCIPLINE (hard caps) — */
  --glow-max: 0 0 24px var(--signal-glow);
  --glow-text: 0 0 12px var(--signal-glow-soft);

  /* — SPACING (8px base) — */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:192px;

  /* — RADII — */
  --r-0:0px; --r-1:2px; --r-2:4px;

  /* — STRUCTURE — */
  --corner-crop:14px;
  --maxw:1320px; --gutter:var(--s-5); --margin-x:clamp(20px,5vw,80px);
  --banner-h:34px;

  /* — TYPE SCALE (fluid) — */
  --fs-banner:  clamp(0.625rem, 0.6rem + 0.15vw, 0.6875rem);
  --fs-meta:    clamp(0.6875rem, 0.66rem + 0.18vw, 0.8125rem);
  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.2vw, 0.875rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h4:      clamp(1.125rem, 1.0rem + 0.6vw, 1.5rem);
  --fs-h3:      clamp(1.5rem, 1.3rem + 1.0vw, 2.25rem);
  --fs-deck:    clamp(1.625rem, 1.4rem + 1.6vw, 3rem);
  --fs-h2:      clamp(2.25rem, 1.8rem + 3.2vw, 4.5rem);
  --fs-term:    clamp(2.4rem, 1.9rem + 4.2vw, 5rem);
  --fs-hero:    clamp(2rem, 1.25rem + 4.2vw, 4.75rem);

  /* — FONTS — */
  --f-display: "Saira", system-ui, sans-serif;
  --f-serif: "Newsreader", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --z-bg:0; --z-content:10; --z-stamp:50; --z-frame:100; --z-modal:200;
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--f-serif);
  background: var(--void);
  color: var(--ink-2);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--signal-core); color: var(--ink); }

/* Smooth scroll only when JS smooth-scroller absent / for anchor fallbacks */
:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }

/* ---------- TYPE VOICES ---------- */
.mono { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400; }
.serif { font-family: var(--f-serif); }
.chrome {
  background: var(--chrome-grad-type);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hot { color: var(--signal-hi); }

/* ---------- FOUC GUARD: hide reveal targets before the motion engine boots ---------- */
html.pre [data-rv] { opacity: 0; }
html.pre [data-decrypt] { opacity: 0; }

/* ---------- WIPE REVEAL (the single reveal motion) ---------- */
.rv-host { position: relative; overflow: hidden; }
.rv-bar {
  position: absolute; inset: -2px -2px -2px -2px;
  background: var(--reveal-cover);
  z-index: 4; pointer-events: none; will-change: transform;
}
.rv-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--reveal-edge); box-shadow: 0 0 12px var(--signal-glow-soft);
}

/* ============================================================================
   PERSISTENT INSTRUMENT FRAME
   ============================================================================ */
.frame { position: fixed; inset: 0; z-index: var(--z-frame); pointer-events: none; }
.frame a, .frame button { pointer-events: auto; }

/* — Top classification banner — */
.banner {
  position: absolute; top: 0; left: 0; right: 0; height: var(--banner-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(10px, 3vw, 22px);
  background: linear-gradient(180deg, rgba(6,8,11,0.96), rgba(6,8,11,0.78));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  font-size: var(--fs-banner); color: var(--ink-dim); letter-spacing: 0.18em;
}
.banner__edge { white-space: nowrap; }
.banner__edge--l { display: flex; align-items: center; gap: 8px; justify-self: start; }
.banner__edge--c { justify-self: center; color: var(--ink-2); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.22em; }
.banner__edge--r { justify-self: end; color: var(--ink-dim); font-family: var(--f-display);
  font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.02em; }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.dot--ok { background: var(--ok); box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.dot--signal { background: var(--signal); box-shadow: 0 0 6px var(--signal-glow-soft); }

/* — File-tab navigation (docked under banner, desktop) — */
.tabs {
  position: absolute; top: var(--banner-h); right: clamp(10px, 3vw, 22px);
  display: flex; gap: 2px;
}
.tab {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 13px 7px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--r-1) var(--r-1);
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-meta);
  letter-spacing: 0.02em; color: var(--ink-dim);
  transform: translateY(0); transition: transform .25s ease, color .2s ease, border-color .2s ease;
  position: relative;
}
.tab__no { color: var(--ink-faint); font-size: 0.7em; }
.tab:hover { color: var(--ink-2); }
.tab.is-active {
  color: var(--ink); border-color: var(--line-2); transform: translateY(4px);
}
.tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--signal); box-shadow: var(--glow-text);
}
.tab.is-active .tab__no { color: var(--signal); }

/* — Corner registration crops — */
.crop { position: absolute; width: var(--corner-crop); height: var(--corner-crop); pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--line-2); }
.crop::before { width: 100%; height: 1px; }
.crop::after  { width: 1px; height: 100%; }
.crop--tl { top: calc(var(--banner-h) + 8px); left: 8px; }
.crop--tl::before { top: 0; left: 0; } .crop--tl::after { top: 0; left: 0; }
.crop--tr { top: calc(var(--banner-h) + 8px); right: 8px; }
.crop--tr::before { top: 0; right: 0; } .crop--tr::after { top: 0; right: 0; }
.crop--bl { bottom: 8px; left: 8px; }
.crop--bl::before { bottom: 0; left: 0; } .crop--bl::after { bottom: 0; left: 0; }
.crop--br { bottom: 8px; right: 8px; }
.crop--br::before { bottom: 0; right: 0; } .crop--br::after { bottom: 0; right: 0; }

/* — Left signal rail — */
.rail { position: absolute; top: calc(var(--banner-h) + 40px); bottom: 40px; left: 18px; width: 2px; }
.rail__track { position: absolute; inset: 0; background: var(--line); }
.rail__fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(20,150,255,0.0), var(--signal) 70%, var(--signal-hi));
  transform: scaleY(0); transform-origin: top; will-change: transform;
}
.rail__crest {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, 0);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--signal-crest); box-shadow: 0 0 12px var(--signal-glow); will-change: transform;
}
.rail__readout {
  position: absolute; bottom: -28px; left: -2px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-banner); color: var(--ink-dim); letter-spacing: 0.14em;
  writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center;
  white-space: nowrap;
}
.rail__readout { bottom: 0; left: 10px; writing-mode: horizontal-tb; transform: none;
  flex-direction: column; }
.rail__pct { color: var(--signal); font-variant-numeric: tabular-nums; }

/* — Mobile nav pill + index (hidden on desktop) — */
.navpill, .navindex { display: none; }

/* ============================================================================
   BACKGROUND SYSTEM
   ============================================================================ */
.bg { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; overflow: hidden; }
.bg__grid {
  position: absolute; inset: -10% 0 -10% 0; height: 120%;
  background-image:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
  background-size: 80px 80px; opacity: 0.5; will-change: transform;
}
.bg__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(2,4,7,0.75) 100%),
    linear-gradient(180deg, var(--void), var(--bg) 35%, var(--void));
}
.bg__grain {
  position: absolute; inset: 0; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================================
   LAYOUT PRIMITIVES
   ============================================================================ */
.doc { position: relative; z-index: var(--z-content); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--margin-x); }
.sec { position: relative; padding-block: clamp(var(--s-8), 12vh, var(--s-10)); }
.sec:first-of-type { padding-top: 0; }

.sechead { max-width: 940px; margin-bottom: var(--s-8); }
.sechead--span { max-width: none; }
.eyebrow {
  font-size: var(--fs-eyebrow); color: var(--ink-dim); letter-spacing: 0.14em;
  margin-bottom: var(--s-4); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--line-2); display: inline-block;
}
.sectitle {
  font-family: var(--f-display); font-weight: 800; line-height: 1.0;
  font-size: var(--fs-h2); letter-spacing: -0.005em;
  background: var(--chrome-grad-type); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: var(--s-5);
}
.doctrine-intro, .agent-frame {
  font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.5; max-width: 60ch;
}
.lead { font-size: var(--fs-lead); color: var(--ink); max-width: 60ch; line-height: 1.55; }

/* ---------- CONTROLS (hard-cornered, never pills) ---------- */
.control {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-meta); letter-spacing: 0.04em;
  padding: 13px 22px; border-radius: var(--r-1);
  position: relative; transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.control .arr { color: var(--signal); transition: transform .2s ease; }
.control:hover .arr { transform: translateX(3px); }
.control--ghost { border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface); }
.control--ghost:hover { color: var(--ink); border-color: var(--line-hot); }
.control--ghost::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px;
  background: var(--signal); box-shadow: var(--glow-text); transition: width .3s ease;
}
.control--ghost:hover::after { width: 100%; }
.control--primary {
  border: 1px solid var(--line-hot); color: var(--ink);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 16px 28px; font-weight: 500;
}
.control--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-1);
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .25s ease;
}
.control--primary:hover { color: #fff; }
.control--primary:hover::after { box-shadow: inset 0 0 0 1px var(--signal), var(--glow-max); }

/* ============================================================================
   00 — COVER
   ============================================================================ */
.sec--cover { min-height: 100svh; display: flex; align-items: center;
  padding-top: calc(var(--banner-h) + var(--s-6)); padding-bottom: var(--s-8); }
.cover { display: grid; grid-template-columns: 1.55fr 0.9fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.cover__left { min-width: 0; }
.cover__left > * { max-width: 100%; }

/* Mobile/tablet brand logo — shown only where the big hero seal is hidden (<=1024px) */
.hero-logo { display: none; }
.hero-logo__mark { width: 46px; height: 46px; flex: none; display: block; }
.hero-logo__txt { display: flex; flex-direction: column; line-height: 1; }
.hero-logo__word { font-family: var(--f-display); font-weight: 800; font-size: 1.55rem; letter-spacing: 0.02em;
  background: var(--chrome-grad-type); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
.hero-logo__sub { font-family: var(--f-display); font-weight: 600; font-size: 0.5625rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; }

.proclaim { margin: var(--s-5) 0 var(--s-6); }
.proclaim__l { display: block; font-family: var(--f-display); font-weight: 800;
  font-size: var(--fs-hero); line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase;
  transform: skewX(-5deg); transform-origin: left; }
.proclaim__l--chrome {
  background: var(--chrome-grad-type); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.proclaim__l--signal { color: var(--signal-hi); text-shadow: var(--glow-text); }

.positioning { font-family: var(--f-serif); font-size: var(--fs-lead); color: var(--ink-2);
  max-width: 52ch; line-height: 1.5; margin-bottom: var(--s-7); }
.positioning .emph { color: var(--ink); }

.prompt { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-eyebrow);
  color: var(--ink); letter-spacing: 0.02em; }
.prompt:hover { color: #fff; }
.prompt__caret { color: var(--signal); transition: transform .2s ease; }
.prompt:hover .prompt__caret { transform: translateX(3px); }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* — Hero seal — */
.cover__right { position: relative; display: flex; justify-content: center; align-items: center; }
.seal { position: relative; width: min(100%, 410px); aspect-ratio: 634/747; }
.seal__img { width: 100%; height: 100%; object-fit: contain; will-change: transform; }

/* ---- Animated HUD overlay (anchored to the baked reticle at ~50% / 43.5%) ---- */
.seal__fx { position: absolute; inset: 0; pointer-events: none; }
.seal__hud { position: absolute; left: 50%; top: 43.5%; width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%); }

.seal__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal__rings .ring { fill: none; transform-box: fill-box; transform-origin: center; }
.seal__rings .ring--1 { stroke: var(--signal); stroke-width: 0.5; opacity: 0.32;
  stroke-dasharray: 2.5 8; animation: seal-spin 52s linear infinite; }
.seal__rings .ring--2 { stroke: var(--signal-hi); stroke-width: 0.6; opacity: 0.42;
  stroke-dasharray: 1 24; animation: seal-spin 34s linear infinite reverse; }
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* radar sweep — a conic wedge masked to a thin ring, scanning around the mark */
.seal__sweep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 296deg,
    rgba(94,200,255,0.10) 330deg, rgba(94,200,255,0.42) 358deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle at center, transparent 60.5%, #000 62%, #000 70.5%, transparent 72%);
          mask: radial-gradient(circle at center, transparent 60.5%, #000 62%, #000 70.5%, transparent 72%);
  animation: seal-spin 6.5s linear infinite; will-change: transform; }

/* energy sparks rising along the core beam */
.seal__sparks { position: absolute; left: 50%; bottom: 13%; width: 4px; height: 42%;
  transform: translateX(-50%); }
.seal__sparks span { position: absolute; left: 50%; bottom: 0; width: 3px; height: 3px; border-radius: 50%;
  background: var(--signal-crest); box-shadow: 0 0 8px var(--signal-glow); opacity: 0;
  animation: seal-rise 3s ease-in infinite; }
.seal__sparks span:nth-child(2) { animation-delay: 0.8s; }
.seal__sparks span:nth-child(3) { animation-delay: 1.5s; }
.seal__sparks span:nth-child(4) { animation-delay: 2.2s; }
@keyframes seal-rise {
  0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  18% { opacity: 1; }
  80% { opacity: 0.5; }
  100% { transform: translate(-50%, -260%) scale(1); opacity: 0; }
}

/* ============================================================================
   01 — THESIS (pinned on desktop)
   ============================================================================ */
.sec--thesis { background: var(--bg-2); padding-block: 0; }
.thesis-pin { min-height: 100svh; display: flex; align-items: center;
  padding-block: clamp(var(--s-9), 14vh, var(--s-11)); }
.thesis { display: grid; gap: var(--s-7); }
.terms { list-style: none; display: grid; gap: clamp(var(--s-7), 8vh, var(--s-9)); padding: 0; }
.term { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  padding-left: clamp(0px, 6vw, 90px); }
.term__code { font-size: var(--fs-meta); color: var(--ink-dim); letter-spacing: 0.16em; }
.term__name {
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-term);
  line-height: 1.0; letter-spacing: -0.01em;
  background: var(--chrome-grad-type); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; max-width: 18ch;
}
.term__leader { position: absolute; left: clamp(0px,6vw,90px); top: 0; width: 1px; height: 0;
  background: var(--line-2); }
.term__def { font-size: var(--fs-body); color: var(--ink-2); max-width: 60ch; line-height: 1.7; }
.term__def em { font-style: italic; color: var(--ink-2); }
.bridge { font-size: var(--fs-lead); color: var(--ink); max-width: 60ch; line-height: 1.5;
  border-top: 1px solid var(--line); padding-top: var(--s-6); }

/* ============================================================================
   02 — DOCTRINE / SERVICES (horizontal signal chain)
   ============================================================================ */
.sec--doctrine { background: var(--bg); overflow: hidden; }
.doctrine-pin { display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(var(--s-8), 12vh, var(--s-10)); gap: var(--s-8); }
.doctrine-head { flex: none; }

/* Two stacked, always-visible rows — three nodes fit the width with flex:1 (no horizontal scroll). */
.chains { display: flex; flex-direction: column; gap: var(--s-7);
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--margin-x); }
.track { display: grid; gap: var(--s-4); }
.track__lbl { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-meta);
  color: var(--ink-dim); letter-spacing: 0.04em; }
.track__row { display: flex; align-items: stretch; gap: 0; }

.node {
  position: relative; flex: 1 1 0; min-width: 0;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: border-color .35s ease, transform .35s ease, background .35s ease;
}
.node__tab { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h4);
  color: var(--ink-2); letter-spacing: -0.005em; line-height: 1.15; }
.node__scope { font-size: var(--fs-body); color: var(--ink-2); line-height: 1.55; }
.node__tick { position: absolute; top: 12px; right: 12px; width: 10px; height: 10px;
  border-top: 1px solid var(--chrome-mid); border-right: 1px solid var(--chrome-mid); opacity: 0.5; }
.node.is-locked { border-color: var(--line-hot); background: linear-gradient(180deg, var(--surface-2), var(--bg)); }
.node.is-locked .node__tab { color: var(--ink); }
.node:hover { transform: translateY(-4px); border-color: var(--line-hot); }

.wire { flex: none; align-self: center; width: clamp(20px, 3vw, 56px); height: 2px;
  background: var(--line); position: relative; overflow: hidden; }
.wire::after { content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--signal-hi), transparent);
  transform: translateX(-120%); }
.wire.is-live::after { animation: pulse-travel 0.7s ease forwards; }
@keyframes pulse-travel { to { transform: translateX(260%); } }

.node--converge { flex: none; align-self: center; width: min(100%, 560px); margin-top: var(--s-2);
  border-color: var(--line-2); background: linear-gradient(180deg, var(--surface-2), var(--void)); }
.node--converge.is-locked { border-color: var(--signal); box-shadow: var(--glow-max); }
.node--converge .node__tab { color: var(--ink); }

/* ============================================================================
   03 — INSIGHTS / DISPATCHES
   ============================================================================ */
.sec--insights { background: var(--bg-2); }
.registry { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg);
  overflow: hidden; }
.registry__bar { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  justify-content: space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  background: var(--surface); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-meta); letter-spacing: 0.02em;
  color: var(--ink-dim); padding: 6px 13px; border: 1px solid var(--line); border-radius: var(--r-1);
  transition: color .2s ease, border-color .2s ease;
}
.chip:hover { color: var(--ink-2); border-color: var(--line-2); }
.chip.is-active { color: var(--ink); border-color: var(--line-hot); position: relative; }
.chip.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 1px;
  background: var(--signal); box-shadow: var(--glow-text); }
.reccount { font-size: var(--fs-meta); color: var(--ink-dim); letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums; }

.registry__head, .dispatch__row {
  display: grid;
  grid-template-columns: 116px 92px 128px 1fr;
  align-items: center; gap: var(--s-4);
}
.registry__head { padding: var(--s-3) var(--s-5); font-size: var(--fs-banner); color: var(--ink-faint);
  letter-spacing: 0.16em; border-bottom: 1px solid var(--line); }

.dispatches { list-style: none; padding: 0; }
.dispatch { border-bottom: 1px solid var(--line); }
.dispatch:last-child { border-bottom: none; }
.dispatch__row { width: 100%; text-align: left; padding: var(--s-4) var(--s-5);
  position: relative; transition: background .2s ease; }
.dispatch__row:hover { background: var(--surface); }
.dispatch__date, .dispatch__type { color: var(--ink-dim); font-size: var(--fs-meta); letter-spacing: 0.04em; }
.dispatch__vec { color: var(--ink-dim); font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-meta); letter-spacing: 0.02em; }
.dispatch__title { font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-h4); letter-spacing: -0.005em; color: var(--ink); line-height: 1.2; }
.dispatch__tick { position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: var(--signal); box-shadow: var(--glow-text); transform: scaleY(0); transform-origin: center;
  transition: transform .25s ease; }
.dispatch__row:hover .dispatch__tick { transform: scaleY(1); }
.dispatch__body { max-height: 0; overflow: hidden; padding: 0 var(--s-5);
  border-top: 1px solid transparent; }
.dispatch.is-open .dispatch__body { max-height: 360px; padding: 0 var(--s-5) var(--s-5) calc(116px + var(--s-5) + var(--s-4));
  border-top-color: var(--line); }
.dispatch__body p { color: var(--ink-2); font-size: var(--fs-body); max-width: 70ch; margin: var(--s-4) 0; }
.dispatch.is-hidden { display: none; }

/* ============================================================================
   04 — APEX AGENT (console)
   ============================================================================ */
.sec--agent { background: var(--bg); }
.console { border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--void);
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.55); max-width: 1080px; }
.console__bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-5); background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: var(--fs-meta); color: var(--ink-dim); }
.console__id { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); }
.chip-warn { position: relative; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-display); font-weight: 500;
  color: var(--ink-dim); border: 1px solid var(--line-2); border-radius: var(--r-1);
  padding: 5px 11px; font-size: var(--fs-banner); letter-spacing: 0.02em; cursor: help; }
.chip-warn__tip { position: absolute; top: calc(100% + 8px); right: 0; width: 260px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-1);
  padding: 10px 12px; font-size: var(--fs-banner); color: var(--ink-2); letter-spacing: 0.06em;
  line-height: 1.6; text-transform: none; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 5; }
.chip-warn:hover .chip-warn__tip, .chip-warn:focus .chip-warn__tip,
.chip-warn:focus-within .chip-warn__tip { opacity: 1; visibility: visible; transform: translateY(0); }

.console__screen { position: relative; padding: var(--s-5); min-height: 280px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(20,150,255,0.04), transparent 60%); }
.transcript { font-size: var(--fs-meta); color: var(--ink-2); letter-spacing: 0.04em;
  line-height: 1.9; text-transform: none; min-height: 220px; }
.transcript .boot { color: var(--ink-dim); white-space: pre-wrap; font-family: var(--f-mono); margin: 0; }
.transcript .qline { color: var(--ink); margin-top: var(--s-4); }
.transcript .qline::before { content: "— "; color: var(--ink-dim); }
.transcript .aline { color: var(--ink-2); margin-top: var(--s-2); white-space: pre-wrap; }
.transcript .status { color: var(--ink-dim); margin-top: var(--s-2); }
.transcript .ref { color: var(--signal); }
.caret { display: inline-block; width: 8px; background: var(--signal); margin-left: 2px;
  animation: blink 1.1s steps(1) infinite; }

.console__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: var(--s-4) var(--s-5) var(--s-5);
  border-top: 1px solid var(--line); background: var(--bg); }
.qchip { font-family: var(--f-serif); font-size: var(--fs-meta);
  color: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r-1);
  padding: 9px 15px; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.qchip:hover { color: var(--ink); border-color: var(--line-hot); }
.qchip.is-busy { opacity: 0.5; pointer-events: none; }

/* ============================================================================
   05 — THE OPERATOR
   ============================================================================ */
.sec--operator { background: var(--bg-2); }
.operator { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(28px, 5vw, 80px);
  align-items: start; }
.sechead--span { grid-column: 1 / -1; }
.plate { display: grid; gap: var(--s-3); }
.plate__frame { position: relative; aspect-ratio: 3/4; border: 1px solid var(--line-2);
  background: linear-gradient(160deg, var(--surface), var(--void)); border-radius: var(--r-2);
  overflow: hidden; }
.plate__img { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; }
.plate__glyph { font-family: var(--f-display); font-size: clamp(60px, 12vw, 120px); font-weight: 800;
  background: var(--chrome-grad-type); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; opacity: 0.6; }
.plate__corner { position: absolute; width: 16px; height: 16px; }
.plate__corner::before, .plate__corner::after { content: ""; position: absolute; background: var(--chrome-mid); opacity: 0.6; }
.plate__corner::before { width: 100%; height: 1px; } .plate__corner::after { width: 1px; height: 100%; }
.plate__corner--tl { top: 8px; left: 8px; } .plate__corner--tr { top: 8px; right: 8px; }
.plate__corner--tr::before { right: 0; } .plate__corner--tr::after { right: 0; }
.plate__corner--bl { bottom: 8px; left: 8px; } .plate__corner--bl::before { bottom: 0; } .plate__corner--bl::after { bottom: 0; }
.plate__corner--br { bottom: 8px; right: 8px; } .plate__corner--br::before { bottom: 0; right: 0; } .plate__corner--br::after { bottom: 0; right: 0; }
.plate figcaption { font-size: var(--fs-banner); color: var(--ink-dim); letter-spacing: 0.14em; }

.dossier { display: grid; gap: var(--s-6); }
.fields { display: grid; gap: 0; }
.fields div { display: grid; grid-template-columns: 130px 1fr; gap: var(--s-4); align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line-faint); }
.fields dt { font-family: var(--f-display); font-weight: 600; color: var(--ink-dim);
  letter-spacing: 0.03em; font-size: var(--fs-meta); }
.fields dd { font-family: var(--f-serif); color: var(--ink-2); font-size: var(--fs-body); line-height: 1.4; }
.pending { color: var(--ink-dim); }
.bio { display: grid; gap: var(--s-4); }
.bio p { font-size: var(--fs-body); color: var(--ink-2); max-width: 64ch; }
.record { list-style: none; padding: 0; display: grid; gap: 0;
  font-family: var(--f-serif); font-size: var(--fs-body); color: var(--ink-2); }
.record li { padding: 10px 0; border-bottom: 1px solid var(--line-faint); }

/* ============================================================================
   06 — COMMS / CONTACT (base plate)
   ============================================================================ */
.sec--contact { background: var(--trench); padding-bottom: var(--s-9); }
.baseplate { display: grid; gap: var(--s-8); }
.comms { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.channels { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.channel { display: grid; grid-template-columns: 170px 1fr auto; align-items: baseline; gap: var(--s-4);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.channel__name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h4);
  color: var(--ink); letter-spacing: -0.005em; }
.channel__lbl { font-family: var(--f-serif); color: var(--ink-dim); font-size: var(--fs-body); }
.channel__act { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-meta);
  color: var(--ink-2); letter-spacing: 0.02em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; transition: color .2s ease; }
.channel__act .arr { color: var(--ink-dim); transition: transform .2s ease, color .2s ease; }
.channel__act:hover { color: var(--ink); }
.channel__act:hover .arr { color: var(--signal); transform: translateX(3px); }
.comms__cta { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-2) 0; }
.comms__note { font-size: var(--fs-body); color: var(--ink-dim); max-width: 40ch; line-height: 1.6; }

.keystone { text-align: center; padding: var(--s-7) 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.keystone__word { font-family: var(--f-display); font-weight: 800; font-size: clamp(3rem, 14vw, 9rem);
  letter-spacing: 0.06em; line-height: 1; transform: skewX(-5deg); display: inline-block;
  background: var(--chrome-grad-type); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
.keystone__sub { display: block; margin-top: var(--s-3); font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-eyebrow); color: var(--ink-dim); letter-spacing: 0.3em; text-transform: uppercase; }

.footline { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center;
  padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-family: var(--f-serif); font-size: var(--fs-meta); color: var(--ink-dim); }
.footline .legal { color: var(--ink-faint); font-size: var(--fs-banner); letter-spacing: 0.02em; }

/* ============================================================================
   RESPONSIVE — mobile is first-class (frame degrades, pins collapse)
   ============================================================================ */
@media (max-width: 1024px) {
  .cover { grid-template-columns: 1fr; gap: var(--s-7); }
  .cover__right { display: none; } /* hide the seal where it would stack atop the headline */
  .hero-logo { display: inline-flex; align-items: center; gap: 11px; margin-bottom: var(--s-6); }
  .operator { grid-template-columns: 1fr; }
  .plate { max-width: 320px; }
  .comms { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --margin-x: clamp(16px, 5vw, 28px); }
  /* Frame degrades to slim banner + thin rail */
  .tabs { display: none; }
  .banner { grid-template-columns: 1fr auto; }
  .banner__edge--c, .banner__edge--r { display: none; }
  .banner__long { display: none; }
  .rail { left: 8px; width: 3px; top: calc(var(--banner-h) + 20px); bottom: 64px; }
  .rail__readout { display: none; }
  .crop { display: none; }

  .navpill {
    display: inline-flex; align-items: center; gap: 8px; justify-self: end;
    font-size: var(--fs-banner); color: var(--ink-2); letter-spacing: 0.14em;
    border: 1px solid var(--line-2); border-radius: var(--r-1); padding: 5px 10px;
  }
  .navpill__ct { color: var(--signal); font-variant-numeric: tabular-nums; }

  .navindex { display: block; position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(6,8,11,0.97); backdrop-filter: blur(8px); padding: var(--s-6) var(--s-5);
    overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .navindex[hidden] { display: none; }
  body.nav-open { overflow: hidden; }
  .navindex__head { display: flex; justify-content: space-between; align-items: center;
    color: var(--ink-dim); font-size: var(--fs-meta); letter-spacing: 0.18em;
    padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
  .navindex__x { color: var(--signal); font-size: var(--fs-meta); letter-spacing: 0.12em; }
  .navindex__list { display: grid; gap: 2px; margin-top: var(--s-5); }
  .navindex__list a { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.4rem, 7vw, 2rem);
    color: var(--ink); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-faint); letter-spacing: 0.01em; }
  .navindex__list a:active { color: var(--signal-hi); }

  /* Thesis: no pin — static sequential reveals */
  .thesis-pin { min-height: auto; }
  .term { padding-left: 0; }
  .term__leader { display: none; }

  /* Doctrine: vertical stack, no horizontal scrub */
  .chains { gap: var(--s-6); }
  .track__row { flex-direction: column; gap: 0; }
  .node { flex: none; width: 100%; }
  .wire { width: 2px; height: clamp(24px, 5vw, 40px); align-self: center; }
  .wire::after { width: 100%; height: 40%;
    background: linear-gradient(180deg, transparent, var(--signal-hi), transparent);
    transform: translateY(-120%); }
  .wire.is-live::after { animation: pulse-travel-v 0.7s ease forwards; }
  @keyframes pulse-travel-v { to { transform: translateY(260%); } }
  .node--converge { width: 100%; }

  /* Insights: rows become stacked cards */
  .registry__head { display: none; }
  .dispatch__row { grid-template-columns: auto auto auto; grid-template-areas:
      "date type topic" "title title title"; gap: var(--s-2) var(--s-3);
    row-gap: var(--s-2); }
  .dispatch__date { grid-area: date; } .dispatch__type { grid-area: type; }
  .dispatch__vec { grid-area: topic; }
  .dispatch__title { grid-area: title; margin-top: 4px; }
  .dispatch.is-open .dispatch__body { padding-left: var(--s-5); }
  .filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; }
  .filters::-webkit-scrollbar { display: none; }

  .waveform { display: none; }
  .footline { flex-direction: column; text-align: center; gap: 8px; }
  .channel { grid-template-columns: 1fr auto; }
  .channel__lbl { display: none; }
}

@media (max-width: 520px) {
  .proclaim__l { transform: skewX(-4deg); }
  .routing div { grid-template-columns: 92px 1fr; }
  .console__bar { flex-direction: column; align-items: flex-start; }
  .chip-warn__tip { right: auto; left: 0; }
}

/* ============================================================================
   REDUCED MOTION — everything visible and static
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .seal__rings .ring, .seal__sweep { animation: none; }
  .seal__sparks { display: none; }
  .prompt__caret, .caret { animation: none; opacity: 1; }
  html.pre [data-rv] { opacity: 1 !important; }
  .rv-bar { display: none !important; }
}