/* =====================================================================
   COMPONENTS — hero, issue cards, CTA block, FAQ accordion, author box,
   "right fit" panel, steps, callout, about split, contact band.
   Markup: src/_includes/components.njk (macros). Look = the approved HTML
   design pack (reference/mockup/Main.dc.html) — #1001659.
   Docs: docs/COMPONENTS.md · demo: /utilities/components/
   Mobile-first; tokens only (no raw colours or px sizes except hairlines).
   ===================================================================== */

/* ---- Button sizes (base variants live in base.css / site-shell.css) ---- */
.btn--lg { min-height: 56px; padding-inline: var(--space-m); text-align: center; }
@media (min-width: 600px) { .btn--lg { padding-inline: 1.75rem; } }
.btn:focus-visible { outline-offset: var(--focus-offset); }

/* =====================================================================
   HERO — pack: text left; portrait framed in a 10px card, a deep-green
   block with concentric arcs bleeding off the right edge, and a sage
   quote card overlapping the photo's lower-left corner.
   ===================================================================== */
.hero { padding-block: var(--space-xl) var(--section-y); isolation: isolate; overflow-x: clip; }
.hero__inner { display: grid; gap: var(--space-2xl); align-items: center; }
.hero__text > * + * { margin-top: var(--space-l); }
.hero__text .lede { max-width: 32.5rem; font-size: var(--step-1); line-height: 1.58; }
.hero__title { font-size: var(--step-5); line-height: 1.05; letter-spacing: var(--tracking-tight); }
.hero__title em { color: var(--color-primary); }
.hero__actions { --cluster-gap: var(--space-s) 1.75rem; }
.hero__actions .btn { flex: 1 1 100%; }
@media (min-width: 600px) { .hero__actions .btn { flex: 0 0 auto; } }
.hero__secondary { font-size: var(--step-0); }

/* Trust facts: icon + label, over a hairline (pack) */
.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-l);
  margin-top: var(--space-l); padding-top: var(--space-m);
  border-top: var(--border-w) solid var(--color-border);
  font-size: var(--text-fine); line-height: 1.55;
  color: var(--color-text-muted);
}
.hero__facts li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.hero__facts .icon { flex: none; color: var(--color-primary); }

/* Media */
.hero__media { position: relative; width: 100%; max-width: 520px; margin-inline: auto; padding: 0 var(--space-s) 0 0; }
.hero__block {
  position: absolute; top: var(--space-m); bottom: var(--space-xl);
  left: 38%; right: calc(-1 * var(--gutter));
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-primary);
  overflow: hidden;
}
.hero__arcs { right: 0; bottom: 0; width: 480px; height: 560px; color: var(--green-300); opacity: 0.55; }
.hero__photo {
  position: relative;
  width: 86%; max-width: 440px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-w) solid var(--color-border);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-card);
}
.hero__photo img { width: 100%; aspect-ratio: 440 / 560; object-fit: cover; object-position: 50% 20%; }
.hero__quote {
  position: relative;
  width: min(340px, 88%);
  margin: calc(-1 * var(--space-2xl)) 0 0 var(--space-s);
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-quiet);
  display: grid; gap: var(--space-s);
}
.hero__quote blockquote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.33; color: var(--color-text); }
.hero__quote figcaption { font-size: var(--step--1); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text); }

@media (min-width: 900px) {
  .hero { padding-top: var(--space-2xl); }
  /* align start, not centre: a centred photo jumps when the web fonts swap in
     and the text column changes height (CLS 0.115 on desktop, #1001627) */
  .hero--split .hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 5.5vw, 5rem); align-items: center; }
  .hero__media { margin: 0; max-width: none; padding: 0 0 0 var(--space-m); }
  .hero__media.has-quote { padding-bottom: var(--space-2xl); }
  .hero__photo { width: min(440px, 88%); }
  .hero__block { left: auto; width: min(480px, 92%); top: var(--space-m); bottom: auto; aspect-ratio: 480 / 560; }
  .hero__quote { position: absolute; left: calc(-1 * var(--space-l)); bottom: 0; margin: 0; width: min(340px, 72%); }
}
.hero--simple .hero__text { max-width: 820px; }
.hero--simple { padding-bottom: calc(var(--section-y) * 0.6); }

/* ---- Decor hero (#1002630) — a soft line drawing behind a simple hero
   (partials/hero-decor-<name>.njk). Sage rings + shield, sits under the
   text (isolation on .hero); faint top-right on phones, the empty right
   half on desktop. */
.hero--decor { position: relative; }
.hero__decor {
  position: absolute; z-index: -1; pointer-events: none;
  top: 0; right: -120px; width: 340px; height: auto; opacity: 0.35;
}
.hero__decor-rings circle { fill: none; stroke: var(--green-100); }
.hero__decor-lines { stroke: var(--green-400); opacity: 0.75; }
.hero__decor-shield { fill: var(--green-50); }
.hero__decor-key { fill: var(--green-100); }
.hero__decor-dots { fill: var(--green-300); }
@media (min-width: 900px) {
  .hero__decor { top: 50%; right: 0; width: min(640px, 46vw); transform: translateY(-50%); opacity: 1; }
}

/* ---- Video hero (#1001682, map #1001680) — decorative loop behind the hero.
   The hero stays an ivory band with ink text: an IVORY scrim (not a dark
   one) sits between the footage and the words. It never drops below 94%
   ivory under any text, which keeps even the muted grey (--ink-muted) and
   the terracotta eyebrow at AA over a pure-black pixel (tested: #1001682).
   Phones / reduced motion / Save-Data / no JS: the still (<picture>, 640px
   on phones) is the static fallback — hero-video.js never adds the sources. Media are absolutely
   positioned, so the text alone sets the height — no CLS. ---- */
.hero--video { position: relative; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  background: var(--color-bg);
}
.hero__still, .hero__video {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 60%;
}
/* The video is invisible until it is really playing (hero-video.js adds
   .is-playing), then crossfades in over the still — its first frame. */
.hero__video { opacity: 0; transition: opacity var(--dur-slowest) var(--ease-linear); }
.hero__video.is-playing { opacity: 1; }
/* Once the crossfade is done, drop the still: under the masked (semi-transparent)
   edges it bled through — the shore walker's close-up head ghosted over his
   distant last frame on /counselling/divorce-and-separation/ (#1001697). */
.hero__bg:has(.hero__video.is-playing) .hero__still { visibility: hidden; transition: visibility 0s linear var(--dur-slowest); }
/* Mirrored window: 0% keeps the harbour man (source-left) in frame once
   flipped — at 100% only his mug arm cleared the right edge (#1001701). */
.hero__video--flip { transform: scaleX(-1); object-position: 0% 60%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
}
/* Pause control (WCAG 2.2.2 — the loop runs past 5s). Shown by the script
   only once the video is actually playing. */
.hero__pause {
  position: absolute; right: var(--gutter); bottom: var(--space-m); z-index: 1;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: var(--border-w) solid var(--color-border); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-text);
  cursor: pointer;
}
.hero__pause[hidden] { display: none; }
.hero__pause .hero__play-icon, .hero__pause[aria-pressed="true"] .hero__pause-icon { display: none; }
.hero__pause[aria-pressed="true"] .hero__play-icon { display: block; }
/* Desktop (#1002130): bottom-right sat right under the fixed WhatsApp button on
   short-viewport heroes, hiding the pause control — park it top-right instead. */
@media (min-width: 900px) { .hero__pause { top: var(--space-m); bottom: auto; } }
/* Phones / tablets (#1001700 — "too subtle on mobile"): the text runs the
   full width here, so a 94% wash left nothing to see. Instead the still gets
   its own clear window ABOVE the words — a picture band at near-full
   strength that fades to 94% ivory by the band's edge and solid ivory by
   the eyebrow, so the AA sums above still hold under every line of text.
   One gradient, one layer — two stacked layers left a 1px seam of raw
   photo. Pure CSS padding, so the height is known before paint — no CLS. */
@media (max-width: 899.98px) {
  /* body + .hero: outranks the tighter .page-service / .page-trust hero top */
  body .hero.hero--video { --hero-band: clamp(11rem, 52vw, 20rem); padding-top: calc(var(--hero-band) + var(--space-m)); }
  .hero--video :is(.hero__still, .hero__video),
  .hero--video .hero__bg::after { bottom: auto; height: calc(var(--hero-band) + var(--space-m)); }
  .hero--video .hero__bg::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg) 8%, transparent) 0,
      color-mix(in srgb, var(--color-bg) 8%, transparent) calc(var(--hero-band) * 0.55),
      color-mix(in srgb, var(--color-bg) 94%, transparent) var(--hero-band),
      var(--color-bg) 100%);
  }
}
@media (min-width: 900px) {
  /* Two columns: the words sit left, so the scrim holds 94% there and
     thins out to the right, where the footage (or Brian's photo) is. */
  .hero--video {
    /* where the text column starts / ends (% = hero width, resolved in the gradient) */
    --hero-text-x: max(var(--gutter), (100% - var(--container)) / 2);
    --hero-scrim-solid: calc(var(--hero-text-x) + min(100% - 2 * var(--gutter), var(--container)) / 2);
    --hero-scrim-thin: calc(var(--hero-scrim-solid) + 22%);
  }
  .hero--video .hero__bg::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--color-bg) 94%, transparent) 0,
      color-mix(in srgb, var(--color-bg) 94%, transparent) var(--hero-scrim-solid),
      color-mix(in srgb, var(--color-bg) 40%, transparent) var(--hero-scrim-thin));
  }
  /* Text-only hero: the footage fills the right-hand side instead of hiding
     under the words, and the text column narrows to leave it room. */
  .hero--video.hero--simple .hero__text { max-width: 680px; }
  .hero--video.hero--simple :is(.hero__still, .hero__video) {
    left: auto; width: 62%;
    /* no hard left or top edge — the watercolour's paper tone isn't quite ivory */
    mask-image: linear-gradient(90deg, transparent, black 30%), linear-gradient(180deg, transparent, black 18%);
    mask-composite: intersect;
  }
  /* The mask flips with scaleX(-1), so a mirrored clip needs it the other way
     round, or its fade lands on the right and the left edge shows (#1001699). */
  .hero--video.hero--simple .hero__video--flip {
    mask-image: linear-gradient(270deg, transparent, black 30%), linear-gradient(180deg, transparent, black 18%);
  }
  .hero--video.hero--simple { --hero-scrim-solid: calc(var(--hero-text-x) + 720px); }
  /* Split hero: settle the strip under the photo + quote card back to ivory,
     so the footage reads round the portrait, not as a smudge beneath it. */
  .hero--video.hero--split .hero__bg::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(0deg, color-mix(in srgb, var(--color-bg) 94%, transparent) 0, transparent 28%);
  }
}

/* =====================================================================
   ISSUE CARDS — whole card clickable via a stretched title link (R4)
   Pack "Who I work with" card: paper, hairline, sage icon disc, serif title.
   ===================================================================== */
.issue-grid > li { display: flex; }
.issue-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-s);
  width: 100%;
  padding: var(--space-m);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 600px) { .issue-card { padding: var(--space-l); } }
.issue-card__title { margin-top: var(--space-2xs); font-size: var(--step-2); font-weight: var(--weight-medium); line-height: 1.23; }
.issue-card__link { color: var(--color-heading); text-decoration: none; }
.issue-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* stretch */
.issue-card__blurb { color: var(--color-text-muted); flex: 1; font-size: var(--step-0); }
.issue-card__cue {
  align-self: flex-start;
  font-size: var(--text-note); font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}

/* Hover lift + keyboard twin: interactions.css (#1001688) */
/* Keyboard: the ring goes round the whole card, not just the title text */
.issue-card__link:focus-visible { outline: none; }
.issue-card:has(.issue-card__link:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* =====================================================================
   PATHWAYS (#1002124) — Brian's four specialist pathways, home + hub.
   Issue-card paper + a serif numeral; links carry the R4 anchors. A one-link
   card is clickable all over (stretched link); a two-link card isn't.
   Slot 5 (.pathway--more) = sand tile spanning two columns so the grid stays
   3+(1+2) / 2+2+2 with four pathways (complex mental health dropped, #1002128).
   ===================================================================== */
.pathway-grid > li { display: flex; }
@media (min-width: 600px) { .pathway-grid > li:has(> .pathway--more) { grid-column: span 2; } }
.pathway {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-s);
  width: 100%;
  padding: var(--space-m);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 600px) { .pathway { padding: var(--space-l); } }
.pathway__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-s); }
.pathway__num {
  font-family: var(--font-serif); font-style: italic; font-size: var(--step-3); line-height: 1;
  color: var(--color-accent);
}
.pathway__title { margin-top: var(--space-2xs); font-size: var(--step-2); font-weight: var(--weight-medium); line-height: 1.23; }
.pathway__desc { color: var(--color-text-muted); flex: 1; font-size: var(--step-0); }
.pathway__links { display: flex; flex-direction: column; gap: var(--space-2xs); padding: 0; margin: 0; list-style: none; }
.pathway__link {
  font-size: var(--text-note); font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.pathway__link::after { content: " \2192"; } /* → */
.pathway--single .pathway__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* stretch */
.pathway--single .pathway__link:focus-visible { outline: none; }
.pathway--single:has(.pathway__link:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.pathway--more {
  justify-content: center; align-items: flex-start;
  background: var(--color-surface-alt); border-color: transparent;
}
.pathway__more-text { font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.35; color: var(--color-heading); }
.pathway__more-note { color: var(--color-text-muted); font-size: var(--text-note); }
.pathway__more-note a { color: var(--color-primary); }
.pathway--more .btn { margin-top: var(--space-2xs); }
.pathways__after { margin-top: var(--space-xl); max-width: var(--measure); color: var(--color-text-muted); }

/* =====================================================================
   CTA BLOCK
   ===================================================================== */
.cta {
  display: grid; gap: var(--space-l);
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
@media (min-width: 600px) { .cta { padding: var(--space-xl); } }
.cta--quiet { background: var(--color-surface-quiet); }
.cta--quiet .cta__body { color: var(--color-text); }
.cta--dark { background: var(--color-dark-bg); color: var(--color-dark-text); --color-focus: var(--green-300); }
.section--alt .cta--panel { background: var(--color-surface); border: var(--border-w) solid var(--color-border); }

.cta__text > * + * { margin-top: var(--space-s); }
.cta__title { font-size: var(--step-4); }
.cta__body { color: var(--color-text-muted); max-width: 40rem; font-size: var(--step-1); }
.cta--dark .cta__title { color: var(--color-dark-text); }
.cta--dark .cta__title em { color: var(--color-night-accent); }
.cta--dark .cta__body { color: var(--color-dark-muted); }
.cta--dark .eyebrow { color: var(--color-dark-muted); }

.cta__points { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-size: var(--text-note); color: var(--color-text-muted); }
.cta__points li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.cta__points li::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5L20 7' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5L20 7' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cta--dark .cta__points { color: var(--color-dark-muted); }
.cta--dark .cta__points li::before { background: var(--green-300); }

.cta__actions { display: grid; gap: var(--space-s); }
.cta--dark .btn--light, .cta--dark .btn--light:hover, .cta--dark .btn--light:focus-visible { color: var(--color-on-light-btn); }
.cta--dark .btn--ghost-light { color: var(--color-dark-text); }
@media (min-width: 600px) { .cta__actions { display: flex; flex-wrap: wrap; } }
@media (min-width: 900px) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xl); padding: var(--space-2xl); }
  .cta__actions { flex-direction: column; align-items: stretch; }
}

/* =====================================================================
   FAQ ACCORDION — pack: serif 24px questions, plus/minus, hairlines
   ===================================================================== */
.faq { border-top: var(--border-w) solid var(--color-border-strong); }
.faq__item { border-bottom: var(--border-w) solid var(--color-border-strong); }
.faq__q { font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem); font-weight: var(--weight-regular); letter-spacing: 0; line-height: 1.33; }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  width: 100%; min-height: 76px;
  padding: 1.25rem 0;
  background: none; border: 0; text-align: left;
  font-family: var(--font-heading); font-size: inherit; line-height: inherit;
  color: var(--color-heading);
  transition: color var(--dur-fast) var(--ease);
}
.faq__icon {
  flex: none; width: 22px; height: 22px;
  fill: none; stroke: var(--color-primary); stroke-width: 1.75; stroke-linecap: round;
}
.faq__icon-v { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); transform-origin: center; }
.faq__btn[aria-expanded="true"] .faq__icon-v { transform: rotate(90deg); opacity: 0; }
.faq__a-inner { padding-bottom: 1.75rem; padding-right: var(--space-2xl); color: var(--color-text-muted); max-width: var(--measure); font-size: var(--step-0); }
@media (max-width: 599px) { .faq__a-inner { padding-right: 0; } }
.faq__a-inner > * + * { margin-top: var(--space-s); }
.faq__a-inner ul { padding-left: 1.25em; }
.faq__a-inner li::marker { color: var(--color-accent); }
.faq__a[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .faq__a:not([hidden]) .faq__a-inner { animation: faq-in var(--dur) var(--ease); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
/* No JS: every answer is shown; the toggle icon is meaningless, so hide it */
.no-js .faq__icon { display: none; }
.no-js .faq__btn { cursor: default; }

/* FAQ section layout from the pack: intro left (4 cols), list right (8) */
.faq-split { display: grid; gap: var(--space-xl); }
.faq-split__intro > * + * { margin-top: var(--space-m); }
.faq-split__intro p:not(.eyebrow) { color: var(--color-text-muted); }
@media (min-width: 900px) {
  .faq-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-l); align-items: start; }
  .faq-split__intro { padding-right: var(--space-l); }
}

/* =====================================================================
   AUTHOR / CREDENTIALS BOX
   ===================================================================== */
.author {
  display: grid; gap: var(--space-m);
  padding: var(--space-m);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
}
.author__photo { width: 112px; height: 112px; border-radius: var(--radius-md); object-fit: cover; object-position: 50% 18%; }
.author__body > * + * { margin-top: var(--space-2xs); }
.author__name { font-family: var(--font-heading); font-size: var(--step-2); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--color-heading); }
.author__letters { font-style: italic; font-weight: var(--weight-regular); color: var(--color-primary); white-space: nowrap; }
.author__role { font-size: var(--step--1); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.author__bio { padding-top: var(--space-2xs); max-width: var(--measure); }
.author__creds { display: grid; gap: var(--space-2xs); padding-top: var(--space-2xs); }
.author__creds li { display: flex; gap: var(--space-2xs); align-items: flex-start; }
.author__creds svg { flex: none; margin-top: 0.2em; color: var(--color-primary); }
.author__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-l); padding-top: var(--space-xs); font-weight: var(--weight-medium); }
.author__links a { text-underline-offset: 6px; }
@media (min-width: 600px) {
  .author--full { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-l); gap: var(--space-l); }
  .author--full .author__photo { width: 160px; height: 200px; }
}
@media (min-width: 900px) {
  .author--full { padding: var(--space-xl); gap: var(--space-xl); }
  .author--full .author__photo { width: 200px; height: 250px; }
}

/* Compact: a byline strip for the foot of service pages */
.author--compact { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--space-s) var(--space-m); }
.author--compact .author__photo { width: 64px; height: 64px; border-radius: var(--radius-pill); }
.author--compact .author__name { font-size: var(--step-1); }
.author--compact .author__role { letter-spacing: 0; text-transform: none; font-weight: var(--weight-regular); }
.author--compact .author__links { padding-top: 0; font-size: var(--step--1); }
/* ≥900px: one full-width row — photo · name · role · links (#1001714, Mike) */
@media (min-width: 900px) {
  .author--compact { padding: var(--space-xs) var(--space-m); gap: var(--space-s); }
  .author--compact .author__photo { width: 48px; height: 48px; }
  .author--compact .author__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-m); }
  .author--compact .author__body > * + * { margin-top: 0; }
  .author--compact .author__role { padding-left: var(--space-m); border-left: var(--border-w) solid var(--color-border); }
  .author--compact .author__links { margin-left: auto; }
}

/* =====================================================================
   "WHEN ONLINE THERAPY MAY NOT BE THE RIGHT FIT" (R8)
   A full-container row, not a card: heading + intro left, the "not the
   right choice if" list right, urgent strip across the bottom. (Was an
   880px card stranded left with dead space beside it — #1001718, Mike.)
   ===================================================================== */
.fit {
  display: grid; gap: var(--space-l);
  padding: var(--space-m);
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.fit__main > * + * { margin-top: var(--space-s); }
.fit__side > * + * { margin-top: var(--space-m); }
.fit__title { font-size: var(--step-3); }
.fit__title em { color: var(--color-accent); }
.fit__lead { font-size: var(--step-1); color: var(--color-text); }
.fit__list { padding-left: 1.25em; }
.fit__list li + li { margin-top: var(--space-2xs); }
.fit__list li::marker { color: var(--color-accent); }
.fit__urgent { padding-top: var(--space-m); border-top: var(--border-w) solid var(--color-border); font-size: var(--text-note); color: var(--color-text); }
.fit__urgent a { font-weight: var(--weight-semi); }
@media (min-width: 600px) { .fit { padding: 2.5rem; } }
/* ≥900px: the row — intro column | hairline | list column, urgent below */
@media (min-width: 900px) {
  .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; padding: 3rem; }
  .fit__side { padding-left: var(--space-2xl); border-left: var(--border-w) solid var(--color-border); }
  .fit__urgent { grid-column: 1 / -1; margin-top: calc(-1 * var(--space-s)); }
}

/* =====================================================================
   STEPS — pack "How it works": big serif numeral over a 2px green rule
   ===================================================================== */
.steps { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }
.steps__item { display: flex; flex-direction: column; gap: var(--space-s); padding-top: var(--space-m); border-top: 2px solid var(--color-primary); }
.steps__n { font-family: var(--font-serif); font-size: clamp(3rem, 2.4rem + 2.5vw, 4rem); line-height: 1; color: var(--color-primary); }
.steps__title { margin-top: var(--space-2xs); font-size: var(--step-2); font-weight: var(--weight-medium); line-height: 1.3; }
.steps__item p { color: var(--color-text-muted); }
/* Button + note row under the steps */
.steps-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-2xl); }
.steps-foot p { font-size: var(--text-note); color: var(--color-text-muted); }

/* =====================================================================
   CALLOUT — ivory strip with an italic serif line + link (pack)
   ===================================================================== */
.callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s) var(--space-l);
  padding: var(--space-m);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
@media (min-width: 600px) { .callout { padding: 1.75rem var(--space-l); } }
.callout__text { flex: 1 1 22rem; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem); line-height: 1.36; color: var(--color-text); }
.callout__link { flex: none; }

/* =====================================================================
   ABOUT SPLIT — pack "About me": portrait + arcs block, text + <dl>
   ===================================================================== */
.about-split { display: grid; gap: var(--space-2xl); align-items: center; }
.about-split__media { position: relative; max-width: 460px; width: 100%; }
/* The frame clips the photo's hover zoom (interactions.css) */
.about-split__frame { position: relative; overflow: hidden; border-radius: var(--radius-md); border: var(--border-w) solid var(--color-border); }
.about-split__frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }
.about-split__block {
  position: absolute; left: calc(-1 * var(--gutter)); bottom: calc(-1 * var(--space-l));
  width: min(280px, 60%); aspect-ratio: 1;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-primary); overflow: hidden;
}
.about-split__arcs { left: 0; top: 0; width: 280px; height: 280px; color: var(--green-300); opacity: 0.55; }
.about-split__body > * + * { margin-top: var(--space-m); }
.about-split__name { font-size: var(--step-4); }
.about-split__name em { display: block; font-size: 0.6em; margin-top: 0.2em; }
.about-split__bio { font-size: var(--step-1); line-height: 1.58; }
.about-split__facts {
  display: grid; gap: var(--space-m) var(--space-l);
  padding-top: 1.75rem; border-top: var(--border-w) solid var(--color-border);
}
@media (min-width: 600px) { .about-split__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-split__facts dt { font-size: var(--step--1); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.about-split__facts dd { margin: var(--space-3xs) 0 0; }
.about-split__links { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); }
@media (min-width: 900px) {
  .about-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(var(--space-2xl) + var(--space-l)); }
  .about-split__media { max-width: none; padding-right: var(--space-m); }
  .about-split__media img { aspect-ratio: auto; height: min(640px, 48vw); }
}

/* =====================================================================
   CONTACT BAND — pack "Get in touch": deep green, arcs, card on the right
   ===================================================================== */
.contact-band {
  position: relative; overflow: hidden;
  padding-block: calc(var(--section-y) * 1.14);
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
  --color-focus: var(--green-300);
}
.contact-band__arcs { left: 0; bottom: 0; width: min(520px, 90vw); height: auto; color: var(--color-primary); }
.contact-band__inner { position: relative; display: grid; gap: var(--space-2xl); align-items: start; }
.contact-band__text > * + * { margin-top: 1.75rem; }
.contact-band .eyebrow { color: var(--green-300); }
.contact-band h2 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); line-height: 1.15; color: var(--color-dark-text); }
.contact-band h2 em { color: var(--color-night-accent); }
.contact-band__lede { font-size: var(--step-1); color: var(--green-300); }
.contact-band__lines { display: grid; gap: 0.875rem; padding-top: 1.75rem; border-top: var(--border-w) solid var(--green-600); }
.contact-band__lines li { display: flex; align-items: center; gap: var(--space-xs); font-size: 1rem; }
@media (min-width: 600px) { .contact-band__lines li { font-size: 1.125rem; } }
.contact-band__lines .icon, .contact-band__lines .icon-wa { flex: none; width: 20px; height: 20px; color: var(--green-300); }
.contact-band__lines a { color: var(--color-dark-text); text-decoration: none; overflow-wrap: anywhere; }

.contact-band__card {
  display: grid; gap: var(--space-s);
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  --color-focus: var(--green-700);
}
@media (min-width: 600px) { .contact-band__card { padding: 2.75rem; } }
.contact-band__card-kicker { font-size: var(--step--1); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.contact-band__card-title { font-family: var(--font-serif); font-size: clamp(1.625rem, 1.4rem + 0.8vw, 1.875rem); line-height: 1.25; }
.contact-band__price { font-family: var(--font-serif); font-size: clamp(2.75rem, 2.3rem + 1.6vw, 3.25rem); line-height: 1.1; color: var(--color-primary); }
.contact-band__points { display: grid; gap: 0.625rem; padding: var(--space-m) 0 var(--space-2xs); border-top: var(--border-w) solid var(--color-border); color: var(--color-text-muted); }
.contact-band__points li { display: flex; align-items: center; gap: var(--space-2xs); }
.contact-band__points .icon { flex: none; color: var(--color-primary); }
.contact-band__card .btn { width: 100%; }
@media (min-width: 900px) {
  .contact-band__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-l); }
  .contact-band__text { padding-right: 2.5rem; }
  .contact-band__card { max-width: 560px; justify-self: end; width: 100%; }
}


/* =====================================================================
   SHARED PAGE PIECES (#1001631) — first built for the service template,
   now reused by the trust pages (/about/, /fees/). Class names keep their
   svc- prefix so the men's page markup didn't have to change.
   ===================================================================== */
/* ---- ui.crumbs(): quiet breadcrumb line above the hero ---- */
.crumbs { padding-top: var(--space-m); font-size: var(--step--1); color: var(--color-text-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.crumbs li + li::before { content: "/"; color: var(--color-decor); }
.crumbs a { color: var(--color-text-muted); }
.crumbs [aria-current] { color: var(--color-text); }
/* One line, always (#1002132): a crumb that wraps once the webfont lands pushes the hero
   down (CLS 0.16 at 360px on Complex mental health). The current page truncates — its
   full name is the H1 right below. */
.crumbs ol { flex-wrap: nowrap; }
.crumbs li { flex-shrink: 0; white-space: nowrap; }
.crumbs li:last-child { flex-shrink: 1; min-width: 0; }
.crumbs [aria-current] { display: block; overflow: hidden; text-overflow: ellipsis; }

/* ---- .svc-checks: the pack's arrow list on hairlines (sage band) ---- */
.svc-checks { display: grid; }
@media (min-width: 600px) { .svc-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.svc-checks li {
  display: flex; gap: 0.875rem;
  padding: 1.25rem 0;
  border-top: var(--border-w) solid var(--green-400);
  color: var(--color-text);
}
.svc-checks .icon { flex: none; margin-top: 3px; color: var(--green-900); stroke-width: 1.75; }

/* ---- ui.questions(): question-led H2s on the sand band, heading left, answer right ---- */
.svc-qs__eyebrow { margin-bottom: var(--space-xl); }
.svc-q + .svc-q { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--border-w) solid var(--color-border); }
.svc-q__title { font-size: var(--step-2); line-height: var(--leading-snug); }
.svc-q .prose a[href^="#"] { font-weight: var(--weight-semi); }

/* Question cards on an ivory band (#1001695, hub "Questions I'm often
   asked"): opt in with .qs-band on the <section>. The band gets depth from
   a sage light pool top-right, a sand pool bottom-left, the paper grain of
   the sage bands and the pack's arcs off the corner; each question becomes
   a raised paper card with a big italic serif numeral (generated content,
   decorative). Ink on paper everywhere, so contrast is unchanged. */
.qs-band {
  position: relative; isolation: isolate; overflow: hidden;
  counter-reset: qs;
  background:
    radial-gradient(ellipse 55% 60% at 100% 0%, color-mix(in srgb, var(--green-100) 90%, transparent), transparent 72%),
    radial-gradient(ellipse 60% 70% at 0% 100%, color-mix(in srgb, var(--sand) 85%, transparent), transparent 75%),
    var(--color-bg);
}
.qs-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .2 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.22;
}
.qs-band__arcs { top: 0; right: 0; z-index: -1; width: min(520px, 70vw); height: auto; color: var(--green-300); opacity: 0.5; }
.qs-band .svc-q {
  counter-increment: qs;
  position: relative;
  padding: var(--space-l) var(--space-m);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.qs-band .svc-q + .svc-q { margin-top: var(--space-m); padding-top: var(--space-l); border-top: var(--border-w) solid var(--color-border); }
.qs-band .svc-q__head::before {
  content: counter(qs, decimal-leading-zero);
  display: block;
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--step-4); line-height: 1;
  color: var(--green-400);
}
@media (min-width: 900px) {
  .qs-band .svc-q { padding: var(--space-xl) var(--space-2xl); }
  .qs-band .svc-q + .svc-q { padding-top: var(--space-xl); }
}

/* ---- ui.feeCard(): the paper £80 card (service fee band, /fees/) ---- */
.svc-fee__card { color: var(--color-text); --color-focus: var(--green-700); }
/* the card is light: undo .section--dark's light link colours inside it */
.section--dark .svc-fee__card .btn--primary, .section--dark .svc-fee__card .btn--primary:hover, .section--dark .svc-fee__card .btn--primary:focus-visible { color: var(--color-on-primary); }
.section--dark .svc-fee__card .btn--secondary { color: var(--color-heading); }
.section--dark .svc-fee__card .btn--secondary:hover, .section--dark .svc-fee__card .btn--secondary:focus-visible { color: var(--color-on-primary); }
.svc-fee__card .svc-fee__amount { color: var(--color-primary); }
.svc-fee__card > * + * { margin-top: var(--space-m); }
.svc-fee__price { display: flex; align-items: baseline; gap: var(--space-2xs); color: var(--color-heading); }
.svc-fee__amount { font-family: var(--font-serif); font-size: var(--step-5); line-height: 1; color: var(--color-primary); }
.svc-fee__per { color: var(--color-text-muted); }
.svc-fee__facts { display: grid; gap: var(--space-2xs); font-size: var(--step--1); color: var(--color-text-muted); }
.svc-fee__facts li { display: flex; gap: var(--space-2xs); align-items: baseline; }
.svc-fee__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; transform: translateY(-2px); }
.svc-fee__actions { display: grid; gap: var(--space-s); padding-top: var(--space-2xs); }

/* ---- ui.priceCards() + ui.infoStrip(): the pack's "Fees & practicalities" ---- */
.price-cards { display: grid; gap: var(--space-m); }
@media (min-width: 700px) { .price-cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.price-card {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: var(--space-l); border-radius: var(--radius-md);
  background: var(--color-surface); border: var(--border-w) solid var(--color-border);
}
@media (min-width: 900px) { .price-card { padding: 2.25rem; } }
.price-card__kicker { font-size: var(--step--1); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.price-card__name { display: flex; flex-direction: column; gap: var(--space-3xs); font-family: var(--font-serif); font-size: clamp(1.625rem, 1.4rem + 0.8vw, 1.875rem); font-weight: 400; line-height: 1.25; }
.price-card__price { font-size: clamp(2.75rem, 2.3rem + 1.6vw, 3.25rem); line-height: 1.15; color: var(--color-primary); }
.price-card__points { display: flex; flex-direction: column; gap: 0.625rem; flex-grow: 1; padding-top: 1.25rem; border-top: var(--border-w) solid var(--color-border); color: var(--color-text-muted); }
.price-card .btn { width: 100%; justify-content: center; }

.info-strip { display: grid; gap: var(--space-l); padding-top: var(--space-l); border-top: var(--border-w) solid var(--color-border-strong); }
@media (min-width: 600px) { .info-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .info-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); } }
.info-strip li { display: flex; flex-direction: column; gap: var(--space-2xs); }
.info-strip__label { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--step--1); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text); }
.info-strip__label .icon { color: var(--color-primary); }
.info-strip__text { font-size: var(--text-note); line-height: 1.6; color: var(--color-text-muted); }

/* =====================================================================
   WHO BAND + FEE BAND — ui.whoBand() / ui.feeBand() (#1001632; were
   service.css, now shared with the /counselling/ hub)
   ===================================================================== */
/* ---- Who it's for: the pack's sage "Does this sound familiar?" band ----
   Heading block 5 cols, arrow list on sage hairlines + ivory callout 7 cols. */
/* Texture + depth (#1001696) — the same recipe as the home "hello" band
   (home.css, #1001694) so the two sage bands read as one family: light
   pooling top-left, deeper sage bottom-right, a fine paper grain, the pack's
   arcs fading off the corner, and the list lifted onto a soft paper panel.
   All decoration sits under the text (z-index -1, isolate); ink on the
   deepest sage is still > 5:1. */
.svc-who {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, color-mix(in srgb, var(--color-bg) 50%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 80% at 100% 100%, color-mix(in srgb, var(--green-400) 55%, transparent), transparent 75%),
    var(--color-surface-quiet);
}
.svc-who::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .2 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.35;
}
.svc-who__arcs { left: 0; bottom: 0; z-index: -1; width: min(560px, 80vw); height: auto; color: var(--color-bg); opacity: 0.45; }
.svc-who .svc-checks {
  padding: var(--space-2xs) var(--space-l);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 34%, transparent);
  box-shadow: var(--shadow-card), inset 0 1px 0 color-mix(in srgb, var(--color-bg) 70%, transparent);
}
.svc-who .svc-checks li:first-child, .svc-who .svc-checks li:nth-child(2) { border-top-color: transparent; }
@media (max-width: 599px) { .svc-who .svc-checks li:nth-child(2) { border-top-color: var(--green-400); } }
.svc-who .callout { box-shadow: var(--shadow-lift); }
.svc-who__grid { display: grid; gap: var(--space-xl); }
.svc-who__head > * + * { margin-top: var(--space-m); }
.svc-who__head h2 { font-size: var(--step-4); line-height: 1.17; }
.svc-who__intro { font-size: var(--step-1); color: var(--color-text); }
.svc-who__body { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .svc-who__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--grid-gap); }
  .svc-who__head { padding-right: var(--space-l); }
}

/* ---- Fee + book: the pack's deep-green "Get in touch" band — copy left,
   ivory card right = ui.feeCard() (card styles above) ---- */
.svc-fee-band { position: relative; overflow: hidden; }
.svc-fee-band .prose { color: var(--color-dark-muted); }
.svc-fee-band .prose strong { color: var(--color-dark-text); }
.svc-fee { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .svc-fee { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-2xl); align-items: start; } }
.svc-fee__text > * + * { margin-top: var(--space-m); }

/* =====================================================================
   ENQUIRY FORM (#1001633) — pack "Get in touch" form (Main.dc.html ~l.338):
   paper card, 52px fields, 4px field radius, stone border (3.55:1 — passes
   the 3:1 rule for field outlines), pill radios, 18px consent tick.
   ===================================================================== */
.enquiry {
  position: relative; display: grid; gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  --color-focus: var(--green-700);
}
@media (min-width: 600px) { .enquiry { padding: 2.75rem; } }
.enquiry__intro { font-size: var(--text-fine); color: var(--color-text-muted); }
.enquiry__grid { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .enquiry__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { font-size: var(--text-note); line-height: 1.45; font-weight: var(--weight-semi); color: var(--color-text); }
.field legend { padding: 0; margin-bottom: var(--space-2xs); }
.field__opt { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.field__req { color: var(--color-accent); }
.field__hint { font-size: var(--text-fine); line-height: 1.55; color: var(--color-text-muted); }
.field__error { font-size: var(--text-fine); line-height: 1.55; font-weight: var(--weight-medium); color: var(--color-error); }
.field input:not([type=radio]):not([type=checkbox]), .field textarea {
  width: 100%; min-height: 52px; padding: 0 var(--space-s);
  border: var(--border-w) solid var(--color-decor); border-radius: var(--radius-sm);
  background: var(--color-surface); font-size: 1rem; color: var(--color-text);
}
.field textarea { padding: 0.875rem var(--space-s); line-height: 1.6; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring); outline-offset: 0; border-color: var(--color-primary); }
/* 2px look via an inset shadow, not a wider border, so the text never jumps a pixel (#1001689) */
.enquiry .field input[aria-invalid="true"], .enquiry .field textarea[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }

/* Pill radios — the pack's "I'm interested in" row. Stack on phones. */
.pills { display: grid; gap: var(--space-2xs); }
@media (min-width: 600px) { .pills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pill {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 52px; padding: var(--space-2xs) var(--space-s);
  border: var(--border-w) solid var(--color-decor); border-radius: var(--radius-sm);
  text-align: center; cursor: pointer;
}
.field .pill { font-size: var(--text-note); font-weight: var(--weight-medium); line-height: 1.3; }
.pill input { flex: none; margin: 0; accent-color: var(--color-primary); }
.pill:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background: var(--color-surface-quiet); }
.pill:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.pill input:focus-visible { outline: none; }

.field--check { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--space-xs); row-gap: var(--space-2xs); align-items: start; }
.field--check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-primary); }
.field--check label { font-size: var(--text-fine); line-height: 1.6; font-weight: var(--weight-regular); color: var(--color-text-muted); }
.field--check .field__error { grid-column: 2; }

.enquiry__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.enquiry__actions .btn { flex: 1 1 100%; }
@media (min-width: 600px) { .enquiry__actions .btn { flex: 0 0 auto; } }
.enquiry__alt { font-size: var(--text-fine); color: var(--color-text-muted); }
.enquiry__alt a { font-weight: var(--weight-medium); }
.enquiry__status:empty { display: none; }
.enquiry__status { padding: var(--space-s) var(--space-m); border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); background: var(--color-primary-wash); }
.enquiry__status[data-state="error"] { border-left-color: var(--color-error); background: var(--color-accent-wash); }
.enquiry__status:focus { outline: none; }
.enquiry.is-sending .btn { opacity: 0.7; pointer-events: none; }
.enquiry__secure { display: flex; gap: var(--space-2xs); padding-top: var(--space-s); border-top: var(--border-w) solid var(--color-border); font-size: var(--text-fine); line-height: 1.6; color: var(--color-text-muted); }
.enquiry__secure .icon { flex: none; margin-top: 2px; color: var(--color-primary); }

/* =====================================================================
   LEGAL DOCUMENT (#1001639) — /privacy/ + /terms/. Pack pieces only: paper
   contents card (card border/radius/shadow), serif numerals like .steps__n,
   hairlines between sections like the question stack.
   ===================================================================== */
.legal__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) {
  .legal__grid { grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr); grid-template-areas: "aside head" "aside body"; column-gap: var(--space-2xl); row-gap: 0; align-items: start; }
  .legal__head { grid-area: head; }
  .legal__body { grid-area: body; }
  .legal__aside { grid-area: aside; position: sticky; top: calc(var(--header-h) + var(--space-m)); }
}
.legal__toc {
  padding: var(--space-l);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.legal__toc-kicker {
  font-size: var(--step--1); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent);
}
.legal__toc-list { margin-top: var(--space-s); padding: 0; list-style: none; }
.legal__toc-list li + li { border-top: 1px solid var(--color-border); }
.legal__toc-list a {
  display: flex; gap: var(--space-xs); align-items: baseline;
  padding-block: 0.55rem; color: var(--color-text); text-decoration: none; font-size: var(--text-note); line-height: 1.4;
}
.legal__toc-num { flex: none; min-width: 1.5em; font-family: var(--font-serif); font-size: 1.125rem; color: var(--color-primary); }
.legal__updated, .legal__toc-aside {
  display: flex; gap: var(--space-2xs); align-items: center;
  margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--color-border);
  font-size: var(--text-fine); color: var(--color-text-muted);
}
.legal__updated svg { flex: none; color: var(--color-primary); }
.legal__toc-aside { display: block; margin-top: var(--space-s); padding-top: 0; border-top: 0; }
.legal__toc-aside a { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.legal__head { max-width: var(--measure); }
@media (min-width: 900px) { .legal__head { margin-bottom: var(--space-xl); } }
.legal__item { padding-block: var(--space-l); border-top: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-h) + var(--space-s)); }
.legal__title { display: flex; gap: var(--space-s); align-items: baseline; font-size: var(--step-2); font-weight: var(--weight-medium); line-height: 1.3; }
.legal__num { flex: none; font-family: var(--font-serif); font-size: 1.5em; line-height: 1; color: var(--color-primary); }
.legal__item .prose { margin-top: var(--space-s); }
.legal__item .prose a { overflow-wrap: anywhere; }

/* =====================================================================
   PHOTO BAND (#1001683) — a normal ivory/sand/sage/deep-green band with
   a photo underneath as texture: the band's own colour is washed over it
   (tokens.css §9), so it still reads as that band. Map:
   proposals/otil/otil-media-backgrounds-map.md §3.
   Markup: <section class="section section--alt section--photo bg-calm-warm">
   The image only arrives when js/section-bg.js adds .has-bg (~300px before
   the band scrolls in). No JS → the plain band colour, still valid.
   Never on the issue pages or behind forms / FAQ lists (#1001676).
   ===================================================================== */
.section--photo {
  --photo-colour: var(--color-surface-alt);
  --photo-amount: var(--photo-wash);
  background-size: cover;
  background-position: var(--bg-pos, center);
  background-repeat: no-repeat;
}
.section--photo.has-bg {
  background-image:
    linear-gradient(color-mix(in srgb, var(--photo-colour) var(--photo-amount), transparent),
                    color-mix(in srgb, var(--photo-colour) var(--photo-amount), transparent)),
    var(--bg-image);
}
.section--photo.section--quiet { --photo-colour: var(--color-surface-quiet); --photo-amount: var(--photo-wash-quiet); }
.section--photo.section--dark, .section--photo.contact-band { --photo-colour: var(--color-dark-bg); }
.section--photo.home-how { --photo-colour: var(--color-primary); }
/* Over a photo the lighter text colours dip under AA at the worst pixel, so
   each steps one shade stronger (all ≥4.5:1 measured against the images):
   muted → ink, terracotta eyebrow → terra-700, link → green-900,
   sage-on-green → ivory, hover terracotta on green → ivory */
.section--photo {
  --color-text-muted: var(--color-text);
  --color-accent: var(--color-accent-hover);
  --color-link: var(--color-link-hover);
}
.section--photo:is(.section--dark, .home-how) { --color-dark-muted: var(--color-dark-text); }
.section--photo:is(.section--dark, .home-how, .contact-band) { --color-dark-accent: var(--color-dark-text); }

/* The pool — 800w for phones, 1600w above. Room photos are pre-cropped to a
   landscape band + softened (they are portrait originals). */
.bg-calm-warm { --bg-image: url("/images/bg/calm-warm-800.webp"); }
.bg-calm-sage { --bg-image: url("/images/bg/calm-sage-800.webp"); }
.bg-moorland  { --bg-image: url("/images/bg/moorland-800.webp"); --bg-pos: 60% center; }
.bg-harbour   { --bg-image: url("/images/bg/harbour-800.webp"); --bg-pos: 30% center; }
.bg-laptop-join { --bg-image: url("/images/bg/laptop-join-800.webp"); --bg-pos: 80% center; } /* #1001708 */
@media (min-width: 700px) {
  .bg-calm-warm { --bg-image: url("/images/bg/calm-warm-1600.webp"); }
  .bg-calm-sage { --bg-image: url("/images/bg/calm-sage-1600.webp"); }
  .bg-moorland  { --bg-image: url("/images/bg/moorland-1600.webp"); }
  .bg-harbour   { --bg-image: url("/images/bg/harbour-1600.webp"); }
  .bg-laptop-join { --bg-image: url("/images/bg/laptop-join-1600.webp"); }
}
/* BAATN practitioner-member logo on /about/ "Member of" row (Brian's WhatsApp 23 Oct, #1002892). White JPG → shown as a small card. */
.member-badge { display: block; width: max-content; margin-bottom: var(--space-xs); border-radius: var(--radius-sm); border: var(--border-w) solid var(--color-border); background: var(--color-logo-plate); padding: 6px 10px; }
.member-badge img { display: block; width: 180px; height: auto; }