/* ============================================================
   TESHLŌKI: Flagship "Orchestration Console"
   Hand-written. No framework. No page-builder.
   Order: Tokens, Base, Type, Nav, Hero, Lattice,
   Sections, Components, Footer, Motion, Responsive
   ============================================================ */

/* ============ 0. SELF-HOSTED FONTS ============
   Zero third-party connections. OFL-licensed.
   'Archivo Expanded' is the Archivo variable file with the
   width axis pinned to 125%. Google never served a family
   by that name, so the display face silently fell back to
   regular Archivo until Rev. 2026-07-06. Now it's real. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-var-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-var-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Expanded';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 125%;
  font-display: swap;
  src: url('/fonts/archivo-var-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Expanded';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 125%;
  font-display: swap;
  src: url('/fonts/archivo-var-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-mono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-mono-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-mono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plex-mono-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plex-mono-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================== 1. TOKENS ===================== */
:root {
  /* Surfaces: near-monochrome graphite */
  --ink:        #0A0B0D;
  --ink-2:      #101216;   /* raised modules */
  --ink-3:      #15181D;   /* inset / hover */
  --ink-4:      #1B1F25;

  /* Text: warm bone, never cold white */
  --bone:       #ECEAE2;
  --bone-dim:   #C9C7BE;
  --mist:       #8C9099;   /* secondary, ≥4.5:1 on ink */

  /* Lines */
  --line:       #20242B;
  --line-2:     #2B3038;

  /* Single accent: ember, used sparingly */
  --signal:     #E9A23B;
  --signal-ink: #0A0B0D;
  --signal-12:  rgba(233,162,59,0.12);
  --signal-24:  rgba(233,162,59,0.24);
  --signal-glow:rgba(233,162,59,0.55);
  --signal-dim:   #C9974A;  /* muted amber, ≥5:1 on ink — legible secondary amber text */
  --signal-dim-2: #A88D5F;  /* muted amber, tertiary */
  --signal-wash:  #1C170E;  /* gradient stop behind amber-bordered cards */

  /* Audit failure state only, should never render */
  --warn:       #E05252;

  /* Type */
  --display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Scale (fluid) */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --t-2xl:  clamp(1.6rem, 1.3rem + 1.6vw, 2.25rem);
  --t-3xl:  clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --t-hero: clamp(2.5rem, 1.2rem + 5.4vw, 5rem);

  /* Layout */
  --max:        1180px;
  --pad:        clamp(1.25rem, 5vw, 2.5rem);
  --section-y:  clamp(4.5rem, 9vw, 8rem);
  --nav-h:      68px;
  --radius:     4px;
  --radius-lg:  10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===================== 2. BASE ===================== */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--bone-dim);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient grain/vignette: extremely subtle, one decorative layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 600px at 78% -8%, var(--signal-12), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, rgba(255,255,255,0.025), transparent 55%);
}

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  position: relative;
  z-index: 1;
}

::selection { background: var(--signal); color: var(--signal-ink); }

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: var(--signal);
  color: var(--signal-ink);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font: 600 var(--t-sm)/1 var(--mono);
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===================== 3. TYPOGRAPHY ===================== */
h1, h2, h3 { color: var(--bone); font-weight: 700; line-height: 1.04; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 1.25rem;
}
/* The macron: signature motif, drawn from the Ō */
.eyebrow__macron {
  width: 26px;
  height: 2px;
  background: var(--signal);
  flex: none;
}

/* The Ō treated as an emphasized glyph in running text */
.o-mark { color: var(--signal); }
.accent { color: var(--signal); }

.section-head { max-width: 64ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-title {
  font-family: var(--display);
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
}
.section-lead {
  margin-top: 1.25rem;
  font-size: var(--t-lg);
  color: var(--mist);
  max-width: 60ch;
}
/* MOD·05 is the signature move (the page audits itself) — it earns more
   visual weight than the other sections, not the same h2 as everything else. */
.section-title--proof { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem); }

/* ===================== 4. NAV ===================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10,11,13,0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav__inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark { display: inline-flex; align-items: center; }
.wordmark__text {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--bone);
}
.wordmark__o { color: var(--signal); animation: wordmark-o-glow 4s cubic-bezier(0.37,0,0.63,1) infinite; }
/* The canonical "Ō as light source" animation — same curve, timing, and
   color math reused verbatim (not just approximated) in the wallpaper HTML
   and the archived live SVGs, so all three genuinely match instead of
   three independent approximations. Two shadow layers stand in for a near
   glow and a wider ambient bloom; the fill itself brightens at the peak so
   the glyph reads as emitting light, not just wearing a halo. Peak sits at
   42% instead of 50% so the rise and fall aren't mirror images of each
   other — that asymmetry is what keeps a slow loop from reading as a
   mechanical blink. Honors the site-wide prefers-reduced-motion rule
   (section 10) automatically, since that rule clamps
   animation-duration/iteration-count on * globally. */
@keyframes wordmark-o-glow {
  0%   { text-shadow: 0 0 2px rgba(233,162,59,0.4), 0 0 9px rgba(233,162,59,0.12); color: var(--signal); }
  42%  { text-shadow: 0 0 4px rgba(233,162,59,0.85), 0 0 16px rgba(233,162,59,0.3); color: #F5C069; }
  100% { text-shadow: 0 0 2px rgba(233,162,59,0.4), 0 0 9px rgba(233,162,59,0.12); color: var(--signal); }
}

.nav__links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.nav__links a {
  font: 500 var(--t-sm)/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--mist);
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--bone); }

.nav__cta { margin-left: 0.25rem; }
.nav__start-link { display: none; }

.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}
.nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--bone);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-8px) rotate(-45deg); }

/* ===================== 5. BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.8rem 1.4rem;
  font: 600 var(--t-sm)/1 var(--mono);
  letter-spacing: 0.03em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  cursor: pointer;
}
.btn__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
  background: var(--signal);
  color: var(--signal-ink);
  box-shadow: 0 0 0 0 var(--signal-glow);
}
.btn--primary:hover {
  background: #F3B254;
  box-shadow: 0 8px 28px -10px var(--signal-glow);
}
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--bone-dim); background: var(--ink-2); }

.btn--sm  { min-height: 40px; padding: 0.55rem 1rem; }
.btn--lg  { min-height: 56px; padding: 1rem 1.9rem; font-size: var(--t-base); }

/* ===================== 6. HERO ===================== */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5.5rem));
  padding-bottom: var(--section-y);
  border-bottom: 1px solid var(--line);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-hero);
  letter-spacing: -0.03em;
  margin-bottom: 1.75rem;
}
.hero__sub {
  font-size: var(--t-lg);
  color: var(--bone-dim);
  max-width: 46ch;
  margin-bottom: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.5rem; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.hero__trust li { display: flex; align-items: center; gap: 1.5rem; }
.hero__trust li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  background: var(--signal);
  border-radius: 50%;
}

/* discipline strip */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font: 400 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  opacity: 0.85;
}

/* ===================== 7. ORCHESTRATION LATTICE ===================== */
.orchestrator-stage { position: relative; display: flex; justify-content: center; }
@media (min-width: 961px) {
  .orchestrator-stage {
    align-self: start;
    margin-top: clamp(1rem, 4vw, 2.5rem);
    transform: scale(1.1);
    transform-origin: center top;
  }
}

/* Pause/play control for the ranking demo: a sibling of the role="img"
   figure (see index.html comment), overlaid on its top-left corner. */
.rank__pause {
  position: absolute;
  top: 1.65rem;
  left: 1.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--mist);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.rank__pause:hover, .rank__pause:focus-visible { color: var(--bone); border-color: var(--signal); }
.rank__pause-icon { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rank__pause .rank__pause-icon--play { display: none; }
.rank__pause[aria-pressed="true"] .rank__pause-icon--pause { display: none; }
.rank__pause[aria-pressed="true"] .rank__pause-icon--play { display: block; }
/* Paused should look paused: freeze every CSS animation in the panel too
   (blinking cursors/dots, the pulsing ranked-result glow), not just stop
   the JS timeline. */
.orchestrator--ranking.is-paused *,
.orchestrator--ranking.is-paused *::before,
.orchestrator--ranking.is-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .rank__pause { display: none; }
}
.orchestrator {
  position: relative;
  border: none;
  background: transparent;
  padding: 1.1rem;
  width: 100%;
}
/* Frameless by design: no card edge, just a soft directional bloom so the
   content still reads as lit/staged rather than pasted flat on the page. */
.orchestrator::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(58% 50% at 50% 30%, var(--signal-12), transparent 72%);
  filter: blur(48px);
  pointer-events: none;
}
.orchestrator__cap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.35rem;
  gap: 0.6rem;
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0.4rem 0.4rem 1rem;
}
.orchestrator__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  color: var(--signal);
  letter-spacing: 0.18em;
}
.orchestrator__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal-glow);
  animation: blink 2.2s var(--ease) infinite;
}
.orchestrator__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 1rem 0.4rem 0.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}
.orchestrator__foot span { display: inline-flex; align-items: center; gap: 0.5rem; }
.orchestrator__foot span::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--signal);
  border-radius: 50%;
}

/* ---- orchestrator variant: "The Found One" (search & acquisition) ---- */
.orchestrator--found-one .orchestrator__cap .eyebrow__macron { color: var(--signal); }
.orchestrator__status { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; letter-spacing: 0.14em; color: var(--bone-dim); }
.orchestrator__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal-glow); animation: blink 1.4s steps(1) infinite; }
.orchestrator__status.found { color: var(--signal); }
.orchestrator__status.found::before { animation: none; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.25; } }
/* "The Ranking" is a 3-phase live-status readout, not a single scan-then-
   settle moment — the dot should keep blinking through every phase, not
   just the first ("without") one, so it reads as continuously live. */
.orchestrator--ranking .orchestrator__status.found::before { animation: blink 1.4s steps(1) infinite; }

.orchestrator__field { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 13px; padding: 6px; }
@media (max-width: 800px) { .orchestrator__field { grid-template-columns: repeat(5, 1fr); gap: 11px; padding: 4px; } }
@media (max-width: 520px) { .orchestrator__field { grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 3px; } }
@media (max-width: 380px) { .orchestrator__field { grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 2px; } }

.orch-site { position: relative; aspect-ratio: 5 / 4; background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; overflow: hidden; transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease; }
.orch-chrome { height: 26%; min-height: 9px; display: flex; align-items: center; gap: 3px; padding: 0 5px; background: #12151a; border-bottom: 1px solid var(--line-2); }
.orch-chrome i { width: 3px; height: 3px; border-radius: 50%; background: var(--mist); opacity: 0.45; flex: 0 0 auto; }
.orch-chrome span { margin-left: 4px; height: 3px; flex: 1; max-width: 60%; border-radius: 2px; background: #20242b; }
.orch-body { padding: 7px 6px; display: flex; flex-direction: column; gap: 4px; }
.orch-hd { height: 6px; width: 64%; background: #272c34; border-radius: 2px; }
.orch-ln { height: 3px; width: 84%; background: #1f242b; border-radius: 2px; }
.orch-ln-s { width: 50%; }
.orch-rd { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--signal), transparent); }
.orch-site.reading { border-color: #3b434f; }
.orch-site.reading .orch-rd { animation: read 0.52s ease-in-out; }
@keyframes read { 0% { top: 0; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.orch-site.found { border-color: var(--signal); z-index: 3; transform: scale(1.16); box-shadow: 0 0 0 1px var(--signal), 0 12px 36px -8px var(--signal-glow); }
.orch-site.found .orch-chrome { background: #1c1608; border-bottom-color: rgba(233, 162, 59, 0.4); }
.orch-site.found .orch-chrome i { background: var(--signal); opacity: 0.85; }
.orch-site.found .orch-chrome span { background: rgba(233, 162, 59, 0.4); }
.orch-site.found .orch-body { align-items: center; justify-content: center; gap: 4px; padding: 7px 6px; overflow: hidden; }
.orch-glyph { font: 800 6.6px/1 var(--display); letter-spacing: -0.02em; color: var(--bone); white-space: nowrap; text-align: center; }
.orch-glyph em { font-style: normal; color: var(--signal); }
.orch-wm { font: 500 5px/1 var(--mono); letter-spacing: 0.03em; color: var(--mist); text-transform: lowercase; white-space: nowrap; text-align: center; }
.orch-site.found.lit { animation: ignite 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes ignite { 0% { box-shadow: 0 0 0 1px var(--signal), 0 0 0 0 var(--signal-glow); } 50% { box-shadow: 0 0 0 1px var(--signal), 0 0 30px 6px var(--signal-glow); } 100% { box-shadow: 0 0 0 1px var(--signal), 0 12px 36px -8px var(--signal-glow); } }
.orch-site.found .orch-glyph { animation: rest 3.4s ease-in-out infinite; }
@keyframes rest { 0%, 100% { text-shadow: 0 0 10px rgba(233, 162, 59, 0.35); } 50% { text-shadow: 0 0 3px rgba(233, 162, 59, 0.15); } }

.orchestrator__reticle { position: absolute; left: 0; top: 0; width: 78px; height: 64px; pointer-events: none; transform: translate(-100px, -100px); opacity: 0; transition: transform 0.5s cubic-bezier(0.55, 0.12, 0.2, 1), width 0.35s ease, height 0.35s ease, opacity 0.3s; }
.orch-frame { position: absolute; inset: 0; }
.orch-frame span { position: absolute; width: 11px; height: 11px; border: 2px solid var(--signal); }
.orch-frame span:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.orch-frame span:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.orch-frame span:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.orch-frame span:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.orchestrator__reticle.lock { filter: drop-shadow(0 0 6px var(--signal-glow)); }

@media (prefers-reduced-motion: reduce) {
  .orchestrator__reticle { display: none; }
  .orch-site.reading .orch-rd { animation: none; opacity: 0; }
  .orch-site.found .orch-glyph { animation: none; }
  .orch-site.found.lit { animation: none; }
}

/* ---- orchestrator variant: "The Ranking" (search & AI-answer visibility) ----
   Same business, same query, run three times: buried without TESHLŌKI,
   #1 in search with it, then cited directly in an AI answer. Reuses the
   shared .orchestrator/.orchestrator__cap/.orchestrator__status shell —
   only the field content and status text differ from "Found One". */
.rank__sbar { display: flex; align-items: center; gap: 9px; background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 20px; padding: 8px 14px; margin: 0 0.4rem 0.9rem; }
.rank__sbar svg { flex: 0 0 auto; opacity: 0.5; }
.rank__sq { font: 500 12px/1 var(--mono); color: var(--bone); letter-spacing: 0.01em; }
.rank__cursor { display: inline-block; width: 1.5px; height: 12px; background: var(--signal); margin-left: 1px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }

/* Fixed height, not min-height: the three scenes measure 207/223/224px
   naturally at desktop widths, and letting the shown scene switch to
   position:relative (old behavior) let the box grow/shrink by up to 17px
   as scenes swapped. Every scene now stays position:absolute always —
   none of them ever contribute to .rank__results's own size — so the
   panel is static across the loop.
   Mobile needs a taller fixed height, not the same one: "with — search"
   wraps its title to two lines below ~430px and measures up to 272px at
   320-375px width (checked 320/375/390/430) — the original 228px, sized
   only from a desktop measurement, overflowed the box on phones with
   nothing to contain it, which is exactly the text-bleeds-past-the-edge
   bug this was fixed for. */
.rank__results { position: relative; height: 228px; padding: 0 0.4rem; }
@media (max-width: 800px) {
  .rank__results { height: 284px; }
}
.rank__scene { position: absolute; top: 0; left: 0.4rem; right: 0.4rem; display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity 0.5s ease; }
.rank__scene.show { opacity: 1; }

.rank__row { opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.rank__row.show { opacity: 1; transform: translateY(0) scale(1); }

.rank__row--top { background: linear-gradient(180deg, var(--signal-wash), var(--ink-2)); border: 1px solid var(--signal); border-radius: 8px; padding: 0.65rem 0.75rem 0.7rem; box-shadow: 0 0 0 1px var(--signal-12), 0 0 22px -6px var(--signal-glow); }
.rank__row--top.show { animation: rank-pulse 3.2s ease-in-out 0.5s infinite; }
@keyframes rank-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--signal-12), 0 0 22px -6px var(--signal-glow); }
  50% { box-shadow: 0 0 0 1px var(--signal-24), 0 0 30px -4px var(--signal-glow); }
}
.rank__line { display: flex; align-items: center; gap: 8px; }
.rank__row--top .rank__num { font: 600 11px/1 var(--mono); color: var(--signal); flex: 0 0 auto; }
.rank__row--top .rank__dom { font: 500 10.5px/1 var(--mono); color: var(--bone-dim); }
.rank__badge { margin-left: auto; font: 600 9px/1 var(--mono); letter-spacing: 0.05em; color: var(--signal); border: 1px solid var(--signal); border-radius: 9px; padding: 2.5px 7px 3px; white-space: nowrap; }
.rank__row--top .rank__title { font: 700 13px/1.25 var(--display); color: var(--bone); margin: 0.35rem 0 0.2rem; }
.rank__row--top .rank__snip { font: 400 10.5px/1.4 var(--body); color: var(--signal-dim); }

.rank__row--dim { padding: 0.15rem 0; opacity: 0; }
.rank__row--dim.show { opacity: 1; }
.rank__row--dim .rank__num { font: 600 11px/1 var(--mono); color: var(--mist); flex: 0 0 auto; }
.rank__row--dim .rank__dom { font: 400 10.5px/1 var(--mono); color: var(--bone-dim); }
.rank__row--dim .rank__title { font: 400 11.5px/1.3 var(--body); color: var(--bone-dim); margin-top: 2px; margin-left: 24px; }

.rank__dots { text-align: center; color: var(--mist); font: 400 13px/1 var(--body); letter-spacing: 4px; opacity: 0; transition: opacity 0.4s ease; }
.rank__dots.show { opacity: 1; }

.rank__buried { opacity: 0; transform: translateY(3px); transition: opacity 0.5s ease, transform 0.5s ease; padding: 0.15rem 0 0; }
.rank__buried.show { opacity: 1; transform: translateY(0); }
.rank__buried .rank__pageline { font: 600 9.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--signal-dim); margin-bottom: 3px; }
.rank__buried .rank__dom { font: 400 10.5px/1 var(--mono); color: var(--signal-dim-2); }
.rank__buried .rank__title { font: 400 11px/1.3 var(--body); color: var(--bone-dim); margin-top: 1px; }

.rank__caption { text-align: center; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--line); font: 700 12.5px/1.4 var(--display); color: var(--bone); opacity: 0; transition: opacity 0.5s ease; }
.rank__caption.show { opacity: 1; }
.rank__caption em { font-style: normal; color: var(--signal); }
.rank__caption--muted { color: var(--bone-dim); font-weight: 600; }

/* AI-answer scene */
.rank__ai-q { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.rank__ai-q.show { opacity: 1; transform: translateY(0); }
.rank__ai-q .rank__who { font: 600 9px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist); border: 1px solid var(--line-2); border-radius: 9px; padding: 3px 8px; flex: 0 0 auto; }
.rank__ai-q .rank__q-text { font: 500 12px/1.3 var(--body); font-style: italic; color: var(--bone-dim); }

.rank__ai-card { margin-top: 0.65rem; background: linear-gradient(180deg, var(--signal-wash), var(--ink-2)); border: 1px solid var(--signal); border-radius: 10px; padding: 0.8rem 0.85rem 0.75rem; box-shadow: 0 0 0 1px var(--signal-12), 0 0 22px -6px var(--signal-glow); opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.rank__ai-card.show { opacity: 1; transform: translateY(0) scale(1); animation: rank-pulse 3.2s ease-in-out 0.5s infinite; }
.rank__ai-card .rank__who { font: 600 9px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); margin-bottom: 0.5rem; display: block; }
.rank__ai-a { font: 400 12.5px/1.55 var(--body); color: var(--bone); min-height: 2.4em; }
.rank__ai-a b { font-weight: 800; color: var(--signal); }
.rank__ai-a .rank__cursor2 { display: inline-block; width: 1.5px; height: 12px; background: var(--signal); margin-left: 1px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }

.rank__ai-source { margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid var(--signal-12); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.4s ease; }
.rank__ai-source.show { opacity: 1; }
.rank__ai-source .rank__dom { font: 500 10.5px/1 var(--mono); color: var(--bone-dim); }

.rank__ai-disclaimer { margin-top: 0.5rem; text-align: center; font: 400 9.5px/1 var(--mono); color: var(--mist); opacity: 0; transition: opacity 0.4s ease; }
.rank__ai-disclaimer.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rank__cursor, .rank__cursor2, .rank__row--top.show, .rank__ai-card.show { animation: none; }
  .rank__row, .rank__scene, .rank__buried, .rank__dots, .rank__caption,
  .rank__ai-q, .rank__ai-card, .rank__ai-source, .rank__ai-disclaimer,
  .orchestrator--ranking .orchestrator__status,
  .orchestrator--ranking .orchestrator__status::before { transition: none; }
}

.lattice { width: 100%; height: auto; color: var(--line); }
.lattice__grid  { color: var(--line); opacity: 0.5; }
.lattice__frame { color: var(--line); }

.lattice__wires .wire { stroke: var(--line-2); }
.lattice__ports circle {
  fill: var(--ink);
  stroke: var(--signal);
  stroke-width: 1.5;
}
.lattice__particles .particle {
  fill: var(--signal);
  filter: drop-shadow(0 0 3px var(--signal-glow));
}

/* core node */
.node--core circle { fill: var(--ink-2); stroke: var(--line-2); }
.node--core .node__ring {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
  opacity: 0.85;
  transform-origin: 110px 220px;
  animation: pulse 4.25s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.14); opacity: 0.2; }
}
.node__glyph {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  fill: var(--signal);
  text-anchor: middle;
  dominant-baseline: central;
}

/* target nodes */
.node--target rect { fill: var(--ink-3); stroke: var(--line-2); }
.node--target .node__label { font: 700 14px var(--display); fill: var(--bone); letter-spacing: 0.02em; }
.node--target .node__meta  { font: 400 10px var(--mono);   fill: var(--mist); letter-spacing: 0.08em; text-transform: uppercase; }

/* ===================== 8. SECTIONS BASE ===================== */
.section { padding-block: var(--section-y); border-bottom: 1px solid var(--line); }
.section--alt { background: var(--ink-2); }

/* MOD·01 · pillars (four audiences, 2×2) */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pillar {
  background: var(--ink);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section--alt .pillar { background: var(--ink-2); }
.pillar__code {
  font: 600 var(--t-sm)/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--signal);
  padding-top: 0.4rem;
  border-top: 2px solid var(--signal);
  width: fit-content;
}
.pillar__title { font-family: var(--display); font-size: var(--t-xl); }
.pillar__body { color: var(--mist); font-size: 0.95rem; }

/* MOD·02 · capability modules (bento-ish) */
.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.module {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.module:hover { border-color: var(--line-2); background: var(--ink-3); }
.module__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.module__icon { width: 30px; height: 30px; fill: none; stroke: var(--signal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Proprietary mark, not a borrowed icon library: every module icon carries
   exactly one solid-fill amber accent (dot, node, or mark), the same
   duotone rule applied consistently across all six. */
.module__icon .icon-accent { fill: var(--signal); stroke: none; }
.module__id { font: 500 var(--t-xs)/1 var(--mono); letter-spacing: 0.12em; color: var(--mist); }
.module__title { font-family: var(--display); font-size: var(--t-lg); margin-bottom: 0.6rem; }
.module__body { color: var(--mist); font-size: 0.92rem; }

/* MOD·03 · method */
.method {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  counter-reset: step;
}
.method__step {
  background: var(--ink-2);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.method__num {
  font: 600 var(--t-xl)/1 var(--mono);
  color: var(--signal);
  flex: none;
  width: 2.5ch;
}
.method__body h3 { font-family: var(--display); font-size: var(--t-lg); margin-bottom: 0.4rem; }
.method__body p { color: var(--mist); font-size: 0.92rem; }

/* MOD·04 · standard ledger */
.standard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.standard__head { margin-bottom: 0; }
.standard__head .btn { margin-top: 2rem; }
.ledger {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ledger li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.25rem;
  font: 500 0.92rem/1.3 var(--body);
  color: var(--bone-dim);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.ledger li:last-child { border-bottom: none; }
.ledger li::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  background: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* MOD·05 · self-audit console (signature) */
.audit {
  max-width: 920px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.9);
  overflow: hidden;
}
.audit__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--mist);
}
.audit__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--signal);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.audit__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal-glow);
  animation: blink 2.2s var(--ease) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.audit__rows {
  padding: 1rem 1.25rem 0.6rem;
  min-height: 272px; /* reserves space so the run doesn't shift layout */
}
.audit-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.38rem 0;
  font: 400 var(--t-sm)/1.4 var(--mono);
  color: var(--bone-dim);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.audit-row.in { opacity: 1; transform: none; }
.audit-row__id { flex: none; }
.audit-row__lead {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  border-bottom: 1px dotted var(--line-2);
  transform: translateY(-4px);
}
.audit-row__detail { color: var(--mist); text-align: right; }
.audit-row__state {
  flex: none;
  min-width: 4ch;
  text-align: right;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--signal);
}
.audit-row__state.fail { color: var(--warn); }

.audit__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--line);
  font: 500 var(--t-xs)/1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--mist);
}
.audit__noscript {
  padding: 1.25rem;
  border-top: 1px solid var(--line);
  font: 400 var(--t-sm)/1.6 var(--mono);
  color: var(--mist);
}
.audit__cta {
  padding: 0 1.25rem 1.1rem;
  font: 500 var(--t-sm)/1.6 var(--mono);
  color: var(--bone-dim);
}
.audit__cta a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.audit__cta a:hover { color: #F3B254; }

/* Shared mailto-copy fallback: used inside the dynamic audit CTA
   and appended after every static mailto: link on the site. */
.mailto-copy {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.mailto-copy:hover { color: var(--bone-dim); }
.mailto-copy:disabled { color: var(--signal); cursor: default; text-decoration: none; }

/* Wrapper pairing a static mailto: link with its copy-fallback button.
   Using a wrapper (not a next-sibling insert) keeps the pair as one
   flex item, so it lays out correctly regardless of the parent's own
   flex direction (row nav vs. column footer vs. centered hero). */
.mailto-copy-group {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mailto-copy-group .mailto-copy {
  font: 500 var(--t-xs)/1.4 var(--mono);
  letter-spacing: 0.04em;
}
.mailto-copy-group:not(.mailto-copy-group--stack) .mailto-copy::before { content: "· "; }

/* After a big pill CTA button: stack the fallback centered below it */
.mailto-copy-group--stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

/* Scroll progress: thin signal line across the very top */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--signal);
  z-index: 110;
  pointer-events: none;
  will-change: transform;
}

/* Benchmarks: this page vs the median website */
.bench {
  max-width: 920px;
  margin-top: 2.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--ink-2, rgba(255,255,255,0.02));
  overflow: hidden;
}
.bench__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--line-2);
  font: 500 var(--t-xs)/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}
.bench__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font: 400 var(--t-sm)/1.5 var(--mono);
  align-items: baseline;
}
.bench__row:last-of-type { border-bottom: none; }
.bench__metric { color: var(--mist); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.bench__us { color: var(--signal); font-weight: 600; }
.bench__them { color: var(--bone-dim); }
/* Exhibits: measured proof, receipt-quiet (no new showpiece) */
.exhibits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.exhibit {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.exhibit__tag {
  font: 600 var(--t-xs)/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  padding-top: 0.4rem;
  border-top: 2px solid var(--signal);
  width: fit-content;
}
.exhibit__body { color: var(--mist); font-size: 0.92rem; }
.exhibit__proves {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font: 500 var(--t-xs)/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--bone-dim);
}

.bench__foot {
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--line-2);
  font: 400 var(--t-xs)/1.7 var(--mono);
  color: var(--mist);
}

/* Back to top */
.totop {
  font: 400 var(--t-xs)/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  text-decoration: none;
}
.totop:hover { color: var(--bone); }

@media (max-width: 520px) {
  .bench__head, .bench__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .bench__head span:not(:first-child) { display: none; }
  .bench__us::before { content: "this page · "; color: var(--mist); font-weight: 400; }
  .bench__them::before { content: "median site · "; }
}

/* Plain-English toggle: fixed console switch */
.lang-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.7rem 1rem;
  background: var(--ink-2);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.85);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-toggle:hover { border-color: var(--bone-dim); color: var(--bone); }
.lang-toggle__state {
  color: var(--bone-dim);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 0.25rem 0.4rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lang-toggle.on { border-color: var(--signal); color: var(--bone); }
.lang-toggle.on .lang-toggle__state {
  color: var(--signal-ink);
  background: var(--signal);
  border-color: var(--signal);
}

/* One-time first-visit nudge toward the toggle (JS-gated, session-once) */
.lang-hint {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 95;
  max-width: 230px;
  padding: 0.6rem 0.8rem;
  background: var(--ink-2);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.85);
  border: 1px solid var(--signal);
  border-radius: var(--radius);
  font: 500 var(--t-xs)/1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--bone);
  pointer-events: none;
  animation: hint-in 0.3s var(--ease);
}
@keyframes hint-in { from { opacity: 0; transform: translateY(6px); } }

/* Console caret: the prompt is live */
.eyebrow__caret {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.45em;
  background: var(--signal);
  vertical-align: text-bottom;
  animation: caret-blink 1.15s steps(1, end) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Cross-document view transitions: page-to-page cuts like one system,
   not three documents. Progressive enhancement; older browsers ignore. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }

/* Point-it-at-your-own-site form */
.audit-form { max-width: 920px; margin-top: 1.75rem; }
.audit-form__label { margin-bottom: 0.9rem; }
.audit-form__row { display: flex; gap: 0.75rem; }
.audit-form__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0.8rem 1rem;
  background: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font: 500 var(--t-sm)/1.2 var(--mono);
  color: var(--bone);
  transition: border-color 0.2s var(--ease);
}
.audit-form__input::placeholder { color: var(--mist); }
.audit-form__input:hover { border-color: var(--bone-dim); }
.audit-form__input:focus-visible { border-color: var(--signal); outline-offset: 0; }
.audit-form__hint {
  margin-top: 0.7rem;
  font: 400 var(--t-xs)/1.7 var(--mono);
  color: var(--mist);
  max-width: 62ch;
}
/* The remote audit needs scripts; hide the form when they're off */
html:not(.js) .audit-form { display: none; }

.btn[disabled] { opacity: 0.55; cursor: progress; box-shadow: none; }

/* MOD·06 · The Printout.
   The console prints its receipt: the one light artifact on the
   dark desk. Single ink on bone, like a real thermal print. The
   ember stays outside on the console. Verified: ink on bone 14.7:1,
   muted ink (66%) ≈6:1. */
.printout {
  max-width: 660px;
  margin-inline: auto;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.55));
}
.printout__tear {
  --zig: 14px;
  height: 8px;
}
.printout__tear--top {
  background: conic-gradient(from 135deg at 50% 100%, var(--bone) 90deg, transparent 0) 0 0 / var(--zig) 100%;
}
.printout__tear--bottom {
  background: conic-gradient(from -45deg at 50% 0, var(--bone) 90deg, transparent 0) 0 0 / var(--zig) 100%;
}
.printout__paper {
  background: var(--bone);
  color: var(--ink);
  padding: 2.25rem clamp(1.25rem, 4vw, 2.25rem) 1.9rem;
}
.printout__paper ::selection { background: var(--ink); color: var(--bone); }
.printout__head {
  text-align: center;
  font: 600 var(--t-sm)/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.printout__meta {
  text-align: center;
  font: 500 var(--t-xs)/1.6 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 11, 13, 0.62);
  margin-top: 0.35rem;
}
.printout .o-mark { color: var(--ink); }

.compare {
  margin-top: 1.6rem;
  border-top: 2px dashed rgba(10, 11, 13, 0.35);
  border-bottom: 2px dashed rgba(10, 11, 13, 0.35);
  font-family: var(--mono);
}
.compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}
.compare__row > span {
  padding: 0.7rem 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  border-bottom: 1px dashed rgba(10, 11, 13, 0.22);
}
.compare__row:last-child > span { border-bottom: none; }
.compare__row > span:first-child {
  color: rgba(10, 11, 13, 0.66);
  text-decoration: line-through;
  text-decoration-color: rgba(10, 11, 13, 0.4);
}
.compare__us { font-weight: 600; }
.compare__row--head > span {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 2px dashed rgba(10, 11, 13, 0.35);
}
/* Matches the :first-child strike rule's specificity so the header
   column label is never struck through */
.compare__row--head > span:first-child { text-decoration: none; }
.printout__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  font: 600 var(--t-sm)/1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.printout__fine {
  text-align: center;
  margin-top: 1.4rem;
  font: 500 var(--t-xs)/1.6 var(--mono);
  letter-spacing: 0.08em;
  color: rgba(10, 11, 13, 0.62);
}

/* MOD·07 · faq */
.faq__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq__head { margin-bottom: 0; }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--bone);
  background: none;
  cursor: pointer;
}
.faq-mark { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; transition: transform 0.3s var(--ease); }
.faq-item.open .faq-mark { transform: rotate(135deg); }
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s var(--ease);
}
.faq-answer p { padding: 0 0 1.5rem; color: var(--mist); max-width: 62ch; }
/* wrap allowed: plain-English tab labels run longer than the acronyms */
.faq-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; border-bottom: 1px solid var(--line); }
.faq-tab {
  font: 600 var(--t-sm)/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--mist);
  background: none;
  border: none;
  padding: 0 0 0.7rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.faq-tab.is-active { color: var(--signal); border-bottom-color: var(--signal); }
.faq-tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.faq-tab-panel p { padding-top: 1.25rem; }
.faq-tab-panel[hidden] { display: none; }
/* Panel entry matches the accordion's texture: one soft beat, compositor-only */
.faq-tab-panel.is-active { animation: tab-fade 0.12s var(--ease); }
@keyframes tab-fade { from { opacity: 0; } }

/* MOD·08 · operator */
.operator { max-width: 56ch; }
.operator__quote p {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--bone);
}
.operator__sig {
  margin-top: 1.75rem;
  font: 500 var(--t-sm)/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
}

/* MOD·09 · start */
.start { text-align: center; border-bottom: none; }
.start__inner { max-width: 60ch; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.start__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-3xl);
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}
.start__sub { font-size: var(--t-lg); color: var(--mist); margin-bottom: 2.5rem; }

/* Start-a-build form: progressive enhancement over the plain mailto
   button. Hidden without JS (the <noscript> mailto shows instead);
   with JS it assembles a personalized message from the answers. */
.startform { display: none; }
html.js .startform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1rem;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  text-align: left;
}
.startform__field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.startform__field--wide { grid-column: 1 / -1; }
.startform__label {
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.startform__opt {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--mist);
  opacity: 0.75;
}
.startform__input {
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 0.9rem;
  background: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font: 500 var(--t-sm)/1.5 var(--body);
  color: var(--bone);
  transition: border-color 0.2s var(--ease);
}
.startform__input::placeholder { color: var(--mist); }
.startform__input:hover { border-color: var(--bone-dim); }
.startform__input:focus-visible { border-color: var(--signal); outline-offset: 0; }
.startform__textarea { resize: vertical; min-height: 70px; }
.startform__actions { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 0.35rem; }
.startform__result {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  font: 500 var(--t-sm)/1.6 var(--mono);
  color: var(--bone-dim);
  text-align: center;
}
.startform__open {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.startform__open:hover { color: #F3B254; }

/* ===================== 8b. SERVICES PAGE ===================== */
.page-hero {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.page-hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-3xl);
  letter-spacing: -0.025em;
  max-width: 24ch;
  margin-bottom: 1.5rem;
}
.page-hero__sub {
  font-size: var(--t-lg);
  color: var(--mist);
  max-width: 58ch;
  margin-bottom: 2rem;
}
/* Measured-numbers chips under the services hero: quiet, mono, dated facts */
.proof-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  padding: 0;
  font: 500 var(--t-xs)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}
.proof-chips li { display: inline-flex; align-items: center; gap: 0.5rem; }
.proof-chips li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--signal);
  border-radius: 50%;
}
.proof-chips a { color: var(--signal); text-underline-offset: 3px; }
.svc { padding-block: clamp(3rem, 6vw, 4.75rem); border-bottom: 1px solid var(--line); }
.svc__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.svc__title { font-family: var(--display); font-size: var(--t-2xl); letter-spacing: -0.02em; margin-bottom: 1rem; }
.svc__body { color: var(--mist); max-width: 58ch; }
.svc__body a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.svc__body a:hover { color: #F3B254; }

@media (max-width: 760px) {
  .svc__grid { grid-template-columns: 1fr; }
}
/* Break the left-text/right-list rhythm on alternating rows — DOM/reading
   order stays text-then-list (source order = tab order); only the visual
   column position swaps, and only once the two-column layout is active. */
@media (min-width: 761px) {
  .svc__grid--reverse > *:first-child { order: 2; }
  .svc__grid--reverse > *:last-child { order: 1; }
}

/* ===================== 9. FOOTER ===================== */
.footer { background: var(--ink-2); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.footer__mark { font-size: 1.25rem; display: inline-block; margin-bottom: 0.85rem; }
.footer__tag { color: var(--mist); font-size: 0.9rem; max-width: 28ch; }
.footer__nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__nav a {
  font: 500 var(--t-sm)/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mist);
  transition: color 0.2s var(--ease);
  width: fit-content;
}
.footer__nav a:hover { color: var(--bone); }
/* Phone feature toggle — see data-phone attribute on <html>. Off by
   default: hidden from view and out of the tab order until switched on. */
html[data-phone="off"] .js-phone-cta { display: none; }
.footer__meta { font-size: var(--t-sm); color: var(--mist); display: flex; flex-direction: column; gap: 0.4rem; text-align: right; }
.footer__meta kbd {
  font: 500 0.72rem/1 var(--mono);
  color: var(--bone-dim);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 2px 5px;
}

/* ===================== 10. MOTION ===================== */
/* Hidden states are gated on html.js so content stays visible without scripts */
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
html.js .reveal.visible { opacity: 1; transform: none; }

/* Reveal isn't one motion for the whole page — the shape of the entrance
   matches the shape of the content. .visible always resolves to
   opacity:1/transform:none via the rule above; these only set the
   hidden-state starting transform each variant enters from. */
html.js .reveal--pop { transform: scale(0.96); }
html.js .reveal--wipe { transform: translateX(-16px); }
html.js .reveal--print { transform: translateY(-14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
html.js .reveal--fade { transform: none; transition: opacity 0.9s var(--ease); }

/* Boot choreography: hero orchestration on first paint */
html.js .hero__lead > *,
html.js .orchestrator,
html.js .strip {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.js .node--target {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
html.js body.booted .hero__lead > *,
html.js body.booted .orchestrator,
html.js body.booted .strip { opacity: 1; transform: none; }
html.js body.booted .node--target { opacity: 1; }

html.js body.booted .hero__lead > *:nth-child(1) { transition-delay: 0.05s; }
html.js body.booted .hero__lead > *:nth-child(2) { transition-delay: 0.12s; }
html.js body.booted .hero__lead > *:nth-child(3) { transition-delay: 0.20s; }
html.js body.booted .hero__lead > *:nth-child(4) { transition-delay: 0.28s; }
html.js body.booted .hero__lead > *:nth-child(5) { transition-delay: 0.36s; }
html.js body.booted .orchestrator                { transition-delay: 0.30s; }
html.js body.booted .node--target[data-i="1"]    { transition-delay: 0.60s; }
html.js body.booted .node--target[data-i="2"]    { transition-delay: 0.73s; }
html.js body.booted .node--target[data-i="3"]    { transition-delay: 0.86s; }
html.js body.booted .node--target[data-i="4"]    { transition-delay: 0.99s; }
html.js body.booted .strip                       { transition-delay: 0.45s; }
/* stagger siblings within a grid, short chain, not a parade */
.modules .reveal:nth-child(2), .pillars .reveal:nth-child(2), .method .reveal:nth-child(2) { transition-delay: 0.05s; }
.modules .reveal:nth-child(3), .pillars .reveal:nth-child(3), .method .reveal:nth-child(3) { transition-delay: 0.10s; }
.pillars .reveal:nth-child(4) { transition-delay: 0.15s; }
.modules .reveal:nth-child(4), .method .reveal:nth-child(4) { transition-delay: 0.15s; }
.modules .reveal:nth-child(5), .method .reveal:nth-child(5) { transition-delay: 0.20s; }
.modules .reveal:nth-child(6), .method .reveal:nth-child(6) { transition-delay: 0.25s; }

/* ===================== 11. RESPONSIVE ===================== */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* Words first on small screens: the thesis and the CTA own the
     first viewport; the lattice plays as the second beat below */
  .orchestrator { max-width: 520px; }
  .hero { padding-top: 72px; }
  .hero__title { margin-bottom: 1rem; }
  .hero__sub { margin-bottom: 1.35rem; }
  .hero__actions { margin-bottom: 1.75rem; }
  .standard__grid, .faq__grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .modules { grid-template-columns: repeat(2, 1fr); }
  .exhibits { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Tighter header so the wordmark/menu sit near the top edge, and a solid
     (non-blurred) nav background. backdrop-filter re-blurs every scroll
     frame on mobile, which is the main source of scroll jank. */
  :root { --nav-h: 54px; }
  .nav.scrolled {
    background: rgba(10, 11, 13, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(10,11,13,0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--pad) 1.25rem;
    transform: translateY(-120%);
    transition: transform 0.32s var(--ease);
    margin-left: 0;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
  .nav__cta { display: none; }
  .nav__start-link { display: block; color: var(--signal) !important; border-bottom: none !important; }
  .nav__toggle { display: flex; }

  .method { grid-template-columns: 1fr; }
  .modules { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__meta { text-align: left; }
  /* Receipt on mobile: the voided line prints above the real one,
     like a corrected register tape */
  .compare__row--head { display: none; }
  .compare__row { grid-template-columns: 1fr; gap: 0; }
  .compare__row > span { border-bottom: none; padding: 0.15rem 0; }
  .compare__row > span:first-child { padding-top: 0.7rem; font-size: var(--t-xs); }
  .compare__row > span:last-child {
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed rgba(10, 11, 13, 0.22);
  }
  .compare__row:last-child > span:last-child { border-bottom: none; }
  .printout__total { flex-direction: column; gap: 0.15rem; }
}

@media (max-width: 560px) {
  html.js .startform { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  /* Stable two-column grid so the PASS/FAIL column lines up on every row:
     id over detail on the left, state spanning both on the right. */
  .audit-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id     state"
      "detail state";
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
  }
  .audit-row__id { grid-area: id; }
  .audit-row__lead { display: none; }
  .audit-row__detail { grid-area: detail; margin: 0; text-align: left; }
  .audit-row__state { grid-area: state; align-self: center; }
  .audit__rows { min-height: 0; }
  .audit-form__row { flex-direction: column; }
}

@media (max-width: 420px) {
  .hero__title { font-size: clamp(2.1rem, 11vw, 2.7rem); }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; }
  .audit__foot .btn { width: auto; }
}

/* ===================== 12. REDUCED MOTION ===================== */
/* ============ PRINT: the console on paper ============ */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body { background: #fff !important; }
  .nav, .skip-link, .lang-toggle, .progress, .audit-form, .startform,
  .totop, .mailto-copy, .nav__toggle, svg { display: none !important; }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .hero, .section { padding: 1.5rem 0 !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Caret holds steady; page transitions cut instantly */
  .eyebrow__caret { animation: none; opacity: 1; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  html.js .reveal,
  html.js .hero__lead > *,
  html.js .orchestrator,
  html.js .node--target,
  html.js .strip { opacity: 1; transform: none; }
  .audit-row { opacity: 1; transform: none; }
  /* SMIL particles are paused from main.js via svg.pauseAnimations():
     CSS animation rules don't reach them */
  .node--core .node__ring { opacity: 0.5; }
  .audit__live::before, .orchestrator__live::before { animation: none; }
}