/* industrial.org.uk (Industrial™, D34; formerly luminacious.com), from Claude Design round 1 ("Luminacious Design System.dc.html", the five artboards, "Design note").
   One file, no inline styles (the CSP allows none), nothing animates unless prefers-reduced-motion: no-preference.
   Tokens: tools/contrast.py reads the --c-* hex values below and checks every text and UI pairing. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-ink: #0c0e12;
  --c-ground: #f6f6f3;
  --c-white: #ffffff;
  --c-secondary: #5b626c;
  --c-body-card: #3f4550;
  --c-lead: #20242b;
  --c-dark: #111418;
  --c-footer: #0c0e12;
  --c-amber: #ffc933;
  --c-accent-text: #8a5a00;
  --c-error: #8a2200;
  --c-on-dark: #c9ccd2;
  --c-on-dark-quiet: #8a9099;
  --c-control: #8a8f98;
  --c-hairline: #dcdcd6;
  --c-grid: #ecece6;
  --c-dot: #e6e6df;
  --c-hatch: #f1f1ec;
  --c-dark-rule: #3a3f47;
  --c-footer-rule: #2a2e35;
  --c-slot-dark-edge: #6b7079;

  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gutter: 20px;
  --section: 56px;
  --max: 1440px;
}
@media (min-width: 768px) { :root { --gutter: 40px; --section: 72px; } }
@media (min-width: 1280px) { :root { --gutter: clamp(48px, 6.67vw, 96px); --section: 96px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
@media (min-width: 1100px) { body { font-size: 1.125rem; } }
img, svg { max-width: 100%; }
a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--c-accent-text); outline-offset: 2px; }
.band--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--c-amber); }
strong { font-weight: 600; }
p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--c-ink); color: var(--c-ground);
  padding: 12px 16px; font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--c-ground); }

/* Preview furniture: preview build only, never in site/ */
.preview-bar {
  margin: 0; padding: 8px var(--gutter); font-family: var(--mono); font-size: 0.75rem; line-height: 1.5;
  color: var(--c-ink); background: var(--c-white); border-bottom: 1px dashed var(--c-control);
}
.preview-note {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--c-body-card); border: 1px dashed var(--c-control);
  padding: 10px 12px; margin: 0 0 20px;
}

/* ---------------------------------------------------------------- type */
h1, h2, h3 { font-family: var(--sans); color: inherit; margin: 0; }
h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.875rem);
  line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; max-width: 18ch;
}
@media (min-width: 1100px) { h1 { line-height: 0.98; letter-spacing: -0.035em; } }
h2 {
  font-size: clamp(1.875rem, 1.35rem + 1.65vw, 2.875rem);
  line-height: 1.08; letter-spacing: -0.028em; font-weight: 600;
}
h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }
.lead { font-size: 1.0625rem; line-height: 1.6; color: var(--c-lead); max-width: 62ch; margin: 24px 0 0; }
@media (min-width: 1100px) { .lead { font-size: 1.3125rem; line-height: 1.55; margin-top: 32px; } }
/* D34: the founder line, above the fold on Home, between the answer paragraph and the call to action. */
.hero__founder { font-weight: 500; max-width: 62ch; margin: 16px 0 0; }
@media (min-width: 1100px) { .hero__founder { font-size: 1.125rem; margin-top: 20px; } }
.lead-2 { font-size: 1.0625rem; line-height: 1.65; max-width: 66ch; }
@media (min-width: 1100px) { .lead-2 { font-size: 1.25rem; } }
.eyebrow, .figcap, .credit, .tags__label, .toc__title, .facts__head, .facts dt, .dcard dt, .form-card dt,
.teaser__label, .artefact dt, .artefact__label, .tier__num, .cell-label, .who__head, .callout__label, .statement__label,
.promise__sig {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400;
  line-height: 1.5;
}
.eyebrow { color: var(--c-secondary); margin: 0 0 24px; }
.prose > * { max-width: 70ch; }
.prose--wide > * { max-width: none; }
.prose--wide > p { max-width: 70ch; }
.prose h2 { margin: 0 0 24px; }
.prose h3 { margin: 32px 0 14px; }
.prose > h3:first-child { margin-top: 0; }
.label-strong { font-weight: 600; }

/* ---------------------------------------------------------------- slots: deliberately unfilled, never amber */
.slot {
  display: inline-block; max-width: 100%; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5;
  color: var(--c-body-card); border: 1px dashed var(--c-control); padding: 4px 8px; vertical-align: baseline;
  background: repeating-linear-gradient(135deg, var(--c-white) 0 6px, var(--c-hatch) 6px 12px);
  font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; overflow-wrap: anywhere;
}
p.slot, .slot--block { display: block; width: fit-content; }
.slot--note { font-size: 0.8125rem; }
.slot--frame {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 200px; width: 100%;
  padding: 20px; margin: 0; border-color: var(--c-control);
  background: repeating-linear-gradient(135deg, var(--c-white) 0 8px, var(--c-hatch) 8px 16px);
}
.photo-slot { margin: 32px 0 0; max-width: 480px; }
.site-footer .slot {
  color: var(--c-on-dark); background: transparent; border-color: var(--c-slot-dark-edge); font-size: 0.75rem; padding: 3px 7px;
}

/* ---------------------------------------------------------------- buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 26px;
  font-family: var(--sans); font-size: 1rem; font-weight: 500; line-height: 1.3; text-decoration: none; text-align: center;
  border: 1px solid var(--c-ink); cursor: pointer; border-radius: 0;
}
.btn--ink { background: var(--c-ink); color: var(--c-white); }
.btn--ink:hover { background: #2a2e35; color: var(--c-white); }
.btn--amber { background: var(--c-amber); color: var(--c-ink); border-color: var(--c-amber); }
.btn--amber:hover { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.btn--lg { font-size: 1.0625rem; padding: 16px 30px; min-height: 56px; }
.btn--block { display: flex; width: 100%; }
.actions { margin: 28px 0 0; }
.actions .btn { width: 100%; }
@media (min-width: 600px) { .actions .btn { width: auto; } }
.linkline { margin: 24px 0 0; font-weight: 500; }
.band--dark a:not(.btn) { color: var(--c-amber); }
.band--dark a:not(.btn):hover { color: var(--c-white); }

/* ---------------------------------------------------------------- header and navigation */
.site-header { background: var(--c-ground); border-bottom: 1px solid var(--c-hairline); position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
@media (min-width: 1100px) { .header-inner { min-height: 76px; flex-wrap: nowrap; } }
/* The lockup (Industrial logo brief, 2026-09-19): mark 10 beside the wordmark in live Geist 700, tracking -0.035em.
   One colour for both halves: `color` on .wordmark sets the word, and the mark's fills and strokes are currentColor.
   Ink on the light ground (header), amber on the dark band and in the footer (.wordmark--dark). Never an image,
   never outlined, never all-caps, never letter-spaced open.
   Mobile: mark 20px, wordmark 21px, gap 8px. From 641px (the brief's boundary): 22px, 23px, 10px. The type is in rem
   (1.3125rem = 21px, 1.4375rem = 23px at the default root size) so a reader's own font size still scales it. */
.wordmark {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 auto 0 0;
  color: var(--c-ink); text-decoration: none;
}
/* The 1.5px bottom margin centres the mark on the cap height rather than on the line box: Geist's cap band sits
   0.77px above the centre of the text's line box, and a flex item is centred by its margin box. */
.wordmark__mark { width: 20px; height: 20px; flex: none; margin-bottom: 1.5px; }
.wordmark__text { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
/* The ™ is the real character, not the letters T and M, so the page text stays "Industrial™" for screen readers,
   copy-paste and the release check. Geist draws ™ from the cap height down to 0.31em, so 0.634em of the wordmark
   gives the same ink height as the brief's TM at 34%, and 0.28em of its own size lifts it to the same ink top.
   Measured in Geist 700 against the brief's specimen, not estimated. */
.wordmark__tm {
  font-size: 0.634em; font-weight: 600; letter-spacing: normal; vertical-align: 0.28em; margin-left: 0.09em;
}
@media (min-width: 641px) {
  .wordmark { gap: 10px; }
  .wordmark__mark { width: 22px; height: 22px; }
  .wordmark__text { font-size: 1.4375rem; }
}
/* D34: the ™ is part of the brand text; there is no (R) and no .wordmark__reg. */
.site-nav { order: 3; width: 100%; }
.nav-list { list-style: none; margin: 0; padding: 0 0 12px; }
.nav-item a, .nav-services summary {
  display: flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; font-size: 1rem;
  border-top: 1px solid var(--c-hairline); cursor: pointer;
}
.nav-item a:hover, .nav-services summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-item a[aria-current="page"], .nav-services summary.is-current, .nav-sub a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.nav-services summary { list-style: none; gap: 8px; }
.nav-services summary::-webkit-details-marker { display: none; }
.nav-services summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-services[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.nav-sub { list-style: none; margin: 0; padding: 0 0 8px 16px; }
.nav-sub a {
  display: flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; font-size: 0.9375rem;
}
.nav-sub a:hover { text-decoration: underline; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.btn--header { min-height: 44px; padding: 10px 14px; font-size: 0.875rem; }
.only-wide { display: none; }
.menu-button {
  width: 44px; height: 44px; border: 1px solid var(--c-ink); background: var(--c-white); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--c-ink);
}
.menu-icon, .menu-icon::before, .menu-icon::after {
  display: block; width: 18px; height: 1.5px; background: var(--c-ink); position: relative; content: "";
}
.menu-icon::before { position: absolute; top: -5px; }
.menu-icon::after { position: absolute; top: 5px; }
.menu-button[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-button[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
@media (max-width: 1099px) { .btn--header-self { display: none; } }
@media (min-width: 1100px) {
  .site-nav, .js .site-nav { display: block; order: 0; width: auto; }
  .nav-list { display: flex; align-items: center; gap: 26px; padding: 0; }
  .nav-item a, .nav-services summary { border-top: 0; font-size: 0.9375rem; }
  .nav-services { position: relative; }
  .nav-sub {
    position: absolute; left: -20px; top: calc(100% + 16px); width: 320px; padding: 12px 20px; background: var(--c-white);
    border: 1px solid var(--c-ink); box-shadow: 0 2px 0 var(--c-hairline);
  }
  .nav-sub a { border-top: 1px solid var(--c-hairline); }
  .nav-sub li:first-child a { border-top: 0; }
  .header-actions { margin-left: 26px; }
  .menu-button { display: none; }
  .only-wide { display: inline; }
  .only-narrow { display: none; }
  .btn--header { padding: 13px 20px; font-size: 0.9375rem; }
}

/* ---------------------------------------------------------------- sections and grids */
.section { padding-block: var(--section) 0; }
main > .section:last-of-type { padding-bottom: var(--section); }
.section--flush { padding-top: 0; }
.section--tight { padding-block: 40px 0; }
.section--rule > .wrap { border-top: 1px solid var(--c-hairline); padding-top: var(--section); }
.section--rule { padding-top: 0; }
main > section:last-child { margin-top: var(--section); }
.hero {
  padding-block: 40px 48px;
  background-image: linear-gradient(var(--c-grid) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 20px 20px;
}
@media (min-width: 1100px) { .hero { padding-block: 88px 64px; background-size: 24px 24px; } }
.hero__extra { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--c-hairline); display: grid; gap: 16px; }
.hero__extra p { margin: 0; max-width: 70ch; font-size: 1.0625rem; }
.hero__extra p + p { color: var(--c-body-card); }
@media (min-width: 1100px) { .hero__extra { grid-template-columns: 7fr 5fr; gap: 48px; } }
.hero__grid { display: grid; gap: 32px; }
.hero__grid h1 { max-width: none; }
@media (min-width: 1100px) {
  .hero--home { padding-block: 96px 88px; }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
}
.hero--service h1 { max-width: 16ch; }

.split { display: grid; gap: 24px; }
.split__head { max-width: 16ch; }
@media (min-width: 1100px) {
  .split { grid-template-columns: 5fr 7fr; gap: 64px; }
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--teaser { align-items: start; }
}
.split--7-5 .prose h2 { margin-bottom: 24px; }
.section--faq .split { border-top: 1px solid var(--c-hairline); padding-top: 40px; }
.section--faq { padding-top: 40px; }
.section--faq .split__head { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.2; max-width: 22ch; }
.wide__body { margin-top: 32px; }
.wide__body > .prose > p, .wide__body > p { max-width: 70ch; }

/* ---------------------------------------------------------------- figures and photographs */
.figure { margin: 0; background: var(--c-white); border: 1px solid var(--c-hairline); padding: 16px; }
.figure--dots { background-image: radial-gradient(var(--c-dot) 1px, transparent 1px); background-size: 16px 16px; }
@media (min-width: 768px) { .figure { padding: 28px; } }
.motif { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .motif [stroke-width="1.25"] { stroke-width: 1.6; } }
.figcap { color: var(--c-secondary); margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--c-hairline); letter-spacing: 0.06em; }
.photo { margin: 0; }
.photo__frame { border: 1px solid var(--c-ink); overflow: hidden; background: var(--c-hatch); }
.photo img { display: block; width: 100%; height: 220px; object-fit: cover; }
@media (min-width: 768px) { .photo img { height: 320px; } }
.credit { margin-top: 10px; color: var(--c-secondary); text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.credit a { color: var(--c-accent-text); }
.hero__photo img { height: 150px; }
@media (min-width: 768px) { .hero__photo img { height: 300px; } }
@media (min-width: 1100px) { .hero__photo img { height: 420px; } }

/* ---------------------------------------------------------------- home: delivery model (Fig. 1) */
.delivery { display: grid; gap: 24px; }
.delivery__p1 p, .delivery__rest p { max-width: 70ch; }
@media (min-width: 1100px) {
  .delivery { grid-template-columns: 5fr 7fr; column-gap: 64px; row-gap: 0; align-items: start; }
  .delivery__head { grid-column: 1; grid-row: 1; max-width: 14ch; }
  .delivery__fig { grid-column: 1; grid-row: 2; margin-top: 40px; }
  .delivery__p1 { grid-column: 2; grid-row: 1; }
  .delivery__rest { grid-column: 2; grid-row: 2; margin-top: 24px; }
}
.who { margin: 0; border: 1px solid var(--c-ink); background: var(--c-white); }
.who__head { margin: 0; padding: 12px 20px; background: var(--c-amber); border-bottom: 1px solid var(--c-ink); color: var(--c-ink); }
.who__rows { list-style: none; margin: 0; padding: 16px; display: grid; gap: 12px; }
@media (min-width: 768px) { .who__rows { padding: 20px; gap: 14px; } }
.who__row { border: 1px solid var(--c-ink); padding: 14px 18px; }
.who__row p { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--c-body-card); }
.who__row .who__title { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); line-height: 1.35; }
.who__row--agents { border-color: var(--c-control); }
.who__row--always { background: var(--c-amber); }
.who__row--always p { color: var(--c-lead); }
.who .figcap { margin: 0 16px 16px; }

/* ---------------------------------------------------------------- home: service cards */
.cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .cards { grid-template-columns: 1fr 1fr; gap: 24px; } }
.card {
  position: relative; background: var(--c-white); border: 1px solid var(--c-hairline); padding: 24px;
  box-shadow: 0 1px 0 var(--c-hairline); display: flex; flex-direction: column;
}
@media (min-width: 768px) { .card { padding: 32px; } }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.card__num { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--c-secondary); }
.card__motif { width: 140px; height: auto; display: none; }
@media (min-width: 600px) { .card__motif { display: block; } }
.card h3 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.02em; margin: 16px 0 12px; }
.card__link { color: var(--c-ink); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:focus-visible { outline: none; }
.card:focus-within { outline: 3px solid var(--c-accent-text); outline-offset: 2px; }
.card p { font-size: 1rem; line-height: 1.6; color: var(--c-body-card); margin: 0; }
.card .card__more {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--c-hairline); font-weight: 500; color: var(--c-ink);
  font-size: 0.9375rem;
}
.card p + .card__more { margin-top: 24px; }
.card:hover { border-color: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  .card { transition: box-shadow 150ms ease, border-color 150ms ease; }
  .card:hover { box-shadow: 0 2px 0 var(--c-ink); }
}

/* ---------------------------------------------------------------- statement panel, aside, callouts */
.statement {
  background-color: var(--c-white); border: 1px solid var(--c-ink); padding: 28px 24px;
  background-image: radial-gradient(var(--c-dot) 1px, transparent 1px); background-size: 16px 16px;
}
@media (min-width: 1100px) { .statement { padding: 64px; } }
.statement h2 { margin-bottom: 20px; }
.statement__text { font-size: 1.1875rem; line-height: 1.5; max-width: 52ch; }
@media (min-width: 1100px) { .statement__text { font-size: 1.75rem; line-height: 1.45; letter-spacing: -0.012em; } .statement h2 { margin-bottom: 32px; } }
.statement h2.statement__label { font-size: 0.75rem; color: var(--c-secondary); font-weight: 400; letter-spacing: 0.08em; }
.statement__big { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; max-width: 20ch; }
.statement__big + p { font-size: 1.125rem; line-height: 1.6; max-width: 58ch; }
@media (min-width: 1100px) { .statement__big + p { font-size: 1.25rem; } }
.aside-note { border-left: 4px solid var(--c-control); padding: 16px 0 16px 24px; max-width: 78ch; }
.aside-note h2.aside-note__title { font-size: 1.375rem; letter-spacing: -0.015em; margin-bottom: 12px; }
.aside-note p { color: var(--c-body-card); font-size: 1.0625rem; }
.callout {
  background: var(--c-white); border: 1px solid var(--c-hairline); border-left: 4px solid var(--c-amber);
  padding: 24px 24px 24px 28px; margin: 32px 0;
}
.callout__label { color: var(--c-secondary); margin-bottom: 12px; }

/* ---------------------------------------------------------------- lists */
.list { margin: 0 0 1.25em; padding: 0; }
.list:last-child { margin-bottom: 0; }
.list--plain { padding-left: 22px; }
.list--plain > li + li { margin-top: 12px; }
.list--sub { margin-top: 10px; }
.list--rule, .list--muted, .list--boxed, .list--cards, .list--links { list-style: none; }
.list--rule > li { border-left: 2px solid var(--c-amber); padding-left: 20px; }
.list--rule > li + li, .list--muted > li + li { margin-top: 16px; }
.list--muted > li { border-left: 2px solid var(--c-control); padding-left: 20px; color: var(--c-body-card); }
.list--boxed > li { background: var(--c-white); border: 1px solid var(--c-hairline); padding: 20px 24px; }
.list--boxed > li + li { margin-top: 16px; }
.list--cards { display: grid; gap: 16px; }
@media (min-width: 768px) { .list--cards { grid-template-columns: 1fr 1fr; gap: 20px; } }
.split__body .list--cards { max-width: none; }
.list--cards > li { background: var(--c-white); border: 1px solid var(--c-hairline); padding: 22px; font-size: 1.0625rem; line-height: 1.6; }
.list--links { display: grid; gap: 4px; margin-top: 32px; }
.list--links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* ---------------------------------------------------------------- steps: dark strip and badge list */
.band { padding-block: 56px; }
@media (min-width: 1100px) { .band { padding-block: 80px; } }
.band--dark { background: var(--c-dark); color: var(--c-white); margin-top: var(--section); }
.band--dark + .band--dark { margin-top: 0; }
.band--dark h2 { margin-bottom: 28px; }
@media (min-width: 1100px) { .band--dark h2 { margin-bottom: 48px; } }
.steps { list-style: none; margin: 0; padding: 0; }
.steps--strip { display: grid; gap: 1px; background: var(--c-dark-rule); border: 1px solid var(--c-dark-rule); }
@media (min-width: 900px) { .steps--strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps--strip { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; } }
.steps--strip .step { background: var(--c-dark); padding: 24px 20px; }
@media (min-width: 1100px) { .steps--strip .step { padding: 32px 24px; } }
.steps--strip .step__num { display: block; font-size: 2.25rem; font-weight: 700; color: var(--c-amber); letter-spacing: -0.03em; line-height: 1; }
@media (min-width: 1100px) { .steps--strip .step__num { font-size: 2.75rem; } }
.steps--strip .step__body { margin: 0; color: var(--c-on-dark); font-size: 0.9375rem; line-height: 1.6; }
.steps--strip .step__title { display: block; color: var(--c-white); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 14px 0 10px; }
@media (min-width: 1100px) { .steps--strip .step__title { font-size: 1.375rem; } .steps--strip .step__body { font-size: 1rem; } }
.steps--badges { display: grid; gap: 20px; }
.steps--badges .step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.steps--badges .step__num {
  font-family: var(--mono); font-size: 1rem; font-weight: 500; border: 1px solid var(--c-ink); background: var(--c-amber);
  height: 36px; display: flex; align-items: center; justify-content: center; color: var(--c-ink);
}
.steps--badges .step__body { margin: 0; }

/* ---------------------------------------------------------------- tables: ink frame, hairline rows; stacked at phone width */
.table-wrap { margin: 0 0 24px; }
.table-wrap:last-child { margin-bottom: 0; }
.tbl { width: 100%; border-collapse: collapse; background: var(--c-white); border: 1px solid var(--c-ink); font-size: 1rem; line-height: 1.55; }
.tbl thead th {
  background: var(--c-ink); color: var(--c-white); text-align: left; font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding: 14px 18px; vertical-align: bottom;
}
.tbl tbody th, .tbl td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--c-hairline); }
.tbl tbody th { font-weight: 600; border-right: 1px solid var(--c-hairline); }
.tbl td { color: var(--c-body-card); }
.tbl td + td { border-left: 1px solid var(--c-hairline); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl--risk tbody th { font-weight: 500; width: 38%; }
.tbl--price td:last-child { line-height: 2.2; color: var(--c-ink); }
.tbl--facts tbody th { font-family: var(--mono); font-size: 0.875rem; font-weight: 400; color: var(--c-secondary); width: 38%; }
.tbl--facts td { color: var(--c-ink); }
.tbl--tiers tbody tr:first-child > * { background: var(--c-amber); color: var(--c-ink); }
.tbl--tiers tbody tr:first-child th { border-right-color: var(--c-ink); }
.tbl .cell-label { display: none; }
.tbl--on-dark { color: var(--c-ink); }
@media (max-width: 719px) {
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack th, .tbl--stack td { display: block; width: 100%; }
  .tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl--stack { border: 0; background: transparent; }
  .tbl--stack tr { background: var(--c-white); border: 1px solid var(--c-ink); margin-bottom: 12px; }
  .tbl--stack tbody th { border-right: 0; border-bottom: 1px solid var(--c-hairline); padding: 14px 16px; width: auto; }
  .tbl--stack td { border: 0; border-left: 0; padding: 12px 16px; }
  .tbl--stack td + td { border-left: 0; border-top: 1px solid var(--c-hairline); }
  .tbl--stack tbody tr:last-child > * { border-bottom: 0; }
  .tbl--stack tbody tr:last-child th { border-bottom: 1px solid var(--c-hairline); }
  .tbl .cell-label { display: block; color: var(--c-secondary); margin-bottom: 4px; letter-spacing: 0.06em; }
  .tbl--facts tr { display: block; }
  .tbl--tiers tbody tr:first-child { background: var(--c-amber); }
}
.tiers-fig { margin: 32px 0; }
.tiers-fig .figcap { border-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------- label cards (engagement form details) */
.dcards { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 768px) { .dcards--2 { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1000px) { .dcards--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.dcard { background: var(--c-white); border: 1px solid var(--c-hairline); padding: 22px; }
.dcard dt { color: var(--c-secondary); margin-bottom: 8px; letter-spacing: 0.06em; }
.dcard dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.dcard--boundary { border-left: 4px solid var(--c-amber); }
.dcard--pending { border-left: 4px solid var(--c-control); }

/* ---------------------------------------------------------------- engagements: four forms */
.form-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .form-cards { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1200px) { .form-cards { grid-template-columns: repeat(4, 1fr); } }
.form-card { background: var(--c-white); border: 1px solid var(--c-ink); display: flex; flex-direction: column; }
.form-card__head { margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--c-ink); }
.form-card__head--amber { background: var(--c-amber); color: var(--c-ink); }
.form-card__head--ink { background: var(--c-ink); color: var(--c-white); }
.form-card__letter { display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; }
.form-card__head--ink .form-card__letter { color: var(--c-amber); }
.form-card__name { display: block; margin-top: 8px; font-size: 1.4375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.form-card__body { margin: 0; padding: 20px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.form-card dt { color: var(--c-secondary); margin-bottom: 6px; letter-spacing: 0.06em; font-size: 0.6875rem; }
.form-card dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; }
.form-card__price { margin-top: auto; border-top: 1px solid var(--c-hairline); padding-top: 16px; }
.form-card__price dd { line-height: 2.2; }
.form-detail { margin-top: 56px; }
.form-detail h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); letter-spacing: -0.02em; margin-bottom: 24px; }
.form-detail .label-strong { margin-top: 24px; }

/* ---------------------------------------------------------------- in-page index (engagements terms, privacy) */
.indexed { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 1100px) { .indexed { grid-template-columns: 3fr 9fr; gap: 56px; align-items: start; } .toc { position: sticky; top: 24px; } }
.toc { border-top: 2px solid var(--c-ink); padding-top: 16px; }
.toc__title { color: var(--c-secondary); margin-bottom: 8px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; align-items: center; min-height: 32px; font-size: 0.9375rem; line-height: 1.4; padding: 4px 0; }
.indexed__body { display: grid; gap: 40px; }
.indexed__body > * { max-width: 76ch; }
.terms__item h3, .terms__item h2 { margin: 0 0 14px; }
.terms__item h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; }
.terms__item h3 { font-size: 1.5rem; letter-spacing: -0.018em; }
.terms__item h3 + p, .terms__item p + h3 { margin-top: 0; }
.terms__item .prose h3, .terms__item h3:not(:first-child) { margin-top: 28px; }
.terms__item--accent { border-left: 4px solid var(--c-amber); padding-left: 24px; }
.terms__item .list--plain { padding-left: 22px; }
.terms__item .tbl { font-size: 0.9375rem; }

/* ---------------------------------------------------------------- service page: facts panel, figures, main column */
.service { display: grid; gap: 32px; padding-top: 32px; }
.service__figs { display: grid; gap: 24px; }
.service__photo { display: none; }
.service__main > .sub + .sub, .service__main > * + .sub { margin-top: 48px; }
.service__main .sub h2 { margin-bottom: 24px; }
@media (min-width: 1100px) {
  .service { grid-template-columns: 7fr 5fr; column-gap: 64px; row-gap: 72px; padding-top: 0; }
  .service__figs { grid-column: 1 / -1; grid-row: 1; grid-template-columns: 7fr 5fr; gap: 32px; align-items: stretch; }
  .service__photo { display: flex; flex-direction: column; }
  .service__photo .photo__frame { flex: 1; }
  .service__photo img { height: 100%; min-height: 280px; }
  .facts { grid-column: 2; grid-row: 2; position: sticky; top: 24px; align-self: start; }
  .service__main { grid-column: 1; grid-row: 2; }
  .service__main > .sub + .sub, .service__main > * + .sub { margin-top: 56px; }
}
.facts { border: 1px solid var(--c-ink); background: var(--c-white); }
.facts__head { margin: 0; background: var(--c-amber); color: var(--c-ink); padding: 14px 22px; border-bottom: 1px solid var(--c-ink); }
.facts__list { margin: 0; padding: 22px; display: grid; gap: 22px; }
.facts dt { color: var(--c-secondary); letter-spacing: 0.06em; }
.facts dd { margin: 8px 0 0; font-size: 1rem; line-height: 1.55; }
.facts__rows { margin: 0; }
.facts__rows dt { margin-top: 16px; color: var(--c-ink); font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 1rem; }
.facts__rows dt:first-child { margin-top: 8px; }
.facts__rows dd { margin: 4px 0 0; color: var(--c-body-card); font-size: 0.9375rem; }
.facts__rows dd p { margin: 0 0 6px; }
.facts__price { line-height: 2.2; color: var(--c-ink); }
.facts ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.5; }
.facts__note { margin: 14px 0 0; font-size: 0.875rem; color: var(--c-secondary); }

/* ---------------------------------------------------------------- tag grid (systems and formats) */
.tags { background: var(--c-white); border: 1px solid var(--c-hairline); padding: 20px; display: grid; gap: 20px; }
@media (min-width: 768px) { .tags { padding: 32px; } }
.tags__row + .tags__row { border-top: 1px solid var(--c-hatch); padding-top: 20px; }
.tags__label { color: var(--c-secondary); margin: 0 0 10px; letter-spacing: 0.06em; }
.tags__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.tag { display: inline-flex; align-items: center; gap: 8px; }
.tag__name { font-weight: 500; }
.tag .slot { font-size: 0.75rem; padding: 3px 7px; }

/* ---------------------------------------------------------------- price section */
.price-notes { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 1100px) { .price-notes--quote { grid-template-columns: 1fr 1fr; gap: 48px; } }
.pullquote { font-size: 1.25rem; line-height: 1.45; letter-spacing: -0.015em; border-left: 4px solid var(--c-amber); padding-left: 24px; margin: 0; }
@media (min-width: 1100px) { .pullquote { font-size: 1.5rem; } }

/* ---------------------------------------------------------------- boxes (bold-led paragraphs) */
.boxes { display: grid; gap: 16px; }
@media (min-width: 900px) { .boxes--2 { grid-template-columns: 1fr 1fr; gap: 24px; } .boxes--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.box { background: var(--c-white); border: 1px solid var(--c-hairline); padding: 24px; }
.box p { font-size: 1.0625rem; line-height: 1.65; }

/* ---------------------------------------------------------------- worked example */
.teaser {
  background-color: var(--c-white); border: 1px solid var(--c-hairline); padding: 20px;
  background-image: radial-gradient(var(--c-dot) 1px, transparent 1px); background-size: 16px 16px;
}
@media (min-width: 768px) { .teaser { padding: 32px; } }
.teaser__label { color: var(--c-secondary); margin: 0 0 16px; }
.teaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 768px) { .teaser__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.mini { background: var(--c-white); border: 1px solid var(--c-ink); height: 110px; padding: 12px; overflow: hidden; }
@media (min-width: 768px) { .mini { height: 150px; padding: 14px; } }
.mini__title { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.mini__art { display: flex; flex-direction: column; gap: 6px; }
.mini__art svg { width: 100%; height: auto; }
.mini .ln { display: block; height: 2px; background: var(--c-hairline); }
.mini .ln--80 { width: 80%; } .mini .ln--70 { width: 70%; } .mini .ln--60 { width: 60%; } .mini .ln--55 { width: 55%; }
.mini .sig { display: block; height: 1px; background: var(--c-ink); width: 70%; margin-top: 18px; }
.mini .wf { display: block; border: 1px solid var(--c-hairline); height: 44px; flex: 1; }
.mini .wf--bar { height: 20px; }
.mini .wf-row { display: flex; gap: 8px; }
.mini .opt { display: block; border: 1px solid var(--c-hairline); height: 22px; }
.mini .opt--on { border-color: var(--c-ink); background: var(--c-amber); }
.mini .bar { display: block; height: 8px; background: var(--c-dot); }
.mini .bar--on { background: var(--c-amber); width: 80%; }
.mini .bar--2 { width: 60%; margin-left: 14%; } .mini .bar--3 { width: 50%; margin-left: 30%; } .mini .bar--4 { width: 36%; margin-left: 48%; }
.split--teaser .teaser { margin-top: 8px; }
.worked-label { background: var(--c-white); border-bottom: 1px solid var(--c-ink); }
.worked-label__text { margin: 0; padding-block: 14px; font-size: 0.9375rem; line-height: 1.55; }
.worked-label__text strong { font-family: var(--mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.04em; }
.artefacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .artefacts { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1200px) { .artefacts { grid-template-columns: repeat(3, 1fr); } }
.artefact {
  background-color: var(--c-white); border: 1px solid var(--c-ink); padding: 22px;
  background-image: radial-gradient(var(--c-dot) 1px, transparent 1px); background-size: 16px 16px;
}
.artefact__label { color: var(--c-secondary); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-hairline); letter-spacing: 0.06em; font-size: 0.6875rem; }
.artefact dl { margin: 0; display: grid; gap: 12px; }
.artefact dt { color: var(--c-secondary); letter-spacing: 0.06em; font-size: 0.6875rem; }
.artefact dd { margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--c-body-card); }
.artefact dd.artefact__name { font-size: 1.125rem; color: var(--c-ink); }

/* ---------------------------------------------------------------- about */
.tiers { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tier { background: var(--c-white); border: 1px solid var(--c-ink); padding: 24px; }
.tier:nth-child(3) { border-color: var(--c-control); }
.tier--one { background: var(--c-amber); }
.tier__num { color: var(--c-secondary); margin: 0 0 16px; }
.tier--one .tier__num { color: var(--c-ink); }
.tier__name { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; line-height: 1.25; }
.tier p:last-child { font-size: 1.0625rem; line-height: 1.6; color: var(--c-body-card); }
.tier--one p:last-child { color: var(--c-ink); }
.names { align-items: start; }
.names__fig { margin-top: 8px; }

/* ---------------------------------------------------------------- contact */
.split--contact { gap: 40px; padding-top: 8px; }
.contact-box { background: var(--c-white); border: 1px solid var(--c-ink); padding: 20px; }
@media (min-width: 768px) { .contact-box { padding: 40px; } }
.contact-email { margin: 0 0 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; font-size: 1.0625rem; }
.contact-email strong { font-weight: 600; }
.contact-or { font-weight: 600; border-top: 1px solid var(--c-hairline); padding-top: 24px; margin-bottom: 20px; }
.form { display: grid; gap: 22px; }
.field label { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 8px; }
.field__req { font-weight: 400; color: var(--c-secondary); }
.field input, .field textarea {
  display: block; width: 100%; min-height: 48px; border: 1px solid var(--c-control); background: var(--c-white); color: var(--c-ink);
  font: inherit; font-size: 1rem; padding: 10px 14px; border-radius: 0;
}
@media (min-width: 768px) { .field input { min-height: 52px; } .field input, .field textarea { font-size: 1.0625rem; } }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--c-accent-text); outline-offset: 1px; border-color: var(--c-ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .actions { margin: 0; }
.contact-next h2 { margin-bottom: 28px; }
.contact-next .steps--badges { margin-bottom: 32px; }
.contact-next .steps--badges + p { border-top: 1px solid var(--c-hairline); padding-top: 28px; }

/* ---------------------------------------------------------------- founder promise: last block in every <main> */
.promise__grid { display: grid; gap: 20px; }
@media (min-width: 1100px) { .promise__grid { grid-template-columns: 1.4fr 1fr; column-gap: 64px; align-items: end; } }
.promise__quote { margin: 0; }
/* The standalone mark: 28px at every width (logo brief), amber on the dark band, through currentColor. */
.promise__mark { width: 28px; height: 28px; display: block; margin-bottom: 20px; color: var(--c-amber); }
@media (min-width: 1100px) { .promise__mark { margin-bottom: 24px; } }
.promise blockquote { margin: 0; }
.promise blockquote p { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; max-width: 22ch; margin: 0; }
.promise__sig { color: var(--c-amber); margin-top: 24px; font-size: 0.8125rem; letter-spacing: 0.06em; }
.promise__small { color: var(--c-on-dark); margin: 0; font-size: 1.0625rem; }
@media (min-width: 1100px) {
  .promise__quote { grid-column: 1; grid-row: 1; }
  .promise__small { grid-column: 1; grid-row: 2; font-size: 1.125rem; }
  .promise__action { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
.promise__action { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.promise__action .btn { width: 100%; }
@media (min-width: 600px) { .promise__action .btn { width: auto; } }
.promise__link { margin: 0; }
main > .promise:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- footer: ink, sentence-case headings */
.site-footer { background: var(--c-footer); color: var(--c-white); padding-block: 48px; }
@media (min-width: 1100px) { .site-footer { padding-block: 64px; } }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 3fr; gap: 40px; } }
/* The footer lockup: amber on the footer ink, mark and word together (logo brief). */
.wordmark--dark { color: var(--c-amber); margin-bottom: 16px; }
.footer-about { color: var(--c-on-dark); font-size: 1rem; line-height: 1.6; max-width: 34ch; }
.footer-about strong { color: var(--c-white); font-weight: 500; }
.footer-nav { display: grid; gap: 28px; }
@media (min-width: 600px) { .footer-nav { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.footer-col__title { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; margin: 0 0 8px; line-height: 1.4; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: block; color: var(--c-on-dark); text-decoration: none; font-size: 0.9375rem; line-height: 1.4; padding-block: 7px; }
.footer-col a:hover { color: var(--c-white); text-decoration: underline; }
.footer-legal { color: var(--c-on-dark-quiet); font-size: 0.875rem; line-height: 1.8; margin: 40px 0 0; border-top: 1px solid var(--c-footer-rule); padding-top: 24px; }
.footer-founder { color: var(--c-white); font-size: 1rem; line-height: 1.6; max-width: 34ch; margin: 12px 0 0; }
.footer-source { color: var(--c-on-dark-quiet); font-size: 0.8125rem; margin: 14px 0 0; }
.site-footer a { color: var(--c-on-dark); }

@media print {
  .site-header, .skip-link, .preview-bar, .menu-button { display: none; }
  .band--dark, .site-footer { background: none; color: #000; }
}

/* Grid children never force the page wider than the viewport (long words, tables). */
.split > *, .indexed > *, .service > *, .service__figs > *, .delivery > *, .hero__grid > *, .price-notes > *,
.promise__grid > *, .footer-grid > *, .footer-nav > * { min-width: 0; }
.wide__body > * + *, .wide__body > .tags + p { margin-top: 24px; }
.indexed__body > * { min-width: 0; }
a { overflow-wrap: anywhere; }
.split--form { gap: 24px; align-items: start; }
.split--form .dcards { margin: 0 0 24px; }
.split--form .stack .dcards { margin: 0; grid-template-columns: 1fr; }
.split--form .label-strong { margin: 24px 0 16px; }
@media (min-width: 1100px) { .split--form { gap: 32px; } }
.credit a { display: inline-block; padding-block: 4px; }
.linkline a { display: inline-block; padding-block: 2px; }
.worked-label__text { font-size: 1rem; }
.tbl--tiers tbody tr:first-child .cell-label { color: var(--c-ink); }

/* ---------------------------------------------------------------- stepped enquiry flow
   The five steps of content/enquiry-flow.md, in three views with one set of rules: the ordinary form on /contact/
   (the no-JavaScript fallback, and the full form the long-form link shows, .form--flow), the modal src/js/enquiry.js
   builds behind "Arrange a first conversation" (.enq), and the same steps run inline on /contact/ (.enq-page). The
   cards and the fields are shared; only the shell differs.
   Design tokens only: the lockup-era --c-* values, --sans, --mono and the .btn set above.
   Nothing here restyles anything outside the flow. */
.flow-q { border: 0; border-top: 1px solid var(--c-hairline); margin: 0; padding: 24px 0 0; }
.flow-q:first-of-type { border-top: 0; padding-top: 0; }
.flow-q legend { padding: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.flow-q__n {
  display: block; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 400; color: var(--c-secondary); margin-bottom: 8px;
}
.flow-q__sub { color: var(--c-body-card); font-size: 0.9375rem; margin: 10px 0 16px; }
.flow-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow-card { margin: 0; position: relative; }
/* The control covers its whole card, so the card is the target a finger and a pointer both get (48px minimum,
   tools/measure.mjs), while the look comes from the label under it. Not a 1px hidden input. */
.flow-card__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.flow-card__face {
  display: block; min-height: 48px; padding: 14px 16px; background: var(--c-white); border: 1px solid var(--c-control);
  cursor: pointer;
}
.flow-card__face:hover { border-color: var(--c-ink); }
.flow-card__label { display: block; font-weight: 600; line-height: 1.35; }
.flow-card__line { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--c-body-card); }
.flow-card__input:checked + .flow-card__face { border-color: var(--c-ink); border-width: 2px; padding: 13px 15px; background: var(--c-white); }
.flow-card__input:checked + .flow-card__face .flow-card__label::after { content: " ✓"; color: var(--c-accent-text); }
.flow-card__input:focus-visible + .flow-card__face { outline: 3px solid var(--c-accent-text); outline-offset: 2px; }
.flow-reply { border: 0; margin: 0; padding: 0; }
.flow-reply legend { padding: 0; font-weight: 500; margin-bottom: 10px; }
.field__error { margin: 8px 0 0; color: var(--c-error); font-size: 0.9375rem; font-weight: 500; }
.form-data { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--c-body-card); }
.form--flow { gap: 26px; }
.form--flow .flow-q--details { display: grid; gap: 22px; }
.form--flow .flow-q--details legend + .flow-q__sub { margin-bottom: 0; }
@media (min-width: 560px) {
  .flow-cards { grid-template-columns: 1fr 1fr; }
  .flow-cards > .flow-card:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* the modal: the same cards, over the page */
.enq {
  position: fixed; inset: 0; z-index: 60; background: rgba(12, 14, 18, 0.55); display: flex; align-items: flex-end;
  justify-content: center; padding: 0;
}
@media (min-width: 700px) { .enq { align-items: center; padding: 24px; } }
.enq-open { overflow: hidden; }
.enq__dialog {
  background: var(--c-ground); border: 1px solid var(--c-ink); width: 100%; max-width: 680px; max-height: 100%;
  overflow-y: auto; padding: 20px; position: relative;
}
@media (min-width: 700px) { .enq__dialog { padding: 32px; max-height: calc(100vh - 48px); } }
.enq__dialog:focus-visible { outline: 3px solid var(--c-accent-text); outline-offset: -3px; }
.enq__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.enq__meter { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.enq__dots { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.enq__dot { width: 8px; height: 8px; border: 1px solid var(--c-control); border-radius: 50%; }
.enq__dot.is-done { background: var(--c-control); }
.enq__dot.is-current { background: var(--c-ink); border-color: var(--c-ink); }
.enq__count {
  margin: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-secondary);
}
.enq__close {
  width: 44px; height: 44px; min-width: 44px; border: 1px solid var(--c-control); background: var(--c-white);
  color: var(--c-ink); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; margin-left: auto;
}
.enq__close:hover { border-color: var(--c-ink); }
.enq__q { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -0.02em; margin: 0; }
.enq__sub { color: var(--c-body-card); font-size: 0.9375rem; margin: 10px 0 18px; }
.enq__para { font-size: 1rem; line-height: 1.6; margin: 0 0 1em; }
.enq__step--end .enq__q { margin-bottom: 16px; }
.enq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.enq__back {
  min-height: 44px; padding: 10px 4px; background: none; border: 0; color: var(--c-ink); font: inherit;
  font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.enq__second { font-weight: 500; font-size: 0.9375rem; }
.enq__promise { border-top: 1px solid var(--c-hairline); padding-top: 18px; margin-top: 4px; }
.enq__promise-line { margin: 0; font-weight: 500; }
.enq__promise-sig {
  margin: 8px 0 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-secondary);
}
.enq__promise-small { margin: 8px 0 0; font-size: 0.9375rem; color: var(--c-body-card); }
.enq .form--flow, .enq-page .form--flow { display: grid; gap: 18px; }

/* the page version, /contact/ only: the same steps and the same cards, run inline under the page's own H1. No
   overlay, no dialog, no close control. The plain form stays in the markup beneath them, hidden until the visitor
   asks for it, which is why the hidden rule below is explicit: .form sets display, and display beats [hidden]. */
.enq-page__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.enq-page .enq__q:focus-visible { outline: 3px solid var(--c-accent-text); outline-offset: 4px; }
.enq-page__toggle {
  margin: 24px 0 0; border-top: 1px solid var(--c-hairline); padding-top: 12px; font-size: 0.9375rem;
  color: var(--c-body-card);
}
.enq-page__switch {
  min-height: 44px; padding: 10px 2px; background: none; border: 0; color: var(--c-ink); font: inherit;
  font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.enq-page__switch:hover { color: var(--c-accent-text); }
.enq-page[hidden], .form[hidden], .enq-page__toggle[hidden] { display: none; }

/* the sending state: the one status indicator in the flow (content/enquiry-flow.md, change note 16)
   The send button's own label does the work — "Sending…" replaces "Send this to Sam" the moment the request leaves
   the browser, and the live region says it once. This ring is decoration on top of that: aria-hidden, added by
   src/js/enquiry.js with the label change, and faded in only if the request is still in flight 250ms later, because
   a warm Lambda answers in a few hundred milliseconds and a spinner that flashes up and vanishes reads as a glitch.
   Motion (.claude/skills/motion/SKILL.md §4 and §6): every declaration sits inside no-preference, so under
   prefers-reduced-motion: reduce none of it is parsed — the span is an empty inline box with no size, nothing spins,
   and there is no second code path to keep in step. The script also declines to create the span at all under reduce,
   the same belt and braces the scroll reveal carries. Opacity and transform only; the span holds its space from the
   moment it is added, and is shorter than the button's line box, so appearing costs no layout and shifts nothing.
   currentColor, so it stays legible on whatever button it sits in. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes enq-spin { to { transform: rotate(360deg); } }
  .enq__spinner {
    display: inline-block; flex: none; width: 16px; height: 16px; margin-left: 10px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; opacity: 0;
    transition: opacity 150ms linear;
  }
  .enq__spinner.is-shown { opacity: 1; animation: enq-spin 700ms linear infinite; }
}

/* ---------------------------------------------------------------- scroll reveal (D38)
   A section heading fades in and rises 16px as its section arrives. Driven by src/js/motion.js and by nothing else:
   the hide state exists only while <html> carries .motion, which that script adds after its feature and
   reduced-motion checks, and takes off again if anything throws. So the page is fully visible without JavaScript.
   Under prefers-reduced-motion: reduce none of this is parsed, which is why the effect is off rather than shortened
   (WCAG 2.2 SC 2.3.3; vestibular reactions include nausea and migraine). Budget: 16px, 400ms, opacity and transform
   only, so nothing reflows and nothing shifts. The house rules, with the reasoning, are in the Launch Office skill
   .claude/skills/motion/SKILL.md. */
@media (prefers-reduced-motion: no-preference) {
  html.motion [data-reveal] { opacity: 0; transform: translateY(16px); }
  html.motion [data-reveal].is-revealed {
    opacity: 1; transform: none;
    transition: opacity 400ms ease-out, transform 400ms ease-out;
  }
  /* belt and braces: a heading jumped to by a #fragment, or holding focus, is shown whatever the observer is doing */
  html.motion [data-reveal]:target { opacity: 1; transform: none; }
  html.motion [data-reveal]:focus-within { opacity: 1; transform: none; }
}
/* Print: the reveal never applies. An unrevealed heading would otherwise print blank. (It sits here, after the
   print block above, because equal specificity is decided by source order.) */
@media print { html.motion [data-reveal] { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- hero entrance (D39)
   The hero animates once, on load: the H1 (with its eyebrow) fades and slides in from the left, the hero photograph
   from the right, the standfirst and the founder line fade and rise, and the call-to-action row fades in last.
   0 / 100 / 200 / 300 ms stagger, 500 ms each (400 for the CTA), so the last element has settled by 700 ms.

   This is PURE CSS and nothing gates it — not motion.js, not the .js class menu.js sets, nothing. That is the whole
   reason it may sit above the fold where the scroll reveal above may not: a scroll reveal has to hide content and
   wait for a script, so a blocked script leaves the headline invisible; a load animation with animation-fill-mode:
   both runs off the stylesheet alone and ends visible whatever happens. Never make this depend on script.
   The hidden state lives only in the keyframes' 0%, so `animation: none` anywhere below restores a fully visible,
   untransformed element — which is what the focus and print rules rely on.

   opacity and transform only: both are composited, so nothing reflows and CLS stays at 0.
   Below 1100px the hero is one column and the sideways travel would be meaningless (and, rightwards, would poke a
   full-width figure past the gutter), so every element rises instead and only the stagger carries the sequence.
   The photograph animates by its frame, not by its <figure>: the figure also holds the Unsplash credit, and the
   credit is two links. Nothing focusable is hidden here except the call-to-action row, which Sam asked for by name
   and which the focus rule below un-hides instantly.
   Reasoning and house rules: the Launch Office skill .claude/skills/motion/SKILL.md. */
@keyframes hero-in-left  { from { opacity: 0; transform: translateX(-24px); } }
@keyframes hero-in-right { from { opacity: 0; transform: translateX(24px); } }
@keyframes hero-in-up    { from { opacity: 0; transform: translateY(16px); } }
@keyframes hero-in       { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero > .wrap > .eyebrow, .hero__copy > .eyebrow,
  .hero > .wrap > h1, .hero__copy > h1                     { animation: hero-in-up 500ms ease-out both; }
  .hero__photo > .photo__frame                             { animation: hero-in-up 500ms ease-out 100ms both; }
  .hero > .wrap > .lead, .hero__copy > .lead,
  .hero__copy > .hero__founder                             { animation: hero-in-up 500ms ease-out 200ms both; }
  .hero > .wrap > .actions, .hero__copy > .actions         { animation: hero-in 400ms ease-out 300ms both; }
}
/* Side by side only once the hero is actually two columns. Name only: the timings above stand. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
  .hero > .wrap > .eyebrow, .hero__copy > .eyebrow,
  .hero > .wrap > h1, .hero__copy > h1                     { animation-name: hero-in-left; }
  .hero__photo > .photo__frame                             { animation-name: hero-in-right; }
}
/* Focus cancels the whole sequence instantly. An element mid-fade is still focusable and still in the accessibility
   tree, so a keyboard user who tabs into the hero inside the first 700ms would otherwise get a focus ring on a
   call to action nobody can see. Cancelling snaps the hero to its finished state, which is the right trade.
   (Equal specificity with the rules above; it wins on source order, as the print rule above this one does.) */
.hero:focus-within > .wrap > .eyebrow, .hero:focus-within .hero__copy > .eyebrow,
.hero:focus-within > .wrap > h1, .hero:focus-within .hero__copy > h1,
.hero:focus-within .hero__photo > .photo__frame,
.hero:focus-within > .wrap > .lead, .hero:focus-within .hero__copy > .lead,
.hero:focus-within .hero__copy > .hero__founder,
.hero:focus-within > .wrap > .actions, .hero:focus-within .hero__copy > .actions { animation: none; }
/* Print: a hero printed before the sequence finished would otherwise print blank. */
@media print {
  .hero > .wrap > .eyebrow, .hero__copy > .eyebrow,
  .hero > .wrap > h1, .hero__copy > h1,
  .hero__photo > .photo__frame,
  .hero > .wrap > .lead, .hero__copy > .lead,
  .hero__copy > .hero__founder,
  .hero > .wrap > .actions, .hero__copy > .actions         { animation: none; }
}