/* ============================================================
   Z.Advisors, zadvisors.ai
   Implements BRAND.md v1.0. Black is primary; red is accent only.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --ink:        #000000;   /* Ink Black  — primary */
  --ink-soft:   #1A1A1A;   /* hover state on ink surfaces */
  --red:        #ED1C24;   /* Signal Red — accent only */
  --paper:      #FAFAF7;   /* Paper      — page ground */
  --surface:    #FFFFFF;

  /* Gray ramp derived from Stone Gray. Stone Gray itself is 2.83:1 on
     Paper, which fails WCAG AA, so darker steps carry text. See BRAND.md. */
  --stone-100:  #F1F1EF;   /* tile and panel fills */
  --stone-200:  #E5E5E2;   /* borders, rules, hover fills */
  --stone-300:  #D6D6D2;
  --stone-400:  #95969A;   /* brand Stone Gray — decorative, dividers */
  --stone-600:  #6B6C70;   /* eyebrows, captions      5.02:1 */
  --stone-700:  #5A5B5F;   /* secondary body copy     6.49:1 */
  --stone-800:  #34353A;   /* long-form body copy     11.7:1 */

  --shadow-cta: 0 8px 22px rgba(0, 0, 0, 0.18);

  --r-card:      26px;
  --r-lg:        22px;
  --r-md:        20px;
  --r-sm:        18px;
  --r-xs:        14px;
  --r-2xs:       13px;
  --r-3xs:       12px;
  --pill:        999px;

  --gap:         18px;
  /* Space between the cards and the window edge. Grows with the window, so
     a 1366 to 1600px laptop gets roughly 40px a side instead of 18px. */
  --gutter:      clamp(18px, 2.75vw, 56px);
  --shell-max:   1480px;
  --pad-section: 48px;

  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text links go red on hover. Buttons and card surfaces override this. */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

input, select, textarea { font-family: var(--font-body); }
input::placeholder, textarea::placeholder { color: var(--stone-600); }

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

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

/* ── Utilities ──────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 18px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--surface);
  padding: 12px 18px; border-radius: var(--r-3xs);
  font-size: 14px; font-weight: 500;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 18px; color: var(--surface); }

/* The red period — the mark's core idea, carried into the typography. */
.period { color: var(--red); }

.dot {
  width: 6px; height: 6px; border-radius: var(--pill);
  background: var(--ink); display: block; flex-shrink: 0;
}
.dot--red { background: var(--red); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone-600);
}

.glyph {
  height: 30px; width: 30px; border-radius: 10px;
  background: var(--stone-100); color: var(--ink);
  display: grid; place-items: center; font-size: 13px;
}
.glyph--lg { height: 44px; width: 44px; border-radius: var(--r-xs); font-size: 19px; }

h1, h2, h3, .h2 { font-family: var(--font-display); }

.h2 {
  margin-top: 18px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.06; letter-spacing: -0.025em; font-weight: 700;
}
.h2--sm { font-size: clamp(25px, 2.4vw, 33px); line-height: 1.1; }

/* ── Layout shell ───────────────────────────────────────── */
.shell {
  background: var(--paper);
  padding: var(--gap) var(--gutter);
  display: flex; flex-direction: column; gap: var(--gap);
}
.shell > :not(main), main > * { max-width: var(--shell-max); width: 100%; margin-inline: auto; }

/* A real flex container rather than display:contents, so the <main>
   landmark survives in every browser. */
main { display: flex; flex-direction: column; gap: var(--gap); }

.card { background: var(--surface); border-radius: var(--r-card); }
.section { padding: var(--pad-section); }
.group { display: flex; flex-direction: column; gap: var(--gap); }

.section__head--narrow { max-width: 720px; }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: end;
}
.card.split { padding: 44px var(--pad-section); }
/* Capped so the wider shell doesn't push these past ~80 characters. */
.split__body { max-width: 660px; font-size: 16.5px; line-height: 1.64; color: var(--stone-700); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px;
  border: 0; border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.btn--primary { background: var(--ink); color: var(--surface); box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--ink-soft); color: var(--surface); }

.btn--ghost { background: var(--stone-100); color: var(--ink); }
.btn--ghost:hover { background: var(--stone-200); color: var(--ink); }

.btn--flip:hover { background: var(--ink); color: var(--surface); }

.btn--lg { height: 50px; padding: 0 26px; border-radius: var(--r-xs); font-size: 14.5px; }
.btn--sm { height: 42px; padding: 0 18px; border-radius: var(--r-2xs); font-size: 13.5px; }
.btn--block { width: 100%; height: 52px; font-size: 14.5px; }

/* ── Badges, pills, chips, tiles, rows ──────────────────── */
.badge {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px; border-radius: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em;
  align-self: flex-start;
}
.badge--grey   { background: var(--stone-200); color: var(--stone-600); }
.badge--tint   { background: var(--stone-200); color: var(--ink); }
.badge--ink    { background: var(--ink); color: var(--surface); }
.badge--onInk  { background: rgba(255, 255, 255, 0.16); color: var(--surface); }
.badge--white  { background: var(--surface); color: var(--ink); height: 26px; padding: 0 10px; border-radius: 8px; font-size: 10.5px; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 13px; border-radius: var(--pill);
  font-family: var(--font-mono); font-size: 11px;
}
.pill--tint  { background: var(--stone-100); color: var(--ink); }
.pill--onInk { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.92); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.chip {
  display: flex; align-items: center;
  height: 30px; padding: 0 12px; border-radius: 9px;
  background: var(--stone-100); font-size: 12.5px; color: var(--stone-700);
}

.tile {
  display: grid; place-items: center; text-align: center;
  border-radius: var(--r-xs); background: var(--stone-100);
  color: var(--stone-700); line-height: 1.3;
}
.tile--tall { height: 66px; padding: 0 10px; font-size: 13px; font-weight: 500; }
.tile--logo { height: 58px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }

.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.stack--tight { margin-top: 22px; }

.row {
  background: var(--stone-100); border-radius: var(--r-xs);
  padding: 14px 16px; font-size: 14px; color: var(--ink);
}
.row--white { background: var(--surface); padding: 16px 18px; font-size: 14.5px; color: var(--stone-700); }
.row--onInk { background: rgba(255, 255, 255, 0.1); padding: 16px 18px; font-size: 14.5px; color: var(--surface); }

/* ── Image slots ────────────────────────────────────────── */
.slot {
  position: relative; overflow: hidden;
  width: 100%; height: var(--slot-h, 240px);
  border-radius: var(--slot-r, var(--r-lg));
  background: var(--stone-100);
  display: block;
}
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slot__hint {
  position: absolute; inset: 0; z-index: 0;
  display: none; place-items: center; text-align: center;
  padding: 0 22px;
  font-size: 12.5px; line-height: 1.5; color: var(--stone-600);
}
/* Shown only while the real image is missing — drop a file into /img to replace. */
.slot.is-empty .slot__hint { display: grid; }
.slot.is-empty img { display: none; }

.slot--avatar {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--pill); background: var(--stone-200);
}
.slot--avatar .slot__hint { font-size: 9px; padding: 0 4px; }

/* ── Brand artwork ──────────────────────────────────────── */
/* Every element rests in its finished state; `.is-playing` — added by an
   IntersectionObserver when the slot scrolls into view — runs the reveal.
   So the artwork is complete and correct with no JS, and with motion reduced. */
.art { display: block; width: 100%; height: 100%; }

/* Loop timing. main.js reads these to schedule the replay, so the cadence
   lives here with the animations rather than in the script.
   Values must be in ms. --art-pause is the gap between replays: raise it for
   a calmer page, or set it very high to effectively play once. */
.art { --art-pause: 2000ms; }
.art--hero { --art-duration: 2820ms; }
.art--case { --art-duration: 1420ms; }

.art__arc, .art__link, .art__node, .art__accent, .art__core,
.art__ring, .art__bar, .art__cell, .art__halo, .art__ping {
  transform-box: fill-box;
  transform-origin: center;
}
.art__bar { transform-origin: bottom; }
.art__ping { opacity: 0; }

@keyframes art-draw   { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes art-pop    { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes art-grow   { from { transform: scaleY(0); }            to { transform: scaleY(1); } }
@keyframes art-settle { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes art-ping   { from { opacity: 0.85; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

/* Hero — arcs draw, the path walks, the decision lands in red */
.slot.is-playing .art__arc {
  stroke-dasharray: var(--len);
  animation: art-draw 1s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 0.12s);
}
.slot.is-playing .art__link {
  stroke-dasharray: var(--len);
  animation: art-draw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: 0.5s;
}
.slot.is-playing .art--hero .art__node {
  animation: art-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(0.72s + var(--i) * 0.09s);
}
.slot.is-playing .art__halo,
.slot.is-playing .art--hero .art__accent {
  animation: art-pop 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: 1.42s;
}
.slot.is-playing .art__ping {
  animation: art-ping 1.1s ease-out 1.72s;
}

/* Track record — bars grow, the ripple expands, the grid settles */
.slot.is-playing .art__bar {
  animation: art-grow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 0.07s);
}
.slot.is-playing .art__core {
  animation: art-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.slot.is-playing .art__ring {
  animation: art-pop 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(0.1s + var(--i) * 0.1s);
}
.slot.is-playing .art--case .art__node {
  animation: art-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(0.5s + var(--i) * 0.08s);
}
.slot.is-playing .art__cell {
  animation: art-settle 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 0.045s);
}
/* The red accent always arrives last — the point of view, after the evidence. */
.slot.is-playing .art--case .art__accent {
  animation: art-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: 0.92s;
}

@media (prefers-reduced-motion: reduce) {
  .slot.is-playing .art * { animation: none !important; }
  .art__ping { display: none; }
}

/* ── Top bar ────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: var(--gap); }

.topbar__note {
  flex: 1; display: flex; align-items: center; gap: 14px;
  height: 44px; padding: 0 20px;
  background: var(--surface); border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink);
}
.topbar__mail {
  display: flex; align-items: center;
  height: 44px; padding: 0 20px;
  background: var(--surface); border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink);
  transition: background-color 0.16s ease;
}
.topbar__mail:hover { background: var(--stone-100); color: var(--ink); }

/* ── Header ─────────────────────────────────────────────── */
/* The wrapper is what sticks. The menu used to be a plain sibling of the
   header, so it stayed where it was in the document and opened above the
   viewport once you had scrolled. */
.navwrap { position: sticky; top: var(--gap); z-index: 60; }

.nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 30px;
  background: var(--surface); border-radius: var(--r-card);
  padding: 14px 18px 14px 24px;
}

/* Clear space equal to the red dot's height on all sides (BRAND.md §04).
   In the real mark the dot is 20.5% of the artwork's height, so a 40px mark
   needs 9px of clear space and a 33px one needs 7px. 9px covers every size
   the site draws. */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 9px; }
.brand:hover { color: var(--ink); }
.brand__mark { height: 40px; width: auto; display: block; }
.brand__text { display: flex; flex-direction: column; gap: 5px; }
.brand__name {
  font-family: var(--font-display); line-height: 1;
  font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
}
/* The tagline sits under the wordmark the way it sits under ADVISORS in the
   artwork, second word of each pair in red. It is part of the lockup, so the
   red words are brand text rather than body copy. The link carries its own
   aria-label, so nothing here is read out twice. */
.brand__tag {
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  letter-spacing: 0.04em; white-space: nowrap;
}
.brand__red { color: var(--red); }
.brand__dot { color: var(--stone-400); }

.nav__rule { width: 1px; height: 30px; background: var(--stone-200); flex-shrink: 0; }
.nav__spacer { display: none; }  /* replaced by centring the links */

/* Auto margins centre the links between the brand and the CTA instead of
   leaving a wide empty gap in the middle of the bar. */
.nav__links { display: flex; align-items: center; gap: 3px; margin-inline: auto; }
.nav__link {
  display: flex; align-items: center;
  height: 36px; padding: 0 14px; border-radius: var(--r-3xs);
  font-size: 13.5px; color: var(--stone-700);
  background: transparent; border: 0; cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.nav__link:hover { background: var(--stone-100); color: var(--red); }
.nav__trigger[aria-expanded="true"] { background: var(--stone-100); color: var(--ink); }

/* Where you are. */
.nav__link[aria-current] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--red);
}
.nav__link { position: relative; }

/* Services opens a menu rather than navigating, so it needs to look like it. */
.nav__caret {
  display: inline-block; margin-left: 7px;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px);
  transition: transform 0.16s ease;
}
.nav__trigger[aria-expanded="true"] .nav__caret { transform: translateY(-2px) rotate(180deg); }

.nav__cta { height: 40px; padding: 0 20px; border-radius: var(--r-2xs); font-size: 13.5px; }

.burger {
  display: none;
  width: 42px; height: 40px; border: 0; border-radius: var(--r-3xs);
  background: var(--stone-100); cursor: pointer;
  place-items: center;
}
.burger__box { display: grid; gap: 4px; }
.burger__box span { display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; }


/* ── Mega menu ──────────────────────────────────────────── */
.megamenu {
  position: absolute; top: calc(100% + var(--gap)); left: 0; right: 0; z-index: 1;
  background: var(--surface); border-radius: var(--r-card);
  padding: 30px 34px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r-xs);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
  max-height: calc(100vh - 150px); overflow-y: auto;
}
.megamenu[hidden] { display: none; }

.megamenu__col { background: var(--stone-100); border-radius: var(--r-sm); padding: 22px; }
.megamenu__list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.megamenu__list a {
  display: flex; align-items: center;
  height: 38px; padding: 0 12px; border-radius: var(--r-3xs);
  font-size: 14px;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.megamenu__list a:hover { background: var(--stone-200); color: var(--red); }

.megamenu__mobilenav { display: none; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding: 56px;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 56px; align-items: center;
}
.hero__title {
  margin-top: 26px;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.02; letter-spacing: -0.03em; font-weight: 800;
}
.hero__lede {
  margin-top: 24px; max-width: 500px;
  font-size: 17px; line-height: 1.62; color: var(--stone-700);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }

/* ── Outcomes ───────────────────────────────────────────── */
.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.outcome { padding: 30px; display: flex; flex-direction: column; }
.outcome .glyph { flex-shrink: 0; }
.outcome__title { margin-top: 22px; font-size: 20px; letter-spacing: -0.02em; font-weight: 700; }
.outcome__body { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--stone-700); }
/* margin-top:auto so the four links sit on one line whatever the copy does. */
.outcome__more {
  margin-top: auto; padding-top: 22px; align-self: flex-start;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.outcome__more:hover { color: var(--red); }

/* ── Trust / clients ────────────────────────────────────── */
.trust {
  padding: 34px 40px;
  display: grid; grid-template-columns: 220px 1fr;
  gap: 40px; align-items: center;
}
.trust__note { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--stone-700); }
.trust__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }

/* ── Client strip ───────────────────────────────────────── */
.clients {
  padding: 26px 40px;
  display: grid; grid-template-columns: 190px 1fr;
  gap: 40px; align-items: center;
  overflow: hidden;            /* the track is wider than the card */
}
.clients__note { margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--stone-700); }

/* Marquee. The track holds the list twice and travels exactly half its own
   width, which lands copy two where copy one started — so the seam never
   shows. Spacing is padding on each item rather than a flex gap, because a
   gap would add half a gap of drift at the seam. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track {
  display: flex; align-items: center; width: max-content;
  animation: marquee 55s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item { flex-shrink: 0; padding-inline: 26px; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.clogo {
  display: flex; align-items: center; gap: 10px;
  color: var(--stone-600);
  transition: color 0.16s ease;
}
.clogo:hover { color: var(--ink); }
.clogo__mark { width: 26px; height: 26px; flex-shrink: 0; }
.clogo__name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap;
}

/* The global reduce rule collapses every animation to 0.01ms, which would
   make an infinite marquee strobe. Stop it outright and let the strip be
   scrolled by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none !important; }
}

/* ── Contrast ───────────────────────────────────────────── */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 40px; }
.panel { border-radius: var(--r-md); padding: 34px 36px; }
.panel--muted { background: var(--stone-100); }
.panel--ink { background: var(--ink); color: var(--surface); }

/* ── Pillars ────────────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

/* The three cards carry different amounts of copy, so left alone the row
   lists and the "Explore the practice" buttons land at three different
   heights. Two title lines and three body lines is the tallest of the
   three, and the button takes whatever height is left over — which keeps
   the buttons on one line however the copy wraps. */
.pillar { padding: 34px 36px; display: flex; flex-direction: column; }
.pillar__title {
  margin-top: 22px; min-height: calc(2 * 1.14em);
  font-size: 25px; line-height: 1.14; letter-spacing: -0.025em; font-weight: 700;
}
.pillar__body {
  margin-top: 12px; min-height: calc(3 * 1.62em);
  font-size: 15px; line-height: 1.62; color: var(--stone-700);
}
.pillar .stack { margin-bottom: 26px; }
.pillar > .btn { margin-top: auto; align-self: flex-start; }

/* ── Approach (tabs) ────────────────────────────────────── */
.engine { display: grid; grid-template-columns: 320px 1fr; gap: var(--gap); margin-top: 40px; }

/* No align-self here, so the rail stretches to the grid row and ends level
   with the panel beside it. The tabs keep their own height rather than
   sharing out the slack — stretched, the labels drift so far apart the list
   stops reading as a list. Five of them close the gap instead. */
.engine__tabs {
  background: var(--stone-100); border-radius: var(--r-md);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.etab {
  display: flex; align-items: center; gap: 12px;
  height: 52px; flex-shrink: 0;
  padding: 0 16px; border-radius: var(--r-xs);
  border: 0; background: transparent; color: var(--stone-700);
  font-family: var(--font-body); font-size: 14.5px; text-align: left; cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.etab:hover { background: var(--stone-200); }
.etab.is-active { background: var(--ink); color: var(--surface); }
.etab.is-active:hover { background: var(--ink); }

.etab__dot { width: 6px; height: 6px; border-radius: var(--pill); background: var(--stone-400); flex-shrink: 0; }
.etab.is-active .etab__dot { background: var(--surface); }

.engine__stage { background: var(--stone-100); border-radius: var(--r-md); padding: 36px 40px; }
.epanel[hidden] { display: none; }
.epanel__title { font-family: var(--font-display); font-size: 27px; line-height: 1.16; letter-spacing: -0.025em; font-weight: 700; }
.epanel__body { margin-top: 14px; max-width: 640px; font-size: 16px; line-height: 1.64; color: var(--stone-700); }
.epanel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 26px; }
.epanel__grid .row--white { color: var(--ink); }

/* ── Services ───────────────────────────────────────────── */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r-xs); margin-top: 40px; }
.service {
  display: flex; flex-direction: column; min-height: 190px;
  background: var(--stone-100); border-radius: var(--r-sm); padding: 26px;
  transition: background-color 0.16s ease;
}
.service:hover { background: var(--stone-200); color: var(--ink); }
.service__title { margin-top: 20px; font-family: var(--font-display); font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }
.service__body { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--stone-700); }

/* ── Track record ───────────────────────────────────────── */
.workhead {
  padding: 40px var(--pad-section);
  display: flex; align-items: end; justify-content: space-between; gap: 40px;
}
.workhead--flush { padding: 0; background: transparent; border-radius: 0; }

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.case { padding: 20px; display: flex; flex-direction: column; }
.case__body { padding: 24px 10px 6px; }
.case__title { margin-top: 16px; font-family: var(--font-display); font-size: 22px; line-height: 1.22; letter-spacing: -0.025em; font-weight: 700; }
.case__facts { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.case__fact { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.case .btn--flip { margin-top: 20px; }

/* ── Testimonials ───────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r-xs); margin-top: 40px; }
.quote {
  display: flex; flex-direction: column;
  background: var(--stone-100); border-radius: var(--r-md); padding: 32px 34px;
}
.quote__text { font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); }
.quote__by { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 13px; }
.quote__name { display: block; font-size: 14.5px; font-weight: 500; }
.quote__role { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }

/* ── Process ────────────────────────────────────────────── */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--r-xs); margin-top: 40px; }
.phase { background: var(--stone-100); border-radius: var(--r-sm); padding: 28px; }
.phase__title { margin-top: 22px; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.025em; font-weight: 700; }
.phase__body { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--stone-700); }

/* ── Who we serve ───────────────────────────────────────── */
.industries {
  padding: var(--pad-section);
  display: grid; grid-template-columns: 380px 1fr;
  gap: 56px; align-items: center;
}
.industries__note { margin-top: 16px; font-size: 15.5px; line-height: 1.62; color: var(--stone-700); }
.industries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lozenge {
  display: flex; align-items: center; gap: 12px;
  min-height: 62px; padding: 14px 20px; border-radius: var(--r-xs);
  background: var(--stone-100); font-size: 15px; line-height: 1.45; color: var(--ink);
}
/* Sentence-length items align to the first line rather than floating mid-block. */
.industries__grid .lozenge { align-items: flex-start; }
.industries__grid .lozenge .dot { margin-top: 8px; }
.lozenge .dot { width: 5px; height: 5px; }

/* ── Founder ────────────────────────────────────────────── */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.person { padding: 20px; }
.person__body { padding: 20px 10px 6px; }
.person__name { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.person__role { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }

/* ── The book ───────────────────────────────────────────── */
.journal { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--r-xs); margin-top: 38px; }
.post {
  display: flex; flex-direction: column; min-height: 220px;
  background: var(--stone-100); border-radius: var(--r-md); padding: 30px 32px;
  transition: background-color 0.16s ease;
}
.post:hover { background: var(--stone-200); color: var(--ink); }
.postrow__title { margin-top: 22px; font-family: var(--font-display); font-size: 20px; line-height: 1.26; letter-spacing: -0.025em; font-weight: 700; }
.post__more { margin-top: auto; padding-top: 22px; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { padding: var(--pad-section); display: grid; grid-template-columns: 340px 1fr; gap: 56px; }
.faq__note { margin-top: 16px; font-size: 15.5px; line-height: 1.62; color: var(--stone-700); }

.faq__list {
  background: var(--stone-100); border-radius: var(--r-md);
  padding: 8px; display: flex; flex-direction: column; gap: 3px;
}
.faq__item { border-radius: 16px; padding: 4px 6px; transition: background-color 0.16s ease; }
.faq__item.is-open { background: var(--surface); }

.faq__q {
  width: 100%; border: 0; background: transparent; cursor: pointer;
  text-align: left; padding: 18px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.faq__sign {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--surface); color: var(--stone-600);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 14px;
  transition: background-color 0.16s ease, color 0.16s ease;
}
/* One open row at a time, so this is a single moment of red focus. */
.faq__item.is-open .faq__sign { background: var(--stone-100); color: var(--red); }

.faq__a[hidden] { display: none; }
.faq__a p { padding: 0 16px 20px; font-size: 15.5px; line-height: 1.64; color: var(--stone-700); max-width: 680px; }

/* ── Contact ────────────────────────────────────────────── */
/* Ink, never red — red is never a large background (BRAND.md §02). */
.contact {
  background: var(--ink); border-radius: var(--r-card);
  padding: 56px; color: var(--surface);
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
.contact__title {
  margin-top: 26px; font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.04; letter-spacing: -0.03em; font-weight: 800;
}
.contact__lede {
  margin-top: 20px; max-width: 440px;
  font-size: 17px; line-height: 1.62; color: rgba(255, 255, 255, 0.72);
}
.contact__points { margin-top: 34px; gap: 10px; max-width: 400px; }

.formcard {
  background: var(--surface); border-radius: var(--r-md);
  padding: 34px 36px; color: var(--ink);
}
.formcard[hidden] { display: none; }
.formcard--done {
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: center;
}

.field { margin-top: 12px; }
.field--first { margin-top: 22px; }

.field input, .field select, .field textarea, .cselect__btn {
  width: 100%; border: 0; outline: none;
  background: var(--stone-100); border-radius: var(--r-xs);
  font-size: 14.5px; color: var(--ink);
}
.field input, .field select, .cselect__btn { height: 50px; padding: 0 16px; }
.field select { color: var(--stone-700); appearance: none; padding-right: 40px; }
.field textarea { height: 110px; padding: 14px 16px; resize: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone-600); opacity: 1; }

.field input:focus, .field select:focus, .field textarea:focus, .cselect__btn:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.field input:user-invalid, .field textarea:user-invalid { outline: 2px solid var(--red); outline-offset: 2px; }

.field--select { position: relative; }
.field--select::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--stone-700); border-bottom: 1.5px solid var(--stone-700);
  transform: rotate(45deg); pointer-events: none;
  transition: transform 0.18s ease, margin-top 0.18s ease;
}
.field--select.is-open::after { transform: rotate(-135deg); margin-top: -2px; }

/* The need dropdown. The operating system draws an open native <select>
   (blue highlight, square grey frame) and no stylesheet can reach it, so
   main.js swaps in this listbox and keeps the <select> underneath, hidden,
   as the value the form submits. Without JavaScript the native one shows. */
.cselect__native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cselect__btn {
  display: flex; align-items: center; padding-right: 40px;
  text-align: left; cursor: pointer; color: var(--ink);
}
.cselect__btn.is-empty { color: var(--stone-600); }
.cselect__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  margin: 0; padding: 6px; list-style: none;
  max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--stone-200); border-radius: var(--r-xs);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  animation: cselect-in 0.14s ease-out;
}
.cselect__list[hidden] { display: none; }
@keyframes cselect-in { from { opacity: 0; transform: translateY(-4px); } }
.cselect__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-radius: 9px;
  font-size: 14.5px; line-height: 1.3; color: var(--ink); cursor: pointer;
}
.cselect__opt.is-active { background: var(--stone-100); }
.cselect__opt[aria-selected="true"] { font-weight: 600; }
.cselect__opt[aria-selected="true"]::after {
  content: ""; flex: none; width: 5px; height: 10px; margin-right: 4px; margin-top: -3px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .cselect__list { animation: none; }
  .field--select::after { transition: none; }
}

.form .btn--block { margin-top: 16px; }
.form__fine { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--stone-600); }

.thanks__title { margin-top: 26px; font-family: var(--font-display); font-size: 27px; letter-spacing: -0.025em; font-weight: 700; }
.thanks__body { margin-top: 14px; font-size: 15.5px; line-height: 1.64; color: var(--stone-700); }
.formcard--done .btn { align-self: flex-start; margin-top: 26px; height: 44px; padding: 0 20px; border-radius: var(--r-2xs); }
.formcard--error .glyph { background: var(--red); color: var(--surface); }
.thanks__body a { text-decoration: underline; text-underline-offset: 3px; }

/* The same ink block on /contact, where an <h1> already carries the page.
   The form is the point of that page, so it takes the wider column and the
   heading beside it steps down. */
.contact--page { grid-template-columns: 0.88fr 1fr; scroll-margin-top: 100px; }
.contact--page .contact__title { font-size: clamp(27px, 2.9vw, 40px); }

/* What happens after you send. Rules rather than card edges, and hanging
   mono numerals — the same vocabulary as the numbered lists on the
   service pages. */
.steps { margin-top: 34px; max-width: 430px; }
.step {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px;
  padding: 17px 0; border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step__n { font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, 0.5); }
.step__b { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }

.contact__direct { margin-top: 32px; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The submit button while a send is in flight. */
.btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* ── Footer ───────────────────────────────────────────────
   A white card like every other section, closing a stack of them. What
   separates the parts is rules, not fills — the same vocabulary as the
   rest of the page.

   Two grids rather than one five-column row: the brand block sets its own
   width, and the link columns divide what is left between themselves. A
   fifth nav column would then change nothing about the brand block. */
.footer { padding: var(--pad-section) var(--pad-section) 30px; }
.footer__top {
  display: grid; grid-template-columns: minmax(240px, 0.9fr) 2.3fr; gap: 64px;
}
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.footer__brandcol .brand { padding: 0; margin-left: -2px; }
.footer__brandcol .brand__mark { height: 35px; }
.footer__brandcol .brand__name { font-size: 20px; }
.footer__brandcol .brand__tag { font-size: 9.5px; }
.footer__blurb {
  margin-top: 20px; max-width: 300px;
  font-size: 15px; line-height: 1.62; color: var(--stone-700);
}
.footer__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.footer__actions .btn { border-radius: var(--r-2xs); }

.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer__col .eyebrow { margin-bottom: 3px; }
.footer__col a { font-size: 14.5px; line-height: 1.35; color: var(--stone-700); }
.footer__col a:hover { color: var(--red); }

.footer__legal {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--stone-200);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.footer__legal p, .footer__legallinks a {
  font-family: var(--font-mono); font-size: 11px; color: var(--stone-600);
}
.footer__legallinks { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legallinks a:hover { color: var(--red); }

/* ============================================================
   Subpages — breadcrumb, page hero, prose, CTA band, error.
   Used by privacy.html, terms.html, 404.html and practices/*.html.
   Nothing here is referenced by index.html.
   ============================================================ */

/* ── Breadcrumb ─────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; color: var(--stone-600);
}
.crumbs a:hover { color: var(--red); }
.crumbs .crumbs__sep { color: var(--stone-300); }
.crumbs [aria-current] { color: var(--ink); }

/* ── Long-form prose (legal pages) ──────────────────────── */
.legal { display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }

.toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2px; }
.toc__label { margin-bottom: 8px; padding-left: 10px; }
.toc a {
  padding: 7px 10px; border-radius: var(--r-3xs);
  font-size: 13.5px; line-height: 1.35; color: var(--stone-700);
}
.toc a:hover { background: var(--stone-100); color: var(--red); }

.prose { max-width: 74ch; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  margin-top: 46px; scroll-margin-top: 100px;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.16; letter-spacing: -0.02em; font-weight: 700;
}
.prose h3 {
  margin-top: 30px;
  font-family: var(--font-body); font-size: 16.5px; font-weight: 600;
}
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h2 + ol { margin-top: 12px; }
.prose p, .prose li { font-size: 16.5px; line-height: 1.68; color: var(--stone-700); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--stone-300); }
.prose a:hover { text-decoration-color: currentColor; }

.prose ul, .prose ol { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; padding-left: 22px; }
.prose li { position: relative; }
.prose ul > li::before {
  content: ""; position: absolute; left: -18px; top: 11px;
  height: 5px; width: 5px; border-radius: 50%; background: var(--stone-400);
}
.prose ol { counter-reset: prose-n; }
.prose ol > li { counter-increment: prose-n; }
.prose ol > li::before {
  content: counter(prose-n) "."; position: absolute; left: -22px; top: 3px;
  font-family: var(--font-mono); font-size: 12px; color: var(--stone-600);
}

/* ── Blog posts ─────────────────────────────────────────── */
/* No hero. A post opens on a short title block and goes straight into one
   reading column of about 70 characters, with the contents list sitting
   in the left margin on wide screens. Rules separate sections, as
   everywhere else on the site; red appears only in the periods, the link
   hover and the open FAQ row. */
.entry {
  --measure: 700px;
  background: var(--surface); border-radius: var(--r-card);
  padding: 64px var(--pad-section) 80px;
  display: grid; column-gap: 56px;
  grid-template-columns: minmax(190px, 1fr) minmax(0, var(--measure)) minmax(0, 1fr);
}
.entry > * { grid-column: 2; }
.entry .entry__head { grid-column: 2 / -1; }

/* Header */
.entry__kicker {
  margin-top: 40px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone-600);
}
.entry__title {
  margin-top: 14px; max-width: 19ch;
  font-size: clamp(36px, 4.4vw, 62px); line-height: 1.01;
  letter-spacing: -0.035em; font-weight: 800;
}
.entry__dek {
  margin-top: 24px; max-width: var(--measure);
  font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--stone-700);
}
.entry__byline {
  margin-top: 36px; padding: 16px 0; max-width: var(--measure);
  border-top: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200);
  display: flex; align-items: center; gap: 14px;
}
.entry__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; object-position: 50% 18%; background: var(--stone-100);
}
.entry__who { display: flex; flex-direction: column; font-size: 15px; line-height: 1.35; }
.entry__who a { font-weight: 600; color: var(--ink); }
.entry__who a:hover { color: var(--red); }
.entry__who span { font-size: 13.5px; color: var(--stone-600); }
.entry__facts {
  margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px;
  font-family: var(--font-mono); font-size: 11px; color: var(--stone-600);
}

/* The reading grid: contents in the margin, text in the measure. */
.entry__grid {
  grid-column: 1 / -1; margin-top: 64px;
  display: grid; grid-template-columns: subgrid; align-items: start;
}
.entry__rail {
  grid-column: 1; justify-self: end; width: 100%; max-width: 230px;
  position: sticky; top: 132px;
}
.entry__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone-600);
}
.entry__toc { margin-top: 14px; list-style: none; padding: 0; counter-reset: toc; }
.entry__toc li { counter-increment: toc; }
.entry__toc a {
  display: flex; gap: 12px; padding: 7px 0 7px 14px;
  border-left: 1px solid var(--stone-200);
  font-size: 13.5px; line-height: 1.38; color: var(--stone-600);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.entry__toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 10.5px; padding-top: 2px; color: var(--stone-400);
}
.entry__toc a:hover { color: var(--ink); }
.entry__toc a.is-current { color: var(--ink); border-left-color: var(--ink); }
.entry__mtoc { display: none; }

/* The text */
.entry__body { grid-column: 2; min-width: 0; max-width: var(--measure); }
.entry__body > * + * { margin-top: 22px; }
.entry__body p, .entry__body li { font-size: 18px; line-height: 1.75; color: var(--stone-800); }
.entry__body strong { color: var(--ink); font-weight: 600; }
.entry__body em { font-style: italic; }
.entry__body a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--stone-300); text-decoration-thickness: 1px;
}
.entry__body a:hover { color: var(--red); text-decoration-color: currentColor; }
.entry__body h2 {
  margin-top: 76px; padding-top: 30px; border-top: 1px solid var(--stone-200);
  scroll-margin-top: 120px;
  font-size: clamp(26px, 2.5vw, 34px); line-height: 1.1;
  letter-spacing: -0.025em; font-weight: 700;
}
.entry__body h3 {
  margin-top: 46px; scroll-margin-top: 120px;
  font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700;
}
.entry__body h2 + *, .entry__body h3 + * { margin-top: 14px; }
/* "1. Say who decides what": the number sits above the heading as a mono
   numeral, so the seven read as a sequence without indenting the text. */
.entry__n {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: 0.04em; color: var(--stone-600);
}
.entry__body ul, .entry__body ol { list-style: none; padding-left: 26px; }
.entry__body li { position: relative; }
.entry__body li + li { margin-top: 12px; }
.entry__body ul > li::before {
  content: ""; position: absolute; left: -20px; top: 0.82em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--stone-400);
}
.entry__body ol { counter-reset: entry-n; }
.entry__body ol > li { counter-increment: entry-n; }
.entry__body ol > li::before {
  content: counter(entry-n, decimal-leading-zero); position: absolute; left: -26px; top: 5px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--stone-600);
}
.entry__body hr { display: none; }
/* Pieces inside the text column that are not running text, so the body's
   paragraph, list and link rules above must not reach them. */
.entry__body .entry__label { font-size: 11px; line-height: 1.4; color: var(--stone-600); }
.entry__body .entry__toc { padding-left: 0; counter-reset: toc; }
.entry__body .entry__toc li { counter-increment: toc; }
.entry__body .entry__toc li::before { content: none; }
.entry__body .entry__toc li + li { margin-top: 0; }
.entry__body .entry__toc a { text-decoration: none; color: var(--stone-600); }
.entry__body .entry__toc a:hover, .entry__body .entry__toc a.is-current { color: var(--ink); }

/* The short answer: the one filled panel in the text. */
.entry__answer {
  margin-top: 36px; padding: 26px 30px 28px;
  background: var(--stone-100); border-radius: var(--r-sm);
}
.entry__answer .entry__label { margin-bottom: 10px; }
.entry__answer p:not(.entry__label) { font-size: 19px; line-height: 1.62; color: var(--ink); }

/* Pull quote: the book's line, set like a headline. */
.entry__quote { margin-top: 52px; margin-bottom: 52px; padding-top: 30px; border-top: 2px solid var(--ink); }
.entry__quote blockquote p {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(30px, 3.3vw, 44px); line-height: 1.06; letter-spacing: -0.035em;
}
.entry__quote figcaption {
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone-600);
}

.entry__body .cmpwrap { margin-top: 28px; }
.entry__body .cmp { margin-top: 0; }
/* The plain table: no highlighted last column, since in an article the
   last column is just another column, not "our answer". Doubled class:
   .cmp's own last-column rule comes later in this file. */
.cmp.cmp--plain th, .cmp.cmp--plain td { padding: 14px 14px; font-size: 15px; }
.cmp.cmp--plain td:last-child { background: none; color: var(--stone-700); font-weight: 400; border-radius: 0; }
.entry__faq { margin-top: 22px; }
.entry__body .entry__faq .faq__a p { font-size: 16.5px; line-height: 1.64; color: var(--stone-700); }

/* Figures: charts and flows drawn in HTML (articles.py). One quiet frame,
   ink for the thing the text is about, gray for context. */
.entry__body .entry__figure {
  margin-top: 40px; margin-bottom: 40px; padding: 26px 28px 24px;
  border: 1px solid var(--stone-200); border-radius: var(--r-sm); background: var(--surface);
}
.entry__figure .fig__title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink);
}
.entry__figure figcaption { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--stone-200); }
.entry__figure .fig__cap { font-size: 15px; line-height: 1.55; color: var(--stone-700); }
.entry__figure .fig__src {
  margin-top: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  letter-spacing: 0.04em; color: var(--stone-600);
}
.entry__body .entry__figure .fig__src a { color: var(--stone-700); }

/* Bar chart: one baseline, the value at each bar's tip. The context gray
   clears 3:1 on white; every bar is labeled, so color never works alone. */
.chart { position: relative; margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.chart::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--stone-300); }
.chart__row { display: grid; gap: 6px; }
.entry__figure .chart__label { padding-left: 12px; font-size: 15px; line-height: 1.35; color: var(--stone-700); }
.entry__figure .chart__row.is-key .chart__label { color: var(--ink); font-weight: 600; }
.chart__track { display: flex; align-items: center; gap: 10px; }
.chart__bar {
  display: block; flex: none; height: 22px; width: calc((100% - 64px) * var(--v));
  background: #8A8B8F; border-radius: 0 4px 4px 0;
}
.chart__row.is-key .chart__bar { background: var(--ink); }
.chart__val { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--stone-700); }
.chart__row.is-key .chart__val { color: var(--ink); }
.chart__row:hover .chart__label { color: var(--ink); }

/* Columns: the same marks stood up, for a series over time. */
.cols {
  margin-top: 22px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  column-gap: 0;
}
.cols__col { display: flex; flex-direction: column; align-items: center; }
.cols__plot {
  width: 100%; height: 190px; border-bottom: 1px solid var(--stone-300);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
}
.cols__bar {
  display: block; width: 24px; height: calc(150px * var(--v));
  background: #8A8B8F; border-radius: 4px 4px 0 0;
}
.cols__col.is-key .cols__bar { background: var(--ink); }
.cols__val { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--stone-700); }
.cols__col.is-key .cols__val { color: var(--ink); }
.entry__figure .cols__label {
  margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--stone-600);
}
.entry__figure .cols__col.is-key .cols__label { color: var(--ink); }

/* Flow: numbered markers joined by a hairline. Gates put each step's exit
   beside it; loops give each step a line of detail. */
.figflow { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.figflow__step {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 16px; align-items: start;
}
.fig--gates .figflow__step { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 240px); }
.figflow__step:not(:last-child)::after {
  content: ""; position: absolute; left: 17.5px; top: 36px; bottom: -14px; width: 1px; background: var(--ink);
}
.figflow__n {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ink); background: var(--surface);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink);
}
.figflow__n--end { background: var(--ink); }
.entry__figure .figflow__head { padding-top: 6px; font-size: 16.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.entry__figure .figflow__detail { grid-column: 2; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--stone-700); }
.entry__figure .figflow__exit {
  padding: 10px 14px; border-radius: var(--r-3xs); background: var(--stone-100);
  font-size: 15px; line-height: 1.4; color: var(--stone-800);
}
.entry__figure .figflow__end {
  grid-column: 2 / -1; padding: 12px 16px; border-radius: var(--r-3xs); background: var(--ink);
  font-size: 16px; line-height: 1.4; font-weight: 600; color: #fff;
}
.figflow__if {
  display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600);
}
.figflow__end .figflow__if { color: var(--stone-300); }
.entry__figure .figflow__loop {
  margin-top: 18px; display: flex; gap: 10px; align-items: center;
  font-size: 15px; line-height: 1.45; color: var(--stone-700);
}
.figflow__loop svg { flex: none; width: 20px; height: 20px; color: var(--ink); }

/* About the author */
.entry__author {
  margin-top: 84px; padding-top: 32px; border-top: 1px solid var(--stone-200);
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 26px; align-items: start;
}
.entry__author img {
  width: 96px; height: 120px; object-fit: cover; object-position: 50% 15%;
  border-radius: var(--r-xs); background: var(--stone-100);
}
.entry__body .entry__name {
  margin-top: 8px; font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
}
.entry__body .entry__bio { margin-top: 8px; font-size: 16px; line-height: 1.65; color: var(--stone-700); }
.entry__more { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.entry__body .entry__more a { font-size: 15px; }

/* Reading progress: a hairline of ink across the top of the window. */
.readbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.readbar__fill {
  display: block; height: 100%; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* The blog index: the same header, then one rule-separated list. */
.entry--index .posts { margin-top: 56px; }
.posts { list-style: none; padding: 0; display: flex; flex-direction: column; }
.postrow { padding: 32px 0; border-top: 1px solid var(--stone-200); }
.postrow__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--font-mono); font-size: 11px; color: var(--stone-600);
}
.postrow__title {
  margin-top: 12px; max-width: 30ch;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700;
}
.postrow__title a:hover { color: var(--red); }
.postrow__dek { margin-top: 10px; max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--stone-700); }

/* Laptops: the right margin goes, the text takes the room. */
@media (max-width: 1360px) {
  .entry { grid-template-columns: 200px minmax(0, 1fr) 0; column-gap: 48px; }
}
/* Tablets and phones: one column, contents folded above the text. */
@media (max-width: 1000px) {
  .entry { display: block; padding: 40px 28px 56px; }
  .entry__grid { display: block; margin-top: 40px; }
  .entry__rail { display: none; }
  .entry__mtoc { display: block; }
  .entry__mtoc details { border-top: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200); }
  .entry__mtoc summary {
    list-style: none; cursor: pointer; padding: 16px 0;
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--stone-600);
  }
  .entry__mtoc summary::-webkit-details-marker { display: none; }
  .entry__mtoc summary::after { content: "+"; font-size: 15px; color: var(--ink); }
  .entry__mtoc details[open] summary::after { content: "\2212"; }
  .entry__mtoc .entry__toc { margin-top: 0; padding-bottom: 12px; }
  .entry__body > .entry__mtoc + * { margin-top: 32px; }
  .entry__kicker { margin-top: 28px; }
}
@media (max-width: 560px) {
  .entry { padding: 32px 20px 48px; }
  .entry__byline { flex-wrap: wrap; }
  .entry__facts { margin-left: 58px; justify-content: flex-start; }
  .entry__body p, .entry__body li { font-size: 17px; }
  .entry__answer { padding: 22px 20px 24px; }
  .entry__answer p:not(.entry__label) { font-size: 17.5px; }
  .entry__author { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; }
  .entry__author img { width: 72px; height: 90px; }
  .entry__body .entry__figure { padding: 20px 18px 18px; }
  .fig--gates .figflow__step { grid-template-columns: 36px minmax(0, 1fr); }
  .entry__figure .figflow__exit { grid-column: 2; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .entry__toc a { transition: none; }
}

/* ── Draft / placeholder notice ─────────────────────────── */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--r-sm);
  background: var(--stone-100); border-left: 3px solid var(--red);
}
.notice p { font-size: 14.5px; line-height: 1.6; color: var(--stone-700); }
.notice strong { color: var(--ink); font-weight: 600; }

/* ── Anchored detail block (practice hubs) ──────────────── */
.deep {
  display: grid; grid-template-columns: 268px 1fr; gap: 44px;
  padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--stone-200);
  scroll-margin-top: 100px;
}
.deep:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.deep__aside { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.deep__title { font-size: 24px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 700; }
.deep__body { margin-top: 14px; max-width: 660px; font-size: 16.5px; line-height: 1.64; color: var(--stone-700); }
.deep__body + .stack { margin-top: 20px; }

/* ── Ink CTA band ───────────────────────────────────────── */
.cta {
  background: var(--ink); color: var(--surface); border-radius: var(--r-card);
  padding: 52px var(--pad-section);
  display: grid; grid-template-columns: 1.2fr auto; gap: 44px; align-items: center;
}
.cta__title { margin-top: 18px; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; }
.cta__body { margin-top: 14px; max-width: 560px; font-size: 16.5px; line-height: 1.62; color: rgba(255, 255, 255, 0.72); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn--onInk { background: var(--surface); color: var(--ink); }
.btn--onInk:hover { background: var(--stone-200); color: var(--ink); }
.btn--lineInk { background: transparent; color: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.btn--lineInk:hover { background: rgba(255, 255, 255, 0.1); color: var(--surface); }

.phead .crumbs + .eyebrow { margin-top: 20px; }
.section__head + .outcomes { margin-top: 36px; }
.pillar .btn { margin-top: 22px; }
.pillars--pair { grid-template-columns: repeat(2, 1fr); }

/* ── 404 ────────────────────────────────────────────────── */
.err {
  padding: 96px var(--pad-section) 72px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.err__title { margin-top: 20px; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
.err__body { margin-top: 20px; max-width: 520px; font-size: 16.5px; line-height: 1.64; color: var(--stone-700); }
.err__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.err__links {
  margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--stone-200);
  width: 100%; max-width: 820px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}


/* ============================================================
   Page-type layouts.

   The homepage is a stack of white cards. If every other page uses the
   same stack it reads as a homepage variant, so each page type below
   gets its own skeleton and its own rhythm:

     practice hub   inverted ink header + numbered editorial list
     service        two-column document with a sticky rail
     practices      alternating full-width editorial rows
     track record   asymmetric feature grid
     case study     narrow article with hanging numerals
     about          oversized statement + rule-separated principles
     book           sticky cover panel beside the copy
     legal          left table of contents + prose  (further up this file)

   Shared vocabulary: rules instead of card edges, oversized mono
   numerals, and a narrow measure wherever there is real reading.
   ============================================================ */

/* ── Page headers ───────────────────────────────────────── */
.phead { padding: 60px var(--pad-section) 52px; }
.phead__lede { margin-top: 22px; max-width: 62ch; font-size: 17.5px; line-height: 1.62; color: var(--stone-700); }
.phead__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Hub — full ink, so a practice reads as its own section of the site. */
.phead--ink { background: var(--ink); color: var(--surface); border-radius: var(--r-card); }
.phead--ink .crumbs { color: rgba(255, 255, 255, 0.6); }
.phead--ink .crumbs a:hover { color: var(--surface); }
.phead--ink .crumbs .crumbs__sep { color: rgba(255, 255, 255, 0.3); }
.phead--ink .crumbs [aria-current] { color: var(--surface); }
.phead--ink .eyebrow { color: rgba(255, 255, 255, 0.6); }
.phead--ink .phead__lede { color: rgba(255, 255, 255, 0.72); }
.phead__title {
  margin-top: 18px;
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 0.98; letter-spacing: -0.035em; font-weight: 800;
  max-width: 16ch;
}
.phead__meta {
  margin-top: 38px; padding-top: 22px;
  border-top: 1px solid var(--stone-200);
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  font-family: var(--font-mono); font-size: 11px; color: var(--stone-600);
}
.phead--ink .phead__meta {
  border-top-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.6);
}

/* Service — deliberately quiet. A document header, not a billboard. */
.phead--doc {
  background: transparent; padding: 8px 0 34px;
  border-bottom: 1px solid var(--stone-200);
}
.phead--doc .phead__title {
  margin-top: 14px;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04;
  letter-spacing: -0.03em; font-weight: 800; max-width: 20ch;
}
.phead--doc .phead__lede { font-size: 17px; max-width: 68ch; }

/* Article — centred and narrow, for case studies. */
.phead--article { padding: 56px var(--pad-section) 40px; text-align: center; }
.phead--article .crumbs { justify-content: center; }
.phead--article .phead__title { margin-inline: auto; max-width: 20ch; font-size: clamp(32px, 4vw, 54px); }
.phead--article .phead__lede { margin-inline: auto; max-width: 60ch; }

/* Two-column page header. A single narrow column of type inside a full-width
   card leaves the right half visibly empty, so the service pages pair the
   copy with a summary panel. */
.phead--split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); gap: 56px; align-items: start; }
.phead--split .phead__title { max-width: 18ch; }
.phead--split { align-items: center; }
.phead__art { border-radius: var(--r-lg); overflow: hidden; }
.phead--split .phead__lede { max-width: none; }
.phead__panel {
  background: var(--stone-100); border-radius: var(--r-sm); padding: 26px 24px;
  margin-top: 6px;
}
.phead--ink .phead__panel { background: rgba(255, 255, 255, 0.08); }
.phead__panel .eyebrow { margin-bottom: 14px; display: block; }
.phead--ink .phead__panel .eyebrow { color: rgba(255, 255, 255, 0.6); }
.phead__panel ul { display: flex; flex-direction: column; }
.phead__panel li {
  position: relative; padding: 11px 0 11px 20px;
  border-top: 1px solid var(--stone-200);
  font-size: 15px; line-height: 1.45; font-weight: 500;
}
.phead__panel li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  height: 5px; width: 5px; border-radius: 50%; background: var(--red);
}
.phead--ink .phead__panel li { border-top-color: rgba(255, 255, 255, 0.16); }
.phead__panel li:first-child { border-top: 0; padding-top: 0; }
.phead__panel li:first-child::before { top: 8px; }
.phead__panel .phead__meta { margin-top: 18px; padding-top: 16px; gap: 6px 20px; }

/* ── Numbered editorial list ────────────────────────────── */
/* Replaces the 4-up card grid. Rules, not boxes. */
.numlist { margin-top: 8px; }
.numitem {
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: 32px; align-items: start;
  padding: 34px 0; border-top: 1px solid var(--stone-200);
  scroll-margin-top: 100px;
}
.numitem__n {
  font-family: var(--font-mono); font-size: 13px; color: var(--stone-600);
  padding-top: 6px;
}
.numitem__title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }
.numitem__body { margin-top: 12px; max-width: 62ch; font-size: 16px; line-height: 1.64; color: var(--stone-700); }
.numitem__meta { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }
.numitem__go { align-self: center; }
a.numitem:hover .numitem__title { color: var(--red); }
a.numitem:hover { color: inherit; }

/* On ink surfaces. */
.numlist--onInk .numitem { border-top-color: rgba(255, 255, 255, 0.16); }
.numlist--onInk .numitem__n,
.numlist--onInk .numitem__meta { color: rgba(255, 255, 255, 0.55); }
.numlist--onInk .numitem__body { color: rgba(255, 255, 255, 0.72); }

/* ── Document layout (service pages) ────────────────────── */
/* Rail on the RIGHT — the legal pages already use a left rail. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 64px; align-items: start; }
.doc__body > * + * { margin-top: 44px; }
.doc__rail { position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--gap); }

.railcard { background: var(--stone-100); border-radius: var(--r-sm); padding: 24px 22px; }
.railcard--ink { background: var(--ink); color: var(--surface); }
.railcard--ink .eyebrow { color: rgba(255, 255, 255, 0.6); }
.railcard__title { margin-top: 12px; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.4; }
.railcard--ink .railcard__title { color: var(--surface); }
.railcard__body { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--stone-700); }
.railcard--ink .railcard__body { color: rgba(255, 255, 255, 0.72); }
.railcard .btn { margin-top: 18px; width: 100%; }

.railfacts { margin-top: 14px; display: flex; flex-direction: column; }
.railfacts > div { padding: 11px 0; border-top: 1px solid var(--stone-200); }
.railfacts dt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-600); }
.railfacts dd { margin-top: 4px; font-size: 14.5px; line-height: 1.45; }

.railnav { margin-top: 12px; display: flex; flex-direction: column; }
.railnav a {
  padding: 11px 0; border-top: 1px solid var(--stone-200);
  font-size: 14.5px; line-height: 1.4; color: var(--stone-700);
}
.railnav a:hover { color: var(--red); }
.railnav a[aria-current] { color: var(--ink); font-weight: 600; }

/* Body blocks inside a document. */
.docsec__title { font-size: clamp(21px, 2vw, 27px); line-height: 1.14; letter-spacing: -0.02em; font-weight: 700; }
.docsec__lede { margin-top: 14px; max-width: 68ch; font-size: 16.5px; line-height: 1.66; color: var(--stone-700); }

.hang { margin-top: 26px; }
.hang > li {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--stone-200);
}
.hang__n { font-family: var(--font-mono); font-size: 12px; color: var(--stone-600); padding-top: 3px; }
.hang__t { font-family: var(--font-body); font-size: 16.5px; font-weight: 600; }
.hang__b { margin-top: 8px; max-width: 62ch; font-size: 15.5px; line-height: 1.62; color: var(--stone-700); }

/* A hanging list that is a section's whole content runs two-up on desktop.
   One column leaves the right half of the card empty. */
.section > .hang { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 30px; }
.section > .hang > li { border-top: 1px solid var(--stone-200); }
.section > .hang > li:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
/* A three-item list runs three-up, so the grid does not end on an empty cell. */
.section > .hang--3 { grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
.section > .hang--3 > li { border-top: 0; padding-top: 4px; }

/* A bordered callout — used for "signals", never a card grid. */
.callout { border-left: 3px solid var(--ink); padding: 4px 0 4px 24px; }
.callout__list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.callout__list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.6; color: var(--stone-700); }
.callout__list li::before { content: ""; position: absolute; left: 0; top: 10px; height: 5px; width: 5px; border-radius: 50%; background: var(--red); }

/* Slim prev/next strip, instead of another CTA band. */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pager a { background: var(--surface); border-radius: var(--r-sm); padding: 24px 26px; }
.pager a:hover { color: inherit; }
.pager a:hover .pager__t { color: var(--red); }
.pager__k { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-600); }
.pager__t { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.pager--end { text-align: right; }

/* ── Editorial rows (practices landing) ─────────────────── */
.erow {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 380px);
  gap: 48px; align-items: start;
  padding: 46px var(--pad-section); border-radius: var(--r-card);
  background: var(--surface);
}
.erow--ink { background: var(--ink); color: var(--surface); }
.erow--ink .erow__body { color: rgba(255, 255, 255, 0.72); }
.erow--ink .erow__links a { border-top-color: rgba(255, 255, 255, 0.18); }
.erow--ink .eyebrow { color: rgba(255, 255, 255, 0.6); }
.erow__n { font-family: var(--font-mono); font-size: 13px; color: var(--stone-400); padding-top: 8px; }
.erow__title { margin-top: 10px; font-size: clamp(26px, 3vw, 40px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
.erow__body { margin-top: 16px; max-width: 54ch; font-size: 16.5px; line-height: 1.64; color: var(--stone-700); }
.erow__links { display: flex; flex-direction: column; }
.erow__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--stone-200); font-size: 15.5px;
}
.erow__links a:hover { color: var(--red); }

/* ── Feature grid (track record) ────────────────────────── */
.featured { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gap); align-items: start; }
.feature { background: var(--surface); border-radius: var(--r-card); overflow: hidden; display: block; }
.feature:hover { color: inherit; }
.feature:hover .feature__title { color: var(--red); }
.feature__body { padding: 30px 32px 34px; }
.feature__title { margin-top: 16px; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; }
.feature__body p { margin-top: 12px; max-width: 54ch; font-size: 15.5px; line-height: 1.62; color: var(--stone-700); }
.feature__more { margin-top: 20px; display: inline-block; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }
.feature:hover .feature__more { color: var(--red); }
.featured__side { display: flex; flex-direction: column; gap: var(--gap); }
.featured__side .feature__body { padding: 24px 26px 28px; }
.featured__side .feature__title { font-size: 20px; }

/* ── Article (case study) ───────────────────────────────── */
.article { max-width: 74ch; margin-inline: auto; }
.article > * + * { margin-top: 40px; }
.artsec { display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start; }
.artsec__n { font-family: var(--font-mono); font-size: 12px; color: var(--stone-600); padding-top: 8px; }
.artsec__t { font-size: clamp(20px, 2vw, 26px); line-height: 1.14; letter-spacing: -0.02em; font-weight: 700; }
.artsec__b { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--stone-700); }
.pullquote {
  margin-block: 8px; padding: 34px 0;
  border-top: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200);
}
.pullquote blockquote { font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 30px); line-height: 1.26; letter-spacing: -0.02em; font-weight: 700; }
.pullquote figcaption { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }
.factbar {
  display: flex; flex-wrap: wrap; gap: 14px 44px;
  padding: 22px var(--pad-section); background: var(--stone-100); border-radius: var(--r-sm);
}
.factbar div { min-width: 140px; }
.factbar dt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-600); }
.factbar dd { margin-top: 5px; font-size: 15.5px; font-weight: 600; }

/* ── About ──────────────────────────────────────────────── */
.statement { padding: 70px var(--pad-section); }
.statement__h {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.14;
  letter-spacing: -0.028em; font-weight: 700;
  max-width: 22ch;
}
.statement__after { margin-top: 28px; max-width: 60ch; font-family: var(--font-body); font-size: 17px; line-height: 1.64; font-weight: 400; color: var(--stone-700); }

/* ── Book ───────────────────────────────────────────────── */
.bookpage { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: start; }
.bookaside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--gap); }
.bookcover {
  aspect-ratio: 3 / 4; border-radius: var(--r-sm);
  background: var(--ink); color: var(--surface);
  padding: 40px 34px; display: flex; flex-direction: column; justify-content: space-between;
}
/* On the ink hero the cover would vanish into the background, so it gets a
   lifted surface and an edge instead. */
.phead--ink .bookcover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  aspect-ratio: 4 / 5; max-width: 360px; margin-left: auto;
}
.bookcover__t { font-family: var(--font-display); font-size: 34px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.bookcover__a { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.6); }
/* ============================================================
   Section layouts.

   A page of thirteen sections that all use the same card-with-a-list
   shape reads as one long section. These give each band its own
   geometry: a horizontal bar, a stepped timeline, alternating rows, a
   real table, a full-bleed statement. Only the hero, the FAQ and the
   CTA repeat across pages.
   ============================================================ */

/* ── Stat bar: figures on a rule, no card ───────────────── */
.statbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px; padding: 34px var(--pad-section);
  background: var(--surface); border-radius: var(--r-card);
}
.statbar > div { padding-left: 22px; border-left: 2px solid var(--ink); }
.statbar dt {
  font-family: var(--font-display); font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.1; letter-spacing: -0.02em; font-weight: 700;
}
.statbar dd { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--stone-700); }

/* ── Timeline: the process, read left to right ──────────── */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 38px; }
.timeline > li { position: relative; padding: 30px 26px 0 0; }
.timeline > li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--stone-200);
}
.timeline > li:first-child::before { background: var(--ink); }
.timeline__n {
  position: absolute; top: -7px; left: 0;
  height: 12px; width: 12px; border-radius: 50%;
  background: var(--stone-200);
}
.timeline > li:first-child .timeline__n { background: var(--red); }
.timeline__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600); }
.timeline__t { margin-top: 10px; font-size: 20px; letter-spacing: -0.02em; font-weight: 700; }
.timeline__b { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--stone-700); }

/* ── Alternating rows: rules, not cards ─────────────────── */
.altrows { border-top: 1px solid var(--stone-200); }
.altrow {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--stone-200);
}
/* Alternate with a tint, never by reversing direction: rtl flips the column
   order, so the row reads body, title, number and the numeral drifts to the
   far right. Reading order stays the same on every row. */
.altrow:nth-child(even) { background: var(--stone-100); }
.altrow { padding-inline: 18px; margin-inline: -18px; border-radius: var(--r-3xs); }
.altrow__k { font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }
.altrow__t { font-size: 21px; letter-spacing: -0.02em; font-weight: 700; line-height: 1.2; }
.altrow__b { font-size: 15.5px; line-height: 1.62; color: var(--stone-700); }

/* ── Comparison table ───────────────────────────────────── */
.cmp { width: 100%; border-collapse: collapse; margin-top: 34px; }
.cmp th, .cmp td { text-align: left; padding: 16px 20px; vertical-align: top; font-size: 15px; line-height: 1.55; }
.cmp thead th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone-600);
  border-bottom: 1px solid var(--stone-300); padding-bottom: 12px;
}
.cmp tbody tr { border-bottom: 1px solid var(--stone-200); }
.cmp tbody th { font-weight: 600; width: 26%; }
.cmp td:last-child { background: var(--stone-100); color: var(--ink); font-weight: 500; }
.cmp tbody tr:last-child td:last-child { border-radius: 0 0 var(--r-xs) var(--r-xs); }
.cmp tbody tr:first-child td:last-child { border-radius: var(--r-xs) var(--r-xs) 0 0; }

/* ── Full-bleed statement ───────────────────────────────── */
.bleed {
  background: var(--ink); color: var(--surface); border-radius: var(--r-card);
  padding: 74px var(--pad-section); text-align: center;
}
.bleed__line {
  margin-inline: auto; max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 46px); line-height: 1.12;
  letter-spacing: -0.03em; font-weight: 700;
}
/* Was `.bleed p`, which outranked .bleed__k on specificity and rendered the
   kicker in 46px display type. Both are explicit classes now. */
.bleed .bleed__k {
  margin-top: 26px; font-family: var(--font-mono); font-size: 11px;
  font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   Responsive — the source artboard was fixed at min-width 1200px.
   ============================================================ */

@media (max-width: 1240px) {
  :root { --pad-section: 40px; }

  .nav { gap: 18px; padding: 14px 16px 14px 20px; }
  .nav__link { padding: 0 11px; font-size: 13px; }

  .hero { padding: 44px; gap: 40px; grid-template-columns: 1fr 1fr; }
  .split, .card.split { gap: 36px; }
  .industries, .faq { gap: 40px; }
  .contact { padding: 44px; gap: 40px; }

  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .engine { grid-template-columns: 260px 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 44px; }
  .footer__nav { gap: 30px 24px; }
}

@media (max-width: 1000px) {
  .nav__links, .nav__rule { display: none; }
  .burger { display: grid; }
  .nav { gap: 14px; }

  .megamenu__mobilenav {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--stone-100); border-radius: var(--r-sm); padding: 14px;
  }
  .megamenu__mobilenav a {
    display: flex; align-items: center;
    height: 44px; padding: 0 12px; border-radius: var(--r-3xs); font-size: 15px;
  }
  .megamenu__mobilenav a:hover { background: var(--stone-200); color: var(--red); }
  .megamenu { grid-template-columns: repeat(2, 1fr); padding: 20px; }

  .hero { grid-template-columns: 1fr; }
  .hero__media { --slot-h: 380px !important; }
  .hero__lede { max-width: none; }

  .split, .card.split, .section__head.split { grid-template-columns: 1fr; gap: 24px; align-items: start; }

  .trust { grid-template-columns: 1fr; gap: 24px; }
  .trust__grid { grid-template-columns: repeat(3, 1fr); }
  .clients { grid-template-columns: 1fr; gap: 18px; }

  .contrast { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  /* Stacked, there is nothing left to line up, so the reserved title
     and body lines would only read as a gap. */
  .pillar__title, .pillar__body { min-height: 0; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .cases, .quotes, .journal { grid-template-columns: 1fr; }
  .phases { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .industries { grid-template-columns: 1fr; }
  .industries__grid { grid-template-columns: repeat(2, 1fr); }
  .faq { grid-template-columns: 1fr; gap: 28px; }
  .contact, .contact--page { grid-template-columns: 1fr; }
  .contact__lede, .contact__points, .steps { max-width: none; }

  .engine { grid-template-columns: 1fr; }
  .engine__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: thin; }
  .etab { flex-shrink: 0; }

  .legal { grid-template-columns: 1fr; gap: 30px; }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .toc a { background: var(--stone-100); }
  .deep { grid-template-columns: 1fr; gap: 22px; }
  .cta { grid-template-columns: 1fr; gap: 30px; }

  /* Page-type layouts collapse to one column. */
  .doc, .bookpage { grid-template-columns: 1fr; gap: 34px; }
  .doc__rail, .bookaside { position: static; }
  .bookcover { aspect-ratio: 16 / 7; }
  .erow { grid-template-columns: 1fr; gap: 26px; }
  .erow__n { padding-top: 0; }
  .featured { grid-template-columns: 1fr; }
  .statbar { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .altrow { grid-template-columns: 90px minmax(0, 1fr); gap: 8px 24px; }
  .altrow__b { grid-column: 2; }

  .numitem { grid-template-columns: 60px 1fr; gap: 22px; }
  .numitem__go { grid-column: 2; justify-self: start; margin-top: 4px; }
  .phead__title { max-width: none; }
  .phead--split { grid-template-columns: 1fr; gap: 30px; }
  .statement__h { max-width: none; }
}

@media (max-width: 720px) {
  :root { --gap: 12px; --pad-section: 26px; --r-card: 20px; }

  .shell { padding: 12px; }
  .nav { top: 12px; padding: 12px; }
  .brand { padding: 7px; gap: 10px; }
  .brand__mark { height: 33px; }
  .brand__name { font-size: 18.5px; }
  .brand__tag { font-size: 9.5px; letter-spacing: 0.01em; }
  .nav__cta { display: none; }

  .topbar { flex-direction: column; align-items: stretch; }
  .topbar__note { font-size: 12px; padding: 0 16px; }
  .topbar__mail { justify-content: center; }

  .hero { padding: 26px; }
  .hero__media { --slot-h: 260px !important; }
  .hero__actions .btn { flex: 1; }

  .outcomes, .services, .phases, .team, .industries__grid { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .megamenu { grid-template-columns: 1fr; }

  .trust, .clients { padding: 24px; }
  .workhead { flex-direction: column; align-items: stretch; gap: 20px; padding: 26px; }
  .workhead .btn { align-self: flex-start; }
  .workhead--flush { padding: 0; }

  .panel, .pillar, .quote, .post { padding: 24px 22px; }
  .engine__stage { padding: 24px 22px; }
  .epanel__title { font-size: 22px; }
  .epanel__grid { grid-template-columns: 1fr; }

  .contact { padding: 26px; }
  .formcard { padding: 24px 22px; }
  .formcard--done { padding: 28px 22px; }

  .faq__q { font-size: 15.5px; gap: 14px; padding: 16px 12px; }
  .faq__a p { padding: 0 12px 16px; font-size: 15px; }

  .footer { padding: 26px 26px 22px; }
  .footer__top { gap: 34px; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }

  .pagehero { padding: 34px 26px 30px; }
  .pagehero__title { max-width: none; }
  .cta { padding: 34px 26px; }
  .cta__actions .btn { flex: 1; }
  .err { padding: 60px 26px 48px; }
  .err__actions .btn { flex: 1; }
  .prose h2 { margin-top: 36px; }

  .phead { padding: 34px 26px 30px; }
  .phead--article { padding: 34px 26px 26px; text-align: left; }
  .phead--article .crumbs { justify-content: flex-start; }
  .phead--doc { padding: 4px 0 26px; }
  .statement { padding: 44px 26px; }
  .erow { padding: 30px 26px; }
  .artsec, .hang > li { grid-template-columns: 1fr; gap: 10px; }
  .section > .hang { grid-template-columns: 1fr; gap: 0; }
  .section > .hang > li:nth-child(2) { border-top: 1px solid var(--stone-200); padding-top: 22px; }
  .artsec__n, .hang__n { padding-top: 0; }
  .pager { grid-template-columns: 1fr; }
  .pager--end { text-align: left; }
  .factbar { padding: 20px 22px; gap: 14px 26px; }
  .statbar { grid-template-columns: 1fr; gap: 20px; padding: 26px; }
  .timeline { grid-template-columns: 1fr; }
  .bleed { padding: 46px 26px; }
  .cmp th, .cmp td { padding: 12px 12px; font-size: 14px; }
  .cmp tbody th { width: 34%; }
  .phead__actions .btn { flex: 1; }
}
/* ============================================================
   The five-step path.

   One list (STEPS in tools/buildlib/shell.py), four renderings:
     .path       the vertical timeline on /services, top to bottom
     .minipath   the compact row on the homepage, and at the foot of
                 every service page with the current step outlined
     .herepath   the strip under each service page hero
     megamenu    the numbered list in the menu
   Step 01 is the only ink block anywhere in the path, because it is
   the front door. Step 05 is dashed and quieter, because it is the
   delivery layer under the other four rather than a peer of them.
   ============================================================ */

/* ── Vertical timeline (/services) ──────────────────────── */
.path { margin-top: 34px; }
.path__row {
  position: relative;
  display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 8px;
}
/* The rail. Each row draws its own segment, so the line runs unbroken
   from the first node to the last whatever height each row ends up. */
.path__row::before {
  content: ""; position: absolute; left: 13px; top: 0; bottom: 0;
  width: 2px; background: var(--stone-300);
}
.path__row--lead::before { top: 48px; background: var(--ink); }
/* The run into step 05 is dashed: the delivery layer, not the next box. */
.path__row--before-last::before { bottom: 64px; }
.path__row--before-last::after {
  content: ""; position: absolute; left: 13px; bottom: 0; height: 64px;
  border-left: 2px dashed var(--stone-400);
}
.path__row--last::before {
  bottom: auto; height: 40px; width: 0;
  background: none; border-left: 2px dashed var(--stone-400);
}

.path__node {
  position: absolute; left: 4px; top: 40px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink);
}
.path__row--lead .path__node { left: 0; top: 34px; width: 28px; height: 28px; background: var(--ink); }
.path__row--last .path__node { left: 6px; top: 40px; width: 16px; height: 16px; border: 2px dashed var(--stone-400); }

.path__marker { padding: 32px 0 0 52px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.path__n { font-family: var(--font-mono); font-size: 34px; line-height: 1; color: var(--stone-700); }
.path__row--lead .path__n { font-size: 42px; color: var(--ink); }
.path__row--last .path__n { font-size: 28px; color: var(--stone-600); }
.path__verb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
}
.path__row--last .path__verb { color: var(--stone-600); }

.path__tag, .minipath__tag, .herepath__tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--pill); background: var(--ink); color: var(--surface);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
}

.path__body { padding: 22px 0; }
.path__std {
  display: grid; grid-template-columns: 230px minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 36px; align-items: start;
  padding: 14px 0 18px; border-top: 1px solid var(--stone-200);
}
.path__name { font-family: var(--font-display); font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.path__head {
  font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.1; letter-spacing: -0.025em; font-weight: 800;
}
.path__head--sm { font-size: clamp(19px, 1.8vw, 23px); font-weight: 700; color: var(--stone-700); }
.path__line { font-size: 15.5px; line-height: 1.6; color: var(--stone-700); }
.path__more { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 500; }
.path__then {
  margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: 16px; line-height: 1.5; color: var(--stone-700);
}

/* Step 01, the front door. */
.path__lead {
  background: var(--ink); color: var(--surface); border-radius: var(--r-md);
  padding: 44px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px;
}
.path__lead .eyebrow { color: rgba(255, 255, 255, 0.6); }
.path__leadhead {
  margin-top: 16px; font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800;
}
.path__leadline { margin-top: 18px; max-width: 52ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.path__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.path__gets { border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: 36px; display: flex; flex-direction: column; }
.path__gets ul { margin-top: 10px; }
.path__gets li {
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.86);
}
.path__book {
  margin-top: 22px; display: flex; align-items: center; gap: 14px;
  font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.72);
}
.path__book:hover { color: var(--surface); }
.path__bookimg { width: 44px; height: auto; border-radius: 3px; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.path__book--sm { margin-top: 12px; font-size: 13px; color: var(--stone-700); }
.path__book--sm:hover { color: var(--red); }
.path__book--sm .path__bookimg { width: 30px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); }

/* Step 05, the delivery layer. Dashed, quieter type, no fill. */
.path__foot {
  border: 1.5px dashed var(--stone-300); border-radius: var(--r-md);
  padding: 28px 30px; display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; align-items: start;
}
.path__foot .path__name { color: var(--stone-700); }
.path__layer {
  display: inline-flex; align-items: center; margin-top: 10px; height: 22px; padding: 0 9px;
  border-radius: var(--pill); border: 1px solid var(--stone-300);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone-600);
}
.path__foot .chips { margin-top: 0; }
.path__foot .chip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--stone-200); }

/* ── Compact row (homepage, and the foot of each service page) ── */
.minipath {
  margin-top: 36px;
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr);
  gap: var(--gap);
}
.minipath__item { position: relative; padding-top: 30px; display: flex; flex-direction: column; }
.minipath__item::before {
  content: ""; position: absolute; top: 6px; left: 0; right: calc(-1 * var(--gap));
  height: 2px; background: var(--stone-300);
}
.minipath__item--lead::before { background: var(--ink); }
.minipath__item:nth-last-child(2)::before { height: 0; background: none; border-top: 2px dashed var(--stone-400); }
.minipath__item--last::before { display: none; }
.minipath__dot {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink);
}
.minipath__item--lead .minipath__dot { background: var(--ink); }
.minipath__item--last .minipath__dot { border: 2px dashed var(--stone-400); }

.minipath__card { flex-grow: 1; display: flex; flex-direction: column; gap: 9px; }
a.minipath__card:hover { color: inherit; }
a.minipath__card:hover .minipath__name { color: var(--red); }
.minipath__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600); }
.minipath__name { font-family: var(--font-display); font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.minipath__line { font-size: 14.5px; line-height: 1.55; color: var(--stone-700); }
.minipath__more { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 500; }
.minipath__tag { align-self: flex-start; }
.minipath__tag--onInk { background: var(--surface); color: var(--ink); }

.minipath__item--lead .minipath__card { background: var(--ink); color: var(--surface); border-radius: var(--r-sm); padding: 26px; }
.minipath__item--lead .minipath__k { color: rgba(255, 255, 255, 0.6); }
.minipath__item--lead .minipath__line { color: rgba(255, 255, 255, 0.72); }
.minipath__item--lead .btn { margin-top: auto; align-self: flex-start; }
.minipath__item--last .minipath__card { border: 1.5px dashed var(--stone-300); border-radius: var(--r-sm); padding: 18px; }
.minipath__item--last .minipath__name { font-size: 16px; color: var(--stone-700); }

/* At the foot of a service page every step is a box, and the one you are
   on is outlined in ink rather than filled. */
.minipath--boxed .minipath__item:not(.minipath__item--lead):not(.minipath__item--last) .minipath__card {
  background: var(--stone-100); border-radius: var(--r-sm); padding: 20px;
  transition: background-color 0.16s ease;
}
.minipath--boxed .minipath__item:not(.minipath__item--lead):not(.minipath__item--last) a.minipath__card:hover { background: var(--stone-200); }
.minipath__item.is-current .minipath__card {
  background: var(--surface) !important; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-sm); padding: 20px;
}
.minipath__item.is-current .minipath__k { color: var(--stone-600); }

/* ── You-are-here strip ─────────────────────────────────── */
.herepath {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 18px var(--pad-section);
}
.herepath__list { display: flex; align-items: center; }
.herepath__step { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.herepath__step:first-child { flex: 0 0 auto; }
.herepath__step + .herepath__step::before {
  content: ""; flex: 1 1 auto; min-width: 18px; height: 1px;
  background: var(--stone-300); margin-right: 4px;
}
.herepath__step--last::before { background: none !important; height: 0 !important; border-top: 1px dashed var(--stone-400); }
.herepath__step a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--stone-700); white-space: nowrap;
}
.herepath__step a:hover { color: var(--red); }
.herepath__dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); flex-shrink: 0; }
.herepath__n { font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }
.herepath__step.is-current a { color: var(--ink); font-weight: 600; }
.herepath__step.is-current .herepath__dot { width: 13px; height: 13px; background: var(--ink); }
.herepath__step--last a { color: var(--stone-600); }
.herepath__step--last .herepath__dot { border-style: dashed; border-color: var(--stone-400); }
.herepath__next { max-width: 330px; font-size: 13.5px; line-height: 1.5; color: var(--stone-700); text-align: right; }
.herepath__next a { color: var(--ink); font-weight: 500; }
.herepath__next a:hover { color: var(--red); }

/* ============================================================
   Service page sections. Each kind in tools/buildlib/steps.py
   that the site did not already have a layout for.
   ============================================================ */
.section__intro { margin-top: 16px; }
.split--top { align-items: start; }
.hang--flush { margin-top: 0; }
.hang--flush > li:first-child { border-top: 0; padding-top: 4px; }
.area__label { margin-bottom: 12px; }
.area__rows { margin-top: 0; }
.cmpwrap { overflow-x: auto; }
.timeline--3 { grid-template-columns: repeat(3, 1fr); }

/* Headlines that are Mark's own lines run long; they get a wider measure. */
.phead__title--wide { max-width: 20ch; }
.phead__title--step { max-width: 17ch; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.02; }

/* The book, credited under the hero and pictured beside it. */
.phead__byline {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; gap: 14px;
  font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.72);
}
.phead__byline:hover { color: var(--surface); }
.phead__bylineimg { width: 40px; height: auto; border-radius: 3px; flex-shrink: 0; }
.phead__cover { justify-self: center; width: 100%; max-width: 300px; }
.phead__coverimg { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }

/* ── Figures: sourced numbers on a rule ─────────────────── */
.figures__copy { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--stone-700); }
.figures { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.figures > div { border-top: 2px solid var(--ink); padding-top: 20px; }
.figures dt {
  font-family: var(--font-display); font-size: clamp(42px, 4.6vw, 64px);
  line-height: 1; letter-spacing: -0.035em; font-weight: 800;
}
.figures dd { margin-top: 12px; max-width: 36ch; font-size: 15.5px; line-height: 1.55; }
.figures__src {
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--stone-600);
}
.figures__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.figures__src a:hover { color: var(--ink, #000); }

/* ── Boxes: tinted cards, three or four up ──────────────── */
.boxes { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-xs); }
.boxes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.box { background: var(--stone-100); border-radius: var(--r-sm); padding: 30px 28px 26px; display: flex; flex-direction: column; }
.box__n { margin-bottom: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--stone-600); }
.box__label {
  margin-bottom: 16px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600);
}
.box__t { font-family: var(--font-display); font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.box__b { margin-top: 10px; padding-bottom: 20px; font-size: 15px; line-height: 1.6; color: var(--stone-700); }
/* The one box that is the answer rather than one of the options. */
.box--ink { background: var(--ink); color: var(--surface); }
.box--ink .box__b { color: rgba(255, 255, 255, 0.72); }
.box__foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--stone-300);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--stone-600);
}

/* ── Questions to the reader ────────────────────────────── */
.qrows { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; }
.qrows__intro { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--stone-700); }
.qrows__list > li {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px;
  padding: 26px 0; border-top: 1px solid var(--stone-200);
}
.qrows__list > li:last-child { border-bottom: 1px solid var(--stone-200); }
.qrows__k { padding-top: 7px; font-family: var(--font-mono); font-size: 13px; color: var(--stone-600); }
.qrows__q { font-family: var(--font-display); font-size: clamp(20px, 2.1vw, 27px); line-height: 1.22; letter-spacing: -0.02em; font-weight: 700; }
.qrows__turn {
  margin-top: 30px; max-width: 30ch;
  font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.18; letter-spacing: -0.025em; font-weight: 800;
}

/* ── The book, featured ─────────────────────────────────── */
.bookfeat { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px; align-items: center; }
.bookfeat__cover { display: block; }
.bookfeat__img {
  width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}
.bookfeat__cover:hover .bookfeat__img { transform: translateY(-3px); }
.bookfeat__copy .h2 { margin-top: 16px; max-width: 26ch; }
.bookfeat__body { margin-top: 18px; max-width: 62ch; font-size: 17px; line-height: 1.62; color: var(--stone-700); }
.bookfeat__quote {
  margin-top: 26px; max-width: 62ch; padding: 22px 0;
  border-top: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200);
}
.bookfeat__quote blockquote {
  font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.4; letter-spacing: -0.01em; font-weight: 700;
}
.bookfeat__quote figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }
.bookfeat__facts { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--stone-600); }
.bookfeat__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Mark, beside what can be checked ───────────────────── */
.personfeat { align-items: center; }
.personfeat__facts { margin-top: 24px; max-width: 560px; }
.personfeat__note { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--stone-600); }
/* The portrait is taller than every slot it sits in; keep the face in frame. */
.slot--portrait img { object-position: 50% 18%; }

/* ── The framework tabs on the homepage ─────────────────── */
.epanel__k {
  display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600);
}
.epanel__more { display: inline-block; margin-top: 22px; font-size: 14px; font-weight: 500; }

/* ── Menu: the numbered steps and the front door ────────── */
.megamenu__list a { height: auto; min-height: 38px; padding: 8px 12px; line-height: 1.3; }
.megamenu__n { margin-right: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }
.megamenu__col--lead { background: var(--ink); color: var(--surface); display: flex; flex-direction: column; }
.megamenu__col--lead .eyebrow { color: rgba(255, 255, 255, 0.6); }
.megamenu__lead {
  margin: 12px 0 20px; font-family: var(--font-display); font-size: 21px;
  line-height: 1.18; letter-spacing: -0.02em; font-weight: 700;
}
.megamenu__col--lead .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1240px) {
  .boxes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path__std { grid-template-columns: 200px minmax(0, 1fr); }
  .path__std > :last-child { grid-column: 2; }
  .path__foot { grid-template-columns: 1fr 1fr; }
  .path__foot .chips { grid-column: 1 / -1; }
  .minipath { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .minipath__item--lead { grid-column: 1 / -1; }
  .minipath__item::before { display: none; }
  .herepath { grid-template-columns: 1fr; gap: 14px; }
  .herepath__next { max-width: none; text-align: left; }
}

@media (max-width: 1000px) {
  .path__row { grid-template-columns: 116px minmax(0, 1fr); }
  .path__marker { padding-left: 46px; }
  .path__tag { display: none; }
  .path__n, .path__row--lead .path__n { font-size: 26px; }
  .path__lead { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .path__gets { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 22px; }
  .path__std { grid-template-columns: 1fr; gap: 12px; }
  .path__std > :last-child { grid-column: auto; }
  .path__foot { grid-template-columns: 1fr; gap: 18px; }
  .boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qrows { grid-template-columns: 1fr; gap: 20px; }
  .bookfeat { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; }
  .timeline--3 { grid-template-columns: 1fr; gap: 26px 0; }
  .minipath { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phead__cover { justify-self: start; max-width: 220px; }
  .herepath__list { flex-wrap: wrap; gap: 10px 18px; }
  .herepath__step, .herepath__step:first-child { flex: 0 0 auto; }
  .herepath__step + .herepath__step::before { display: none; }
}

@media (max-width: 720px) {
  /* On a phone the rail goes and each step is a card with its number on
     top: the order carries the sequence, and there is no room for both. */
  .path__row { grid-template-columns: 1fr; }
  .path__row::before, .path__row::after, .path__node { display: none; }
  .path__marker { padding: 22px 0 0; flex-direction: row; align-items: center; gap: 10px; }
  .path__tag { display: inline-flex; }
  .path__body { padding: 12px 0 8px; }
  .path__lead { padding: 26px 22px; }
  .path__std { border-top: 0; padding-top: 0; }
  .path__foot { padding: 22px; }
  .boxes, .boxes--4 { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr; gap: 22px; }
  .bookfeat { grid-template-columns: 1fr; gap: 26px; }
  .bookfeat__cover { max-width: 180px; }
  .minipath { grid-template-columns: 1fr; }
  .qrows__list > li { grid-template-columns: 40px minmax(0, 1fr); }
  .herepath { padding: 16px 20px; }
  .personfeat .slot { --slot-h: 380px !important; }
  /* Three columns of sentences do not fit a phone; the instinct can go. */
  .cmp--drop2 th:nth-child(2), .cmp--drop2 td:nth-child(2) { display: none; }
}


/* ============================================================
   One hero height for every page.

   Home, /services, the five service pages, about, the book, contact and
   the legal pages all open on a hero of the same height on desktop, so
   moving between them does not jump. Below 1000px the columns stack and
   the height follows the content.
   ============================================================ */
:root { --hero-h: 720px; }

@media (min-width: 1001px) {
  .hero, .phead { min-height: var(--hero-h); }
  /* Artwork fills the hero instead of floating in it. 112px is the
     hero's own top and bottom padding. */
  .hero .hero__media,
  .phead--split .phead__art { --slot-h: calc(var(--hero-h) - 112px) !important; }
}

/* ── The hero form ─────────────────────────────────────── */
/* On /services, every service page and /contact the right half of the
   hero is the inquiry form, so a visitor can act the moment they land. */
.phead--form { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 56px; align-items: center; }
.phead__form { scroll-margin-top: 110px; }
.formcard--hero { padding: 26px 26px 22px; border-radius: var(--r-md); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }
.formcard__title {
  margin-top: 10px; font-family: var(--font-display); font-size: 21px;
  line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: var(--ink);
}
.formcard--hero .field { margin-top: 10px; }
.formcard--hero .field--first { margin-top: 16px; }
.formcard--hero .field input, .formcard--hero .field select, .formcard--hero .cselect__btn { height: 44px; }
.formcard--hero .field textarea { height: 74px; }
.formcard--hero .btn--block { margin-top: 12px; height: 48px; }
.formcard--hero .form__fine { margin-top: 10px; font-size: 12px; }
.formcard--hero.formcard--done { min-height: 420px; }

/* On a paper hero the card is tinted and the fields go white. */
.phead--light .formcard { background: var(--stone-100); box-shadow: none; }
.phead--light .field input, .phead--light .field select, .phead--light .field textarea,
.phead--light .cselect__btn { background: var(--surface); }
.phead--light .phead__byline { border-top-color: var(--stone-200); color: var(--stone-700); }

/* ============================================================
   Section layouts, part two.

   The same kind of content takes a different shape on different pages
   (see `style` in tools/buildlib/steps.py), so a page is a sequence of
   distinct bands rather than one card layout repeated.
   ============================================================ */

/* ── Dark sections ──────────────────────────────────────── */
.section--ink { background: var(--ink); color: var(--surface); }
.section--ink .eyebrow { color: rgba(255, 255, 255, 0.6); }
.section--ink .split__body,
.section--ink .qrows__intro { color: rgba(255, 255, 255, 0.72); }
.section--ink .box { background: rgba(255, 255, 255, 0.08); }
.section--ink .box__b { color: rgba(255, 255, 255, 0.72); }
.section--ink .box__n,
.section--ink .box__foot { color: rgba(255, 255, 255, 0.55); border-top-color: rgba(255, 255, 255, 0.16); }
.section--ink .qrows__list > li { border-color: rgba(255, 255, 255, 0.16); }
.section--ink .qrows__k { color: rgba(255, 255, 255, 0.5); }

/* ── Facts on ink ───────────────────────────────────────── */
.statbar--ink { background: var(--ink); color: var(--surface); }
.statbar--ink > div { border-left-color: rgba(255, 255, 255, 0.45); }
.statbar--ink dd { color: rgba(255, 255, 255, 0.66); }

/* ── Statement: the line beside its paragraph, no empty half ── */
.statement--split {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 64px; align-items: end;
}
.statement--split .statement__h { max-width: 20ch; }
.statement--split .statement__after { margin-top: 0; max-width: 56ch; }

/* ── Boxes: ruled columns with oversized numerals ───────── */
.boxes--rules { gap: 0; }
.boxes--rules .box {
  background: none; border-radius: 0; padding: 4px 30px 6px;
  border-left: 1px solid var(--stone-200);
}
.boxes--rules .box:first-child { border-left: 0; padding-left: 0; }
.boxes--rules .box:last-child { padding-right: 0; }
.boxes--rules .box__n {
  margin-bottom: 26px; font-family: var(--font-display);
  font-size: clamp(44px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.04em;
  font-weight: 800; color: var(--ink);
}
.boxes--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── Boxes: bento, the answer tall and dark beside the options ── */
.boxes--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.boxes--bento .box { grid-column: 1; }
.boxes--bento .box:last-child {
  grid-column: 2; grid-row: 1 / span 3;
  background: var(--ink); color: var(--surface);
  justify-content: flex-end; padding: 40px;
}
.boxes--bento .box:last-child .box__t { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; font-weight: 800; }
.boxes--bento .box:last-child .box__b { max-width: 40ch; font-size: 17px; color: rgba(255, 255, 255, 0.72); }
.boxes--bento .box:last-child .box__foot { margin-top: 6px; color: rgba(255, 255, 255, 0.55); border-top-color: rgba(255, 255, 255, 0.16); }

/* ── Timeline: a rail down the right, the heading held on the left ── */
.stickyhead { position: sticky; top: 110px; }
.vsteps > li {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px; padding-bottom: 38px;
}
.vsteps > li:last-child { padding-bottom: 0; }
.vsteps > li::before {
  content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px;
  width: 2px; background: var(--stone-200);
}
.vsteps > li:last-child::before { display: none; }
.vsteps__n {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink);
  display: grid; place-items: center; background: var(--surface);
  font-family: var(--font-mono); font-size: 13px;
}
.vsteps > li:first-child .vsteps__n { background: var(--ink); color: var(--surface); }
.vsteps__k {
  padding-top: 4px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600);
}
.vsteps__t {
  margin-top: 8px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1; letter-spacing: -0.025em; font-weight: 800;
}
.vsteps__b { margin-top: 10px; max-width: 54ch; font-size: 16px; line-height: 1.6; color: var(--stone-700); }

/* ── Timeline: cards joined by arrows ───────────────────── */
.flow { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow__item { position: relative; background: var(--stone-100); border-radius: var(--r-sm); padding: 26px 24px 28px; }
.flow__item:first-child { background: var(--ink); color: var(--surface); }
.flow__item:not(:last-child)::after {
  content: "\2192"; position: absolute; top: 26px; right: -24px; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 1px var(--stone-300);
  display: grid; place-items: center; font-size: 13px; color: var(--ink);
}
.flow__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600); }
.flow__item:first-child .flow__k { color: rgba(255, 255, 255, 0.6); }
.flow__t { margin-top: 26px; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; font-weight: 700; }
.flow__b { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--stone-700); }
.flow__item:first-child .flow__b { color: rgba(255, 255, 255, 0.72); }

/* ── Deliver: a checklist in a tinted panel ─────────────── */
.checks { background: var(--stone-100); border-radius: var(--r-md); padding: 8px 30px; }
.checks li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--stone-200);
}
.checks li:first-child { border-top: 0; }
.checks__icon { width: 24px; height: 24px; margin-top: 1px; fill: var(--ink); }
.checks__t { font-size: 16.5px; font-weight: 600; }
.checks__b { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--stone-700); }

/* ── Versus panels: the row label rides on each line ────── */
.row__k {
  display: block; margin-bottom: 5px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600);
}
.row--onInk .row__k { color: rgba(255, 255, 255, 0.55); }

/* ── Area: heading across, argument beside a numbered grid ── */
.area__cols {
  margin-top: 30px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px; align-items: start;
}
.area__lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--stone-700); }
.pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pills li {
  display: flex; align-items: baseline; gap: 12px; padding: 16px 18px;
  border: 1px solid var(--stone-200); border-radius: var(--r-xs);
  font-size: 15px; line-height: 1.4;
}
.pills__n { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--stone-600); }

/* ── Area: the list first, the argument second ──────────── */
.split--reverse { grid-template-areas: "list copy"; }
.split--reverse > .area__copy { grid-area: copy; }
.split--reverse > .area__list { grid-area: list; }

/* The compact path at in-between widths: the front door across the top and
   the other four in one row beneath it, so no row ends on an empty cell. */
@media (max-width: 1240px) {
  .minipath { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .minipath__item--lead { grid-column: 1 / -1; }
  .boxes--5 { grid-template-columns: 1fr; }
  .boxes--5.boxes--rules .box { border-left: 0; border-top: 1px solid var(--stone-200); padding: 24px 0; }
  .boxes--5.boxes--rules .box:first-child { border-top: 0; padding-top: 0; }
  .boxes--5.boxes--rules .box__n { margin-bottom: 14px; }
}

@media (max-width: 1000px) {
  .phead--form { grid-template-columns: 1fr; }
  .statement--split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .boxes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .boxes--rules { grid-template-columns: 1fr; }
  .boxes--rules .box { border-left: 0; border-top: 1px solid var(--stone-200); padding: 24px 0; }
  .boxes--rules .box:first-child { border-top: 0; padding-top: 0; }
  .boxes--rules .box__n { margin-bottom: 14px; }
  .boxes--bento { grid-template-columns: 1fr; }
  .boxes--bento .box, .boxes--bento .box:last-child { grid-column: auto; grid-row: auto; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow:not(.flow--3) .flow__item::after { display: none; }
  .area__cols { grid-template-columns: 1fr; gap: 24px; }
  .split--reverse { grid-template-areas: "copy" "list"; }
  .stickyhead { position: static; }
  .minipath { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .boxes--3 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .flow, .flow--3 { grid-template-columns: 1fr; }
  .flow__item::after { display: none; }
  .pills { grid-template-columns: 1fr; }
  .checks { padding: 4px 20px; }
  .vsteps > li { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .boxes--bento .box:last-child { padding: 28px 24px; }
  .formcard--hero { padding: 22px 20px; }
  .minipath { grid-template-columns: 1fr; }
}

/* The form card sits inside an ink hero, but it is white: its eyebrow keeps
   the normal grey rather than the on-ink one. */
.phead--ink .formcard .eyebrow { color: var(--stone-600); }

/* Every hero splits 45 / 10 / 45 on desktop: the heading and lede in the
   left 45%, the form (or artwork, or cover) in the right 45%, and a clear
   10% between them so the two never crowd each other. Declared last so it
   wins over the earlier column rules for .hero, .phead--split and
   .phead--form. Below 1000px the columns stack as before. */
@media (min-width: 1001px) {
  .hero, .phead--split, .phead--form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10%;
  }
}
@media (min-width: 1001px) {
  /* The cover gets more of its half, still short of the 720px hero. */
  .phead__cover { max-width: 360px; }
}

/* ── Mark's portrait sections ───────────────────────────────
   The photo is 3:4. In a half-width, short frame it crops to a face; in a
   narrower, taller one it shows him. So wherever the portrait sits (the
   homepage founder card, the service pages, /about, /book) the photo takes
   5/12 of the width and the copy the rest. */
@media (min-width: 1001px) {
  .founderfeat, .personfeat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.founderfeat { align-items: center; }
.founderfeat .h2 { margin-top: 14px; }
.founderfeat__lede {
  margin-top: 18px; max-width: 58ch;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink);
}
.founderfeat__body { margin-top: 14px; max-width: 64ch; font-size: 16.5px; line-height: 1.64; color: var(--stone-700); }
.founderfeat__facts {
  margin-top: 24px; max-width: 660px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px;
}
.founderfeat__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1000px) {
  .founderfeat .slot, .personfeat .slot { --slot-h: 480px !important; }
}
@media (max-width: 720px) {
  .founderfeat__facts { grid-template-columns: 1fr; }
  .founderfeat .slot, .personfeat .slot { --slot-h: 400px !important; }
  .founderfeat__actions .btn { flex: 1; }
}

/* ── Phones, foldables, tablets and touch screens ───────────
   Added 2026-09-25 after tools/devices.py ran every page on 26 device
   sizes, from the 280px cover screen of the first Galaxy Fold to a 13-inch
   iPad in landscape. Rerun it after any layout change. */

/* Text stays the size set here, even when an iPhone turns to landscape. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* A grid column never grows past the screen because of what sits in it.
   Form fields report an intrinsic width of about twenty characters, and on
   the narrowest screens that alone pushed whole sections sideways. */
.hero > *, .split > *, .phead--split > *, .contact > *,
.phead__copy, .phead__form, .formcard { min-width: 0; }

/* Size the menu to the screen that is visible, not the one under the
   browser's toolbar. */
@supports (height: 100dvh) {
  .megamenu { max-height: calc(100dvh - 150px); }
}

@media (pointer: coarse), (max-width: 1000px) {
  /* iPhone Safari zooms the whole page on focusing any field under 16px. */
  .field input, .field select, .field textarea, .cselect__btn, .cselect__opt { font-size: 16px; }

  /* Tap targets. Links in lists get a full 44px row. Small links set in a
     line of text get a padded hit area with a matching negative margin, so
     they are easier to hit and the layout does not move. */
  .footer__col { gap: 0; }
  .footer__col .eyebrow { margin-bottom: 4px; }
  .footer__col a, .footer__legallinks a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__legallinks { gap: 0 22px; }
  .crumbs a { padding: 14px 6px; margin: -14px -6px; }
  .herepath__step a,
  .path__more, .epanel__more, .minipath__more, .outcome__more, .feature__more, .post__more {
    padding-block: 13px; margin-block: -13px;
  }
  .toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
  .cmp td a { padding-block: 12px; }
}

/* Mono labels and captions are drawn at 10 to 11px for the desktop look.
   On a phone or a tablet that is below comfortable reading size, so they
   meet 12px there. The logo's tagline keeps its size: it is artwork. */
@media (max-width: 720px), (pointer: coarse) {
  .eyebrow, .badge, .badge--white, .pill, .quote__role, .person__role, .post__more,
  .footer__legal p, .footer__legallinks a, .crumbs, .phead__meta, .numitem__meta,
  .railfacts dt, .pager__k, .feature__more, .pullquote figcaption, .factbar dt,
  .bookcover__a, .timeline__k, .altrow__k, .cmp thead th, .bleed .bleed__k, .path__verb,
  .path__tag, .minipath__tag, .herepath__tag, .path__layer, .minipath__k, .herepath__n,
  .figures__src, .box__label, .box__foot, .bookfeat__quote figcaption, .bookfeat__facts,
  .epanel__k, .megamenu__n, .vsteps__k, .flow__k, .row__k, .pills__n { font-size: 12px; }
}

/* The about page comparison: three columns do not fit a phone, so each row
   becomes a small card, its label on top and the two answers side by side. */
@media (max-width: 560px) {
  /* thead too: left as a table group it shrinks to its labels, so short
     column names no longer sit over their columns. */
  .cmp:not(.cmp--drop2), .cmp:not(.cmp--drop2) thead, .cmp:not(.cmp--drop2) tbody { display: block; }
  .cmp:not(.cmp--drop2) thead tr,
  .cmp:not(.cmp--drop2) tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .cmp:not(.cmp--drop2) thead th:first-child { display: none; }
  .cmp:not(.cmp--drop2) tbody tr { padding: 4px 0 10px; }
  .cmp:not(.cmp--drop2) tbody th { grid-column: 1 / -1; width: auto; padding: 14px 12px 6px; }
  .cmp:not(.cmp--drop2) tbody tr:first-child td:last-child,
  .cmp:not(.cmp--drop2) tbody tr:last-child td:last-child { border-radius: 0; }
  .cmp:not(.cmp--drop2) td:last-child { border-radius: var(--r-3xs); }
}

/* The path of five steps reads as one column once two no longer fit, and
   the dropdown's text wraps to a second line rather than being cut off. */
@media (max-width: 480px) {
  .minipath { grid-template-columns: minmax(0, 1fr); }
  .cselect__btn, .formcard--hero .cselect__btn {
    height: auto; min-height: 50px; padding-top: 13px; padding-bottom: 13px; line-height: 1.35;
  }
  .formcard--hero .cselect__btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .cselect__value { white-space: normal; overflow: visible; }
}

/* The smallest screens: the first Galaxy Fold's cover (280px) and other
   phones under 360px. Tighter padding, headlines a size down, buttons may
   wrap to two lines, and the logo drops its tagline so the menu fits. */
@media (max-width: 359px) {
  :root { --pad-section: 20px; }
  .shell { padding: 8px; }
  .nav { padding: 10px; gap: 8px; }
  .brand { padding: 6px; }
  .brand__tag { display: none; }
  .burger { flex-shrink: 0; }
  .hero, .contact, .phead { padding-left: 20px; padding-right: 20px; }
  .formcard, .formcard--hero { padding: 20px 16px; }
  .hero__title { font-size: 34px; }
  .phead__title, .phead__title--step { font-size: 32px; }
  .h2 { font-size: 26px; }
  .btn, .btn--lg, .btn--sm {
    height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px;
    white-space: normal; text-align: center; line-height: 1.25;
  }
  .altrow { grid-template-columns: minmax(0, 1fr); }
  .altrow__b { grid-column: 1; }
}

/* Phones in landscape have about 375px of height, and a header that
   stays put would hold a quarter of it. There it slides away while you
   read down the page and comes back as soon as you scroll up (main.js). */
@media (max-height: 500px) and (orientation: landscape) {
  .navwrap { transition: transform 0.22s ease; }
  .navwrap.is-tucked { transform: translateY(calc(-100% - var(--gap) - 6px)); }
}
@media (max-height: 500px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {
  .navwrap { transition: none; }
}

/* The top bar. Two stacked pills before the header cost a small phone a
   sixth of its first screen, so under 481px only the announcement stays
   (the address is still in the footer and on /contact). From 481px, a
   folding phone opened or a phone in landscape, both sit on one row. */
@media (min-width: 481px) and (max-width: 720px) {
  .topbar { flex-direction: row; align-items: center; }
  .topbar__note { height: auto; min-height: 44px; padding: 6px 16px; line-height: 1.35; }
}
@media (max-width: 480px) {
  .topbar__mail { display: none; }
  .topbar__note { height: auto; min-height: 40px; padding: 8px 16px; line-height: 1.35; }

  /* Buttons in a row stack full width, so a label never folds onto three lines. */
  .hero__actions, .cta__actions, .err__actions, .phead__actions, .founderfeat__actions {
    flex-direction: column; align-items: stretch;
  }
  .hero__actions .btn, .cta__actions .btn, .err__actions .btn,
  .phead__actions .btn, .founderfeat__actions .btn { width: 100%; flex: none; }
}