/* Trace Technical, bespoke site kit. 17 September 2026.
   One stylesheet for the rebuilt pages. Colours are Parloa's live values, accepted
   by Glen as a starting point. Font is Onest. Nothing here depends on tokens.css,
   components.css or theme.css. */

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

:root {
  --ink: #1F1C1B;
  --ink-2: #2D2724;
  --cream: #EBE9E1;
  --cream-2: #F5F4F0;
  --white: #FFFFFF;
  --edge: #D9D6CE;
  --text: #1F1C1B;
  --muted: #665953;
  --muted-2: #80736B;
  --on-ink: #FFFFFF;
  --on-ink-2: #C7C1B7;
  --on-ink-3: #A69B92;

  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --h1: clamp(2.5rem, 4.3vw, 3.875rem);
  --h2: clamp(1.875rem, 2.8vw, 2.5rem);
  --h3: 1.25rem;
  --lede: 1.125rem;
  --body: 1rem;
  --small: 0.875rem;
  --label: 0.8125rem;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 7vw, 6.5rem);
  --r-control: 4px;
  --r-panel: 8px;
  --shadow: 0 18px 40px rgba(31, 28, 27, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4, p, figure { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--ink); color: var(--white); }

.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 300;
  padding: 0.625rem 1rem; background: var(--white); color: var(--ink);
  font-size: var(--small);
}
.skip-link:focus { top: 1rem; }
.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; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Surfaces. Each section says what it sits on. */
.on-ink { background: var(--ink); color: var(--on-ink); }
.on-cream { background: var(--cream); color: var(--text); }
.on-cream-2 { background: var(--cream-2); color: var(--text); }
.on-white { background: var(--white); color: var(--text); }
.muted { color: var(--muted); }
.on-ink .muted { color: var(--on-ink-2); }

/* Type */
h1 { font-size: var(--h1); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: var(--h2); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
h3 { font-size: var(--h3); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.lede { font-size: var(--lede); line-height: 1.55; max-width: 58ch; }
.on-ink .lede { color: var(--on-ink-2); }
.small { font-size: var(--small); }

/* Eyebrow */
.eyebrow {
  display: inline-block;
  font-size: var(--label);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--r-control);
  /* Filled chip (Glen, 23 September 2026, from Parloa): white on light
     sections, raised brown on ink. */
  background: var(--white);
  color: var(--text);
}
.on-ink .eyebrow { color: var(--on-ink); background: #4A403B; }
.on-white .eyebrow { background: var(--cream); }

/* Buttons and quiet links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 2.75rem; padding: 0.625rem 1.125rem;
  border: 0; border-radius: var(--r-control);
  font-size: var(--small); font-weight: 500; line-height: 1.2;
  cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--ink-2); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--cream-2); }
.btn:active { transform: translateY(1px); }

.link-quiet {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--small); font-weight: 500; color: var(--muted);
  transition: color 0.16s ease;
}
.link-quiet::after { content: ""; width: 1rem; height: 1px; background: currentColor; transition: width 0.16s ease; }
.link-quiet:hover { color: var(--text); }
.link-quiet:hover::after { width: 1.5rem; }
.on-ink .link-quiet { color: var(--on-ink-2); }
.on-ink .link-quiet:hover { color: var(--on-ink); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

/* Buttons tightened (Glen, 23 September 2026: "way too padded"). */

/* Card */
.card {
  background: var(--white); color: var(--text);
  border-radius: var(--r-panel); padding: 2rem;
}
.on-ink .card { background: var(--ink-2); color: var(--on-ink); }

/* Sections */
.section { padding-block: var(--section); }
.section__head { max-width: 46rem; margin-bottom: 3rem; }
.section__head .eyebrow { margin-bottom: 1.25rem; }
.section__head .lede { margin-top: 1rem; }

/* ---------- Navigation (ink) ---------- */
.nav { position: sticky; top: 0; z-index: 100; background: var(--ink); color: var(--on-ink); }
.nav__in { display: flex; align-items: center; gap: 2.5rem; min-height: 4.5rem; }
.nav__brand { display: inline-flex; align-items: center; flex: none; }
.nav__brand img { height: 1.125rem; width: auto; }
/* Sketch mark, 19 September 2026. Masked rather than an <img>, so it inherits
   the nav's colour and one file serves every ground. The drawing's viewBox is
   804 x 655, so width is height x 1.227. Sized larger than the old wordmark's
   cap height because a lone mark needs presence where a 180px word did not. */
.nav__mark {
  display: block;
  height: 2.5rem;
  width: 3.07rem; /* 40px high, up from 30px (Glen, 23 September 2026: make the icon bigger) */
  background-color: currentColor;
  -webkit-mask: url("/assets/logo/trace-sketch-mark.svg") no-repeat center / contain;
  mask: url("/assets/logo/trace-sketch-mark.svg") no-repeat center / contain;
}
.nav__links { display: flex; align-items: center; gap: 0.25rem; margin-inline: auto; }
.nav__item { position: relative; }
.nav__item > a, .nav__item > span {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.625rem 0.875rem; border-radius: var(--r-control);
  font-size: var(--small); font-weight: 500; color: var(--on-ink-2); cursor: default;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.nav__item > a { cursor: pointer; }
.nav__item:hover > a, .nav__item:hover > span, .nav__item:focus-within > a, .nav__item:focus-within > span,
.nav__item > a[aria-current="page"] { color: var(--on-ink); }
.nav__chev { width: 0.625rem; height: 0.625rem; opacity: 0.7; }
.nav__panel {
  position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 16rem;
  padding: 0.5rem; background: var(--white); color: var(--text);
  border-radius: var(--r-panel); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav__panel a {
  display: block; padding: 0.625rem 0.75rem; border-radius: var(--r-control);
  font-size: var(--small); font-weight: 500;
}
.nav__panel a:hover { background: var(--cream-2); }
.nav__cta { flex: none; }

.nav__mobile { display: none; margin-left: auto; }
.nav__mobile summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.34); border-radius: var(--r-control);
}
.nav__mobile summary::-webkit-details-marker { display: none; }
.nav__burger { position: relative; display: block; width: 1.125rem; height: 0.75rem; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: var(--on-ink);
  transition: transform 0.22s ease, opacity 0.16s ease, top 0.22s ease;
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: calc(50% - 1px); }
.nav__burger span:nth-child(3) { top: calc(100% - 2px); }
.nav__mobile[open] .nav__burger span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.nav__mobile[open] .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__mobile[open] .nav__burger span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav__burger span { transition: none; } }
.nav__mobile-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 1rem var(--gutter) 1.5rem; background: var(--ink);
  display: grid; gap: 0.25rem; box-shadow: var(--shadow);
}
.nav__mobile-panel a { display: block; padding: 0.625rem 0; font-size: 1rem; font-weight: 500; color: var(--on-ink); }
.nav__mobile-panel .nav__group { padding: 0.5rem 0 0.25rem; font-size: var(--label); color: var(--on-ink-3); }
.nav__mobile-panel a.btn {
  display: inline-flex; justify-self: stretch; margin-top: 1rem;
  min-height: 3rem; padding: 0.8125rem 1.375rem; font-size: var(--small); color: var(--ink);
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__mobile { display: block; }
}

/* ---------- Hero (ink) ---------- */
.hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6.5rem); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.hero__copy { max-width: 42rem; }
.hero__copy .eyebrow { margin-bottom: 1.75rem; }
.hero__copy h1 { margin-bottom: 1.5rem; }
.hero__copy .lede { margin-bottom: 2.25rem; }
.hero__media {
  padding: 0.875rem; background: var(--ink-2); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.hero__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  border-radius: var(--r-panel); background: var(--cream);
}
.hero__caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.875rem 0.25rem 0.125rem;
  font-size: var(--label); color: var(--on-ink-2);
}
.hero__caption strong { font-weight: 500; color: var(--on-ink); }
.hero__role { color: var(--on-ink-3); }
.hero__linkedin {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; color: var(--on-ink); transition: color 0.16s ease;
}
.hero__linkedin svg { width: 1rem; height: 1rem; }
.hero__linkedin:hover { color: var(--on-ink-2); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 26rem; }
}

/* ---------- Section 2: six categories strip (cream) ---------- */
.strip { padding-block: 1.5rem; }
.strip__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.strip__label { font-size: var(--label); font-weight: 500; color: var(--muted-2); flex: none; }
.strip__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  font-size: var(--small); font-weight: 500; color: var(--text);
}
.strip__list strong { font-weight: 500; }
.strip__list span { font-weight: 400; color: var(--muted-2); }
/* Home hero: wider headline column, a slightly smaller headline and photo, so
   the headline holds to three lines at 1440 (design fix, Glen, 23 September 2026). */
@media (min-width: 901px) {
  .page--home .hero__grid { grid-template-columns: minmax(0, 1fr) 22rem; }
  .page--home .hero__copy { max-width: none; }
  .page--home .hero__copy .lede { max-width: 42rem; }
  .page--home .hero h1 { font-size: clamp(2.5rem, 3.6vw, 3.25rem); }
}
/* "Browse everything" sits under the heading on phones instead of wrapping. */
@media (max-width: 600px) {
  .section__head.section__head--row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .section__head.section__head--row .link-underline { margin-bottom: 0; }
}

/* ---------- Section 4: the stance (ink, three raised cards) ---------- */
.stance__foot {
  margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem; align-items: end;
}
@media (max-width: 900px) { .stance__foot { grid-template-columns: 1fr; align-items: start; justify-items: start; } }

/* Shared card grid */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

/* ---------- Section 5: Training (cream, split) ---------- */
.training__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.training__head { margin-bottom: 0; }
.training__aim { margin-top: 1.5rem; font-weight: 500; }
.training__cards { display: grid; gap: 1.25rem; }
.training__cards .service__top { margin-bottom: 1rem; align-items: center; }
.training__cards h3 { margin-bottom: 0; }
@media (max-width: 900px) { .training__grid { grid-template-columns: 1fr; } }

/* ---------- Section 6: Latest reading (white, sketch thumbnails) ---------- */
.section__head--row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; max-width: none; }
.section__head--row > div { max-width: 46rem; }
.section__head--row .link-quiet, .section__head--row .link-underline { flex: none; margin-bottom: 0.5rem; }
.read { display: flex; flex-direction: column; gap: 0.5rem; }
.read__art {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-panel);
  background: var(--cream); margin-bottom: 0.75rem;
}
.read__art img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .read__art img { transition: transform 220ms ease-out; }
  .read:focus-visible .read__art img { transform: translateY(-4px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .read:hover .read__art img { transform: translateY(-4px); }
}
.read__kind { font-size: var(--label); font-weight: 500; color: var(--muted-2); }
.read h3 { font-size: 1.25rem; }
.read p { font-size: var(--small); color: var(--muted); }

/* ---------- Section 7: Close (ink, Parloa pattern) ---------- */
.close { position: relative; overflow: hidden; padding-block: clamp(5rem, 9vw, 8.5rem) clamp(5rem, 8vw, 7.5rem); }
.close__arcs {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  fill: none; stroke: rgba(255, 255, 255, 0.10); stroke-width: 1;
}
.close .wrap { position: relative; }
.close__title {
  display: grid; gap: 0.1em;
  font-size: clamp(2.75rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -0.035em;
}
.close__step { padding-left: clamp(0rem, 22vw, 20rem); }
.close__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); margin-top: clamp(3rem, 6vw, 5.5rem); }
.close__side { grid-column: 2; max-width: 30rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.close__lede { color: var(--on-ink-2); margin-bottom: 1.5rem; }
@media (max-width: 900px) {
  .close__step { padding-left: 0; }
  .close__row { grid-template-columns: 1fr; }
  .close__side { grid-column: 1; }
}

/* ---------- Service page: hero fee panel ---------- */
/* Copy column wider and the fee panel a fixed width, so every service
   headline holds to three lines at 1440 (design fix, Glen, 23 September 2026). */
.hero--service .hero__grid { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 3rem; align-items: center; }
/* Service headlines are sentences, not slogans: a little smaller and a
   little wider so they hold to three or four lines on a laptop
   (23 September 2026). */
.hero--service .hero__copy { max-width: none; }
.hero--service h1 { font-size: clamp(2.25rem, 3.4vw, 3rem); }
.fee-panel {
  padding: 2rem; background: var(--ink-2); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.fee-panel__label { font-size: var(--label); font-weight: 500; color: var(--on-ink-3); margin-bottom: 1rem; }
.fee-panel__price { font-size: clamp(2.5rem, 3.6vw, 3.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--white); }
.fee-panel__unit { margin-top: 0.5rem; font-weight: 500; color: var(--on-ink); }
.fee-panel__terms { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: grid; gap: 0.5rem; font-size: var(--small); color: var(--on-ink-2); }
.fee-panel .link-quiet, .fee-panel .link-underline { display: inline-block; margin-top: 1.25rem; }
/* Small underlined text link (Glen, 23 September 2026): for a link on its
   own, such as "See all fees" in the price box. */
.link-underline { font-size: var(--small); font-weight: 500; color: var(--text); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.on-ink .link-underline, .fee-panel .link-underline { color: var(--on-ink); }
.link-underline:hover { text-decoration-thickness: 2px; }

/* ---------- Centred hero (About) ---------- */
.hero--centered { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem) clamp(4rem, 8vw, 7rem); }
.hero--centered .wrap { position: relative; }
.hero__center { display: grid; justify-items: center; text-align: center; max-width: 52rem; }
.hero__center .eyebrow { margin-bottom: 1.75rem; }
.hero__center h1 { margin-bottom: 1.5rem; }
.hero__center .lede { margin-bottom: 2.25rem; text-align: center; }
.actions--center { justify-content: center; }
.hero__center .hero__linkedin { font-size: var(--small); }

/* ---------- About ---------- */
.prose { display: grid; gap: 1rem; }
.prose .eyebrow { justify-self: start; margin-bottom: 0.5rem; }
.prose h2 { margin-bottom: 0.25rem; }
.prose p { color: var(--muted); max-width: 58ch; }
.prose .link-quiet { justify-self: start; margin-top: 0.5rem; }
.first__note h3 { font-size: 1.25rem; }
.route .step h3 { font-size: 1.0625rem; }
.route .step:nth-child(even) { margin-top: 0; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.plain-list li { color: var(--muted); }
.plain-list--tight { gap: 0.5rem; }
.plain-list--tight li { color: var(--text); font-weight: 500; }
.feat-grid--ink .card { padding: 1.75rem 1.5rem; }
.feat-grid--ink .card h3 { font-size: 1.125rem; }
.feat-grid--ink .card p { font-size: var(--small); }
.about__foot { padding-block: 0 3rem; }
.about__foot p { max-width: 70ch; }

/* ---------- Service page: where you are ---------- */
.who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.who h3 { margin-bottom: 0.625rem; }
.who p { color: var(--muted); }

/* ---------- Service page: steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.step { padding: 1.75rem 1.5rem; background: var(--cream); border-radius: var(--r-panel); display: flex; flex-direction: column; gap: 0.625rem; }
.step:nth-child(even) { margin-top: 2.5rem; }
.step__num { font-size: var(--label); font-weight: 500; color: var(--muted-2); margin-bottom: 0.75rem; }
/* Kit addition, 23 September 2026 (Parloa): the step number in a small white
   chip. The corner mark was tried and dropped by Glen the same day: it adds
   nothing on rounded cards. */
.steps:not(.steps--rows) .step__num {
  align-self: flex-start; padding: 0.25rem 0.5rem;
  background: var(--white); border-radius: var(--r-control); color: var(--text);
}
.step h3 { font-size: 1.125rem; }
.step p { font-size: var(--small); color: var(--muted); }

.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


/* Split row: section head on the left, rows with a bold lead-in on the right,
   a thin rule between rows (kit addition, 23 September 2026). */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split .section__head { margin-bottom: 0; }
.split__rows { list-style: none; margin: 0; padding: 0; }
.split__rows li { display: grid; grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.5fr); gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.split__rows li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.split__rows h3 { font-size: 1.125rem; color: var(--on-ink); }
.split__rows p { color: var(--on-ink-2); }
/* Raised rows: the same split layout on a surface instead of hairlines
   (Range Planning "What you get", design fix, Glen, 23 September 2026). */
.split__rows--raised { display: grid; gap: 0.75rem; }
.split__rows--raised li,
.split__rows--raised li:last-child { padding: 1.5rem 1.75rem; border: 0; border-radius: var(--r-panel); background: var(--ink-2); }
/* Short labels (home standards): a narrow label column, so each name holds
   to one line at 1440 (Glen, 23 September 2026). */
.split__rows--short li { grid-template-columns: 6.5rem minmax(0, 1fr); }
/* On white the raised rows are cream (home standards, 23 September 2026). */
.on-white .split__rows--raised li { background: var(--cream); }
.on-white .split__rows h3 { color: var(--text); }
.on-white .split__rows p { color: var(--muted); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__rows li { grid-template-columns: 1fr; gap: 0.375rem; }
}

/* Open process rows: used on Certification Management's How it runs section. */
.steps--rows { grid-template-columns: 1fr; gap: 0; }
.steps--rows .step {
  display: grid; grid-template-columns: 2.5rem minmax(12rem, 0.75fr) minmax(0, 1.5fr);
  align-items: baseline; gap: 1.5rem; padding: 1.5rem 0; margin: 0;
  background: transparent; border-radius: 0; border-top: 1px solid var(--edge);
}
.steps--rows .step__num { margin: 0; color: var(--muted); }
.steps--rows .step p { max-width: 65ch; }
@media (max-width: 700px) {
  .steps--rows .step { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem 1rem; }
  .steps--rows .step p { grid-column: 2; }
}

.fee__examples { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.fee__examples li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--small); color: var(--on-ink-2); }
.fee__examples strong { font-weight: 500; color: var(--on-ink); }
.handover__grid--two .handover__item { padding: 1.75rem; }
.handover__grid--two .handover__item h3 { font-size: 1.25rem; }
.handover__grid--two .handover__item p { font-size: var(--body); }

/* ---------- Service page: handover ---------- */
.handover { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.handover__head { margin-bottom: 0; }
.handover__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.handover__item { padding: 1.5rem; background: var(--white); border-radius: var(--r-panel); }
.handover__item h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.handover__item p { font-size: var(--small); color: var(--muted); }

/* ---------- Training: six topics, three across ---------- */
/* Training pages, 23 September 2026: one highlighted example from the day, a
   cream callout with an ink left border (coloured-border callouts approved by
   Glen, 17 September 2026). */
.exercise { max-width: 52rem; padding: 1.75rem 2rem; background: var(--cream); border-left: 3px solid var(--ink); border-radius: 0 var(--r-panel) var(--r-panel) 0; }
.exercise__label { font-size: var(--label); font-weight: 500; color: var(--muted-2); margin-bottom: 0.625rem; }
.exercise p:last-child { font-size: 1.125rem; line-height: 1.55; color: var(--text); }
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.topics .handover__item { padding: 1.75rem; }
.topics .handover__item h3 { font-size: 1.125rem; }
.handover__item .link-quiet { margin-top: 1rem; }

/* Launch Accelerator marker on a What you keep card. Certification Management,
   19 September 2026: Glen asked for a quiet visual indicator on the two items
   the Launch Accelerator adds, not a loud badge. */
.handover__flag {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  margin-bottom: 0.625rem;
  font-size: var(--label); font-weight: 500; color: var(--muted-2);
}
.handover__flag::before {
  content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--ink); flex: none;
}
.handover__item--la { box-shadow: inset 2px 0 0 var(--ink); }

/* ---------- Read and learn: one archive, filtered ---------- */
.archive__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 3rem; }
.archive .cards-3 { gap: 3rem 1.25rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
  background: transparent; color: var(--text);
  border: 1px solid rgba(31, 28, 27, 0.28); border-radius: var(--r-control);
  font-size: var(--small); font-weight: 500; line-height: 1; cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.filter:hover { background: var(--cream-2); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.read[hidden] { display: none; }
.archive__empty { color: var(--muted); }

/* ---------- Article: Field Notes, Guides and Insights ---------- */
.article__head { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.article__headgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.article__intro .eyebrow { margin-bottom: 1.5rem; }
.article__intro h1 { font-size: clamp(2.125rem, 3.6vw, 3.25rem); margin-bottom: 1.75rem; }
.byline { display: flex; align-items: center; gap: 0.875rem; }
.byline img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.byline__name { font-weight: 500; }
.byline__role { font-weight: 400; color: var(--muted); margin-left: 0.375rem; }
.byline__meta { font-size: var(--small); color: var(--muted); }
.on-ink .byline__role, .on-ink .byline__meta { color: var(--on-ink-2); }
.article__art { aspect-ratio: 16 / 11; border-radius: var(--r-panel); background: transparent; overflow: hidden; }
.article__art img { width: 100%; height: 100%; object-fit: contain; }

.article__wrap { padding-block: var(--section); }
.article__grid { display: grid; grid-template-columns: 15rem minmax(0, 44rem); gap: clamp(2rem, 5vw, 5rem); justify-content: start; }
.article__grid--solo { grid-template-columns: minmax(0, 44rem); justify-content: center; }
.toc { position: sticky; top: 6rem; padding: 1.25rem 1.5rem; background: var(--cream-2); border-radius: var(--r-panel); }
.toc__label { font-size: var(--label); font-weight: 500; color: var(--muted); margin-bottom: 0.75rem; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.toc a { display: block; padding: 0.375rem 0; font-size: var(--label); font-weight: 400; line-height: 1.4; color: var(--muted); transition: color 0.16s ease; }
.toc a:hover { color: var(--text); }
.toc a[aria-current="true"] { color: var(--text); font-weight: 500; }
.on-ink .toc { background: var(--ink-2); }
.on-ink .toc__label { color: var(--on-ink-3); }
.on-ink .toc a { color: var(--on-ink-2); }
.on-ink .toc a:hover, .on-ink .toc a[aria-current="true"] { color: var(--on-ink); }

/* Styled as a paper note pinned to the page, not a plain callout box, so it
   reads as distinct from .guide-callout ("In short") even though both sit
   near the top of an article (Glen, 25 September 2026). The strip in
   .takeaways::before stands in for a piece of tape holding it down. */
.takeaways { position: relative; padding: 1.75rem 2rem; background: var(--white); border: 1px solid var(--edge); border-radius: var(--r-panel); box-shadow: var(--shadow); margin: 0 0 2.5rem; transform: rotate(-1.25deg); }
.takeaways::before { content: ""; position: absolute; top: -0.65rem; left: 2.25rem; width: 3.25rem; height: 1.1rem; background: var(--cream); border: 1px solid var(--edge); transform: rotate(-4deg); }
.takeaways__label { font-size: var(--label); font-weight: 500; color: var(--muted-2); margin-bottom: 0.75rem; }
.takeaways p { font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.takeaways ul { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.5rem; font-weight: 500; }
.on-ink .takeaways { background: var(--ink-2); border-color: rgba(255, 255, 255, 0.16); }
.on-ink .takeaways::before { background: var(--ink); border-color: rgba(255, 255, 255, 0.24); }
.on-ink .takeaways__label { color: var(--on-ink-3); }

.article__body { font-size: 1.0625rem; line-height: 1.75; font-weight: 400; color: var(--muted); }
.article__body h2, .article__body h3, .article__body strong, .article__body .note-intro, .article__body .guide-intro, .article__body .guide-callout > p, .article__body tbody th { color: var(--text); }
.article__body > * + *,
.article__body section > * + *,
.article__body .note-section > * + *,
.article__body blockquote > * + *,
.article__body p + p { margin-top: 1.75rem; }
.article__body section + section, .article__body .note-section + .note-section,
.article__body > * + section, .article__body * + h2, .article__body * + h3 { margin-top: 3rem; }
.article__body h2 { font-size: 1.625rem; scroll-margin-top: 6rem; }
.article__body h3 { font-size: 1.25rem; }
.article__body h2 + *, .article__body h3 + * { margin-top: 1rem; }
.article__body .note-intro, .article__body .guide-intro { font-size: 1.25rem; font-weight: 400; line-height: 1.5; }
.article__body strong { font-weight: 500; }
.article__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--muted-2); }
.article__body a:hover { text-decoration-color: currentColor; }
.article__body ul, .article__body ol { margin-inline: 0; margin-bottom: 0; padding-left: 1.25rem; }
.article__body li + li { margin-top: 1.125rem; }
.article__body li > strong:first-child { display: block; margin-bottom: 0.25rem; }
.article__body li::marker { color: var(--muted-2); }
.article__body blockquote { margin-inline: 0; margin-bottom: 0; padding: 1.25rem 1.5rem; background: var(--cream-2); border-radius: var(--r-panel); }
.article__body table { width: 100%; border-collapse: collapse; font-size: var(--small); line-height: 1.5; }
.article__body th, .article__body td { padding: 0.75rem 1rem 0.75rem 0; text-align: left; vertical-align: top; }
.article__body thead th { font-size: var(--label); font-weight: 500; color: var(--muted-2); }
.article__body tbody th { font-weight: 500; }
.article__body .note-callout, .article__body .guide-callout { padding: 1.5rem 1.75rem; background: var(--cream-2); border-radius: var(--r-panel); }
.article__body .note-callout__label, .article__body .guide-callout > span { display: block; font-size: var(--label); font-weight: 500; color: var(--muted-2); margin-bottom: 0.5rem; }
.article__body .note-callout > p:first-of-type, .article__body .guide-callout > p:first-of-type { margin-top: 0; }
.article__body .guide-callout > p { font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.article__body .guide-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.article__body .guide-jump__label { font-size: var(--label); font-weight: 500; color: var(--muted-2); }
.article__body .guide-jump ul { display: contents; }
.article__body .guide-jump li { margin: 0; list-style: none; }
.article__body .guide-jump a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border: 1px solid rgba(31, 28, 27, 0.28); border-radius: var(--r-control); font-size: var(--label); font-weight: 500; text-decoration: none; }
.article__body .guide-jump a:hover { background: var(--cream-2); }
.on-ink .article__body { color: var(--on-ink-2); }
.on-ink .article__body h2, .on-ink .article__body h3, .on-ink .article__body strong, .on-ink .article__body .note-intro, .on-ink .article__body .guide-intro, .on-ink .article__body .guide-callout > p, .on-ink .article__body tbody th { color: var(--on-ink); }
.on-ink .article__body blockquote, .on-ink .article__body .note-callout, .on-ink .article__body .guide-callout { background: var(--ink-2); }
.on-ink .article__body .note-callout__label, .on-ink .article__body .guide-callout > span, .on-ink .article__body .guide-jump__label, .on-ink .article__body thead th { color: var(--on-ink-3); }
.on-ink .article__body .guide-jump a { border-color: rgba(255, 255, 255, 0.34); color: var(--on-ink); }
.on-ink .article__body .guide-jump a:hover { background: var(--ink-2); }
.on-ink .article__body a { text-decoration-color: var(--on-ink-3); }

.article__faq { margin-top: 3rem; }
.article__faq h2 { font-size: 1.625rem; margin-bottom: 1.25rem; }
.article__faq dl { margin: 0; display: grid; gap: 1.5rem; }
.article__faq dt { font-size: 1.125rem; font-weight: 500; line-height: 1.45; }
.article__faq dd { margin: 0.375rem 0 0; color: var(--muted); }
.article__faq dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.on-ink .article__faq dd { color: var(--on-ink-2); }

.article__next { margin-top: 3.5rem; padding: 1.5rem 1.75rem; background: var(--cream-2); border-radius: var(--r-panel); display: grid; gap: 0.625rem; justify-items: start; }
.article__next .eyebrow { margin-bottom: 0.5rem; }
.article__next h2 { font-size: 1.25rem; line-height: 1.35; max-width: 34ch; }
.article__next p { color: var(--muted); max-width: 56ch; }
.article__next .link-quiet { margin-top: 0.375rem; }
.article__next .link-underline { display: inline-block; margin-top: 0.375rem; }
.article__next .small a { text-decoration: underline; }
.article__disclaimer { margin-top: 2rem; font-size: var(--label); color: var(--muted-2); max-width: 70ch; }
.on-ink .article__disclaimer { color: var(--on-ink-3); }

.on-ink .read__kind { color: var(--on-ink-3); }
.on-ink .read p { color: var(--on-ink-2); }
.on-ink .read__art { background: var(--ink-2); }

@media (max-width: 900px) {
  .article__headgrid { grid-template-columns: 1fr; }
  .article__art { max-width: 32rem; }
  .article__grid { grid-template-columns: 1fr; }
  .toc { position: static; }
}

/* ---------- Booking: small hero, the calendar is the page ---------- */
.hero--small { padding-block: clamp(2.25rem, 4vw, 3rem); }
.hero__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.hero--small .eyebrow { margin-bottom: 1rem; }
.hero--small h1 { font-size: var(--h2); }
.hero__about { margin-top: 0.75rem; font-weight: 500; }
.bk-calendar-section { padding-block: clamp(2rem, 4vw, 3rem) var(--section); }
.bk-calendar { min-height: 24rem; }
#bk-cal-inline { width: 100%; overflow: hidden; border-radius: var(--r-panel); }
.bk-status, .bk-error { padding: 1rem 0; }
.bk-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--muted-2); }
.bk-link:hover { text-decoration-color: currentColor; }
.first--top { align-items: start; }
.first__copy .lede { margin-bottom: 1rem; }
.bk-form { padding: 2rem; background: var(--white); border-radius: var(--r-panel); display: grid; gap: 1.25rem; }
.bk-form__gotcha { position: absolute; left: -9999px; }
.field__label { display: block; font-size: var(--small); font-weight: 500; margin-bottom: 0.5rem; }
.field__label span { font-weight: 400; color: var(--muted-2); }
.field__input { display: block; width: 100%; padding: 0.8125rem 1rem; background: var(--cream-2); border: 0; border-radius: var(--r-control); color: var(--text); font: inherit; line-height: 1.5; }
.field__input::placeholder { color: var(--muted-2); }
.field__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
textarea.field__input { min-height: 9rem; resize: vertical; }
.bk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.bk-form .btn { justify-self: start; }
.bk-form__submit[disabled] { opacity: 0.55; cursor: wait; }
.bk-form__state a { text-decoration: underline; }
.bk-form__privacy { max-width: 56ch; }
@media (max-width: 900px) { .hero__row { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 560px) { .bk-form__row { grid-template-columns: 1fr; } }

/* ---------- Legal: small head, one reading column ---------- */
.legal__head { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }
.legal__head .eyebrow { margin-bottom: 1.25rem; }
.legal__head h1 { font-size: var(--h2); margin-bottom: 0.75rem; }
.legal__head .lede { margin-bottom: 0.75rem; }
.article__body .lg-callout { padding: 1.25rem 1.5rem; background: var(--cream-2); border-radius: var(--r-panel); }
.article__body .lg-callout p { margin: 0; color: var(--text); }
.article__body .lg-table-wrap { overflow-x: auto; }

/* ---------- Standards: category cards with their standards listed ---------- */
.std-moto { list-style: none; margin: 0; padding: 0; }
.std-cats { list-style: none; margin: 0; padding: 0; }
.std-cats .handover__item > p:first-of-type { color: var(--muted); }
.std-k { margin-top: 1.25rem; font-size: var(--label); font-weight: 500; color: var(--muted-2); }
.std-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--small); color: var(--muted); }
.std-list strong { font-weight: 500; color: var(--text); margin-right: 0.375rem; white-space: nowrap; }
.feat h3 + p { margin-top: 0; }
.feat .link-quiet { margin-top: auto; padding-top: 0.75rem; }
.feat .link-underline { margin-top: auto; padding-top: 0.75rem; align-self: start; }

/* ---------- How I work: four passes with artefact panels; the quote ---------- */
.passes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.pass { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: 2rem 0; }
.pass:nth-child(even) .pass__text { order: 2; }
.pass__k { font-size: var(--label); font-weight: 500; color: var(--muted-2); margin-bottom: 0.75rem; }
.pass h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.pass__text p:not(.pass__k) { color: var(--muted); max-width: 44ch; }
.art { padding: 1.5rem; background: var(--white); border-radius: var(--r-panel); box-shadow: 0 1px 2px rgba(31, 28, 27, 0.04), 0 12px 32px rgba(31, 28, 27, 0.06); }
.art__cap { font-size: var(--label); font-weight: 500; color: var(--muted-2); }
.art__state { display: flex; align-items: center; gap: 0.375rem; margin: 0.75rem 0 1rem; font-size: var(--label); color: var(--muted-2); }
.pip { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--edge); }
.pip--on { background: var(--ink); }
.pip--half { background: linear-gradient(90deg, var(--ink) 50%, var(--edge) 50%); }
.art__count { margin-left: 0.375rem; }
.art__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.art__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.875rem; background: var(--cream-2); border-radius: var(--r-control); font-size: var(--small); }
.art__row--open { background: var(--cream); }
.art__tag { font-size: var(--label); font-weight: 500; color: var(--muted-2); white-space: nowrap; }
.art__tag--live { color: var(--text); }
.art__quote { margin-top: 0.75rem; font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.art__meta { margin-top: 0.875rem; font-size: var(--label); color: var(--muted-2); }
.art__sign { margin-top: 1rem; font-weight: 500; }
.quote { margin: 0; }
.quote p { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.quote footer { margin-top: 1.25rem; font-size: var(--small); color: var(--on-ink-2); }
.why__foot { display: grid; gap: 1rem; max-width: 46rem; }
.why__foot .link-quiet { display: inline-flex; }
@media (max-width: 900px) {
  .pass { grid-template-columns: 1fr; padding: 1rem 0; }
  .pass:nth-child(even) .pass__text { order: 0; }
}

/* ---------- Service page: fees on ink ---------- */
.fees { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
/* Two boxes, for a service with one price. Added for the Marketing & Claims Review
   (Glen, 2026-09-19): three boxes forced a third fact that did not exist. Follows
   the kit's existing modifier convention (.steps--4, .handover__grid--two). The
   900px rule below already collapses every .fees grid to one column. */
.fees--two {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  max-width: 56rem; align-items: start;
}
/* Glen, 2026-09-19: two boxes stretched to the full width looked wrong; the
   second box read well only because it was smaller. So the pair is capped at
   56rem, the lead box takes the larger share, and each box is only as tall as
   its own content (align-items: start), not stretched to match the other. */
.fee { padding: 2rem; background: var(--ink-2); border-radius: var(--r-panel); display: flex; flex-direction: column; gap: 0.375rem; }
.fee--lead { background: var(--white); color: var(--text); }
.fee__label { font-size: var(--label); font-weight: 500; color: var(--on-ink-3); }
.fee--lead .fee__label { color: var(--muted-2); }
.fee__price { font-size: 2.25rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin-top: 0.75rem; }
.fee__unit { font-weight: 500; }
.fee__text { margin-top: 0.75rem; font-size: var(--small); color: var(--on-ink-2); }
.fee--lead .fee__text { color: var(--muted); }
.fee .btn { margin-top: auto; align-self: flex-start; padding-top: 0.8125rem; }
.fee--lead .btn { background: var(--ink); color: var(--white); margin-top: 1.5rem; }
.fee--lead .btn:hover { background: var(--ink-2); }
.fee__link {
  align-self: flex-start; margin-top: 0.875rem;
  font-size: var(--small); font-weight: 500; color: var(--on-ink);
  text-decoration: underline; text-decoration-color: var(--on-ink-3);
  text-underline-offset: 0.2em; transition: text-decoration-color 0.16s ease;
}
.fee__link:hover { text-decoration-color: var(--on-ink); }
.fee--lead .fee__link { color: var(--text); text-decoration-color: var(--muted-2); }
.fee--lead .fee__link:hover { text-decoration-color: var(--text); }
.fees__terms { margin-top: 2rem; max-width: 70ch; font-size: var(--small); color: var(--on-ink-2); }
/* Certification Management, 2026-09-19: the ladder has FOUR rungs, so a
   four-box variant of the fees grid, the Accelerator leading. Glen chose this
   over a ladder layout on the running site. Same 900px collapse as .fees. */
.fees--four { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.fee__q { font-size: var(--small); color: var(--on-ink-2); margin-bottom: 0.5rem; }
.fee--lead .fee__q { color: var(--muted); }
.fees--four .fee__price { font-size: 2rem; }
@media (max-width: 900px) { .fees--four { grid-template-columns: 1fr; } }
/* Price boxes, Certification Management, 2026-09-23 (Glen: the cards read as
   text cards, not pricing). Name at the top, one line, a big price with the
   unit under it, short plain lines (no ticks, no rule), one button on the lead
   card only. "Most clients" is a small tag in the corner. Equal columns; on
   wide screens the cards share rows (subgrid) so each part lines up. */
.fees--aligned { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fees--aligned .fee { position: relative; padding: 2.25rem 2rem 2rem; gap: 0; }
.fee__badge {
  position: absolute; top: 1.5rem; right: 1.5rem;
  padding: 0.3125rem 0.625rem; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-size: var(--label); font-weight: 500; line-height: 1.2;
}
.fee__name { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; }
.fee--lead .fee__name { padding-right: 6.5rem; }
/* Phones: the badge sits above the name instead of in the corner, so it can
   never overlap a wrapping name (iPhone 14 Pro, Glen, 23 September 2026). */
@media (max-width: 600px) {
  .fee__badge { position: static; align-self: flex-start; margin-bottom: 0.875rem; }
  .fee--lead .fee__name { padding-right: 0; }
}
.fees--aligned .fee__text { margin-top: 0.375rem; }
.fees--aligned .fee__price {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem;
  margin-top: 2rem; font-size: clamp(3rem, 4.4vw, 4rem); line-height: 1;
}
.fee__per { font-size: var(--small); font-weight: 400; letter-spacing: 0; color: var(--on-ink-2); }
.fee--lead .fee__per { color: var(--muted); }
@media (min-width: 901px) {
  /* Two aligned boxes at the CM box width, not stretched across the page (Claims Review, 23 September 2026). */
  .fees--aligned.fees--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 51rem; align-items: stretch; }
  /* One box at the CM box width (Range Planning, 23 September 2026). */
  .fees--aligned.fees--one { grid-template-columns: minmax(0, 1fr); max-width: 25rem; }
  .fees--aligned .fee { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .fees--aligned .fee__name { grid-row: 1; }
  .fees--aligned .fee__text { grid-row: 2; }
  .fees--aligned .fee__price { grid-row: 3; }
  .fees--aligned .fee__list { grid-row: 4; }
  .fees--aligned .fee:not(.fee--lead) .fee__list { grid-row: 4; }
  .fees--aligned .fee__when { grid-row: 5; align-self: end; }
  .fees--aligned .btn { grid-row: 5; align-self: end; justify-self: start; }
  /* List and "Use this when" note together, so the note follows the list
     instead of sitting under an empty gap (CM design fix, Glen, 23 September 2026). */
  .fees--aligned .fee__body { grid-row: 4 / span 2; align-self: start; }
  .fees--aligned .fee__body .fee__when { align-self: auto; }
  /* Notes start at the same height in both smaller boxes: each list is held
     to the height of two items, the longest non-lead list (Glen, "a",
     23 September 2026 night). */
  .fees--aligned .fee__body .fee__list { min-height: calc(2 * 0.9375rem * 1.35 + 0.875rem); }
}
/* What each fee includes: its own panel inside the card, so the card reads as
   two zones (name and price above, inclusions below). A few words a line, no
   ticks, no rule (Glen, 2026-09-23). */
.fee__list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; align-content: start; gap: 0.875rem; font-size: 0.9375rem; line-height: 1.35; color: var(--on-ink); }
.fee--lead .fee__list { color: var(--text); }
/* Checks in a circle, no inner panel (Glen, 23 September 2026: the boxes
   inside the fee boxes "look bad"; "I'd rather have checks in a circle"). */
.fee__list li { position: relative; padding-left: 1.625rem; }
.fee__list li::before {
  content: ""; position: absolute; left: 0; top: 0.125rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.625rem no-repeat;
}
.fee--lead .fee__list li::before {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.625rem no-repeat;
}
.fee__list + .btn { margin-top: 1.5rem; }


/* ---------- Service page: Why Trace (big number and three points) ----------
   Parloa's big-number card, added 23 September 2026 so service pages are not all
   2x2 cards and rows of three. One true number on an ink card, three short
   points in white cards beside it. */
.why-trace { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1rem; }
.stat-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: clamp(2rem, 3.5vw, 2.75rem); background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-panel);
}
.stat-card__num { font-size: clamp(5rem, 10vw, 8.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.9; }
.stat-card__num span { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; margin-left: 0.25rem; }
.stat-card__label { max-width: 24ch; font-size: var(--lede); line-height: 1.45; color: var(--on-ink-2); }
.why-trace__points { display: grid; gap: 1rem; }
.why-trace__points .handover__item { padding: 1.5rem 1.75rem; }
@media (max-width: 900px) { .why-trace { grid-template-columns: 1fr; } }

/* ---------- Service page: FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq .section__head { margin-bottom: 0; }
.faq__list { display: grid; gap: 0.625rem; }
.faq__item { background: var(--white); border-radius: var(--r-panel); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 1.5rem; font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: 1.375rem; font-weight: 400; line-height: 1; color: var(--muted-2); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { padding: 0 1.5rem 1.375rem; color: var(--muted); max-width: 62ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* ---------- Service page: first product ---------- */
.first { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.first__copy .eyebrow { margin-bottom: 1.25rem; }
.first__copy h2 { margin-bottom: 1rem; }
.first__note { padding: 2rem; background: var(--white); border-radius: var(--r-panel); display: grid; gap: 1rem; justify-items: start; }
.first__note p:not(.service__price) { color: var(--muted); }

/* ---------- WCR: before and after ---------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.ba__panel { padding: 1.75rem; border-radius: var(--r-panel); background: var(--cream); }
.ba__panel--after { background: var(--white); box-shadow: 0 1px 2px rgba(31, 28, 27, 0.04), 0 12px 32px rgba(31, 28, 27, 0.08); }
.ba__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ba__ph { display: block; width: 4rem; height: 4rem; flex: none; border-radius: var(--r-control); background: var(--white); }
.ba__panel--after .ba__ph { background: var(--cream); }
.ba__panel .ba__ph--sketch { background: transparent; }
.ba__ph--sketch svg, .ba__ph--sketch img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ba__head h3 { font-size: 1.125rem; }
.ba__label { font-size: var(--label); font-weight: 500; color: var(--muted-2); }
.ba__panel--after .ba__label { color: var(--text); }
.ba__lines { margin: 0; display: grid; gap: 1.125rem; }
.ba__lines div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.ba__lines dt { font-size: var(--label); font-weight: 500; color: var(--muted-2); }
.ba__lines dd { margin: 0; line-height: 1.7; }
.ba__lines mark { background: transparent; color: inherit; padding: 0.1em 0.35em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ba__panel--before mark { background: rgba(31, 28, 27, 0.08); color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(31, 28, 27, 0.55); text-decoration-thickness: 1px; }
.ba__panel--after mark { background: var(--ink); color: var(--white); font-weight: 500; }
.ba__notes { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; font-size: var(--small); color: var(--muted); }
.ba__notes strong { display: block; font-weight: 500; color: var(--text); margin-bottom: 0.25rem; }
.ba__disclaimer { margin-top: 1.5rem; font-size: var(--label); color: var(--muted-2); max-width: 70ch; }
@media (max-width: 900px) { .ba, .ba__notes { grid-template-columns: 1fr; } .ba__lines div { grid-template-columns: 1fr; gap: 0.25rem; } }
/* One-box before and after (Website Content Review, 21 September 2026). */
.ba1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; align-items: center; padding: 2.5rem; border-radius: var(--r-panel); background: var(--cream); }
.ba1__art { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.ba1__art img { display: block; width: min(100%, 22rem); height: auto; }
.ba1__art figcaption { font-size: var(--label); font-weight: 500; color: var(--muted-2); }
.ba1__rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ba1__row { display: grid; grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1.4fr); gap: 1rem; align-items: center; padding: 1rem 0; }
.ba1__row + .ba1__row { border-top: 1px solid rgba(31, 28, 27, 0.1); }
.ba1__old { margin: 0; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(31, 28, 27, 0.55); text-decoration-thickness: 1px; }
.ba1__old--missing { text-decoration: none; font-style: italic; }
.ba1__arrow { display: inline-flex; color: var(--muted-2); }
.ba1__new { margin: 0; font-weight: 500; color: var(--text); line-height: 1.6; }
/* On a cream section the cream box would vanish: white box instead (Glen, Claims Review, 23 September 2026). */
.on-cream .ba1 { background: var(--white); }
@media (max-width: 900px) { .ba1 { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; } .ba1__art img { width: min(100%, 14rem); } .ba1__row { grid-template-columns: 1fr; gap: 0.375rem; } .ba1__arrow svg { transform: rotate(90deg); } }


/* ---------- Retainer: feature grid ---------- */
.feat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.feat { padding: 1.75rem 1.5rem; background: var(--cream); border-radius: var(--r-panel); display: flex; flex-direction: column; gap: 0.5rem; }
.feat__num { font-size: var(--label); font-weight: 500; color: var(--muted-2); margin-bottom: 0.75rem; }
.feat h3 { font-size: 1.125rem; }
.feat p { font-size: var(--small); color: var(--muted); }

/* ---------- Retainer: comparison on ink ---------- */
.compare { display: grid; gap: 0.75rem; }
.compare__head, .compare__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 0.75rem; align-items: stretch; }
.compare__head span { font-size: var(--label); font-weight: 500; color: var(--on-ink-3); padding: 0 1.5rem 0.25rem; }
.compare__row > span { padding: 1.25rem 1.5rem; border-radius: var(--r-panel); background: var(--ink-2); color: var(--on-ink-2); font-size: var(--small); }
.compare__label { background: transparent !important; color: var(--on-ink) !important; font-weight: 500; font-size: 1rem !important; padding-left: 0 !important; }
.compare__us { background: var(--white) !important; color: var(--text) !important; font-weight: 500; }

/* ---------- Retainer: member rate ---------- */
.rates { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.rates__head { margin-bottom: 0; }
.rates__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.rates__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--white); border-radius: var(--r-panel);
}
.rates__name { font-weight: 500; }

/* Advisory Retainer, 23 September 2026 (designed from scratch at Glen's
   request): the inclusions in two grouped cream panels; the one fee box beside
   a short comparison. */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.groups__panel { padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--cream); border-radius: var(--r-panel); }
.groups__panel h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 1.5rem; }
.groups__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.groups__list strong { display: block; font-weight: 500; font-size: 1.0625rem; color: var(--text); margin-bottom: 0.25rem; }
.groups__list p { font-size: var(--small); color: var(--muted); }
@media (max-width: 900px) { .groups { grid-template-columns: 1fr; } }
/* Fees with the hire comparison beside the box (Advisory Retainer, Glen
   approved the sketch 23 September 2026): column headings so each figure
   belongs to one side, plain figures (no price chips), equal heights. */
.fee-compare { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.fee-compare > .fees { height: 100%; }
.fee-compare > .fees .fee { height: 100%; }
.compare-panel { padding: 2.25rem 2rem 2rem; background: var(--white); border-radius: var(--r-panel); }
.compare-panel h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 1.5rem; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 1rem 0.75rem 1rem 0; text-align: left; vertical-align: top; }
.cmp thead th { padding-top: 0; font-size: var(--small); font-weight: 500; color: var(--muted); }
.cmp tbody tr { border-top: 1px solid var(--edge); }
.cmp tbody th { font-weight: 500; font-size: var(--small); color: var(--text); width: 40%; }
.cmp td { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--muted); white-space: nowrap; }
.cmp td.cmp__us { color: var(--text); }
.compare-panel__note { margin-top: 1rem; font-size: var(--small); color: var(--muted); }
@media (max-width: 900px) { .fee-compare { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .compare-panel { padding: 1.5rem 1.25rem; } .cmp td { font-size: 1.0625rem; white-space: normal; } }
/* Phones: each month is one block, its label first, then each figure on its
   own line with its column name (retainer design fix, Glen, 23 September 2026). */
@media (max-width: 560px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cmp tbody tr { display: grid; gap: 0.5rem; padding: 1rem 0; }
  .cmp tbody th { width: auto; padding: 0 0 0.25rem; }
  .cmp td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0; white-space: nowrap; }
  .cmp td::before { content: attr(data-label); font-size: var(--small); font-weight: 400; letter-spacing: 0; color: var(--muted); }
}

@media (max-width: 900px) {
  .hero--service .hero__grid, .who-grid, .handover, .handover__grid, .fees, .first, .rates, .topics { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(even) { margin-top: 0; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .compare__head { display: none; }
  .compare__row { grid-template-columns: 1fr; }
  .compare__row > span::before { content: attr(data-col); display: block; font-size: var(--label); color: var(--on-ink-3); margin-bottom: 0.25rem; }
  .compare__label::before { display: none; }
  .rates__list li { flex-wrap: wrap; }
}
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }

/* ---------- Footer (ink) ---------- */
.footer { padding-block: 4rem 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem 5rem; }
.footer__notes h2 { font-size: 1.5rem; margin: 1.25rem 0 0.5rem; }
.footer__form { margin-top: 1.5rem; max-width: 30rem; }
.footer__gotcha { position: absolute; left: -9999px; }
.footer__controls {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 0.5rem; background: var(--white); border-radius: var(--r-control);
}
.footer__input {
  flex: 1 1 auto; min-width: 0; min-height: 2.5rem; padding: 0.5rem 0.75rem;
  background: transparent; color: var(--ink); border: 0; outline: none;
}
.footer__input::placeholder { color: var(--muted-2); }
.footer__controls:focus-within { outline: 2px solid var(--white); outline-offset: 3px; }
.footer__submit.btn { flex: none; min-height: 2.5rem; padding: 0.5rem 1.125rem; background: var(--ink); color: var(--white); }
.footer__submit.btn:hover { background: var(--ink-2); }
.footer__state { margin-top: 0.75rem; color: var(--on-ink-2); }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer__group { display: grid; gap: 0.5rem; align-content: start; }
.footer__group a { font-size: var(--small); color: var(--on-ink-2); }
.footer__group a:hover { color: var(--on-ink); }
.footer__title { font-size: var(--label); font-weight: 500; color: var(--on-ink-3); margin-bottom: 0.5rem; }
.footer__meta {
  margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; color: var(--on-ink-3);
}
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a:hover { color: var(--on-ink); }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; gap: 0.875rem; }
.card h3 { margin-bottom: 0.125rem; }
.card p { color: var(--muted); }
.on-ink .card p { color: var(--on-ink-2); }
.card .link-quiet { margin-top: auto; padding-top: 0.75rem; }
.section__note { margin-top: 2.5rem; max-width: 60ch; color: var(--muted); }

/* ---------- Section 3: four services (white ground, cream cards, price in the open) ---------- */
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.service {
  display: flex; flex-direction: column;
  padding: 2rem 2rem 1.75rem; background: var(--white); border-radius: var(--r-panel);
  box-shadow: 0 1px 2px rgba(31, 28, 27, 0.04), 0 12px 32px rgba(31, 28, 27, 0.06);
}
.service__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2.25rem; }
.service__icon { width: 2rem; height: 2rem; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service__price {
  display: inline-flex; align-items: baseline; gap: 0.375rem;
  padding: 0.5rem 0.875rem; background: var(--ink); border-radius: var(--r-control);
  font-size: var(--label); line-height: 1.2; color: var(--on-ink-2);
}
.service__price strong { font-size: 1rem; font-weight: 500; color: var(--white); white-space: nowrap; }
@media (max-width: 900px) { .service__price { flex-wrap: wrap; } }
.service h3 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.625rem; }
.services-grid .service__top { margin-bottom: 1.25rem; }
@media (min-width: 901px) { .services-grid .service__price { white-space: nowrap; } }
.service__for { font-weight: 500; color: var(--text); margin-bottom: 0.75rem; }
.service__desc { color: var(--muted); margin-bottom: 1.75rem; }
.service__list { list-style: disc; margin: 0 0 1.75rem; padding-left: 1.125rem; display: grid; gap: 0.5rem; color: var(--muted); }
.service__list li::marker { color: var(--muted-2); }
.service .link-quiet { margin-top: auto; }
.services-terms { margin-top: 2rem; max-width: 64ch; font-size: var(--small); color: var(--muted-2); }
/* Home services, grouped (19 September 2026): two group columns of compact
   white cards, price chip alone on the top line, name, one plain line. Glen
   chose this over grouped full cards and plain rows on the running site.
   ONE GRID for both columns (Glen: boxes must align and match height). Each
   group is display: contents; its children are pinned to a column and packed
   densely, so row N in one column sits beside row N in the other and shares
   its height. Every card lifts on hover and focus (Glen: micro-interaction). */
.svc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 1rem 2.5rem; }
.svc-group { display: contents; }
.svc-group--pc > * { grid-column: 1; }
.svc-group--os > * { grid-column: 2; }
.svc-group__title { font-size: var(--label); font-weight: 500; color: var(--muted-2); align-self: end; }
.svc-group__more { align-self: start; padding-top: 0.25rem; }
.svc-mini {
  display: block; padding: 1.5rem 1.75rem; background: var(--white); border-radius: var(--r-panel);
  box-shadow: 0 1px 2px rgba(31, 28, 27, 0.04), 0 12px 32px rgba(31, 28, 27, 0.06);
  color: var(--text); text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .svc-mini { transition: transform 220ms ease-out, box-shadow 220ms ease-out; }
}
.svc-mini:hover, .svc-mini:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(31, 28, 27, 0.06), 0 20px 40px rgba(31, 28, 27, 0.12);
}
.svc-mini .service__price { margin-bottom: 1rem; }
.svc-mini h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 0.375rem; }
.svc-mini .service__for { margin-bottom: 0; font-weight: 400; color: var(--muted); }
@media (max-width: 900px) {
  .svc-groups { grid-template-columns: 1fr; }
  .svc-group--os > * { grid-column: 1; }
  .svc-group--os .svc-group__title { margin-top: 1.5rem; }
}

@media (max-width: 900px) {
  .cards-3, .services-grid { grid-template-columns: 1fr; }
  .service { padding: 1.75rem; }
}

/* ---------- Why Trace, option A (Glen, 23 September 2026) ----------
   Parloa "Built for volume" shape: one big sentence, a rule, then a claim on
   the left and three plain points on the right. No boxes. */
.why__head { max-width: 52rem; }
.why__head .eyebrow { margin-bottom: 1.5rem; }
.why__title { font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 1.25rem; }
.why__row {
  margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--edge);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr); gap: clamp(2rem, 5vw, 4.5rem);
}
.why__claim { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.why__points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.why__points h3 { font-size: 1.125rem; color: var(--text); margin-bottom: 0.625rem; }
.why__points p { font-size: var(--small); line-height: 1.6; color: var(--muted); }
.why .lede { color: var(--muted); }
@media (max-width: 900px) {
  .why__row { grid-template-columns: 1fr; }
  .why__points { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* "Use this when" note at the foot of the two smaller fee boxes (Glen,
   23 September 2026): fills the empty space and says who the box is for. */
.fee__when {
  margin-top: auto; padding: 1rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px;
  font-size: var(--small); line-height: 1.5; color: var(--on-ink-2);
}
.fee__list + .fee__when { margin-top: 2rem; }
.fees--aligned .fee:not(.fee--lead) .fee__when { margin-top: 1.75rem; }
.fee__when-label { font-size: var(--label); font-weight: 500; color: var(--on-ink); margin-bottom: 0.375rem; }

/* ---------- Why Trace, variant C (Glen, 23 September 2026) ---------- */
.why-quote .eyebrow { margin-bottom: 1.5rem; }
.why-quote__text { max-width: 60rem; font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.06; letter-spacing: -0.03em; }
.why-quote__points { list-style: none; margin: clamp(3rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.why-quote__points li { padding: 1.5rem; background: var(--ink-2); border-radius: var(--r-panel); }
.why-quote__points h3 { font-size: 1.0625rem; color: var(--on-ink); margin-bottom: 0.375rem; }
.why-quote__points p { font-size: var(--small); color: var(--on-ink-2); }
@media (max-width: 900px) { .why-quote__points { grid-template-columns: 1fr; } }
/* How I work, night fix pass (Glen, 23 September 2026): two boxes, one small link. */
.why-quote__points--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .why-quote__points--two { grid-template-columns: 1fr; } }
.why-quote__more { margin-top: 1.5rem; }
/* How I work hero: the four passes at a glance, in the fee panel shape but
   with no price (nothing that is not a fee may look like a fee). */
.pass-panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; color: var(--on-ink); font-weight: 500; }
.pass-panel__list li { display: flex; align-items: center; gap: 0.75rem; }
.pass-panel__num {
  flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 6px; background: #4A403B; color: var(--on-ink); font-size: var(--label); font-weight: 500;
}
.pass-panel__list li:last-child .pass-panel__num { background: var(--white); color: var(--ink); }
/* How I work: what stays with the job, under the three cards. */
.core-note { margin-top: 1.5rem; max-width: 46rem; color: var(--muted); }

/* ---------- What I check: raised ink boxes, a heading and a short list (Glen, Claims Review, 23 September 2026) ---------- */
.scope { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.scope__group { padding: 1.5rem; background: var(--ink-2); border-radius: var(--r-panel); }
.scope__group h3 { font-size: 1.0625rem; color: var(--on-ink); margin-bottom: 0.875rem; }
.scope__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--small); line-height: 1.4; color: var(--on-ink-2); }
@media (max-width: 1100px) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .scope { grid-template-columns: 1fr; } }

/* Fees on cream (Glen, 23 September 2026, to avoid ink on ink under Why
   Trace): the dark boxes keep their own light text; terms go muted. */
.on-cream .fee:not(.fee--lead) { color: var(--on-ink); }
.on-cream .fees__terms { color: var(--muted); }

/* The two smaller fee boxes in a darker cream instead of ink (Glen,
   23 September 2026), with the "Use this when" notes in light cream. */
.on-cream .fee:not(.fee--lead) { background: #DEDAD0; color: var(--text); }
.on-cream .fee:not(.fee--lead) .fee__text,
.on-cream .fee:not(.fee--lead) .fee__per { color: var(--muted); }
.on-cream .fee:not(.fee--lead) .fee__list { color: var(--text); }
.on-cream .fee:not(.fee--lead) .fee__list li::before {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.625rem no-repeat;
}
.on-cream .fee:not(.fee--lead) .fee__when { background: var(--cream-2); border-color: transparent; color: var(--muted); }
.on-cream .fee:not(.fee--lead) .fee__when-label { color: var(--text); }
.why-quote__claim { margin-top: 1.75rem; max-width: 52rem; font-size: var(--lede); line-height: 1.55; color: var(--on-ink-2); }

/* Close with a short form (contact panel, Glen, 23 September 2026). */
.close__row--form { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.close__side--form { grid-column: 2; max-width: 40rem; padding-top: 0; border-top: 0; }
.close-form__intro { color: var(--on-ink-2); line-height: 1.55; margin-bottom: 0.25rem; }
.close-form__alt { margin-top: -0.25rem; }
.close-form { display: grid; gap: 1.125rem; padding: 2rem; background: var(--ink-2); border-radius: var(--r-panel); }
.close-form .field__label { color: var(--on-ink); }
.close-form .field__label span { color: var(--on-ink-3); }
.close-form .field__input { background: rgba(255, 255, 255, 0.07); color: var(--on-ink); }
.close-form .field__input:focus-visible { outline-color: var(--on-ink); }
.close-form .btn { justify-self: start; }
.close-form__state { color: var(--on-ink); }
.close-form__state a { color: var(--on-ink); text-decoration: underline; text-underline-offset: 0.2em; }
/* Privacy link stays quiet so it does not compete with "Book a call" (Glen). */
.close-form__privacy a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.22); text-underline-offset: 0.2em; }
.close-form__privacy { color: var(--on-ink-3); font-size: var(--label); }
@media (max-width: 900px) {
  .close__row--form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .close-form { padding: 1.5rem; }
  .close-form .bk-form__row { grid-template-columns: 1fr; }
}

/* ---------- Resource pages: cream throughout (23 September 2026) ----------
   Glen approved the plan: cream nav matching a cream hero, the split cream
   hero on the hub, white article cards on cream, and the article body as one
   white reading sheet on cream (Visual identity, kit additions). */
.nav--cream { background: var(--cream); color: var(--text); }
.nav--cream .nav__item > a, .nav--cream .nav__item > span { color: var(--muted); }
.nav--cream .nav__item:hover > a, .nav--cream .nav__item:hover > span,
.nav--cream .nav__item:focus-within > a, .nav--cream .nav__item:focus-within > span,
.nav--cream .nav__item > a[aria-current="page"] { color: var(--text); }
.nav--cream .nav__mobile summary { border-color: rgba(31, 28, 27, 0.28); }
.nav--cream .nav__burger span { background: var(--text); }
.nav--cream .nav__mobile-panel { background: var(--cream); }
.nav--cream .nav__mobile-panel a { color: var(--text); }
.nav--cream .nav__mobile-panel .nav__group { color: var(--muted-2); }
.nav--cream .nav__mobile-panel a.btn { color: var(--white); }

.hero--split { padding-block: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 3vw, 2.5rem); }
.hero__split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.hero--split .eyebrow { margin-bottom: 1.5rem; background: var(--white); }
.hero--split h1 { max-width: 12ch; }
.hero__split-side { display: grid; gap: 1rem; }
.hero__byline { margin-top: 1.25rem; }
.hero__split-side .lede { font-size: 1.0625rem; color: var(--muted); }
.hero--split + .archive { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .hero__split { grid-template-columns: 1fr; gap: 2rem; } }

.read--card { gap: 0.5rem; padding-bottom: 1.5rem; background: var(--white); border-radius: var(--r-panel); overflow: hidden; }
.read--card .read__art { border-radius: 0; background: var(--cream-2); margin-bottom: 0.75rem; }
.read--card > :not(.read__art) { padding-inline: 1.25rem; }
.archive .cards-3 { gap: 1.25rem; }

@media (min-width: 901px) { .article__grid:not(.article__grid--solo) { grid-template-columns: 15rem minmax(0, 50rem); } }
.article__grid--solo { grid-template-columns: minmax(0, 50rem); }
.article__sheet { padding: clamp(1.75rem, 4vw, 3.5rem); background: var(--white); border-radius: var(--r-panel); }
.on-cream .toc { background: var(--white); }
.on-cream .article__head + .article__wrap, .article__head.on-cream + .article__wrap { padding-top: 0; }
@media (max-width: 900px) {
  .article__sheet { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding: 2rem var(--gutter); }
}

/* Legal pages, cream throughout (23 September 2026): the head lines up with
   the white sheet below it, more room under the nav, a short gap to the sheet. */
.legal__head { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem); }
.legal__head .wrap { width: min(50rem, 100% - 2 * var(--gutter)); }
.legal__head + .article__wrap { padding-top: 0; }

/* Home: four doors (23 September 2026). Cream cards on white, fee chip first,
   a short title, one line, the service named in a quiet link. */
.doors .feat { gap: 0.625rem; }
.doors .service__price { align-self: start; margin-bottom: 0.75rem; }
.doors h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.doors .link-quiet { margin-top: auto; padding-top: 0.75rem; }
.doors__hour { font-size: var(--small); color: var(--muted); margin-top: 0.5rem; }
.doors__hour a { color: var(--text); }
.doors .feat .service__price { color: var(--on-ink-2); }
.doors .link-underline { margin-top: auto; padding-top: 0.75rem; align-self: start; }

/* About, night fix pass (Glen, 23 September 2026): Glen's photo beside Why
   Trace exists, with the LinkedIn link in its caption; the Track record small
   print given the same space as the lede. */
.about__photo { justify-self: end; width: 100%; max-width: 22rem; }
@media (max-width: 900px) { .about__photo { justify-self: start; } }
.record__note { margin-top: 1rem; }