/* Monark, final consolidated stylesheet.
   D2 palette (cream + ink + monarch orange) · D3 modular layout · D1 hero wall.
*/

:root {
  /* Surfaces */
  --bg: #f4ede1;
  --bg-2: #ece4d4;
  --bg-3: #e0d6c2;
  --bg-card: #faf6ec;
  --bg-deep: #1a1612;       /* used for dark feature blocks / plate dividers */

  /* Ink */
  --ink: #1a1612;
  --ink-2: #3a3024;
  --ink-dim: #6b5e4a;
  /* Darkened from #9b8e76 (2.8:1 on cream, an AA fail at the 10-13px
     sizes this token labels). #71654e clears 4.5:1 on every light
     surface including --bg-2. */
  --ink-mute: #71654e;

  /* Rules */
  --rule: rgba(26, 22, 18, 0.18);
  --rule-soft: rgba(26, 22, 18, 0.08);
  --rule-strong: rgba(26, 22, 18, 0.32);

  /* Brand */
  --orange: #d9621f;
  --orange-2: #ff7a1a;
  --orange-3: #ffae5a;
  --orange-deep: #9a3a0a;
  /* Text-safe orange: #d9621f only hits ~3.1:1 on cream, which fails
     WCAG AA below ~18.5px. Use this darker cut for small orange type;
     keep --orange for display sizes and graphics (3:1 rule). */
  --orange-text: #b34c12;
  --orange-soft: rgba(217, 98, 31, 0.12);
  --orange-glow: rgba(217, 98, 31, 0.4);

  --navy: #14223d;
  --navy-2: #1f3050;

  /* --good and --warn darkened (were #1b7d3b / #b25a0a) to clear 4.5:1
     on cream for the 10-12px labels that use them. */
  --good: #176b33;
  --warn: #9a4d08;

  --pad-x: clamp(20px, 4vw, 72px);
  --grid-line: rgba(26, 22, 18, 0.045);

  /* Mono stack: 'JetBrains Mono' is referenced but was never shipped as
     a webfont, so rendering depended on what the visitor had installed.
     One token, one consistent system-mono fallback chain everywhere. */
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Sentient', Georgia, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200000;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 6px;
  font-family: 'Khand', sans-serif; letter-spacing: 0.12em; font-size: 13px;
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; outline: 2px solid var(--orange); }

/* === Custom scrollbar, thin monarch-orange thumb on cream ===
   Thin pill thumb with a vertical sunset gradient (Danaus plexippus
   wing, light apex → saturated mid → smoky base) sitting in a track
   the same cream as the page background, so the gutter visually
   disappears into the canvas.
   Firefox uses scrollbar-color; Chromium/Safari get the full gradient
   via ::-webkit-scrollbar. We keep scrollbar-width at `auto` because
   `thin` disables ::-webkit-scrollbar pseudo-elements in Chrome 121+,
   instead we set our own narrow width (8px) on the pseudo. Firefox
   only: `scrollbar-width: thin` is applied via @supports so we don't
   nuke the gradient in Chromium. */
/* Firefox only: it doesn't recognize the ::-webkit-scrollbar selector,
   so this @supports block applies exclusively to Firefox. In Chromium,
   setting `scrollbar-color` on the root forces the system-default
   scrollbar width (15px) and silently overrides any custom width set
   via ::-webkit-scrollbar, so we must NOT set it there. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--orange) var(--bg);
  }
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: var(--bg);
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 50%, var(--orange-deep) 100%);
  background-clip: padding-box;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(154, 58, 10, 0.45),
    inset 0 1px 0 rgba(255, 220, 170, 0.5);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, #ffd29a 0%, var(--orange) 55%, var(--orange-deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(154, 58, 10, 0.65),
    inset 0 1px 0 rgba(255, 235, 200, 0.6),
    0 0 8px var(--orange-glow);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(154, 58, 10, 0.75),
    inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-corner { background: var(--bg); }

/* End buttons, a single orange chevron at each terminus. Chromium
   hides scrollbar buttons by default whenever the scrollbar pseudo is
   styled, so we opt them back in explicitly. We show only one per end
   (top: up arrow, bottom: down arrow) and hide the other two slots
   that double-arrow scrollbar layouts would otherwise use. */
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  width: 8px;
  height: 12px;
  background-color: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 6px 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M1 4L4 1L7 4' fill='none' stroke='%23d9621f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M1 1L4 4L7 1' fill='none' stroke='%23d9621f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
::-webkit-scrollbar-button:vertical:hover {
  background-color: var(--orange-soft);
}
::-webkit-scrollbar-button:vertical:active {
  background-color: var(--orange-glow);
}

body {
  overflow-x: hidden;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* === Type === */
.t-array       { font-family: 'Array', sans-serif; font-weight: 700; }
.t-arrayw      { font-family: 'Array Wide', sans-serif; font-weight: 700; }
.t-khand       { font-family: 'Khand', sans-serif; }
.t-display     { font-family: 'Array Wide', sans-serif; font-weight: 700; line-height: 0.88; letter-spacing: -0.025em; text-transform: uppercase; }
.t-display-c   { font-family: 'Array', sans-serif; font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; }
.t-eyebrow     { font-family: 'Khand', sans-serif; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; color: var(--ink-dim); }
.t-mono        { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; }
.t-italic      { font-family: 'Sentient', serif; font-style: italic; font-weight: 300; }
.t-orange      { color: var(--orange); }

a, button, [data-monarch-magnet] { cursor: pointer; }

/* === NAV === */
.nav {
  position: fixed; top: 14px; left: 14px; right: 14px; z-index: 100;
  padding: 10px 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  background: rgba(244, 237, 225, 0.84);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 6px 32px rgba(26, 22, 18, 0.06);
}
.nav-logo { font-family: 'Array Wide', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--ink); text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.nav-logo .mark { width: 14px; height: 14px; background: var(--orange); border-radius: 50%; display: inline-block; box-shadow: 0 0 12px var(--orange-glow); }
.nav-links { display: flex; gap: 26px; justify-self: center; }
.nav-links a { font-family: 'Khand', sans-serif; font-weight: 500; letter-spacing: 0.14em; font-size: 12px; text-transform: uppercase; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--orange-text); }
.nav-right { justify-self: end; display: flex; gap: 10px; align-items: center; }
.nav-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Khand', sans-serif; letter-spacing: 0.12em; font-size: 11px; text-transform: uppercase; color: var(--ink-dim);
}
.nav-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.nav-cta {
  font-family: 'Khand', sans-serif; font-weight: 600; letter-spacing: 0.12em; font-size: 12px; text-transform: uppercase;
  background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 999px;
  text-decoration: none; transition: all .25s ease; border: 1px solid var(--ink);
}
.nav-cta:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: #fff; }

/* Language switcher — globe trigger + dropdown */
.nav-lang-wrap { position: relative; }
.nav-lang-globe {
  appearance: none; background: none; border: 0; padding: 5px;
  color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color .2s, background .2s;
  line-height: 1;
}
.nav-lang-globe:hover { color: var(--orange); background: var(--orange-soft); }
.nav-lang-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: rgba(244, 237, 225, 0.97);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 28px rgba(26, 22, 18, 0.12);
  z-index: 200;
  min-width: 88px;
}
.nav-lang-dropdown[hidden] { display: none; }
.lang-option {
  appearance: none; background: none; border: 0;
  padding: 7px 12px; border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
  font-family: 'Khand', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  cursor: pointer; transition: background .15s, color .15s; width: 100%;
  white-space: nowrap;
}
.lang-option:hover { background: var(--orange-soft); color: var(--orange-text); }
.lang-option.active { background: var(--ink); color: var(--bg); }
@media (max-width: 880px) {
  .nav-status { display: none; }
}

/* === Monark veil: fixed full-viewport wall sitting on top of the page === */
.monark-veil {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  transition: opacity 0.6s ease;
  /* No background here: the opaque colony + its cursor-reveal mask live
     in .veil-colony (a child), so the mask can cut a hole through the
     colony to the hero header WITHOUT touching the hint, which is an
     unmasked sibling that always stays on top. */
}
/* The colony: opaque cream backdrop + the animated wall canvas. This is
   the layer the cursor-reveal masks. */
.veil-colony {
  position: absolute; inset: 0;
  background: var(--bg);
  transition: background-color 0.6s ease;
}
/* Cursor-reveal: a soft radial hole re-centered on the cursor each frame
   (--mx/--my, written by the veil controller in index.html) parts the
   colony so the hero header reads underneath. Gated behind .reveal-on,
   which the head capability gate sets ONLY on capable, non-Mac desktops
   with a real mouse. It is force-OFF every Mac: re-masking the animated
   canvas per move is the exact workload that crashed Chrome's Skia
   Graphite GPU process on Apple Silicon (froze the intro, killed the
   GPU process, corrupted compositing across every tab — force-quit). */
.reveal-on .veil-colony {
  -webkit-mask: radial-gradient(circle at var(--mx, -9999px) var(--my, -9999px),
                  transparent 0, transparent 100px, #000 220px);
          mask: radial-gradient(circle at var(--mx, -9999px) var(--my, -9999px),
                  transparent 0, transparent 100px, #000 220px);
}
.monark-veil canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* During dispersal: drop the colony background and the reveal mask so
   butterflies fly across the live page. The veil itself stays fully
   opaque until the wall script signals all butterflies have left. */
.monark-veil.dispersing .veil-colony {
  background: transparent;
  -webkit-mask: none;
          mask: none;
}
.monark-veil.dispersed { opacity: 0; }

/* Disperse hint sitting on the veil, anchored to the viewport
   center so it reads as the page's primary instruction. */
.veil-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: var(--ink-dim);
  pointer-events: none; text-align: center;
  transition: opacity .6s ease;
  max-width: min(560px, 88vw);
}
.veil-hint .label {
  font-family: 'Khand', sans-serif; letter-spacing: 0.22em;
  font-size: clamp(14px, 1.6vw, 18px);
  text-transform: uppercase;
  /* orange-deep: white on brand orange is only 3.7:1, an AA fail at
     this size; the deep cut clears 7:1. */
  background: var(--orange-deep);
  color: #fff;
  padding: 12px 22px; border-radius: 999px;
  /* backdrop-filter removed: a blurred layer INSIDE the animated,
     full-viewport veil compounded the GPU cost. The pill is solid
     orange, so the blur was invisible anyway. */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.veil-hint .hint-touch { display: none; }
/* Any one touch signal wins, the strict AND form missed hybrid Android
   devices that report `pointer: coarse` while still claiming
   `hover: hover` (stylus, S-Pen). `max-width` is the final fallback for
   anything narrow enough to clearly be a phone. */
@media (hover: none), (pointer: coarse), (max-width: 880px) {
  .veil-hint .hint-desktop { display: none; }
  .veil-hint .hint-touch { display: inline; }
}
/* Chevron, the bare 1px orange outline disappears against the
   orange monarchs underneath. Wrap it in a cream pill so it always
   has something to sit on, and thicken the strokes. */
.veil-hint .arr-down {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  position: relative;
  animation: bob 1.6s infinite ease-in-out;
}
.veil-hint .arr-down::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px;
  border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: translate(-50%, -70%) rotate(45deg);
}
/* Fade the hint immediately when dispersal starts, the scroll-lock
   releases in ~500ms, so the hint shouldn't linger past that. */
.monark-veil.dispersing .veil-hint,
.monark-veil.dispersed .veil-hint { opacity: 0; transition: opacity .35s ease; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* === HERO ============================================= */
.hero {
  position: relative; min-height: 100vh;
  min-height: 100svh; /* small-viewport unit: stable under mobile toolbars */
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(255,174,90,0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--rule);
}

.hero-content {
  position: relative; z-index: 3;
  padding: 130px var(--pad-x) 80px;
  /* Center the hero content vertically inside the 100vh section so we
     don't leave an empty 1fr row below the CTAs on tall displays. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: 32px;
}

.hero-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.hero-meta-row .left { display: flex; gap: 24px; align-items: center; }
.hero-meta-row .ver { color: var(--orange); }

.hero-center { display: grid; align-items: center; position: relative; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Khand', sans-serif; font-weight: 500; letter-spacing: 0.18em; font-size: 13px; text-transform: uppercase; color: var(--ink-2);
}
.hero-eyebrow .line { width: 40px; height: 1px; background: var(--orange); }

.hero-h1 {
  margin-top: 48px;
  font-family: 'Array Wide', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(52px, 10vw, 160px); line-height: 0.92; letter-spacing: -0.03em;
  color: var(--ink);
}
.hero-h1 .row { display: block; white-space: nowrap; }
.hero-h1 .gradient {
  background: linear-gradient(92deg, #ffae5a 0%, #ff7a1a 38%, #d9621f 70%, #9a3a0a 100%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-h1 .italic {
  font-family: 'Sentient', serif; font-style: italic; font-weight: 300;
  text-transform: none; color: var(--orange); letter-spacing: -0.04em; display: inline-block; transform: translateY(-0.08em);
}
.hero-h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--ink); }

.hero-sub {
  margin-top: 28px;
  max-width: 640px;
  font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); line-height: 1.55;
}
.hero-sub em { font-style: italic; color: var(--orange); }

.hero-cta-row {
  margin-top: 36px; display: flex; gap: 12px; align-items: center;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px;
  font-family: 'Khand', sans-serif; font-weight: 600; letter-spacing: 0.12em; font-size: 13px; text-transform: uppercase;
  text-decoration: none; transition: all .25s ease; border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--orange-deep); color: #fff; box-shadow: 0 0 40px var(--orange-glow); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-orange { background: var(--orange-deep); color: #fff; }
.btn-orange:hover { background: #7c2e08; box-shadow: 0 0 40px var(--orange-glow); transform: translateY(-1px); }
.btn .arr { transition: transform .25s; }
.btn:hover .arr { transform: translateX(4px); }

/* Hero data cards row */
.hero-cards {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 12px;
  position: relative; z-index: 5;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 18px;
  position: relative;
  transition: border-color .25s ease, transform .25s ease;
  overflow: hidden;
}
.card:hover { border-color: var(--rule-strong); }
.card .label {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.card h4 {
  font-family: 'Array', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 20px; letter-spacing: -0.015em; margin-top: 6px;
}
.card-sub { font-size: 13px; color: var(--ink-dim); line-height: 1.5; margin-top: 10px; }

.card-live { display: flex; flex-direction: column; gap: 10px; }
.card-live .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: rgba(27, 125, 59, 0.12);
  color: var(--good); font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; width: max-content;
}
.card-live .pill::before { content: ''; width: 5px; height: 5px; background: var(--good); border-radius: 50%; animation: pulse 2s infinite ease-in-out; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.card-live .agent-rows { display: flex; flex-direction: column; gap: 6px; }
.agent-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink);
}
.agent-row .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.agent-row .dot.b { background: var(--navy); }
.agent-row .dot.g { background: var(--good); }
.agent-row .name { flex: 1; }
.agent-row .val { color: var(--ink-mute); }

.spark { display: block; width: 100%; height: 56px; margin-top: 12px; }
.spark .line { fill: none; stroke: var(--orange); stroke-width: 1.4; }
.spark .fill { fill: url(#sg-light); }

.card-stat .big {
  font-family: 'Array', sans-serif; font-weight: 700; font-size: 52px; letter-spacing: -0.04em;
  margin-top: 6px; color: var(--orange); line-height: 1;
}
.card-stat .delta { font-family: 'Khand', sans-serif; letter-spacing: 0.12em; font-size: 12px; color: var(--good); text-transform: uppercase; margin-top: 4px; }

.card-cta { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }
.card-cta .btn { width: 100%; justify-content: center; padding: 12px 18px; }

/* === Sections ================================================ */
section { position: relative; }
.sec-pad { padding: 140px var(--pad-x); }
.sec-head-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end;
  padding-bottom: 24px; border-bottom: 1px solid var(--rule);
  margin-bottom: 64px;
}
/* `.num` and `.right` previously used `--orange` and `--ink-mute`,
   both of which failed WCAG AA contrast on cream at body-text sizes
   (PSI a11y 2026-05-25). Darkened to `--orange-deep` (≈6:1) and
   `--ink-dim` (≈5:1). */
.sec-head-row .num { font-family: var(--font-mono); font-size: 12px; color: var(--orange-deep); letter-spacing: 0.1em; text-transform: uppercase; align-self: center; }
.sec-head-row h2 {
  font-family: 'Array', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 5vw, 76px); line-height: 0.92; letter-spacing: -0.025em;
}
.sec-head-row .right {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
  text-transform: uppercase; text-align: right; line-height: 1.6;
}

/* Manifesto */
.manifesto { background: var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.manifesto-row {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start;
}
.manifesto-body {
  font-family: 'Sentient', serif; font-size: clamp(26px, 3vw, 44px); line-height: 1.22;
  font-weight: 300; letter-spacing: -0.005em; text-wrap: pretty;
}
.manifesto-body em { font-style: italic; color: var(--orange); font-weight: 400; }
.manifesto-tags { display: flex; flex-direction: column; gap: 8px; }
.tag {
  padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2); width: max-content;
}
.tag.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tag.or { background: var(--orange); color: #fff; border-color: var(--orange); }

/* === PLATE DIVIDER (wing scales) === */
.plate {
  height: 60vh; min-height: 360px; position: relative; overflow: hidden;
  background: #1a0a04;
}
.plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-caption {
  position: absolute; bottom: 24px; left: var(--pad-x); right: var(--pad-x);
  z-index: 2; display: flex; justify-content: space-between; align-items: end;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.plate-caption .big {
  font-family: 'Khand', sans-serif; font-weight: 500; letter-spacing: 0.14em; font-size: 18px;
  color: #fff; text-transform: uppercase;
}
.plate-caption .body { max-width: 540px; line-height: 1.5; margin-top: 6px; }
.plate-corner {
  position: absolute; top: 24px; left: var(--pad-x);
  z-index: 2; color: rgba(255,255,255,0.7);
  font-family: var(--font-mono); font-size: 11px;
  display: flex; align-items: baseline; gap: 14px;
}
.plate-corner .n { color: var(--orange-3); font-size: 14px; letter-spacing: 0.1em; }
.plate-corner .crosshair { display: inline-block; }
.plate-corner .crosshair::before { content: '+'; color: var(--orange-3); margin-right: 6px; font-size: 18px; }
.plate-scale {
  position: absolute; top: 24px; right: var(--pad-x); z-index: 2;
  color: rgba(255,255,255,0.6); font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 8px;
}
.plate-scale .bar { width: 60px; height: 1px; background: #fff; }
.plate-meas {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
}
.plate-meas .bar { width: 48px; height: 1px; background: rgba(255,255,255,0.6); }

/* === SERVICES grid =========================================== */
.services { background: var(--bg); }
.svc-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.svc-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px;
  position: relative;
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s, background .25s;
  overflow: hidden;
}
.svc-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.svc-card.span-2 { grid-column: span 2; }
.svc-card.span-3 { grid-column: span 3; }
.svc-card.span-4 { grid-column: span 4; }
.svc-card.span-6 { grid-column: span 6; }

.svc-card .head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.svc-card .ix {
  font-family: var(--font-mono); font-size: 11px; color: var(--orange-text); letter-spacing: 0.1em;
}
.svc-card .kicker {
  font-family: 'Khand', sans-serif; font-weight: 500; letter-spacing: 0.14em; font-size: 11px; color: var(--ink-mute); text-transform: uppercase;
}
.svc-card h3 {
  margin-top: 16px;
  font-family: 'Array', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 28px; line-height: 0.95; letter-spacing: -0.02em;
}
.svc-card .desc {
  margin-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.55;
  max-width: 540px;
}
.svc-card .price {
  margin-top: 14px;
  font-family: 'Khand', sans-serif; letter-spacing: 0.12em; font-size: 12px; text-transform: uppercase; color: var(--ink-dim);
}
.svc-card .price b { color: var(--orange-text); font-weight: 600; font-family: 'Array', sans-serif; }
.svc-card .widget {
  margin-top: 20px; flex: 1; min-height: 140px;
  position: relative;
  border-top: 1px dashed var(--rule);
  padding-top: 18px;
}
.svc-card .more {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Khand', sans-serif; letter-spacing: 0.14em; font-size: 13px; text-transform: uppercase; color: var(--orange-text);
}
.svc-card .more .arr { transition: transform .25s; }
.svc-card:hover .more .arr { transform: translateX(4px); }

/* === Service widgets ========================================= */
/* Gauge */
.gauge {
  display: flex; align-items: center; gap: 20px;
}
.gauge svg { flex-shrink: 0; }
.gauge .gauge-track { fill: none; stroke: var(--rule); stroke-width: 10; }
.gauge .gauge-fill { fill: none; stroke: url(#gg); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
.gauge-num {
  font-family: 'Array', sans-serif; font-weight: 700; font-size: 48px; letter-spacing: -0.04em;
  line-height: 1; color: var(--ink);
}
.gauge-num .unit { color: var(--orange); font-size: 24px; }
.gauge-lbl { font-family: 'Khand', sans-serif; letter-spacing: 0.12em; font-size: 11px; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.gauge-rows { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gauge-rows .gr {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  font-family: 'Khand', sans-serif; letter-spacing: 0.08em; font-size: 13px; text-transform: uppercase; color: var(--ink-2);
}
.gauge-rows .bar { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.gauge-rows .bar .fill { height: 100%; background: var(--orange); border-radius: 2px; width: 0; transition: width 1.6s cubic-bezier(.2,.7,.2,1); }
.gauge-rows .gr .row2 { grid-column: 1 / -1; }

/* Workflow map */
.workflow {
  width: 100%; height: 220px; position: relative;
}
.workflow svg { width: 100%; height: 100%; }
.workflow .node {
  fill: var(--bg-card); stroke: var(--ink); stroke-width: 1.5;
}
.workflow .node-orange { fill: var(--orange-deep); stroke: var(--orange-deep); }
.workflow .link { fill: none; stroke: var(--ink-mute); stroke-width: 1.2; stroke-dasharray: 4 4; }
.workflow .pulse {
  fill: var(--orange); r: 3;
  animation: pulse-move 4s infinite linear;
}
.workflow .node-label {
  font-family: 'Khand', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-2);
}
/* Labels sitting ON the orange nodes (RÉCEPTION, AGENT, MNRK) are
   authored with fill="#fff", but that's an SVG presentation attribute
   and loses to the .node-label class rule above. Re-assert white via
   CSS so they stay legible on the darkened orange-deep nodes. */
.workflow text[fill="#fff"],
.hub text[fill="#fff"] {
  fill: #fff;
}
@keyframes pulse-move {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Agent activity */
.agents-feed { display: flex; flex-direction: column; gap: 8px; }
.agent-fr {
  display: grid; grid-template-columns: 10px 1fr 90px 88px; gap: 12px; align-items: center;
  height: 36px;
  padding: 0 10px; border: 1px solid var(--rule); border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg);
}
.agent-fr .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: pulse 2s infinite; }
.agent-fr .dot.g { background: var(--good); }
.agent-fr .dot.b { background: var(--navy); }
.agent-fr .name { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-fr .stat { color: var(--ink-mute); text-align: right; font-variant-numeric: tabular-nums; }
.agent-fr .badge {
  height: 20px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(27, 125, 59, 0.12); color: var(--good);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: 'Khand', sans-serif; font-weight: 500;
  white-space: nowrap;
}
.agent-fr .badge.processing { background: rgba(217, 98, 31, 0.12); color: var(--orange); }

/* Integration hub */
.hub {
  width: 100%; height: 300px; position: relative;
}
.hub svg { width: 100%; height: 100%; overflow: visible; }
.hub .ring { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 3; }
.hub .hub-node { fill: var(--bg-card); stroke: var(--ink); stroke-width: 1.5; }
.hub .hub-center { fill: var(--orange-deep); stroke: var(--orange-deep); }
.hub .spoke { stroke: var(--ink-mute); stroke-width: 1; }
.hub .lbl {
  font-family: 'Khand', sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em;
  fill: var(--ink-2); text-transform: uppercase;
}
.hub .hub-center-lbl {
  font-family: 'Array', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.08em;
}

/* Mini-dashboard for Butterfly OS */
.os-dash-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.os-dash-eye {
  font-family: 'Khand', sans-serif; font-weight: 500;
  letter-spacing: 0.16em; font-size: 11px; text-transform: uppercase;
  color: var(--ink-dim);
}
.os-dash-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--orange-text);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.os-dash-live .d {
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 8px var(--orange-glow);
  animation: pulse 2s infinite ease-in-out;
}
.os-dash {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.os-tile {
  position: relative; overflow: hidden;
  padding: 12px 12px 14px; background: var(--bg);
  border: 1px solid var(--rule); border-radius: 6px;
  transition: border-color .25s ease, transform .25s ease;
}
.os-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
  opacity: 0.55;
}
.os-tile:hover { border-color: var(--orange); transform: translateY(-1px); }
.os-tile .lb {
  font-family: 'Khand', sans-serif; font-weight: 500; font-size: 10px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.os-tile .vb {
  font-family: 'Array', sans-serif; font-weight: 700; font-size: 26px;
  color: var(--orange); letter-spacing: -0.025em; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.os-tile .sb {
  font-family: 'Khand', sans-serif; font-size: 10.5px; color: var(--good);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-tile .sb.warn { color: var(--warn); }
.os-tile .sb.up::before { content: '▲ '; color: var(--good); font-size: 8px; }
.os-tile .os-spark {
  position: absolute; right: 8px; bottom: 8px;
  width: 56px; height: 16px;
  color: var(--orange); opacity: 0.55;
  pointer-events: none;
}

/* Training modules */
.modules { display: flex; flex-direction: column; gap: 10px; }
.module {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg);
}
.module .ix {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Array', sans-serif; font-weight: 700; font-size: 11px;
}
.module .ix.done { background: var(--good); }
.module .ix.cur { background: var(--orange); }
.module .ttl { font-family: 'Khand', sans-serif; font-weight: 500; letter-spacing: 0.1em; font-size: 13px; text-transform: uppercase; color: var(--ink); }
.module .pct { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.module .pct b { color: var(--orange-text); font-weight: 600; font-family: 'Array', sans-serif; }

/* === By the numbers ========================================== */
.numbers { background: var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.numgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.numgrid .nb {
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 28px; position: relative; overflow: hidden;
  min-height: 220px; display: flex; flex-direction: column; justify-content: space-between;
}
.numgrid .nb .lbl { font-family: 'Khand', sans-serif; letter-spacing: 0.14em; font-size: 11px; text-transform: uppercase; color: var(--ink-mute); }
.numgrid .nb .big { font-family: 'Array Wide', sans-serif; font-weight: 700; font-size: clamp(48px, 5vw, 88px); letter-spacing: -0.04em; line-height: 1; color: var(--orange); }
.numgrid .nb .desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; max-width: 220px; }
.numgrid .nb .vein {
  position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px;
  opacity: 0.08; pointer-events: none;
}

/* === Process rail ============================================ */
.process { background: var(--bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rail {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  position: relative;
}
.rail::before {
  content: ''; position: absolute; left: 28px; right: 28px; top: 48px; height: 1px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange) 25%, var(--rule) 25%, var(--rule) 100%);
  z-index: 0;
}
.rail-card {
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 24px; position: relative; z-index: 1;
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s;
}
.rail-card:hover { border-color: var(--orange); }
.rail-card .ix-wrap { display: flex; align-items: center; gap: 12px; }
.rail-card .ring {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--orange);
  background: var(--bg-card); position: relative;
}
.rail-card .ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--orange); }
.rail-card .ix { font-family: var(--font-mono); font-size: 11px; color: var(--orange-text); letter-spacing: 0.1em; }
.rail-card .week { font-family: 'Khand', sans-serif; font-size: 12px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; margin-top: 4px; }
.rail-card h3 {
  margin-top: 14px;
  font-family: 'Array', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 22px; letter-spacing: -0.01em;
}
.rail-card p { margin-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.rail-card .ticks { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.tick { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.tick::before { content: '◆'; color: var(--orange); font-size: 8px; }
.rail-card .meter {
  margin-top: 18px; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden;
}
.rail-card .meter .fill { height: 100%; background: var(--orange); border-radius: 2px; width: 0; transition: width 1.4s cubic-bezier(.2,.7,.2,1); }

/* === Cases =================================================== */
.cases { background: var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.case-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.case-tile {
  position: relative;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 28px; min-height: 360px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .25s, transform .25s;
  overflow: hidden;
}
.case-tile:hover { border-color: var(--orange); transform: translateY(-3px); }
.case-tile .top { display: flex; justify-content: space-between; align-items: start; }
.case-tile .ix { font-family: var(--font-mono); font-size: 11px; color: var(--orange-text); }
.case-tile .industry { font-family: 'Khand', sans-serif; font-size: 12px; letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; text-align: right; line-height: 1.4; }
.case-tile h3 {
  margin-top: 18px;
  font-family: 'Array', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 30px; letter-spacing: -0.02em; line-height: 0.95;
}
.case-tile .quote { margin-top: 16px; font-family: 'Sentient', serif; font-style: italic; color: var(--ink-dim); font-size: 15px; line-height: 1.5; }
.case-tile .case-spark { margin-top: 18px; }
.case-tile .metric-row { display: flex; gap: 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.case-tile .met .val { font-family: 'Array', sans-serif; font-weight: 700; color: var(--orange); font-size: 28px; letter-spacing: -0.02em; }
.case-tile .met .lbl { font-family: 'Khand', sans-serif; font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; }

/* WIP case tiles, mandates in progress, not yet published. */
.case-tile.case-wip {
  display: flex; flex-direction: column; gap: 0;
  min-height: 360px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-2) 100%);
}
.case-tile.case-wip::before {
  content: ''; position: absolute; top: 14px; right: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange-glow);
  animation: pulse 2s infinite ease-in-out;
  z-index: 1;
}
.case-tile.case-wip .top {
  display: flex; justify-content: space-between; align-items: start;
  gap: 14px;
}
.case-tile.case-wip h3 {
  margin-top: 22px;
  font-size: 26px;
}
.case-tile.case-wip .quote {
  font-size: 14px; line-height: 1.55;
  flex: 1;
}
.case-tile.case-wip .wip-meta {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--rule);
  display: flex; flex-direction: column; gap: 6px;
}
.case-tile.case-wip .wip-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
}
.case-tile.case-wip .wip-lbl { color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.case-tile.case-wip .wip-val { color: var(--ink); }
.case-tile.case-wip .wip-meter {
  margin-top: 16px; height: 3px; background: var(--rule);
  border-radius: 2px; overflow: hidden;
}
.case-tile.case-wip .wip-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-deep) 100%);
  border-radius: 2px;
  transition: width 1.4s cubic-bezier(.2,.7,.2,1);
}

/* Editorial footnote under the WIP cases */
.case-footnote {
  margin-top: 24px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  padding: 22px 28px;
  background: var(--bg-card);
  border: 1px solid var(--rule); border-radius: 10px;
}
.case-footnote .cf-eye {
  font-family: 'Khand', sans-serif; font-weight: 500;
  letter-spacing: 0.18em; font-size: 11px; text-transform: uppercase;
  color: var(--orange-text); display: block; margin-bottom: 6px;
}
.case-footnote p { font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 720px; }
.case-footnote .cf-cta { color: var(--ink); font-style: italic; }
@media (max-width: 1100px) {
  .case-footnote { grid-template-columns: 1fr; }
}

/* === Team =================================================== */
.team { background: var(--bg); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.member {
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 18px; transition: border-color .25s, transform .25s;
}
.member:hover { border-color: var(--orange); transform: translateY(-3px); }
.member .frame {
  aspect-ratio: 1/1; background: var(--bg-3);
  border: 1px solid var(--rule); border-radius: 6px;
  position: relative; overflow: hidden;
}
.member .frame .placeholder {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(26,22,18,0.05) 0 8px, transparent 8px 16px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px;
}
.member .frame .placeholder span { padding: 5px 10px; border: 1px solid var(--rule); background: var(--bg-card); }
.member h3 { margin-top: 14px; font-family: 'Array', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: -0.01em; }
.member .role { font-family: 'Khand', sans-serif; letter-spacing: 0.14em; font-size: 12px; text-transform: uppercase; color: var(--orange-text); margin-top: 4px; }

/* === Closing ================================================ */
.closing {
  background: var(--bg-deep); color: var(--bg); padding: 200px var(--pad-x);
  text-align: center; position: relative; overflow: hidden;
}
.closing canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.62; }
.closing > *:not(canvas):not(.wing-stat-popup) { position: relative; z-index: 2; }
.closing::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(26,10,4,0.78), rgba(26,10,4,0) 70%);
}
.closing-eyebrow { font-family: 'Khand', sans-serif; letter-spacing: 0.18em; font-size: 13px; text-transform: uppercase; color: var(--orange-3); margin-bottom: 28px; }
.closing-title {
  font-family: 'Array Wide', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(56px, 8vw, 130px); line-height: 0.88; letter-spacing: -0.025em;
  max-width: 1300px; margin: 0 auto;
}
.closing-title .italic { font-style: italic; color: var(--orange-3); font-family: 'Sentient', serif; text-transform: none; font-weight: 300; letter-spacing: -0.02em; }
.closing-sub { margin: 36px auto 48px; max-width: 580px; font-size: 19px; color: rgba(244,237,225,0.75); line-height: 1.5; }
.closing-form {
  display: flex; max-width: 560px; margin: 0 auto;
  border: 1px solid rgba(244,237,225,0.3); border-radius: 999px;
  padding: 6px; transition: border-color .25s ease;
}
.closing-form:focus-within { border-color: var(--orange-3); }
.closing-form input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; padding: 12px 20px; color: var(--bg); font-family: 'Sentient', serif; font-size: 15px; }
.closing-form input::placeholder { color: rgba(244,237,225,0.7); }
.closing-form button { background: var(--orange-deep); color: #fff; border: 0; padding: 10px 18px; border-radius: 999px; font-family: 'Khand', sans-serif; font-weight: 600; letter-spacing: 0.1em; font-size: 12px; text-transform: uppercase; cursor: pointer; transition: all .25s; white-space: nowrap; }
.closing-form button:hover { background: #7c2e08; }

/* === Footer ================================================= */
footer { background: var(--bg); border-top: 1px solid var(--rule); padding: 60px var(--pad-x) 36px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); }
.foot-logo { font-family: 'Array Wide', sans-serif; font-weight: 700; font-size: 22px; }
.foot-logo .mark { width: 14px; height: 14px; background: var(--orange); border-radius: 50%; display: inline-block; margin-right: 6px; }
.foot-tag { margin-top: 10px; font-size: 14px; color: var(--ink-dim); max-width: 280px; line-height: 1.5; }
/* Boost contrast (was --ink-mute, failing AA per PSI 2026-05-25). */
.foot-col h3 { font-family: 'Khand', sans-serif; font-weight: 500; letter-spacing: 0.18em; font-size: 11px; text-transform: uppercase; color: var(--ink-dim); }
.foot-col ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { text-decoration: none; color: var(--ink); font-family: 'Khand', sans-serif; letter-spacing: 0.08em; font-size: 14px; }
.foot-col a:hover { color: var(--orange-text); }
.foot-social { list-style: none; margin-top: 18px; display: flex; flex-direction: row; gap: 12px; padding: 0; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; color: var(--ink); transition: color .2s, border-color .2s; -webkit-tap-highlight-color: rgba(217, 98, 31, 0.18); }
.foot-social a:hover { color: var(--orange); border-color: var(--orange); }
.foot-bottom { margin-top: 22px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute); text-transform: uppercase; }

/* === Scroll-reveal utility =================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
.reveal.delay-4 { transition-delay: .4s; }

/* Sparkline draw animation */
.spark-anim .line { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2s cubic-bezier(.2,.7,.2,1); }
.spark-anim.in .line { stroke-dashoffset: 0; }
.spark-anim .fill { opacity: 0; transition: opacity .9s 1s; }
.spark-anim.in .fill { opacity: 1; }

/* === Responsive ============================================== */
@media (max-width: 1100px) {
  .hero-cards { grid-template-columns: 1fr 1fr; }
  .svc-grid { grid-template-columns: repeat(4, 1fr); }
  .svc-card.span-3, .svc-card.span-4 { grid-column: span 4; }
  .numgrid { grid-template-columns: 1fr 1fr; }
  .rail { grid-template-columns: 1fr 1fr; }
  .case-row { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .manifesto-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .hero-cards { grid-template-columns: 1fr; }
  .sec-head-row { grid-template-columns: 1fr; gap: 8px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card.span-2, .svc-card.span-3, .svc-card.span-4 { grid-column: span 1; }
  .numgrid { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; }
  .rail::before { display: none; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* === Small-screen polish ====================================
   Below ~640px the hero headline rows can't stay nowrap (Array
   Wide is too wide a font for narrow viewports), the nav-right
   chips crowd each other, and the closing-form button text gets
   crammed against the input. */
@media (max-width: 640px) {
  /* Nav-links is hidden below 720px; collapse the grid to two columns so the
     remaining items (logo + nav-right) sit at the bar's extremes instead of
     auto-placing into cols 1 & 2 and leaving col 3 empty. */
  .nav { left: 8px; right: 8px; padding: 8px 12px; gap: 8px; grid-template-columns: auto 1fr; }
  .nav-logo { font-size: 13px; }
  .nav-right { gap: 10px; }
  .nav-cta { padding: 7px 12px; font-size: 11px; letter-spacing: 0.08em; }

  /* Let the hero size to its content on mobile, 100vh leaves a big empty
     band on tall narrow displays because the content is vertically centered. */
  .hero { min-height: 0; }
  .hero-content { min-height: 0; padding: 110px var(--pad-x) 64px; gap: 0; justify-content: flex-start; }
  .hero-h1 { font-size: clamp(38px, 11vw, 80px); margin-top: 32px; }
  .hero-h1 .row { white-space: normal; }
  .hero-sub { font-size: 15px; margin-top: 22px; }
  .hero-cta-row { margin-top: 28px; flex-wrap: wrap; }

  .closing { padding: 120px var(--pad-x) 100px; }
  .closing-sub { margin: 28px auto 32px; font-size: 16px; }
  .closing-form {
    flex-direction: column; border-radius: 18px;
    padding: 8px; gap: 4px;
  }
  .closing-form input { padding: 12px 18px; text-align: center; }
  .closing-form button { width: 100%; padding: 12px 18px; }
}

/* Extra-narrow phones, strip the CTA chip down so logo + lang
   + CTA fit on one line below ~420px. */
@media (max-width: 420px) {
  .nav { padding: 7px 10px; gap: 6px; }
  .nav-cta { padding: 6px 10px; font-size: 10.5px; letter-spacing: 0.06em; }
}

/* Perf: skip rendering/layout of below-fold sections until they
   approach the viewport. `contain-intrinsic-size` is the placeholder
   height the browser reserves so scrolling distance stays stable
   before the section is rendered for the first time. Browsers
   without support (Safari ≤ 17 minor) simply ignore the property.
   .services is included because the workflow + hub pulse animations
   (12 non-composited `offset-path` animations per PSI 2026-05-25)
   keep the main thread busy until the section is on-screen. */
.services,
.numbers,
.process,
.cases,
.team,
.closing,
footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1200px;
}

/* Honor user preference: kill heavy decorative motion on
   prefers-reduced-motion. Targets the SVG pulse paths and the
   svc-card reveal/delay animations. */
@media (prefers-reduced-motion: reduce) {
  .workflow .pulse,
  .hub circle[style*="offset-path"] {
    animation: none !important;
    opacity: 0;
  }
}

/* Lite mode: weak devices (set by the capability gate in index.html).
   The JS already skips the colony veil, the cursor follower, and the
   wing-scale rAF loops. Here we strip the GPU-heavy static CSS:
     • backdrop-filter blur (expensive to recompute on every scroll
       frame, especially on integrated GPUs / Safari),
     • the non-composited offset-path "pulse" dot animations (Safari
       runs these on the main thread and they were a top jank source),
     • the small infinite glow/bob animations.
   The layout, type, and colour are untouched, the site just stops
   moving and blurring. */
.perf-lite .nav,
.perf-lite .nav-lang-dropdown {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(244, 237, 225, 0.97);
}
.perf-lite .workflow .pulse,
.perf-lite .hub circle[style*="offset-path"] {
  animation: none !important;
  opacity: 0;
}
.perf-lite .card-live .pill::before,
.perf-lite .agent-fr .dot,
.perf-lite .os-dash-live .d,
.perf-lite .case-tile.case-wip::before {
  animation: none !important;
}

/* No-canvas tier (Mac Chromium Skia Graphite, or any GPU-process loss
   caught by the watchdog): the wing-scale plates never bake. Their
   canvases are hidden and each section shows a pre-baked image of the
   exact same mosaic (exported from the real bake at 1920x1080, DPR 1.5,
   see assets/plates/plates-meta.json). Stretched 100%/100% so the
   hardcoded golden-hotspot fractions in index.html keep landing on the
   gold scales at any viewport size. The images only download when the
   .perf-nocanvas class is present. Captions, corner labels, popups and
   the contact form are DOM and untouched. */
.perf-nocanvas canvas[data-monark-scales] { display: none !important; }
.perf-nocanvas .plate {
  /* Ground color shows while the image loads or if it fails. */
  background-color: #0c0502;
}
.perf-nocanvas .plate-1 {
  background-image: url(../assets/plates/plate-1.webp);
  background-size: 100% 100%;
}
.perf-nocanvas .plate-2 {
  background-image: url(../assets/plates/plate-2.webp);
  background-size: 100% 100%;
}
.perf-nocanvas .closing {
  /* The live canvas sits at opacity .62 over --bg-deep; the flat
     overlay approximates that against the baked wing image. The
     existing ::after vignette still applies on top. */
  background-color: #1a1612;
  background-image:
    linear-gradient(rgba(26, 22, 18, 0.38), rgba(26, 22, 18, 0.38)),
    url(../assets/plates/plate-wing.webp);
  background-size: 100% 100%;
}
/* The canvas normally draws a breathing ring over each golden scale;
   with a static image the hotspot button carries a static ring instead
   so the goldens still read as interactive. */
.perf-nocanvas .golden-hotspot {
  width: 30px; height: 30px;
  border: 1px solid rgba(255, 209, 102, 0.75);
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.30), inset 0 0 8px rgba(255, 209, 102, 0.18);
}

/* === Accessibility utilities ================================= */

/* Visually hidden, still read by assistive tech. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Visible keyboard focus everywhere (the browser default ring is
   nearly invisible on cream). Mouse clicks stay ring-free via
   :focus-visible. */
:focus-visible {
  outline: 2px solid var(--orange-deep);
  outline-offset: 2px;
}
/* Dark sections need the light ring. */
.plate :focus-visible,
.closing :focus-visible,
.wing-stat-popup :focus-visible,
.golden-hotspot:focus-visible {
  outline-color: var(--orange-3);
}
.closing-form input:focus-visible {
  outline: 2px solid var(--orange-3);
  outline-offset: -2px;
  border-radius: 999px;
}

/* Keyboard/SR hotspots over the golden scales on the plate canvases.
   Invisible by design (the canvas draws the golden + breathing ring);
   the focus ring appears for keyboard users. */
.golden-hotspots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.golden-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent; border: 0; padding: 0;
  pointer-events: auto;
  cursor: pointer;
}

/* === JS-failure fallbacks ==================================== */
/* JS disabled or the head gate never ran: no veil, no hidden content. */
.no-js .monark-veil { display: none; }
.no-js .reveal,
.reveal-failsafe .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* === Reduced motion (page-level) ============================= */
/* The capability gate already routes reduced-motion users into
   perf-lite (no veil, no canvas loops). This block covers what CSS
   itself still animated for them. */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .veil-hint .arr-down { animation: none; }
  .gauge .gauge-fill,
  .gauge-rows .bar .fill,
  .rail-card .meter .fill,
  .case-tile.case-wip .wip-fill,
  .spark-anim .line, .spark-anim .fill { transition: none; }
  .btn:hover, .btn-primary:hover, .btn-orange:hover,
  .svc-card:hover, .case-tile:hover, .member:hover, .os-tile:hover { transform: none; }
  .card-live .pill::before, .agent-fr .dot, .os-dash-live .d,
  .case-tile.case-wip::before { animation: none; }
}

/* === Older-engine guard for motion-path pulses ================ */
/* Browsers without offset-path support (Safari < 15.4, old WebKit
   forks) would render every pulse dot stuck at the SVG origin as a
   blinking artifact in the corner. Hide them there; the diagrams read
   fine without the moving dots. */
@supports not (offset-distance: 0%) {
  .workflow .pulse,
  svg circle[style*="offset-path"] {
    display: none;
  }
}