/* Hallmark · shape: Bento Grid (by request) · genre: modern-minimal · theme: Console (by request) · redesign: full
 * hero: Banner (/), Banner (/privacy.html), Banner (/terms.html), Banner (/404.html) · nav: edge-aligned lockup · footer: mast · imagery: none · signature: none, the hero is words only (by request) · console: graphite
 * axes: dark/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · fold: pass · job: hire · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R4 V4 · weakest: P, the words are fixed, so the written result under every step carries the argument */
/* Hallmark · bands: by request, every section changes paper (the owner asked for clear contrast between sections), more than the theme's two */
/* Hallmark · waive 78 · privacy and terms set their clause heads at the title size · the legal pages are read clause by clause, ten short headed paragraphs under one policy title */
/* Hallmark · waive 44c · the privacy, terms and not-found pages open on a title band and their text starts on the first screen · a policy title over its clauses needs no full-screen hero */
/* Hallmark · dismissed 42 · the footer is a mast over index columns and the stamp names it: the wordmark, seven services, company, legal, contact and the address */
/* Hallmark · dismissed 77 · the privacy, terms and not-found pages are documents in the site shell, one title over their text, not landing pages */
/* Hallmark · dismissed 3 · the service icons sit inline with each title, not in tiles, and two of the seven cards span two columns */
/* Hallmark · dropped d-area, the hero diagram · the owner asked for a hero of words only: the head, the paragraph and the two actions */
/* Hallmark · dropped the Services, Engagements and Contact eyebrows and Legal over the policy titles · 54 names them; the pill line over the h1 moved into the nav beside the wordmark */

@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/host-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/host-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px;
  --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px;
  --z-sticky-nav: 300; --z-modal: 400;
  --color-paper: oklch(17% 0.008 250); --color-paper-2: oklch(21% 0.009 250); --color-paper-3: oklch(12.5% 0.007 250);
  --color-ink: oklch(95% 0.005 250); --color-ink-2: oklch(83% 0.008 250); --color-muted: oklch(71% 0.01 250);
  --color-rule: oklch(31% 0.01 250); --color-rule-2: oklch(42% 0.012 250);
  --color-accent: oklch(82% 0.15 80); --color-accent-ink: oklch(18% 0.04 75); --color-focus: oklch(82% 0.15 80);
  --color-cool: oklch(77% 0.12 245);
  --font-display: "Host Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
  --font-outlier: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --radius-card: 10px; --radius-pill: 6px;
  --tracking-display: -0.03em; --display-weight: 500;
  --color-band: oklch(22% 0.035 245); --color-band-rule: oklch(34% 0.04 245);
  --nav-h: 64px; --color-accent-hover: oklch(87% 0.12 82);
}
/* Print: Console's paper colourway, so every word lands dark on light paper. */
@media print {
  :root {
    color-scheme: light;
    --color-paper: oklch(99% 0.004 85); --color-paper-2: oklch(97% 0.006 85); --color-paper-3: oklch(99% 0.004 85);
    --color-ink: oklch(19% 0.01 60); --color-ink-2: oklch(28% 0.01 60); --color-muted: oklch(38% 0.01 60);
    --color-rule: oklch(86% 0.008 85); --color-rule-2: oklch(72% 0.01 85);
    --color-accent: oklch(54% 0.14 70); --color-accent-ink: oklch(99% 0.004 85); --color-focus: oklch(54% 0.14 70);
    --color-cool: oklch(52% 0.14 250);
    --color-band: oklch(99% 0.004 85); --color-band-rule: oklch(86% 0.008 85);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Chrome ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-xs);
  z-index: var(--z-modal);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.i { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.lockup { display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand img { width: auto; height: 26px; }
.brand-line { padding-left: var(--space-md); border-left: 1px solid var(--color-rule-2); font-size: var(--text-sm); line-height: 1.3; color: var(--color-muted); }

.nav-desktop ul { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.nav-desktop a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.nav-desktop a:not(.btn):hover,
.nav-desktop a.is-active { color: var(--color-ink); }
.nav-desktop a.is-active { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.45em; }
.nav-desktop li:last-child { margin-left: var(--space-sm); }

.menu { display: none; position: relative; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover,
.menu[open] > summary { background: var(--color-rule); }
.menu > summary:active { background: var(--color-paper-2); }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-xs));
  min-width: 16rem;
  padding: var(--space-xs);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
}
.menu-panel ul { display: grid; margin: 0; padding: 0; list-style: none; }
.menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); border-radius: var(--radius-pill); color: var(--color-ink); text-decoration: none; }
.menu-panel a:hover { background: var(--color-rule); }

/* Controls: the theme's pair, all states ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font: 500 var(--text-md)/1 var(--font-display);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-rule); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn .i { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color var(--dur-short) linear; }
  .btn:active { transform: none; }
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
a:not([class]) { text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a:not([class]):hover { text-decoration-color: var(--color-accent); }
.nowrap { white-space: nowrap; }
.label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* Sections: every one changes paper ----------------------------------- */

.section { padding-block: var(--section-gap-s); background: var(--color-paper); }
.section--deep { border-block: 1px solid var(--color-rule); background: var(--color-paper-3); }
.head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  row-gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-2xl);
}
.head h2 { grid-column: 1 / span 6; }
.head > p { grid-column: 7 / -1; color: var(--color-ink-2); }
.card { padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.card-title { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-title); line-height: 1.2; }
.card-title .i { margin-top: var(--space-3xs); color: var(--color-cool); }
.ticks { display: grid; margin: 0; padding: 0; list-style: none; }
.ticks li { padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }

/* Hero: Banner, the words alone ---------------------------------------- */

.hero { background: var(--color-paper); }
.stage-grid { padding-block: var(--space-2xl); }
.intro { display: grid; justify-items: start; gap: var(--space-lg); max-width: 45rem; }
.hero h1 { max-width: none; font-size: clamp(2.25rem, 3.4vw + 0.5rem, 4rem); line-height: 1.04; }
.hero .lead { color: var(--color-ink-2); }
.hero .actions { margin-top: var(--space-xs); }

.tools { border-block: 1px solid var(--color-rule); background: var(--color-paper-3); }
.tools-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); }
.tools h2 { grid-column: 1 / span 2; max-width: none; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-muted); }
.tools ul { grid-column: 3 / -1; margin: 0; padding: 0; list-style: none; text-wrap: balance; }
.tools li { display: inline; margin-inline-end: var(--space-lg); white-space: nowrap; line-height: 1.9; color: var(--color-ink-2); }

/* Services: seven cards on three columns -------------------------------- */

.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.service { display: grid; align-content: start; gap: var(--space-lg); }
.service--wide { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
.service-main { display: grid; align-content: start; gap: var(--space-sm); }
.service-main p { color: var(--color-ink-2); }
.service-work { display: grid; align-content: start; gap: var(--space-xs); }

/* How we work: four cards on a timeline ------------------------------- */

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-columns);
  margin: 0;
  padding: var(--space-2xl) 0 0;
  list-style: none;
  counter-reset: step;
}
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--color-rule-2); }
.step { counter-increment: step; position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-sm); }
.step::before {
  content: counter(step);
  position: absolute;
  top: calc(-1 * var(--space-2xl) + 10px);
  left: var(--space-xl);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-cool);
  border-radius: 50%;
  background: var(--color-paper-3);
  color: var(--color-cool);
  font: 500 var(--text-sm)/1 var(--font-outlier);
}
.step p { color: var(--color-ink-2); }
.step .outcome { display: flex; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-ink); font-weight: 500; }
.step .outcome .i { width: 20px; height: 20px; color: var(--color-accent); }

/* What we measure: five cards ----------------------------------------- */

.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.metric { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); }
.metric dt { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-lg); font-weight: 500; line-height: 1.25; }
.metric dt .i { color: var(--color-cool); }
.metric dd { margin: 0; color: var(--color-ink-2); }
.measure-note { display: flex; align-items: flex-start; gap: var(--space-sm); max-width: 65ch; margin-top: var(--space-xl); color: var(--color-ink-2); }
.measure-note .i { color: var(--color-muted); }

/* Engagements: three cards -------------------------------------------- */

.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.model { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--space-md); }
.model > p { color: var(--color-ink-2); }
.model-facts { display: grid; align-content: start; margin: 0; }
.model-facts > div { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.model-facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.model-facts dd { margin: 0; }

/* About ---------------------------------------------------------------- */

.about { padding-block: var(--section-gap); }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.about-copy { grid-column: 1 / span 6; display: grid; gap: var(--space-lg); }
.about-text { font-size: var(--text-lead); line-height: 1.5; }
.about-copy p:not(.about-text) { color: var(--color-ink-2); }
.facts { grid-column: 8 / -1; }
.facts h3 { margin-bottom: var(--space-md); font-size: var(--text-lg); }
.facts dl { margin: 0; }
.facts dl > div { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* Contact: the dark band ----------------------------------------------- */

.contact-band { padding-block: var(--section-gap-s); border-block: 1px solid var(--color-band-rule); background: var(--color-band); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: start; }
.contact-copy { grid-column: 1 / span 7; display: grid; justify-items: start; gap: var(--space-lg); }
.contact-copy p { max-width: 60ch; color: var(--color-ink-2); }
.contact-copy .btn { margin-top: var(--space-xs); }
.contact-list { grid-column: 9 / -1; }
.contact-list h3 { margin-bottom: var(--space-md); font-size: var(--text-lg); }
.contact-list .ticks li { border-top-color: var(--color-band-rule); color: var(--color-ink); }

/* Footer: the mast over index columns --------------------------------- */

.site-footer { padding-block: var(--space-3xl) var(--space-xl); border-top: 1px solid var(--color-rule); background: var(--color-paper-3); }
.footer-mast { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); margin-bottom: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--color-rule); }
.footer-brand { display: inline-flex; align-items: center; min-height: 44px; }
.footer-brand img { width: auto; height: 40px; }
.footer-mast p { font-size: var(--text-lead); color: var(--color-ink-2); }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.footer-nav { grid-column: 1 / span 9; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
.footer-contact { grid-column: 10 / -1; }
.footer-title { max-width: none; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--color-muted); }
.footer-title a { text-decoration: none; }
.footer-title a:hover { text-decoration: underline; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-block; padding-block: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.footer-links a:hover,
.footer-links a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer-contact address { margin-top: var(--space-xs); font-size: var(--text-sm); font-style: normal; color: var(--color-muted); }
.footer-bottom { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.footer-bottom p { max-width: none; font-size: var(--text-sm); color: var(--color-muted); }

/* Legal pages and 404 ------------------------------------------------- */

.page-head { padding-block: var(--space-3xl) var(--space-2xl); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-3); }
.page-head h1 { font-size: var(--text-display-s); }
.page-head .updated { margin-top: var(--space-md); color: var(--color-muted); }
.page-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-2xl) var(--section-gap); }
.toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.toc-title { margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding-block: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
.toc a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.prose { grid-column: 5 / span 7; max-width: 31em; }
.prose h2 { max-width: none; margin-top: var(--space-2xl); font-size: var(--text-xl); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--space-sm); line-height: 1.7; color: var(--color-ink-2); }

.nf { padding-block: var(--section-gap) var(--space-xl); }
.nf .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: center; }
.nf-copy { grid-column: 1 / span 7; display: grid; justify-items: start; gap: var(--space-lg); }
.nf-copy .lead { color: var(--color-ink-2); }
.nf-code { grid-column: 9 / -1; grid-row: 1; font-family: var(--font-outlier); font-size: clamp(6rem, 14vw, 12rem); font-weight: 400; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums slashed-zero; color: var(--color-cool); }

/* Narrower screens ---------------------------------------------------- */

@media (max-width: 80rem) {
  .brand-line { display: none; }
  .metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .metric { grid-column: span 2; }
  .metric:nth-child(n + 4) { grid-column: span 3; }
  .footer-nav, .footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 60rem) {
  .nav-desktop { display: none; }
  .menu { display: block; }
  .head, .tools-row, .about-grid, .contact-grid, .footer-grid, .page-body, .nf .container { grid-template-columns: minmax(0, 1fr); }
  .head h2, .head > p, .tools h2, .tools ul, .about-copy, .facts, .contact-copy, .contact-list, .footer-nav, .footer-contact, .toc, .prose, .nf-copy, .nf-code { grid-column: 1 / -1; }
  .tools-row { row-gap: var(--space-xs); }
  .head { margin-bottom: var(--space-xl); }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service--wide:last-child { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .timeline::before { display: none; }
  .step { grid-template-rows: auto auto 1fr auto; }
  .step::before { position: static; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric, .metric:nth-child(n + 4) { grid-column: auto; }
  .metric:last-child { grid-column: 1 / -1; }
  .models { grid-template-columns: minmax(0, 1fr); }
  .model { grid-row: auto; grid-template-rows: none; }
  .toc { position: static; margin-bottom: var(--space-xl); }
  .nf-code { grid-row: auto; font-size: var(--text-display); }
}
@media (max-width: 40rem) {
  .hero h1 { font-size: min(var(--text-display), calc(10.4vw - 0.25rem)); }
  .card { padding: var(--space-lg); }
  .services-grid, .timeline, .metrics { grid-template-columns: minmax(0, 1fr); }
  .service--wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .footer-nav { grid-template-columns: minmax(0, 1fr); }
}

/* Print: the paper colourway from the tokens above, every word on the page ----- */

@media print {
  @page { margin: 14mm; }
  .skip-link, .nav-desktop, .menu { display: none !important; }
  .site-header { position: static; }
  .brand img, .footer-brand img { content: url("logo.svg"); }
  .section, .contact-band, .about { padding-block: var(--space-xl); }
  .stage-grid { display: block; padding-block: var(--space-lg); }
  .intro { margin-bottom: var(--space-xl); }
  .toc { position: static; }
  .card, .step, .metric, .model, .facts, .ticks li, .prose p { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}