/* ==========================================================================
   Doing AI — design system
   One stylesheet. Every page links it. Tokens are defined here and nowhere
   else: if you find a raw hex outside the :root / [data-theme] blocks below,
   it is a bug.
   ========================================================================== */

/* --- Typefaces ------------------------------------------------------------
   Clash Display carries the headlines, Satoshi the body, Space Mono the
   micro-labels. Inter is gone: it is free, ubiquitous, and the single
   loudest signal that a page used a default rather than made a choice.
   All three were already in this repo, unused.
   ========================================================================== */

@font-face { font-family:'Clash Display'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/v/clash-500.woff2) format('woff2'); }
@font-face { font-family:'Clash Display'; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/v/clash-600.woff2) format('woff2'); }
@font-face { font-family:'Clash Display'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/v/clash-700.woff2) format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/v/satoshi-400.woff2) format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/v/satoshi-500.woff2) format('woff2'); }
@font-face { font-family:'Satoshi'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/v/satoshi-700.woff2) format('woff2'); }
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------
   Copper, in both modes. The accent cannot be one value: #D98A4F reaches
   7.31:1 on near-black but only 2.73:1 on white, so light mode uses a
   deeper copper (#96521C, 5.97:1) and carries a white label on fills while
   dark mode carries a black one. Same hue family, legible on both.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg:        #FFFFFF;
  --surface:   #F7F5F2;
  --surface-2: #F0EDE8;
  --surface-3: #E8E4DD;
  --bg-2:      #F7F5F2;
  --bg-3:      #F0EDE8;
  --bg-invert: #0F1110;

  --ink:        #14120F;   /* 18.4:1 */
  --ink-2:      #3E3A34;   /* 10.3:1 */
  --ink-3:      #6D675E;   /*  5.1:1 */
  --ink-4:      #8C857A;   /*  3.3:1 — large text only */
  --ink-invert: #F8F6F2;

  --rule:   #E6E2DA;
  --rule-2: #D5CFC4;

  --accent:       #96521C;   /* 5.97:1 on white */
  --accent-hover: #7E4718;   /* 7.50:1 */
  --accent-fill:  #96521C;   /* white on it: 5.97:1 */
  --on-accent:    #FFFFFF;
  --accent-wash:  #FBF2E9;
  --accent-line:  #E0C6A8;

  --focus: #96521C;

  --t-display: clamp(2.75rem, 1.05rem + 7.4vw, 6.75rem);
  --t-h1:      clamp(2.25rem, 1.25rem + 4.4vw, 4.5rem);
  --t-h2:      clamp(1.9rem, 1.2rem + 3.1vw, 3.5rem);
  --t-h3:      clamp(1.375rem, 1.1rem + 1.2vw, 1.9rem);
  --t-h4:      clamp(1.125rem, 1.03rem + 0.45vw, 1.4rem);
  --t-lead:    clamp(1.125rem, 1.02rem + 0.5vw, 1.5rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.75rem;

  --s1: 0.5rem;  --s2: 1rem;    --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;    --s7: 5.5rem;  --s8: 7rem;
  --s9: 9rem;    --s10: 12rem;

  --band: clamp(4.5rem, 2rem + 8vw, 9.5rem);

  --w-page:  1280px;
  --w-text:  62ch;
  --w-lead:  48ch;
  --gutter:  clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       560ms;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #08090A;
  --surface:   #101214;
  --surface-2: #16181B;
  --surface-3: #1D2024;
  --bg-2:      #101214;
  --bg-3:      #16181B;
  --bg-invert: #F7F8F8;

  --ink:        #F7F8F8;   /* 18.7:1 */
  --ink-2:      #B4B9BF;   /* 10.1:1 */
  --ink-3:      #7E858D;   /*  5.3:1 */
  --ink-4:      #5A6068;   /*  3.2:1 */
  --ink-invert: #08090A;

  --rule:   #1E2126;
  --rule-2: #2A2E34;

  --accent:       #D98A4F;   /* 7.31:1 on --bg */
  --accent-hover: #E9A470;
  --accent-fill:  #D98A4F;   /* black on it: 7.70:1 */
  --on-accent:    #08090A;
  --accent-wash:  #1C1309;
  --accent-line:  #5C3A1E;

  --focus: #D98A4F;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.65;
  font-feature-settings: 'ss01' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-wash); color: var(--ink); }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4,
.display, .h1, .h2, .h3, .claim, .statement, .quote, .fig-n, .stat .v, .readout .big {
  font-family: 'Clash Display', 'Satoshi', sans-serif;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 0.98;
}
.h1 { font-size: var(--t-h1); letter-spacing: -0.032em; line-height: 1.03; }
.h2 { font-size: var(--t-h2); letter-spacing: -0.028em; line-height: 1.06; }
.h3 { font-size: var(--t-h3); letter-spacing: -0.02em;  line-height: 1.15; }
.h4 { font-size: var(--t-h4); letter-spacing: -0.014em; line-height: 1.3; font-weight: 500; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.011em;
  max-width: var(--w-lead);
  text-wrap: pretty;
}

.prose { max-width: var(--w-text); text-wrap: pretty; }
.prose p + p { margin-top: 1.15em; }
.prose strong { color: var(--ink); font-weight: 500; }

.muted { color: var(--ink-3); }
.small { font-size: var(--t-small); line-height: 1.6; }

/* Eyebrow — the only place Space Mono is allowed to appear. */
.eyebrow {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  display: block;
}

.idx {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band-tight { padding-block: calc(var(--band) * 0.62); }
.band-sub { background: var(--bg-2); }
.band-line { border-top: 1px solid var(--rule); }

/* 12-column grid. Sections opt in; nothing is boxed by default. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s5);
}
/* Span sets the *end* edge only. If it set `grid-column` wholesale, a later
   `.start-N` would overwrite the start and leave the end at `auto` — which
   silently collapses the item to a single column. */
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-12 { grid-column-end: span 12; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }

@media (max-width: 900px) {
  .grid > [class*="col-"],
  .grid > [class*="start-"] { grid-column: 1 / span 12; }
  .grid { row-gap: var(--s4); }
}

/* Section head: label above, headline below, optional note to the right. */
.sec-head { margin-bottom: var(--s6); }
.sec-head .eyebrow { margin-bottom: var(--s3); }
.sec-head .lead { margin-top: var(--s3); }

/* --- Links & buttons ----------------------------------------------------- */

a { color: inherit; }

.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding-bottom: 1px;
  transition: border-color 180ms var(--ease-soft), color 180ms var(--ease-soft);
}
.link:hover { border-bottom-color: var(--accent); color: var(--accent-hover); }

/* Text link with a rule that grows — used for "next page" affordances. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.link-arrow::after {
  content: "→";
  color: var(--accent);
  transition: transform 260ms var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.78rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms var(--ease-soft), border-color 180ms var(--ease-soft),
              color 180ms var(--ease-soft), transform 180ms var(--ease-soft);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }


.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ghost:hover { border-color: var(--ink-4); background: var(--bg-2); }

.btn-invert { background: var(--bg-invert); color: var(--ink-invert); }
.btn-invert:hover { opacity: 0.88; }

.btn-lg { padding: 0.95rem 1.7rem; font-size: var(--t-body); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* --- Header -------------------------------------------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-soft), background 240ms var(--ease-soft);
}
.hdr[data-scrolled="true"] { border-bottom-color: var(--rule); }

.hdr-in {
  display: flex;
  align-items: center;
  gap: var(--s4);
  height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  margin-right: auto;
}

.nav { display: flex; align-items: center; gap: var(--s3); }
.nav a {
  text-decoration: none;
  color: var(--ink-3);
  font-size: var(--t-small);
  letter-spacing: -0.006em;
  transition: color 160ms var(--ease-soft);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.hdr-end { display: flex; align-items: center; gap: var(--s2); }

@media (max-width: 900px) {
  .nav { display: none; }
  .hdr-in { height: 4rem; }
  /* The CTA is 188px wide and does not fit beside the toggle and the menu
     button at 390px — it lives in the mobile sheet instead. */
  .hdr-end > .btn { display: none; }
}

/* Theme toggle — three states, understated. */
.theme {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--bg-2);
}
.theme button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: color 160ms var(--ease-soft), background 160ms var(--ease-soft);
}
.theme button:hover { color: var(--ink-2); }
.theme button[aria-pressed="true"] { background: var(--bg); color: var(--ink); }
.theme svg { width: 14px; height: 14px; }

/* Mobile menu */
.menu-btn {
  display: none;
  width: 36px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: transparent; color: var(--ink); cursor: pointer;
}
.menu-btn svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } }

.mobile {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  padding: var(--s3) 0 var(--s4);
}
.mobile[data-open="true"] { display: block; }
@media (min-width: 901px) { .mobile { display: none !important; } }
.mobile a {
  display: block;
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--rule);
}
.mobile .btn { margin-top: var(--s3); width: 100%; }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(4rem, 1rem + 11vw, 10rem) clamp(3rem, 1rem + 6vw, 6rem); }
.hero .display { max-width: 15ch; }
.hero .lead { margin-top: var(--s4); max-width: 52ch; }
.hero .actions { margin-top: var(--s5); }

/* A single sentence, set large, on its own. */
.statement {
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.026em;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--ink-4); }

/* --- Dark hero -----------------------------------------------------------
   Always dark, in both themes. It is the one place on the site that carries
   visual weight, so it must not invert with the colour scheme. All colours
   here are the *dark* palette values, hard-set for that reason.            */

.hero-dark {
  position: relative;
  background: #0C0D0F;
  color: #F5F6F7;
  overflow: hidden;
  isolation: isolate;
  /* Slide up under the sticky header so it can sit transparently over the
     art. A sticky element still occupies flow, hence the negative margin. */
  margin-top: -4.5rem;
  padding-top: 4.5rem;
}
@media (max-width: 900px) {
  .hero-dark { margin-top: -4rem; padding-top: 4rem; }
}

/* Header over the dark hero: transparent until scrolled, then the normal
   glassy header takes over against the light content below. */
body.has-dark-hero .hdr[data-scrolled="false"] {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.has-dark-hero .hdr[data-scrolled="false"] .brand { color: #FFFFFF; }
body.has-dark-hero .hdr[data-scrolled="false"] .nav a { color: rgba(245, 246, 247, 0.74); }
body.has-dark-hero .hdr[data-scrolled="false"] .nav a:hover,
body.has-dark-hero .hdr[data-scrolled="false"] .nav a[aria-current="page"] { color: #FFFFFF; }
body.has-dark-hero .hdr[data-scrolled="false"] .theme {
  background: rgba(245, 246, 247, 0.07);
  border-color: rgba(245, 246, 247, 0.18);
}
body.has-dark-hero .hdr[data-scrolled="false"] .theme button { color: rgba(245, 246, 247, 0.6); }
body.has-dark-hero .hdr[data-scrolled="false"] .theme button[aria-pressed="true"] {
  background: rgba(245, 246, 247, 0.16);
  color: #FFFFFF;
}
body.has-dark-hero .hdr[data-scrolled="false"] .menu-btn {
  color: #FFFFFF;
  border-color: rgba(245, 246, 247, 0.28);
}
.hero-dark .wrap { position: relative; z-index: 2; }
.hero-dark-in {
  min-height: min(86vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4.5rem, 2rem + 9vw, 8rem) clamp(2.5rem, 1rem + 4vw, 4rem);
}
.hero-dark h1 { color: #FFFFFF; max-width: 16ch; }
.hero-dark .lead { color: #C9CCD1; max-width: 50ch; margin-top: var(--s4); }
.hero-dark .actions { margin-top: var(--s5); }
.hero-dark .btn-ghost {
  color: #F5F6F7;
  border-color: rgba(245, 246, 247, 0.28);
  background: transparent;
}
.hero-dark .btn-ghost:hover {
  border-color: rgba(245, 246, 247, 0.6);
  background: rgba(245, 246, 247, 0.06);
}
.hero-dark .eyebrow { color: #93989F; }
.hero-dark .note { color: #93989F; }

/* The topology graphic. Decorative, so aria-hidden and pointer-events none. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 72%);
  mask-image: linear-gradient(100deg, transparent 34%, #000 72%);
}
.hero-art svg { width: 100%; height: 100%; }
.hero-art .n { fill: #5B93F2; }
.hero-art .n-dim { fill: #2C3138; }
.hero-art .e { stroke: #2C3138; stroke-width: 1; fill: none; }
.hero-art .e-a { stroke: #5B93F2; stroke-width: 1; fill: none; opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .hero-art .pulse { animation: pulse 4.5s var(--ease-soft) infinite; }
  .hero-art .pulse:nth-of-type(2) { animation-delay: 1.5s; }
  .hero-art .pulse:nth-of-type(3) { animation-delay: 3s; }
}
@keyframes pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Stat rail — sits at the foot of the hero. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(3rem, 1rem + 5vw, 5rem);
  padding-top: var(--s4);
  border-top: 1px solid rgba(245, 246, 247, 0.14);
}
.stat .v {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  font-weight: 500;
}
.stat .k {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-small);
  color: #93989F;
}
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; row-gap: var(--s3); }
  .stat { display: flex; align-items: baseline; gap: 0.8rem; }
  .stat .k { margin-top: 0; }
}

/* --- Client rail ---------------------------------------------------------- */

.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s6);
  list-style: none;
  padding: 0;
}
.rail li {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-3);
}

/* --- Quotes --------------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.quote-card { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.quote-card blockquote { font-size: var(--t-h4); line-height: 1.4; color: var(--ink); letter-spacing: -0.015em; }
.quote-card figcaption { margin-top: var(--s3); font-size: var(--t-small); color: var(--ink-3); }
.quote-card figcaption b { display: block; color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; row-gap: var(--s4); } }

/* --- Placeholder guard ---------------------------------------------------
   Anything still awaiting real content is loud on purpose. `npm`-free check:
   tools/check-placeholders.sh greps for data-placeholder before deploy.    */

[data-placeholder] {
  position: relative;
  outline: 2px dashed #B3261E;
  outline-offset: 6px;
  border-radius: var(--r-sm);
}
[data-placeholder]::before {
  content: "PLACEHOLDER — replace before deploy";
  position: absolute;
  top: -0.75rem;
  left: 0;
  transform: translateY(-100%);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  background: #B3261E;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* --- Editorial list — the replacement for cards --------------------------- */

.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.row .idx { padding-top: 0.35rem; }
.row h3 { font-size: var(--t-h4); }
.row p { color: var(--ink-3); max-width: 56ch; }

@media (max-width: 760px) {
  .row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .row p { grid-column: 2; }
}

/* --- Four-step sequence --------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--rule);
}
.step { padding-top: var(--s3); border-top: 2px solid var(--ink); margin-top: -1px; }
.step:nth-child(n+2) { border-top-color: var(--rule-2); }
.step h3 { font-size: var(--t-h4); margin-bottom: var(--s1); }
.step p { color: var(--ink-3); font-size: var(--t-small); }
.step .idx { display: block; margin-bottom: var(--s2); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* --- Stack list (understated tech credits) -------------------------------- */

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
  padding: 0;
  color: var(--ink-3);
  font-size: var(--t-small);
}

/* --- Definition pairs ----------------------------------------------------- */

.defs { display: grid; gap: var(--s4); }
.def { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.def h3 { font-size: var(--t-h4); margin-bottom: var(--s1); }
.def p { color: var(--ink-3); font-size: var(--t-small); }
.defs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.defs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
@media (max-width: 860px) { .defs-3, .defs-2 { grid-template-columns: 1fr; } }

/* --- Figures (line diagrams) ---------------------------------------------- */

.figure { color: var(--ink); }
.figure svg { width: 100%; height: auto; }
/* The diagram's 9px mono labels become illegible once the 960-unit viewBox
   is squeezed below ~680px. Let it scroll inside its own box instead of
   shrinking — and never let it widen the page. */
@media (max-width: 760px) {
  .figure { overflow-x: auto; }
  .figure svg { min-width: 660px; }
}
.figure figcaption {
  margin-top: var(--s3);
  font-size: var(--t-micro);
  font-family: 'Space Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dgm-line   { stroke: var(--rule-2); stroke-width: 1; fill: none; }
.dgm-line-a { stroke: var(--accent); stroke-width: 1; fill: none; }
.dgm-node   { stroke: var(--rule-2); stroke-width: 1; fill: var(--bg); }
.dgm-node-a { stroke: var(--accent); stroke-width: 1; fill: var(--bg); }
.dgm-fill   { fill: var(--ink); }
.dgm-text   {
  fill: var(--ink-3);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dgm-text-a { fill: var(--accent); }

/* --- Quote / perspective -------------------------------------------------- */

.quote {
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 34ch;
}

/* --- Work entries --------------------------------------------------------- */

.entry {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.entry:first-child { border-top: 1px solid var(--rule); }
.entry h3 { font-size: var(--t-h3); }
.entry .eyebrow { margin-bottom: var(--s2); }
.entry-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: var(--s3); }
.entry-meta span { font-size: var(--t-micro); color: var(--ink-4); font-family: 'Space Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 860px) { .entry { grid-template-columns: 1fr; row-gap: var(--s3); } }

/* --- Disclosure (FAQ) ----------------------------------------------------- */

.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s3);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: -0.016em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--ink-4);
  border-bottom: 1.5px solid var(--ink-4);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.qa .qa-body { padding-bottom: var(--s4); color: var(--ink-3); max-width: 66ch; }

/* --- Forms ---------------------------------------------------------------- */

.field { display: block; margin-bottom: var(--s3); }
.field > span {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-2);
  margin-bottom: 0.45rem;
  font-weight: 500;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  color: var(--ink);
  font-size: var(--t-small);
  transition: border-color 160ms var(--ease-soft), box-shadow 160ms var(--ease-soft);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field .err { display: none; margin-top: 0.4rem; font-size: var(--t-micro); color: #FF8A80; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #B3261E; }
.field[data-invalid="true"] .err { display: block; }

.check { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--t-small); color: var(--ink-3); }
.check input { margin-top: 0.28rem; width: 15px; height: 15px; accent-color: var(--accent-fill); flex: none; }

/* --- Footer --------------------------------------------------------------- */

.ftr { border-top: 1px solid var(--rule); padding-block: var(--s6) var(--s4); }
.ftr-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: var(--gutter);
  row-gap: var(--s5);
}
.ftr h4 {
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  margin-bottom: var(--s2);
}
.ftr ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.ftr ul a { text-decoration: none; color: var(--ink-3); font-size: var(--t-small); transition: color 160ms var(--ease-soft); }
.ftr ul a:hover { color: var(--ink); }
.ftr-base {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--t-micro);
  color: var(--ink-4);
}
@media (max-width: 860px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Interior pages ------------------------------------------------------- */

.page-head { padding-block: clamp(3.5rem, 1rem + 8vw, 7rem) clamp(2rem, 1rem + 3vw, 3.5rem); }
.page-head .eyebrow { margin-bottom: var(--s3); }
.page-head .lead { margin-top: var(--s4); }

/* Capability / long-form entry — same skeleton as .entry, more room. */
.cap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.cap:first-child { border-top: 1px solid var(--rule); }
.cap h3 { font-size: var(--t-h3); }
.cap .idx { display: block; margin-bottom: var(--s2); }
@media (max-width: 860px) { .cap { grid-template-columns: 1fr; row-gap: var(--s3); } }

.ticks { list-style: none; padding: 0; display: grid; gap: 0.55rem; margin-top: var(--s3); }
.ticks li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--t-small);
  color: var(--ink-3);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg);
}

/* Vertical sequence — the approach page's expanded stages. */
.seq { border-top: 1px solid var(--rule); }
.seq > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--gutter);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.seq h3 { font-size: var(--t-h3); margin-top: var(--s2); }
@media (max-width: 860px) { .seq > div { grid-template-columns: 1fr; row-gap: var(--s2); } }

.note { font-size: var(--t-small); color: var(--ink-4); }

/* --- Legal ---------------------------------------------------------------- */

.legal { max-width: 68ch; }
.legal section { margin-top: var(--s5); }
.legal h2 {
  font-size: var(--t-h4);
  margin-bottom: var(--s2);
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.legal h2 .idx { flex: none; }
.legal p + p, .legal ul + p { margin-top: 0.9em; }
.legal code {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.86em;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 0.1em 0.36em;
}
.legal ul { margin-top: 0.9em; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.legal li { color: var(--ink-3); }

/* --- Result panel (assessment tool) --------------------------------------- */

.result { display: none; }
.result[data-state="on"] { display: block; }
.result-kv { display: grid; gap: var(--s3); margin-top: var(--s4); }
.result-kv > div { border-top: 1px solid var(--rule); padding-top: var(--s2); }
.result-kv h4 {
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.spin {
  width: 14px; height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Motion --------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- Utilities ------------------------------------------------------------ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  z-index: 100;
}
.skip:focus { left: var(--gutter); top: 0.75rem; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hr { border: 0; border-top: 1px solid var(--rule); }
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }

/* ==========================================================================
   Density sections — industries, calculator, comparison, founder
   ========================================================================== */

/* --- Tiles: capability grid ----------------------------------------------
   A single-pixel grid drawn with gap + background, so cells read as one
   table rather than as floating cards.                                     */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tile { background: var(--bg); padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.tile .idx { display: block; margin-bottom: var(--s3); }
.tile h3 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.tile p { font-size: var(--t-small); color: var(--ink-3); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }

/* --- Industries ----------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s5);
}
.tabs button {
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-full, 999px);
  background: transparent;
  color: var(--ink-3);
  font-size: var(--t-small);
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms var(--ease-soft), background 160ms var(--ease-soft),
              border-color 160ms var(--ease-soft);
}
.tabs button:hover { color: var(--ink); border-color: var(--ink-4); }
.tabs button[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.panel-ind[hidden] { display: none; }
.ind-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.ind-head h3 { font-size: var(--t-h3); }

.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.case { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.case .eyebrow { margin-bottom: var(--s2); }
.case h4 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.case p { font-size: var(--t-small); color: var(--ink-3); }
.shift {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--s3);
  font-size: var(--t-micro);
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shift .from { color: var(--ink-4); text-decoration: line-through; }
.shift .to { color: var(--accent); }
@media (max-width: 860px) { .cases { grid-template-columns: 1fr; row-gap: var(--s4); } }

.built {
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.built b { color: var(--ink); font-weight: 500; }

/* --- Calculator ----------------------------------------------------------- */

.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.slider { margin-bottom: var(--s5); }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.slider-top label { font-size: var(--t-body); color: var(--ink); font-weight: 500; }
.slider-top output {
  font-family: 'Space Mono', monospace;
  font-size: 1.125rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.slider p { font-size: var(--t-small); color: var(--ink-3); margin-top: 0.35rem; }
.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin-top: var(--s3);
  background: var(--rule-2);
  border-radius: 2px;
  cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-fill);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent-fill);
  cursor: grab;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent-fill);
  border: 3px solid var(--bg);
  cursor: grab;
}

.readout { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--bg-2); }
.readout .big {
  display: block;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.readout .unit { display: block; margin-top: var(--s2); color: var(--ink-3); font-size: var(--t-small); }
.readout hr { margin-block: var(--s4); }

/* --- Comparison ----------------------------------------------------------- */

.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.cmp th, .cmp td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--rule); vertical-align: top; font-size: var(--t-small); }
.cmp thead th {
  font-family: 'Space Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  border-bottom-color: var(--rule-2);
}
.cmp tbody th { color: var(--ink); font-weight: 500; width: 22%; }
.cmp td { color: var(--ink-3); }
.cmp .us { background: var(--accent-wash); color: var(--ink-2); }
.cmp thead .us { color: var(--accent); font-weight: 700; }

/* --- Founder -------------------------------------------------------------- */

.founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }
.avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--bg);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
}

/* ==========================================================================
   site6 — the layer that stops this reading as a template.
   Dark only. One signal colour. Surfaces that separate by light, not shadow.
   ========================================================================== */

/* Grain. Two percent of noise is the difference between "flat dark div" and
   "a surface". Fixed so it never scrolls, and inert to pointer events. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 2; }

/* Buttons — the signal colour carries black, which is the whole point of
   choosing a colour bright enough to invert on. */
.btn-primary { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { color: var(--ink); border-color: var(--rule-2); background: transparent; }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--surface-2); }

.link { color: var(--accent); border-bottom-color: var(--accent-line); }
.link:hover { color: var(--accent-hover); border-bottom-color: var(--accent); }
.link-arrow { color: var(--ink); }
.link-arrow::after { color: var(--accent); }

/* Header sits on the page rather than over a light one. */
.hdr { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.hdr[data-scrolled="true"] { border-bottom-color: var(--rule); }
.brand { color: var(--ink); }

/* Hero — the accent bleeds in as light, not as a gradient sheet. */
.hero-dark { background: var(--bg); }
.hero-dark::after {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 70%; aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 62%);
}
.hero-art { opacity: 0.4; }
.hero-art .n { fill: var(--accent); }
.hero-art .e-a { stroke: var(--accent); }
.hero-art .n-dim { fill: #2A2E34; }
.hero-art .e { stroke: #1E2126; }

.stats { border-top-color: var(--rule-2); }
.stat .v { color: var(--ink); }
.stat .k { color: var(--ink-3); }
/* The lead number gets the signal colour. Only the first — a page where
   everything is highlighted has nothing highlighted. */
.stat:first-child .v { color: var(--accent); }

/* Bands: separation by surface level. No shadows anywhere on this site. */
.band-sub { background: var(--surface); }
.band-line { border-top-color: var(--rule); }

/* Surfaces */
.panel, .readout { background: var(--surface); border-color: var(--rule); }
.tiles, .errc { background: var(--rule); border-color: var(--rule); }
.tile, .errc > div, .sector { background: var(--surface); }
.band-sub .tile, .band-sub .errc > div, .band-sub .sector { background: var(--surface-2); }

/* A hairline of signal on the left of each tile, revealed on hover. */
.tile { position: relative; transition: background 200ms var(--ease-soft); }
.tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms var(--ease);
}
.tile:hover { background: var(--surface-2); }
.tile:hover::before { transform: scaleY(1); }

/* Indices and eyebrows carry the signal, quietly. */
.idx { color: var(--accent); opacity: 0.75; }
.eyebrow { color: var(--ink-3); }
.sec-head .eyebrow { color: var(--accent); }

/* Tabs */
.tabs button { border-color: var(--rule-2); color: var(--ink-3); }
.tabs button:hover { color: var(--ink); border-color: var(--ink-4); }
.tabs button[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}

/* Industry cases */
.case { border-top-color: var(--rule); }
.shift .from { color: var(--ink-4); }
.shift .to { color: var(--accent); }
.built { background: var(--surface-2); border-left-color: var(--accent); color: var(--ink-2); }
.built b { color: var(--ink); }

/* Calculator */
.slider input[type="range"] { background: var(--rule-2); }
.slider input[type="range"]::-webkit-slider-thumb {
  background: var(--accent); border-color: var(--bg); box-shadow: 0 0 0 1px var(--accent);
}
.slider input[type="range"]::-moz-range-thumb { background: var(--accent); border-color: var(--bg); }
.slider-top output { color: var(--accent); }
.readout .big { color: var(--ink); }
.readout .big, .fig-n { font-variant-numeric: tabular-nums; }

/* Comparison — our column is the only lit one. */
.cmp thead th { color: var(--ink-4); }
.cmp tbody th { color: var(--ink); }
.cmp td { color: var(--ink-3); }
.cmp th, .cmp td { border-bottom-color: var(--rule); }
.cmp .us { background: var(--accent-wash); color: var(--ink-2); }
.cmp thead .us { color: var(--accent); }

/* Steps, defs, rows, entries */
.step { border-top-color: var(--rule-2); }
.step:first-child { border-top-color: var(--accent); }
.def, .guard, .quote-card { border-top-color: var(--rule); }
.quote-card { border-top-color: var(--accent); }
.row, .rows, .cap, .entry, .packs, .pack, .qa, .qa details { border-color: var(--rule); }

/* Diagrams */
.dgm-line { stroke: var(--rule-2); }
.dgm-line-a { stroke: var(--accent); }
.dgm-node { stroke: var(--rule-2); fill: var(--surface); }
.dgm-node-a { stroke: var(--accent); fill: var(--surface); }
.dgm-text { fill: var(--ink-3); }
.dgm-text-a { fill: var(--accent); }

/* Forms */
.field input, .field select, .field textarea { background: var(--surface); border-color: var(--rule-2); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash);
}
.check input { accent-color: var(--accent); }

/* Footer */
.ftr { border-top-color: var(--rule); }
.ftr h4 { color: var(--ink-4); }

/* Theme toggle is gone — the site has one surface on purpose. */
.theme { display: none; }

/* ==========================================================================
   site7 — the ontology is the product, so it gets the page's centre.
   ========================================================================== */

.stack-diagram { display: grid; gap: 2px; }
.layer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.9rem) clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: var(--s2) var(--gutter);
  align-items: baseline;
}
.layer h3 { font-size: var(--t-h4); }
.layer p { font-size: var(--t-small); color: var(--ink-3); }
.layer .idx { grid-column: 1 / -1; }
/* The ontology layer is the one that is ours and the one that is yours at
   the same time. It gets the signal colour; nothing else in the stack does. */
.layer-key { border-color: var(--accent-line); background: var(--accent-wash); }
.layer-key h3 { color: var(--accent); }
.layer-key p { color: var(--ink-2); }
.layer-muted { background: transparent; border-style: dashed; }
.layer-muted h3 { color: var(--ink-3); }
@media (max-width: 700px) { .layer { grid-template-columns: 1fr; } }

.stack-arrow {
  display: grid;
  place-items: center;
  height: 26px;
  color: var(--ink-4);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
}

/* Object grid — the vocabulary of an institution, shown rather than described. */
.objects { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s3); }
.objects span {
  font-family: 'Space Mono', monospace;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-3);
}
.objects span.on { border-color: var(--accent-line); color: var(--accent); background: var(--accent-wash); }


/* ==========================================================================
   Brand lockup — the real one, lifted from the live site.
   Two overlapping rounded squares plus a drawn "AI". The second square and
   the AI glyph both take var(--accent), so the mark re-colours itself per
   variation without a second asset.
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-size: 1.0625rem;
  text-decoration: none;
  margin-right: auto;
}
.mark { width: 1.12em; height: 1.12em; flex: none; overflow: visible; }
.mark rect { fill: none; stroke-width: 16; }
.mark .a { stroke: currentColor; }
.mark .b { stroke: var(--accent); }
.brand-word { display: inline-flex; align-items: baseline; gap: 0.24em; }
.ai { height: 0.66em; margin-left: 0.08em; }
.ai path, .ai circle, .ai rect { fill: var(--accent); }
.ftr .brand { margin-right: 0; }

/* ==========================================================================
   Dual-mode corrections.
   Three things in the layers above assume a dark page and do not simply
   follow the tokens. Each is restated per mode.
   ========================================================================== */

/* 1. Grain. Dark noise at dark-mode opacity reads as dirt on white. */
body::before { opacity: 0.014; }
[data-theme="dark"] body::before,
:root[data-theme="dark"] body::before { opacity: 0.022; }

/* 2. The hero is dark in BOTH modes — it is the one place the page inverts,
      so every value in it is stated outright rather than inherited. It also
      keeps the dark copper, because the light copper is invisible on black. */
.hero-dark { background: #08090A; color: #F7F8F8; }
.hero-dark::after { background: radial-gradient(circle, rgba(217,138,79,0.16) 0%, transparent 62%); }
.hero-dark .display, .hero-dark h1 { color: #FFFFFF; }
.hero-dark .lead { color: #B4B9BF; }
.hero-dark .eyebrow, .hero-dark .note { color: #7E858D; }
.hero-dark .statement { color: #F7F8F8; }
.hero-dark .btn-primary { background: #D98A4F; color: #08090A; }
.hero-dark .btn-primary:hover { background: #E9A470; }
.hero-dark .btn-ghost { color: #F7F8F8; border-color: rgba(247,248,248,0.28); background: transparent; }
.hero-dark .btn-ghost:hover { border-color: rgba(247,248,248,0.6); background: rgba(247,248,248,0.06); }
.hero-dark .stats { border-top-color: rgba(247,248,248,0.14); }
.hero-dark .stat .v { color: #FFFFFF; }
.hero-dark .stat:first-child .v { color: #D98A4F; }
.hero-dark .stat .k { color: #7E858D; }
.hero-art { opacity: 0.42; }
.hero-art .n { fill: #D98A4F; }
.hero-art .e-a { stroke: #D98A4F; }
.hero-art .n-dim { fill: #2A2E34; }
.hero-art .e { stroke: #1E2126; }

/* 3. Header rides transparent over the dark hero in light mode too, then
      hands back to the normal glassy header once scrolled. */
body.has-dark-hero .hdr[data-scrolled="false"] {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.has-dark-hero .hdr[data-scrolled="false"] .brand { color: #FFFFFF; }
body.has-dark-hero .hdr[data-scrolled="false"] .nav a { color: rgba(247,248,248,0.74); }
body.has-dark-hero .hdr[data-scrolled="false"] .nav a:hover,
body.has-dark-hero .hdr[data-scrolled="false"] .nav a[aria-current="page"] { color: #FFFFFF; }
body.has-dark-hero .hdr[data-scrolled="false"] .theme {
  background: rgba(247,248,248,0.07); border-color: rgba(247,248,248,0.18);
}
body.has-dark-hero .hdr[data-scrolled="false"] .theme button { color: rgba(247,248,248,0.6); }
body.has-dark-hero .hdr[data-scrolled="false"] .theme button[aria-pressed="true"] {
  background: rgba(247,248,248,0.16); color: #FFFFFF;
}
body.has-dark-hero .hdr[data-scrolled="false"] .menu-btn {
  color: #FFFFFF; border-color: rgba(247,248,248,0.28);
}

/* The toggle is back, so it must be visible again. */
.theme { display: inline-flex; }

/* ==========================================================================
   Product surface.
   Built in HTML/CSS rather than shipped as an image: it stays crisp at any
   resolution, follows the theme, and is honestly a representative mockup —
   real structure, replaced data — which the caption states outright.
   ========================================================================== */

.shot {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); flex: none; }
.shot-bar span {
  margin-left: 0.6rem;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.shot-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 820px) { .shot-body { grid-template-columns: 1fr; } }

.shot-list { border-right: 1px solid var(--rule); }
@media (max-width: 820px) { .shot-list { border-right: 0; border-bottom: 1px solid var(--rule); } }
.shot-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-small);
}
.shot-row:last-child { border-bottom: 0; }
.shot-row.on { background: var(--accent-wash); }
.shot-row b { color: var(--ink); font-weight: 500; flex: 1; letter-spacing: -0.01em; }
.pill {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.pill-done { border-color: transparent; background: var(--accent-wash); color: var(--accent); }
.pill-hold { border-color: var(--rule-2); color: var(--ink-4); }

.shot-detail { padding: 1.4rem 1.5rem; display: grid; gap: 1.1rem; align-content: start; }
.shot-detail h4 {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 400;
  margin-bottom: 0.4rem;
}
.shot-detail p { font-size: var(--t-small); color: var(--ink-2); }
.shot-step { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-small); color: var(--ink-2); }
.shot-step::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--accent);
}
.shot-cite {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  border-left: 2px solid var(--accent);
  padding-left: 0.7rem;
  line-height: 1.5;
}
.shot-note {
  margin-top: var(--s3);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --- Compact surface -------------------------------------------------------
   Three of these side by side is the ontology argument made visually: the
   rows are structurally identical, only the nouns and the definition of
   "done" change. Shown together rather than tabbed, because the comparison
   IS the point and tabs hide two thirds of it.                              */

.shots-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 980px) { .shots-3 { grid-template-columns: 1fr; } }

.shot-mini .shot-bar { padding: 0.55rem 0.8rem; }
.shot-mini .shot-bar i { width: 7px; height: 7px; }
.shot-mini .shot-row { padding: 0.62rem 0.85rem; font-size: 0.875rem; gap: 0.5rem; }
.shot-mini .pill { font-size: 9px; padding: 0.14rem 0.4rem; }
.shot-mini .shot-foot {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid var(--rule);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.shot-mini .shot-foot b { color: var(--accent); font-weight: 400; }

.shot-cap {
  margin-top: var(--s2);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --- Client rail ----------------------------------------------------------
   Names set in type, not logos. We do not hold their brand assets, and
   redrawing a logo badly is worse than not showing one. Names in the site's
   own display face read deliberate rather than improvised.                 */

.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) clamp(1.75rem, 1rem + 3vw, 3.75rem);
  list-style: none;
  padding: 0;
}
.clients li {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 200ms var(--ease-soft);
}
.clients li:hover { color: var(--ink); }

/* ==========================================================================
   LAYOUT A — Console.
   The company builds operations consoles, so the site is laid out like one:
   a persistent left rail for wayfinding, a scrolling work pane on the right,
   and panels with their own header bars. The grammar of the site matches
   the grammar of the product.
   ========================================================================== */

body.console { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: var(--s4) var(--s3);
  gap: var(--s5);
}
.rail .brand { font-size: 1rem; margin-right: 0; }
.rail-nav { display: grid; gap: 2px; margin-top: auto; margin-bottom: auto; }
.rail-nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-3);
  font-size: var(--t-small);
  transition: background 160ms var(--ease-soft), color 160ms var(--ease-soft);
}
.rail-nav a::before {
  content: attr(data-n);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
}
.rail-nav a:hover { color: var(--ink); background: var(--surface-2); }
.rail-nav a.on { color: var(--ink); background: var(--surface-2); }
.rail-nav a.on::before { color: var(--accent); }
.rail-foot { display: grid; gap: var(--s2); }
.rail-foot .btn { width: 100%; }
.rail-meta { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--ink-4); }

.pane { min-width: 0; }

/* Panels: each section wears a header bar, like a pane in a real console. */
.panel-sec { border-bottom: 1px solid var(--rule); }
.panel-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0.75rem clamp(1.25rem, 1rem + 2vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.panel-head b { color: var(--accent); font-weight: 400; }
.panel-body { padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(1.25rem, 1rem + 2vw, 2.75rem); }
.panel-body > * + * { margin-top: var(--s4); }

.console-hero { padding-block: clamp(4rem, 2rem + 8vw, 8rem); }
.console-hero .claim { max-width: 20ch; }

@media (max-width: 900px) {
  body.console { grid-template-columns: 1fr; }
  .rail {
    position: static; height: auto; flex-direction: row; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s2) var(--s3); gap: var(--s3);
  }
  .rail-nav { display: none; }
  .rail-foot { margin-left: auto; }
  .rail-foot .rail-meta { display: none; }
  .panel-head { top: 0; }
}