/* ============================================================
   ORCA HQ — consultancy core design system
   Evolved from Direction B (Living Mind) for the consultancy
   repositioning. Tokens are law; never hardcode a value.

   Deliberate departures from the previous dark system, each
   traceable to the 2026 market review:
   - Geist Mono removed. It is Vercel's proprietary face and the
     most developer-tool-coded mono in use. Replaced with Azeret
     Mono, which belongs to no platform.
   - Hanken Grotesk removed. Two Google grotesks read as
     indecision and reproduce the template signature. Archivo now
     carries display AND body on weight contrast alone.
   - Ground warm-shifted off the blue-leaning #08090a cluster that
     every dev-tool site occupies. Neutrals are tinted toward the
     brand's own hue (acid, ~110) rather than toward blue.
   - Pricing-tier components deleted. There is no pricing.
   - Mono is SEMANTIC only: states, IDs, versions, timestamps.
     Mono as decorative texture is the dev-tool tell.
   ============================================================ */

:root{
  /* surfaces — warm-shifted near-blacks, tinted toward acid's hue */
  --void:#0a0b08;--abyss:#0f110c;--slate-1:#161811;--slate-2:#1d2016;
  --line:#242719;--line-2:#343829;

  /* text — verified contrast on --void:
     ink 18.3:1 · ink-2 10.2:1 · ink-3 5.5:1 (all pass AA body)
     ink-4 3.8:1 — NEVER body text. Borders, rules, decorative only. */
  --ink:#f2f4ea;--ink-2:#b9bdac;--ink-3:#848977;--ink-4:#6b7060;

  /* accent — rationed hard. Acid marks genuine signal, never decoration. */
  --acid:#e8ff00;--acid-dim:#c3d400;
  --acid-glow:color-mix(in oklch,var(--acid) 18%,transparent);
  --deep:#4de2c8;

  /* brand marks — fixed by brand guidelines v1.3 §2. Never recolour. */
  --sonar-dot:#00c896;--sonar-arc:#0066ff;--paper:#f4f1eb;
  /* wordmark signature (brand guidelines v1.5, 2026-07-26): ORCA in acid pink,
     HQ in paper. Acid yellow is now the site's action colour only, never the
     logo. Pink on --void is 5.2:1 (fine for the bold wordmark); the mark only
     ever sits on dark (nav + footer), so no light variant is needed.
     --brand-pink-dark is the light-surface fallback if that ever changes. */
  --brand-pink:#f72585;--brand-pink-dark:#d1156a;

  /* LIGHT SURFACE — brand guidelines v1.3 §1 "Light/Dark Hybrid".
     The website mode is ALTERNATING light and dark, not all-dark (that is the
     deck/PDF mode). Hero, nav, footer and at least one mid-page accent section
     stay dark; no page is ever fully light.
     Verified contrast on --l-bg: l-ink 17.9:1 · l-ink-2 9.0:1 · l-ink-3 5.5:1.
     CRITICAL: --acid on light is 1.06:1 and is NEVER text on a light surface.
     On light, the accent is --sonar-arc blue (4.6:1). Acid may only appear on
     light as a filled block behind dark text, or as a rule. */
  --l-bg:#f8f9fa;--l-surface:#ffffff;--l-ink:#0a0a0f;
  /* brand --text-muted (#6b7280) is 4.62:1 on page-bg: it passes AA but only
     just. Used for muted/meta as the brand specifies; sustained body copy uses
     the darker l-ink-2 (9.0:1) so long-form reading is not marginal. */
  --l-ink-2:#3f4552;--l-ink-3:#6b7280;
  --l-line:#e9ebed;--l-line-2:#cbd0d8;

  /* state — only for real state, never styling */
  --ok:#37e0c8;--warn:#ffb45c;--bad:#ff6b78;

  --max:1240px;--measure:66ch;--gutter:clamp(20px,5vw,64px);

  /* radius scale — brand guidelines v1.3 §4 "Radius Tokens (website only)".
     Website template uses these; dark-only decks stay sharp-edged. */
  --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:24px;--r-pill:1000px;

  /* the signature 2px grid gap (§6). NEVER wider on dark surfaces. */
  --grid-gap:2px;
  --shadow-light:0 12px 40px rgba(0,0,0,.07);

  --t-fast:200ms cubic-bezier(.2,.7,.2,1);
  --t-med:420ms cubic-bezier(.2,.7,.2,1);
  --t-slow:900ms cubic-bezier(.16,1,.3,1);

  /* semantic z-scale — never arbitrary values */
  --z-base:1;--z-nav:100;--z-mobile:90;--z-overlay:300;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--void);color:var(--ink-2);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:clamp(15.5px,1.05vw,17px);line-height:1.62;
  overflow-x:hidden;
}
::selection{background:var(--acid);color:var(--void)}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:3px}

/* One family, carried on weight + scale contrast. Ratio >=1.25 between steps. */
h1,h2,h3,h4{font-family:'Archivo',sans-serif;color:var(--ink);line-height:1.05;letter-spacing:-0.03em;text-wrap:balance}
h1{font-weight:800}h2,h3{font-weight:700}h4{font-weight:600}
p{text-wrap:pretty}

/* MONO IS SEMANTIC. States, IDs, versions, timestamps, counts.
   Never body copy, never decorative eyebrows. */
.mono{font-family:'Azeret Mono',ui-monospace,monospace;font-weight:400;font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}

/* data-driven backdrop — renders real lineage, not ambient particles */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.42}
.page{position:relative;z-index:var(--z-base)}

.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-overlay);background:var(--acid);color:var(--void);padding:10px 16px;border-radius:0 0 6px 0;font-weight:600}
.skip:focus{left:0}

/* ---- nav ---- */
header.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);transition:background var(--t-med),border-color var(--t-med);border-bottom:1px solid transparent}
header.nav.scrolled{background:color-mix(in oklch,var(--void) 82%,transparent);backdrop-filter:blur(14px) saturate(130%);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
/* Brand lockup: sonar mark + "ORCAHQ" wordmark.
   Per brand guidelines v1.3 §2 the sonar is a green origin dot (#00c896) with
   three blue arcs (#0066ff) radiating from it, and must never be recoloured or
   have its arcs removed. Wordmark is one word: ORCA in paper, HQ in highlight. */
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;color:var(--paper);letter-spacing:-0.03em;flex:none}
.brand .sonar{width:28px;height:28px;flex:none;overflow:visible}
.brand .sonar .dot{fill:var(--sonar-dot)}
.brand .sonar .arc{fill:none;stroke:var(--sonar-arc);stroke-width:2.4;stroke-linecap:round;transform-origin:5px 12px;animation:sonar 2s ease infinite}
.brand .sonar .arc:nth-of-type(2){animation-delay:.3s}
.brand .sonar .sonar .arc:nth-of-type(3),.brand .sonar .arc:nth-of-type(3){animation-delay:.7s}
@keyframes sonar{0%{opacity:.25;transform:scale(.55)}55%{opacity:1}100%{opacity:.25;transform:scale(1.12)}}
.brand .wm{white-space:nowrap;color:var(--brand-pink)}
.brand .wm span{color:var(--paper)}
/* the mark lives only on dark; if a light-surface lockup ever appears, ORCA
   takes the darker pink and HQ takes ink so both stay legible */
section.band.light .brand .wm{color:var(--brand-pink-dark)}
section.band.light .brand .wm span{color:var(--l-ink)}
@media (prefers-reduced-motion:reduce){
  .brand .sonar .arc{animation:none;opacity:.85;transform:none}
}
.nav-links{display:flex;gap:30px;font-size:14.5px;font-weight:500}
.nav-links a{color:var(--ink-3);transition:color var(--t-fast);position:relative;padding-block:4px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--acid);transition:width var(--t-fast)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px;flex:none}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:var(--t-fast)}
.nav-mobile{position:fixed;inset:72px 0 auto 0;z-index:var(--z-mobile);background:color-mix(in oklch,var(--void) 97%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:none;flex-direction:column;padding:16px var(--gutter) 26px}
.nav-mobile.open{display:flex}
.nav-mobile a{padding:13px 0;color:var(--ink-2);font-size:1.05rem;border-bottom:1px solid var(--line)}

/* ---- buttons ---- */
.btn{font-family:inherit;font-weight:600;font-size:14.5px;padding:11px 19px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),background var(--t-fast),color var(--t-fast);display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.btn-acid{background:var(--acid);color:var(--void)}
.btn-acid:hover{transform:translateY(-1px);box-shadow:0 8px 26px -8px var(--acid-glow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.btn-lg{padding:14px 25px;font-size:15.5px;border-radius:var(--r)}
.btn .arr{transition:transform var(--t-fast)}
.btn:hover .arr{transform:translateX(3px)}

/* ---- sections ---- */
section.band{padding-block:clamp(76px,10vw,140px);position:relative}
.bg-solid{background:color-mix(in oklch,var(--abyss) 92%,transparent);border-block:1px solid var(--line)}
.sec-head{max-width:64ch;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{font-size:clamp(1.95rem,3.8vw,3.1rem);margin-bottom:18px}
.sec-head p{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--ink-2);max-width:58ch}
.lede{font-size:clamp(1.12rem,1.7vw,1.42rem);color:var(--ink-2);max-width:60ch;line-height:1.5}
.lede b{color:var(--ink);font-weight:600}

/* acid highlight keyword in display headings — brand template position 2.
   Legal on dark only (17.6:1). Never inside a .light band. */
.turn{color:var(--acid)}
section.band.light .turn{color:var(--sonar-arc)}

/* home hero (dark) */
.hero{position:relative;padding-top:clamp(118px,13vw,152px);padding-bottom:clamp(48px,6vw,84px)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(2.15rem,4vw,3.5rem);letter-spacing:-0.035em;margin-block:24px 22px;max-width:16ch}
.hero .lede{margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-fig{background:color-mix(in oklch,var(--abyss) 74%,transparent)}
.fig-note{font-size:.88rem;color:var(--ink-3);margin-top:16px;max-width:44ch}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .hero-fig{max-width:460px}
}

/* staggered hero entrance — content is visible by default, this only enhances */
.rise{opacity:1;transform:none}
.js .rise{animation:rise var(--t-slow) both}
.js .rise.d1{animation-delay:.02s}.js .rise.d2{animation-delay:.10s}
.js .rise.d3{animation-delay:.18s}.js .rise.d4{animation-delay:.26s}
.js .rise.d5{animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .rise{animation:none}}

/* interior page hero */
.phero{position:relative;padding-top:clamp(122px,14vw,158px);padding-bottom:clamp(34px,4vw,56px)}
.phero + .band{padding-top:clamp(52px,6vw,84px)}
.phero h1{font-size:clamp(2.4rem,5.4vw,4.2rem);letter-spacing:-0.037em;max-width:19ch}
.phero p{margin-top:22px}

/* status pill — used sparingly, carries real state */
.pill{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--ink-2);padding:6px 13px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:color-mix(in oklch,var(--slate-1) 60%,transparent)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--sonar-dot);flex:none}
.pill .mono{color:var(--ink-3);font-size:11.5px;padding-left:11px;margin-left:3px;border-left:1px solid var(--line-2)}

/* ---- editorial split ---- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5.5vw,88px);align-items:start}
.split.rev{grid-template-columns:.95fr 1.05fr}
/* narrow lead column, for when the right side carries a tall spec table.
   The lead sticks so it stays with the rows it introduces instead of
   leaving a void beside them. */
.split.lead{grid-template-columns:.78fr 1.22fr}
@media (min-width:961px){.split.lead > :first-child{position:sticky;top:106px}}
.split h2,.split h3{font-size:clamp(1.55rem,2.5vw,2.2rem);margin-bottom:16px}
.split p{margin-bottom:20px;color:var(--ink-2)}

/* ---- keyed rows (no card grids) ---- */
.rows{display:flex;flex-direction:column}
.row-item{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.rows .row-item:last-child{border-bottom:1px solid var(--line)}
.row-item .k{font-family:'Azeret Mono',monospace;font-size:12px;color:var(--acid-dim);padding-top:4px;min-width:62px}
.row-item h3,.row-item h4{font-weight:600;color:var(--ink);font-size:1.12rem;margin-bottom:7px}
.row-item p{font-size:1rem;color:var(--ink-2);margin:0;max-width:72ch}
.row-item .svc-more{margin-top:12px}

/* ---- service lines: asymmetric rows, the trust pattern ---- */
.svc{display:flex;flex-direction:column;gap:var(--grid-gap);background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.svc-row{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(24px,4vw,56px);padding:clamp(28px,3.4vw,44px);background:var(--abyss);align-items:start;transition:background var(--t-med)}
.svc-row:hover{background:var(--slate-1)}
section.band.light .svc-row{transition:box-shadow var(--t-fast),background var(--t-med)}
section.band.light .svc-row:hover{background:var(--l-surface);box-shadow:var(--shadow-light)}
.svc-row h3{font-size:clamp(1.24rem,1.9vw,1.55rem);margin-bottom:10px}
.svc-row .sig{font-family:'Azeret Mono',monospace;font-size:11.5px;color:var(--ink-4);display:block;margin-bottom:14px}
.svc-row .body p{color:var(--ink-2);margin-bottom:16px}
.svc-row .body p:last-child{margin-bottom:0}
.svc-row .body .pin{color:var(--ink);font-weight:600}
.svc-more{display:inline-flex;align-items:center;gap:8px;color:var(--acid);font-weight:600;font-size:.94rem;margin-top:4px}
.svc-more:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- specification table — procurement reads tables ---- */
.spec{width:100%;border-collapse:collapse;font-size:.95rem;margin-block:8px}
.spec caption{text-align:left;color:var(--ink-3);font-size:.88rem;padding-bottom:12px}
.spec th,.spec td{text-align:left;padding:14px 18px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec thead th{color:var(--ink);font-weight:600;font-size:.86rem;letter-spacing:.02em;border-bottom-color:var(--line-2)}
.spec td{color:var(--ink-2)}
.spec td:first-child{color:var(--ink);font-weight:500;width:30%}
.spec .mono{font-size:.86rem;color:var(--ink-3)}
/* min-width:0 is load-bearing. Grid and flex children default to min-width:auto,
   so a wide table expands its track instead of letting this box scroll, and the
   whole page gains horizontal overflow. Caught at 390px on the severity table. */
.spec-wrap{overflow-x:auto;min-width:0;max-width:100%}
.split > *,.hero-inner > *,.svc-row > *{min-width:0}

/* ---- decision log — the differentiator ---- */
.dlog{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.dl-item{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.5vw,32px);padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background var(--t-fast)}
.dl-item:hover{background:color-mix(in oklch,var(--slate-1) 50%,transparent)}
.dl-id{font-family:'Azeret Mono',monospace;font-size:12px;color:var(--acid-dim);min-width:88px}
.dl-title{color:var(--ink);font-weight:500;font-size:1.02rem}
.dl-title .meta{display:block;color:var(--ink-3);font-size:.9rem;font-weight:400;margin-top:4px}
.dl-state{font-family:'Azeret Mono',monospace;font-size:11px;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
.dl-state[data-state="published"]{color:var(--acid);border-color:color-mix(in oklch,var(--acid) 40%,transparent)}
.dl-state[data-state="committed"]{color:var(--deep);border-color:color-mix(in oklch,var(--deep) 40%,transparent)}
.dl-state[data-state="discussion"]{color:var(--warn);border-color:color-mix(in oklch,var(--warn) 38%,transparent)}
.dl-state[data-state="superseded"]{color:var(--ink-4);text-decoration:line-through}
.dl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.dl-filter{font-family:'Azeret Mono',monospace;font-size:12px;padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--ink-3);cursor:pointer;transition:var(--t-fast)}
.dl-filter:hover{color:var(--ink);border-color:var(--ink-4)}
.dl-filter[aria-pressed="true"]{background:var(--acid);color:var(--void);border-color:var(--acid);font-weight:500}
.dl-count{font-family:'Azeret Mono',monospace;font-size:.82rem;color:var(--ink-3);margin-left:6px}
/* The count inherited the muted ramp inside the acid pill, where --ink-3 is
   4.31:1 and just misses AA. Acid is a very light ground, so the count needs a
   dark ink like the label beside it, held one step lighter to keep the count
   subordinate to the category name (--l-ink-2 on acid is 8.58:1). */
.dl-filter[aria-pressed="true"] .dl-count{color:var(--l-ink-2)}

/* ---- provisional / finished labelling (epistemic honesty) ---- */
.tag{font-family:'Azeret Mono',monospace;font-size:11px;padding:3px 9px;border-radius:3px;border:1px solid var(--line-2);color:var(--ink-3)}
.tag[data-kind="provisional"]{color:var(--warn);border-color:color-mix(in oklch,var(--warn) 35%,transparent)}
.tag[data-kind="settled"]{color:var(--deep);border-color:color-mix(in oklch,var(--deep) 35%,transparent)}

/* ---- notes / long-form index ---- */
.notes{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.note{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);padding:26px 0;border-bottom:1px solid var(--line);transition:background var(--t-fast)}
.note:hover{background:color-mix(in oklch,var(--slate-1) 50%,transparent)}
.note .when{font-family:'Azeret Mono',monospace;font-size:12px;color:var(--ink-4);min-width:96px;padding-top:5px}
.note h2{font-size:1.22rem;margin-bottom:8px}
.note p{color:var(--ink-3);font-size:.97rem;max-width:62ch}
.note .by{font-size:.86rem;color:var(--ink-4);margin-top:10px}

/* ---- prose (legal, long-form) ---- */
.prose{max-width:var(--measure);margin-inline:auto}
.prose h2{font-size:1.5rem;margin:2.4em 0 .7em}
.prose h3{font-size:1.18rem;margin:2em 0 .6em}
.prose p,.prose li{color:var(--ink-2);margin-bottom:1.05em}
.prose ul,.prose ol{padding-left:1.3em;margin-bottom:1.3em}
.prose li{margin-bottom:.5em}
/* Inline links in note bodies. These were --acid, which is 1.06:1 on the light
   band and effectively invisible; the bug hid because only 5 of the 18 notes
   contain an inline link at all, so most pages looked fine.

   Founder direction 2026-07-26: links on white take the logo pink. Note the
   exact value: the wordmark pink --brand-pink (#f72585) is only 3.58:1 on
   --l-bg and FAILS AA for body-size text, so links use --brand-pink-dark
   (#d1156a, 4.95:1), which the token block already defines as the
   light-surface variant of the same pink. Do not "restore" the brighter one.
   All 18 .prose blocks currently sit inside section.band.light; the dark rule
   below exists so that stops being a silent assumption. */
.prose a{color:var(--brand-pink-dark);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in oklch,var(--brand-pink-dark) 45%,transparent);
  transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.prose a:hover{color:#ab0f56;text-decoration-color:currentColor}
/* If prose is ever placed on a dark surface, the full-strength wordmark pink
   is correct there (5.22:1 on --void); the darkened one would go muddy. */
section.band:not(.light) .prose a{color:var(--brand-pink)}
section.band:not(.light) .prose a:hover{color:var(--brand-pink);text-decoration-color:currentColor}
.prose strong{color:var(--ink);font-weight:600}
/* Long unbreakable tokens (image refs, URLs, identifiers) overflow the viewport
   on narrow screens without tripping an element-level overflow check, because
   the box stays put while its text runs past. Caught at 390px on a 43-char
   container reference. Applies to all prose, not just the one article. */
.prose code{font-family:'Azeret Mono',monospace;font-size:.88em;background:var(--slate-1);padding:2px 6px;border-radius:4px;color:var(--ink);overflow-wrap:anywhere;word-break:break-word}
.prose,.prose p,.prose li,.prose h2,.prose h3{overflow-wrap:break-word}
.prose pre{overflow-x:auto;max-width:100%}

/* ---- forms ---- */
.field{margin-bottom:20px}
.field label{display:block;font-size:.9rem;font-weight:500;color:var(--ink);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:var(--slate-1);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px;color:var(--ink);font-family:inherit;font-size:.98rem;transition:border-color var(--t-fast)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acid);outline:none}
.field .hint{font-size:.85rem;color:var(--ink-3);margin-top:6px}
.form-max{max-width:560px}


/* ---- consent checkbox + form status ---- */
.field-check{display:flex;align-items:flex-start;gap:11px}
.field-check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--acid)}
.field-check label{margin:0;font-weight:400;color:var(--ink-2);font-size:.93rem}
#formStatus{margin-top:16px;font-size:.94rem;min-height:1.2em}
#formStatus[data-kind="ok"]{color:var(--sonar-dot)}
#formStatus[data-kind="bad"]{color:var(--bad)}
#formStatus[data-kind="pending"]{color:var(--ink-3)}
section.band.light #formStatus[data-kind="ok"]{color:#0a7d5c}
section.band.light #formStatus[data-kind="bad"]{color:#c22d3c}

/* ---- closing CTA ---- */
.cta{padding-block:clamp(76px,10vw,132px);position:relative;border-top:1px solid var(--line)}
.cta-inner{max-width:62ch}
.cta h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:18px}
.cta p{color:var(--ink-2);margin-bottom:30px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px}
.fine{font-size:.86rem;color:var(--ink-3);margin-top:22px}

/* ---- footer ---- */
footer.foot{border-top:1px solid var(--line);background:color-mix(in oklch,var(--abyss) 80%,transparent);padding-block:clamp(48px,6vw,72px) 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-bottom:48px}
.foot-col h2{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:16px;letter-spacing:.03em}
.foot-col a{display:block;color:var(--ink-3);font-size:.93rem;padding-block:6px;transition:color var(--t-fast)}
.foot-col a:hover{color:var(--ink)}
.foot-about p{color:var(--ink-3);font-size:.93rem;max-width:38ch;margin-top:14px}
.foot-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.foot-bottom p,.foot-bottom a{font-size:.85rem;color:var(--ink-4)}
.foot-bottom a:hover{color:var(--ink-3)}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}

/* ============================================================
   LIGHT SECTIONS — the alternating half of the hybrid mode.
   Add .light to section.band. Everything below rebinds the dark
   tokens to their light equivalents so existing components work
   unchanged inside a light band.
   ============================================================ */
section.band.light{
  background:var(--l-bg);color:var(--l-ink-2);
  border-block:1px solid var(--l-line);
  /* rebind: components inside inherit the light palette automatically */
  --ink:var(--l-ink);--ink-2:var(--l-ink-2);--ink-3:var(--l-ink-3);--ink-4:var(--l-ink-3);
  --line:var(--l-line);--line-2:var(--l-line-2);
  --abyss:var(--l-surface);--slate-1:#eef1f4;--slate-2:#e6eaee;
  /* acid is unreadable on light; the accent here is brand blue */
  --acid-dim:var(--sonar-arc);
}
section.band.light h1,section.band.light h2,section.band.light h3,section.band.light h4{color:var(--l-ink)}
section.band.light .svc-more{color:var(--sonar-arc)}
section.band.light .btn-ghost{color:var(--l-ink);border-color:var(--l-line-2)}
section.band.light .btn-ghost:hover{border-color:var(--l-ink-3)}
section.band.light .pill{background:var(--l-surface);border-color:var(--l-line-2);color:var(--l-ink-2)}
section.band.light .spec thead th{color:var(--l-ink)}
/* acid on light is legal only as a filled block behind dark ink */
section.band.light .mark-acid{background:var(--acid);color:var(--void);padding:1px 7px;border-radius:3px;font-weight:600}

/* ---- highlight callout: brand guidelines v1.3 §6 ----
   The 3px highlight left border is mandated by the brand template. It is the
   one place a side-stripe is intentional here. Max one per major section. */
.callout{border-left:3px solid var(--acid);background:color-mix(in oklch,var(--slate-1) 60%,transparent);padding:22px 26px;border-radius:0 var(--r) var(--r) 0;margin-block:8px}
.callout p{margin:0;color:var(--ink);font-size:1.06rem}
section.band.light .callout{background:var(--l-surface);border-left-color:var(--sonar-arc)}

/* ---- model-layer wall: brand template position 3 ----
   Founder decision 2026-07-26. Replaces the text marquee that held this slot.
   A sponsor-wall of the labs and open-weight families we route across.

   The colour rule is the whole component: MONOCHROME AT REST, brand colour on
   hover. Twelve unrelated brand palettes shown at once would out-shout --acid,
   and acid is the site's only signal colour (design principle 2, "scarcity
   gives the accent its power"). Holding the marks at --ink-3 keeps one visual
   system; the colour arrives as a reward for pointing at something.
   Each mark carries its own hex on --mk, all verified >=3:1 on --void. */
.wall{border-block:1px solid var(--line);background:color-mix(in oklch,var(--abyss) 88%,transparent);padding-block:22px 15px}
/* On inner pages the wall sits between the page's last section and the closing
   CTA, so it carries less air than the homepage's under-hero placement. */
.wall-compact{padding-block:18px 13px}
.wall-vp{overflow:hidden;display:flex;width:100%;
  /* feather both ends so marks enter and leave rather than being guillotined
     by the viewport edge. Mask, not a gradient overlay, so it survives any
     background behind the strip. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.wall-track{display:flex;align-items:center;gap:0;width:max-content;flex:none;list-style:none;margin:0;padding:0;
  animation:wall 54s linear infinite;will-change:transform}
.wall-compact .wall-track{animation-duration:72s}

/* one mark: glyph + name lockup, held in the neutral ramp until hovered */
.mk{display:flex;align-items:center;gap:10px;padding-inline:clamp(18px,2.4vw,34px);white-space:nowrap;
  color:var(--ink-3);transition:color var(--t-fast),opacity var(--t-fast),transform var(--t-fast)}
.mk-g{width:22px;height:22px;flex:none;fill:currentColor}
.mk-n{font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
/* OpenAI, xAI and Cohere have no glyph (see build-pages.py). Set as a
   logotype at glyph weight so the entry reads as deliberate, not as a
   lockup with a missing icon. */
.mk-wm .mk-n{font-size:17px;font-weight:800;letter-spacing:-0.03em}
.wall-vp:hover .mk{opacity:.42}
.wall-vp:hover .mk:hover{opacity:1;color:var(--mk);transform:translateY(-1px)}
.wall-vp:hover .wall-track,.wall-vp:focus-within .wall-track{animation-play-state:paused}

/* Label and disclaimer sit on one line where there is room and stack below it.
   The disclaimer must never out-weigh the marks it annotates: at 390px the
   original three-sentence version was physically taller than the strip. */
.wall-cap{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;row-gap:5px}
.wall-cap .mono{font-size:12px;color:var(--ink-3);letter-spacing:.02em}
/* The non-endorsement line is a legal component, not decoration. --ink-4 was
   the obvious "fine print" choice and is wrong: it is 3.8:1, which the token
   block above marks as never-body-text. A disclaimer nobody can read is not a
   disclaimer. It takes --ink-3 (5.5:1) and passes AA like any other copy. */
.wall-fine{font-size:11.5px;line-height:1.5;color:var(--ink-3);max-width:78ch}

@keyframes wall{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Small screens: the marks have to stay the loudest thing in the band. At
   390px the full-size lockups fit only three marks against four lines of
   caption, which inverts the component. Tighten the marks so more of the
   roster is in view and drop the secondary label segment. */
@media (max-width:620px){
  .mk{padding-inline:16px;gap:8px}
  .mk-g{width:20px;height:20px}
  .mk-n{font-size:13.5px}
  .mk-wm .mk-n{font-size:15.5px}
  .wall-seg{display:none}
  .wall-fine{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  /* No scroll. The duplicate track is aria-hidden and purely for the seamless
     loop, so it is removed outright rather than wrapped into the grid twice. */
  /* flex:none + width:max-content would keep the single row at its full
     scrolling width and blow the viewport out; the track has to become a
     shrinkable wrapping box. min-width:0 is load-bearing (grid/flex children
     default to min-width:auto and refuse to shrink below content). */
  .wall-track{animation:none;flex-wrap:wrap;width:auto;flex:1 1 auto;min-width:0;justify-content:center;row-gap:16px}
  .wall-track[aria-hidden="true"]{display:none}
  .wall-vp{-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}
  .mk{padding-inline:clamp(14px,2vw,24px)}
}

/* ---- diagram surfaces: structure and typography only, per brand §1 ----
   No photography, no stock imagery. Graphics are diagrams that carry meaning. */
.figure{border:1px solid var(--line);border-radius:var(--r-xl);background:color-mix(in oklch,var(--abyss) 80%,transparent);padding:clamp(20px,2.6vw,30px);position:relative}
.figure figcaption{font-family:'Azeret Mono',monospace;font-size:11.5px;color:var(--ink-3);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.figure figcaption::before{content:"";width:18px;height:1px;background:var(--acid-dim)}
.figure canvas,.figure svg{width:100%;height:auto;display:block}
section.band.light .figure{background:var(--l-surface);border-color:var(--l-line)}

/* ---- lifecycle flow: the engagement shape, as structure ---- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.flow-step{background:var(--abyss);padding:22px 20px;position:relative}
.flow-step .n{font-family:'Azeret Mono',monospace;font-size:11px;color:var(--acid-dim);display:block;margin-bottom:10px}
.flow-step h3{font-size:1.02rem;margin-bottom:7px;color:var(--ink)}
.flow-step p{font-size:.9rem;color:var(--ink-3);margin:0}
.flow-step[data-live="true"]{background:color-mix(in oklch,var(--slate-1) 90%,transparent)}
section.band.light .flow-step{background:var(--l-surface);transition:box-shadow var(--t-fast)}
section.band.light .flow-step:hover{box-shadow:var(--shadow-light)}
section.band.light .flow-step[data-live="true"]{background:#eef1f4}
/* This step is tinted a shade darker than the surrounding light band to mark
   it as live, which quietly drags every colour on it below AA: --l-ink-3 and
   --sonar-arc both land at 4.26:1 here (they pass on --l-bg). Text sitting on
   this surface takes one step darker. Pre-existing, found by the full-text
   contrast sweep rather than by looking. The same #eef1f4 is used by
   .chain-step.on further down, so both are fixed together here. */
section.band.light .flow-step[data-live="true"] p,
section.band.light .chain-step.on .n,
section.band.light .chain-step.on p{color:var(--l-ink-2)}
section.band.light .flow-step[data-live="true"] .n{color:#0052cc}
@media (max-width:900px){.flow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}


/* ---- field notes: index rows + article meta ---- */
.note-meta{font-size:12.5px;color:var(--ink-3);margin-bottom:18px;letter-spacing:.04em}
.notes .note{color:inherit}
.note > .cat-chip{align-self:start;margin-top:3px;justify-self:start}
.note h2{transition:color var(--t-fast)}
.note:hover h2{color:var(--sonar-arc)}
section.band.light .note:hover{background:var(--l-surface);box-shadow:var(--shadow-light)}
.prose .callout{margin-block:1.6em}
.prose > div{margin-bottom:1.05em}
.prose h2:first-child{margin-top:0}


/* ---- lineage chain (approach page) ---- */
.chain{display:flex;flex-wrap:wrap;gap:var(--grid-gap);background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.chain-step{flex:1 1 150px;background:var(--abyss);padding:20px 18px;position:relative;transition:background var(--t-med),border-color var(--t-med);border-top:2px solid transparent;cursor:default}
.chain-step .n{font-family:'Azeret Mono',monospace;font-size:10.5px;color:var(--ink-4);display:block;margin-bottom:9px;letter-spacing:.06em}
.chain-step h3{font-size:.98rem;margin-bottom:5px;color:var(--ink-3);transition:color var(--t-med)}
.chain-step p{font-size:.85rem;color:var(--ink-4);margin:0;transition:color var(--t-med)}
.chain-step.on{background:var(--slate-1);border-top-color:var(--acid)}
.chain-step.on h4{color:var(--ink)}
.chain-step.on p{color:var(--ink-3)}
section.band.light .chain-step{background:var(--l-surface)}
section.band.light .chain-step.on{background:#eef1f4;border-top-color:var(--sonar-arc)}

/* ---- tokenisation demo (ORCA page) ---- */
.tok-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap);background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tok-pane{background:var(--abyss);padding:20px}
.tok-pane label,.tok-pane .lab{display:block;font-family:'Azeret Mono',monospace;font-size:11px;color:var(--ink-3);margin-bottom:12px;letter-spacing:.05em}
#tokIn{width:100%;min-height:150px;background:var(--slate-1);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px;color:var(--ink);font-family:inherit;font-size:.95rem;line-height:1.6;resize:vertical}
#tokIn:focus{border-color:var(--acid);outline:none}
#tokOut{min-height:150px;background:var(--slate-1);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px;font-size:.95rem;line-height:1.6;color:var(--ink-2);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.tok{background:var(--acid);color:var(--void);font-family:'Azeret Mono',monospace;font-size:.82em;padding:1px 6px;border-radius:3px;font-weight:500}
.tok-empty{color:var(--ink-4)}
#tokCount{font-family:'Azeret Mono',monospace;font-size:11.5px;color:var(--acid-dim);margin-top:12px;display:block}
section.band.light .tok-pane{background:var(--l-surface)}
section.band.light #tokIn,section.band.light #tokOut{background:#f2f4f6;border-color:var(--l-line-2);color:var(--l-ink-2)}
@media (max-width:760px){.tok-grid{grid-template-columns:1fr}}


/* ============================================================
   STRUCTURE PASS (2026-07-26): nav dropdown, categorised notes,
   reading progress, diagram figures. The large-organisation feel
   comes from information architecture and page furniture, never
   from fabricated scale claims.
   ============================================================ */

/* ---- nav dropdown (Services) ---- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a .car{font-size:9px;margin-left:6px;opacity:.6;transition:transform var(--t-fast)}
.nav-item:hover > a .car,.nav-item:focus-within > a .car{transform:translateY(1px)}
.nav-drop{position:absolute;top:calc(100% + 10px);left:-16px;min-width:248px;background:var(--abyss);border:1px solid var(--line-2);border-radius:var(--r);padding:8px;display:none;flex-direction:column;box-shadow:0 18px 50px -12px rgba(0,0,0,.55);z-index:var(--z-nav)}
.nav-drop::before{content:"";position:absolute;top:-11px;left:0;right:0;height:12px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{display:flex}
.nav-drop a{padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px;transition:background var(--t-fast),color var(--t-fast)}
.nav-drop a:hover{background:var(--slate-1);color:var(--ink)}
.nav-drop a::after{display:none}
.nav-drop .sep{height:1px;background:var(--line);margin:7px 4px}
.nav-drop .lab{font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--ink-4);padding:6px 12px 3px}

/* ---- reading progress (article pages) ---- */
.readbar{position:fixed;inset:0 0 auto 0;height:2.5px;background:var(--acid);transform-origin:0 50%;transform:scaleX(0);z-index:calc(var(--z-nav) + 1);pointer-events:none}
@media (prefers-reduced-motion:reduce){.readbar{display:none}}

/* ---- note category furniture ---- */
.note-crumb{font-family:'Azeret Mono',monospace;font-size:12px;color:var(--ink-3);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.note-crumb a{color:var(--ink-3)}
.note-crumb a:hover{color:var(--ink)}
.note-crumb .cat{color:var(--acid-dim)}
.cat-chip{font-family:'Azeret Mono',monospace;font-size:11px;padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap}
.note .meta-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
section.band.light .cat-chip{border-color:var(--l-line-2);color:var(--l-ink-3)}

/* ---- featured note (index) ---- */
.note-feature{display:block;border:1px solid var(--l-line);border-radius:var(--r-xl);background:var(--l-surface);padding:clamp(26px,3.5vw,44px);margin-bottom:clamp(30px,4vw,48px);transition:box-shadow var(--t-fast)}
.note-feature:hover{box-shadow:var(--shadow-light)}
.note-feature .meta-row{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.note-feature h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-bottom:12px}
.note-feature p{color:var(--l-ink-2);max-width:66ch}
.note-feature .svc-more{margin-top:16px;display:inline-flex}

/* ---- related notes ---- */
.related{border-top:1px solid var(--l-line);margin-top:clamp(40px,5vw,60px);padding-top:clamp(28px,3.5vw,40px)}
.related > p.lab{font-family:'Azeret Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--l-ink-3);margin-bottom:18px}
.related .rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--grid-gap);background:var(--l-line);border:1px solid var(--l-line);border-radius:var(--r-lg);overflow:hidden}
.related a{background:var(--l-surface);padding:20px;display:block;transition:box-shadow var(--t-fast)}
.related a:hover{box-shadow:var(--shadow-light)}
.related a .cat{font-family:'Azeret Mono',monospace;font-size:10.5px;color:var(--sonar-arc);display:block;margin-bottom:8px}
.related a h3{font-size:1.02rem;color:var(--l-ink)}

/* ---- service glyphs ---- */
.svc-glyph{width:46px;height:46px;color:var(--acid-dim);margin-bottom:14px}
section.band.light .svc-glyph{color:var(--sonar-arc)}
.svc-glyph svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- diagram SVGs (boundary, harness) ---- */
.diagram{width:100%;height:auto;display:block}
.diagram .box{fill:color-mix(in oklch,var(--slate-1) 85%,transparent);stroke:var(--line-2);rx:10}
.diagram .box-hot{stroke:var(--acid-dim)}
.diagram text{font-family:'Archivo',sans-serif;font-size:13px;fill:var(--ink)}
.diagram .sub{font-family:'Azeret Mono',monospace;font-size:10.5px;fill:var(--ink-3);letter-spacing:.04em}
.diagram .flowline{stroke:var(--ink-4);stroke-width:1.5;fill:none;stroke-dasharray:5 6;animation:dashmove 1.6s linear infinite}
.diagram .flowline.hot{stroke:var(--acid-dim)}
.diagram .ring{stroke:var(--line-2);fill:none}
.diagram .ring-seg{stroke:var(--sonar-arc);fill:none;stroke-width:2}
@keyframes dashmove{to{stroke-dashoffset:-11}}
@media (prefers-reduced-motion:reduce){.diagram .flowline{animation:none}}
section.band.light .diagram .box{fill:var(--l-surface);stroke:var(--l-line-2)}
section.band.light .diagram text{fill:var(--l-ink)}
section.band.light .diagram .sub{fill:var(--l-ink-3)}
section.band.light .diagram .flowline{stroke:var(--l-ink-3)}
section.band.light .diagram .flowline.hot{stroke:var(--sonar-arc)}

/* ---- framework crosswalk line on anatomy rows ---- */
.row-item .frame{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}

/* ---- anatomy stack (assurance) ---- */
.anatomy a{cursor:pointer}
.anatomy .an-rect{fill:color-mix(in oklch,var(--slate-1) 80%,transparent);stroke:var(--line-2);transition:stroke var(--t-fast),fill var(--t-fast)}
.anatomy a:hover .an-rect,.anatomy a:focus-visible .an-rect{stroke:var(--acid-dim);fill:var(--slate-2)}
.anatomy a:focus-visible{outline:none}
.anatomy text{pointer-events:none}

/* ---- 404 / decorative sonar ---- */
.sonar-deco{width:min(340px,60vw);height:auto;opacity:.85}
.sonar-deco .dot{fill:var(--sonar-dot)}
.sonar-deco .arc{fill:none;stroke:var(--sonar-arc);stroke-width:2.2;stroke-linecap:round}

/* legal at-a-glance sits above prose */
.glance{margin-bottom:clamp(30px,4vw,46px)}

/* ---- reveals: enhance already-visible content, never gate it ---- */
.obs{opacity:1;transform:none;transition:opacity var(--t-slow),transform var(--t-slow)}
.js .obs:not(.seen){opacity:0;transform:translateY(14px)}
.js .obs.seen{opacity:1;transform:none}

/* ---- responsive ---- */
@media (max-width:960px){
  .split,.split.rev{grid-template-columns:1fr;gap:32px}
  .svc-row{grid-template-columns:1fr;gap:16px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:800px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  /* the CTA is a nowrap pill; below 800 it forces body width. It lives in the mobile menu. */
  .nav-cta .btn{display:none}
  .dl-item{grid-template-columns:auto 1fr;row-gap:10px}
  .dl-state{grid-column:2}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .note{grid-template-columns:1fr;gap:8px}
  .note .when{padding-top:0}
  .phero h1{max-width:100%}
  .spec td:first-child{width:auto}
}

/* ---- reduced motion is not optional ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .obs:not(.seen){opacity:1;transform:none}
  #field{opacity:.28}
}