/* ================= Manic Edge · site stylesheet =================
   Layout modelled on startuplab.no (full-viewport corner-pinned hero,
   centred intro, card row, tinted band, dark feature block, giant
   contact type, dark footer) with the Manic Edge brand system applied:
   paper / ink / Manic Orange, Instrument Serif display, Inter body,
   IBM Plex Mono labels. Flat colour throughout, with one exception: a
   dimmed black-and-white Vancouver photograph under each hero. */

/* ---------- fonts (self-hosted, see fonts/OFL.txt) ---------- */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  --paper: #F6F4EF;
  --paper-tint: #EEEAE1;
  --tint-accent: #F4E0D4;
  --ink: #16140F;
  --ink-soft: #5F5A50;
  --paper-soft: rgba(246, 244, 239, 0.72);
  --accent: #E8490F;
  --accent-soft: rgba(232, 73, 15, 0.08);
  --line: rgba(22, 20, 15, 0.14);
  --line-light: rgba(246, 244, 239, 0.18);
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --container: 65rem;
  --container-wide: 77.5rem;
  --radius: 20px;
  --radius-lg: 30px;
  --nav-h: 5.375rem;
}

/* ---------- type switch ----------
   Five roles. The self-hosted trio (Instrument Serif, Inter, IBM Plex Mono)
   is the base and the fallback in every stack. The ADOBE block underneath
   puts the Adobe Fonts families in front and sets the metrics that only
   make sense with them (Dharma Gothic E is a condensed face at 800, so the
   display scale, line-height and weight move with it).
   The Adobe Fonts <link> is in every page head (privacy wording approved
   2026-10-11). Turning the type system on or off is the ADOBE block. */
:root {
  --display: "Instrument Serif", Georgia, serif;
  --display-weight: 400;
  --display-lh: 0.95;
  --display-scale: 0.78;
  --display-track: -0.015em;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans-light: 400;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --label: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --label-weight: 600;
}
/* ADOBE — comment out this block to revert the whole site to the
   self-hosted trio. The web project (nty3lob) serves each family at 400
   and 700; add 300/500 Filson Pro and 800 Dharma Gothic E to the project
   and raise the weights here if wanted. */
:root {
  --display: "dharma-gothic-e", "Instrument Serif", Georgia, serif;
  --display-weight: 700;
  --display-lh: 0.8;
  --display-scale: 1;
  --display-track: 0;
  --sans: "filson-pro", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans-light: 400;
  --mono: "cartograph-cf", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --label: "wedding-gothic-atf", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --label-weight: 700;
}
/* /ADOBE */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-anchor off: Chrome's scroll anchoring reacts to ScrollTrigger
   reverting and re-applying pins during refresh and shifts the scroll. */
html { scroll-behavior: smooth; overflow-anchor: none; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: var(--sans-light); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
::selection { background: var(--accent); color: var(--paper); }
img, svg { max-width: 100%; display: block; }
[id] { scroll-margin-top: var(--nav-h); }
a { color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h1 em, h2 em, h3 em, .em { font-style: italic; color: var(--accent); }
.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.hidden { display: none !important; }
.eyebrow, .marker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 1.25rem;
}
/* accent at this size only clears AA on dark; on paper the small labels go ink-soft */

/* pages not yet rebuilt keep the old, tighter gutter */
body.legacy { --gutter: clamp(1.25rem, 3.5vw, 3.125rem); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 0.95rem 1.7rem; border: 1px solid var(--ink); border-radius: 999px;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.btn--small { padding: 0.7rem 1.25rem; font-size: 0.8rem; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--ink);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.nav.scrolled {
  background: rgba(246, 244, 239, 0.9); color: var(--ink);
  backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line);
}
.nav__logo {
  font-family: var(--mono); font-weight: 500; font-size: 1rem; letter-spacing: 0.14em;
  color: inherit; text-decoration: none; display: flex; align-items: center; gap: 0.6rem;
}
.logo-mark { width: 22px; height: 22px; flex-shrink: 0; transition: transform 0.25s ease; }
.nav__logo:hover .logo-mark { transform: rotate(-8deg); }
.nav__right { display: flex; align-items: center; gap: 0.9rem; }

.nav__burger {
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid currentColor;
  background: transparent; color: inherit; cursor: pointer; position: relative; padding: 0;
}
.nav__burger span {
  position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor;
  transition: transform 0.25s, top 0.25s;
}
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 26px; }
.nav.menu-on { color: var(--paper); background: transparent; box-shadow: none; backdrop-filter: none; }
.nav.menu-on .btn--small { visibility: hidden; }
.nav.menu-on .nav__burger span:first-child { top: 22px; transform: rotate(45deg); }
.nav.menu-on .nav__burger span:last-child { top: 22px; transform: rotate(-45deg); }

/* ---------- full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; padding: var(--nav-h) var(--gutter) 3rem;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.menu.open { opacity: 1; visibility: visible; }
.menu__inner { max-width: var(--container-wide); margin: 0 auto; width: 100%; }
.menu__label { color: var(--paper-soft); letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 2rem; }
.menu__link {
  display: block; font-family: var(--serif); font-size: clamp(2.6rem, 6.5vw, 5.5rem); line-height: 1.05;
  text-decoration: none; color: var(--paper); padding: 0.3rem 0;
  transform: translateY(12px); opacity: 0; transition: color 0.2s, transform 0.4s, opacity 0.4s;
}
.menu.open .menu__link { transform: none; opacity: 1; }
.menu.open .menu__link:nth-child(2) { transition-delay: 0.05s; }
.menu.open .menu__link:nth-child(3) { transition-delay: 0.1s; }
.menu.open .menu__link:nth-child(4) { transition-delay: 0.15s; }
.menu.open .menu__link:nth-child(5) { transition-delay: 0.2s; }
.menu.open .menu__link:nth-child(6) { transition-delay: 0.25s; }
.menu__link:hover { color: var(--accent); }
.menu__foot { margin-top: 2.5rem; color: var(--paper-soft); }
.menu__foot a { color: inherit; text-decoration: none; }
.menu__foot a:hover { color: var(--accent); }

/* ---------- hero: corner-pinned headline ---------- */

#swarm { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A black-and-white Vancouver photograph sits under the hero art on every
   page (img/hero-<page>.jpg, set per page in --photo), dimmed so the type
   stays legible. The ink gradient keeps the corner-pinned lines on solid
   ground at the top and bottom of the frame. */

.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* sub-page hero art draws itself on load. Each part carries a class and a
   --i step (and optionally a --d base delay) in the markup; under reduced
   motion every animation is off and the art shows in its final state. */
.hero__art .rise { transform-box: fill-box; transform-origin: 50% 100%; animation: art-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.15s + var(--i, 0) * 0.14s); }
.hero__art .draw { transform-box: fill-box; transform-origin: 0 50%; animation: art-draw var(--dur, 1.1s) cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0.1s) both; }
.hero__art .gate { transform-box: fill-box; transform-origin: 50% 50%; animation: art-gate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.5s + var(--i, 0) * 0.22s); }
.hero__art .pop { transform-box: fill-box; transform-origin: 50% 50%; animation: art-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.9s + var(--i, 0) * 0.22s); }
.hero__art .fade { animation: art-fade 0.6s ease both; animation-delay: calc(var(--d, 0.6s) + var(--i, 0) * 0.14s); }
.hero__art .beat { animation: art-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both, art-beat 2.4s ease-in-out 1.8s infinite; animation-delay: calc(0.15s + var(--i, 0) * 0.14s), 1.8s; }
.hero__art .halo { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: brain-halo 2.4s ease-out 1.8s infinite; }
/* the about hero's runner: hops node to node along the track on a loop */
.hero__art .run { opacity: 0; animation: art-run 7s cubic-bezier(0.45, 0, 0.2, 1) 2.4s infinite; }
@keyframes art-rise { from { transform: scaleY(0); } }
@keyframes art-draw { from { transform: scaleX(0); } }
@keyframes art-gate { from { transform: scaleY(0); opacity: 0; } }
@keyframes art-pop { from { transform: scale(0); opacity: 0; } }
@keyframes art-fade { from { opacity: 0; } }
@keyframes art-beat { 0%, 100% { fill-opacity: 0.85; } 50% { fill-opacity: 1; } }
@keyframes art-run {
  0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; } 10% { transform: translateX(0); }
  26% { transform: translateX(260px); } 36% { transform: translateX(260px); }
  52% { transform: translateX(520px); } 62% { transform: translateX(520px); }
  78% { transform: translateX(780px); opacity: 1; } 86%, 100% { transform: translateX(780px); opacity: 0; }
}

/* ---------- section primitives ---------- */
.section { padding: clamp(5rem, 10.4vw, 9.375rem) var(--gutter); }

.inner { max-width: var(--container); margin: 0 auto; }

.inner--wide { max-width: var(--container-wide); margin: 0 auto; }

.h-section {
  font-size: clamp(2.4rem, 4.2vw, 3.75rem); line-height: 1.12; letter-spacing: -0.01em;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.h-section--center { text-align: center; max-width: 46rem; margin-left: auto; margin-right: auto; }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--ink-soft); max-width: 38rem; }

/* ---------- intro statement ---------- */
.intro { padding: clamp(5rem, 10.4vw, 9.375rem) var(--gutter); }
.intro__text {
  font-size: clamp(1.9rem, 2.7vw, 2.5rem); line-height: 1.28; letter-spacing: -0.01em;
  max-width: 44rem; margin: 0 auto; text-align: center;
}
.intro__text + .lead { text-align: center; margin: 1.5rem auto 0; }
.intro--left .intro__text { text-align: left; margin: 0; max-width: 56rem; font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.intro--left .lead { margin: 1.5rem 0 0; text-align: left; }
/* intro with the population graph beside the text (/simulations) */

.brain { display: block; width: 100%; height: auto; }
.brain__flash { animation: brain-flash 2.4s ease-in-out infinite; }
.brain__halo { transform-box: fill-box; transform-origin: center; animation: brain-halo 2.4s ease-out infinite; }
@keyframes brain-flash { 0%, 100% { fill-opacity: 0.45; } 50% { fill-opacity: 1; } }
@keyframes brain-halo { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } }

/* ---------- offer cards (three across, middle inverted) ---------- */

.offers__row { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.offer {
  width: 20.625rem; min-height: 26.2rem; border-radius: var(--radius); border: 1px solid var(--line);
  padding: 2.5rem 2.5rem 2.5rem 2rem; background: var(--paper-tint); color: var(--ink);
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.offer:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -28px rgba(22, 20, 15, 0.45); }
.offer--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.offer__name {
  font-family: var(--serif); font-size: clamp(2.1rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--accent); margin-bottom: 1.5rem;
}
.offer__head { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.8rem; }
.offer__body { font-size: 1.1rem; line-height: 1.45; flex-grow: 1; }
.offer--dark .offer__body { color: var(--paper-soft); }
.offer .btn { align-self: flex-start; margin-top: 1.75rem; }

/* ---------- practices: three cards rising into place ----------
   .duo pins for one screen per card (see js/deck.js). The inner block is one
   viewport tall so the pinned frame is exactly what the visitor sees;
   overflow is clipped because the cards start translated below it. */

/* three across between 901 and 1100px is tight: one notch smaller */

/* media zones invert the card: dark on the tint cards, grey on the ink one */

.deck-ladder { display: flex; align-items: flex-end; gap: 4%; width: 100%; height: 70%; position: relative; }
.deck-ladder span { flex: 1; background: var(--ink); opacity: 0.22; border-radius: 6px 6px 0 0; }
.deck-ladder span:nth-child(1) { height: 18%; } .deck-ladder span:nth-child(2) { height: 36%; }
.deck-ladder span:nth-child(3) { height: 54%; } .deck-ladder span:nth-child(4) { height: 76%; background: var(--accent); opacity: 1; }
.deck-ladder span:nth-child(5) { height: 100%; }
/* the caption sits centred under the fourth bar: five bars of 16.8% with 4% gaps, so its centre is at 70.8% */

/* case-study slots (portfolio placeholder until real work goes in) */

/* ---------- feature grid (dark block) ---------- */

/* The fork columns fly in from off-screen; clip the section so their
   start positions never widen the page. */
#how { overflow: hidden; }

/* ---------- big panel (replaces the section photograph) ---------- */

/* ---------- record list ---------- */

/* ---------- giant contact ---------- */

.form-wrap { padding: 2rem var(--gutter) clamp(6rem, 10.4vw, 9.375rem); }
.form { max-width: 52rem; margin: 0 auto; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form__grid .form__full { grid-column: 1 / -1; }
.form label {
  display: block; margin-bottom: 1.1rem; font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.form input, .form textarea, .form select {
  display: block; width: 100%; margin-top: 0.45rem;
  background: transparent; border: 1px solid var(--line); border-radius: 12px;
  padding: 0.95rem 1.1rem; font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form textarea { resize: vertical; }
.form__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.5rem; }
.form__success { color: var(--accent); }
.form__note { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- footer (dark) ---------- */

.maple { width: 13px; height: 14px; fill: #D52B1E; flex-shrink: 0; }

/* ---------- service pages: callout ---------- */

/* ---------- service pages: "what you get" cards ----------
   Four equal cards, two across. Each card carries its own label, a media
   zone that fills whatever height the row needs, and the caption above a
   hairline, so the four read as one system instead of tiles with loose
   captions underneath. */
.get { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); }
.get__card {
  border-radius: var(--radius); background: var(--paper-tint); padding: 1.5rem 1.75rem 1.6rem;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem;
}
.get__card--accent { background: var(--tint-accent); }
.get__card--ink { background: var(--ink); color: var(--paper); }
.get__label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.get__card--ink .get__label { color: var(--paper-soft); }
.get__media { min-height: 12rem; display: flex; flex-direction: column; justify-content: flex-end; }
.get__big { font-family: var(--serif); font-size: clamp(4rem, 7vw, 6.5rem); line-height: 0.9; letter-spacing: -0.03em; }
.get__big em { color: var(--accent); }
.get__lines { font-family: var(--mono); font-size: 0.85rem; line-height: 1.9; color: var(--ink); }
.get__lines .tag-seed { color: #1E7A4F; }
.get__lines .tag-edge { color: var(--accent); }
.get__cap { border-top: 1px solid var(--line); padding-top: 1.1rem; font-size: 1.05rem; line-height: 1.45; }
.get__card--ink .get__cap { border-top-color: var(--line-light); color: #D8D4CA; }
.get .readout { border: 1px solid var(--line-light); border-radius: 12px; }
.get .readout__body { min-height: 0; height: 9.6rem; overflow: hidden; }

/* readout terminal (typed by main.js) */
.readout { background: var(--ink); border-radius: 14px; overflow: hidden; }
.readout__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line-light); }
.readout__bar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(246, 244, 239, 0.25); }
.readout__bar .dot:first-child { background: var(--accent); }
.readout__title { color: var(--paper-soft); margin-left: 0.6rem; }
.readout__body { padding: 1.2rem 1.3rem; color: #D8D4CA; font-size: 0.82rem; line-height: 1.85; white-space: pre-wrap; min-height: 13.5rem; }
.readout__body .tag-seed { color: #7BC7A3; }
.readout__body .tag-edge { color: #FF8A5C; }
.readout__body .cursor { display: inline-block; width: 0.55em; height: 1.05em; background: var(--accent); vertical-align: text-bottom; animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* stage ladder inside a card */
.mini-ladder { display: flex; align-items: flex-end; gap: 0.6rem; height: 9rem; }
.mini-ladder span { flex: 1; background: var(--ink); border-radius: 4px 4px 0 0; opacity: 0.22; }
.mini-ladder span:nth-child(1) { height: 18%; } .mini-ladder span:nth-child(2) { height: 36%; }
.mini-ladder span:nth-child(3) { height: 54%; } .mini-ladder span:nth-child(4) { height: 76%; background: var(--accent); opacity: 1; }
.mini-ladder span:nth-child(5) { height: 100%; }
.get__card--ink .mini-ladder span { background: var(--paper); }
.get__card--ink .mini-ladder span:nth-child(4) { background: var(--accent); }

/* knowledge base bars and the orchestration sketch inside a card (/readiness) */

  

/* scorecard sketch inside a card */
.score { display: grid; gap: 0.55rem; }
.score__row { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 0.8rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.score__bar { position: relative; height: 2px; background: var(--line); }
.score__bar::before, .score__bar::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); }
.score__bar::before { left: var(--now); background: var(--ink); }
.score__bar::after { left: var(--target); background: var(--accent); }

/* ---------- checklist (who it's for) ---------- */

/* ---------- numbered columns (how it works) ---------- */

/* ---------- faq (dark, two columns) ---------- */

/* ---------- about: prose, centred block ---------- */

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .brain__flash, .brain__halo { animation: none; }
  .hero__art .rise, .hero__art .draw, .hero__art .gate, .hero__art .pop, .hero__art .fade, .hero__art .beat { animation: none; }
  .hero__art .halo, .hero__art .run { display: none; }
  .brain__flash { fill-opacity: 1; } .brain__halo { display: none; }
  
  
  
  .reveal { opacity: 1; transform: none; transition: none; }
  .menu, .menu__link { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  
  
  
  
  
  
  
  .deck-ladder { height: 60%; }
  
  
  
  
  .offers__row { flex-direction: column; align-items: stretch; }
  .offer { width: 100%; min-height: 0; }
  .form__grid { grid-template-columns: 1fr; }
  
  
  
  .get { grid-template-columns: 1fr; }
  
  
}
@media (max-width: 560px) {
  .nav .btn--small { display: none; }
  
}

/* ---------- currency toggle ----------
   Prices are written in USD; every .price carries both figures in data
   attributes and main.js swaps the text. One control per section that
   shows a number, all in step; the choice persists in localStorage. */
.currency {
  display: inline-flex; align-items: center; gap: 0.15rem;
  padding: 0.2rem; border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; line-height: 1;
}
.currency__opt {
  appearance: none; background: transparent; border: 0; border-radius: 999px;
  padding: 0.5rem 0.85rem; color: inherit; font: inherit; letter-spacing: inherit;
  cursor: pointer; opacity: 0.6;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.currency__opt:hover { opacity: 1; }
.currency__opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); opacity: 1; }
.currency__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.offers__currency { display: flex; justify-content: center; margin: -1.5rem 0 3rem; }

/* ---------- decision check (/decision-check) ----------
   Free assessment tool. One question per screen inside a plain form built
   by js/decision-check.js; the report reuses the readout terminal, the
   gate rows borrow the checklist rhythm, and [YOU SAID] / [PATTERN]
   alias the seed / edge tag colours. No new tokens. */
.intro__cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.dc__noscript { margin-top: 2rem; }
/* the check itself: every question fits the dialog without scrolling.
   Sizes are tighter than the page defaults and questions with more than
   four options run in two columns; overflow: auto is only a safety net
   for very short viewports. */
.dc-modal--check { width: min(56rem, calc(100% - 2 * var(--gutter))); max-height: min(94svh, 56rem); overflow: auto; overscroll-behavior: contain; }
.dc__head { display: flex; align-items: center; gap: 1.25rem; padding: clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.5rem, 3vw, 2.25rem) 0.75rem; }
.dc__head .dc__progress { flex: 1; margin-bottom: 0; }
.dc__body { padding: 0.25rem clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem); }
.dc-modal--check .dc__legend { margin-bottom: 1.1rem; }
.dc-modal--check .dc__section { margin-bottom: 0.6rem; }
.dc-modal--check .dc__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.dc-modal--check .dc__hint { margin: -0.5rem 0 0.9rem; }
.dc-modal--check .dc__opt { padding: 0.75rem 0.95rem 0.75rem 0.9rem; font-size: 1rem; line-height: 1.35; gap: 0.75rem; }
.dc-modal--check .dc__opts { gap: 0.5rem; }
.dc__opts--two { grid-template-columns: 1fr 1fr; }
.dc-modal--check .dc__nav { margin-top: 1.25rem; }
.dc__noscript a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.dc__progress { display: flex; align-items: center; gap: 1.25rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dc__count { color: var(--ink-soft); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc__bar { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.dc__bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--accent); transition: width 0.4s ease; }
.dc__q { border: 0; min-width: 0; outline: none; }
.dc__legend { display: block; padding: 0; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.dc__section { display: block; color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; margin-bottom: 1rem; }
.dc__title { display: block; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.12; letter-spacing: -0.01em; }
.dc__hint { color: var(--ink-soft); margin: -0.75rem 0 1.25rem; }
.dc__opts { display: grid; gap: 0.6rem; }
.dc__opt {
  position: relative; display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1rem 1.2rem 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); cursor: pointer; font-size: 1.05rem; line-height: 1.4;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.dc__opt:hover { border-color: var(--ink); }
.dc__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.dc__opt-mark {
  flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; position: relative;
  border: 1px solid var(--ink); border-radius: 50%; transition: background 0.15s, border-color 0.15s;
}
.dc__opt--box .dc__opt-mark { border-radius: 4px; }
.dc__opt--on { border-color: var(--accent); background: var(--accent-soft); }
.dc__opt--on .dc__opt-mark { background: var(--accent); border-color: var(--accent); }
.dc__opt--on .dc__opt-mark::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: var(--paper); }
.dc__opt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dc__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.dc__back.is-off { visibility: hidden; }
.dc__nav .btn[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }
.dc__nav .btn[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dc__q--enter { animation: dc-enter 0.35s ease both; }
@keyframes dc-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* the report */
.dc-verdict { font-size: clamp(2.6rem, 5.5vw, 4.75rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 16ch; outline: none; }
.dc-verdict__body { margin-top: 1.25rem; }
.dc-gates { list-style: none; margin-top: clamp(2.5rem, 5vw, 4rem); }
.dc-gate {
  display: grid; grid-template-columns: 9.5rem 4rem 1fr; gap: 0.5rem 1.5rem; align-items: baseline;
  padding: 1.4rem 0; border-top: 1px solid var(--line);
}
.dc-gate:last-child { border-bottom: 1px solid var(--line); }
.dc-gate__name { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.dc-gate__status { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; font-weight: 500; }
.dc-gate--pass .dc-gate__status { color: #1E7A4F; }
.dc-gate--soft .dc-gate__status { color: var(--accent); }
.dc-gate--fail .dc-gate__status { color: var(--ink); }
.dc-gate__text { font-size: 1.05rem; line-height: 1.45; color: var(--ink-soft); }
.dc-tier { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(2rem, 4vw, 3rem); border-radius: var(--radius); background: var(--tint-accent); }
.dc-tier__name { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--accent); margin-bottom: 1rem; }
.dc-tier__body { font-size: 1.15rem; line-height: 1.5; }
.dc-tier__foot { margin-top: 1.25rem; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.dc-readout { margin-top: clamp(2.5rem, 5vw, 4rem); }
.dc-readout .readout__body { white-space: normal; min-height: 0; padding: 1.4rem 1.5rem 1.6rem; }
.dc-line { display: flex; gap: 0.75rem; }
.dc-line__tag { flex-shrink: 0; min-width: 10.5ch; white-space: nowrap; }
.dc-line__text { flex: 1; min-width: 0; }
.dc-line--blank { height: 1.85em; }
.dc-line--foot { color: var(--paper-soft); }
/* [YOU SAID] and [PATTERN] carry the seed / edge colours from .readout__body */
.readout__body .tag-said { color: #7BC7A3; }
.readout__body .tag-pattern { color: #FF8A5C; }
.dc-again { margin-top: 2rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.dc-again__note { flex-basis: 100%; color: var(--ink-soft); font-size: 0.95rem; }
.dc-print-head { display: none; }

/* the CTA under the report */
.dc-cta { padding-bottom: 0; text-align: center; }
.dc-cta .h-section { margin-bottom: 1.25rem; }
.dc-cta__body { margin: 0 auto; max-width: 40rem; }

/* get a copy: the readout by email, collected in a native dialog */
.dc-modal {
  /* margin: auto restores the browser's centring, which the global reset removes */
  margin: auto; border: 0; padding: 0; background: var(--paper); color: var(--ink); border-radius: var(--radius);
  width: min(34rem, calc(100% - 2 * var(--gutter))); box-shadow: 0 30px 70px -40px rgba(22, 20, 15, 0.5);
}
.dc-modal::backdrop { background: rgba(22, 20, 15, 0.55); }
.dc-modal__inner { padding: clamp(1.75rem, 4vw, 2.5rem); }
.dc-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.dc-modal__title { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -0.01em; }
.dc-modal__body { color: var(--ink-soft); margin-bottom: 1.5rem; }
.dc-modal .form { max-width: none; }
.dc-modal .form__actions { margin-top: 0; }
.form .dc-consent {
  display: flex; align-items: flex-start; gap: 0.75rem; margin: 0.25rem 0 1.4rem; cursor: pointer;
  font-family: var(--sans); font-size: 1rem; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.form .dc-consent input { display: inline-block; width: 1.1rem; height: 1.1rem; margin: 0.2rem 0 0; flex-shrink: 0; accent-color: var(--accent); }
.dc-modal__result { color: var(--accent); margin-bottom: 1.25rem; }
/* while sending there is nothing to close; once sent, Done is the only way out */
.dc-modal--sending .dc-modal__head .btn, .dc-modal--done .dc-modal__head .btn { display: none; }

/* free-tool entry card: Decision Check on /simulations, Support Maturity Check on /support */

/* ---------- Support Maturity Check (/support-check) ----------
   Shares every .dc-* rule above. The lens questions number their five
   options like the ladder; the readout's six rows carry a stage bar and
   mark the lens that moves first; the AI read sits in an ink block. */
.dc__opt-num { flex-shrink: 0; color: var(--ink-soft); font-size: 0.72rem; letter-spacing: 0.14em; margin-top: 0.3rem; min-width: 1.6rem; }
.dc__opt--on .dc__opt-num { color: var(--accent); }
.dc-gates--lens .dc-gate { grid-template-columns: 11rem 9.5rem 1fr; }
.dc-gate__stage { display: flex; flex-direction: column; gap: 0.5rem; align-self: center; }
.dc-stage { display: flex; gap: 3px; }
.dc-stage i { display: block; width: 14px; height: 4px; border-radius: 1px; background: var(--line); }
.dc-stage i.on { background: var(--ink); }
.dc-gate--floor .dc-stage i.on { background: var(--accent); }
.dc-gate--lens .dc-gate__status { color: var(--ink-soft); }
.dc-gate--floor .dc-gate__status { color: var(--accent); }
.dc-tier--ink { margin-top: 1rem; background: var(--ink); color: var(--paper); }
.dc-tier--ink .dc-tier__name { color: var(--accent); }
.dc-verdict__note { margin-top: 1.25rem; max-width: 40rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
/* the climbs graphic: six rows of five stage cells, target column marked */
.dc-climbs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.dc-climbs__title { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 1.5rem; }
.dc-climbs__grid { display: grid; grid-template-columns: 10rem repeat(5, 1fr) 5.5rem; gap: 0.45rem 0.35rem; align-items: center; }
.dc-climbs__head { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-climbs__head--target { color: var(--accent); }
.dc-climbs__head--n { text-align: right; }
.dc-climbs__lens { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-right: 0.5rem; }
.dc-climbs__cell { display: block; height: 1.7rem; border-radius: 4px; background: var(--line); }
.dc-climbs__cell.is-on { background: var(--accent); }
.dc-climbs__cell.is-climb { background: var(--accent-soft); border: 1px dashed var(--accent); }
.dc-climbs__cell.is-target.is-climb { background: var(--tint-accent); }
.dc-climbs__n { text-align: right; font-size: 0.85rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.dc-climbs__cap { margin-top: 1.25rem; max-width: 40rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.dc-climbs__short { display: none; }

/* ---------- AI Readiness Check (/readiness-check) ----------
   Shares every .dc-* rule above. The readout opens with the rollout
   track from the /readiness hero: three stations on a dashed line, the
   ones behind the visitor filled ink, the current one accent. */
.rc-stations {
  list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem);
}
.rc-stations::before {
  content: ""; position: absolute; left: 0.55rem; right: 0; top: 0.55rem;
  border-top: 1px dashed var(--line);
}
.rc-station { position: relative; display: flex; flex-direction: column; gap: 0.45rem; }
.rc-station__dot {
  width: 1.1rem; height: 1.1rem; border-radius: 50%; margin-bottom: 0.5rem;
  background: var(--paper); border: 1px solid var(--ink-soft);
}
.rc-station.is-done .rc-station__dot { background: var(--ink); border-color: var(--ink); }
.rc-station.is-here .rc-station__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.rc-station__num { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-soft); }
.rc-station.is-here .rc-station__num { color: var(--accent); }
.rc-station__name { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.15; }
.rc-station__here { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* the menu has one more link than the other pages' stagger covers */
.menu.open .menu__link:nth-child(7) { transition-delay: 0.3s; }

@media (max-width: 900px) {
  .dc-gate { grid-template-columns: 1fr auto; }
  .dc-gate__text { grid-column: 1 / -1; }
  .dc-gates--lens .dc-gate { grid-template-columns: 1fr auto; }
  .dc-gate__stage { align-items: flex-end; text-align: right; max-width: 11rem; }
  .dc-climbs__grid { grid-template-columns: 4.8rem repeat(5, 1fr) 3rem; gap: 0.4rem 0.25rem; }
  .dc-climbs__head { font-size: 0.6rem; letter-spacing: 0.08em; }
  .dc-climbs__full { display: none; }
  .dc-climbs__short { display: inline; }
  .dc-climbs__lens { font-size: 0.66rem; }
  .dc-climbs__cell { height: 1.3rem; }
}
@media (max-width: 640px) {
  .dc__opts--two { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dc__opt { font-size: 1rem; padding: 0.9rem 1rem; }
  .dc__nav .btn { padding: 0.85rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dc__q--enter { animation: none; }
  .dc__bar-fill, .dc__opt, .dc__opt-mark { transition: none; }
}

/* ---------- decision check: print ----------
   "Save as PDF" is the browser's print dialog. Once a report is on
   screen (body.dc-report-ready) only the report prints: no nav, hero,
   questions, forms or footer. Dark blocks become bordered paper blocks
   so the output does not depend on the print-backgrounds setting. */
@media print {
  @page { margin: 14mm 16mm; }
  body.dc-report-ready { background: #fff; color: var(--ink); font-size: 11pt; }
  body.dc-report-ready .nav, body.dc-report-ready .menu, body.dc-report-ready .intro, body.dc-report-ready #dc-check, body.dc-report-ready #contact, body.dc-report-ready #form, body.dc-report-ready .dc-again { display: none !important; }
  body.dc-report-ready #report { padding: 0; }
  body.dc-report-ready .dc-report { max-width: none; }
  .dc-print-head {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding-bottom: 0.9rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--ink);
  }
  .dc-print-head__brand { display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.14em; font-weight: 500; }
  .dc-print-head__brand .logo-mark { width: 16px; height: 16px; }
  .dc-print-head__meta { color: var(--ink-soft); }
  body.dc-report-ready .marker { margin-bottom: 0.5rem; }
  .dc-verdict { font-size: 24pt; max-width: none; }
  .dc-verdict__body { font-size: 11.5pt; margin-top: 0.4rem; max-width: 36rem; }
  .dc-verdict__note { font-size: 9pt; margin-top: 0.4rem; max-width: 36rem; }
  .dc-gates { margin-top: 1rem; }
  .dc-gate { padding: 0.55rem 0; gap: 0.2rem 1.2rem; grid-template-columns: 7.5rem 3.5rem 1fr; break-inside: avoid; }
  .dc-gate__name { font-size: 13pt; }
  .dc-gate__text { font-size: 10pt; color: var(--ink); }
  .dc-tier { margin-top: 1rem; padding: 0.8rem 1.1rem; background: none; border: 1px solid var(--ink); border-radius: 10px; break-inside: avoid; }
  .dc-tier__name { font-size: 15pt; margin-bottom: 0.3rem; }
  .dc-tier__body { font-size: 10pt; max-width: none; }
  .dc-tier__foot { font-size: 9pt; margin-top: 0.5rem; max-width: none; }
  .dc-gates--lens .dc-gate { grid-template-columns: 8.5rem 7rem 1fr; }
  .dc-stage i.on { background: var(--ink); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .dc-gate--floor .dc-stage i.on { background: var(--accent); }
  .rc-station__dot { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .dc-tier--ink { color: var(--ink); margin-top: 0.6rem; }
  .dc-climbs { margin-top: 1rem; break-inside: avoid; }
  .dc-climbs__title { font-size: 13pt; margin-bottom: 0.6rem; }
  .dc-climbs__cell { height: 0.9rem; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .dc-climbs__cell.is-on { background: var(--accent); }
  .dc-climbs__cell.is-climb { background: none; border: 1px dashed var(--accent); }
  .dc-climbs__cap { font-size: 8.5pt; margin-top: 0.5rem; }
  .dc-readout { margin-top: 1rem; background: none; border: 1px solid var(--ink); border-radius: 10px; }
  .dc-readout .readout__bar { border-bottom-color: var(--line); padding: 0.45rem 0.9rem; }
  .dc-readout .readout__bar .dot { display: none; }
  .dc-readout .readout__title { color: var(--ink-soft); margin-left: 0; }
  .dc-readout .readout__body { color: var(--ink); font-size: 8pt; line-height: 1.6; padding: 0.7rem 0.9rem 0.8rem; }
  .dc-line { break-inside: avoid; }
  .dc-readout .tag-said { color: #1E7A4F; }
  .dc-readout .tag-pattern { color: var(--accent); }
  .dc-line--foot { color: var(--ink-soft); }
  .dc-readout .cursor { display: none; }
}

/* ---------- local businesses (/local) ----------
   Each offer is a centred heading, a spec list on the left and the site's
   offer card on the right carrying the fixed fee. Under 900px they stack. */

/* ================= Redesign system (2026-10) =================
   Long-scroll editorial template: viewport-sized display headlines, serif
   leads, light and dark sections in alternation, thin rules, sharp image
   blocks, pill buttons with an arrow. Primitives are prefixed r- while the
   layout rules above are still carrying the pages that have not been
   rebuilt; those rules go when the last page moves over. */

/* progressive enhancement: html.js is set by an inline script in <head>.
   Anything that starts hidden for an entrance animation hides only under
   .js, so the page reads in full when scripting is off. */
.js [data-slide], .js [data-rise] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js [data-slide], .js [data-rise] { opacity: 1; } }

/* Typed lead ([data-type], home.js): the paragraph keeps its full text,
   which sizes the box and reads to assistive tech, but goes transparent
   under .js until the script has typed a live copy over it (.r-type__live,
   absolutely positioned over the same box so the lines wrap identically).
   The script adds .is-typed when it finishes, or at once under reduced
   motion or if anything goes wrong, so the real text is never lost. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-type]:not(.is-typed) { position: relative; color: transparent; }
  .js [data-type]:not(.is-typed) .r-type__live { position: absolute; inset: 0; color: var(--accent); }
}
.r-type__caret { display: inline-block; width: 0.07em; height: 0.95em; margin-left: 0.08em; vertical-align: -0.1em; background: currentColor; animation: type-caret 1s steps(2, start) infinite; }
.r-type__caret.is-off { transition: opacity 0.4s; opacity: 0; }
@keyframes type-caret { to { visibility: hidden; } }

/* Lenis (self-hosted) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- sections and themes ---------- */
.r-section { position: relative; padding: clamp(4rem, 10vw, 12rem) var(--gutter); }
.r-section--tight { padding-top: clamp(2.5rem, 5vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 6rem); }
.r-section--tall { padding-top: clamp(6rem, 15vw, 18rem); padding-bottom: clamp(6rem, 15vw, 18rem); }
.r-section[data-theme="light"] { background: var(--paper); color: var(--ink); }
.r-section[data-theme="tint"] { background: var(--paper-tint); color: var(--ink); }
.r-section[data-theme="dark"] { background: var(--ink); color: var(--paper); }
.r-section[data-theme="accent"] { background: var(--accent); color: var(--paper); }
.r-inner { max-width: 100rem; margin: 0 auto; }
.r-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.r-cols--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 900px) { .r-cols, .r-cols--wide { grid-template-columns: 1fr; } }

/* ---------- display type ---------- */
.r-h1, .r-h2, .r-display {
  font-family: var(--display); font-weight: var(--display-weight);
  line-height: var(--display-lh); letter-spacing: var(--display-track);
  color: var(--accent); margin: 0; overflow-wrap: anywhere;
}
.r-h1 { font-size: calc(clamp(3.25rem, 10vw, 13.5rem) * var(--display-scale)); }
.r-h2 { font-size: calc(clamp(2.75rem, 9vw, 12rem) * var(--display-scale)); }
.r-h1 em, .r-h2 em { font-style: italic; color: var(--accent); }
.r-section[data-theme="dark"] :is(.r-h1, .r-h2), .r-section[data-theme="accent"] :is(.r-h1, .r-h2) { color: var(--paper); }
.r-section[data-theme="accent"] :is(.r-h1, .r-h2) em { color: var(--ink); }
.r-h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.r-h3 em { font-style: italic; color: var(--accent); }

.r-lead { font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 2.1rem); line-height: 1.25; letter-spacing: -0.005em; max-width: 38ch; margin: 0; }
.r-lead--accent { color: var(--accent); font-size: clamp(1.5rem, 1.9vw, 2.1rem); }
.r-lead--xl { font-size: clamp(1.6rem, 3vw, 3.4rem); line-height: 1.15; max-width: 30ch; }
.r-lead em { font-style: italic; color: var(--accent); }
.r-section[data-theme="dark"] .r-lead em, .r-section[data-theme="accent"] .r-lead em { color: inherit; }
.r-body { font-family: var(--sans); font-weight: var(--sans-light); font-size: 1rem; line-height: 1.5; max-width: 60ch; margin: 0; }
.r-body + .r-body { margin-top: 1em; }
.r-body--soft { color: var(--ink-soft); }
.r-section[data-theme="dark"] .r-body--soft, .r-section[data-theme="accent"] .r-body--soft { color: var(--paper-soft); }
.r-body strong { font-weight: 500; }

.r-cap { font-family: var(--mono); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.04em; }
.r-cap--xs { font-size: 0.625rem; }
.r-num { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.r-section[data-theme="dark"] .r-num { color: var(--accent); }
.r-label {
  font-family: var(--label); font-weight: var(--label-weight); font-size: 0.6875rem; line-height: 1.3;
  letter-spacing: 0.18rem; text-transform: uppercase; color: var(--ink-soft);
}
.r-section[data-theme="dark"] .r-label, .r-section[data-theme="accent"] .r-label { color: var(--paper-soft); }
.r-label--accent { color: var(--ink-soft); }
.r-section[data-theme="dark"] .r-label--accent, .r-callout .r-label--accent, .r-section[data-theme="accent"] .r-label--accent { color: var(--accent); }

/* ---------- rules and gaps ---------- */
.r-rule { border: 0; border-top: 1px solid var(--line); margin: 0 0 clamp(1.875rem, 4vw, 5rem); }
.r-rule--tight { margin-bottom: clamp(1.25rem, 2vw, 1.875rem); }
.r-section[data-theme="dark"] .r-rule { border-top-color: var(--line-light); }
.r-section[data-theme="accent"] .r-rule { border-top-color: var(--paper); }
.r-gap { height: clamp(1.875rem, 4vw, 5rem); }

/* ---------- buttons: pill with an arrow ---------- */
.btn--arrow { display: inline-flex; align-items: center; gap: 0.6em; }
.btn--arrow::after { content: "→"; font-family: var(--sans); font-weight: 500; line-height: 1; transition: transform 0.2s; }
.btn--arrow:hover::after { transform: translateX(3px); }
.r-section[data-theme="dark"] .btn--ghost, .r-section[data-theme="accent"] .btn--ghost { color: var(--paper); border-color: var(--paper); }
.r-section[data-theme="dark"] .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.r-section[data-theme="accent"] .btn--ghost:hover { background: var(--paper); color: var(--accent); }
.r-section[data-theme="accent"] .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.r-section[data-theme="accent"] .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.r-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; display: inline-flex; align-items: center; gap: 0.5em; }
.r-link::after { content: "→"; transition: transform 0.2s; }
.r-link:hover { color: var(--accent); }
.r-link:hover::after { transform: translateX(3px); }

/* ---------- logo ---------- */
.logo-mark--ink { color: var(--ink); }
.logo-mark--paper { color: var(--paper); }
.logo-mark--lg { width: 64px; height: 64px; }
.logo-mark--xl { width: clamp(6rem, 18vw, 16rem); height: auto; aspect-ratio: 1; margin: 0 auto; }
.r-lockup { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--mono); font-weight: 500; letter-spacing: 0.14em; font-size: 1rem; text-decoration: none; color: inherit; }
.r-lockup--lg { gap: 1.2rem; font-size: clamp(1.25rem, 2.4vw, 2rem); }
.r-lockup--lg .logo-mark { width: clamp(2.5rem, 4.5vw, 4rem); height: clamp(2.5rem, 4.5vw, 4rem); }
/* the nav swaps between its ink and paper lockup as sections pass under it.
   On rebuilt pages (nav carries data-theme) it stays transparent all the
   way down; the old paper bar on scroll belongs to the legacy pages only. */
.nav[data-theme], .nav[data-theme].scrolled { background: transparent; box-shadow: none; backdrop-filter: none; }
.nav[data-theme="dark"], .nav[data-theme="accent"], .nav[data-theme="dark"].scrolled, .nav[data-theme="accent"].scrolled { color: var(--paper); }
.nav[data-theme="light"], .nav[data-theme="tint"], .nav[data-theme="light"].scrolled, .nav[data-theme="tint"].scrolled { color: var(--ink); }
.nav[data-theme="dark"] .btn--small, .nav[data-theme="accent"] .btn--small { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav[data-theme="dark"] .btn--small:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.nav[data-theme="accent"] .btn--small:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav[data-theme="light"] .btn--small, .nav[data-theme="tint"] .btn--small { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav[data-theme="light"] .btn--small:hover, .nav[data-theme="tint"] .btn--small:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- media: duotone first, colour on scroll ---------- */
.r-media { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.r-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-media__duo { position: relative; z-index: 0; }
.r-media__colour { position: absolute; inset: 0; z-index: 1; opacity: 0; }
.r-media.is-colour .r-media__colour { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .r-media__colour { opacity: 1; } }
.r-media--4x3 { aspect-ratio: 4 / 3; }
.r-media--3x2 { aspect-ratio: 3 / 2; }
.r-media--16x9 { aspect-ratio: 16 / 9; }
.r-media--portrait { aspect-ratio: 4 / 5; }
.r-media--100vh { height: 100svh; }
.r-media--full { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.r-media__cap { position: absolute; left: 15px; bottom: 15px; z-index: 3; font-family: var(--mono); font-size: 10px; line-height: 1.4; letter-spacing: 0.04em; color: var(--paper); margin: 0; text-shadow: 0 1px 2px rgba(22, 20, 15, 0.5); }
.r-media__art { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.r-media__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(22, 20, 15, 0.35), rgba(22, 20, 15, 0) 40%, rgba(22, 20, 15, 0) 60%, rgba(22, 20, 15, 0.45)); pointer-events: none; }

/* info icon and the card it opens (free tools card on image-led blocks) */
.r-info { position: absolute; right: 15px; bottom: 15px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.r-info__btn {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--paper); background: rgba(22, 20, 15, 0.35);
  color: var(--paper); font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background 0.2s, color 0.2s;
}
.r-info__btn:hover, .r-info__btn[aria-expanded="true"] { background: var(--paper); color: var(--ink); }
.r-info__card { width: 280px; max-width: calc(100vw - 2 * var(--gutter) - 30px); background: var(--tint-accent); color: var(--ink); padding: 18px 20px 16px; font-family: var(--mono); font-size: 10px; line-height: 1.7; letter-spacing: 0.03em; }
.r-info__card[hidden] { display: none; }
.r-info__card p { margin: 0 0 0.8em; }
.r-info__card a { display: block; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); padding: 0.55em 0; }
.r-info__card a::after { content: " →"; color: var(--accent); }
.r-info__card a:hover { color: var(--accent); }

/* ---------- accordion (dark sections) ---------- */
.r-acc { border-top: 1px solid var(--line-light); }
.r-acc__item { border-bottom: 1px solid var(--line-light); }
.r-acc__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 25px 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.2; color: var(--paper);
}
.r-acc__item summary::-webkit-details-marker { display: none; }
.r-acc__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.r-acc__icon { position: relative; width: 22px; height: 22px; flex-shrink: 0; }
.r-acc__icon::before, .r-acc__icon::after { content: ""; position: absolute; background: var(--accent); transition: transform 0.25s ease, opacity 0.25s ease; }
.r-acc__icon::before { left: 0; right: 0; top: 10px; height: 2px; }
.r-acc__icon::after { top: 0; bottom: 0; left: 10px; width: 2px; }
.r-acc__item[open] .r-acc__icon::after { transform: scaleY(0); opacity: 0; }
.r-acc__body { padding: 0 0 25px; max-width: 60ch; font-family: var(--sans); font-weight: var(--sans-light); font-size: 1rem; line-height: 1.5; color: var(--paper-soft); }
.r-acc__body a { color: var(--paper); text-decoration-color: var(--accent); text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .r-acc__icon::before, .r-acc__icon::after { transition: none; } }

/* ---------- record cells (about) ---------- */
.r-record { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); }
.r-record__cell { padding: 4vw 0; border-bottom: 1px solid var(--line-light); }
.r-record__fig { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2.75rem, 5.5vw, 7rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); color: var(--paper); margin: 0; }
.r-record__fig em { font-style: italic; color: var(--accent); }
.r-record__label { margin: 1rem 0 0; max-width: 28ch; }

/* ---------- numbered steps ---------- */
.r-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 7.5vw, 7.5rem); }
.r-step { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: start; max-width: 475px; }
.r-step__body { margin-top: 0.75rem; }
@media (max-width: 560px) { .r-step { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---------- fields (template style) ---------- */
.r-field { display: block; margin: 0 0 1.5rem; }
.r-field__label { display: block; margin-bottom: 0.4rem; }
.r-field input, .r-field textarea, .r-field select {
  display: block; width: 100%; height: 40px; margin: 0; padding: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  font-family: var(--sans); font-weight: var(--sans-light); font-size: 1rem; line-height: 1.5; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.r-field textarea { height: auto; min-height: 7.5rem; padding: 0.5rem 0; resize: vertical; }
.r-field select { appearance: none; -webkit-appearance: none; padding-right: 1.5rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 10px) 50%, calc(100% - 4px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.r-field input:focus, .r-field textarea:focus, .r-field select:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.r-field--half { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 560px) { .r-field--half { grid-template-columns: 1fr; } }
.r-section[data-theme="dark"] .r-field :is(input, textarea, select) { border-bottom-color: var(--paper-soft); color: var(--paper); }
.r-check { display: flex; align-items: flex-start; gap: 0.7rem; font-family: var(--sans); font-size: 0.95rem; }
.r-check input { width: 18px; height: 18px; margin-top: 0.2rem; accent-color: var(--accent); }

/* ---------- card row (practices) ---------- */
.r-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.r-card { display: flex; flex-direction: column; background: var(--paper-tint); color: var(--ink); text-decoration: none; }
.r-card--ink { background: var(--ink); color: var(--paper); }
.r-card__media { aspect-ratio: 4 / 3; background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow: hidden; }
.r-card--ink .r-card__media { background: var(--paper-tint); }
.r-card__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.r-card__title { font-family: var(--serif); font-size: clamp(1.75rem, 2.4vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--accent); margin: 0; }
.r-card__head { font-family: var(--sans); font-weight: 500; font-size: 1.05rem; line-height: 1.35; margin: 0; }
.r-card__desc { font-family: var(--sans); font-weight: var(--sans-light); font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); margin: 0; flex: 1; }
.r-card--ink .r-card__desc { color: var(--paper-soft); }
.r-card .btn { align-self: flex-start; }
@media (max-width: 900px) {
  .r-cards { grid-template-columns: 1fr; }
  .r-cards.splide .splide__list { display: flex; }
  .r-cards.splide .r-card { width: min(82vw, 24rem); flex-shrink: 0; }
}

/* ---------- colour swatches (styleguide only) ---------- */
.r-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 20px; }
.r-swatch { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem; border: 1px solid var(--line); }
.r-swatch .r-cap { display: block; }

/* ================= Home (redesign) ================= */

/* hero: lockup, lead left, media right */
.r-hero { padding-top: calc(var(--nav-h) + 0.5rem); padding-bottom: clamp(2rem, 4vw, 4rem); min-height: 100svh; display: flex; flex-direction: column; }
.r-hero__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(2rem, 6vw, 6rem); }
.r-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; flex: 1; }
.r-hero__text { padding-bottom: clamp(0.5rem, 2vw, 2rem); }
.r-hero__text .r-rule { border-top-color: var(--accent); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.r-hero__lead { font-family: var(--serif); color: var(--accent); font-size: clamp(1.5rem, 1.9vw, 2.3rem); line-height: 1.25; max-width: 30ch; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.r-hero__media { aspect-ratio: 4 / 3; }
.r-hero__media .hero__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.nav__logo { transition: opacity 0.3s; }
.nav--hero:not(.scrolled) .nav__logo { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .r-hero { min-height: 0; }
  .r-hero__grid { grid-template-columns: 1fr; align-items: start; gap: 2rem; }
  .r-hero__top { margin-bottom: 2rem; }
}

/* brand statement */
.r-brand .r-h1 { max-width: 14ch; }
.r-brand__sub { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2.5rem); line-height: 1.2; max-width: 28ch; margin: 0; }
.r-brand__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; }
@media (max-width: 900px) { .r-brand__grid { grid-template-columns: 1fr; } }

/* pinned sequence: one numeral per quarter, collage drifting behind */
.r-seq { position: relative; background: var(--ink); color: var(--paper); }
.r-seq__panel { position: relative; overflow: hidden; padding: clamp(4rem, 10vw, 8rem) var(--gutter); }
.r-seq__collage { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; padding: 0 var(--gutter); opacity: 0.3; pointer-events: none; }
.r-seq__col { display: flex; flex-direction: column; gap: 20px; will-change: transform; }
.r-seq__col:nth-child(2n) { margin-top: -18vh; }
.r-seq__col:nth-child(3n) { margin-top: -36vh; }
.r-seq__col img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.r-seq__col img.is-render { object-fit: contain; aspect-ratio: 1; padding: 8%; background: rgba(246, 244, 239, 0.06); }
.r-seq__steps { position: relative; z-index: 1; display: grid; gap: clamp(3rem, 8vw, 8rem); }
.r-seq__step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.r-seq__num { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(7rem, 30vw, 34rem) * var(--display-scale)); line-height: 0.8; letter-spacing: var(--display-track); color: var(--paper); margin: 0; font-variant-numeric: tabular-nums; }
.r-seq__label { margin: 1.25rem 0 0; color: var(--paper); }
.r-seq__text .r-rule { border-top-color: var(--paper); margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.r-seq__head { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.9rem); line-height: 1.15; max-width: 22ch; color: var(--paper); margin: 0; }
.r-seq__desc { font-family: var(--sans); font-weight: var(--sans-light); font-size: 1rem; line-height: 1.5; max-width: 52ch; color: var(--paper-soft); margin: 1rem 0 1.5rem; }
.r-seq__ask { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: var(--tint-accent); max-width: 30ch; margin: 0 0 0.6rem; }
.r-seq__list { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 30ch; }
.r-seq__list li { padding: 0.5rem 0 0.5rem 1.6rem; position: relative; border-top: 1px dashed var(--line-light); font-family: var(--sans); font-weight: var(--sans-light); font-size: 1rem; line-height: 1.4; color: var(--paper); }
.r-seq__list li:last-child { border-bottom: 1px dashed var(--line-light); }
.r-seq__list li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.r-seq__text .r-link { color: var(--paper); }
.r-seq__text .r-link:hover { color: var(--accent); }
@media (max-width: 900px) {
  .r-seq__collage { display: none; }
  .r-seq__step { grid-template-columns: 1fr; gap: 1.5rem; }
  .r-seq__num { font-size: calc(clamp(6rem, 28vw, 12rem) * var(--display-scale)); }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .r-seq { height: 300vh; }
  .js .r-seq__panel { position: sticky; top: 0; height: 100vh; padding-top: 0; padding-bottom: 0; display: grid; align-content: center; }
  .js .r-seq__steps { display: grid; }
  .js .r-seq__step { grid-area: 1 / 1; opacity: 0; transition: opacity 0.45s ease; }
  .js .r-seq__step.is-on { opacity: 1; }
}

/* practices: card row, Splide carousel under 900px */
.r-practices__head { margin-bottom: clamp(2rem, 5vw, 5rem); }
.r-practices .splide__track { overflow: visible; }
.r-practices .splide__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.r-practices .splide__slide { min-width: 0; display: flex; }
.r-practices .splide__slide .r-card { width: 100%; }
.r-practices__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 5rem); font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.2; }
.r-card__media .deck-diagram { width: 100%; height: auto; }
.r-card__media .deck-ladder { height: 60%; }
@media (max-width: 900px) {
  .r-practices .splide.is-active .splide__track { overflow: hidden; }
  .r-practices .splide.is-active .splide__list { display: flex; gap: 0; }
  .r-practices .splide.is-active .splide__slide { width: min(82vw, 24rem); }
  .r-practices .splide:not(.is-active) .splide__list { grid-template-columns: 1fr; }
}

/* image-led statement */
.r-imgstate .r-h2 { max-width: 20ch; }
.r-imgstate__body { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.r-imgstate .r-media--full { margin-top: clamp(2.5rem, 6vw, 6rem); aspect-ratio: 16 / 9; max-height: 90svh; }
.r-imgstate--bleed { padding-bottom: 0; }
.r-info--top { bottom: auto; top: 15px; flex-direction: column-reverse; }

/* dark fork (current section, columns rise in) */
.r-fork { padding-bottom: calc(clamp(4rem, 10vw, 12rem) + 30vh); }
.r-fork .h-section { font-family: var(--serif); }
.r-fork .fork { margin-top: clamp(3rem, 6vw, 5rem); }

/* contact: overlaps the full-bleed photo above */
.r-contact { position: relative; z-index: 1; margin-top: -30vh; padding: 0 var(--gutter) clamp(4rem, 10vw, 10rem); background: linear-gradient(to bottom, transparent 0, transparent 20%, var(--paper) 20%, var(--paper) 100%); }
.r-contact__card { background: var(--paper); max-width: 100rem; margin: 0 auto; padding: clamp(3rem, 7vw, 8rem) clamp(1.25rem, 5vw, 6rem) 0; }
.r-contact__line { max-width: 14ch; }
.r-contact__cta { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.r-form { max-width: 56rem; margin: clamp(3rem, 7vw, 7rem) 0 0; }
.r-form__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.r-form__actions .form__note { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-soft); max-width: 40ch; margin: 0; }
.r-form__actions .form__success { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); margin: 0; }

/* footer: full viewport, accent, mark centred */
.r-footer { background: var(--accent); color: var(--paper); min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: clamp(3rem, 6vw, 6rem) var(--gutter) 1.5rem; text-align: center; }
.r-footer__mark { display: block; margin: 0 auto; color: var(--paper); width: clamp(6rem, 16vw, 14rem); height: auto; aspect-ratio: 1; }
/* on the accent footer the accent node would vanish into the background: it goes ink */
.r-footer__mark circle[fill="#E8490F"] { fill: var(--ink); }
.r-footer--paper .r-footer__mark circle[fill="#E8490F"] { fill: var(--accent); }
.r-footer__line { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(3rem, 9vw, 11rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); color: var(--paper); margin: 0; }
.r-footer__line em { font-style: italic; color: var(--ink); }
/* body-size text on accent goes in ink for contrast (4.8:1); only the headline and the mark stay paper */
.r-footer__sub { font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 2rem); line-height: 1.25; color: var(--ink); margin: 1rem auto 0; max-width: 30ch; }
.r-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.r-footer__links a { color: var(--ink); text-decoration: none; font-family: var(--label); font-weight: var(--label-weight); font-size: 0.75rem; letter-spacing: 0.18rem; text-transform: uppercase; }
.r-footer__links a:hover { color: var(--paper); }
.r-footer__legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; border-top: 1px solid var(--paper); padding-top: 1.25rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; text-align: left; color: var(--ink); }
.r-footer__legal a { color: inherit; text-decoration: none; }
.r-footer__legal a:hover { color: var(--paper); }
.r-footer__legal .maple { fill: var(--ink); }
.r-footer__canada { display: inline-flex; align-items: center; gap: 0.5rem; }
/* paper variant for inner pages */
.r-footer--paper { background: var(--paper); color: var(--ink); min-height: 0; justify-content: flex-start; }
.r-footer--paper .r-footer__mark, .r-footer--paper .r-footer__line, .r-footer--paper .r-footer__sub, .r-footer--paper .r-footer__links a { color: var(--ink); }
.r-footer--paper .r-footer__line em { color: var(--accent); }
.r-footer--paper .r-footer__links a:hover, .r-footer--paper .r-footer__legal a:hover { color: var(--accent); }
.r-footer--paper .r-footer__legal { border-top-color: var(--line); color: var(--ink-soft); }
.r-footer--paper .r-footer__legal .maple { fill: #D52B1E; }

/* ================= Practice pages (redesign) ================= */
.r-phero { padding-top: calc(var(--nav-h) + 2vw); padding-bottom: 0; }
.r-phero__text { text-align: center; max-width: 70vw; margin: 0 auto clamp(2rem, 5vw, 5rem); }
.r-phero__text .r-label { margin-bottom: 1.5rem; }
.r-phero__media { height: 100svh; }
.r-media #swarm { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.r-media .hero__art { position: absolute; inset: 8%; width: 84%; height: 84%; z-index: 2; pointer-events: none; }
@media (max-width: 900px) { .r-phero__text { max-width: none; } .r-phero__media { height: 70svh; } }

.r-pstate { text-align: center; }
.r-pstate__text { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 3.4rem); line-height: 1.15; letter-spacing: -0.005em; max-width: 32ch; margin: 0 auto; padding: clamp(2rem, 5vw, 6rem) clamp(0rem, 5vw, 10vw) clamp(3rem, 7vw, 8rem); }
.r-callout { max-width: 64rem; margin: 0 auto; background: var(--ink); color: var(--paper); padding: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; text-align: left; }
.r-callout .r-label { display: block; margin-bottom: 1rem; }
.r-callout__text { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.25; max-width: 30ch; margin: 0; }
.r-callout .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.r-callout .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 700px) { .r-callout { grid-template-columns: 1fr; } }

.r-psteps__title { margin-bottom: clamp(2.5rem, 6vw, 6rem); }
.r-psteps__grid { align-items: start; }
.r-psteps__art { position: sticky; top: 12vh; max-width: 28rem; margin-left: auto; }
.r-psteps__art svg { width: 100%; height: auto; display: block; }
.r-psteps__cta { margin-top: clamp(3rem, 6vw, 6rem); }
@media (max-width: 900px) { .r-psteps__art { position: static; max-width: 20rem; margin: 2rem 0 0; } }

/* deliverable cards on dark; a drag carousel under 900px */
.r-section[data-theme="dark"] .get { margin-top: clamp(2.5rem, 5vw, 5rem); }
.r-section[data-theme="dark"] .get__card { border-radius: 0; color: var(--ink); }
.r-section[data-theme="dark"] .get__card--ink { color: var(--paper); }
.r-section[data-theme="dark"] .get__card--ink { border: 1px solid var(--line-light); }
.splide[data-carousel] .splide__track { overflow: visible; }
@media (max-width: 900px) {
  .splide[data-carousel].is-active .splide__track { overflow: hidden; }
  .splide[data-carousel].is-active .splide__list { display: flex; gap: 0; }
  .splide[data-carousel].is-active .splide__slide { width: min(82vw, 24rem); flex-shrink: 0; }
}

/* who it's for: the four lines over a full-bleed duotone */
.r-pfit__title { margin-bottom: clamp(2rem, 4vw, 3rem); }
.r-pfit__media { margin-top: clamp(2rem, 4vw, 4rem); min-height: 70svh; }
.r-pfit__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(2rem, 5vw, 5rem) var(--gutter); background: linear-gradient(to top, rgba(22, 20, 15, 0.92), rgba(22, 20, 15, 0.6) 60%, rgba(22, 20, 15, 0)); }
.r-pfit__media .r-media__cap { display: none; }
.r-pfit__list { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.r-pfit__list li { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.25; color: var(--paper); padding: 0.9rem 0 0.9rem 2.2rem; position: relative; border-top: 1px solid var(--line-light); }
.r-pfit__list li:last-child { border-bottom: 1px solid var(--line-light); }
.r-pfit__list li::before { content: "→"; position: absolute; left: 0.1rem; color: var(--accent); }
.r-pfit--dark .r-pfit__list li { color: var(--paper); }
.r-pfit--dark .r-pfit__list { margin-top: clamp(2rem, 4vw, 3rem); }

/* pricing */
.r-ppricing .offers__currency { justify-content: flex-start; margin: 0 0 2.5rem; }
.r-ppricing .offers__row { justify-content: flex-start; }
.r-ppricing .offer { border-radius: 0; }
.r-ppricing .r-h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.r-ppricing__block { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2.2rem); line-height: 1.3; max-width: 38ch; margin: 0; }

/* faq */
.r-pfaq { padding-bottom: calc(clamp(4rem, 10vw, 12rem) + 30vh); }
.r-pfaq__title { font-size: calc(clamp(2.5rem, 5vw, 6rem) * var(--display-scale)); }
.r-pfaq .r-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 900px) { .r-pfaq .r-cols { grid-template-columns: 1fr; } }

/* ================= About ================= */
.r-ahero { position: relative; overflow: hidden; min-height: 100svh; padding-top: calc(var(--nav-h) + 4vw); display: flex; align-items: center; }
.r-ahero__bg { position: absolute; inset: 0; z-index: 0; }
.r-ahero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.55; mix-blend-mode: multiply; }
.r-ahero__text { position: relative; z-index: 2; max-width: 45%; margin: 0; }
.r-ahero__text .r-lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.r-ahero__line { position: absolute; z-index: 1; left: 58%; top: calc(var(--nav-h) + 2vw); bottom: 0; width: 1px; background: var(--paper); }
.r-ahero__line::before { content: ""; position: absolute; top: 0; left: 50%; width: 29px; height: 29px; border: 1px solid var(--paper); border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); }
@media (max-width: 900px) { .r-ahero__text { max-width: none; } .r-ahero__line { left: auto; right: var(--gutter); } }

.r-record__title { margin-bottom: clamp(1rem, 2vw, 2rem); }
.r-story { position: relative; overflow: hidden; }
.r-story__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.08; pointer-events: none; }
.r-story__bg img { width: 100%; height: 100%; object-fit: cover; }
.r-story .r-inner { position: relative; z-index: 1; }
.r-story__blocks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem) clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 5rem); }
.r-story__block p { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.35; margin: 1rem 0 0; max-width: 34ch; }
.r-story__block .r-todo { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); }
@media (max-width: 900px) { .r-story__blocks { grid-template-columns: 1fr; } }

/* team list: built, hidden behind data-enabled="false" until names arrive */
.r-team[data-enabled="false"] { display: none; }
.r-team__list { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; border-top: 1px solid var(--line); }
.r-team__person { border-bottom: 1px solid var(--line); }
.r-team__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: baseline; padding: 1.5rem 0; }
.r-team__name { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2rem, 4vw, 4.5rem) * var(--display-scale)); line-height: 0.9; color: var(--ink); }
.r-team__toggle { appearance: none; background: none; border: 0; padding: 0; font-family: var(--label); font-weight: var(--label-weight); font-size: 0.6875rem; letter-spacing: 0.18rem; text-transform: uppercase; color: var(--accent); cursor: pointer; }
.r-team__toggle:hover { color: var(--ink); }
.r-team__bio { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.r-team__bio > div { overflow: hidden; }
.r-team__bio.is-open { grid-template-rows: 1fr; }
.r-team__bio p { padding-bottom: 1.5rem; max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .r-team__bio { transition: none; } }
@media (max-width: 700px) { .r-team__row { grid-template-columns: 1fr; gap: 0.5rem; } }

.r-aclose__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* ================= Contact page ================= */
.r-contactpage { padding-top: calc(var(--nav-h) + 5vw); padding-bottom: 0; }
.r-contactpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 8rem); align-items: stretch; }
.r-contactpage__text { padding-bottom: clamp(4rem, 10vw, 10rem); }
.r-contactpage__text .r-lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.r-contactpage__mail { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; font-family: var(--mono); font-size: 0.9rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.r-contactpage__mail svg { width: 18px; height: 18px; }
.r-contactpage__mail:hover { color: var(--accent); }
.r-contactpage__media { min-height: 60vh; }
.r-contactpage .r-form { margin-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 900px) { .r-contactpage__grid { grid-template-columns: 1fr; } .r-contactpage__media { min-height: 50vh; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); } }

/* ================= Review round 2 (2026-10-11) ================= */
/* nav over the accent footer: the mark's accent node goes ink */
.nav[data-theme="accent"] .logo-mark circle[fill="#E8490F"] { fill: var(--ink); }

/* free-tools panel: always visible over the image, bottom-right */
.r-tools { position: absolute; right: 15px; bottom: 15px; z-index: 4; width: 320px; max-width: calc(100% - 30px); background: var(--tint-accent); color: var(--ink); padding: 22px 24px 18px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.02em; }
.r-imgstate .r-tools { bottom: auto; top: 15px; }
.r-tools .r-label { display: block; margin: 0 0 0.6rem; color: var(--accent); }
.r-tools p { margin: 0 0 0.9rem; }
.r-tools a { display: block; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); padding: 0.6em 0; }
.r-tools a::after { content: " →"; color: var(--accent); }
.r-tools a:hover { color: var(--accent); }
.r-tools--static { position: static; width: auto; max-width: 20rem; }
@media (max-width: 900px) { .r-imgstate .r-tools { position: static; width: auto; max-width: none; margin: 0; } }

/* practice statement: wider */
.r-pstate__text { max-width: 44ch; padding-left: 0; padding-right: 0; }

/* free tool: eyebrow left, ink block offset right */
.r-tool { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: end; text-align: left; }
.r-tool__aside { grid-column: 1 / 5; padding-bottom: 1rem; }
.r-tool__aside .r-cap { color: var(--ink-soft); margin: 0.4rem 0 0; }
.r-tool__block { grid-column: 5 / 13; background: var(--ink); color: var(--paper); padding: clamp(2rem, 4vw, 3.5rem); display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.r-tool__block .r-callout__text { max-width: 26ch; }
.r-tool__block .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); flex-shrink: 0; }
.r-tool__block .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 900px) { .r-tool__aside, .r-tool__block { grid-column: 1 / -1; } .r-tool__block { flex-direction: column; align-items: flex-start; } }

/* steps in two columns, the rendering as the last cell */
.r-steps--two { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem); }
.r-step--art { align-self: center; justify-self: center; max-width: 22rem; width: 100%; display: block; }
.r-step--art svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .r-steps--two { grid-template-columns: 1fr; } .r-step--art { max-width: 18rem; justify-self: start; } }

/* deliverables: 2x2 with air */
.r-get { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(2.5rem, 5vw, 5rem); }
@media (max-width: 900px) { .r-get { grid-template-columns: 1fr; } }

/* who it's for: the photo is the list's background, nothing more */
.r-pfit__band { margin: clamp(2rem, 4vw, 4rem) 0 0; }
.r-pfit__band .r-media__duo, .r-pfit__band .r-media__colour { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-pfit__band .r-media__duo { position: absolute; z-index: 0; }
.r-pfit__band .r-pfit__over { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; padding: clamp(2rem, 5vw, 5rem); background: rgba(22, 20, 15, 0.55); }
.r-pfit__band .r-pfit__list { max-width: 44rem; }
.r-pfit--dark .r-pfit__band { margin-top: clamp(2rem, 4vw, 4rem); }
@media (max-width: 900px) { .r-pfit__band .r-pfit__over { grid-template-columns: 1fr; } }

/* pricing: centred cards, fixed head height so the CAD switch does not reflow */
.r-ppricing .offers__currency { justify-content: center; }
.r-ppricing .offers__row { justify-content: center; gap: 20px; }
.r-ppricing .offer__head { min-height: 2.7em; }
.r-ppricing .offer--wide { width: calc(2 * 20.625rem + 20px); max-width: 100%; }
.r-ppricing__block { font-family: var(--sans); font-weight: var(--sans-light); font-size: 1.15rem; line-height: 1.5; max-width: 60ch; margin: 0 auto; text-align: center; }

/* faq: questions in the body face */
.r-acc__item summary { font-family: var(--sans); font-weight: 500; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.3; }

/* about: six record cells, three across */
.r-record--six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .r-record--six { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .r-record--six { grid-template-columns: 1fr; } }

/* ================= Review round 3 (2026-10-11) ================= */
/* steps: the rendering always sits in the right column, bottom of its row;
   the CTA shares the cell to its left and sits on the same baseline */
.r-step--art { grid-column: 2; align-self: end; justify-self: center; }
.r-step--cta { grid-column: 1; display: flex; align-items: flex-end; }
.r-steps--two .r-step--cta { align-self: stretch; }
.r-steps--two .r-step { grid-template-rows: auto 1fr; align-self: stretch; }
.r-step__cta { grid-column: 2; align-self: end; margin: 2.5rem 0 0; }
.r-step--cta .r-step__cta { grid-column: auto; margin: 0; }
@media (max-width: 900px) { .r-step--art, .r-step--cta { grid-column: auto; justify-self: start; } .r-steps--two .r-step { grid-template-rows: auto; } }

/* hero photos: a heavier mask so the rendering and its labels read */
.r-phero__media .r-media__shade { background: linear-gradient(to bottom, rgba(22, 20, 15, 0.7), rgba(22, 20, 15, 0.6) 40%, rgba(22, 20, 15, 0.6) 60%, rgba(22, 20, 15, 0.78)); }
.r-media--mono .r-media__colour { filter: grayscale(1); }

/* free tool: the rule over the eyebrow is accent and 2px */
.r-tool__aside .r-rule { border-top: 2px solid var(--accent); }

/* deliverables: the two highlight cards go accent instead of the pale tint */
.r-get .get__card--accent { background: var(--accent); color: var(--ink); }
.r-get .get__card--accent .get__label { color: var(--ink); }
.r-get .get__card--accent .get__big { color: var(--paper); }
.r-get .get__card--accent .get__big em { color: var(--ink); }
.r-get .get__card--accent .get__cap { border-top-color: rgba(22, 20, 15, 0.35); }
.r-get .get__card--accent .get__lines { color: var(--ink); }
.r-get .get__card--accent .get__lines .tag-seed, .r-get .get__card--accent .get__lines .tag-edge { color: var(--paper); }

/* who it's for: same face as the FAQ questions */
.r-pfit__list li { font-family: var(--sans); font-weight: 500; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.3; }

/* ================= Review round 4 (2026-10-11) ================= */
/* even step counts (readiness): the rendering sits straight under the last
   row, smaller, and the CTA directly under the last left-hand step */
.r-steps--even .r-step--art { align-self: start; justify-self: center; max-width: 22rem; margin-top: -2rem; }
/* the CTA lines up with the step paragraphs (past the number column) and
   its bottom edge sits on the rendering's bottom edge */
.r-steps--even .r-step--cta { align-items: center; padding-left: 5rem; margin-top: -2rem; }
.r-steps--even .r-step--cta .r-step__cta { align-self: center; }
@media (max-width: 560px) { .r-steps--even .r-step--cta { padding-left: 0; } }
.r-steps--even { row-gap: clamp(2.5rem, 4vw, 4rem); }
/* the free-tool card's label reads in ink wherever the card sits */
.r-tools .r-label, .r-section[data-theme="dark"] .r-tools .r-label { color: var(--ink); }

/* ================= Review round 5 (2026-10-11) ================= */
/* menu overlay on the new type roles */
.menu__label { font-family: var(--label); font-weight: var(--label-weight); font-size: 0.6875rem; letter-spacing: 0.18rem; }
.menu__link { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(3rem, 9vw, 8rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); padding: 0.12em 0; }
.menu__foot { font-family: var(--mono); font-size: 0.8rem; }

/* assessment pages: shorter hero media, section headings on the display face */
.r-phero__media--short { height: 52svh; min-height: 22rem; }
@media (max-width: 900px) { .r-phero__media--short { height: 42svh; } }
.r-phero--tool + .intro { padding-top: clamp(3rem, 6vw, 6rem); }
.dc-cta .h-section { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2.5rem, 6vw, 7rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); color: var(--accent); }
.dc-cta .h-section em { color: var(--accent); }
.dc-verdict { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2.75rem, 6vw, 6.5rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); max-width: 20ch; }
.dc-verdict em { color: var(--accent); }

/* ================= Review round 6 (2026-10-11): assessment type ================= */
/* intro paragraph in the body face at lead size */
.r-phero--tool + .intro .intro__text { font-family: var(--sans); font-weight: var(--sans-light); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.5; letter-spacing: 0; max-width: 60ch; }
.r-phero--tool + .intro .marker { font-family: var(--label); font-weight: var(--label-weight); font-size: 0.6875rem; letter-spacing: 0.18rem; }
.dc__noscript { font-family: var(--sans); }
/* question dialog: display titles, label-face section and counter */
.dc__title { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2.4rem, 4.5vw, 4rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); color: var(--ink); }
.dc-modal--check .dc__title { font-size: calc(clamp(2.2rem, 3.6vw, 3.2rem) * var(--display-scale)); }
.dc__section, .dc__count { font-family: var(--label); font-weight: var(--label-weight); font-size: 0.6875rem; letter-spacing: 0.18rem; }
.dc__hint, .dc__opt { font-family: var(--sans); }
/* readout and copy dialog headings */
.dc-modal__title, .dc-tier__name, .dc-climbs__title { font-family: var(--display); font-weight: var(--display-weight); line-height: var(--display-lh); letter-spacing: var(--display-track); }
.dc-modal__title { font-size: calc(clamp(2rem, 3.4vw, 3rem) * var(--display-scale)); }
.dc-tier__name { font-size: calc(clamp(2.2rem, 3.6vw, 3.4rem) * var(--display-scale)); }
.dc-climbs__title { font-size: calc(clamp(2rem, 3vw, 2.8rem) * var(--display-scale)); }
.dc-gate__name, .rc-station__name { font-family: var(--sans); font-weight: 500; font-size: 1.15rem; line-height: 1.3; }
.dc-report .marker, .dc-print-head__brand { font-family: var(--label); font-weight: var(--label-weight); font-size: 0.6875rem; letter-spacing: 0.18rem; }

/* ================= Review round 7 (2026-10-11): serif retired =================
   Instrument Serif stays on disk only as the fallback inside --display. Every
   role that still used it moves to the display face (headings, figures) or
   the body face (leads, statements, prose). Overrides are grouped here so the
   change is one block. */
h1, h2, h3 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); }
.footer__line, .offer__name, .deck-title, .get__big, .how__num, .r-card__title { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); }
.offer__name { font-size: calc(clamp(2.4rem, 3.4vw, 3rem) * var(--display-scale)); line-height: var(--display-lh); }
.get__big { font-size: calc(clamp(4.5rem, 8vw, 7.5rem) * var(--display-scale)); line-height: var(--display-lh); }
.r-h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2rem, 3vw, 3.2rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); }
.r-seq__head { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2.2rem, 3.6vw, 4rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); max-width: 16ch; }
/* leads, statements and prose in the body face */
.r-lead, .r-hero__lead, .r-brand__sub, .r-footer__sub, .r-practices__foot, .r-pstate__text, .r-callout__text, .r-story__block p, .prose p, .block p, .callout__text, .checklist li, .pair__note, .duo__foot {
  font-family: var(--sans); font-weight: var(--sans-light); letter-spacing: 0;
}
.r-lead { font-size: clamp(1.2rem, 1.6vw, 1.75rem); line-height: 1.4; max-width: 48ch; }
.r-lead--xl { font-size: clamp(1.4rem, 2.2vw, 2.4rem); line-height: 1.3; max-width: 40ch; }
.r-lead--accent { font-size: clamp(1.5rem, 1.8vw, 2rem); }
.r-hero__lead { font-size: clamp(1.5rem, 1.8vw, 2rem); line-height: 1.4; max-width: 38ch; }
.r-pstate__text { font-size: clamp(1.3rem, 1.9vw, 1.9rem); line-height: 1.4; max-width: 56ch; }
.r-callout__text { font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.45; max-width: 36ch; }
.r-footer__sub { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.45; max-width: 40ch; }
.r-story__block p { font-size: 1.05rem; line-height: 1.55; max-width: 48ch; }
.r-info__btn { font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 0.9rem; }
.r-lead em, .r-hero__lead em, .r-pstate__text em { font-style: italic; }

/* ================= Review round 8 (2026-10-11) ================= */
/* home hero: darker photo under a brighter sequence line */
.r-hero__media .r-media__shade { background: linear-gradient(to bottom, rgba(22, 20, 15, 0.6), rgba(22, 20, 15, 0.5) 40%, rgba(22, 20, 15, 0.5) 60%, rgba(22, 20, 15, 0.7)); }
.r-hero__media .hero__art { inset: 4% 2%; width: 96%; height: 92%; }
/* pinned sequence: the practice line on two lines */
.r-seq__head { max-width: 24ch; font-size: calc(clamp(2rem, 3.2vw, 3.6rem) * var(--display-scale)); }
/* with the menu open the nav sits on the ink overlay, whatever section theme it had */
.nav.menu-on, .nav.menu-on[data-theme] { color: var(--paper); }
.nav.menu-on .logo-mark circle[fill="#E8490F"] { fill: #E8490F; }
.nav.menu-on .nav__logo { opacity: 1; pointer-events: auto; }

/* About: founder block (portrait + bio) */
.r-founder { margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.r-founder__media { max-width: 26rem; }
.r-founder__text .r-team__role { margin: 0.75rem 0 1.5rem; }
.r-founder__text .r-body { max-width: 60ch; margin: 0 0 1rem; }
.r-founder__text .btn { margin-top: 0.5rem; }

/* Guides: long-form article on the site template (guides/*.html) */
.r-guide { padding-top: clamp(3rem, 6vw, 6rem); }
.r-guide__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.r-guide__toc { position: sticky; top: 7rem; }
.r-guide__toc ol { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); counter-reset: toc; }
.r-guide__toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.r-guide__toc a { display: flex; gap: 0.75rem; padding: 0.6rem 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; }
.r-guide__toc a::before { content: counter(toc, decimal-leading-zero); color: var(--ink-soft); }
.r-guide__toc a:hover { color: var(--accent); }
.r-guide__body { max-width: 44rem; font-family: var(--sans); font-weight: var(--sans-light); font-size: 1.125rem; line-height: 1.6; }
.r-guide__body p { margin: 0 0 1.1em; }
.r-guide__body a:not(.btn) { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.r-guide__body strong { font-weight: 500; }
.r-guide__lead { font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.4; color: var(--ink); }
.r-guide__byline { color: var(--ink-soft); margin-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.r-guide__byline a { color: var(--ink-soft); }
.r-guide__body h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2rem, 3.4vw, 3.4rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); margin: clamp(3rem, 6vw, 5rem) 0 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.r-guide__body h3 { font-family: var(--sans); font-weight: 500; font-size: 1.2rem; line-height: 1.3; margin: 2rem 0 0.5rem; display: flex; gap: 0.75rem; align-items: baseline; scroll-margin-top: 6rem; }
.r-guide__body h3.is-ai { color: var(--accent); }
.r-guide__num { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }
.r-guide__q { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 0.6em !important; }
.r-guide__order { margin: 0 0 1.1em; padding-left: 1.4em; }
.r-guide__order li { margin-bottom: 0.6em; padding-left: 0.3em; }
.r-guide__order li::marker { font-family: var(--mono); font-size: 0.8em; color: var(--accent); }
.r-guide__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem !important; }
.r-todo { border: 1px dashed var(--accent); background: var(--tint-accent); padding: 1.25rem 1.5rem; margin: 0 0 1.1em; }
.r-todo .r-label { display: block; margin-bottom: 0.5rem; color: var(--accent); }
.r-todo p:last-child { margin: 0; font-size: 1rem; }
.r-matrix { overflow-x: auto; margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 2rem); border-top: 1px solid var(--ink); }
.r-matrix:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.r-matrix table { width: 100%; min-width: 60rem; border-collapse: collapse; font-family: var(--sans); font-weight: var(--sans-light); font-size: 0.875rem; line-height: 1.45; }
.r-matrix th, .r-matrix td { text-align: left; vertical-align: top; padding: 0.9rem 0.9rem 0.9rem 0; border-bottom: 1px solid var(--line); }
.r-matrix thead th { font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.r-matrix tbody th { font-family: var(--sans); font-weight: 500; white-space: nowrap; padding-right: 1.5rem; }
.r-matrix tbody th .r-guide__num { display: block; margin-bottom: 0.2rem; }
.r-matrix tr.is-ai { background: var(--tint-accent); }
.r-matrix tr.is-ai th { color: var(--accent); padding-left: 0.6rem; }
.r-guide-faq { padding-bottom: clamp(4rem, 10vw, 12rem); }
@media (max-width: 900px) {
  .r-guide__grid { grid-template-columns: 1fr; }
  .r-guide__toc { position: static; }
  .r-guide__aside:empty { display: none; }
}
.r-label a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.get__link { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.get__link::after { content: " →"; color: var(--accent); }
.r-matrix--narrow { margin-top: 0; }
.r-matrix--narrow table { min-width: 36rem; font-size: 0.9375rem; }
.r-guide__list { margin: 0 0 1.1em; padding-left: 1.2em; }
.r-guide__list li { margin-bottom: 0.4em; }
.r-guide__list li::marker { color: var(--accent); }

/* Guides index (/guides) */
.r-guides { padding-top: clamp(8rem, 14vw, 14rem); }
.r-guides__h1 { margin: 1rem 0 clamp(1.5rem, 3vw, 2.5rem); }
.r-guides__lead { color: var(--ink-soft); margin-bottom: clamp(3rem, 6vw, 6rem); }
.r-guides__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.r-guides__item { border-bottom: 1px solid var(--line); }
.r-guides__link { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start; padding: clamp(1.5rem, 3vw, 2.5rem) 0; color: var(--ink); text-decoration: none; }
.r-guides__num { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); padding-top: 0.4rem; }
.r-guides__text { display: grid; gap: 0.6rem; }
.r-guides__title { font-family: var(--display); font-weight: var(--display-weight); font-size: calc(clamp(2rem, 4.5vw, 4.5rem) * var(--display-scale)); line-height: var(--display-lh); letter-spacing: var(--display-track); transition: color 0.2s; }
.r-guides__desc { font-family: var(--sans); font-weight: var(--sans-light); font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); max-width: 56ch; }
.r-guides__go { font-family: var(--label); font-weight: var(--label-weight); font-size: 0.6875rem; letter-spacing: 0.18rem; text-transform: uppercase; color: var(--accent); padding-top: 0.4rem; }
.r-guides__go::after { content: " →"; }
.r-guides__link:hover .r-guides__title { color: var(--accent); }
.r-guides__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 700px) {
  .r-guides__link { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .r-guides__go { grid-column: 2; padding-top: 0; }
}

/* Menu overlay: size the links to the viewport height as well as the width,
   so all six fit on short screens; scroll as a last resort. */
.menu { overflow-y: auto; }
.menu__inner { margin: auto; }
.menu__link { font-size: calc(min(clamp(3rem, 9vw, 8rem), max(2rem, (100svh - 15rem) / 6.6)) * var(--display-scale)); }
.r-guide-head { padding-bottom: 0; }