/* Hallmark · genre: modern-minimal · macrostructure: Bento Grid · design-system: design.md · designed-as-app
 * F1 Bento knobs: tiles=4+2, spans=irregular, border=hairline-all
 * theme: custom · vibe: "instrumented slate, signal cyan, alert amber"
 * paper: oklch(19.5% .016 245) · accent: oklch(81.5% .118 205) + oklch(81.5% .138 72)
 * display: Space Grotesk · body: system stack · outlier: JetBrains Mono
 * axes: dark / grotesk-sans / cool + warm · nav: N9 · footer: Ft4
 * contrast: pass (40-41) · slop: pass (42-45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50-57) · icons: pass (30)
 */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --color-paper: oklch(19.5% .016 245);
  --color-paper-2: oklch(23.5% .018 245);
  --color-paper-3: oklch(27.5% .019 245);
  --color-ink: oklch(96.5% .006 240);
  --color-ink-2: oklch(84.5% .013 240);
  --color-muted: oklch(74.5% .015 240);
  --color-neutral: oklch(63.5% .016 240);
  --color-rule: oklch(34.5% .017 243);
  --color-rule-strong: oklch(56.5% .022 243);
  --color-signal: oklch(81.5% .118 205);
  --color-signal-deep: oklch(44% .068 210);
  --color-signal-ink: oklch(20.5% .030 205);
  --color-alert: oklch(81.5% .138 72);
  --color-alert-deep: oklch(45.5% .095 62);
  --color-alert-ink: oklch(21.5% .035 66);
  --color-focus: oklch(79.5% .130 205);
  --font-display: "Space Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Aptos", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --text-xs: .72rem;
  --text-sm: .82rem;
  --text-md: .94rem;
  --text-lg: 1.06rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.7rem;
  --text-3xl: clamp(2rem, 3.4vw, 2.9rem);
  --text-display-s: clamp(2.2rem, 4vw, 3.3rem);
  --text-display: clamp(2.5rem, 5.1vw, 4.1rem);
  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.62;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-short: 160ms;
  --dur-mid: 240ms;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --rule-hair: 1px;
  --shell: 1220px;
  --nav-height: 68px;
  --z-sticky: 200;
  --z-sticky-nav: 300;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--space-md)); overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font: 350 17px/var(--lh-body) var(--font-body); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,p,ul,ol { margin: 0; }
h1,h2,h3,h4 { font-family: var(--font-display); font-style: normal; line-height: var(--lh-tight); letter-spacing: -.035em; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); letter-spacing: -.025em; }
h4 { font-size: var(--text-lg); letter-spacing: -.02em; font-weight: 600; }
p { color: var(--color-muted); }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; }
button,a,input,summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img,svg,canvas { display: block; max-width: 100%; }
ul,ol { list-style: none; padding: 0; }
a,button,summary,input { touch-action: manipulation; }
strong { font-weight: 650; color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.shell { width: min(var(--shell), calc(100% - var(--space-xl))); margin-inline: auto; }
.section { padding-block: var(--space-3xl); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: var(--space-sm); top: var(--space-xs); z-index: 400; padding: var(--space-xs) var(--space-md); background: var(--color-alert); color: var(--color-alert-ink); font-weight: 600; border-radius: var(--radius-sm); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

/* ---- Instrument labels: the mono outlier. Two roles only: labels and figures. ---- */
.micro { font: 500 var(--text-xs)/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral); display: block; }
.micro--signal { color: var(--color-signal); }
.micro--alert { color: var(--color-alert); }

/* ---- Controls ---- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-md); min-height: 48px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid transparent; border-radius: var(--radius-md); background: var(--color-alert); color: var(--color-alert-ink); font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.button:hover { background: var(--color-ink); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .55; cursor: not-allowed; background: var(--color-paper-3); color: var(--color-muted); }
.button--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.button--ghost:hover { background: var(--color-paper-2); color: var(--color-ink); border-color: var(--color-signal); }
.button--small { min-height: 44px; padding: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); gap: var(--space-sm); }
.button--full { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; color: var(--color-signal); font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.text-link:hover { text-decoration-color: var(--color-signal); }
.text-link:active { transform: translateY(1px); }

/* ---- N9 · Edge-aligned nav: wordmark hard-left, action hard-right, one index disclosure ---- */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--nav-height); width: min(var(--shell), calc(100% - var(--space-xl))); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: var(--space-2xs); min-height: 44px; font-family: var(--font-display); font-size: 1.42rem; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--color-ink); }
.brand__light { font-weight: 300; color: var(--color-ink-2); }
.brand__dot { color: var(--color-signal); }
.nav__actions { display: flex; align-items: center; gap: var(--space-2xs); }
.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: var(--space-2xs) var(--space-xs); background: transparent; color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.nav-toggle:hover { color: var(--color-ink); border-color: var(--color-rule-strong); }
.nav-toggle:active { transform: translateY(1px); }
.nav-toggle__bars { display: grid; gap: var(--space-3xs); width: 14px; }
.nav-toggle__bars > span { display: block; height: 1.5px; background: currentColor; }
.nav-toggle__bars > span:last-child { width: 8px; }
.nav-menu { position: absolute; inset: 100% var(--space-md) auto auto; width: min(300px, calc(100vw - var(--space-lg))); display: none; flex-direction: column; gap: var(--space-3xs); padding: var(--space-xs); margin-top: var(--space-2xs); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.nav-menu.is-open { display: flex; }
.nav-menu > a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 44px; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); font-size: var(--text-md); color: var(--color-ink-2); white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav-menu > a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.nav-menu > a > span { font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-neutral); }
.no-js .nav-toggle { display: none; }
.no-js .nav-menu { position: static; display: flex; flex-flow: row wrap; width: auto; margin: 0; padding: 0; background: none; border: 0; }
.no-js .nav-menu > a { padding-inline: var(--space-2xs); }
.no-js .nav-menu > a > span { display: none; }
.no-js .nav { flex-wrap: wrap; padding-block: var(--space-2xs); }

/* ---- Hero + scene: the offer outranks the scene ---- */
.scroll-experience { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); isolation: isolate; overflow: clip; background: var(--color-paper); }
.scroll-stage { grid-area: 1 / 1; align-self: start; position: sticky; top: var(--nav-height); height: calc(100svh - var(--nav-height)); overflow: hidden; pointer-events: none; contain: paint; }
.scene-visual { position: absolute; right: 0; top: 6%; bottom: 12%; width: 46%; }
.scene-canvas,.scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.scene-canvas { opacity: 0; transition: opacity var(--dur-mid) var(--ease-out); }
.scroll-experience[data-scene-state="ready"][data-motion="full"] .scene-canvas { opacity: 1; }
.scroll-experience[data-scene-state="ready"][data-motion="full"] .scene-fallback { opacity: 0; }
.scene-readout { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--space-3xs); padding-inline: var(--space-2xs); text-align: right; }
.scene-readout__stage { font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--color-signal); }
.scene-readout__note { font-size: var(--text-xs); color: var(--color-neutral); }
.scene-copy-track { grid-area: 1 / 1; min-width: 0; position: relative; z-index: 2; pointer-events: none; }
.scene-chapter { display: flex; align-items: center; padding-block: var(--space-2xl) var(--space-4xl); }
.scene-chapter--hero { min-height: calc(100svh - var(--nav-height)); }
.scene-chapter--boundary { min-height: 86svh; }
.scene-chapter__copy { width: 50%; max-width: 560px; pointer-events: auto; }
.hero__status { display: flex; align-items: center; gap: var(--space-2xs); min-height: 24px; margin-bottom: var(--space-md); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--color-signal); }
.hero__status-rule { width: 18px; height: 1px; background: var(--color-rule-strong); }
.hero h1 { letter-spacing: -.045em; }
.hero__accent { color: var(--color-signal); font-weight: 300; }
.hero__lede { max-width: 52ch; margin-top: var(--space-md); font-size: var(--text-lg); color: var(--color-ink-2); }
.hero__lede strong { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-alert); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-lg); }
.hero__note { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
/* The four service names sit in the fold. A visitor never scrolls to learn the offer. */
.hero__index { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.hero__index a { gap: var(--space-xs); }
.hero__index a:first-child { color: var(--color-alert); }
.hero__index a { display: inline-flex; align-items: center; min-height: 32px; font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--color-ink-2); white-space: nowrap; border-bottom: 1px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.hero__index a:hover { color: var(--color-signal); border-bottom-color: var(--color-signal); }
.scene-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.motion-toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: var(--space-2xs) var(--space-xs); background: transparent; color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.motion-toggle:hover { color: var(--color-ink); border-color: var(--color-rule-strong); }
.motion-toggle:active { transform: translateY(1px); }
.motion-toggle:disabled { opacity: .55; cursor: not-allowed; }
.motion-toggle__icon { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.motion-toggle[aria-pressed="true"] .motion-toggle__icon { background: var(--color-signal); }
.scene-controls > a { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.scene-controls > a:hover { color: var(--color-signal); }
.chapter-outcomes { margin-block: var(--space-md); max-width: 46ch; }
.chapter-outcomes li { display: flex; gap: var(--space-xs); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-md); color: var(--color-ink-2); }
.chapter-outcomes li::before { content: "+"; flex-shrink: 0; color: var(--color-signal); font-family: var(--font-mono); }
.scene-chapter h2 span { color: var(--color-muted); font-weight: 300; }
.scene-chapter h2 + p { margin-top: var(--space-md); max-width: 46ch; font-size: var(--text-md); }
.scene-chapters { grid-area: 2 / 1; position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: var(--space-lg); width: min(var(--shell), calc(100% - var(--space-xl))); margin-inline: auto; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.scene-chapters a { display: flex; align-items: center; gap: var(--space-2xs); min-height: 44px; font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--color-neutral); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.scene-chapters a:hover { color: var(--color-ink); }
.scene-chapters a[aria-current] { color: var(--color-signal); }
.scene-chapters a > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ---- Proof strip ---- */
.proof-strip { position: relative; background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); padding-block: var(--space-md); }
.proof-grid > div { display: flex; flex-direction: column; gap: var(--space-3xs); }
.proof-grid strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; color: var(--color-ink); }
.proof-grid span { font-size: var(--text-sm); color: var(--color-muted); }

/* ---- Section heads: label above heading, single column. Never side by side. ---- */
.section-head { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 62ch; margin-bottom: var(--space-xl); }
.section-head p { font-size: var(--text-lg); }

/* ---- F1 Bento: irregular spans, hairline borders, no icon tiles ---- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-sm); }
.tile { display: flex; flex-direction: column; padding: var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.tile--wide { grid-column: span 7; }
.tile--narrow { grid-column: span 5; }
.tile--full { grid-column: span 12; }
.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services-grid > .service-pillar { grid-column: auto; min-width: 0; border-top: 3px solid var(--color-signal); }
.services-grid > .tile--frameworks { grid-column: 1 / -1; }
.services-grid > .service-pillar--security { border-top-color: var(--color-alert); }
.service-pillar h3 { max-width: none; font-size: var(--text-2xl); }
.service-pillar__detail { margin-top: var(--space-md); }
.service-pillar__detail h4 { margin-bottom: var(--space-2xs); }
.service-pillar .tile__output { margin-top: auto; padding-top: var(--space-md); }
.service-pillar__detail:last-of-type { margin-bottom: var(--space-lg); }
.service-pillar > .text-link { margin-top: var(--space-md); white-space: normal; line-height: 1.4; }
.service-pillar--security .tile__output strong,.service-pillar--security > .text-link { color: var(--color-alert); }
.tile__category { margin-bottom: var(--space-sm); }
.tile h3 { margin-bottom: var(--space-xs); max-width: 20ch; }
.tile--wide h3 { font-size: var(--text-2xl); }
.tile p { font-size: var(--text-md); max-width: 58ch; }
.tile__output { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.tile__output strong { color: var(--color-signal); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-top: auto; padding-top: var(--space-md); }
.tags span { display: inline-block; padding: var(--space-3xs) var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-3); font: 500 var(--text-xs)/1.4 var(--font-mono); color: var(--color-muted); }
/* The framework strip is a tile, not a logo wall: names only, no borrowed marks. */
.tile--frameworks { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); background: var(--color-paper); }
.tile--frameworks > .micro { flex-shrink: 0; }
.tile--frameworks > div { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---- SOC ---- */
.soc-section { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.soc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: start; }
.soc-copy h2 { margin-bottom: var(--space-md); }
.soc-copy p + p { margin-top: var(--space-sm); }
.soc-copy .button { margin-top: var(--space-lg); }
.soc-workflow { padding: var(--space-lg); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.soc-workflow__head { padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.soc-workflow__head h3 { margin-top: var(--space-2xs); }
.workflow-steps { margin-top: var(--space-md); }
.workflow-steps li { display: flex; gap: var(--space-sm); padding-bottom: var(--space-md); }
.workflow-steps li:last-child { padding-bottom: 0; }
.workflow-steps li > span { display: flex; width: 28px; height: 28px; flex-shrink: 0; align-items: center; justify-content: center; border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); font: 500 var(--text-xs)/1 var(--font-mono); color: var(--color-signal); }
.workflow-steps li:last-child > span { border-color: var(--color-alert); color: var(--color-alert); }
.workflow-steps strong { font-size: var(--text-md); font-weight: 600; }
.workflow-steps p { margin-top: var(--space-3xs); font-size: var(--text-sm); }
.soc-workflow__note { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }

/* ---- Experience ---- */
.experience-grid { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: var(--space-3xl); align-items: start; }
.experience-figure { font-family: var(--font-display); font-size: clamp(5.5rem, 11vw, 9.5rem); font-weight: 300; line-height: .85; letter-spacing: -.06em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.experience-figure > span { color: var(--color-signal); }
.experience-caption { margin-top: var(--space-md); font-size: var(--text-sm); max-width: 26ch; }
.experience-grid h2 { margin-bottom: var(--space-md); }
.experience-grid p + p { margin-top: var(--space-sm); }
.sector-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block: var(--space-lg) var(--space-md); }
.sector-list > span { padding: var(--space-3xs) var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); font: 500 var(--text-xs)/1.5 var(--font-mono); color: var(--color-ink-2); }
.fine-print { font-size: var(--text-xs); line-height: 1.6; color: var(--color-neutral); }

/* ---- Retainer ---- */
.pricing-section { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.pricing-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--space-3xl); align-items: start; }
.retainer { padding: var(--space-lg); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); }
.retainer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.retainer__price { font-family: var(--font-display); font-size: 4rem; font-weight: 500; line-height: 1; letter-spacing: -.05em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.retainer__price > span { display: block; margin-top: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--color-muted); }
.retainer__rate { margin-top: var(--space-sm); font-size: var(--text-md); color: var(--color-ink-2); }
.allocation { margin-block: var(--space-md); padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule); }
.allocation label { display: block; font-size: var(--text-md); font-weight: 600; color: var(--color-ink); }
.allocation #allocation-help { margin-top: var(--space-3xs); font-size: var(--text-sm); }
.allocation input { display: block; width: 100%; min-height: 44px; margin-block: var(--space-2xs); cursor: pointer; accent-color: var(--color-signal); background: transparent; }
.allocation__labels { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.allocation__labels > div { display: flex; flex-direction: column; }
.allocation__labels output { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--color-signal); font-variant-numeric: tabular-nums; }
.allocation__labels > span { color: var(--color-neutral); font-family: var(--font-mono); }
.allocation__labels div > span { font-size: var(--text-sm); color: var(--color-muted); }
.allocation .fine-print { margin-top: var(--space-sm); }
.retainer .button { margin-top: var(--space-xs); }
.retainer__terms { margin-top: var(--space-sm); font-size: var(--text-xs); line-height: 1.6; color: var(--color-neutral); }
.getting-started > h3 { margin-bottom: var(--space-lg); font-size: var(--text-2xl); }
.start-steps li { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); }
.start-steps li > span { flex-shrink: 0; padding-top: 3px; font: 500 var(--text-xs)/1.5 var(--font-mono); color: var(--color-signal); }
.start-steps h4 { margin-bottom: var(--space-3xs); }
.start-steps p { font-size: var(--text-md); }
.starter-example { padding: var(--space-md); background: var(--color-paper-3); border: var(--rule-hair) solid var(--color-rule); border-top: 2px solid var(--color-alert); border-radius: var(--radius-md); }
.starter-example h4 { margin-block: var(--space-2xs) var(--space-3xs); }
.starter-example p { font-size: var(--text-md); }
.starter-example > span:last-child { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

/* ---- FAQ ---- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: var(--space-3xl); align-items: start; }
.faq-grid > div:first-child p { margin-top: var(--space-sm); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq details:first-child { border-top: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); cursor: pointer; font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: 1.4; color: var(--color-ink); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 400; color: var(--color-signal); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--color-signal); }
.faq details p { padding-bottom: var(--space-sm); font-size: var(--text-md); max-width: 68ch; }

/* ---- Contact ---- */
.contact-section { padding-block: var(--space-3xl); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.contact-grid p { margin-top: var(--space-sm); max-width: 48ch; font-size: var(--text-lg); }
.contact-action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.contact-email { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-signal); font-family: var(--font-mono); font-size: var(--text-md); text-decoration: underline; text-underline-offset: 4px; }
.contact-action > span { font: 500 var(--text-xs)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral); }

/* ---- Ft4 · Dense colophon ---- */
.site-footer { padding-block: var(--space-xl) var(--space-lg); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.85; color: var(--color-neutral); }
.colophon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-lg) var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.colophon__mark { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.colophon__mark p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.colophon__log > div { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.colophon__log dt { color: var(--color-signal); text-transform: uppercase; letter-spacing: .08em; }
.colophon__log dd { margin: 0 0 var(--space-2xs); color: var(--color-muted); }
.colophon__log a { color: var(--color-ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong); white-space: nowrap; }
.colophon__log a:hover { color: var(--color-signal); text-decoration-color: var(--color-signal); }
.colophon__log .nav-link-row a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Documents (privacy, investors, 404) ---- */
.mobile-cta { display: none; }
.document-hero { padding-block: var(--space-2xl) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.document-hero .text-link { margin-bottom: var(--space-lg); }
.document-hero h1 { max-width: 18ch; }
.document-hero .hero__lede { max-width: 62ch; }
.document { width: min(var(--shell), calc(100% - var(--space-xl))); margin-inline: auto; padding-block: var(--space-2xl) var(--space-3xl); }
.document > * { max-width: 72ch; }
.document h2 { margin-block: var(--space-xl) var(--space-md); font-size: var(--text-2xl); }
.document h2:first-child { margin-top: 0; }
.document h3 { margin-block: var(--space-lg) var(--space-2xs); font-size: var(--text-lg); }
.document p { margin-block: var(--space-sm); }
.document ul { list-style: disc; padding-left: var(--space-md); color: var(--color-muted); }
.document li { margin-block: var(--space-2xs); padding-left: var(--space-3xs); }
.document a:not(.button) { color: var(--color-signal); text-decoration: underline; text-underline-offset: 3px; }
.document .button { margin-block: var(--space-md); }
.document .fine-print { margin-top: var(--space-lg); }
.notfound { min-height: 72svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-md); padding-block: var(--space-2xl); }

/* ---- Static fallback: WebGL unavailable, or reduced motion. No empty pinned runs. ---- */
.scroll-experience[data-motion="static"] .scroll-stage { position: absolute; inset: 0 0 auto; height: 760px; max-height: calc(100svh - var(--nav-height)); }
.scroll-experience[data-motion="static"] .scene-chapter { padding-block: var(--space-2xl); }
.scroll-experience[data-motion="static"] .scene-chapter--hero { min-height: 760px; padding-block: var(--space-3xl) var(--space-2xl); }
.scroll-experience[data-motion="static"] .scene-chapter--boundary { min-height: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.scroll-experience[data-motion="static"] .scene-chapter--boundary .scene-chapter__copy { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: start; }
.scroll-experience[data-motion="static"] .scene-chapter--boundary .micro,
.scroll-experience[data-motion="static"] .scene-chapter--boundary h2 { grid-column: 1; }
.scroll-experience[data-motion="static"] .scene-chapter--boundary p,
.scroll-experience[data-motion="static"] .scene-chapter--boundary .chapter-outcomes,
.scroll-experience[data-motion="static"] .scene-chapter--boundary .text-link { grid-column: 2; }
.scroll-experience[data-motion="static"] .scene-chapter--boundary h2 + p { margin-top: 0; }
.no-js .motion-toggle { display: none; }

@media (max-width: 68rem) {
  :root { --space-3xl: 72px; }
  .shell,.nav,.scene-chapters { width: calc(100% - var(--space-lg)); }
  .scene-chapter__copy { width: 54%; }
  .scene-visual { width: 42%; }
  .soc-grid,.experience-grid,.pricing-grid,.faq-grid { gap: var(--space-2xl); }
  .tile { padding: var(--space-md); }
}
@media (max-width: 56rem) {
  .soc-grid,.experience-grid,.pricing-grid,.faq-grid,.contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .bento { gap: var(--space-xs); }
  .tile--wide,.tile--narrow,.service-pillar { grid-column: span 12; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .experience-grid { grid-template-columns: minmax(0, 1fr); }
  .colophon { grid-template-columns: minmax(0, 1fr); }
  .scroll-experience[data-motion="static"] .scene-chapter--boundary .scene-chapter__copy { grid-template-columns: minmax(0, 1fr); }
  .scroll-experience[data-motion="static"] .scene-chapter--boundary h2 + p { margin-top: var(--space-md); }
}
@media (max-width: 48rem) {
  :root { --space-3xl: 60px; --space-2xl: 48px; --nav-height: 60px; }
  body { font-size: 16px; }
  .shell,.nav,.scene-chapters,.document { width: calc(100% - var(--space-md)); }
  .document > * { max-width: none; }
  .brand { font-size: 1.25rem; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  /* Phone: the scene owns a pinned band at the top and copy scrolls beneath it.
     Overlapping copy over the canvas hides the scene and clips the readout. */
  .scroll-stage { height: 32svh; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); z-index: 3; }
  .scene-visual { inset: 0 0 22px; width: auto; height: auto; }
  .scene-readout { flex-direction: row; align-items: baseline; gap: var(--space-2xs); bottom: -20px; text-align: left; padding-inline: var(--space-xs); }
  .scene-readout__note { font-size: var(--text-xs); }
  .scene-copy-track { padding-top: calc(32svh + var(--space-lg)); }
  .scene-chapter { align-items: flex-start; padding-block: 0 var(--space-2xl); }
  .scene-chapter--hero { min-height: auto; }
  .scene-chapter--boundary { min-height: auto; padding-top: var(--space-xl); }
  .scene-chapter__copy { width: 100%; max-width: 100%; }
  .scene-chapters { gap: var(--space-md); }
  .scroll-experience[data-motion="static"] .scroll-stage { position: absolute; height: 32svh; z-index: 3; }
  .scroll-experience[data-motion="static"] .scene-chapter--hero { min-height: 0; padding-block: 0 var(--space-2xl); }
  .site-footer { padding-bottom: 96px; }
  .mobile-cta { display: block; position: fixed; inset: auto 0 0; z-index: var(--z-sticky); padding: var(--space-2xs) var(--space-sm) max(var(--space-2xs), env(safe-area-inset-bottom)); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule); transform: translateY(120%); visibility: hidden; transition: transform var(--dur-mid) var(--ease-out), visibility var(--dur-mid) var(--ease-out); }
  .mobile-cta.is-visible { transform: translateY(0); visibility: visible; }
  .mobile-cta .button { width: 100%; }
  .document-hero h1,.notfound h1 { font-size: var(--text-display-s); }
}
@media (max-width: 26rem) {
  /* Small phones: the headline must not run to five lines and the nav must not crowd. */
  :root { --text-display: 2.05rem; --nav-height: 56px; }
  .hero__status { flex-wrap: wrap; }
  .nav { gap: var(--space-2xs); }
  .nav-toggle__label { display: none; }
  .nav-toggle { padding-inline: var(--space-2xs); }
  .button--small { padding-inline: var(--space-xs); font-size: .78rem; gap: var(--space-2xs); }
  .brand { font-size: 1.16rem; }
  .scroll-stage { height: 27svh; }
  .scene-copy-track { padding-top: calc(27svh + var(--space-md)); }
  .scroll-experience[data-motion="static"] .scroll-stage { height: 27svh; }
  .scene-readout__note { display: none; }
  .tile { padding: var(--space-sm); }
}
@media (max-height: 640px) and (min-width: 48rem) {
  .scene-chapter--hero { min-height: 720px; }
  .scene-chapter__copy { width: 58%; }
  .scene-visual { width: 38%; }
  .scene-readout { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  :focus-visible { transition: none !important; }
}
@media print {
  :root { --color-paper: #fff; --color-paper-2: #fff; --color-paper-3: #fff; --color-ink: #000; --color-ink-2: #222; --color-muted: #333; --color-neutral: #555; --color-rule: #bbb; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header,.mobile-cta,.hero__actions,.contact-section,.allocation input,.scroll-stage,.scene-chapters { display: none; }
  .shell,.document { width: 100%; }
  .section,.soc-section,.contact-section { padding-block: var(--space-md); }
  .scene-chapter,.scene-chapter--hero,.scene-chapter--boundary { min-height: 0; padding: var(--space-sm) 0; }
  .scene-chapter__copy { width: 100%; max-width: none; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile,.retainer,.soc-workflow { break-inside: avoid; }
}