/* FACTORY SKULL STYLESHEET. Map of layers, top to bottom (later sections override earlier ones by design):
     1  Fonts                 self-hosted @font-face
     2  PALETTE               every colour token, dark default, light override   <- change colours here only
     3  Base and type         reset, focus, wrap, headings, links
     4  Components            buttons, tools, header, services menu
     5  Home sections         hero, proof, statement, disciplines, diagnostic, method, experience, founder, faq, close, footer
     6  Inner pages           page openers, service sections, prose, related
     7  Overlays              menu, search palette, brief sheet, toast
     8  Motion                reveals, split headings
     9  Responsive            breakpoints for everything above
    10  Features              scroll ring, receipt, health check, stack, founder card, two ways in, algorithm block, stack openers
    11  Without JavaScript    progressive-enhancement fallbacks
    12  Print
    13  GRIT                  brand type, keycaps, rocker, grain, grooves, HUD brackets, gauge ring, footer wordmark
    14  Late refinements      dropdown, scan readout, page openers that fit one screen
   When you change a component, edit it in the section that owns it. Do not append fixes to the end.
   Full guide: docs/HANDOVER.md */
/* Self-hosted variable fonts (latin). Served from this site, no third-party requests. */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Local fallbacks measured against the web fonts, with matching vertical metrics,
   so text set before the web fonts arrive does not move when they swap in. The bold Archivo fallback is
   scaled for buttons and headings near 105 to 108% width (vertical overrides divided by the same scale); the hero headline (800 at 112%) has its own face, 15.7% wider. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"); font-weight: 100 549; size-adjust: 100%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 550 900; size-adjust: 108%; ascent-override: 81.5%; descent-override: 19.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Hero Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 550 900; size-adjust: 115.7%; ascent-override: 76.1%; descent-override: 18.2%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans"); font-weight: 100 549; size-adjust: 99.3%; ascent-override: 100%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); font-weight: 550 900; size-adjust: 99.3%; ascent-override: 100%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
/* Factory Skull. Tokens, base, components, sections, overlays, motion. */

/* ======================================================================
   PALETTE. Every colour on the site comes from this block.
   Dark is the default. Light overrides it. Nothing below uses a raw hex value
   except print styles and error red.
   ====================================================================== */
:root {
  /* Shared ramps. Both themes are built from these two scales, mirrored:
     night reads light steps on dark steps, day reads dark steps on light steps.
     The copper fill (400) is identical in both themes; only copper used as
     text or a thin line moves along the ramp to keep AA contrast. */
  --graphite-950: #0e1214;
  --graphite-900: #141a1d;
  --graphite-850: #1c2428;
  --graphite-700: #475257;
  --graphite-500: #6b777c;
  --graphite-400: #93a0a6;
  --graphite-200: #d6dddf;
  --graphite-100: #e5e9ea;
  --graphite-50: #f1f4f4;
  --ink: #0f1518;
  --paper: #e7eaeb;
  --copper-200: #f6d3b4;
  --copper-300: #f0b286;
  --copper-400: #e39a63;
  --copper-500: #c27440;
  --copper-600: #a05c2d;
  --copper-700: #944a18;
  --copper-950: #1c0f05;

  color-scheme: dark;
  /* surfaces and text */
  --bg: var(--graphite-950);
  --bg-2: var(--graphite-900);
  --bg-3: var(--graphite-850);
  --text: var(--paper);
  --soft: var(--graphite-400);
  /* the one accent: a fill that is the same in both themes, and its ink for text and lines */
  --signal: var(--copper-400);
  --on-signal: var(--copper-950);
  --accent-ink: var(--copper-400);
  --focus: var(--copper-300);
  /* soft drop shadow under raised controls and panels */
  --drop: rgba(0, 0, 0, 0.7);
  /* hero network nodes: four tones of the accent family, hex only (the script appends alpha) */
  --node-1: #e39a63;
  --node-2: #f6d3b4;
  --node-3: #c27440;
  --node-4: #e7eaeb;
  /* hero skull: silhouette fill, unlit tone and scan line, hex only */
  --hero-sil: #93a0a6;
  --hero-sil-alpha: 0.13;
  --hero-dim: #93a0a6;
  --hero-scan: #e39a63;
  --hero-core: #ffffff;
  /* forge hero: drafting line, copper plate, its shade, molten front, sheen and shadow, hex only */
  --forge-line: #93a0a6;
  --forge-metal: #e39a63;
  --forge-deep: #a05c2d;
  --forge-hot: #fbe3cc;
  --forge-shine: #fff6ee;
  --forge-shadow: #000000;
  --hero-grid: color-mix(in srgb, var(--text) 13%, transparent);
  /* fixed surfaces that stay the same in both themes */
  --c-ink: #0e1214;          /* dark ink on accent and on light plates */
  --c-paper: #e7eaeb;        /* light text on dark tiles */
  --c-plate: #eff2f2;        /* light plates: marquee band, receipt, logo tiles */
  --c-plate-soft: #4b5659;   /* secondary text on a plate */
  --c-dark: #11171a;         /* dark tiles */
  --c-dark-soft: #9aa7ad;    /* secondary text on a dark tile */
  /* hover fill for buttons */
  --hover-fill: #e7eaeb;
  --hover-ink: #0e1214;
  /* hairlines are derived from the text colour, so they follow any palette */
  --line: color-mix(in srgb, var(--text) 14%, transparent);
  --line-2: color-mix(in srgb, var(--text) 30%, transparent);
  --line-ui: color-mix(in srgb, var(--text) 40%, transparent); /* form control borders, 3:1 or better */
  --dot: color-mix(in srgb, var(--text) 9%, transparent);

  /* Archivo is the brand face: wide and heavy for the name, semi-wide for headings. Hanken carries reading text. */
  --f-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", "Hanken Fallback", system-ui, sans-serif;
  --f-brand: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --gutter: clamp(20px, 4.2vw, 64px);
  --maxw: 1440px;
  --nav-h: 76px;
  --sec: clamp(88px, 12vw, 176px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-progress: 60;
  --z-nav: 50;
  --z-overlay: 100;
}

[data-theme="light"] {
  /* the same design as night, mirrored along the ramps */
  color-scheme: light;
  --bg: var(--graphite-100);
  --bg-2: var(--graphite-50);
  --bg-3: var(--graphite-200);
  --text: var(--ink);
  --soft: var(--graphite-700);
  --accent-ink: var(--copper-700);
  --focus: var(--copper-700);
  --drop: color-mix(in srgb, var(--ink) 28%, transparent);
  --node-1: #c27440;
  --node-2: #944a18;
  --node-3: #a05c2d;
  --node-4: #6f3510;
  --hero-sil: #0f1518;
  --hero-sil-alpha: 0.07;
  --hero-dim: #6b777c;
  --hero-scan: #944a18;
  --hero-core: #fbe9da;
  --forge-line: #475257;
  --forge-metal: #e39a63;
  --forge-deep: #944a18;
  --forge-hot: #f6d3b4;
  --forge-shine: #ffffff;
  --forge-shadow: #0f1518;
  --hero-grid: color-mix(in srgb, var(--text) 15%, transparent);
  --hover-fill: #0f1518;
  --hover-ink: #e7eaeb;
  --line: color-mix(in srgb, var(--text) 16%, transparent);
  --line-2: color-mix(in srgb, var(--text) 38%, transparent);
  --line-ui: color-mix(in srgb, var(--text) 50%, transparent);
  --dot: color-mix(in srgb, var(--text) 10%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-width: none; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
html.lock { overflow: hidden; scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--signal); color: var(--on-signal); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--signal); color: var(--on-signal); padding: 10px 16px; font-weight: 600; transition: top 0.2s; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- type */
.h2, .h3, .hero__h1, .phero__h1, .close__h, .statement__p { font-family: var(--f-display); font-stretch: 108%; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.h2 { font-size: clamp(2.2rem, 1.1rem + 4.2vw, 5rem); line-height: 0.98; }
.h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); line-height: 1.05; letter-spacing: -0.025em; }
.lead { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); line-height: 1.5; color: var(--soft); max-width: 58ch; margin-top: 1.4rem; text-wrap: pretty; }
.label { font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.sec { padding-block: var(--sec); }

.link { display: inline-flex; gap: 0.5em; align-items: center; font: 600 0.9rem/1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 0.5s var(--ease), color 0.3s; }
.link:hover { background-size: 0% 1px; background-position: 100% 100%; color: var(--accent, var(--signal)); }
.link span { transition: transform 0.4s var(--ease); }
.link:hover span { transform: translateX(4px); }
[data-theme="light"] .link:hover { color: var(--focus); }

/* ------------------------------------------------------------- buttons */
.btn {
  --x: 50%; --y: 50%; --fill: var(--hover-fill); --ink: var(--hover-ink);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8em;
  padding: 1.05em 1.5em; min-height: 48px;
  font: 600 0.82rem/1 var(--f-display); font-stretch: 105%; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--text); transition: color 0.35s var(--ease), transform 0.2s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); clip-path: circle(0 at var(--x) var(--y)); transition: clip-path 0.6s var(--ease); }
.btn:focus-visible::before { clip-path: circle(150% at var(--x) var(--y)); }
.btn:focus-visible { color: var(--ink); }
@media (hover: hover) {
  .btn:hover::before { clip-path: circle(150% at var(--x) var(--y)); }
  .btn:hover { color: var(--ink); }
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn b { font-weight: 500; transition: transform 0.4s var(--ease); }
.btn:hover b { transform: translateX(4px); }
.btn--solid { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.btn--ghost { background: transparent; border-color: var(--line-2); }
.btn--dark { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); --fill: var(--c-paper); --ink: var(--c-ink); }

.tool { display: inline-flex; align-items: center; gap: 0.6em; min-height: 40px; padding: 0 0.9em; font: 500 0.78rem/1 var(--f-mono); letter-spacing: 0.06em; color: var(--soft); border: 1px solid var(--line); transition: color 0.25s, border-color 0.25s, background 0.25s; }
.tool:hover { color: var(--text); border-color: var(--line-2); }
kbd { font: 500 0.68rem/1 var(--f-mono); padding: 4px 6px; border: 1px solid var(--line-2); color: var(--soft); }

/* -------------------------------------------------------------- header */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center; gap: clamp(14px, 2.4vw, 40px); padding-inline: var(--gutter); border-bottom: 1px solid transparent; transition: background 0.4s var(--ease), border-color 0.4s; }
.hdr.is-solid { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; font: 700 0.86rem/1.05 var(--f-display); font-stretch: 112%; letter-spacing: 0.16em; text-transform: uppercase; flex: none; }
.brand img { height: 50px; width: auto; object-fit: contain; }
[data-theme="light"] .brand img { filter: invert(1); }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); margin-left: auto; }
.nav > a, .nav__btn { position: relative; font-size: 0.92rem; text-decoration: none; padding: 6px 0; color: var(--soft); transition: color 0.25s; background: linear-gradient(var(--signal), var(--signal)) 0 100% / 0 1px no-repeat; transition: color 0.25s, background-size 0.45s var(--ease); }
[data-theme="light"] .nav > a, [data-theme="light"] .nav__btn { background-image: linear-gradient(var(--focus), var(--focus)); }
.nav > a:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { color: var(--text); background-size: 100% 1px; }
.nav__has { position: relative; }
.dd { position: absolute; top: calc(100% + 18px); left: -20px; width: 360px; padding: 8px; background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.dd[hidden] { display: none; }
.dd a { display: grid; gap: 2px; padding: 14px 16px; background: none; color: var(--text); transition: background 0.25s; }
.dd a:hover { background: var(--bg-3); }
.dd b { font: 600 1rem/1.2 var(--f-display); }
.dd span { font-size: 0.82rem; color: var(--soft); }
.hdr__tools { display: flex; align-items: center; gap: 10px; flex: none; }
.tool--theme i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform 0.5s var(--ease); }
.tool--theme:hover i { transform: rotate(180deg); }
.tool--theme { padding: 0 12px; }
.tool--menu { display: none; }
.tool--menu i { width: 16px; height: 8px; border-block: 1.5px solid currentColor; }
.hdr__cta { min-height: 40px; padding: 0.85em 1.2em; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; height: 240vh; }
.hero__stage { position: sticky; top: 0; height: 100dvh; min-height: 640px; overflow: hidden; display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(28px, 5vh, 56px);
  /* the shop floor: one fine dot grid across the whole hero, the same 16px pitch as the drafting grid */
  background-color: var(--bg); background-image: radial-gradient(circle, var(--hero-grid) 0.9px, transparent 1.3px); background-size: 16px 16px; background-position: 8px 8px; }
.hero__canvas { position: absolute; top: var(--nav-h); right: 0; width: min(56vw, 860px); height: calc(100% - var(--nav-h)); pointer-events: none; }
.hero__labels { position: absolute; right: 20px; top: 0; z-index: 3; width: 120px; height: 100%; pointer-events: none; visibility: hidden; }
.hero__labels.is-placed { visibility: visible; }
.hero__labels li { position: absolute; right: 0; display: flex; align-items: center; gap: 12px; flex-direction: row-reverse; opacity: 0.55; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transform: translateX(8px); }
.hero__labels li.is-on { opacity: 1; transform: none; }
.hero__labels a { pointer-events: auto; font: 600 0.8rem/1 var(--f-display); font-stretch: 110%; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 8px 0; }
.hero__labels li::after { content: ""; width: 30px; height: 1px; background: currentColor; transform-origin: right; transform: scaleX(0.4); transition: transform 0.6s var(--ease), background 0.4s; }
.hero__labels li.is-on::after { transform: scaleX(1); background: var(--accent-ink); }
.hero__copy { position: relative; z-index: 4; max-width: min(960px, 58vw); }
.hero__eyebrow { color: var(--accent-ink); }
.hero__h1 { font-size: clamp(2.2rem, 0.8rem + 3.2vw, 4.4rem); line-height: 0.94; margin-top: 1.2rem; font-family: "Archivo", "Archivo Hero Fallback", system-ui, sans-serif; font-weight: 800; font-stretch: 112%; letter-spacing: -0.04em; word-spacing: 0.06em; }
/* the headline warms word by word from the page text into copper toward the promise */
.hero__h1 .w > span { color: color-mix(in oklab, var(--text), var(--accent-ink) calc(min(1, max(0, var(--wi) - 2) / 6) * 100%)); }
.hero__sub { margin-top: 1.5rem; max-width: 46ch; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); color: var(--soft); line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ---------------------------------------------------------------- proof */
.proof { display: flex; align-items: center; border-block: 1px solid var(--line); background: var(--c-plate); overflow: hidden; }
.proof__label { flex: none; padding: 0 var(--gutter); font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-paper); background: var(--c-dark); align-self: stretch; display: flex; align-items: center; }
.marq { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marq__track { display: flex; width: max-content; animation: marq 36s linear infinite; }
.marq__track ul { display: flex; align-items: center; gap: clamp(56px, 8vw, 120px); padding: 28px clamp(28px, 4vw, 60px); }
.marq__track img { height: 40px; width: auto; max-width: 170px; object-fit: contain; }
.marq__track img.lg--dark { display: none; }
.marq:hover .marq__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ statement */
.statement__p { font-size: clamp(1.7rem, 0.9rem + 2.9vw, 3.6rem); line-height: 1.1; font-weight: 500; max-width: 26em; letter-spacing: -0.03em; text-wrap: pretty; }
.statement mark { background: linear-gradient(var(--signal), var(--signal)) 0 92% / 0 0.14em no-repeat; color: inherit; transition: background-size 1.1s var(--ease) 0.4s; padding-bottom: 0.05em; }
.statement .in mark, .statement mark.in { background-size: 100% 0.14em; }
[data-theme="light"] .statement mark { background-image: linear-gradient(var(--focus), var(--focus)); }

/* ------------------------------------------------------------ disciplines */
.disc__tabs { display: flex; flex-direction: column; align-self: start; position: sticky; top: calc(var(--nav-h) + 40px); border-bottom: 1px solid var(--line); }
.disc__tab { position: relative; text-align: left; padding: 1.1rem 0 1.1rem 0; border-top: 1px solid var(--line); font: 600 clamp(1.7rem, 1rem + 2.4vw, 3.2rem)/1 var(--f-display); font-stretch: 108%; letter-spacing: -0.03em; color: var(--soft); transition: color 0.3s, padding-left 0.5s var(--ease); }
.disc__tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); }
.disc__tab:hover { color: var(--text); }
.disc__tab[aria-selected="true"] { color: var(--text); padding-left: 1.2rem; }
.disc__tab[aria-selected="true"]::before { transform: scaleY(1); }
[data-theme="light"] .disc__tab::before { background: var(--focus); }
.disc__panel { animation: panelIn 0.7s var(--ease) both; }
.disc__panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px); } }
.disc__lead { font: 500 clamp(1.3rem, 1rem + 1.2vw, 2rem)/1.2 var(--f-display); letter-spacing: -0.02em; max-width: 24em; }
.disc__list { margin-top: 2.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.4rem; }
.disc__list li { display: grid; gap: 6px; padding-top: 1rem; border-top: 1px solid var(--line); }
.disc__list b { font: 600 1.02rem/1.25 var(--f-display); }
.disc__list span { color: var(--soft); font-size: 0.95rem; line-height: 1.5; }
.disc__when { margin-top: 2.2rem; color: var(--soft); max-width: 52ch; }
.disc__when b { color: var(--text); font-weight: 600; margin-right: 0.4em; }
.disc__panel .link { margin-top: 2rem; }
.stack { margin: 0; width: 100%; --e: 1; }

/* the disciplines console: selector, system stack and detail in one framed instrument */
.disc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.2rem 4rem; margin-bottom: clamp(28px, 4vw, 52px); }
.disc-head .h2 { max-width: 13em; }
.disc-head .lead { margin: 0; max-width: 40ch; }
.console { position: relative; display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(180px, 0.7fr) minmax(0, 1.75fr); width: min(100%, 1240px); margin-inline: auto; border: 1px solid var(--line-2); background: var(--bg-2); }
.console > * { min-width: 0; }
.console .disc__tabs { position: static; display: flex; flex-direction: column; align-self: stretch; margin: 0; border: 0; border-right: 1px solid var(--line); }
.console .disc__tab { flex: 1; display: grid; align-content: center; gap: 6px; padding: 1rem 1.25rem; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--soft); transition: background 0.25s, color 0.25s; }
.console .disc__tab:last-child { border-bottom: 0; }
.console .disc__tab[aria-selected="true"] { padding-left: 1.25rem; background: var(--bg); color: var(--text); }
.console .disc__tab:hover { color: var(--text); }
.disc__tabn { font: 600 1.2rem/1.15 var(--f-display); letter-spacing: -0.025em; }
.disc__tabsub { font-size: 0.82rem; line-height: 1.45; color: var(--soft); }
.console__stack { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.25rem 0.8rem; border-right: 1px solid var(--line); }
.console__stack::before { content: ""; position: absolute; inset: 12% 4%; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 16px 16px;
  mask-image: radial-gradient(ellipse, var(--text) 15%, transparent 72%); }
.console__stack .stack__svg { position: relative; max-width: 300px; }
/* in the console the stack assembles once when it comes into view, then holds still */
.console__stack, .console__stack.rv { animation: none; --e: 0; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), --e 1.6s var(--ease) 0.25s; }
.console__stack.in { --e: 1; }
@media (prefers-reduced-motion: reduce) { .console__stack, .console__stack.rv { --e: 1; transition: none; } }
.console .disc__panels { display: grid; padding: clamp(24px, 2.2vw, 34px); align-self: center; }
.console .disc__panel { grid-area: 1 / 1; align-self: center; }
.console .disc__panel[hidden] { display: block; visibility: hidden; animation: none; }
.console .disc__lead { font-size: clamp(1.3rem, 1rem + 0.6vw, 1.65rem); line-height: 1.2; max-width: 24em; text-wrap: balance; }
.console .disc__list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 1.25rem; }
.console .disc__list li { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 1rem; padding: 0.7rem 0; }
.console .disc__list b { font-size: 0.94rem; }
.console .disc__list span { font-size: 0.88rem; }
.console .disc__list li:last-child { border-bottom: 1px solid var(--line); }
.console .disc__when { margin-top: 1.4rem; }
.console .disc__panel .link { margin-top: 1.2rem; }
@media (max-width: 1180px) {
  .console { grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.6fr); }
  .console__stack { display: none; }
}
@media (max-width: 900px) {
  .console { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .console .disc__tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; border-right: 0; border-bottom: 1px solid var(--line); }
  .console .disc__tab { flex: none; padding: 0.95rem 1.15rem; border-bottom: 0; border-right: 1px solid var(--line); scroll-snap-align: start; }
  .console .disc__tab[aria-selected="true"] { padding-left: 1.15rem; }
  .disc__tabn { font-size: 1.1rem; }
  .disc__tabsub { display: none; }
  .console .disc__list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 640px) {
  .console .disc__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: visible; }
  .console .disc__tab { padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--line); }
  .console .disc__tab:nth-child(even) { border-right: 0; }
  .console .disc__tab:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* ----------------------------------------------------------- diagnostic */
.diag-sec { background-color: var(--bg-2); border-block: 1px solid var(--line); background-image: radial-gradient(var(--dot) 1.3px, transparent 1.6px); background-size: 14px 14px; }
.diag-sec .wrap { position: relative; }
/* two columns: the heading and a live readout of the scoring on the left, the question on the right */
.diag { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.55fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.diag__side { position: sticky; top: calc(var(--nav-h) + 32px); }
.diag__body { min-height: 450px; padding-top: 0.6rem; }
.diag__read { position: relative; margin-top: clamp(28px, 3.4vw, 48px); padding: 20px 22px 22px; border: 1px solid var(--line-2); background: var(--bg); display: grid; gap: 14px; }
.diag__readhead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.diag__count { font: 800 1.5rem/1 var(--f-brand); font-stretch: 118%; letter-spacing: 0.02em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.diag__meter { display: grid; grid-template-columns: 96px minmax(0, 1fr) 22px; align-items: center; gap: 12px; }
.diag__meter b { font: 700 0.78rem/1 var(--f-brand); font-stretch: 112%; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); transition: color 0.3s; }
.diag__meter span { position: relative; height: 8px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 12px); }
.diag__meter i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--accent-ink) 0 10px, transparent 10px 12px); clip-path: inset(0 calc((1 - var(--v, 0)) * 100%) 0 0); transition: clip-path 0.7s var(--ease); }
.diag__meter em { font: 500 0.78rem/1 var(--f-mono); font-style: normal; text-align: right; color: var(--soft); font-variant-numeric: tabular-nums; }
.diag__meter.is-lead b, .diag__meter.is-lead em { color: var(--text); }
@media (max-width: 900px) {
  .diag { grid-template-columns: minmax(0, 1fr); }
  .diag__side { position: static; }
  .diag__read { grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .diag__readhead { grid-column: 1 / -1; }
  .diag__meter { grid-template-columns: minmax(0, 1fr) 22px; }
  .diag__meter span { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) { .diag__body { min-height: 720px; } .diag__opt { min-height: 0; padding-block: 1rem; } }
.diag__steps { display: flex; gap: 6px; margin-bottom: 2rem; }
.diag__steps i { flex: 1; height: 3px; background: var(--line-2); transition: background 0.5s var(--ease); }
.diag__steps i.is-done { background: var(--signal); }
[data-theme="light"] .diag__steps i.is-done { background: var(--focus); }
.diag__q { font: 700 clamp(1.5rem, 1rem + 1.5vw, 2.4rem)/1.1 var(--f-display); font-stretch: 106%; letter-spacing: -0.03em; margin-bottom: 1.8rem; animation: panelIn 0.6s var(--ease) both; }
.diag__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diag__opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; text-align: left; padding: 1.25rem 1.4rem 1.35rem; min-height: 96px; border: 1px solid var(--line-2); background: var(--bg); font-size: 1.05rem; line-height: 1.35; transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease); animation: panelIn 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.diag__opt:hover { border-color: var(--signal); transform: translateY(-3px); }
[data-theme="light"] .diag__opt:hover { border-color: var(--focus); }
.diag__opt kbd { position: static; margin-top: 1px; }
.diag__opt::after { content: "92"; position: absolute; right: 16px; bottom: 12px; color: var(--accent-ink); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.4s var(--ease); }
.diag__opt:hover::after, .diag__opt:focus-visible::after { opacity: 1; transform: none; }
.diag__back { margin-top: 1.4rem; font: 500 0.8rem/1 var(--f-mono); color: var(--soft); letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 4px; }
.diag__back:hover { color: var(--text); }
.diag__result { animation: panelIn 0.7s var(--ease) both; }
.diag__result h3 { font: 600 clamp(2rem, 1rem + 3.4vw, 4.2rem)/1 var(--f-display); font-stretch: 108%; letter-spacing: -0.035em; }
.diag__result h3 em { font-style: normal; color: var(--signal); }
[data-theme="light"] .diag__result h3 em { color: var(--focus); }
.diag__result p { margin-top: 1.2rem; max-width: 56ch; color: var(--soft); font-size: 1.1rem; }
.diag__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --------------------------------------------------------------- method */
.method__list { margin-top: clamp(40px, 6vw, 88px); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.method__list::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.step { position: relative; padding: 2.4rem 2rem 0 0; }
.step::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) calc(var(--i, 0) * 0.28s + 0.2s); }
.step.in::before { transform: scaleX(1); }
[data-theme="light"] .step::before { background: var(--focus); }
.step__n { font: 500 0.78rem/1 var(--f-mono); color: var(--soft); letter-spacing: 0.1em; }
.step h3 { margin-top: 1.4rem; font: 600 clamp(1.8rem, 1rem + 2.3vw, 3.2rem)/1 var(--f-display); font-stretch: 108%; letter-spacing: -0.035em; }
.step p { margin-top: 1.1rem; color: var(--soft); max-width: 30ch; }

/* ----------------------------------------------------------- experience */
.xp__grid { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(250px, auto); gap: 12px; }
.xp__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(22px, 2.6vw, 38px); border: 1px solid var(--line); min-height: 250px; isolation: isolate; }
.xp__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--signal) 16%, transparent), transparent 60%); opacity: 0; transition: opacity 0.4s; }
.xp__tile:hover::after { opacity: 1; }
.xp__logo { height: 54px; width: auto; max-width: 230px; object-fit: contain; align-self: flex-start; transition: transform 0.6s var(--ease); }
.xp__tile:hover .xp__logo { transform: scale(1.05); }
.xp__text h3 { font: 600 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -0.025em; }
.xp__text p { margin-top: 0.6rem; max-width: 34ch; font-size: 0.98rem; line-height: 1.45; }

/* -------------------------------------------------------------- founder */
.founder { background: var(--bg-2); border-block: 1px solid var(--line); }

/* ------------------------------------------------------------------ faq */
.faq__grid { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: clamp(28px, 6vw, 110px); align-items: start; }
.faq__h { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font: 600 clamp(1.1rem, 1rem + 0.5vw, 1.45rem)/1.25 var(--f-display); letter-spacing: -0.02em; transition: color 0.25s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--signal); }
[data-theme="light"] .faq__item summary:hover { color: var(--focus); }
.faq__item summary i { flex: none; position: relative; width: 16px; height: 16px; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform 0.45s var(--ease); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0); }
.faq__a { padding: 0 3rem 1.6rem 0; color: var(--soft); max-width: 60ch; animation: panelIn 0.5s var(--ease) both; }

/* ---------------------------------------------------------------- close */
.close { background: var(--signal); color: var(--c-ink); padding-block: clamp(96px, 13vw, 200px); position: relative; overflow: hidden; }
.close::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--c-ink) 14%, transparent) 1.4px, transparent 1.8px); background-size: 14px 14px; mask-image: linear-gradient(100deg, transparent 30%, #000); pointer-events: none; }
.close__in { position: relative; }
.close__h { font-size: clamp(2.6rem, 1rem + 6.6vw, 7.5rem); line-height: 0.94; max-width: 12em; }
.close__p { margin-top: 1.6rem; max-width: 40ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: color-mix(in srgb, var(--c-ink) 78%, transparent); }
.close__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.close__mail { font: 600 1rem/1 var(--f-display); letter-spacing: 0.02em; text-decoration: none; padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 0.5s var(--ease); }
.close__mail:hover { background-size: 0 1px; background-position: 100% 100%; }
.close--page { padding-block: clamp(72px, 9vw, 140px); }

/* --------------------------------------------------------------- footer */
.ftr { background: var(--bg-2); border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 100px); overflow: hidden; }
.ftr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ftr__col { display: grid; gap: 0.7rem; align-content: start; }
.ftr__h { font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin-bottom: 0.6rem; }
.ftr__col a, .ftr__link { justify-self: start; text-decoration: none; color: var(--text); transition: color 0.25s; background: none; }
.ftr__col a:hover, .ftr__link:hover { color: var(--signal); }
[data-theme="light"] .ftr__col a:hover, [data-theme="light"] .ftr__link:hover { color: var(--focus); }
.ftr__note { color: var(--soft); font-size: 0.92rem; margin-top: 0.4rem; }
.ftr__word { margin: clamp(40px, 6vw, 90px) 0 0; font: 800 clamp(2.4rem, 9vw, 11.5rem)/0.82 var(--f-display); font-stretch: 125%; letter-spacing: -0.045em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--line-2); text-align: center; user-select: none; transition: -webkit-text-stroke-color 0.6s; }
.ftr:hover .ftr__word { -webkit-text-stroke-color: var(--signal); }
.ftr__base { display: flex; justify-content: space-between; padding-block: 1.6rem 2rem; color: var(--soft); font-size: 0.85rem; border-top: 1px solid var(--line); margin-top: 1.4rem; }

/* ----------------------------------------------------------- inner pages */
.page { padding-top: var(--nav-h); }
.phero { padding-block: clamp(56px, 8vw, 120px) clamp(48px, 6vw, 88px); }
.crumbs { display: flex; gap: 0.7em; font: 500 0.78rem/1 var(--f-mono); color: var(--soft); letter-spacing: 0.06em; margin-bottom: clamp(28px, 4vw, 56px); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.phero__h1 { font-size: clamp(2.4rem, 1rem + 5.2vw, 6rem); line-height: 0.98; max-width: 15em; }
.phero__lead { margin-top: 1.8rem; max-width: 56ch; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--soft); line-height: 1.5; }
.phero__cta { margin-top: 2.4rem; display: flex; gap: 12px; flex-wrap: wrap; }
.psec { padding-block: clamp(56px, 8vw, 112px); border-top: 1px solid var(--line); }
.psec--alt { background: var(--bg-2); }
.pgrid { display: grid; grid-template-columns: 0.7fr 1.5fr; gap: clamp(24px, 6vw, 96px); align-items: start; }
.pgrid__h { position: sticky; top: calc(var(--nav-h) + 32px); }
.triggers li { padding: 1.3rem 0; border-top: 1px solid var(--line); font: 500 clamp(1.2rem, 1rem + 0.9vw, 1.8rem)/1.25 var(--f-display); letter-spacing: -0.02em; }
.triggers li:last-child { border-bottom: 1px solid var(--line); }
.deliv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deliv li { padding: 1.6rem; border: 1px solid var(--line); background: var(--bg); transition: border-color 0.3s, transform 0.5s var(--ease); }
.deliv li:hover { border-color: var(--signal); transform: translateY(-3px); }
[data-theme="light"] .deliv li:hover { border-color: var(--focus); }
.deliv li:first-child { grid-column: 1 / -1; background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.deliv li:first-child p { color: color-mix(in srgb, var(--on-signal) 78%, transparent); }
.deliv h3 { font: 600 1.25rem/1.15 var(--f-display); letter-spacing: -0.02em; }
.deliv p { margin-top: 0.6rem; color: var(--soft); font-size: 0.98rem; line-height: 1.5; }
/* pricing page: one row per service, the range large, what it covers and what moves it beside it */
.price__basis { max-width: 62ch; color: var(--soft); font-size: 1.1rem; line-height: 1.5; margin-bottom: clamp(24px, 3vw, 44px); }
.price { display: grid; }
.price__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(20px, 5vw, 80px); padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--line); }
.price__row:last-child { border-bottom: 1px solid var(--line); }
.price__head h3 { font: 600 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -0.025em; }
.price__r { margin-top: 0.9rem; font: 800 clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem)/1.05 var(--f-brand); font-stretch: 112%; letter-spacing: -0.03em; color: var(--accent-ink); }
.price__r small { display: block; margin-top: 0.4rem; font: 500 0.78rem/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.price__body p { color: var(--soft); line-height: 1.5; max-width: 56ch; }
.price__mh { margin-top: 1.2rem; font: 600 0.74rem/1 var(--f-brand); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text) !important; }
.price__body ul { margin: 0.6rem 0 1.2rem; display: grid; gap: 0.35rem; }
.price__body li { position: relative; padding-left: 1.1rem; color: var(--soft); font-size: 0.96rem; line-height: 1.45; }
.price__body li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--accent-ink); }
@media (max-width: 800px) { .price__row { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
/* the short version on each service page */
.cost { display: grid; }
.cost li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1.5rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.cost li:last-child { border-bottom: 1px solid var(--line); }
.cost b { font: 600 clamp(1.1rem, 1rem + 0.5vw, 1.4rem)/1.2 var(--f-display); letter-spacing: -0.02em; }
.cost__r { font: 800 clamp(1.15rem, 1rem + 0.7vw, 1.6rem)/1.1 var(--f-brand); font-stretch: 112%; letter-spacing: -0.02em; color: var(--accent-ink); }
.cost__r small { margin-left: 0.5em; font: 500 0.74rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.cost__note { margin-top: 1.2rem; color: var(--soft); font-size: 0.95rem; }
.cost__note .link { margin-left: 0.6rem; }
/* case studies: published only when approved by the client */
.case__p { max-width: 62ch; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); line-height: 1.5; }
.case__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; }
.case__tags a { display: inline-block; padding: 0.4em 0.8em; border: 1px solid var(--line-2); font: 500 0.78rem/1 var(--f-mono); letter-spacing: 0.06em; text-decoration: none; transition: border-color 0.3s, color 0.3s; }
.case__tags a:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.case__out { display: grid; gap: 1.2rem; }
.case__out li { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.case__out b { display: block; font: 600 clamp(1.2rem, 1rem + 0.8vw, 1.7rem)/1.25 var(--f-display); letter-spacing: -0.02em; }
.case__out small { display: block; margin-top: 0.5rem; font: 500 0.78rem/1.4 var(--f-mono); letter-spacing: 0.04em; color: var(--soft); }
.case__none { color: var(--soft); max-width: 52ch; }
.case__quote { max-width: 40ch; margin: 0 auto; text-align: center; }
.case__quote blockquote { margin: 0; font: 600 clamp(1.5rem, 1rem + 1.8vw, 2.5rem)/1.2 var(--f-display); letter-spacing: -0.03em; }
.case__quote figcaption { margin-top: 1.2rem; font: 500 0.8rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.xp__more { margin-top: 1rem; }
.appr { display: grid; gap: 0; }
.appr li { display: grid; grid-template-columns: 0.5fr 1fr; gap: 2rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.appr li:last-child { border-bottom: 1px solid var(--line); }
.appr h3 { font: 600 clamp(1.4rem, 1rem + 1.2vw, 2.2rem)/1.05 var(--f-display); letter-spacing: -0.03em; }
.appr p { color: var(--soft); }
.related { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related__item { position: relative; display: grid; gap: 0.6rem; align-content: start; padding: 1.6rem 1.6rem 3.2rem; border: 1px solid var(--line); text-decoration: none; background: var(--bg-2); transition: border-color 0.3s, transform 0.5s var(--ease); isolation: isolate; overflow: hidden; }
.related__item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--signal) 14%, transparent), transparent 60%); opacity: 0; transition: opacity 0.4s; }
.related__item:hover::after { opacity: 1; }
.related__item:hover { border-color: var(--line-2); transform: translateY(-3px); }
.related__item b { font: 600 1.5rem/1.1 var(--f-display); letter-spacing: -0.03em; }
.related__item span { color: var(--soft); font-size: 0.95rem; }
.related__item i { position: absolute; right: 1.4rem; bottom: 1.2rem; font-style: normal; transition: transform 0.4s var(--ease); }
.related__item:hover i { transform: translateX(6px); }
.prose { max-width: 70ch; display: grid; gap: 0.9rem; }
.prose h2 { margin-top: 1.6rem; }
.prose p { color: var(--soft); }
.nf { margin-top: 3rem; display: grid; gap: 1rem; justify-items: start; }

/* ------------------------------------------------------------- overlays */
.ov { padding: 0; border: 0; color: var(--text); background: var(--bg); max-width: none; max-height: none; }
.ov::backdrop { background: color-mix(in srgb, var(--c-ink) 72%, transparent); backdrop-filter: blur(6px); }
.ov { opacity: 0; transition: opacity 0.35s var(--ease), transform 0.5s var(--ease), overlay 0.5s allow-discrete, display 0.5s allow-discrete; }
.ov[open] { opacity: 1; }
@starting-style { .ov[open] { opacity: 0; } }
.ov::backdrop { opacity: 0; transition: opacity 0.4s, overlay 0.4s allow-discrete, display 0.4s allow-discrete; }
.ov[open]::backdrop { opacity: 1; }
@starting-style { .ov[open]::backdrop { opacity: 0; } }
.ov__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--bg); }
.ov__title { font: 500 0.78rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }

.ov--menu { width: 100vw; height: 100dvh; margin: 0; transform: translateY(-14px); }
.ov--menu[open] { transform: none; }
@starting-style { .ov--menu[open] { transform: translateY(-14px); } }
.menu { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 100px); padding: clamp(32px, 6vw, 80px) var(--gutter) 60px; }
.menu__main { display: grid; align-content: start; }
.menu__main a { font: 600 clamp(2.6rem, 1rem + 6vw, 6.4rem)/1.04 var(--f-display); font-stretch: 112%; letter-spacing: -0.04em; text-decoration: none; color: var(--text); transition: color 0.3s, transform 0.5s var(--ease); animation: panelIn 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.menu__main:hover a:not(:hover) { color: var(--soft); }
.menu__main a:hover { transform: translateX(14px); }
.menu__side { display: grid; align-content: start; gap: 0.4rem; }
.menu__h { font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin: 1.4rem 0 0.6rem; }
.menu__h:first-child { margin-top: 0; }
.menu__svc { display: grid; gap: 2px; padding: 0.9rem 0; border-top: 1px solid var(--line); text-decoration: none; transition: padding-left 0.4s var(--ease); }
.menu__svc:hover { padding-left: 12px; }
.menu__svc b { font: 600 1.25rem/1.2 var(--f-display); letter-spacing: -0.02em; }
.menu__svc span { color: var(--soft); font-size: 0.9rem; }
.menu__mail { font: 600 1.1rem/1 var(--f-display); text-decoration: none; margin-bottom: 1.2rem; }
.menu__side .btn { justify-self: start; }

.ov--search { width: min(680px, 94vw); margin: 11vh auto auto; border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.7); transform: translateY(-10px) scale(0.985); }
.ov--search[open] { transform: none; }
@starting-style { .ov--search[open] { transform: translateY(-10px) scale(0.985); } }
.search__field { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--line); }
.search__field input { flex: 1; min-width: 0; height: 64px; background: none; border: 0; color: var(--text); font: 500 1.15rem/1 var(--f-body); outline: none; }
.search__field input::placeholder { color: var(--soft); }
.search__field:focus-within { box-shadow: inset 0 -2px 0 var(--signal); }
[data-theme="light"] .search__field:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.search__body { max-height: min(56vh, 460px); overflow: auto; overscroll-behavior: contain; }
.search__list { padding: 8px; }
.search__g { padding: 14px 12px 6px; font: 500 0.68rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.search__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 12px; cursor: pointer; position: relative; }
.search__item[aria-selected="true"] { background: var(--bg-3); }
.search__item[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); }
.search__item b { font-weight: 500; font-size: 1rem; }
.search__item mark { background: none; color: var(--signal); font-weight: 600; }
[data-theme="light"] .search__item mark { color: var(--focus); }
.search__item small { display: block; color: var(--soft); font-size: 0.82rem; margin-top: 2px; }
.search__item em { font: 500 0.68rem/1 var(--f-mono); color: var(--soft); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; flex: none; }
.search__empty { padding: 28px 20px 32px; color: var(--soft); }
.search__empty b { color: var(--text); display: block; margin-bottom: 6px; font-size: 1.05rem; }
.search__empty button { margin-top: 14px; text-decoration: underline; text-underline-offset: 4px; color: var(--text); }
.search__foot { display: flex; gap: 20px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); color: var(--soft); font-size: 0.78rem; }
.search__foot kbd { margin-right: 4px; }
.search__foot #searchCount { margin-left: auto; font-family: var(--f-mono); }

.ov--sheet { width: min(580px, 100vw); height: 100dvh; margin: 0 0 0 auto; border-left: 1px solid var(--line-2); transform: translateX(40px); }
.ov--sheet[open] { transform: none; }
@starting-style { .ov--sheet[open] { transform: translateX(40px); } }
.brief { min-height: 100%; display: flex; flex-direction: column; }
.brief__body { padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 40px) 120px; flex: 1; }
.brief__steps { display: flex; gap: 6px; margin-bottom: 1.8rem; }
.brief__steps i { flex: 1; height: 3px; background: var(--line-2); transition: background 0.4s; }
.brief__steps i.is-done { background: var(--signal); }
[data-theme="light"] .brief__steps i.is-done { background: var(--focus); }
.brief__h { font: 600 clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem)/1.05 var(--f-display); font-stretch: 106%; letter-spacing: -0.035em; animation: panelIn 0.5s var(--ease) both; }
.brief__p { margin-top: 0.8rem; color: var(--soft); max-width: 44ch; }
.field { display: grid; gap: 8px; margin-top: 1.4rem; }
.field > label, .field > legend { font: 500 0.8rem/1.2 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); padding: 0; }
.field input, .field textarea, .field select { width: 100%; background: var(--bg-2); border: 1px solid var(--line-ui); color: var(--text); padding: 14px 14px; font: 400 1rem/1.4 var(--f-body); transition: border-color 0.25s, background 0.25s; border-radius: 0; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--signal); background: var(--bg); }
[data-theme="light"] .field input:focus, [data-theme="light"] .field textarea:focus, [data-theme="light"] .field select:focus { border-color: var(--focus); }
.field [aria-invalid="true"] { border-color: #ff7a7a; }
[data-theme="light"] .field [aria-invalid="true"] { border-color: #b3261e; }
.field__err { color: #ff9a9a; font-size: 0.88rem; min-height: 1.2em; }
[data-theme="light"] .field__err { color: #b3261e; }
.field__hint { color: var(--soft); font-size: 0.85rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-ui); font-size: 0.95rem; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.chip input:checked + span { background: var(--signal); color: var(--on-signal); border-color: var(--signal); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.chip:hover span { border-color: var(--text); }
.brief__nav { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: space-between; padding: 16px clamp(20px, 4vw, 40px); background: var(--bg); border-top: 1px solid var(--line); }
.brief__nav .btn { min-height: 46px; }
.brief__review { margin-top: 1.4rem; padding: 1.2rem; background: var(--bg-2); border: 1px solid var(--line-2); font: 400 0.88rem/1.6 var(--f-mono); white-space: pre-wrap; word-break: break-word; max-height: 44vh; overflow: auto; }
.brief__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2rem; }
.brief__saved { margin-top: 1rem; color: var(--soft); font-size: 0.82rem; }
.brief__noscript { padding: 24px; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; background: var(--text); color: var(--bg); font: 500 0.85rem/1.2 var(--f-mono); transition: opacity 0.35s, transform 0.5s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------- motion */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease) calc(var(--i, 0) * 80ms), transform 0.9s var(--ease) calc(var(--i, 0) * 80ms); }
.rv.in { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease) calc(var(--wi, 0) * 45ms + var(--wd, 0ms)); }
.in .w > span, .w.in > span, [data-split].in .w > span { transform: none; }
html:not(.js) .w > span { transform: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .nav { display: none; }
  .tool--menu { display: inline-flex; }
  .tool--search span { display: none; }
  .tool--search kbd { display: none; }
  .tool--search::before { content: "Search"; }
  .hdr__tools { margin-left: auto; }
  .method__list { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero { height: auto; }
  .hero__stage { position: relative; height: auto; min-height: 100dvh; flex-direction: column; justify-content: flex-end; align-items: stretch; padding-top: calc(var(--nav-h) + 12px); }
  .hero__canvas { position: relative; inset: auto; width: 100%; height: 52vh; min-height: 320px; order: -1; top: 0; }
  .hero__labels { display: none; }
  .hero__copy { max-width: none; margin-top: 8px; }
  .hero__caption { display: none; }
  .hdr__cta { display: none; }
  .founder__grid, .faq__grid, .pgrid { grid-template-columns: 1fr; }
  .disc__tabs { position: static; flex-direction: row; overflow-x: auto; border-bottom: 0; scroll-snap-type: x mandatory; gap: 1.4rem; }
  .disc__tab { flex: none; border-top: 0; padding: 0.4rem 0; scroll-snap-align: start; font-size: 1.8rem; }
  .disc__tab::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; transform: scaleX(0); transform-origin: left; }
  .disc__tab[aria-selected="true"] { padding-left: 0; }
  .disc__tab[aria-selected="true"]::before { transform: scaleX(1); }
  .disc__list { grid-template-columns: 1fr; }
  .faq__h, .pgrid__h { position: static; }
  .diag__opts { grid-template-columns: 1fr; }
  .menu { grid-template-columns: 1fr; }
  .xp__grid { grid-template-columns: 1fr; }
  .deliv, .related { grid-template-columns: 1fr; }
  .appr li { grid-template-columns: 1fr; gap: 0.6rem; }
}
@media (max-width: 640px) {
  .method__list { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: 1fr; }
  .proof__label { padding: 0 14px; font-size: 0.64rem; }
  .facts div { grid-template-columns: 1fr; gap: 0.2rem; }
  .btn { white-space: normal; text-align: center; }
  .hero__cta .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .rv { opacity: 1; transform: none; }
  .w > span { transform: none; }
  .marq__track { animation: none; overflow-x: auto; }
  .progress { display: none; }
  .hero { height: auto; }
  .hero__stage { position: relative; height: auto; min-height: 100dvh; }
}
@media (prefers-reduced-transparency: reduce) {
  .hdr.is-solid, .ov::backdrop { backdrop-filter: none; }
}



/* Experience and projects: full-colour logos. Light plates for colour logos, dark plates for reversed ones. */
.xp__logo { height: 56px; width: auto; max-width: 240px; object-fit: contain; align-self: flex-start; }
.xp__logo.lg--light { display: none; }
.xp__tile--asahi, .xp__tile--nython { color: var(--c-ink); border-color: var(--line-2); }
.xp__tile--asahi { grid-column: span 7; grid-row: span 2; background: var(--c-plate); }
.xp__tile--asahi .xp__logo { height: clamp(80px, 9vw, 130px); max-width: 380px; }
.xp__tile--asahi .xp__text h3 { font-size: clamp(1.8rem, 1rem + 2.2vw, 3.2rem); }
.xp__tile--nython { grid-column: span 5; grid-row: span 2; background: var(--signal); border-color: var(--signal); }
.xp__tile--nython .xp__logo { height: clamp(110px, 12vw, 170px); }
.xp__tile--asahi .xp__text p { color: var(--c-plate-soft); }
.xp__tile--nython .xp__text p { color: color-mix(in srgb, var(--on-signal) 78%, transparent); }
.xp__tile--batchgate, .xp__tile--dyelogic, .xp__tile--valuto { grid-column: span 4; background-color: var(--c-dark); color: var(--c-paper); background-image: radial-gradient(color-mix(in srgb, var(--c-paper) 8%, transparent) 1.2px, transparent 1.5px); background-size: 12px 12px; }
.xp__tile--batchgate .xp__logo, .xp__tile--dyelogic .xp__logo { height: 56px; max-width: 230px; }
.xp__tile--valuto .xp__logo { height: 84px; max-width: 230px; }
.xp__tile--batchgate .xp__text p, .xp__tile--dyelogic .xp__text p, .xp__tile--valuto .xp__text p { color: var(--c-dark-soft); }
@media (max-width: 1100px) { .xp__tile--batchgate, .xp__tile--dyelogic, .xp__tile--valuto { grid-column: span 6; } .xp__tile--valuto { grid-column: 1 / -1; } }
@media (max-width: 900px) { .xp__tile--asahi, .xp__tile--nython, .xp__tile--batchgate, .xp__tile--dyelogic, .xp__tile--valuto { grid-column: 1 / -1; grid-row: auto; } }

/* Scroll ring: replaces the native scrollbar. Progress and visibility are driven by the scroll timeline, no scroll listener. */
html::-webkit-scrollbar { display: none; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.totop { --p: 0; position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: var(--z-nav); width: 58px; height: 58px; border-radius: 50%; padding: 3px; display: grid; place-items: center;
  background: conic-gradient(var(--signal) calc(var(--p) * 360deg), var(--line-2) 0); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.totop__in { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--text); font: 500 1.5rem/1 var(--f-display); transition: background 0.3s, color 0.3s, transform 0.4s var(--ease); }
.totop:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -10px color-mix(in srgb, var(--signal) 28%, transparent); }
.totop:hover .totop__in { background: var(--signal); color: var(--on-signal); transform: translateY(-2px); }
.totop:active { transform: scale(0.96); }
[data-theme="light"] .totop { background: conic-gradient(var(--focus) calc(var(--p) * 360deg), var(--line-2) 0); box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--text) 35%, transparent); }
@supports (animation-timeline: scroll()) {
  .totop { visibility: hidden; opacity: 0; animation: totopRing linear both, totopIn linear both; animation-timeline: scroll(root), scroll(root); animation-range: normal, 0 320px; }
  @keyframes totopRing { to { --p: 1; } }
  @keyframes totopIn { from { visibility: hidden; opacity: 0; translate: 0 14px; } to { visibility: visible; opacity: 1; translate: 0 0; } }
}
@media (max-width: 640px) { .totop { width: 52px; height: 52px; } }

/* ------------------------------------------------------- page receipt */
.receipt-sec { border-top: 1px solid var(--line); }
.receipt__grid { display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: clamp(32px, 7vw, 120px); align-items: center; }
.receipt__link { margin-top: 2rem; }
.receipt { position: relative; justify-self: end; width: 100%; max-width: 460px; padding: 34px 30px 46px; background: var(--c-plate); color: var(--c-ink); font: 400 0.9rem/1.5 var(--f-mono); transform: rotate(1.2deg); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.7);
  --tooth: 10px; -webkit-mask: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / var(--tooth) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) / 2) no-repeat;
  mask: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) bottom / var(--tooth) 51% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) / 2) no-repeat; }
.receipt__head { font: 800 1.3rem/1 var(--f-display); font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; text-align: center; }
.receipt__sub { text-align: center; color: var(--c-plate-soft); margin-top: 6px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.receipt__rows { margin: 1.4rem 0 0; border-top: 1px dashed var(--c-ink); }
.receipt__rows div { display: flex; justify-content: space-between; gap: 1.2rem; padding: 0.55rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 40%, transparent); animation: panelIn 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.receipt__rows dt { color: var(--c-plate-soft); }
.receipt__rows dd { margin: 0; text-align: right; font-weight: 500; max-width: 55%; word-break: break-word; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.1rem 0 0; padding-top: 0.6rem; border-top: 2px solid var(--c-ink); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.receipt__total b { font: 800 1.5rem/1 var(--f-display); letter-spacing: -0.02em; text-transform: none; }
.receipt[data-receipt-state="static"] .receipt__total b { font-size: 1rem; }
.receipt__note { margin-top: 1.1rem; font-size: 0.72rem; line-height: 1.5; color: var(--c-plate-soft); }

/* ---------------------------------------------------- website health */
.health { display: grid; grid-template-columns: 1.4fr minmax(300px, 0.8fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.checks { display: grid; gap: 10px; }
.check label { display: grid; grid-template-columns: 30px 1fr; gap: 18px; align-items: start; padding: 1.3rem 1.4rem; border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease); }
.check label:hover { border-color: var(--signal); transform: translateY(-2px); }
[data-theme="light"] .check label:hover { border-color: var(--focus); }
.check input { position: absolute; opacity: 0; }
.check__box { width: 26px; height: 26px; border: 1.5px solid var(--line-ui); display: grid; place-items: center; transition: background 0.25s, border-color 0.25s; margin-top: 2px; }
.check__box::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--on-signal); border-bottom: 2.5px solid var(--on-signal); transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform 0.3s var(--ease); }
.check input:checked + .check__box { background: var(--signal); border-color: var(--signal); }
.check input:checked + .check__box::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.check__text { display: grid; gap: 6px; }
.check__text b { font: 600 1.08rem/1.3 var(--f-display); letter-spacing: -0.01em; }
.check__text small { color: var(--soft); font-size: 0.92rem; line-height: 1.45; }
.verdict { position: sticky; top: calc(var(--nav-h) + 32px); padding: 1.8rem; border: 1px solid var(--line-2); background: var(--bg-2); }
.verdict__score { display: flex; align-items: baseline; gap: 0.5rem; }
.verdict__score b { font: 800 4.4rem/0.9 var(--f-display); font-stretch: 112%; letter-spacing: -0.05em; }
.verdict__score span { color: var(--soft); }
.verdict__bar { height: 4px; background: var(--line); margin: 1.2rem 0 1.4rem; }
.verdict__bar i { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); transition: transform 0.7s var(--ease); }
[data-theme="light"] .verdict__bar i { background: var(--focus); }
.verdict__body h2 { font: 600 1.8rem/1.05 var(--f-display); font-stretch: 106%; letter-spacing: -0.03em; }
.verdict__body h2 em { font-style: normal; color: var(--signal); }
[data-theme="light"] .verdict__body h2 em { color: var(--focus); }
.verdict__body p { margin-top: 0.8rem; color: var(--soft); }
.verdict__acts { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
@media (max-width: 900px) {
  .receipt__grid, .health { grid-template-columns: 1fr; }
  .receipt { justify-self: center; transform: none; }
  .verdict { position: static; }
}
@media (prefers-reduced-motion: reduce) { .receipt { transform: none; } }

/* ----------------------------------------------- isometric system stack */
@property --e { syntax: "<number>"; inherits: true; initial-value: 1; }
.stack__svg { width: 100%; height: auto; overflow: visible; }
.plate { cursor: pointer; transform: translateY(calc(var(--i) * (28px + var(--e) * 52px))); transition: opacity 0.4s var(--ease); }
.plate polygon { fill: transparent; stroke: var(--line-2); stroke-width: 1.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--e)); transition: stroke 0.4s var(--ease), fill 0.4s var(--ease); }
.plate__top { fill: var(--bg); }
.plate__lead { stroke: var(--line-2); stroke-width: 1; transition: stroke 0.4s; }
.plate__label { fill: var(--soft); font: 500 12px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; transition: fill 0.3s; opacity: calc(var(--e)); }
.plate:hover .plate__label { fill: var(--text); }
.stack[data-active="position"] .plate--position polygon, .stack[data-active="identity"] .plate--identity polygon, .stack[data-active="presence"] .plate--presence polygon, .stack[data-active="momentum"] .plate--momentum polygon { stroke: var(--signal); }
.stack[data-active="position"] .plate--position .plate__top, .stack[data-active="identity"] .plate--identity .plate__top, .stack[data-active="presence"] .plate--presence .plate__top, .stack[data-active="momentum"] .plate--momentum .plate__top { fill: color-mix(in srgb, var(--signal) 14%, transparent); }
.stack[data-active="position"] .plate--position .plate__lead, .stack[data-active="identity"] .plate--identity .plate__lead, .stack[data-active="presence"] .plate--presence .plate__lead, .stack[data-active="momentum"] .plate--momentum .plate__lead { stroke: var(--signal); }
.stack[data-active="position"] .plate--position .plate__label, .stack[data-active="identity"] .plate--identity .plate__label, .stack[data-active="presence"] .plate--presence .plate__label, .stack[data-active="momentum"] .plate--momentum .plate__label { fill: var(--text); }
[data-theme="light"] .stack[data-active] .plate polygon { --on: var(--focus); }
[data-theme="light"] .stack[data-active="position"] .plate--position polygon, [data-theme="light"] .stack[data-active="identity"] .plate--identity polygon, [data-theme="light"] .stack[data-active="presence"] .plate--presence polygon, [data-theme="light"] .stack[data-active="momentum"] .plate--momentum polygon { stroke: var(--focus); }
[data-theme="light"] .stack[data-active="position"] .plate--position .plate__top, [data-theme="light"] .stack[data-active="identity"] .plate--identity .plate__top, [data-theme="light"] .stack[data-active="presence"] .plate--presence .plate__top, [data-theme="light"] .stack[data-active="momentum"] .plate--momentum .plate__top { fill: color-mix(in srgb, var(--focus) 12%, transparent); }
@supports (animation-timeline: view()) {
  .stack { animation: explode linear both; animation-timeline: view(); animation-range: entry 5% cover 52%; }
  @keyframes explode { from { --e: 0; } to { --e: 1; } }
}
@media (prefers-reduced-motion: reduce) { .stack { animation: none; --e: 1; } }


/* Founder: small portrait, plain caption, no overlay. */

/* Above-the-fold headings animate with CSS only, so they paint without waiting for JavaScript. */
.hero__h1 .w > span, .phero__h1 .w > span { transform: none; transition: none; animation: wordIn 0.9s var(--ease) both; animation-delay: calc(var(--wi, 0) * 45ms + 80ms); }
@keyframes wordIn { from { transform: translateY(108%); } }

/* Tap targets: text links get a 44px hit area while the underline stays close to the text. */
.link { padding: 0.8rem 0; background-position: 0 calc(100% - 0.65rem); }
.link:hover { background-position: 100% calc(100% - 0.65rem); }
.close__mail { padding: 0.8rem 0; background-position: 0 calc(100% - 0.65rem); }
.close__mail:hover { background-position: 100% calc(100% - 0.65rem); }
.crumbs { align-items: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.ftr__col a, .ftr__link { display: inline-flex; align-items: center; min-height: 36px; }
.ftr__base .ftr__link { min-height: 44px; }

/* ------------------------------------------------------------- founder */
.founder__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.founder__h { font: 600 clamp(2rem, 1rem + 2.7vw, 3.6rem)/1.02 var(--f-display); font-stretch: 108%; letter-spacing: -0.035em; text-wrap: balance; }
.founder__intro .lead { margin-top: 1.6rem; max-width: 46ch; }
.founder__intro .btn { margin-top: 2rem; }
.profile { border: 1px solid var(--line-2); background: var(--bg); }
.profile__top { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; padding: clamp(20px, 2.6vw, 32px); }
.profile__top img { width: 168px; height: 168px; object-fit: cover; filter: grayscale(1) contrast(1.04); background: var(--bg-3); }
.profile__id h3 { font: 600 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.1 var(--f-display); letter-spacing: -0.03em; }
.profile__id p { margin-top: 0.4rem; color: var(--text); }
.profile__id .profile__loc { color: var(--soft); font-size: 0.92rem; margin-top: 0.15rem; }
.profile__facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); }
.profile__facts div { padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.6vw, 32px); border-bottom: 1px solid var(--line); }
.profile__facts div:nth-child(odd) { border-right: 1px solid var(--line); }
.profile__facts div:nth-last-child(-n + 2) { border-bottom: 0; }
.profile__facts dt { font: 500 0.72rem/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); margin-bottom: 0.5rem; }
.profile__facts dd { font-size: 1rem; line-height: 1.45; }
@media (max-width: 900px) {
  .founder__layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .profile__top { grid-template-columns: 96px minmax(0, 1fr); }
  .profile__top img { width: 96px; height: 96px; }
  .profile__facts { grid-template-columns: minmax(0, 1fr); }
  .profile__facts div:nth-child(odd) { border-right: 0; }
  .profile__facts div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* ------------------------------------------------ small additions */
.phero__meta { margin-top: 1.2rem; font: 400 0.8rem/1.4 var(--f-mono); color: var(--soft); letter-spacing: 0.04em; }
.close__copy { font: 500 0.82rem/1 var(--f-mono); letter-spacing: 0.06em; padding: 0.85rem 1rem; border: 1px solid color-mix(in srgb, var(--c-ink) 55%, transparent); color: var(--c-ink); transition: background 0.3s, color 0.3s; }
.close__copy:hover { background: var(--c-ink); color: var(--c-paper); }
/* floating contact button: phones only, appears after the first screen */
.fab { display: none; text-decoration: none; }
@media (max-width: 900px) {
  .fab { display: inline-flex; position: fixed; left: clamp(16px, 4vw, 24px); bottom: clamp(16px, 2.4vw, 32px); z-index: var(--z-nav); min-height: 52px; align-items: center; padding: 0 1.2rem; background: var(--signal); color: var(--on-signal); font: 700 0.78rem/1 var(--f-display); font-stretch: 105%; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55); }
  html.lock .fab, html.lock .totop { visibility: hidden; }
  html.at-footer .fab { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s, visibility 0.3s; }
  @supports (animation-timeline: scroll()) {
    .fab { visibility: hidden; opacity: 0; animation: totopIn linear both; animation-timeline: scroll(root); animation-range: 0 320px; }
  }
}

/* ------------------------------------------------- two ways in */
.ways { border-block: 1px solid var(--line); }
.ways__grid { display: grid; grid-template-columns: 1fr 1fr; }
.way { padding: clamp(36px, 5vw, 80px) var(--gutter); display: flex; flex-direction: column; gap: 1.2rem; }
.way--established { background: var(--bg-2); border-right: 1px solid var(--line); }
.way--startup { background: var(--signal); color: var(--c-ink); }
.way__h { font: 650 clamp(2rem, 1.2rem + 3vw, 4rem)/1 var(--f-brand); letter-spacing: -0.04em; }
.way__p { max-width: 40ch; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.5; }
.way--established .way__p { color: var(--soft); }
.way--startup .way__p { color: color-mix(in srgb, var(--c-ink) 78%, transparent); }
.way__list { margin: 0.6rem 0 1.2rem; max-width: 460px; }
.way__list li { border-top: 1px solid var(--line-2); }
.way__list li:last-child { border-bottom: 1px solid var(--line-2); }
.way--startup .way__list li { border-color: color-mix(in srgb, var(--c-ink) 40%, transparent); }
.way__list a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; text-decoration: none; font: 600 1.05rem/1.2 var(--f-display); letter-spacing: -0.01em; transition: padding-left 0.3s var(--ease), color 0.25s; }
.way__list a i { font-style: normal; opacity: 0.5; transition: transform 0.3s var(--ease), opacity 0.25s; }
.way__list a:hover { padding-left: 10px; }
.way__list a:hover i { opacity: 1; transform: translateX(4px); }
.way .btn { align-self: flex-start; margin-top: auto; }
.ways__line { padding: 1.4rem var(--gutter); text-align: center; border-top: 1px solid var(--line); font: 500 1rem/1.4 var(--f-mono); letter-spacing: 0.04em; color: var(--soft); }
.ways__line b { font-weight: 500; color: var(--text); }
@media (max-width: 900px) { .ways__grid { grid-template-columns: minmax(0, 1fr); } .way--established { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ------------------------------------------- "get into the algorithm" */
.algo__p { font: 500 clamp(1.2rem, 1rem + 0.9vw, 1.8rem)/1.3 var(--f-display); letter-spacing: -0.02em; max-width: 34em; }
.algo__list { margin-top: 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.algo__list li { padding: 1rem 0; border-top: 1px solid var(--line); color: var(--soft); }
@media (max-width: 700px) { .algo__list { grid-template-columns: minmax(0, 1fr); } }

/* related services: four cards on every service page */
.related { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .related { grid-template-columns: minmax(0, 1fr); } }
/* a six-step lifecycle reads better in two columns */
.appr:has(> li:nth-child(6)) { grid-template-columns: 1fr 1fr; column-gap: 2.4rem; }
.appr:has(> li:nth-child(6)) li { grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr); }
.appr:has(> li:nth-child(6)) li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .appr:has(> li:nth-child(6)) { grid-template-columns: minmax(0, 1fr); } .appr:has(> li:nth-child(6)) li:nth-last-child(2) { border-bottom: 0; } }

/* -------------------------------- service openers: the layer stack */
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.phero--svc .phero__h1 { font-size: clamp(2rem, min(0.8rem + 3.8vw, 9vh), 5rem); max-width: 14em; }
.stack--page { justify-self: end; width: 100%; max-width: min(400px, 52vh); margin: 0; }
.stack--page .stack__svg { overflow: visible; }
.stack__cap { margin-top: 0.4rem; font: 500 0.74rem/1.4 var(--f-mono); letter-spacing: 0.08em; color: var(--soft); text-align: right; }
.stack--page { animation: stackIn 1.5s var(--ease) 0.2s both; animation-timeline: auto; animation-range: normal; }
@keyframes stackIn { from { --e: 0; opacity: 0.25; } to { --e: 1; opacity: 1; } }
.stack[data-active="all"] .plate polygon, .stack[data-active="all"] .plate__lead { stroke: var(--signal); }
.stack[data-active="all"] .plate__top { fill: color-mix(in srgb, var(--signal) 12%, transparent); }
.stack[data-active="all"] .plate__label { fill: var(--text); }
[data-theme="light"] .stack[data-active="all"] .plate polygon, [data-theme="light"] .stack[data-active="all"] .plate__lead { stroke: var(--focus); }
[data-theme="light"] .stack[data-active="all"] .plate__top { fill: color-mix(in srgb, var(--focus) 12%, transparent); }
@media (max-width: 900px) { .phero__grid { grid-template-columns: minmax(0, 1fr); } .stack--page { display: none; } }
@media (prefers-reduced-motion: reduce) { .stack--page { animation: none; --e: 1; } }

/* ------------------------------------------- without JavaScript */
.disc__ptitle { display: none; }
html:not(.js) .disc__tabs, html:not(.js) .stack, html:not(.js) .tool--search, html:not(.js) .tool--theme,
html:not(.js) .close__copy, html:not(.js) .diag-sec, html:not(.js) .hero__vis { display: none; }
html:not(.js) .disc__panel[hidden] { display: block; }
html:not(.js) .disc__panel { margin-bottom: 3rem; animation: none; }
html:not(.js) .disc__ptitle { display: block; font: 600 clamp(1.6rem, 1rem + 2vw, 2.6rem)/1 var(--f-display); letter-spacing: -0.03em; margin-bottom: 1rem; }
html:not(.js) .nav__has:hover .dd[hidden], html:not(.js) .nav__has:focus-within .dd[hidden] { display: block; }
html:not(.js) .totop { visibility: visible; opacity: 1; animation: none; }
a.totop { text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------- print */
@media print {
  :root { --bg: #fff; --bg-2: #fff; --bg-3: #eee; --text: #000; --soft: #333; --line: #bbb; --line-2: #888; }
  html, body { background: #fff !important; color: #000 !important; }
  .hdr, .skip, .totop, .fab, .toast, dialog, .hero__canvas, .hero__labels, .hero__caption, .proof, .marq, .close, .ftr__word, .receipt-sec .receipt, .diag__body, .stack, [data-open], .btn { display: none !important; }
  .hero, .hero__stage { height: auto !important; min-height: 0 !important; position: static !important; }
  .sec, .psec, .phero { padding-block: 1.2rem !important; }
  .rv, .w > span { opacity: 1 !important; transform: none !important; animation: none !important; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .page { padding-top: 0 !important; }
  .founder, .faq, .diag-sec, .psec--alt { background: #fff !important; }
  details > * { display: block !important; }
  h1, h2, h3 { break-after: avoid; }
  section, article { break-inside: avoid; }
}


/* ======================================================================
   GRIT. A rugged control-panel layer on top of the base styles.
   Physical controls, worn surfaces, a little HUD. Kept deliberately light.
   ====================================================================== */
:root {
  --edge-lo: rgba(0, 0, 0, 0.55);
  --edge-hi: color-mix(in srgb, var(--text) 7%, transparent);
  --key-shadow: color-mix(in srgb, var(--signal) 50%, #000);
}
[data-theme="light"] {
  --edge-lo: color-mix(in srgb, var(--text) 24%, transparent);
  --edge-hi: rgba(255, 255, 255, 0.7);
  --key-shadow: color-mix(in srgb, var(--signal) 55%, #000);
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* film grain: one fixed, click-through layer, painted once */
body::before { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0.075; background-size: 220px 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="light"] body::before { opacity: 0.035; filter: invert(1); }

/* machined grooves between sections */
.sec, .psec, .proof, .receipt-sec, .close, .ftr { box-shadow: inset 0 1px 0 var(--edge-lo), inset 0 2px 0 var(--edge-hi); }
/* brushed plate texture on the raised sections */
.founder, .psec--alt, .ftr { background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 2.4%, transparent) 0 1px, transparent 1px 4px); }
/* one hazard strip, on the footer edge */
.ftr { position: relative; }
.ftr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--signal) 0 14px, var(--c-ink) 14px 28px); opacity: 0.92; }

/* a shared, quiet brand face across the masthead, diagrams, tags and footer */
.brand span { font: 850 1.12rem/0.92 var(--f-brand); font-stretch: 125%; letter-spacing: 0.01em; text-transform: uppercase; }
.hero__labels a { font: 800 clamp(0.82rem, 0.6rem + 0.3vw, 1rem)/1.1 var(--f-brand); font-stretch: 118%; letter-spacing: 0.05em; text-transform: uppercase; }
.proof__label, .ftr__h { font: 600 0.76rem/1.2 var(--f-brand); letter-spacing: 0.09em; }
.receipt__head { font: 650 1.5rem/1.1 var(--f-brand); letter-spacing: -0.025em; }
.plate__label { font-family: var(--f-brand); font-weight: 800; font-stretch: 112%; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.ftr__word { font: 900 clamp(2.2rem, 7.4vw, 11rem)/0.86 var(--f-brand); font-stretch: 125%; letter-spacing: -0.035em; text-transform: uppercase; }

/* keycap buttons: real travel, a hard shadow, a lit top edge */
.btn--solid, .fab { border: 0; background: var(--signal); color: var(--on-signal);
  box-shadow: 0 4px 0 var(--key-shadow), 0 12px 18px -8px var(--drop), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(0, 0, 0, 0.14);
  transition: transform 0.09s ease, box-shadow 0.09s ease, color 0.3s; }
.btn--solid::before { display: none; }
.btn--solid:hover, .fab:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--key-shadow), 0 14px 20px -8px var(--drop), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.14); }
.btn--solid:active, .fab:active { transform: translateY(4px); box-shadow: 0 0 0 var(--key-shadow), 0 3px 5px -3px var(--drop), inset 0 2px 4px rgba(0, 0, 0, 0.3); }
.btn--dark { border: 0; background: var(--c-ink); color: var(--c-paper); --fill: transparent;
  box-shadow: 0 4px 0 #000, 0 12px 18px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 color-mix(in srgb, var(--c-paper) 22%, transparent);
  transition: transform 0.09s ease, box-shadow 0.09s ease, background 0.25s; }
.btn--dark::before { display: none; }
.btn--dark:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c-ink) 86%, var(--c-paper)); color: var(--c-paper); }
.btn--dark:active { transform: translateY(4px); box-shadow: 0 0 0 #000, 0 3px 5px -3px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(0, 0, 0, 0.5); }
.btn--ghost { border-color: var(--line-ui); box-shadow: inset 0 1px 0 var(--edge-hi), inset 0 -2px 0 color-mix(in srgb, #000 22%, transparent); transition: color 0.35s var(--ease), transform 0.09s ease, box-shadow 0.09s ease; }
.btn--ghost:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45); }
.close__copy { box-shadow: inset 0 -2px 0 color-mix(in srgb, #000 25%, transparent); }
.close__copy:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }

/* the theme switch is a hardware rocker */
.tool--theme { padding: 0 10px; min-width: 62px; justify-content: center; }
.sw { position: relative; display: block; width: 42px; height: 22px; background: color-mix(in srgb, var(--c-ink) 88%, transparent); border: 1px solid var(--line-2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65); }
.sw__lever { position: absolute; top: 2px; left: 2px; width: 18px; height: 16px; background: linear-gradient(color-mix(in srgb, var(--signal) 88%, #fff), color-mix(in srgb, var(--signal) 70%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 3px rgba(0, 0, 0, 0.6); transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
[data-theme="light"] .sw { background: color-mix(in srgb, var(--c-ink) 16%, transparent); box-shadow: inset 0 2px 3px color-mix(in srgb, var(--c-ink) 40%, transparent); }
[data-theme="light"] .sw__lever { transform: translateX(20px); }

/* latch checks and push keys, with a lit LED when on */
.check__box { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45); }
.check input:checked + .check__box { box-shadow: 0 0 0 1px var(--signal), 0 0 14px color-mix(in srgb, var(--signal) 55%, transparent), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.chip span { box-shadow: inset 0 -3px 0 color-mix(in srgb, #000 28%, transparent), inset 0 1px 0 var(--edge-hi); transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.08s, box-shadow 0.08s; }
.chip input:checked + span { transform: translateY(1px); box-shadow: inset 0 3px 5px color-mix(in srgb, #000 30%, transparent), 0 0 12px color-mix(in srgb, var(--signal) 40%, transparent); }
kbd { border-radius: 2px; border-bottom-width: 3px; background: var(--bg-2); color: var(--text); box-shadow: inset 0 1px 0 var(--edge-hi); }

/* console prompt in search */
.search__field::before { content: ">"; font: 700 1.2rem/1 var(--f-mono); color: var(--signal); }
[data-theme="light"] .search__field::before { color: var(--focus); }

/* scroll gauge: tick marks around the ring */
.totop::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from -1deg, var(--line-2) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }

/* HUD corner brackets that lock on when you point at a panel */
@property --b { syntax: "<length>"; inherits: false; initial-value: 12px; }
.xp__tile, .deliv li, .related__item, .profile, .verdict, .check label { position: relative; }
.xp__tile::before, .deliv li::before, .related__item::before, .profile::before, .verdict::before, .check label::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none; --c: var(--signal); --b: 12px; opacity: 0.4;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--b) 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--b) 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--b) 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--b) 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--b) no-repeat;
  transition: --b 0.4s var(--ease), opacity 0.3s; }
.xp__tile:hover::before, .deliv li:hover::before, .related__item:hover::before, .profile:hover::before, .verdict:hover::before, .check label:hover::before, .check label:focus-within::before { --b: 30px; opacity: 1; }
[data-theme="light"] .deliv li::before, [data-theme="light"] .related__item::before, [data-theme="light"] .profile::before, [data-theme="light"] .verdict::before, [data-theme="light"] .check label::before { --c: var(--focus); }
.xp__tile--asahi::before, .xp__tile--nython::before, .deliv li:first-child::before { --c: var(--c-ink); }

/* hero: the skull sits inside a targeting frame with a live scan readout */
.hero__vis { position: absolute; top: var(--nav-h); right: 0; width: min(56vw, 860px); height: calc(100% - var(--nav-h)); isolation: isolate; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; top: 0; right: auto; }
.hero__hud { position: absolute; inset: 0; pointer-events: none; }
.hud__frame { position: absolute; --c: var(--accent-ink); --b: 22px; opacity: 0.85;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--b) 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--b) 2px no-repeat, linear-gradient(var(--c), var(--c)) top right / 2px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--b) 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--b) 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--b) no-repeat; }
.hud__frame::after { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 9px;
  background: repeating-linear-gradient(to bottom, var(--line-2) 0 1px, transparent 1px 14px), repeating-linear-gradient(to bottom, var(--soft) 0 1px, transparent 1px 70px); background-size: 5px 100%, 9px 100%; background-repeat: no-repeat; background-position: right top, right top; }
.hud__read { position: absolute; left: 0; top: -24px; font: 500 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }
@media (max-width: 900px) {
  .hero__vis { position: relative; top: 0; right: auto; width: 100%; height: 52vh; min-height: 320px; order: -1; }
  .hud__frame::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--solid, .btn--dark, .btn--ghost, .fab, .chip span, .sw__lever { transition: none; }
}
@media print { body::before, .ftr::before, .hero__hud, .defs { display: none !important; } }

/* outline wordmark, with clearance for the scroll ring */
.ftr__word { color: transparent; -webkit-text-stroke: clamp(1.2px, 0.14vw, 2.4px) color-mix(in srgb, var(--text) 55%, transparent); }
.ftr__base { padding-right: 96px; }
@media (max-width: 640px) { .ftr__base { padding-right: 84px; } }
/* footer emblem: beside the wordmark on wider screens; on phones it fills the empty space beside the contact column,
   the wordmark spans the full width, and the base clears the fixed contact button and scroll ring */
.ftr__emblem { display: none; }
@media (max-width: 640px) {
  .ftr__col:last-child { position: relative; padding-right: 128px; }
  .ftr__emblem { display: block; position: absolute; right: 0; top: 50%; width: auto; height: 172px; transform: translateY(-50%); filter: url(#ring); pointer-events: none; }
  .ftr__word .ftr__mark { display: none; }
  .ftr__word { font-size: calc((100vw - 2 * var(--gutter)) / 10.9); justify-content: center; }
  .ftr__base { flex-direction: column; gap: 0.2rem; padding-bottom: calc(52px + 2 * clamp(16px, 2.4vw, 32px)); }
}

/* header fits small phones: tighter tools, smaller brand text, shorter search label */
@media (max-width: 640px) {
  .hdr { gap: 10px; }
  .hdr__tools { gap: 6px; }
  .brand { gap: 10px; }
  .brand img { height: 40px; }
  .brand span { font-size: 1.05rem; letter-spacing: -0.025em; }
  .tool { padding: 0 0.7em; }
  .tool--theme { min-width: 50px; padding: 0 8px; }
  .sw { width: 36px; }
  [data-theme="light"] .sw__lever { transform: translateX(16px); }
}
@media (max-width: 400px) {
  .tool--search::before { content: "Find"; }
  .tool--menu span { display: none; }
}

/* services dropdown: invisible bridge so the pointer can travel from the button to the panel */
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
/* scan readout lives inside the frame, below the top edge, clear of the sticky header */
.hud__read { top: 8px; left: 14px; }
/* footer: the emblem and wordmark are one optical lock-up and illuminate together */
.ftr__word { display: flex; align-items: center; justify-content: center; gap: 0.12em; white-space: nowrap; font-size: clamp(2.2rem, 7.4vw, 11rem); transition: color 0.45s, -webkit-text-stroke-color 0.45s, filter 0.45s; }
.ftr__mark { display: block; width: auto; height: 1.96em; flex: none; color: var(--text); filter: url(#ring); transform: translateY(-0.015em); transition: filter 0.45s, transform 0.45s var(--ease); }
.ftr__word:hover { color: transparent; -webkit-text-stroke-color: var(--signal); text-shadow: none; filter: drop-shadow(0 0 0.018em color-mix(in srgb, var(--signal) 48%, transparent)); }
.ftr__word:hover .ftr__mark { filter: url(#ring-hot); transform: translateY(-0.015em) scale(1.025); }

/* services dropdown: no underline bleed from the nav links, clear hover and focus states */
.dd a { text-decoration: none; background-image: none; position: relative; padding: 14px 16px 14px 20px; transition: background 0.2s, padding-left 0.25s var(--ease); }
.dd a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--signal); transform: scaleY(0); transition: transform 0.25s var(--ease); }
.dd a:hover, .dd a:focus-visible { background: var(--bg-3); padding-left: 24px; background-size: 0; }
.dd a:hover::before, .dd a:focus-visible::before { transform: scaleY(1); }
.dd a b { color: var(--text); }
.dd a span { color: var(--soft); }
[data-theme="light"] .dd a::before { background: var(--focus); }
/* the sticky header sits over the hero: keep hero furniture clear of it */
.hud__read { top: 10px; }
.hero__stage { padding-top: calc(var(--nav-h) + 40px); }
/* desktop composition: copy centred on the left, the emblem and its station column on the
   right, aligned to the same gutter as the header */
@media (min-width: 901px) {
  .hero__stage { align-items: center; }
  .hero__copy { max-width: min(860px, 44vw); }
  .hero__h1 { font-size: clamp(2.4rem, 0.9rem + 3.3vw, 5.4rem); }
  .hero__vis { top: calc(var(--nav-h) + 16px); height: calc(100% - var(--nav-h) - 16px); right: var(--gutter); width: calc(50vw - var(--gutter)); }
  .hero__labels li { right: auto; left: 0; transform: translateX(-6px); }
  .hero__labels li.is-on { transform: none; }
  .hero__labels li::after { transform-origin: left; }
}
@media (min-width: 901px) and (max-width: 1199px) { .hero__labels { display: none; } }

/* ---- inner page openers: the whole block fits the first screen at any size ----
   Type size follows the smaller of width and height, spacing follows height. */
.phero { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; padding-block: clamp(28px, 6vh, 80px) clamp(28px, 5vh, 64px); }
.phero > .wrap { width: 100%; }
.phero .crumbs { margin-bottom: clamp(14px, 3.2vh, 40px); }
.phero__h1 { font-size: clamp(2rem, min(0.8rem + 4.6vw, 9.6vh), 5.6rem); line-height: 1; max-width: 17em; }
.phero__lead { margin-top: clamp(14px, 2.6vh, 28px); max-width: 62ch; font-size: clamp(1rem, min(0.9rem + 0.45vw, 2.6vh), 1.35rem); }
.phero__meta { margin-top: clamp(10px, 1.8vh, 18px); }
.phero__cta { margin-top: clamp(16px, 3.2vh, 36px); }
/* the health check and privacy pages have shorter content: let them keep their natural height */
/* pricing and case study pages lead with their content, so the opener keeps its natural height too */
.page:has(.health) .phero, .page:has(.prose) .phero, .page:has(.price) .phero, .page:has(.case__p) .phero { min-height: 0; }
/* a short window (laptop with toolbars, landscape phone): tighten further */
@media (max-height: 700px) {
  .phero { padding-block: 20px 24px; }
  .phero__lead { max-width: 70ch; }
  .phero .crumbs { margin-bottom: 10px; }
  .crumbs a { min-height: 32px; }
}
.way__p { text-wrap: pretty; max-width: 42ch; }

/* ------------------------------------------------- everyday work (subscription) */
.everyday { border-bottom: 1px solid var(--line); }
.everyday__head { align-items: flex-end; }
.everyday__h { font-size: clamp(2rem, 1rem + 3.4vw, 4rem); max-width: 12em; margin-top: 1rem; }
.everyday__side { flex: 1 1 320px; max-width: 460px; }
.everyday__p { color: var(--soft); font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); line-height: 1.5; }
.everyday__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }
.everyday__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.everyday__item { position: relative; display: flex; flex-direction: column; gap: 0.7rem; min-height: 200px; padding: clamp(18px, 2vw, 28px); background: var(--bg-2); overflow-wrap: anywhere; }
.everyday__n { font: 500 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; color: var(--accent-ink); }
.everyday__item h3 { font: 650 1.2rem/1.15 var(--f-display); letter-spacing: -0.01em; }
.everyday__item p { color: var(--soft); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 1100px) { .everyday__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .everyday__item { min-height: 0; } }
@media (max-width: 560px) { .everyday__grid { grid-template-columns: minmax(0, 1fr); } }

.plans__note { margin-top: 0.8rem; color: var(--soft); max-width: 52ch; }
.plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1.6rem; background: var(--line); border: 1px solid var(--line); }
.plan { display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(20px, 2.4vw, 32px); background: var(--bg-2); }
.plan h3 { font: 650 1.5rem/1.1 var(--f-display); letter-spacing: -0.02em; }
.plan__fit { color: var(--soft); }
.plan ul { display: grid; gap: 0.5rem; margin-bottom: 0.8rem; }
.plan ul li { padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.plan .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .plans__grid { grid-template-columns: minmax(0, 1fr); } }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.4rem; }
.plan__price b { font: 650 clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem)/1 var(--f-brand); letter-spacing: -0.03em; }
.plan__price small, .plan__usd { font: 500 0.8rem/1.3 var(--f-mono); letter-spacing: 0.04em; color: var(--soft); }
.plan__usd { flex-basis: 100%; }