/* ───────── Fonts — Archivo, Geist and IBM Plex Mono (SIL OFL 1.1, see fonts/), self-hosted ───────── */
/* Archivo, variable in weight and width: expanded for headlines and the wordmark. */
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-wdth.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  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; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-wdth-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  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; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-400-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap;
  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; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-500-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ───────── KAVKA — design system 01: industrial warm ───────── */
:root {
  --paper: #F3F4F2;          /* neutral light grey, like an instrument housing */
  --graphite: #232524;       /* type and the dark section */
  --graphite-2: #3A3D3B;     /* button hover */
  --orange: #FF4F00;         /* International Orange: marks, lines, active states. Near 5% of the surface. */
  --steel: #8E9490;          /* figure strokes and secondary marks, never body text */
  --line: #D8DAD6;           /* separators between data, not between sections */
  --surface: #E8E9E6;        /* panels and figures */

  --ink-1: #404442;          /* descriptive text, 9.5:1 on paper: one step lighter than type */
  --ink-2: #565A57;          /* meta text, 6:1 on paper */
  --ink-3: #6E7471;          /* large display numerals, 4.6:1 on paper */
  --orange-text: #B33700;    /* orange for small text: 5.3:1 on paper, 4.9:1 on surface */
  --on-dark: #F3F4F2;
  --on-dark-2: #B8BCB8;      /* secondary text on graphite, 8:1 */
  --orange-on-dark: #FF7A3D; /* small orange text on graphite, 5.5:1 */
  --line-on-dark: rgba(243, 244, 242, .16);

  --display: "Archivo", "Geist", ui-sans-serif, system-ui, sans-serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale: seven steps, each with one role. Figures (bars, axes, captions, demo labels)
     use --fs-fig; nothing else sits between the steps. */
  --fs-fig: 12px;                        /* figure text */
  --fs-small: 15px;                      /* interface and meta: nav, buttons, labels, footer */
  --fs-body: 17px;                       /* running text */
  --fs-lead: 20px;                       /* intros, ledes, small headings */
  --fs-h3: clamp(22px, 2vw, 28px);       /* item headings */
  --fs-statement: clamp(28px, 2.8vw, 40px); /* statements and case titles */
  --fs-h2: clamp(36px, 5vw, 74px);       /* section headings, the contact address */
  --fs-h1: clamp(48px, 9.2vw, 144px);    /* the hero, sized for the 122% width of its face */
  --fs-h4: var(--fs-lead);

  /* Spacing scale: every margin, padding and gap is one of these. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;

  --radius: 4px;
  /* Side margin: 4vw on small screens, opening up to 96px on wide ones so the content sits in a calmer frame. */
  --gutter: clamp(16px, max(4vw, 13vw - 90px), 96px);
  --max: 1280px;
  --cols: 12;
  --col-gap: clamp(16px, 2vw, 32px);
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font: 400 var(--fs-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
/* Headlines are set wide, like the labels on an instrument; body text stays in Geist. */
h1, h2 { font-family: var(--display); font-stretch: 118%; font-weight: 560; letter-spacing: -0.035em; line-height: .95; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--paper); }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
/* Mono is for figure data only: bars, axes, captions, statuses. Never as a heading label. */
.mono { font-family: var(--mono); font-size: var(--fs-fig); font-weight: 400; letter-spacing: 0; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--graphite); color: var(--paper); padding: var(--s-2) var(--s-3); }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-4);
  background: var(--graphite); color: var(--paper); border: 1px solid var(--graphite); border-radius: var(--radius);
  font: 500 var(--fs-small)/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
/* Interaction stays in graphite; orange is reserved for signal marks in figures. */
.btn:hover { background: var(--graphite-2); border-color: var(--graphite-2); }
.btn:active { background: var(--graphite); border-color: var(--graphite); }
.btn-ghost { background: transparent; color: var(--graphite); border-color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface); color: var(--graphite); border-color: var(--graphite); }
.btn-ghost:active { background: var(--line); }
.btn-small { min-height: 36px; padding: 0 var(--s-3); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }

/* ───────── Nav ───────── */
/* No colour transition: fading between dark and light passes through grey on every jump. */
.nav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid transparent; }
.nav .links a, .nav .menu { transition: none; }
/* Over the hero the bar takes the hero's colour, so the first screen reads as one dark scene. */
.nav.is-dark { background: var(--graphite); color: var(--on-dark); }
.nav.is-dark :focus-visible { outline-color: var(--orange-on-dark); }
.nav.is-dark .menu { color: var(--on-dark); border-color: var(--line-on-dark); }
@media (min-width: 861px) {
  .nav.is-dark .links a:not(.btn) { color: var(--on-dark-2); }
  .nav.is-dark .links a:not(.btn):hover { color: var(--on-dark); }
  .nav.is-dark .links .btn { background: var(--paper); color: var(--graphite); border-color: var(--paper); }
  .nav.is-dark .links .btn:hover { background: #DCDEDA; border-color: #DCDEDA; }
}
.nav.is-scrolled:not(.is-dark) { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.brand { font: 700 18px/1 var(--display); font-stretch: 125%; letter-spacing: .04em; text-decoration: none; }
/* Wordmark KΛVKΛ: both A's are inverted V's (no crossbar). The orange square belongs to the
   short mark (favicon) only. */
.wordmark { display: inline-flex; align-items: flex-start; white-space: nowrap; }
.wordmark .lam { display: inline-block; transform: rotate(180deg); }
.links { display: flex; align-items: center; gap: var(--s-5); }
.links a:not(.btn) { font-size: var(--fs-small); text-decoration: none; color: var(--ink-1); transition: color .2s; }
.links a:not(.btn):hover { color: var(--graphite); }
.menu { display: none; font: 500 var(--fs-small)/1 var(--sans); background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--s-3); min-height: 40px; color: var(--graphite); cursor: pointer; }

/* ───────── Figures — one shared frame: a bar on top, a caption below ───────── */
.fig-bar { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-fig); }
figure { margin: 0; }
figure > figcaption.mono { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-fig); }

/* ───────── Hero: the live demo is the whole first screen, the headline sits on it ───────── */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(600px, calc(100svh - var(--nav-h))); overflow: hidden;
  background: var(--graphite); color: var(--on-dark);
}
.hero-copy {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 21em; column-gap: clamp(32px, 4vw, 64px);
  align-items: end; padding-top: 40vh; padding-bottom: clamp(32px, 7vh, 72px); pointer-events: none;
}
.hero h1 { font-size: var(--fs-h1); font-stretch: 122%; letter-spacing: -0.045em; line-height: .88; }
.hero-text { padding-bottom: var(--s-2); }
.hero-copy a { pointer-events: auto; }
.lede { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-dark-2); max-width: 26em; }
.hero .actions { margin-top: var(--s-5); }
.hero :focus-visible { outline-color: var(--orange-on-dark); }
.hero .btn { background: var(--paper); color: var(--graphite); border-color: var(--paper); }
.hero .btn:hover { background: #DCDEDA; border-color: #DCDEDA; }
.hero .btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(243, 244, 242, .45); }
.hero .btn-ghost:hover { background: rgba(243, 244, 242, .08); border-color: var(--on-dark); }

/* The canvas fills the hero. Its path keeps to the region set by --path-*, clear of the headline,
   and a shade under the copy keeps the type readable when the target passes behind it. */
.demo { position: absolute; inset: 0; }
.demo canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y;
  --path-x: .58; --path-y: .38; --path-ax: .27; --path-ay: .22;
}
.demo canvas:focus-visible { outline-offset: -4px; }
.demo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--graphite) 0%, rgba(35, 37, 36, .72) 30%, rgba(35, 37, 36, 0) 58%);
}
.demo-panel {
  position: absolute; z-index: 1; top: 0; left: 0; right: 0; padding-top: var(--s-5);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-5); align-items: start;
  color: var(--on-dark-2); pointer-events: none;
}
.demo-panel a { pointer-events: auto; }
.demo-title { color: var(--on-dark); }
.demo-stats { grid-column: 2; grid-row: 1; display: grid; gap: var(--s-3); margin: 0; text-align: right; }
.demo-stats dt { font-size: var(--fs-fig); color: var(--on-dark-2); }
.demo-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 500; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.demo figcaption.mono { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-fig); max-width: 64em; }
.legend { display: inline-flex; align-items: center; gap: var(--s-2); }
.key { display: inline-block; width: 10px; height: 10px; }
.key-obs { background: var(--on-dark-2); width: 6px; height: 6px; }
.key-est { background: var(--on-dark); height: 2px; width: 16px; }
.key-pred { background: var(--orange); height: 2px; width: 16px; }
/* Sits above the copy: the first thing to know is that the panel behind it is live. */
.demo-hint { margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-on-dark); max-width: 26em; color: var(--on-dark-2); font-size: var(--fs-small); line-height: 1.5; }
.demo-hint a, .research-note a { color: var(--on-dark); text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* ───────── Sections ───────── */
.section { padding: clamp(64px, 10vw, 160px) 0; }
.section-head {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap);
  align-items: end; margin-bottom: clamp(40px, 5.5vw, 80px);
}
.section-label { grid-column: 1 / -1; margin-bottom: var(--s-4); font-size: var(--fs-small); color: var(--ink-2); }
.section-head h2 { grid-column: 1 / span 8; font-size: var(--fs-h2); }
.section-head .intro { grid-column: 9 / -1; color: var(--ink-1); font-size: var(--fs-lead); line-height: 1.55; max-width: 26em; }
.section-head .actions { grid-column: 1 / -1; }
.section-head--stack h2 { grid-column: 1 / span 9; }
.section-head--stack .intro { grid-column: 1 / span 6; margin-top: var(--s-4); }

/* ───────── 01 Capabilities ───────── */
/* The four areas share one plate, like a figure in a paper: every panel visible at once,
   divided by rules, read side by side. The hero stays the page's one loud moment. */
.plate {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.plate-cell { background: var(--paper); padding-bottom: var(--s-5); }
.plate-cell figure { background: var(--surface); border-bottom: 1px solid var(--line); }
.plate-cell h3 { margin: var(--s-5) var(--s-5) 0; font-size: var(--fs-h3); }
.plate-cell p { margin: var(--s-2) var(--s-5) 0; max-width: 30em; color: var(--ink-1); }
.plate-note { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-fig); }
.cf { width: 100%; height: auto; max-height: 280px; padding: var(--s-3) var(--s-3) var(--s-2); }

.cf * { vector-effect: non-scaling-stroke; }
.cf-axis, .cf-axis path { fill: none; stroke: var(--graphite); stroke-width: 1; }
.cf-ticks path { stroke: var(--steel); stroke-width: 1; }
.cf-text text { font: 400 11px var(--mono); fill: var(--ink-2); }
.cf-accent text { fill: var(--orange-text); font-weight: 500; }
.cf-line { fill: none; stroke: var(--graphite); stroke-width: 2; }
.cf-alt { stroke: var(--orange); }
.cf-mark { stroke: var(--orange); stroke-width: 1; stroke-dasharray: 4 4; }
.cf-dot { fill: var(--orange); }
.cf-part rect { fill: var(--paper); stroke: var(--steel); stroke-width: 1; }
.cf-flaw { fill: none; stroke: var(--orange); stroke-width: 2; }
.cf-box rect { fill: none; stroke: var(--graphite); stroke-width: 1; }
.cf-box-hit { fill: none; stroke: var(--orange); stroke-width: 2; }
.cf-band { fill: var(--orange); opacity: .12; }
.cf-ring { fill: none; stroke: var(--orange); stroke-width: 1.5; }
.cf-block rect { fill: var(--paper); stroke: var(--graphite); stroke-width: 1; }
.cf-wire, .cf-arrow { fill: none; stroke: var(--graphite); stroke-width: 1; }
.cf-track rect { fill: var(--line); }
.cf-fill rect { fill: var(--graphite); }
.cf-limit { stroke: var(--orange); stroke-width: 2; }

/* ───────── 02 Approach ───────── */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--col-gap);
}
/* Phases share row tracks: time, title, text and outcome line up across columns.
   The top bar is a timeline: the sprint is the one fixed, committed segment (solid orange);
   later phases are scoped from its results, so their bar is dashed. */
.steps li { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; padding-top: var(--s-4); }
.steps li::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--col-gap)); top: 0; border-top: 2px dashed var(--steel); }
.steps li:last-child::before { right: 0; }
.steps .step--fixed::before { border-top: 4px solid var(--orange); top: -1px; }
.step-time { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); color: var(--ink-2); font-size: var(--fs-small); }
.step--fixed .step-time { color: var(--orange-text); }
.step-num { font: 600 var(--fs-h3)/1 var(--display); font-stretch: 118%; letter-spacing: -0.02em; color: var(--graphite); }
.steps h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.steps p { color: var(--ink-1); }
.steps .step-out { padding-top: var(--s-4); margin-top: var(--s-1); border-top: 1px solid var(--line); color: var(--graphite); font-size: var(--fs-body); }
/* The one commitment, said plainly on a rule: not a boxed banner. */
.sprint-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6);
  margin-top: clamp(56px, 7vw, 88px); padding-top: var(--s-5); border-top: 1px solid var(--graphite);
}
.sprint-cta p { max-width: 30em; font: 500 var(--fs-h3)/1.3 var(--sans); letter-spacing: -0.015em; }

/* ───────── Work: the founder's results, as a table of facts and one case ───────── */
.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--graphite); }
.results li {
  display: grid; grid-template-columns: 72px minmax(0, 4fr) minmax(0, 2fr) minmax(0, 6fr); column-gap: var(--col-gap);
  align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.result-year { color: var(--ink-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.result-event h3 { font-size: var(--fs-h4); letter-spacing: -0.02em; }
.result-event p { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--fs-small); }
.result-place { font: 600 var(--fs-lead)/1.2 var(--display); font-stretch: 118%; letter-spacing: -0.02em; }
.result-built { color: var(--ink-1); max-width: 34em; }
.result-built strong { font-weight: 500; color: var(--graphite); }

.case {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap);
  margin-top: clamp(48px, 6vw, 80px);
}
.case h3 { grid-column: 1 / span 5; font: 600 var(--fs-statement)/1.08 var(--display); font-stretch: 112%; letter-spacing: -0.025em; text-wrap: balance; }
.case-text { grid-column: 7 / -1; display: grid; gap: var(--s-3); max-width: 36em; color: var(--ink-1); }
.case-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.case-links a { color: var(--graphite); text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* ───────── 03 Research (the dark section) ───────── */
.section--dark { background: var(--graphite); color: var(--on-dark); border-top: 0; }
.section--dark :focus-visible { outline-color: var(--orange-on-dark); }
.section--dark .section-label, .section--dark .section-head .intro { color: var(--on-dark-2); }
.research { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.research-text { grid-column: 1 / span 6; }
.directions { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line-on-dark); }
.directions li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: baseline;
  padding: var(--s-4) 0; border-top: 1px solid var(--line-on-dark);
}
.directions h3 { font-size: var(--fs-h4); letter-spacing: -0.02em; margin-bottom: var(--s-2); }
.directions p { color: var(--on-dark-2); }
.status { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--orange-on-dark); font-size: var(--fs-fig); }
.status::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.status--quiet { color: var(--on-dark-2); }
.research-note { margin-top: var(--s-4); color: var(--on-dark-2); font-size: var(--fs-small); max-width: 34em; }
.repr { grid-column: 8 / -1; position: sticky; top: calc(var(--nav-h) + 24px); border: 1px solid var(--line-on-dark); border-radius: var(--radius); }
.repr .fig-bar, .repr figcaption.mono { color: var(--on-dark-2); border-color: var(--line-on-dark); }
.repr canvas { width: 100%; aspect-ratio: 1 / 1; }

/* ───────── 04 Company ───────── */
.company { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); }
.statement { grid-column: 1 / span 10; font: 500 var(--fs-statement)/1.25 var(--sans); letter-spacing: -0.022em; text-wrap: pretty; }
.company-text { grid-column: 1 / span 6; display: grid; align-content: start; gap: var(--s-3); color: var(--ink-1); max-width: 34em; }
.facts { grid-column: 8 / -1; display: grid; grid-template-columns: 112px minmax(0, 1fr); margin: 0; }
.facts dt, .facts dd { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--ink-2); font-size: var(--fs-small); }
.facts dd { margin: 0; }
.facts a { text-decoration-color: var(--orange); text-underline-offset: 3px; transition: color .2s; }
.facts a:hover { color: var(--orange-text); }

/* ───────── 05 Contact ───────── */
.section--contact .section-head h2 { grid-column: 1 / span 9; }
.section--contact .section-head .intro { grid-column: 1 / span 7; margin-top: var(--s-5); font-size: var(--fs-lead); max-width: 32em; }
.contact-line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: clamp(32px, 4vw, 56px); }
.contact-email {
  font: 600 var(--fs-h2)/1.05 var(--display); font-stretch: 118%; letter-spacing: -0.03em;
  color: var(--graphite); text-decoration: underline; text-decoration-thickness: .05em; text-decoration-color: var(--orange);
  text-underline-offset: .16em; overflow-wrap: anywhere; transition: color .2s;
}
.contact-email:hover { color: var(--orange-text); }
.section--dark :focus-visible { outline-color: var(--orange-on-dark); }
.section--dark .btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(243, 244, 242, .45); }
.section--dark .btn-ghost:hover { background: rgba(243, 244, 242, .08); border-color: var(--on-dark); }
.section--dark .faq dt, .section--dark .faq dd { border-color: var(--line-on-dark); }
.section--dark .faq dd { color: var(--on-dark-2); }
.email { text-decoration: none; color: var(--ink-2); padding: 0 var(--s-2); text-transform: none; font-size: var(--fs-small); }
.email:hover { color: var(--orange-text); }
.faq-wrap { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); }
.faq-title { grid-column: 1 / span 4; font-size: var(--fs-h4); letter-spacing: -0.02em; padding-top: var(--s-3); }
.faq { grid-column: 5 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin: 0; }
.faq dt, .faq dd { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.faq dt { font-weight: 500; padding-right: var(--s-5); }
.faq dd { margin: 0; color: var(--ink-1); }

/* ───────── Footer ───────── */
.footer { border-top: 1px solid var(--line); padding: var(--s-7) 0 var(--s-5); }
.footer-top { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); }
.footer-brand { grid-column: 1 / span 4; }
.footer-brand p { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--fs-small); max-width: 24em; }
.footer-cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.footer-cols div { display: grid; align-content: start; gap: var(--s-2); }
.footer-head { color: var(--ink-2); font-size: var(--fs-small); margin-bottom: var(--s-2); }
.footer-cols a { text-decoration: none; font-size: var(--fs-small); justify-self: start; transition: color .2s; }
.footer-cols a:hover { color: var(--orange-text); }
.footer-meta { display: flex; justify-content: space-between; margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); }
.footer-meta a { text-decoration: none; }
.footer--dark { background: var(--graphite); color: var(--on-dark); border-top-color: var(--line-on-dark); }
.footer--dark :focus-visible { outline-color: var(--orange-on-dark); }
.footer--dark .footer-brand p, .footer--dark .footer-head, .footer--dark .footer-meta { color: var(--on-dark-2); }
.footer--dark .footer-meta { border-top-color: var(--line-on-dark); }
.footer--dark a:hover { color: var(--orange-on-dark); }
.footer--compact { padding-top: 0; }
.footer--compact .footer-meta { margin-top: 0; }
.footer-meta a:hover { color: var(--orange-text); }
/* Small text links get a hit area of at least 24px without changing the layout. */
.brand, .facts a, .email, .footer-cols a, .footer-meta a { position: relative; }
:is(.brand, .facts a, .email, .footer-cols a, .footer-meta a)::after { content: ""; position: absolute; inset: -6px -4px; }

/* ───────── Notes (research write-ups) ───────── */
.note { padding-top: clamp(56px, 8vw, 96px); }
.note-head { max-width: 52rem; margin-bottom: clamp(40px, 5vw, 64px); }
.note-head h1 { font-size: var(--fs-h2); }
.section-label a { color: inherit; text-underline-offset: 3px; }
.note-meta { margin-top: var(--s-4); color: var(--ink-2); }
.note-body { max-width: 40rem; }
.note-body p + p, .note-body pre + p, .note-body dl + p { margin-top: var(--s-3); }
.note-body h2 { font-size: var(--fs-h3); letter-spacing: -0.02em; margin: var(--s-7) 0 var(--s-3); }
.note-lede { font-size: var(--fs-lead); line-height: 1.55; }
.note-body a { text-decoration-color: var(--orange); text-underline-offset: 3px; }
.note-body a:hover { color: var(--orange-text); }
.note code.mono { font-size: .88em; }
.note-code { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--radius); font-size: var(--fs-small); line-height: 1.7; white-space: pre; overflow-x: auto; }
.note-list { display: grid; grid-template-columns: 11rem minmax(0, 1fr); margin: var(--s-2) 0 0; }
.note-list dt, .note-list dd { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.note-list dt { font-weight: 500; padding-right: var(--s-4); }
.note-list dd { margin: 0; color: var(--ink-2); }
.note-source { margin-top: var(--s-6) !important; color: var(--ink-2); font-size: var(--fs-small); }
.note-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); max-width: 40rem; margin-top: var(--s-7); padding: var(--s-4) var(--s-5); background: var(--surface); border-radius: var(--radius); }
.note-cta p { font-weight: 500; }

/* ───────── 404 ───────── */
.notfound { min-height: 70vh; border-top: 0; }
.notfound .section-head h1 { grid-column: 1 / span 9; font-size: var(--fs-h2); }
.notfound .section-head .intro { grid-column: 1 / span 7; margin-top: var(--s-4); }

/* ───────── Responsive ───────── */
@media (max-width: 1024px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); padding-top: 46vh; }
  /* Once the copy is one column the buttons stay on the first screen; the hint follows them. */
  .hero-text { display: flex; flex-direction: column; }
  .demo-hint { order: 3; margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; border-bottom: 0; border-top: 1px solid var(--line-on-dark); }
  .demo canvas { --path-x: .5; --path-y: .27; --path-ax: .32; --path-ay: .12; }
  .hero-text { margin-top: var(--s-5); }
  .section-head h2 { grid-column: 1 / span 10; }
  .section-head .intro { grid-column: 1 / span 8; margin-top: var(--s-4); }
  .research-text, .repr { grid-column: 1 / -1; }
  .repr { position: static; margin-top: var(--s-6); max-width: 560px; }
  .statement, .company-text, .facts { grid-column: 1 / -1; }
  .results li { grid-template-columns: 72px minmax(0, 1fr) auto; row-gap: var(--s-2); }
  .result-built { grid-column: 2 / -1; }
  .case h3, .case-text { grid-column: 1 / -1; }
  .case-text { margin-top: var(--s-4); }
  .faq-title { grid-column: 1 / -1; border-top: 0; padding-top: 0; margin-bottom: var(--s-3); }
  .faq { grid-column: 1 / -1; }
  .footer-brand, .footer-cols { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .menu { display: inline-flex; align-items: center; }
  .links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s-2) var(--gutter) var(--s-4);
  }
  .links.is-open { display: flex; }
  .links a:not(.btn) { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); color: var(--graphite); }
  .links .btn { margin-top: var(--s-3); min-height: 48px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .plate { grid-template-columns: minmax(0, 1fr); }
  .steps li { display: block; grid-row: auto; }
  .steps li::before { right: 0; }
}

@media (max-width: 640px) {
  .section-head h2, .section--contact .section-head h2, .section-head--stack h2 { grid-column: 1 / -1; }
  .section-head .intro, .section--contact .section-head .intro, .section-head--stack .intro { grid-column: 1 / -1; }
  .cf-text text { font-size: 15px; }
  .plate-cell h3 { margin: var(--s-4) var(--s-4) 0; }
  .plate-cell p { margin: var(--s-2) var(--s-4) 0; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq dt { padding-bottom: var(--s-1); }
  .faq dd { border-top: 0; padding-top: 0; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .results li { grid-template-columns: minmax(0, 1fr) auto; }
  .result-year { grid-column: 1 / -1; }
  .result-built { grid-column: 1 / -1; }
  .facts dt { padding-bottom: 0; }
  .facts dd { border-top: 0; padding-top: 2px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-list { grid-template-columns: minmax(0, 1fr); }
  .note-list dt { padding-bottom: 2px; }
  .note-list dd { border-top: 0; padding-top: 0; }
  .demo canvas { --path-x: .5; --path-y: .32; --path-ax: .34; --path-ay: .12; }
  .demo-panel { padding-top: var(--s-4); column-gap: var(--s-4); }
  .demo figcaption.mono { display: none; }
  .demo-stats { gap: var(--s-2); }
  .demo-stats dd { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}