/* ============================================================
   Data Druid Tech Services — design system v4
   Light · Space Grotesk + Plus Jakarta Sans + Instrument Serif + Chivo Mono
   Navy 950→600 · blush 50→600 (signature coral #FB7185)
   Light default · complete dark mode (data-theme + prefers-color-scheme)
   ============================================================ */

:root{
  color-scheme:light;

  /* paper (light default) */
  --paper:#FCFCFF;
  --surface:#ffffff;
  --surface-2:#f8fafc;          /* slateCustom-50 */
  --surface-3:#f1f5f9;          /* slateCustom-100 */
  --surface-glass:rgba(255,255,255,.85);

  /* ink */
  --ink:#050914;                /* navy-950 */
  --ink-2:#1e293b;              /* slateCustom-800 */
  --ink-3:#475569;              /* slateCustom-600 */
  --ink-4:#64748b;              /* slateCustom-500 — AA on paper */
  --ink-5:#cbd5e1;              /* slateCustom-300 */

  /* navy (brand signature midnight) */
  --navy:#1D2B53;               /* navy-800 */
  --navy-2:#2A3C6E;             /* navy-700 */
  --navy-soft:#eef1f7;
  --navy-tint:#1D2B5314;        /* 8% navy */

  /* blush (signature coral) */
  --blush:#FB7185;              /* blush-400 */
  --blush-2:#F43F5E;            /* blush-500 */
  --blush-ink:#E11D48;          /* blush-600 */
  --blush-soft:#FFF1F2;         /* blush-50 */
  --blush-tint:#FB718522;       /* 13% blush */
  --blush-line:#fecdd3;         /* blush-200 accent border */

  /* semantic */
  --line:#e2e8f0;               /* slateCustom-200 */
  --line-2:#cbd5e1;             /* decorative divider — not for interactive borders */
  /* Form-control borders are UI components: WCAG AA wants >=3:1 against their own
     fill. --line-2 on white is only 1.46:1, so inputs get their own darker token. */
  --line-input:#7d8ca3;         /* 3.41:1 on --surface #fff, 3.26:1 on --surface-2 */
  --ok:#10b981;
  --ok-soft:#d1fae5;
  --ok-ink:#047857;             /* green that passes AA as text on paper */
  --ok-line:#a7f3d0;
  --focus-ring:#E11D48;

  /* Brand-on-surface text colour: navy in light, blush/coral in dark so it stays readable. */
  --brand-on-bg:var(--navy);
  --brand-on-bg-soft:var(--blush);

  /* fonts */
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-sans:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-editorial:"Instrument Serif", "Times New Roman", serif;
  --font-mono:"Chivo Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* shape & motion */
  --radius-sm:8px;
  --radius:14px;
  --radius-xl:20px;
  --radius-2xl:28px;
  --radius-pill:999px;
  --maxw:1240px;
  --ribbon-h:33px;              /* measured height of the telemetry ribbon; nav sticks below it */
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);

  /* shadows */
  --shadow-tactile:0 20px 40px -15px rgba(29,43,83,.08), 0 0 0 1px rgba(226,232,240,.8);
  --shadow-tactile-hover:0 30px 60px -15px rgba(29,43,83,.14), 0 0 0 1px rgba(29,43,83,.25);
  --shadow-glow-blush:0 0 35px -5px rgba(251,113,133,.35);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05);
  --shadow-md:0 2px 6px rgba(15,23,42,.05), 0 16px 40px rgba(15,23,42,.07);

  /* legacy aliases (kept for backwards compat with old templates during migration) */
  --pink:var(--blush);
  --pink-ink:var(--blush-ink);
  --pink-soft:var(--blush-soft);
  --dark:#0a1024;               /* for the dark governance band (always dark) */
  --dark-2:#050914;
  --dark-head:#f1f5f9;
  --dark-ink:#cfd6e6;
  --dark-ink-2:#a4adcc;
  --dark-ink-3:#94a3b8;         /* meta text on the always-dark footer/band (AA on --dark) */
  --dark-line:#1e2a55;

  /* legacy also aliased so we don't break anything mid-rewrite */
  --ink-legacy:var(--ink);
  --ink2-legacy:var(--ink-3);
  --ink3-legacy:var(--ink-4);
}

/* ===================== dark theme tokens ===================== */
:root[data-theme="dark"]{
  color-scheme:dark;

  --paper:#050914;
  --surface:#0C1427;
  --surface-2:#121D38;
  --surface-3:#1D2B53;
  --surface-glass:rgba(12,20,39,.85);

  --ink:#f1f5f9;
  --ink-2:#cbd5e1;
  --ink-3:#94a3b8;
  --ink-4:#94a3b8;
  --ink-5:#475569;

  --navy-soft:#1D2B53;
  --blush-ink:#FB7185;
  --blush-soft:#3a1226;
  --blush-line:#6d2036;

  --line:#2a3a6b;
  --line-2:#3d5090;
  --line-input:#5d6f9e;         /* 3.36:1 on --surface-2 #121D38, 3.70:1 on --surface #0C1427 */

  --ok-ink:#34d399;
  --ok-soft:#052e22;
  --ok-line:#065f46;
  --focus-ring:#FB7185;

  /* Dark mode: navy on navy is invisible. Flip brand-on-bg to a bright readable tint. */
  --brand-on-bg:#cbd5e1;
  --brand-on-bg-soft:#fb7185;

  --shadow-tactile:0 20px 40px -15px rgba(0,0,0,.5), 0 0 0 1px rgba(58,75,140,.5);
  --shadow-tactile-hover:0 30px 60px -15px rgba(0,0,0,.65), 0 0 0 1px rgba(120,140,200,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --paper:#050914;
    --surface:#0C1427;
    --surface-2:#121D38;
    --surface-3:#1D2B53;
    --surface-glass:rgba(12,20,39,.85);

    --ink:#f1f5f9;
    --ink-2:#cbd5e1;
    --ink-3:#94a3b8;
    --ink-4:#94a3b8;
    --ink-5:#475569;

    --navy-soft:#1D2B53;
    --blush-ink:#FB7185;
    --blush-soft:#3a1226;
    --blush-line:#6d2036;

    --line:#2a3a6b;
    --line-2:#3d5090;
    --line-input:#5d6f9e;

    --ok-ink:#34d399;
    --ok-soft:#052e22;
    --ok-line:#065f46;
    --focus-ring:#FB7185;

    --brand-on-bg:#cbd5e1;
    --brand-on-bg-soft:#fb7185;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
/* The root carries the canvas colour as well as <body>. Both themes define
   --paper, so the console and the public site are painted correctly under
   data-theme="dark" before the body rule resolves — no white flash on a slow
   paint, and no wrong colour behind an over-scroll. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:7rem; background:var(--paper); }
[id]{ scroll-margin-top:7rem; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-3);
  font-family:var(--font-sans);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
  overflow-wrap:break-word;
  transition:background .25s var(--ease), color .25s var(--ease);
}
::selection{ background:var(--navy); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* skip-to-content — off-screen until focused */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; padding:.7rem 1.1rem; border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); border:1px solid var(--line-2); font-family:var(--font-display); font-weight:700; font-size:.9rem; }
.skip-link:focus{ left:1rem; top:1rem; }

/* shared layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; padding-block:clamp(3.5rem,7vw,6.5rem); }
.section-tight{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.section-soft{ background:var(--surface); border-block:1px solid var(--line); }

/* ===================== type ===================== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem,5.4vw,4.2rem); }
h2{ font-size:clamp(1.9rem,4vw,3rem); }
h3{ font-size:1.25rem; letter-spacing:-.02em; }
p{ margin:0 0 1rem; }
.lead{ font-size:clamp(1.04rem,.95rem+.55vw,1.25rem); color:var(--ink-3); line-height:1.55; max-width:62ch; }
.muted{ color:var(--ink-3); }
.dim{ color:var(--ink-4); }
.tiny{ font-size:.8rem; }
em.it{ font-style:italic; color:var(--brand-on-bg); font-family:var(--font-editorial); font-weight:400; }

/* editorial accent: any inline `em` inside an h1/h2 gets the serif italic look */
h1 em, h2 em, h3 em{ font-family:var(--font-editorial); font-style:italic; font-weight:400; color:var(--ink-3); letter-spacing:0; }

/* monospace eyebrow — prototype's "[ 01 // UNIFIED ARCHITECTURAL BACKBONE ]" style */
.tech-pill,
.micro{
  font-family:var(--font-display);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--blush-ink);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.micro{ font-family:var(--font-mono); letter-spacing:.06em; font-weight:500; }
.micro b{ color:var(--ink-4); font-weight:500; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ===================== buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  letter-spacing:.04em;
  min-height:2.85rem; padding:.9rem 1.5rem;
  border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
/* 2.75rem = 44px at the 16px root — the minimum tap target. The console sets
   the same height in console.css; both are here so neither can drift under it. */
.btn-sm{ min-height:2.75rem; padding:.6rem 1.1rem; font-size:.78rem; }

:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }

.btn-primary{ background:var(--navy); color:#fff; box-shadow:0 6px 18px rgba(29,43,83,.22); }
.btn-primary:hover{ background:var(--ink); box-shadow:0 12px 28px rgba(29,43,83,.32); }

.btn-pink{ background:var(--blush); color:#1c0a14; }
.btn-pink:hover{ background:var(--blush-2); color:#fff; }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--navy); background:var(--surface); }

.btn .ico{ transition:transform .25s var(--ease); }
.btn:hover .ico{ transform:translateX(3px); }

/* chips / badges */
.chip{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-3); border:1px solid var(--line-2); border-radius:4px; padding:3px 7px; }
/* interactive chips (sector filter on /work/, blueprint add-buttons on /engage/) need a real target */
button.chip, a.chip.filter, [data-blueprint-add]{
  display:inline-flex; align-items:center;
  min-height:2.75rem; padding:.6rem 1rem; font-size:.78rem;
  border-radius:var(--radius); background:var(--surface); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
button.chip:hover, a.chip.filter:hover, [data-blueprint-add]:hover{ border-color:var(--brand-on-bg); color:var(--ink); }
a.chip.filter.active, button.chip.active{ background:var(--brand-on-bg); color:var(--paper); border-color:var(--brand-on-bg); }
.badge{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:4px; color:var(--brand-on-bg); background:var(--navy-soft); }
.badge.product{ color:var(--blush-ink); background:var(--blush-soft); }

.material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; line-height:1; vertical-align:middle; user-select:none; font-size:1.4rem; }
.msi-sm{ font-size:1.1rem; } .msi-lg{ font-size:1.7rem; }

/* ============================================================
   TOP TELEMETRY RIBBON (light only; hides on dark to avoid noise)
   ============================================================ */
.telemetry-ribbon{
  position:sticky; top:0; z-index:60;
  min-height:var(--ribbon-h);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(12px);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3);
  padding:.45rem var(--gutter);
}
.telemetry-ribbon .row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:var(--maxw); margin-inline:auto; flex-wrap:wrap; }
.telemetry-ribbon .left{ display:flex; align-items:center; gap:.8rem; }
.telemetry-ribbon .live{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:700; color:var(--brand-on-bg); letter-spacing:.08em; text-transform:uppercase; }
.telemetry-ribbon .live .ping{ width:7px; height:7px; border-radius:50%; background:var(--blush); box-shadow:0 0 0 0 var(--blush-tint); animation:ping 2s ease-in-out infinite; }
@keyframes ping{ 0%,100%{ box-shadow:0 0 0 0 rgba(251,113,133,.45); } 70%{ box-shadow:0 0 0 7px rgba(251,113,133,0); } }
.telemetry-ribbon .sep{ color:var(--ink-5); }
.telemetry-ribbon .right{ display:flex; align-items:center; gap:1rem; }
.telemetry-ribbon .start{ display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-display); font-weight:700; color:var(--brand-on-bg); letter-spacing:.06em; text-transform:uppercase; font-size:11px; }
.telemetry-ribbon .start:hover{ color:var(--blush-ink); }
@media (max-width:760px){
  .telemetry-ribbon .row > *:nth-child(3){ display:none; }
  .telemetry-ribbon .mid{ display:none; }
  :root{ --ribbon-h:52px; }   /* the .left group wraps to two lines at this width */
}
@media (max-width:400px){ :root{ --ribbon-h:68px; } }
/* No room for decorative chrome on a short/landscape viewport — release the ribbon. */
@media (max-height:480px){
  .telemetry-ribbon{ display:none; }
  :root{ --ribbon-h:0px; }
}
:root[data-theme="dark"] .telemetry-ribbon{ background:rgba(12,20,39,.88); border-bottom-color:#1e2a55; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .telemetry-ribbon{ background:rgba(12,20,39,.88); border-bottom-color:#1e2a55; }
}

/* ============================================================
   FLOATING ISLAND NAV
   ============================================================ */
.floating-nav{ position:sticky; top:var(--ribbon-h); z-index:50; padding:1rem var(--gutter) 0; }
.telemetry-ribbon + .floating-nav{ top:var(--ribbon-h); }
@media (max-height:480px){ .floating-nav{ top:0; padding-block-start:.5rem; } }
.nav-island{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.55rem .75rem;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-tactile);
  backdrop-filter:saturate(160%) blur(14px);
  max-width:var(--maxw);
  margin-inline:auto;
  transition:box-shadow .3s var(--ease), border-color .3s;
}
.nav-island.scrolled{ box-shadow:var(--shadow-tactile-hover); border-color:var(--line-2); }
.nav-brand{ display:flex; align-items:center; gap:.7rem; padding-left:.4rem; }
.nav-brand .mark{ width:2.4rem; height:2.4rem; border-radius:.6rem; background:var(--navy); padding:.45rem; box-shadow:0 4px 12px rgba(29,43,83,.18); }
:root[data-theme="dark"] .nav-brand .mark{ background:var(--surface-2); }
.nav-brand .mark img{ width:100%; height:100%; display:block; filter:invert(1); } /* the mark fills with currentColor inside the SVG */
.nav-brand .text{ display:flex; flex-direction:column; line-height:1.1; }
.nav-brand .text strong{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; }
.nav-brand .text small{ font-family:var(--font-display); font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); font-weight:700; margin-top:.15rem; }

.nav-pills{ display:flex; align-items:center; gap:.2rem; background:var(--surface-2); padding:.3rem; border-radius:var(--radius); border:1px solid var(--line); font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.nav-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .85rem; border-radius:calc(var(--radius) - 6px); color:var(--ink-3); transition:color .2s, background .2s; }
.nav-pill:hover{ color:var(--ink); background:var(--surface); }
.nav-pill .num{ color:var(--blush-ink); }
.nav-pill.active{ color:var(--ink); background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.06); }

.nav-cta{ display:flex; align-items:center; gap:.5rem; padding-right:.4rem; }

.nav-toggle{ display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:0; flex-shrink:0; }
.nav-mobile{ display:none; }
.nav-cta-btn{ flex-shrink:0; }

@media (max-width:1080px){
  .nav-pills{ display:none; }
  .nav-toggle{ display:grid; place-items:center; width:2.75rem; height:2.75rem; min-width:2.75rem; min-height:2.75rem; }
  .nav-mobile{ display:none; position:absolute; top:calc(100% + .5rem); inset-inline:var(--gutter); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-tactile); padding:.6rem; flex-direction:column; gap:.25rem; }
  .nav-mobile.open{ display:flex; }
  .nav-mobile .nav-pill{ width:100%; justify-content:flex-start; padding:.8rem .9rem; font-size:12px; min-height:2.75rem; }
}

:root[data-theme="dark"] .nav-island{ background:rgba(12,20,39,.85); border-color:#1e2a55; }
:root[data-theme="dark"] .nav-pills{ background:rgba(29,43,83,.4); border-color:#1e2a55; }
:root[data-theme="dark"] .nav-pill.active{ background:#1D2B53; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nav-island{ background:rgba(12,20,39,.85); border-color:#1e2a55; }
  :root:not([data-theme="light"]) .nav-pills{ background:rgba(29,43,83,.4); border-color:#1e2a55; }
  :root:not([data-theme="light"]) .nav-pill.active{ background:#1D2B53; }
}

/* theme toggle button (sits in nav-island, beside the CTA) */
.theme-toggle{
  width:2.75rem; height:2.75rem; flex-shrink:0;
  border-radius:.55rem; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; transition:background .2s, color .2s, transform .2s;
}
.theme-toggle:hover{ background:var(--surface); color:var(--brand-on-bg); transform:translateY(-1px); }
.theme-toggle .material-symbols-outlined{ font-size:1.15rem; }

/* ============================================================
   TEXTURES
   ============================================================ */
.dot-matrix{
  background-image:radial-gradient(rgba(29,43,83,.08) 1.2px, transparent 1.2px);
  background-size:24px 24px;
}
.dark-circuit-grid{
  background-image:
    radial-gradient(rgba(251,113,133,.15) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:32px 32px, 64px 64px, 64px 64px;
}
:root[data-theme="dark"] .dot-matrix{ background-image:radial-gradient(rgba(251,113,133,.10) 1.2px, transparent 1.2px); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dot-matrix{ background-image:radial-gradient(rgba(251,113,133,.10) 1.2px, transparent 1.2px); }
}

/* ============================================================
   3D TILT CARD + CURSOR RADIAL LIGHT
   ============================================================ */
.tilt-card{
  position:relative;
  transform-style:preserve-3d;
  perspective:1000px;
  transition:transform .2s var(--ease-spring), box-shadow .2s var(--ease);
}
.tilt-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(420px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(251,113,133,.09), transparent 80%);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none; z-index:2;
}
.tilt-card:hover::before{ opacity:1; }

/* ============================================================
   REVEAL (scroll-in)
   ============================================================ */
/* The hidden state is scoped to .js — the class the inline head script stamps on <html>.
   Without JS nothing hides, so the page renders in full instead of blank. */
.js .reveal{ opacity:0; transform:translateY(1.2rem); transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:.07s; } .js .reveal[data-delay="2"]{ transition-delay:.14s; } .js .reveal[data-delay="3"]{ transition-delay:.21s; }

.js .reveal-node{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-spring), transform .7s var(--ease-spring); }
.js .reveal-node.is-revealed{ opacity:1; transform:none; }

/* Belt and braces for browsers that report scripting support directly. */
@media (scripting:none){
  .reveal,.reveal-node{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   HERO — two-column with Druid Decision Runtime console
   ============================================================ */
.hero{ padding-block:clamp(3rem,6vw,5.5rem) clamp(2.5rem,5vw,4.5rem); border-bottom:1px solid var(--line); }
.hero-grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }
/* With no impact metrics on file the runtime console is not rendered at all —
   the copy column then takes the full width instead of sitting in a 1.45fr
   track beside an empty one. */
.hero-grid.is-solo{ grid-template-columns:1fr; }

.hero-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem; border:1px solid var(--line); background:var(--surface-glass); border-radius:var(--radius-pill); backdrop-filter:blur(8px); }
@media (max-width:560px){
  /* the eyebrow copy is admin-owned and wraps here — a pill radius on a 2-line box looks broken */
  .hero-eyebrow{ border-radius:var(--radius); align-items:flex-start; }
  .hero-eyebrow .dot{ margin-top:.35rem; flex-shrink:0; }
}
.hero-eyebrow .dot{ width:9px; height:9px; border-radius:50%; background:var(--blush); animation:ping 2s ease-in-out infinite; }
.hero-eyebrow span{ font-family:var(--font-display); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink); }

.hero h1{ margin-block-start:1.4rem; max-width:18ch; font-size:clamp(2.6rem,5.8vw,4.4rem); }
.hero h1 em{ display:block; font-family:var(--font-editorial); font-style:italic; font-weight:400; color:var(--ink-3); }
.hero .lead{ margin-block-start:1.4rem; max-width:48ch; }
.hero-cta{ display:flex; gap:.8rem; margin-block-start:2rem; flex-wrap:wrap; }

.hero-trust{ margin-block-start:clamp(2.4rem,5vw,3rem); padding-block-start:1.6rem; border-top:1px solid var(--line); }
.hero-trust .label{ font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-4); margin-bottom:.9rem; }
.hero-trust .names{ display:flex; flex-wrap:wrap; gap:1.4rem; font-family:var(--font-display); font-size:.85rem; font-weight:700; color:var(--ink); }
.hero-trust .names li{ display:inline-flex; align-items:center; gap:.4rem; list-style:none; }
.hero-trust .names .material-symbols-outlined{ color:var(--blush-ink); font-size:1.1rem; }

/* Druid Decision Runtime console */
.reactor{ position:relative; }
.reactor-card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-tactile);
  overflow:hidden;
  backdrop-filter:blur(12px);
}
.reactor-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.85rem 1.1rem; background:var(--dark); color:#fff; border-bottom:1px solid #0a1429; }
.reactor-head .lhs{ display:inline-flex; align-items:center; gap:.5rem; }
.reactor-head .lhs .pulse{ width:9px; height:9px; border-radius:50%; background:var(--blush); animation:ping 2s ease-in-out infinite; }
.reactor-head .lhs span{ font-family:var(--font-display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#cbd5e1; }
.reactor-head .pill{ font-family:var(--font-mono); font-size:10px; padding:.2rem .5rem; border-radius:4px; background:rgba(16,185,129,.18); color:#6ee7b7; border:1px solid rgba(16,185,129,.35); }

.reactor-body{ padding:1.4rem; background:rgba(255,255,255,.97); display:grid; gap:1rem; }
.reactor-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; font-family:var(--font-mono); font-size:.78rem; }
.reactor-tile{ padding:.85rem 1rem; border-radius:var(--radius-xl); background:var(--surface-2); border:1px solid var(--line); }
.reactor-tile .label{ font-family:var(--font-display); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-4); }
.reactor-tile .val{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--ink); margin-top:.35rem; line-height:1.1; }
.reactor-tile .val.coral{ color:var(--blush-ink); }
.reactor-tile .val .unit{ font-size:.55em; color:var(--ink-4); font-weight:500; margin-left:.25rem; }
.reactor-tile .meta{ font-size:9.5px; color:var(--ok-ink); margin-top:.25rem; font-weight:600; }
.reactor-tile .meta.navy{ color:var(--brand-on-bg); }


/* ============================================================
   SECTION HEAD — used inside every section
   ============================================================ */
.shead{ margin-bottom:clamp(2rem,4vw,3rem); }
.shead h2{ margin-top:.9rem; }
.shead .lead{ margin-top:.9rem; }
.shead.row{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }

/* ============================================================
   7-DISCIPLINE BENTO (services + capabilities on the home)
   ============================================================ */
/* The backbone is a full-width banner; the disciplines are peer tiles in one
   auto-fitting row of equals. The old shape gave the core card a 5-column track
   of its own, so any time the tile stack was shorter than the card was tall the
   section carried a dead white column — and the seventh discipline was exiled to
   a differently-styled row underneath. auto-fit (not auto-fill) means the tiles
   stretch to close the final row, so 3, 7 or 12 services all fill the grid. */
.bento{ display:grid; gap:1.1rem; }
.bento-master{ min-width:0; }
.bento-satellites{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
}
.bento-satellites > *{ min-width:0; }

.bento-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-2xl);
  padding:1.6rem 1.6rem;
  box-shadow:var(--shadow-tactile);
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.bento-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-tactile-hover); border-color:var(--navy-tint); }
.bento-card.core{ border:2px solid var(--navy); }
.bento-card.koinos{ border:2px solid var(--blush-line); }
.bento-card.koinos:hover{ box-shadow:var(--shadow-glow-blush); }

.bento-card .head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.bento-card .ico{ width:3rem; height:3rem; border-radius:.85rem; background:var(--navy); color:#fff; display:grid; place-items:center; box-shadow:0 8px 22px rgba(29,43,83,.18); }
.bento-card .ico .material-symbols-outlined{ font-size:1.5rem; color:var(--blush-soft); }
.bento-card .ico.soft{ background:var(--surface-2); color:var(--brand-on-bg); }
.bento-card .ico.soft .material-symbols-outlined{ color:var(--brand-on-bg); }
.bento-card .num{ font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-4); }
.bento-card .num.coral{ color:var(--blush-ink); }

.bento-card h3{ font-size:clamp(1.2rem,1.7vw,1.55rem); }
.bento-card p{ font-size:.92rem; color:var(--ink-3); margin-top:.6rem; line-height:1.55; }
.bento-card .foot{ margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-4); text-transform:uppercase; }
.bento-card .foot.ok{ color:var(--ok-ink); font-weight:700; }
.bento-card.koinos .foot{ color:var(--blush-ink); font-weight:700; }

.bento-card .wave{ display:inline-flex; align-items:flex-end; gap:2px; height:1rem; }
.bento-card .wave span{ width:3px; background:var(--ok); border-radius:2px; animation:pulseWave 1.4s ease-in-out infinite; }
@keyframes pulseWave{ 0%,100%{ height:4px; } 50%{ height:16px; } }

.bento-card .mesh{ position:absolute; top:0; right:0; width:8rem; height:8rem; background:radial-gradient(circle at top right, rgba(251,113,133,.18), transparent 60%); pointer-events:none; }

/* ---- the backbone banner ---- */
.bento-card.core{
  display:grid; align-items:center;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(1rem,2.5vw,1.8rem); row-gap:1rem;
  padding:clamp(1.3rem,3vw,2.1rem);
}
.core-ico{ width:3.6rem; height:3.6rem; }
.core-ico .material-symbols-outlined{ font-size:1.8rem; }
.core-body{ min-width:0; }
.core-body h3{ margin-top:.35rem; font-size:clamp(1.35rem,2.4vw,2rem); text-wrap:balance; }
.core-body p{ max-width:62ch; }
.core-foot{ grid-column:1 / -1; margin-top:.4rem; }
@media (min-width:1000px){
  /* wide: icon | words | strapline, all on one rule-free line */
  .bento-card.core{ grid-template-columns:auto minmax(0,1fr) minmax(0,15rem); }
  .core-foot{ grid-column:3; margin-top:0; padding-top:0; border-top:0; border-left:1px solid var(--line); padding-left:1.4rem; align-self:center; }
}
.bento-card .wave span.w2{ animation-delay:.15s; }
.bento-card .wave span.w3{ animation-delay:.3s; }
.bento-card .wave span.w4{ animation-delay:.45s; }
.bento-card .wave span.w5{ animation-delay:.6s; }

/* ---- a discipline tile ---- */
.bento-card.svc .head{ align-items:flex-start; }
.svc-body{ min-width:0; }
.svc-kind{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4);
}
.svc-kind.coral{ color:var(--blush-ink); }
.bento-card.svc h3{ margin-top:.4rem; text-wrap:balance; hyphens:auto; }
.svc-detail{ font-size:.9rem; }
.svc-chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:1rem; }

/* ============================================================
   POLICY GATE STEPPER (4-step, animated)
   ============================================================ */
.policy-gate{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-2xl); padding:1.8rem; box-shadow:var(--shadow-tactile); }
.policy-gate .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:1.4rem; }
@media (max-width:760px){ .policy-gate .steps{ grid-template-columns:1fr 1fr; } }
.policy-step{ position:relative; padding:1rem 1rem 1rem 2.4rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); }
.policy-step::before{ content:counter(step); counter-increment:step; position:absolute; left:.7rem; top:.85rem; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--surface); border:1.5px solid var(--line-2); display:grid; place-items:center; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-4); transition:background .35s var(--ease-spring), border-color .35s, color .35s, transform .35s; }
.policy-step .name{ font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.policy-step .hint{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); margin-top:.25rem; letter-spacing:.04em; text-transform:uppercase; }
.policy-step.active{ background:var(--navy); border-color:var(--navy); }
.policy-step.active::before{ background:var(--blush); border-color:var(--blush); color:#fff; font-weight:700; }
.policy-step.active .name{ color:#fff; }
.policy-step.active .hint{ color:#cbd5e1; }
.policy-step.done::before{ background:var(--ok); border-color:var(--ok); color:#fff; content:"✓"; }

.gate-progress{ height:6px; background:var(--surface-3); border-radius:var(--radius-pill); overflow:hidden; }
/* Animated with transform, not width — a width tween relayouts the bar every frame. */
.gate-progress .fill{ display:block; height:100%; width:100%; transform:scaleX(.25); transform-origin:left center; will-change:transform; background:linear-gradient(90deg, var(--navy), var(--blush)); border-radius:var(--radius-pill); transition:transform .6s var(--ease-spring); }

/* ============================================================
   DARK GOVERNANCE BAND (always dark, regardless of theme)
   ============================================================ */
.dark{ background:var(--dark); color:var(--dark-ink); }
.dark .micro{ color:var(--blush); } .dark .micro b{ color:#6c7095; }
.dark h2{ color:var(--dark-head); } .dark h2 em{ color:var(--blush); }
.dark .lead{ color:var(--dark-ink-2); }
.dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:880px){ .dgrid{ grid-template-columns:1fr; } }

.principles{ margin-top:1.8rem; display:grid; gap:.2rem; counter-reset:principle; }
.principles > div{ display:grid; grid-template-columns:auto 1fr; gap:.8rem; padding:.85rem 0; border-top:1px solid var(--dark-line); }
.principles > div::before{ counter-increment:principle; content:counter(principle, decimal-leading-zero); font-family:var(--font-mono); font-size:11px; color:var(--blush); padding-top:.1rem; }
.principles .material-symbols-outlined{ color:var(--blush); font-size:20px; }
.principles b{ color:#e6e9f2; font-weight:600; }
.principles span.t{ color:#9aa2c0; font-size:.9rem; display:block; margin-top:.15rem; }

.code-terminal{ background:#050914; border:1px solid #1e2a55; border-radius:var(--radius-xl); overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); }
.code-terminal-bar{ display:flex; gap:.45rem; align-items:center; padding:.8rem 1rem; border-bottom:1px solid #0a1429; background:#04081a; }
.code-terminal-bar .d{ width:10px; height:10px; border-radius:50%; background:#1e2a55; }
.code-terminal-bar .d.r{ background:#fb7185; }
.code-terminal-bar .d.y{ background:#fcd34d; }
.code-terminal-bar .d.g{ background:#10b981; }
.code-terminal-bar .fn{ margin-left:.5rem; font-family:var(--font-mono); font-size:11px; color:#64748b; letter-spacing:.04em; }
.code-terminal pre{ margin:0; padding:1.2rem 1.3rem; font-family:var(--font-mono); font-size:12px; line-height:1.85; color:#cbd5e1; overflow-x:auto; }
.c-cmt{ color:#64748b; } .c-key{ color:#93c5fd; } .c-str{ color:#86efac; } .c-num{ color:#fbbf24; } .c-fn{ color:#c4b5fd; } .c-pink{ color:var(--blush); }

/* ============================================================
   IMPACT METRICS
   ============================================================ */
.metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; }
.metric{ position:relative; background:var(--surface); padding:clamp(1.4rem,3vw,2rem) clamp(1.2rem,2.5vw,1.7rem); }
/* A coral rule that grows in when the figure does — the entrance is the tile's
   own state, not a reading of anything. */
.metric::before{
  content:""; position:absolute; inset-block-start:0; inset-inline-start:0;
  block-size:3px; inline-size:100%; background:var(--blush);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .7s var(--ease-spring);
}
.metrics.in .metric::before{ transform:scaleX(1); }
.metrics.in .metric:nth-child(2)::before{ transition-delay:.09s; }
.metrics.in .metric:nth-child(3)::before{ transition-delay:.18s; }
.metrics.in .metric:nth-child(4)::before{ transition-delay:.27s; }
.metrics.in .metric:nth-child(n+5)::before{ transition-delay:.36s; }
.mval{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4.4vw,3.2rem); color:var(--brand-on-bg); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.mpre,.msuf{ color:var(--blush-ink); }
.mlabel{ margin-top:.7rem; font-size:1rem; color:var(--ink); font-weight:600; text-wrap:balance; }
.mnote{ margin-top:.4rem; font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; line-height:1.5; color:var(--ink-4); }
@media (prefers-reduced-motion:reduce){
  .metric::before{ transform:scaleX(1); transition:none; }
}

/* ============================================================
   CASE STUDY ROWS (work list + home featured work)
   ============================================================ */
.case-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.case-filter a{ padding:.55rem 1rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); color:var(--ink-3); transition:all .2s; }
.case-filter a:hover{ border-color:var(--navy); color:var(--brand-on-bg); }
.case-filter a.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.case-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-2xl); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--shadow-tactile); margin-bottom:1.1rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease); display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(1.5rem,4vw,2.4rem); align-items:center; }
.case-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-tactile-hover); }
@media (max-width:880px){ .case-card{ grid-template-columns:1fr; } }

.case-card .badges{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.case-card .badges .pill{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; padding:.25rem .6rem; border-radius:4px; background:var(--blush-soft); color:var(--blush-ink); border:1px solid var(--blush-line); }
.case-card .badges .for{ font-family:var(--font-mono); font-size:11px; color:var(--ink-4); }
.case-card h2{ font-size:clamp(1.5rem,2.4vw,1.9rem); margin:.6rem 0 0; }
.case-card .desc{ color:var(--ink-3); font-size:.95rem; line-height:1.6; margin-top:.7rem; }
.case-card .pills{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; font-family:var(--font-mono); font-size:10.5px; color:var(--ink); font-weight:700; }
.case-card .pills .pill{ padding:.3rem .6rem; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); }

.case-telemetry{ background:var(--dark); color:var(--dark-ink); border-radius:var(--radius-xl); padding:1.2rem; font-family:var(--font-mono); font-size:11px; line-height:1.7; border:1px solid #0a1429; }
.case-telemetry .row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.3rem 0; border-bottom:1px solid #1e2a55; }
.case-telemetry .row:last-child{ border-bottom:0; }
.case-telemetry .row .v{ color:var(--blush); font-weight:700; }
.case-telemetry .row .k{ color:var(--dark-ink-3); text-transform:uppercase; font-size:9.5px; letter-spacing:.06em; }

/* ============================================================
   INSIGHTS — editorial journal + article reading
   ============================================================ */
.post-feature{ display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line); border-radius:var(--radius-2xl); overflow:hidden; background:var(--surface); margin-bottom:1.4rem; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
@media (max-width:760px){ .post-feature{ grid-template-columns:1fr; } }
.post-feature:hover{ transform:translateY(-3px); box-shadow:var(--shadow-tactile-hover); border-color:var(--navy-tint); }
.pf-img{ overflow:hidden; }
.pf-img img{ width:100%; height:100%; min-height:15rem; object-fit:cover; transition:transform .4s var(--ease); }
.post-feature:hover .pf-img img{ transform:scale(1.03); }
.pf-body{ padding:clamp(1.6rem,3vw,2.4rem); display:flex; flex-direction:column; }
.pf-body h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin:.8rem 0 0; }
.post-meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.post-meta .mono{ font-size:11px; }
.post-excerpt{ color:var(--ink-3); margin-top:.8rem; line-height:1.6; }
.post-by{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-4); margin-top:1rem; }
.pf-body .go{ margin-top:auto; padding-top:1.2rem; }

.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem; }
.post-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-2xl); overflow:hidden; background:var(--surface); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.post-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-tactile-hover); border-color:var(--navy-tint); }
.pc-img{ overflow:hidden; aspect-ratio:16/9; }
.pc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.post-card:hover .pc-img img{ transform:scale(1.04); }
.pc-body{ padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.pc-body h3{ font-size:1.15rem; margin:.7rem 0 0; }
.pc-body .post-excerpt{ font-size:.92rem; }
.pc-body .go{ margin-top:.9rem; }

.art-hero{ position:relative; padding-block:clamp(2rem,5vw,3.5rem) 0; border-bottom:1px solid var(--line); }
.art-hero h1{ font-size:clamp(2rem,4.5vw,3.2rem); margin-top:.4rem; max-width:24ch; }
.art-byline{ display:flex; align-items:center; gap:.6rem; margin-top:1.3rem; font-size:.95rem; color:var(--ink-3); }
.art-byline .dot{ color:var(--ink-5); }
.art-avatar{ width:2rem; height:2rem; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.9rem; text-transform:uppercase; }
.art-cover{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); margin-top:2rem; }
.art-body{ font-size:1.07rem; line-height:1.75; }
.art-foot{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.8rem; border-top:1px solid var(--line); }

/* ============================================================
   SECTORS / TRUST / ROWS (legacy — kept for the home page variants)
   ============================================================ */
.sectors{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:820px){ .sectors{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .sectors{ grid-template-columns:1fr; } }
.sector{ border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; background:var(--surface); transition:border-color .2s, transform .2s; }
.sector:hover{ border-color:var(--navy); transform:translateY(-3px); }
.sector .material-symbols-outlined{ color:var(--brand-on-bg); }
.sector h3{ font-size:1.1rem; margin-top:.9rem; }
.sector p{ font-size:.9rem; color:var(--ink-3); margin-top:.4rem; }
.sector .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); margin-top:.8rem; }

.cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }
.pcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-2xl); padding:1.7rem; display:flex; flex-direction:column; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.pcard:hover{ border-color:var(--navy); transform:translateY(-3px); box-shadow:var(--shadow-tactile-hover); }
.pcard .top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.pcard .ic{ color:var(--brand-on-bg); }
.pcard h3{ font-size:1.4rem; font-weight:600; }
.pcard .role{ font-family:var(--font-mono); font-size:11px; color:var(--ink-4); margin-top:.2rem; }
.pcard .desc{ color:var(--ink-3); font-size:.95rem; margin-top:.8rem; flex:1; }
.pcard .chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1.1rem; }
.pcard .go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-family:var(--font-mono); font-size:11px; color:var(--brand-on-bg); }

.rows{ border-top:1px solid var(--line-2); }
.row-item{ display:grid; grid-template-columns:8rem 1fr auto; gap:1.3rem; align-items:center; padding:1.5rem .4rem; border-bottom:1px solid var(--line); transition:background .2s, padding .2s; }
.row-item:hover{ background:var(--surface); padding-left:1rem; }
.row-item .date{ font-family:var(--font-mono); font-size:12px; color:var(--ink-4); }
.row-item h3{ font-size:1.2rem; font-weight:600; }
.row-item .go{ color:var(--ink-4); transition:transform .2s, color .2s; }
.row-item:hover .go{ color:var(--brand-on-bg); transform:translateX(4px); }
@media (max-width:600px){ .row-item{ grid-template-columns:1fr; gap:.5rem; } }

/* ============================================================
   PAGE HERO (inner pages) — phero
   ============================================================ */
.phero{ position:relative; overflow:hidden; padding-block:clamp(3.5rem,7vw,5.5rem) clamp(1.75rem,3.5vw,3rem); text-align:center; border-bottom:1px solid var(--line); }
.phero .inner{ position:relative; z-index:1; max-width:48rem; margin-inline:auto; }
.phero .micro{ justify-content:center; }
.phero h1{ font-size:clamp(2rem,4.4vw,3.1rem); margin:1rem auto .85rem; max-width:22ch; }
.phero .lead{ margin-inline:auto; }
.phero .meta{ display:inline-flex; gap:1.1rem; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:1.6rem; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-4); }
.phero .meta span{ display:inline-flex; gap:.45rem; align-items:center; }
.phero .meta b{ color:var(--brand-on-bg); font-weight:600; }
.phero .pulse{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(16,185,129,.5); animation:ping 2.2s infinite; }
.phero .filters{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:1.5rem; position:relative; z-index:1; }

/* ============================================================
   FAQ
   ============================================================ */
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; gap:.9rem; align-items:flex-start; padding:1.3rem .3rem; font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q{ font-family:var(--font-mono); font-size:.78rem; color:var(--blush-ink); padding-top:.3rem; min-width:2.4rem; }
.faq .ans{ padding:0 .3rem 1.4rem 3.3rem; color:var(--ink-3); }
@media (max-width:560px){
  /* the 3.3rem alignment gutter costs ~19% of a phone's width — drop it */
  .faq .ans{ padding-inline:.3rem; }
  .faq summary{ gap:.5rem; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(2.5rem,6vw,5rem); border-radius:var(--radius-2xl); border:1px solid var(--line);
  background:radial-gradient(40rem 22rem at 80% -40%, rgba(251,113,133,.18), transparent 60%), linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow-tactile);
}
.cta h2{ max-width:18ch; margin-inline:auto; }

/* ============================================================
   FORMS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:.45rem; margin-block-end:1.1rem; }
.field label{ font-size:.85rem; color:var(--ink); font-weight:600; }
.field input,.field select,.field textarea{
  background:var(--surface); border:1px solid var(--line-input); color:var(--ink);
  padding:.8rem .95rem; border-radius:var(--radius); font-family:var(--font-sans);
  font-size:16px;   /* under 16px iOS Safari zooms the viewport on focus and never zooms back */
  transition:border-color .2s, box-shadow .2s;
}
@media (min-width:761px){ .field input,.field select,.field textarea{ font-size:.98rem; } }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--brand-on-bg); box-shadow:0 0 0 3px var(--focus-ring); }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-4); opacity:1; }
.field input:disabled,.field select:disabled,.field textarea:disabled{
  background:var(--surface-3); color:var(--ink-4); border-color:var(--line); cursor:not-allowed; opacity:1;
}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--blush-ink); }
.field-err{ color:var(--blush-ink); }
.alert{ padding:.9rem 1.15rem; border-radius:var(--radius); margin-block-end:1.1rem; font-size:.92rem; border:1px solid; }
.alert-success{ background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok-ink); }
.alert-error{ background:var(--blush-soft); border-color:var(--blush-line); color:var(--blush-ink); }

/* ============================================================
   ABOUT page elements
   ============================================================ */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:760px){ .mv-grid{ grid-template-columns:1fr; } }
.mv-card{ border:1px solid var(--line); border-radius:var(--radius-2xl); padding:2rem 1.8rem; background:var(--surface); }
.mv-card.mission{ border-top:3px solid var(--navy); }
.mv-card.vision{ border-top:3px solid var(--blush); }
.mv-card.vision .case-label{ color:var(--brand-on-bg); }
.mv-card p{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.35; color:var(--ink); letter-spacing:-.01em; margin:1rem 0 0; text-wrap:balance; }

.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem; margin-top:clamp(1.5rem,3vw,2.2rem); }
.value-card{ border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; background:var(--surface); transition:border-color .2s, transform .2s; }
.value-card:hover{ border-color:var(--navy); transform:translateY(-3px); }
.value-card h3{ font-size:1.1rem; margin-bottom:.55rem; }
.value-card h3::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blush); margin-right:.55rem; vertical-align:middle; }
.value-card p{ color:var(--ink-3); font-size:.93rem; margin:0; line-height:1.55; }

.team-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); }

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.facts div{ background:var(--surface); padding:1.4rem 1.3rem; font-weight:600; color:var(--ink); font-size:.98rem; }
.facts span{ display:block; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-4); font-weight:400; margin-bottom:.4rem; }

.mission-statement{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.55rem,3.4vw,2.4rem); line-height:1.28; color:var(--ink); margin-top:1.2rem; text-wrap:balance; }

/* ============================================================
   CASE STUDY DETAIL
   ============================================================ */
.case-hero{ position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 130% at 82% 0%, #20386a 0%, #16161f 54%, #0e0e15 100%);
  color:#cfd6e6; padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem); border-bottom:1px solid #0a1429; }
.case-hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4; background-image:radial-gradient(rgba(251,113,133,.10) 1.2px, transparent 1.2px); background-size:24px 24px; }
.case-hero > *{ position:relative; z-index:1; }
.case-back{ display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--dark-ink-2); margin-bottom:1.6rem; padding:.7rem .8rem; margin-inline-start:-.8rem; min-height:2.75rem; }
.case-back:hover{ color:#fff; }
.case-eyebrow{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.case-client{ font-family:var(--font-mono); font-size:12px; color:var(--blush); }
.case-hero h1{ color:#fff; font-size:clamp(2.2rem,5vw,3.6rem); max-width:20ch; }
.case-lead{ color:#cbd5e1; font-size:clamp(1.08rem,1.4vw,1.32rem); max-width:46rem; margin-top:1.1rem; line-height:1.5; }
.case-meta{ display:flex; flex-wrap:wrap; gap:2.2rem; margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); }
.case-meta div{ font-size:.95rem; color:#fff; font-weight:600; }
.case-meta span{ display:block; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#a4adcc; font-weight:400; margin-bottom:.35rem; }
.case-live{ display:inline-flex; align-items:center; gap:.4rem; color:#6ee7b7; }
.case-live .pulse{ width:7px; height:7px; border-radius:50%; background:#6ee7b7; box-shadow:0 0 6px #6ee7b7; }

.case-outcomes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.8rem 1.6rem; }
.case-outcome{ border-top:2px solid var(--blush); padding-top:1rem; }
.case-outcome .v{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,2.7vw,2.1rem); color:var(--brand-on-bg); line-height:1.08; letter-spacing:-.02em; text-wrap:balance; }
.case-outcome .l{ color:var(--ink-3); margin-top:.5rem; font-size:.92rem; line-height:1.42; }
:root[data-theme="dark"] .case-outcome .v{ color:var(--blush); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .case-outcome .v{ color:var(--blush); }
}

.case-story{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-bottom:2.4rem; }
@media (max-width:760px){ .case-story{ grid-template-columns:1fr; gap:1.8rem; } }
.case-label{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--blush-ink); margin-bottom:.9rem; }
.case-label .material-symbols-outlined{ font-size:1rem; }
.case-block.accent .case-label{ color:var(--brand-on-bg); }
.case-label.dim{ color:var(--ink-4); }
.case-overview{ margin-top:.5rem; padding-top:2rem; border-top:1px solid var(--line); max-width:46rem; }
.case-chips-block{ margin-top:2.2rem; }
.case-diagram{ margin-top:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.case-diagram img{ width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
@media (max-width:760px){
  /* squeezing a 1400px architecture diagram into 280px makes the labels 2px — pan it instead */
  .case-diagram img{ width:auto; max-width:none; min-width:100%; height:auto; max-height:60vh; }
}

/* ============================================================
   ENGAGE PAGE — blueprint builder + form
   ============================================================ */
.engage-assure{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.8rem; }
.engage-assure div{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--ink-3); }
.engage-assure .material-symbols-outlined{ color:var(--brand-on-bg); }

.blueprint-builder{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-2xl); padding:1.8rem; box-shadow:var(--shadow-tactile); }
.blueprint-list{ display:flex; flex-direction:column; gap:.6rem; margin:1rem 0 1.4rem; }
.blueprint-row{ display:grid; grid-template-columns:1fr auto auto auto; gap:.6rem; align-items:center; padding:.7rem .85rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); }
.blueprint-row .name{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--ink); }
.blueprint-row .weeks{ font-family:var(--font-mono); font-size:11px; color:var(--ink-4); }
.blueprint-row .cost{ font-family:var(--font-display); font-weight:700; color:var(--blush-ink); }
.blueprint-row .remove{ background:transparent; border:0; color:var(--ink-4); cursor:pointer; padding:0; border-radius:4px; width:2.75rem; height:2.75rem; display:grid; place-items:center; margin-inline-end:-.35rem; }
.blueprint-row .remove:hover{ color:var(--blush-ink); }
.blueprint-total{ display:flex; justify-content:space-between; padding-top:1rem; border-top:1px solid var(--line); font-family:var(--font-display); font-weight:700; }
.blueprint-total .v{ font-size:1.3rem; color:var(--brand-on-bg); }

/* ============================================================
   CHANGELOG list rows
   ============================================================ */
.changelog-list{ display:flex; flex-direction:column; gap:1rem; }
.changelog-row{ border:1px solid var(--line); border-radius:var(--radius-2xl); padding:1.4rem 1.6rem; background:var(--surface); transition:border-color .2s, transform .2s; }
.changelog-row:hover{ border-color:var(--navy-tint); transform:translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--dark); color:#a4adcc; padding-block:clamp(3.5rem,7vw,6rem) 1.8rem; }
.footer-top{ display:grid; grid-template-columns:1.05fr 1.35fr; gap:clamp(2rem,5vw,4.5rem); padding-block-end:clamp(2rem,4vw,3rem); border-block-end:1px solid #1e2a55; }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr; } }
.footer-cta .micro{ color:var(--blush); }
.footer-cta h2{ color:#f1f5f9; font-size:clamp(1.7rem,3.4vw,2.6rem); max-width:15ch; margin:.9rem 0 1.6rem; }
.footer-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem 1.25rem; }
@media (max-width:520px){ .footer-nav{ grid-template-columns:repeat(2,1fr); } }
.footer-nav h3{ font-family:var(--font-display); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-ink-3); margin:0 0 1rem; font-weight:700; }
.footer .footer-cta p{ color:var(--dark-ink); }
.footer a.fl{ display:flex; align-items:center; color:#cbd5e1; font-size:.93rem; padding-block:.55rem; margin-block-end:0; min-height:2.75rem; transition:color .2s; min-width:0; overflow-wrap:anywhere; }
.footer a.fl:hover{ color:var(--blush); }
.footer .addr{ color:var(--dark-ink-3); font-size:.88rem; display:block; margin-block-start:.3rem; }
.socials{ display:flex; gap:.65rem; margin-block-start:1.2rem; }
.socials a{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:var(--radius); border:1px solid var(--line-2); color:var(--ink-3); transition:all .25s var(--ease); }
.footer .socials a{ border-color:var(--dark-line); color:var(--dark-ink-2); }
.socials a:hover{ color:#fff; background:var(--blush); border-color:var(--blush); transform:translateY(-2px); }
.footer-bottom{ margin-block-start:1.8rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom .brand img{ height:22px; filter:brightness(0) invert(1); opacity:.92; }
.footer-bottom .brand span{ color:#e6e9f2; }
.footer-bottom .legal{ font-family:var(--font-mono); font-size:11px; color:var(--dark-ink-3); display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; }
.footer-bottom .legal a{ color:var(--dark-ink-2); display:inline-block; padding:.6rem 0; } .footer-bottom .legal a:hover{ color:var(--blush); }

/* ============================================================
   ELENCHUS — the questioning method
   eh-LEN-kus · Data Druid's intake analyst, as a popup.

   Everything resolves from the v4 theme tokens, so every surface — launcher,
   scrim, dialog, each message, the waiting state, the note, the failure, the
   placeholder, the disabled input, the focus ring — follows light and dark
   without a second palette. The four tokens below are the only ones this
   component adds, and they are redefined in both dark blocks further down.
   ============================================================ */
:root{
  --elx-ink:var(--navy);            /* the mark and the name */
  --elx-core:var(--blush-2);        /* the coral centre the questions close on */
  --elx-user:var(--navy);           /* the visitor's own words */
  --elx-user-ink:#ffffff;
  --elx-user-line:transparent;
}

/* ---- the mark ------------------------------------------------------------
   Three arcs closing on a point: successive questions narrowing until what is
   really there is exposed. One glyph, drawn at 22px and at 34px. */
.elx-mark{ display:inline-grid; place-items:center; flex:0 0 auto; inline-size:1.4rem; block-size:1.4rem; color:var(--elx-ink); }
.elx-mark.is-lg{ inline-size:2.15rem; block-size:2.15rem; }
.elx-mark svg{ inline-size:100%; block-size:100%; display:block; }
.elx-mark .elx-a1{ opacity:.38; }
.elx-mark .elx-a2{ opacity:.66; }
.elx-mark .elx-a3{ opacity:1; }
.elx-mark .elx-core{ color:var(--elx-core); fill:var(--elx-core); }

/* Real motion, and only while the analyst is actually working: the arcs pulse
   inward, the way the questions do. */
@keyframes elx-close-in{
  0%,100%{ opacity:.22; }
  50%{ opacity:1; }
}
.elx.is-working .elx-head .elx-mark .elx-a1{ animation:elx-close-in 1.5s var(--ease) infinite; }
.elx.is-working .elx-head .elx-mark .elx-a2{ animation:elx-close-in 1.5s var(--ease) .18s infinite; }
.elx.is-working .elx-head .elx-mark .elx-a3{ animation:elx-close-in 1.5s var(--ease) .36s infinite; }

/* ---- the launcher --------------------------------------------------------
   It invites a question. It does not say "chat". */
.elx{ position:fixed; inset-inline-end:1.4rem; inset-block-end:1.4rem; z-index:70; }
.elx-launcher{
  display:flex; align-items:center; gap:.7rem; text-align:start;
  max-inline-size:min(20rem,calc(100vw - 2.8rem));
  min-block-size:2.75rem; padding:.7rem 1.05rem .7rem .85rem;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-md); cursor:pointer;
  font-family:var(--font-sans); text-decoration:none;
  transition:transform .3s var(--ease), border-color .2s, box-shadow .2s;
}
.elx-launcher[hidden]{ display:none; }
.elx-launcher:hover{ transform:translateY(-2px); border-color:var(--blush-line); color:var(--ink); }
.elx-launcher:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.elx-launcher-text{ display:flex; flex-direction:column; min-width:0; }
.elx-launcher .t{ font-family:var(--font-display); font-weight:700; font-size:.9rem; line-height:1.25; color:var(--ink); }
.elx-launcher .s{ font-size:.74rem; line-height:1.35; color:var(--ink-4); }
.elx.is-open .elx-launcher{ opacity:0; pointer-events:none; }

/* ---- the scrim ----------------------------------------------------------- */
.elx-scrim{
  position:fixed; inset:0; z-index:1;
  background:rgba(5,9,20,.42);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:elx-fade .2s var(--ease);
}
.elx-scrim[hidden]{ display:none; }
@keyframes elx-fade{ from{ opacity:0; } }

/* ---- the dialog ----------------------------------------------------------
   Desktop: an anchored panel above the launcher. Phone: a bottom sheet, because
   a 320px screen has no room for a floating box inside a floating box. */
.elx-dialog{
  position:absolute; z-index:2;
  inset-inline-end:0; inset-block-end:0;
  inline-size:min(24.5rem,calc(100vw - 2.8rem));
  max-block-size:min(38rem,calc(100dvh - 3.5rem));
  display:flex; flex-direction:column; min-width:0;
  background:var(--surface); color:var(--ink-3);
  border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-tactile), 0 30px 70px -20px rgba(5,9,20,.4);
  overflow:hidden;
  animation:elx-rise .3s var(--ease-spring);
}
.elx-dialog[hidden]{ display:none; }
.elx-dialog:focus{ outline:none; }
.elx-dialog:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
@keyframes elx-rise{ from{ opacity:0; transform:translateY(14px) scale(.985); } }

.elx-grip{ display:none; }

/* ---- the name lockup ----------------------------------------------------- */
.elx-head{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:1rem 1rem 1rem 1.1rem;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.elx-lockup{ flex:1 1 auto; min-width:0; display:grid; grid-template-columns:auto auto; column-gap:.5rem; align-items:baseline; }
.elx-name{
  font-family:var(--font-display); font-weight:700; font-size:1.12rem;
  letter-spacing:.01em; color:var(--ink); overflow-wrap:anywhere;
}
.elx-say{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-4); white-space:nowrap; }
.elx-descriptor{
  grid-column:1 / -1; font-family:var(--font-editorial); font-style:italic;
  font-size:.92rem; line-height:1.3; color:var(--brand-on-bg-soft);
}
.elx-close{
  flex:0 0 auto; inline-size:2.75rem; block-size:2.75rem; margin:-.55rem -.45rem -.55rem 0;
  display:grid; place-items:center; border:0; background:transparent; color:var(--ink-3);
  border-radius:var(--radius-sm); cursor:pointer; transition:background .2s, color .2s;
}
.elx-close:hover{ background:var(--surface-3); color:var(--ink); }
.elx-close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }

.elx-intro{
  margin:0; padding:.85rem 1.1rem 0; font-size:.86rem; line-height:1.5; color:var(--ink-3);
}

/* ---- progress -----------------------------------------------------------
   The counter carries the meaning; the ticks are decoration. Nothing here is
   signalled by colour alone. */
.elx-progress{ padding:.8rem 1.1rem .2rem; }
.elx-progress[hidden]{ display:none; }
.elx-stage{
  margin:0 0 .45rem; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4);
}
.elx-ticks{ list-style:none; margin:0; padding:0; display:flex; gap:.28rem; }
.elx-ticks li{
  flex:1 1 0; min-inline-size:0; block-size:3px; border-radius:999px;
  background:var(--surface-3); transition:background .35s var(--ease);
}
.elx-ticks li.is-done{ background:var(--brand-on-bg-soft); }
.elx-ticks li.is-now{ background:var(--ink-5); }

/* ---- the conversation ---------------------------------------------------- */
.elx-log{
  flex:1 1 auto; min-block-size:6rem; overflow-y:auto;
  padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.65rem;
}
.elx-log:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-3px; }
.elx-msg{
  font-size:.9rem; line-height:1.5; padding:.65rem .85rem;
  border-radius:var(--radius); max-inline-size:90%; overflow-wrap:anywhere;
}
.elx-msg.user{
  align-self:flex-end; background:var(--elx-user); color:var(--elx-user-ink);
  border:1px solid var(--elx-user-line); border-end-end-radius:var(--radius-sm);
}
.elx-msg.bot{
  align-self:flex-start; background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-2); border-end-start-radius:var(--radius-sm);
}
.elx-msg.bot strong{ color:var(--ink); }
.elx-msg.final{ border-color:var(--ok-line); background:var(--ok-soft); color:var(--ok-ink); }
.elx-msg.final strong{ color:var(--ok-ink); }

/* A note (the fixed intake is running) and a failure (nothing can continue)
   are both labelled in words before they are coloured. */
.elx-msg-badge{
  display:block; margin-block-end:.3rem;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-4);
}
.elx-msg.note{ max-inline-size:100%; background:var(--surface-3); border-style:dashed; }
.elx-msg.system{ max-inline-size:100%; background:var(--blush-soft); border:1px solid var(--blush-line); color:var(--blush-ink); }
.elx-msg.system .elx-msg-badge{ color:var(--blush-ink); }

/* the waiting state */
.elx-msg.is-thinking{ padding:.7rem .85rem; }
.elx-dots{ display:inline-flex; gap:.3rem; align-items:center; }
.elx-dots i{ inline-size:.4rem; block-size:.4rem; border-radius:50%; background:var(--ink-4); animation:elx-bob 1.1s var(--ease) infinite; }
.elx-dots i:nth-child(2){ animation-delay:.15s; }
.elx-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes elx-bob{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }

/* the deterministic acknowledgement: a word match, shown as a word match */
.elx-ack{ max-inline-size:100%; background:var(--surface-2); border:1px dashed var(--line-2); }
.elx-ack .lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }
.elx-ack ul{ margin:.45rem 0 0; padding-inline-start:1.1rem; }
.elx-ack li{ font-size:.85rem; color:var(--ink-3); line-height:1.5; }
.elx-ack li b{ color:var(--ink); font-weight:700; }

/* ---- finish early -------------------------------------------------------- */
.elx-actions{ padding:0 1.1rem; }
.elx-actions:has(.elx-finish[hidden]){ padding:0; }
.elx-finish{
  inline-size:100%; min-block-size:2.75rem; padding:.6rem .85rem; cursor:pointer;
  background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--radius);
  color:var(--ink-3); font-family:var(--font-sans); font-size:.82rem;
}
.elx-finish[hidden]{ display:none; }
.elx-finish:hover{ background:var(--surface-3); color:var(--ink); }
.elx-finish:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ---- the answer box ------------------------------------------------------ */
.elx-form{ display:flex; gap:.5rem; padding:.9rem 1.1rem; border-top:1px solid var(--line); }
.elx-form input{
  flex:1 1 auto; min-inline-size:0; min-block-size:2.75rem;
  background:var(--surface); border:1px solid var(--line-input); color:var(--ink);
  padding:.6rem .85rem; border-radius:var(--radius);
  font-family:var(--font-sans);
  font-size:16px;   /* under 16px iOS Safari zooms the viewport on focus and never zooms back */
  transition:border-color .2s, box-shadow .2s;
}
.elx-form input::placeholder{ color:var(--ink-4); opacity:1; }
.elx-form input:focus{ border-color:var(--brand-on-bg); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.elx-form input:focus-visible{ outline:none; }
.elx-form input:disabled{ background:var(--surface-3); color:var(--ink-4); border-color:var(--line); cursor:not-allowed; }
.elx-send{
  flex:0 0 auto; inline-size:2.75rem; min-block-size:2.75rem;
  background:var(--navy); border:1px solid var(--navy); color:#fff;
  border-radius:var(--radius); cursor:pointer; display:grid; place-items:center;
  transition:background .2s, opacity .2s;
}
.elx-send:hover{ background:var(--navy-2); }
.elx-send:disabled{ opacity:.5; cursor:not-allowed; }
.elx-send:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ---- the way out to a person -------------------------------------------- */
.elx-foot{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  padding:.65rem 1.1rem .9rem; border-top:1px solid var(--line); background:var(--surface-2);
}
.elx-foot-note{ font-size:.74rem; color:var(--ink-4); min-width:0; }
.elx-foot-link{ font-size:.78rem; font-weight:700; color:var(--brand-on-bg); padding:.35rem 0; }
.elx-foot-link:hover{ color:var(--blush-ink); }
.elx-foot-link:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

.elx-handover{ display:none; }

/* ---- phone: a sheet, not a tiny floating box ---------------------------- */
@media (max-width:640px){
  .elx{ inset-inline:0; inset-block-end:0; inset-inline-end:0; }
  .elx-launcher{
    position:fixed; inset-inline-end:1rem; inset-block-end:1rem;
    max-inline-size:calc(100vw - 5.6rem);   /* clears the WhatsApp button */
  }
  .elx-dialog{
    position:fixed; inset:auto 0 0 0;
    inline-size:100%; max-inline-size:100%;
    max-block-size:min(92dvh,44rem);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    border-inline:0; border-block-end:0;
    animation:elx-sheet .3s var(--ease-spring);
  }
  @keyframes elx-sheet{ from{ transform:translateY(100%); } }
  .elx-grip{
    display:block; inline-size:2.5rem; block-size:4px; border-radius:999px;
    background:var(--line-2); margin:.55rem auto .1rem;
  }
  .elx-head{ padding-block:.8rem; }
  .elx-intro{ padding-inline:1rem; }
  .elx-progress,.elx-log,.elx-actions,.elx-form,.elx-foot{ padding-inline:1rem; }
  /* Only the sheet locks the page — on desktop the visitor keeps their scroll. */
  body.elx-open{ overflow:hidden; }
}
@media (max-width:360px){
  .elx-launcher .s{ display:none; }
  .elx-msg{ max-inline-size:96%; }
}

/* ---- dark ----------------------------------------------------------------
   Only the four component tokens move. Every other surface above already
   resolves from theme tokens that both dark blocks redefine. */
:root[data-theme="dark"]{
  --elx-ink:#e2e8f0;
  --elx-core:#FB7185;
  --elx-user:#1D2B53;
  --elx-user-ink:#f1f5f9;
  --elx-user-line:#3d5090;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --elx-ink:#e2e8f0;
    --elx-core:#FB7185;
    --elx-user:#1D2B53;
    --elx-user-ink:#f1f5f9;
    --elx-user-line:#3d5090;
  }
}
:root[data-theme="dark"] .elx-scrim{ background:rgba(2,4,10,.66); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .elx-scrim{ background:rgba(2,4,10,.66); }
}

/* ---- reduced motion ------------------------------------------------------
   A vestibular-sensitive visitor gets a still popup. Nothing is lost: the
   waiting state keeps its "Elenchus is reading your answer" label, and the
   progress ticks still fill. */
@media (prefers-reduced-motion:reduce){
  .elx-scrim,.elx-dialog{ animation:none; }
  .elx-launcher:hover{ transform:none; }
  .elx-dots i,
  .elx.is-working .elx-head .elx-mark .elx-a1,
  .elx.is-working .elx-head .elx-mark .elx-a2,
  .elx.is-working .elx-head .elx-mark .elx-a3{ animation:none; }
  .elx-dots i{ opacity:.75; }
  .elx-ticks li{ transition:none; }
}

/* ============================================================
   ARTICLE (insight + legal bodies)
   ============================================================ */
.article{ font-size:1.08rem; line-height:1.8; color:var(--ink-3); max-width:46rem; }
.article p{ margin-bottom:1.3rem; }
.article h2,.article h3{ margin:2rem 0 .8rem; }

/* ============================================================
   WhatsApp FAB (bottom-left, clear of the Elenchus launcher)
   ============================================================ */
.wa-fab{ position:fixed; inset-inline-start:1.4rem; inset-block-end:1.4rem; z-index:60; width:3.4rem; height:3.4rem; border-radius:var(--radius); background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 26px rgba(37,211,102,.34); transition:transform .3s var(--ease); }
.wa-fab:hover{ transform:translateY(-2px) scale(1.04); color:#fff; }
@media (max-width:760px){
  .wa-fab{ width:3rem; height:3rem; }
  /* reserve room under the last footer row so neither FAB covers the legal links */
  .footer{ padding-block-end:5.5rem; }
}

/* ============================================================
   trusted-by proof strip
   ============================================================ */
.trusted{ border-bottom:1px solid var(--line); background:var(--surface); }
.trusted-row{ display:flex; align-items:center; gap:clamp(1.2rem,4vw,3rem); flex-wrap:wrap; }
.trusted-label{
  margin:0; white-space:nowrap;
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4);
}
.trusted-logos{
  list-style:none; margin:0; padding:0; flex:1 1 22rem; min-width:0;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:1.1rem clamp(1.6rem,4vw,3.2rem);
}
.trusted-logos > li{ display:flex; align-items:center; min-width:0; }
.tlogo{ display:inline-flex; align-items:center; justify-content:center; height:54px; min-width:0; }
.tlogo img{ height:54px; width:auto; max-width:min(180px,100%); object-fit:contain; opacity:.95; transition:opacity .2s, transform .2s; }
.tlogo:hover img{ opacity:1; transform:translateY(-1px); }
/* A client whose mark has not been uploaded yet. Bare text beside three real
   logos reads as a broken cell, so the fallback is a deliberate wordmark chip on
   the same 54px rail — the row looks designed either way, and swapping a real
   file in later just drops this class. */
.tlogo-word{
  padding-inline:clamp(.7rem,2vw,1.05rem);
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--surface-2);
  transition:border-color .2s, background .2s;
}
a.tlogo-word:hover{ border-color:var(--brand-on-bg); background:var(--surface); }
/* client marks are dark-ink-on-transparent — invert them so they survive the dark surface */
:root[data-theme="dark"] .tlogo img{ filter:brightness(0) invert(1); opacity:.85; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tlogo img{ filter:brightness(0) invert(1); opacity:.85; }
}
.tword{
  font-family:var(--font-display); font-weight:700; font-size:clamp(.85rem,2.6vw,1.02rem);
  color:var(--ink-2); letter-spacing:.02em; text-align:center;
  overflow-wrap:anywhere; transition:color .2s;
}
a.tlogo:hover .tword{ color:var(--brand-on-bg); }
@media (max-width:640px){
  /* Two tidy columns beats four half-widths chasing each other down the page.
     Measured at 320px: each cell is 132px, which every mark and every wordmark
     fits inside without the row wrapping into a mess. */
  .trusted-row{ display:block; }
  .trusted-label{ white-space:normal; margin-bottom:1rem; }
  .trusted-logos{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .trusted-logos > li{ justify-content:center; }
  .tlogo,.tlogo img{ height:44px; }
  .tlogo{ width:100%; }
}

.pcard .pclient{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.4rem; font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--brand-on-bg); }
.pcard .pclient .material-symbols-outlined{ font-size:1rem; color:var(--blush-ink); }

/* ============================================================
   ACCESSIBILITY: reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-node,.js .reveal,.js .reveal-node{ opacity:1; transform:none; transition:none; }
  .telemetry-ribbon .live .ping,
  .hero-eyebrow .dot,
  .reactor-head .lhs .pulse,
  .phero .pulse,
  .bento-card .wave span,
  .elx-dialog{ animation:none; }
  html{ scroll-behavior:auto; }
  .btn:hover,.pcard:hover,.sector:hover,.case-card:hover,.post-card:hover,.post-feature:hover{ transform:none; }
  .tilt-card{ transform:none !important; }
  .policy-step::before{ transition:none; }
  .gate-progress .fill{ transition:none; will-change:auto; }
}

/* ============================================================
   RESPONSIVE SAFETY
   ============================================================ */
.bento,.case-card,.dgrid,.cards,.sectors,.rows,.post-grid,.blueprint-builder{ min-width:0; }
.bento-card,.case-card>div,.pcard,.sector,.case-telemetry,.blueprint-row{ min-width:0; }
.bento-card h3,.case-card h2,.pcard h3,.row-item h3,.value-card h3{ overflow-wrap:anywhere; }
.code-terminal pre,.blueprint-list{ overflow-x:auto; max-width:100%; }
/* admin-authored article bodies can contain arbitrary HTML — keep wide content in its own scroller */
.article a{ overflow-wrap:anywhere; }
.article table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse; }
/* Cells wrap wherever there is room; only narrow viewports force the horizontal
   scroller, where a wrapped table would otherwise collapse into unreadable columns. */
.article table th,.article table td{ white-space:normal; }
@media (max-width:760px){ .article table th,.article table td{ white-space:nowrap; } }
.article pre{ overflow-x:auto; max-width:100%; }
.article img,.article iframe{ max-width:100%; height:auto; }
@media (max-width:560px){ .code-terminal pre{ font-size:10.5px; padding:.9rem 1rem; } .dgrid{ gap:1.5rem; } .reactor-tiles{ grid-template-columns:1fr; } }

/* ============================================================
   DARK-MODE polish for surfaces that were light-only
   ============================================================ */
:root[data-theme="dark"] .bento-card,
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .post-feature,
:root[data-theme="dark"] .pcard,
:root[data-theme="dark"] .sector,
:root[data-theme="dark"] .case-card,
:root[data-theme="dark"] .value-card,
:root[data-theme="dark"] .mv-card,
:root[data-theme="dark"] .changelog-row,
:root[data-theme="dark"] .policy-gate,
:root[data-theme="dark"] .blueprint-builder,
:root[data-theme="dark"] .reactor-card,
:root[data-theme="dark"] .cta{ background:var(--surface); }
:root[data-theme="dark"] .reactor-body{ background:rgba(12,20,39,.97); }
:root[data-theme="dark"] .bento-card .foot{ color:var(--ink-4); }
:root[data-theme="dark"] .bento-card .ico.soft{ background:var(--surface-3); color:var(--ink-2); }
:root[data-theme="dark"] .bento-card .ico.soft .material-symbols-outlined{ color:var(--ink-2); }
:root[data-theme="dark"] .code-terminal{ border-color:#0a1429; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bento-card,
  :root:not([data-theme="light"]) .post-card,
  :root:not([data-theme="light"]) .post-feature,
  :root:not([data-theme="light"]) .pcard,
  :root:not([data-theme="light"]) .sector,
  :root:not([data-theme="light"]) .case-card,
  :root:not([data-theme="light"]) .value-card,
  :root:not([data-theme="light"]) .mv-card,
  :root:not([data-theme="light"]) .changelog-row,
  :root:not([data-theme="light"]) .policy-gate,
  :root:not([data-theme="light"]) .blueprint-builder,
  :root:not([data-theme="light"]) .reactor-card,
  :root:not([data-theme="light"]) .cta{ background:var(--surface); }
  :root:not([data-theme="light"]) .reactor-body{ background:rgba(12,20,39,.97); }
  :root:not([data-theme="light"]) .bento-card .foot{ color:var(--ink-4); }
  :root:not([data-theme="light"]) .bento-card .ico.soft{ background:var(--surface-3); color:var(--ink-2); }
  :root:not([data-theme="light"]) .bento-card .ico.soft .material-symbols-outlined{ color:var(--ink-2); }
  :root:not([data-theme="light"]) .code-terminal{ border-color:#0a1429; }
  :root:not([data-theme="light"]) .nav-brand .mark{ background:var(--surface-2); }
}

/* particles-on-paper: a barely-there dot field under everything in light mode */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.4; background-image:radial-gradient(rgba(29,43,83,.05) 1px, transparent 1px); background-size:24px 24px; }
:root[data-theme="dark"] body::before{ opacity:.15; background-image:radial-gradient(rgba(251,113,133,.08) 1px, transparent 1px); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body::before{ opacity:.15; background-image:radial-gradient(rgba(251,113,133,.08) 1px, transparent 1px); }
}

/* ============================================================
   SEVENTH-DISCIPLINE row (full-width highlight under the bento)
   ============================================================ */
.seventh-row{ margin-top:1.1rem; display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center; }
.seventh-ico{ width:4rem; height:4rem; }
.seventh-body .seventh-h{ margin-top:.5rem; }
.seventh-body .seventh-p{ margin-top:.5rem; color:var(--ink-3); }

/* ============================================================
   NAV CTA: collapse the "Book a consultation" label on phone
   ============================================================ */
.nav-cta-btn .cta-short{ display:none; }
@media (max-width:560px){
  .nav-cta-btn{ padding:.6rem .8rem; }
  .nav-cta-btn .cta-full{ display:none; }
  .nav-cta-btn .cta-short{ display:inline; }
  .nav-brand .text small{ display:none; } /* brand sub-line takes too much room on phones */
}
@media (max-width:400px){
  /* five non-wrapping controls do not fit a 280px island — the anchor keeps its aria-label */
  .nav-brand .text{ display:none; }
}

/* ============================================================
   RESPONSIVE — mobile sweep (≤480px)
   ============================================================ */
@media (max-width:480px){
  /* nav island — tighten padding so the hamburger fits */
  .floating-nav{ padding:.75rem var(--gutter) 0; }
  .nav-island{ padding:.5rem .55rem; gap:.5rem; }
  .nav-brand .text strong{ font-size:.98rem; }
  .nav-mobile{ inset-inline:.5rem; }

  /* sections — tight padding on phone */
  section{ padding-block:clamp(2.5rem,7vw,4rem); }

  /* hero — keep the copy compact on phone */
  .hero{ padding-block:clamp(2.5rem,7vw,3.5rem); }
  .hero-grid{ gap:1.5rem; }

  /* reactor (Druid Decision Runtime) — squeeze padding */
  .reactor-body{ padding:1rem; }
  .reactor-tile .label{ font-size:10px; }

  /* seventh-discipline row stacks on phone */
  .seventh-row{ grid-template-columns:1fr; gap:.9rem; text-align:left; padding:1.2rem; }
  .seventh-ico{ width:2.6rem; height:2.6rem; }
  .seventh-cta{ justify-self:start; }

  /* policy-gate — single column on phone (was 2x2 at 760) */
  .policy-gate .steps{ grid-template-columns:1fr; }
  .policy-gate{ padding:1.2rem; }

  /* blueprint builder rows collapse to stack */
  .blueprint-row{ grid-template-columns:1fr auto; gap:.35rem .8rem; padding:.85rem .9rem; }
  .blueprint-row .remove{ grid-column:2; grid-row:1; justify-self:end; }
  .blueprint-row .name{ grid-column:1; grid-row:1; }
  .blueprint-row .weeks{ grid-column:1; grid-row:2; }
  .blueprint-row .cost{ grid-column:2; grid-row:2; justify-self:end; }
  .blueprint-builder{ padding:1.2rem; }

  /* post-grid — single column on phone */
  .post-grid{ grid-template-columns:1fr; gap:1.1rem; }

  /* trusted logos — 2 columns on phone */
  .trusted-logos{ gap:1.4rem 2rem; }
  .tlogo,.tlogo img{ height:36px; }

  /* code-terminal font slightly tighter */
  .code-terminal pre{ font-size:10.5px; padding:.9rem 1rem; }

  /* bento cards — tighter padding */
  .bento-card{ padding:1.2rem; }
  .bento-card h3{ font-size:1.15rem; }

  /* case-card tighter */
  .case-card{ padding:1.2rem; }

  /* footer — brand+legal stacks */
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .footer-bottom .legal{ font-size:10.5px; gap:1rem; }
  .footer-cta{ padding-block-end:1rem; }
}

/* mid-phone (≤560px): keep CTAs one line, brand text shorter */
@media (max-width:560px){
  .nav-brand .text strong{ font-size:1rem; }
}

/* ============================================================
   RESPONSIVE — tablet (≤760px)
   ============================================================ */
@media (max-width:760px){
  /* policy-gate already collapses here to 2x2 — keep */
  .policy-step{ padding:.85rem .85rem .85rem 2.2rem; }
}

/* ============================================================
   TOUCH / HOVER-NONE — disable 3D tilt + reveal motion
   ============================================================ */
@media (hover:none){
  .tilt-card{ transform:none !important; }
  .bento-card:hover,.pcard:hover,.sector:hover,.case-card:hover,.post-card:hover,.post-feature:hover,.row-item:hover,.changelog-row:hover{ transform:none; }
}


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

/* ============================================================
   THE ASK — the home-page hero.

   The visitor types the decision they are stuck on into a real form, and
   Elenchus opens on it. Everything here resolves from the theme tokens, so the
   whole surface follows light and dark without a second palette.
   ============================================================ */
.hero-ask{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.ask-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:start; }
.ask-grid > *{ min-width:0; }
@media (max-width:980px){ .ask-grid{ grid-template-columns:1fr; } }

.ask-copy h1{ margin-block-start:1.3rem; max-width:19ch; font-size:clamp(2rem,4vw,3.15rem); }
.ask-copy h1 em{ display:block; font-family:var(--font-editorial); font-style:italic; font-weight:400; color:var(--ink-3); }
.ask-copy .lead{ margin-block-start:1.2rem; max-width:46ch; }

.ask-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-2xl);
  padding:clamp(1.1rem,3vw,1.7rem);
  box-shadow:var(--shadow-tactile);
  display:flex; flex-direction:column; gap:.9rem;
  min-width:0;
}
.ask-head .ask-tag{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); }
.ask-head .ask-intro{ margin:.4rem 0 0; font-size:.95rem; color:var(--ink-3); line-height:1.5; }

.ask-form{ margin:0; }
.ask-form .field{ margin-block-end:.7rem; }
.ask-form label{ font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--ink); }
.ask-form textarea{
  width:100%; max-width:100%; box-sizing:border-box; resize:vertical; min-height:5.5rem;
  background:var(--surface); border:1px solid var(--line-input); color:var(--ink);
  padding:.8rem .95rem; border-radius:var(--radius); font-family:var(--font-sans);
  font-size:16px;   /* under 16px iOS Safari zooms the viewport on focus and never zooms back */
  line-height:1.5; transition:border-color .2s, box-shadow .2s;
}
.ask-form textarea::placeholder{ color:var(--ink-4); opacity:1; }
.ask-form textarea:focus{ border-color:var(--brand-on-bg); box-shadow:0 0 0 3px var(--focus-ring); outline:none; }
.ask-form textarea:focus-visible{ outline:none; }
.ask-note{ font-size:.85rem; color:var(--ink-4); margin:0 0 .9rem; line-height:1.5; }
.ask-send{ width:100%; white-space:normal; }
.ask-offline{ font-size:.85rem; color:var(--blush-ink); margin:.9rem 0 0; line-height:1.5; }

/* The hero holds no conversation of its own any more — it seeds the Elenchus
   popup (see .elx above and partials/hero_ask.html). The v3 inline-thread rules
   are archived at archive/v3-sage/theme.css.sage-block.v3.css. */

/* ============================================================
   METHOD RAIL — how the work runs (from the Capability rows)
   ============================================================ */
.method-rail{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.method-step{
  position:relative; min-width:0;
  border:1px solid var(--line); border-top:3px solid var(--navy);
  border-radius:var(--radius); background:var(--surface); padding:1.4rem 1.3rem;
}
.method-step .mstep-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--blush-ink); }
.method-step h3{ margin:.5rem 0 .45rem; font-size:1.08rem; overflow-wrap:anywhere; }
.method-step p{ margin:0; color:var(--ink-3); font-size:.93rem; line-height:1.55; }
:root[data-theme="dark"] .method-step{ background:var(--surface); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .method-step{ background:var(--surface); }
}

/* ============================================================
   HOME — small layout pieces lifted out of inline styles
   ============================================================ */
.gate-foot{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-top:1rem; font-family:var(--font-mono); font-size:11px; color:var(--ink-4);
}
.gate-foot > span{ min-width:0; overflow-wrap:anywhere; }
.case-go{ margin-top:1.2rem; font-family:var(--font-display); font-size:.85rem; font-weight:700; color:var(--brand-on-bg); }
.case-go .material-symbols-outlined{ vertical-align:middle; }
.cta-copy{ margin:1rem auto 0; text-align:center; }
.cta-row{ display:flex; gap:.8rem; justify-content:center; margin-top:1.8rem; flex-wrap:wrap; }

/* one card, no tiles behind it — the banner stands alone rather than framing nothing */
.bento.is-solo{ grid-template-columns:1fr; }
.dgrid.is-solo{ grid-template-columns:1fr; }

/* ============================================================
   MOBILE OVERFLOW GUARDS

   Measured at a 320px viewport, where the page used to scroll 120px sideways.
   Two causes, both "a grid track sized to a child's min-content":
   the handover CTA is a .btn, and .btn is white-space:nowrap, so its whole
   label became the minimum width of the column it sat in; and the principles
   rail put its text block in an `auto` track that never had to shrink.
   ============================================================ */
.dgrid > *,
.seventh-row > *,
.policy-gate > *,
.metrics > *,
.method-rail > *{ min-width:0; }
.principles{ min-width:0; }
.principles > div{ grid-template-columns:auto auto minmax(0,1fr); align-items:start; }
.principles > div > div{ min-width:0; }
.principles b,.principles span.t{ overflow-wrap:anywhere; }
.seventh-body{ min-width:0; }
.seventh-h,.seventh-p{ overflow-wrap:anywhere; }
.metric,.mval,.mlabel,.mnote{ overflow-wrap:anywhere; }
@media (max-width:560px){
  /* A nowrap button cannot fit a 280px column, and several of these labels are
     now owner-editable (cta_button_label, hero_ask_button, the two hero CTAs).
     The console caps them at 34 characters; this is the second line of defence,
     so a long label wraps to two lines instead of pushing the page sideways.
     Above 560px the labels stay on one line, which is how the design reads. */
  .btn{ white-space:normal; text-align:center; }
  .seventh-cta{ white-space:normal; text-align:center; }
}

/* ============================================================
   REDUCED MOTION — the new surfaces
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ask-send:hover{ transform:none; }
}

/* ============================================================
   Brand mark — theme-aware.
   The logo SVG paints with fill:currentColor, but it is loaded through an
   <img>, and an <img> is a separate document: currentColor resolves against
   the SVG's own root and falls back to BLACK, which disappears on the dark
   nav island. Masking the shape and painting it with the page's own colour
   makes one file work in both themes with no second asset to keep in sync.
   Print/letterhead marks are deliberately NOT routed through this.
   ============================================================ */
.brand-mark{
  display:inline-block;
  inline-size:var(--mark-size,38px);
  block-size:var(--mark-size,38px);
  flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:url("../img/logo-current.2c9fb9a2d420.svg") center/contain no-repeat;
          mask:url("../img/logo-current.2c9fb9a2d420.svg") center/contain no-repeat;
}
/* The nav and footer marks carry the brand colour rather than body ink. */
.nav-brand .brand-mark{ color:var(--brand-on-bg); }
.footer .brand .brand-mark{ color:var(--brand-on-bg-soft); }

@supports not (mask: url("#x")){
  /* No mask support: fall back to the file itself, inverted in dark so the
     black artwork stays visible rather than vanishing. */
  .brand-mark{
    background-color:transparent;
    background:url("../img/logo-current.2c9fb9a2d420.svg") center/contain no-repeat;
  }
  :root[data-theme="dark"] .brand-mark{ filter:invert(1) brightness(1.6); }
}

/* ============================================================
   GENERATED BACKDROP PLATES — theme-swapped, one fetch each.

   The plates live in custom properties rather than in a <picture>, for one
   reason: <picture media="(prefers-color-scheme:dark)"> answers the OS, and this
   site has an explicit toggle that must beat the OS. A custom property is
   resolved at computed-value time, so the browser fetches only the plate the
   current theme actually resolves to — flip the toggle and it fetches the other
   one then, never both. A narrower encode is swapped in under 720px so a phone
   pays 20-26 KB instead of 54-75 KB.

   Every plate sits under a scrim in its own theme. These are BACKDROPS: the
   copy has to win, and it does, in both.
   ============================================================ */
:root{
  --plate-hero:url("../img/gen/hero-mesh-light.d58cf4f3b8f5.jpg");
  --plate-hero-sm:url("../img/gen/hero-mesh-light-sm.f7c0b2ab7bdd.jpg");
  --plate-band:url("../img/gen/band-governed-light.7c74431fe494.jpg");
  --plate-band-sm:url("../img/gen/band-governed-light-sm.b18b31bb807e.jpg");
  --plate-opacity:.55;
  --scrim-hero:linear-gradient(96deg, rgba(252,252,255,.97) 0%, rgba(252,252,255,.90) 38%, rgba(252,252,255,.66) 100%);
  --scrim-band:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.94) 100%);
  --weave-line:rgba(29,43,83,.22);
  --weave-node:rgba(225,29,72,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --plate-hero:url("../img/gen/hero-mesh-dark.bec0dfd2cef9.jpg");
    --plate-hero-sm:url("../img/gen/hero-mesh-dark-sm.0fb29122646b.jpg");
    --plate-band:url("../img/gen/band-governed-dark.c18b0b20bdf6.jpg");
    --plate-band-sm:url("../img/gen/band-governed-dark-sm.dd0f0340fdf8.jpg");
    --plate-opacity:.62;
    --scrim-hero:linear-gradient(96deg, rgba(5,9,20,.96) 0%, rgba(5,9,20,.88) 38%, rgba(5,9,20,.62) 100%);
    --scrim-band:linear-gradient(180deg, rgba(12,20,39,.93) 0%, rgba(12,20,39,.86) 55%, rgba(12,20,39,.93) 100%);
    --weave-line:rgba(251,113,133,.24);
    --weave-node:rgba(251,113,133,.78);
  }
}
:root[data-theme="dark"]{
  --plate-hero:url("../img/gen/hero-mesh-dark.bec0dfd2cef9.jpg");
  --plate-hero-sm:url("../img/gen/hero-mesh-dark-sm.0fb29122646b.jpg");
  --plate-band:url("../img/gen/band-governed-dark.c18b0b20bdf6.jpg");
  --plate-band-sm:url("../img/gen/band-governed-dark-sm.dd0f0340fdf8.jpg");
  --plate-opacity:.62;
  --scrim-hero:linear-gradient(96deg, rgba(5,9,20,.96) 0%, rgba(5,9,20,.88) 38%, rgba(5,9,20,.62) 100%);
  --scrim-band:linear-gradient(180deg, rgba(12,20,39,.93) 0%, rgba(12,20,39,.86) 55%, rgba(12,20,39,.93) 100%);
  --weave-line:rgba(251,113,133,.24);
  --weave-node:rgba(251,113,133,.78);
}

/* ============================================================
   THE HERO — plate, weave, content.

   ALIVE, honestly. Three things move and none of them reports anything:
   the plate settles out of a slight over-scale, 46 links draw themselves
   between 24 nodes that arrive from scatter, and the assembled lattice
   answers the pointer with a few pixels of parallax. No feed, no telemetry,
   no counter pretending to watch traffic. Under prefers-reduced-motion the
   whole hero renders in its finished state and holds still.
   ============================================================ */
.hero-ask{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(3rem,7vw,6rem) clamp(2.75rem,5vw,4.75rem);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.hero-ask-inner{ position:relative; z-index:2; }

.hero-plate{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--plate-hero);
  background-size:cover; background-position:center right; background-repeat:no-repeat;
  opacity:var(--plate-opacity);
  transform-origin:70% 40%;
  animation:plateSettle 1.9s var(--ease-spring) both;
}
@media (max-width:720px){ .hero-plate{ background-image:var(--plate-hero-sm); background-position:center; } }
.hero-plate::after{ content:""; position:absolute; inset:0; background:var(--scrim-hero); }
@keyframes plateSettle{ from{ opacity:0; transform:scale(1.07); } to{ opacity:var(--plate-opacity); transform:scale(1); } }

/* The weave is masked away from the headline column and strongest out to the
   right, so it reads as a structure the copy sits in front of rather than a
   texture printed over the words. */
.hero-weave{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, rgba(0,0,0,.3) 30%, #000 62%);
          mask-image:linear-gradient(100deg, transparent 0%, rgba(0,0,0,.3) 30%, #000 62%);
}
.hero-weave svg{ display:block; inline-size:100%; block-size:100%; }
/* JS writes --hw-px / --hw-py from the pointer; with no JS they stay 0. */
.hw-drift{ transform:translate(var(--hw-px,0px), var(--hw-py,0px)); transition:transform .55s var(--ease); }

.hw-l{
  fill:none; stroke:var(--weave-line); stroke-width:1.2; stroke-linecap:round;
  /* One dash longer than the longest link, so every line draws itself fully. */
  stroke-dasharray:280; stroke-dashoffset:280;
  animation:hwDraw 1.5s var(--ease) both;
}
.hw-l.d0{ animation-delay:.55s; } .hw-l.d1{ animation-delay:.70s; } .hw-l.d2{ animation-delay:.85s; }
.hw-l.d3{ animation-delay:1.00s; } .hw-l.d4{ animation-delay:1.15s; } .hw-l.d5{ animation-delay:1.30s; }
@keyframes hwDraw{ from{ stroke-dashoffset:280; } to{ stroke-dashoffset:0; } }

.hw-n{
  fill:var(--weave-node);
  transform-box:fill-box; transform-origin:center;
  animation:hwSettle 1.4s var(--ease-spring) both;
}
/* Eight scatter vectors, reused around the lattice: every node starts somewhere
   it does not belong and ends where it does. */
.hw-n.s0{ --sx:-140px; --sy:70px;  animation-delay:.05s; }
.hw-n.s1{ --sx:90px;   --sy:-110px; animation-delay:.14s; }
.hw-n.s2{ --sx:-70px;  --sy:-90px;  animation-delay:.23s; }
.hw-n.s3{ --sx:130px;  --sy:60px;   animation-delay:.32s; }
.hw-n.s4{ --sx:-110px; --sy:-40px;  animation-delay:.41s; }
.hw-n.s5{ --sx:60px;   --sy:120px;  animation-delay:.50s; }
.hw-n.s6{ --sx:-40px;  --sy:130px;  animation-delay:.59s; }
.hw-n.s7{ --sx:150px;  --sy:-60px;  animation-delay:.68s; }
@keyframes hwSettle{
  from{ opacity:0; transform:translate(var(--sx,0px), var(--sy,0px)) scale(.35); }
  to{ opacity:1; transform:translate(0,0) scale(1); }
}
/* Once assembled the lattice breathes as one, rather than 24 things blinking. */
.hw-nodes{ animation:hwBreathe 9s ease-in-out 2.4s infinite; }
@keyframes hwBreathe{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }

@media (max-width:900px){
  /* One column: the copy is above the panel, not beside it, so the mask fades
     downwards instead of sideways. */
  .hero-weave{
    opacity:.6;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.25) 0%, #000 55%);
            mask-image:linear-gradient(180deg, rgba(0,0,0,.25) 0%, #000 55%);
  }
}

/* The copy column outranks the plate: it gets its own quiet ground on small
   screens, where the plate's busiest region sits directly under the text. */
.hero-ask .ask-copy h1{ text-wrap:balance; }
.hero-ask .ask-copy .lead{ color:var(--ink-2); }

@media (prefers-reduced-motion:reduce){
  .hero-plate{ animation:none; opacity:var(--plate-opacity); transform:none; }
  .hw-l{ stroke-dashoffset:0; animation:none; }
  .hw-n{ opacity:1; transform:none; animation:none; }
  .hw-nodes{ animation:none; opacity:1; }
  .hw-drift{ transition:none; transform:none; }
}

/* ============================================================
   GOVERNED BAND — the policy-gate stepper over its own plate
   (four nested gateway arches, a thread passing through them).
   ============================================================ */
.band-governed{ position:relative; isolation:isolate; overflow:hidden; }
.band-governed::before,
.band-governed::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.band-governed::before{
  background-image:var(--plate-band);
  background-size:cover; background-position:center;
  opacity:var(--plate-opacity);
}
.band-governed::after{ background:var(--scrim-band); }
@media (max-width:720px){ .band-governed::before{ background-image:var(--plate-band-sm); } }
.band-governed > .wrap{ position:relative; z-index:1; }