/* Ontos Wellness — main stylesheet.
 * Visual language: the approved Claude Design comp ("Ontos Wellness
 * Website.dc.html", 3 Sep 2026), mapped onto the approved brand palette.
 *
 *   1. QUIET CARDS. Hairline-bordered off-white cards on an ivory ground,
 *      12px radius, a short accent dash instead of icons. No shadows.
 *   2. SLATE / IVORY / OFF-WHITE ALTERNATION. Pivotal sections go
 *      full-bleed Deep Slate; supporting sections sit on an off-white
 *      band. (The comp's olive fills are slate here — see tokens.css:
 *      ivory-on-olive is 3.27:1 and fails AA for body copy.)
 *   3. SERIF THROUGHOUT. Playfair Display at 500 for display, Source
 *      Serif 4 for body. Display numerals in Warm Olive carry the
 *      numbered sequences (large text only — 3.27:1 needs ≥3:1).
 *
 * Tokens and the measured contrast table live in tokens.css. Read it first —
 * Deep Slate is the only body-text colour that passes AA on light grounds.
 */

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, ol, ul, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ---- Base ----------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-synthesis: none; /* never fake a weight this family does not have */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}

h1 { font-size: var(--size-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); letter-spacing: -0.01em; }

p + p { margin-top: var(--space-5); }
p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--motion-duration) var(--motion-ease);
}
a:hover { text-decoration-color: currentColor; }

/* Numerals in meta and data align. Averia's are proportional by default. */
time, .post__meta, .post-card__meta, .steps__number, .pagination {
  font-variant-numeric: tabular-nums;
}

/* ---- Browser surfaces ------------------------------------------------
 * The parts we did not draw still belong to the design. */
::selection { background: var(--slate); color: var(--ivory); }
:root { accent-color: var(--slate); caret-color: var(--slate); }

* { scrollbar-color: var(--olive) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--olive);
  border: 3px solid var(--ground);
  border-radius: var(--radius-pill);
}

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: var(--space-4);
  transform: translateY(-120%);
  background: var(--slate); color: var(--ivory);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-button) var(--radius-button);
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); }
main:focus { outline: none; }

/* ---- Rules and dashes ------------------------------------------------
 * The comp separates with quiet hairlines and marks cards with a short
 * accent dash. No tick scale, no draw animation. */
.rule {
  height: 1px;
  background: var(--border);
  margin-block: var(--space-6);
}
.rule--tight { margin-block: var(--space-5); }
.rule--heading { margin-block: var(--space-5) var(--space-7); max-width: 22rem; }

/* The comp's 26px accent line at a card's head. Olive on light grounds
 * (decorative), mist on slate. */
.dash {
  display: block;
  width: 26px; height: 1px;
  background: var(--olive);
  margin-bottom: var(--space-5);
}
.band--slate .dash, .panel--filled .dash { background: var(--mist); }

/* ---- Line -------------------------------------------------------------
 * One continuous line runs through the site: the hero's horizon, the rule
 * between sections, the axis numerals hang from, the footer's closing line.
 * Hairline, slate on light, mist on slate. It divides, measures or
 * connects — never decorates. */
.line {
  border: 0; height: 1px; margin: 0; width: 100%;
  background: color-mix(in srgb, var(--slate) 35%, transparent);
}
.band--slate .line, .panel--filled .line {
  background: color-mix(in srgb, var(--mist) 60%, transparent);
}
.line--section { margin: 0; }

/* Numeral axis — a vertical line down the left; each item hangs from a
 * tick. Numerals are display-size Playfair in full slate (not olive): the
 * typographic signature of the site. */
.numeral-axis {
  position: relative; list-style: none; margin: 0;
  padding-left: var(--space-6);
}
.numeral-axis::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: color-mix(in srgb, var(--slate) 35%, transparent);
}
.band--slate .numeral-axis::before { background: color-mix(in srgb, var(--mist) 60%, transparent); }
.numeral-axis__item {
  position: relative; display: grid; gap: var(--space-4);
  padding-block: var(--space-7);
}
.numeral-axis__item + .numeral-axis__item { border-top: 1px solid var(--border); }
.numeral-axis__item::before {
  content: ''; position: absolute; top: var(--space-7);
  left: calc(-1 * var(--space-6)); width: var(--space-4); height: 1px;
  background: color-mix(in srgb, var(--slate) 35%, transparent);
}
.band--slate .numeral-axis__item::before { background: color-mix(in srgb, var(--mist) 60%, transparent); }
.numeral-axis__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-numeral);
  line-height: 0.85;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: -0.06em; /* optical: sit the cap on the tick */
}
.band--slate .numeral-axis__num { color: var(--mist); }
.numeral-axis__title { margin-bottom: var(--space-3); }
.numeral-axis__body { max-width: 52ch; }
@media (min-width: 720px) {
  .numeral-axis { padding-left: var(--space-8); }
  .numeral-axis__item::before { left: calc(-1 * var(--space-8)); width: var(--space-6); }
  .numeral-axis__item { grid-template-columns: minmax(7ch, 0.6fr) 2fr; gap: var(--space-8); align-items: start; }
}

/* Rows — a record, not a card grid. Title column, body column, hairlines. */
.rows {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--slate) 35%, transparent);
}
.rows__item {
  display: grid; gap: var(--space-2);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.rows__item:last-child { border-bottom-color: color-mix(in srgb, var(--slate) 35%, transparent); }
.rows__title { font-family: var(--font-display); font-size: var(--size-h3); margin: 0; line-height: 1.2; }
.rows__body { margin: 0; max-width: 56ch; }
.rows__index {
  font-family: var(--font-display); font-size: 1.125rem; line-height: 1.2;
  color: var(--text); font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .rows__item { grid-template-columns: 4ch 1fr 1.6fr; gap: var(--space-6); align-items: baseline; }
  .rows__item--no-index { grid-template-columns: 1fr 1.6fr; }
}

/* The Infinity Stroke — once per page, large, clipped by its section. */
.has-stroke { position: relative; overflow: hidden; }
.has-stroke > .container { position: relative; z-index: 1; }
.stroke {
  position: absolute; pointer-events: none; z-index: 0;
  width: clamp(420px, 60vw, 980px);
  opacity: 0.32;
}
.stroke svg { width: 100%; height: auto; display: block; overflow: visible; }
.stroke path { fill: none; stroke: var(--slate); stroke-width: 4; stroke-linecap: round; }
.band--slate .stroke path { stroke: var(--mist); }
/* Positions keep the stroke off the reading column: top-right sits behind
 * the empty half of a page head; bottom-right closes a section; top-left
 * is for sections whose copy sits right. */
.stroke--tl { top: -14%; left: -18%; }
.stroke--tr { top: -34%; right: -12%; }
.stroke--br { bottom: -34%; right: -10%; }
/* Measured path length: 3 560 user units (rounded up). */
@keyframes stroke-draw { to { stroke-dashoffset: 0; } }
.js .stroke path {
  stroke-dasharray: 3600; stroke-dashoffset: 3600;
  animation: stroke-draw 1100ms var(--motion-ease-out) 250ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .js .stroke path { animation: none !important; stroke-dashoffset: 0; }
}

/* Pattern band — the brand pattern as a section ground, one per page at
 * most. The SVG copies carry 35% opacity, so the pattern reads as texture. */
.band--pattern {
  background-color: var(--surface);
  background-image: url('../images/pattern-mist.svg');
  background-size: 360px auto;
}
.band--slate.band--pattern {
  background-color: var(--slate);
  background-image: url('../images/pattern-ivory.svg');
}

/* Figure with an image graded to the palette's grain: soft radius, no
 * border, sized by intrinsic ratio so layout never shifts. */
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }
.figure--3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.figure--3x4 img { aspect-ratio: 3 / 4; object-fit: cover; }
.figure--16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.media-split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .media-split { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .media-split--reverse > .figure { order: 2; }
}

/* ---- Scroll-driven motion ---------------------------------------------
 * The whole motion system is one metaphor: the site takes measurements as
 * you read. Everything below is CSS scroll-driven animation — zero JS on
 * the scroll path, so a mid-range Android never pays for it. Browsers
 * without animation-timeline get the IO fallback (rules) or a static,
 * fully-visible page (everything else). Reduced motion turns it all off.
 */
@supports (animation-timeline: view()) {
  /* Headings and figures rise 12px as they enter (comp: fade-and-rise,
     ~12px, respecting reduced motion). Body copy never moves. */
  [data-reveal] {
    animation: reveal-rise both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }

  /* Images develop: the duotone grade eases back as the figure enters,
     like a print coming up in the tray. */
  .duotone::after {
    animation: develop both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
}

@keyframes reveal-rise {
  from { opacity: 0.001; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes develop {
  from { opacity: 0.85; }
  to   { opacity: 0.45; }
}

/* Header gains its hairline only once the page has moved — the instrument
 * registers that reading has begun. */
@supports (animation-timeline: scroll()) {
  .site-header {
    border-bottom-color: transparent;
    animation: header-registers linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 120px;
  }
}
@keyframes header-registers {
  from { border-bottom-color: transparent; }
  to   { border-bottom-color: var(--border); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .duotone::after,
  .site-header {
    animation: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .duotone::after { opacity: 0.45; }
  .site-header { border-bottom-color: var(--border); }
}

/* ---- Layout --------------------------------------------------------- */
.container {
  width: min(100% - var(--space-6) * 2, var(--container));
  margin-inline: auto;
}
.container--measure { max-width: var(--measure); }

.section { padding-block: clamp(var(--space-8), 11vw, var(--space-10)); }
.section__heading { max-width: 22ch; margin-bottom: var(--space-5); }
.section__intro { margin-bottom: var(--space-7); max-width: 60ch; }

/* Heading with a trailing link on the same baseline (comp: "Writing ·
 * All articles →"). */
.section__head-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.section__head-row .section__heading { margin-bottom: 0; }
.section__head-row .link-arrow { margin-top: 0; white-space: nowrap; }

.newsletter--centred { text-align: center; }
.newsletter--centred .newsletter__form { justify-content: center; margin-inline: auto; }
.newsletter--centred .newsletter__line { margin-inline: auto; }

/* Bands. A section on Deep Slate re-points the semantic tokens, so every
 * child inverts correctly instead of being overridden one rule at a time.
 * On slate, secondary text is Mist Blue (4.86:1) — tinted from the ground,
 * never grey. */
.band--slate {
  --ground: var(--slate);
  --surface: color-mix(in srgb, var(--black) 12%, var(--slate));
  --text: var(--ivory);
  --text-strong: var(--off-white);
  --text-muted: var(--mist);
  --border: color-mix(in srgb, var(--ivory) 22%, transparent);
  background: var(--slate);
  color: var(--ivory);
}
.band--slate h1, .band--slate h2, .band--slate h3 { color: var(--off-white); }
.band--slate ::selection { background: var(--ivory); color: var(--slate); }

/* Off-white supporting band — the comp's #FBF5E9 sections, mapped. */
.band--surface {
  background: var(--off-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Cards on an off-white band sit on ivory, and vice versa (comp does the
 * same inversion). */
.band--surface { --surface: var(--ivory); }

/* Uppercase kicker above a heading. Slate, not olive — 12px must hold
 * 4.5:1. The pill variant is the comp's "Lagos & Abuja" hero eyebrow. */
.kicker {
  display: block;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--space-5);
}
.kicker--pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

.split { display: grid; gap: var(--space-6); }
@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--portrait { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--space-9); }
}

.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* ---- Header --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid var(--border);
}
/* The translucent blur is a desktop refinement only — continuous blur
   repaints are real money on the mid-range Android §11 targets. */
@media (min-width: 900px) {
  @supports (backdrop-filter: blur(10px)) {
    .site-header {
      background: color-mix(in srgb, var(--ivory) 88%, transparent);
      backdrop-filter: blur(10px);
    }
  }
}

.site-header__inner {
  display: flex; align-items: center; gap: var(--space-5);
  padding-block: var(--space-4);
}
.site-header__brand { margin-right: auto; }

.site-nav__list { display: none; gap: var(--space-6); }
.site-nav__list a {
  text-decoration: none;
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  padding-block: var(--space-2);
  position: relative;
}
/* Underline grows from the left — the measure motif, in miniature. */
.site-nav__list a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-duration) var(--motion-ease-out);
}
.site-nav__list a:hover::after { transform: scaleX(1); }
.site-nav__item.is-current a::after { transform: scaleX(1); }

.site-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-button); cursor: pointer;
}
.site-nav__bars, .site-nav__bars::before, .site-nav__bars::after {
  display: block; width: 18px; height: 1px; background: var(--text);
}
.site-nav__bars { position: relative; }
.site-nav__bars::before, .site-nav__bars::after { content: ''; position: absolute; }
.site-nav__bars::before { top: -6px; }
.site-nav__bars::after { top: 6px; }

.site-nav__list.is-open {
  display: flex; flex-direction: column; gap: var(--space-4);
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--ivory); /* the page ground, never a lighter panel */
  border-bottom: 1px solid var(--border);
  padding: var(--space-6);
}

@media (min-width: 900px) {
  .site-nav__toggle { display: none; }
  .site-nav__list { display: flex; }
}

/* ---- Buttons and links ---------------------------------------------- */
.button {
  --btn-bg: var(--slate);
  --btn-fg: var(--ivory);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-button);
  text-decoration: none;
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease);
}
.button--primary { --btn-bg: var(--slate); --btn-fg: var(--ivory); }   /* 5.95:1 */
.button--primary:hover { --btn-bg: var(--black); --btn-fg: var(--off-white); }
.button--on-panel { --btn-bg: var(--ivory); --btn-fg: var(--slate); }  /* 5.95:1 */
.button--on-panel:hover { --btn-bg: var(--off-white); --btn-fg: var(--black); }
.button:disabled, .button.is-busy { opacity: 0.55; cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6);
  font-size: var(--size-small); letter-spacing: 0.04em;
  text-decoration: none;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition: border-color var(--motion-duration) var(--motion-ease);
}
.link-arrow::after {
  content: '→';
  transition: transform var(--motion-duration) var(--motion-ease-out);
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---- Pills ---------------------------------------------------------- */
.pill {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--size-small);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease);
}
.pill:hover { background: var(--slate); color: var(--ivory); border-color: var(--slate); }
.pill.is-current { background: var(--slate); color: var(--ivory); border-color: var(--slate); }
.band--slate .pill:hover, .band--slate .pill.is-current {
  background: var(--ivory); color: var(--slate); border-color: var(--ivory);
}
.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-6); }
.pillar-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
/* Pills that are LINKS meet the 44px touch minimum (WCAG 2.5.8); the
   credential pills are labels and stay compact. */
.pillar-nav .pill, a.pill {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-block: 0;
}

/* ---- Panels ---------------------------------------------------------
 * Hairline-bounded, not shadowed boxes. On slate the filled panel is a
 * deeper slate so the two read as a pair rather than a card grid. */
.panel {
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column;
  min-height: 280px;
}
.panel > .numeral { margin-bottom: auto; padding-bottom: var(--space-6); }
.panel--filled { background: var(--panel); color: var(--on-panel); }
.panel--filled .panel__title { color: var(--on-panel); }
.band--slate .panel--filled { background: var(--surface); }
.panel--outline { border: 1px solid var(--border); }
.panel__title { margin-bottom: var(--space-3); }
.panel__label {
  font-size: var(--size-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  color: var(--text-muted);
}

/* Bordered card — the comp's workhorse: surface fill, hairline border,
 * 12px radius, a .dash at its head. Border strengthens on hover only when
 * the card is a link. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-6) var(--space-7);
  transition: border-color var(--motion-duration) var(--motion-ease);
}
a.card:hover, a.card:focus-visible {
  border-color: color-mix(in srgb, var(--slate) 50%, transparent);
}
.card__title { font-size: var(--size-h3); margin-bottom: var(--space-3); }
.card-grid--4 { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .card-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Display numeral — the comp's Playfair numbers (amber there, olive here;
 * large display text only, ≥3:1). Mist on slate panels. */
.numeral {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.numeral--large { font-size: clamp(2.75rem, 4.5vw, 3.5rem); }
.band--slate .numeral, .panel--filled .numeral { color: var(--mist); }

/* Left-accent note — the comp's 2px amber-edged aside, olive here. */
.note-accent {
  padding-left: var(--space-4);
  border-left: 2px solid var(--olive);
  font-size: var(--size-small);
  line-height: 1.6;
  max-width: 44ch;
}
.band--slate .note-accent, .panel--filled .note-accent { border-left-color: var(--mist); }

/* ---- Steps ----------------------------------------------------------
 * Numbered because the sequence is the information: diagnostics precede
 * the programme, which precedes the six months. */
.steps { display: grid; }
.steps__item {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-5) var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}
.steps__item:last-child { border-bottom: 1px solid var(--border); }
.steps__number {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1;
  color: var(--text-muted); /* large display numeral — 3.27:1 is permitted */
  font-variant-numeric: tabular-nums;
}
.steps__title { margin-bottom: var(--space-3); }

/* Lede split: narrow heading column against a wide reading column —
 * the comp's 0.75fr/1.25fr page rhythm. */
.split--lede { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) {
  .split--lede { grid-template-columns: 0.75fr 1.25fr; gap: var(--space-8); }
}

/* Three-column numbered row — the comp's Approach components table:
 * numeral · title · body, hairline top borders. */
.row-3 {
  display: grid; gap: var(--space-4) var(--space-6);
  padding-block: var(--space-7);
  border-top: 1px solid var(--border);
  align-items: start;
}
@media (min-width: 900px) { .row-3 { grid-template-columns: 88px 1fr 1fr; } }
.row-3__title { font-size: var(--size-h3); }

/* Bordered-top item grids: Programme "How to start", About values. */
.tally-grid { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .tally-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tally-grid--5 { grid-template-columns: repeat(5, 1fr); } }
.tally {
  border-top: 1px solid color-mix(in srgb, var(--slate) 25%, transparent);
  padding-top: var(--space-5);
}
.tally .numeral { display: block; margin-bottom: var(--space-4); }
.tally-cta { margin-top: var(--space-7); }
.tally__title { font-size: 1.3125rem; margin-bottom: var(--space-3); }
.tally__value { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; color: var(--text-strong); }

/* ---- Page heads ------------------------------------------------------ */
.page-head { padding-block: clamp(var(--space-8), 9vw, var(--space-10)) var(--space-6); }
.page-head__title { max-width: 16ch; }
.page-head__intro { margin-top: var(--space-6); font-size: 1.15em; max-width: 54ch; }
/* Comp page heads close with a hairline across the full bleed. */
.page-head--ruled {
  border-bottom: 1px solid var(--border);
  padding-bottom: clamp(var(--space-7), 6vw, var(--space-9));
}
/* When the page head is followed by the section line, give the head the
 * same closing breath the ruled variant had. */
.page-head + .line { margin-top: 0; }
.page-head.has-stroke { padding-bottom: clamp(var(--space-7), 6vw, var(--space-9)); }

/* Tighter section for single statements (scope of practice, "why not
 * shorter"). Roughly a third less air than .section. */
.section--tight { padding-block: clamp(var(--space-7), 6vw, var(--space-8)); }

/* A statement: display-size body copy in Playfair, full slate. Used for
 * the scope-of-practice line so it reads as a considered sentence rather
 * than a boxed warning. */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.4;
  max-width: 36ch;
  margin: 0;
}
.band--slate .statement { color: var(--on-panel); }

/* Numeral axis item carrying a single value line (About's beliefs). */
.numeral-axis__value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: var(--text-strong);
  margin: 0;
  align-self: center;
}

/* Qualification lists (comp): ✓ on the slate panel, — on the outline one.
 * Markers are aria-hidden in the markup; the list itself carries meaning. */
.check-list { display: flex; flex-direction: column; gap: var(--space-5); }
.check-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--space-4);
  line-height: 1.6;
}
.check-list__mark { color: var(--mist); }
.panel--outline .check-list__mark { color: var(--olive); }

/* Slotted qualification lists: the client types a plain Markdown list, so the
 * tick/dash marks and the grid are reproduced in CSS instead of hand-written
 * spans (fix for the who-this-is-for slotting round — the marks were lost
 * when the <ul class="check-list"> was replaced by a slotted <ul>).
 * Scoped to .check-list-host so no other list on the site is affected. */
.check-list-host ul {
  display: flex; flex-direction: column; gap: var(--space-5);
  list-style: none; margin: 0; padding: 0;
}
.check-list-host li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--space-4);
  line-height: 1.6;
}
.check-list-host li::before { content: "✓"; content: "✓" / ""; color: var(--mist); }
.check-list-host--not li::before { content: "—"; content: "—" / ""; }
.panel--outline .check-list-host li::before { color: var(--olive); }
.qual-note {
  font-style: italic;
  margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* Scope-of-practice card (comp: bordered, on the surface colour). */
.scope-card {
  max-width: 860px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--slate) 35%, transparent);
  border-radius: var(--radius-card);
  padding: var(--space-7) var(--space-7);
}

/* ---- Hero ------------------------------------------------------------ */
/* The one orchestrated moment: on load the headline rises, the rule draws,
 * the sub and actions follow, the image develops. ~800ms total, once,
 * exponential ease-out. After this, the page holds still and lets the
 * scroll-driven system do the talking. */
.hero { padding-block: clamp(var(--space-8), 10vw, var(--space-10)) 0; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-develop {
  from { opacity: 1; }
  to   { opacity: 0.55; }
}
.js .hero__title,
.js .hero__sub,
.js .hero__actions {
  animation: hero-rise 600ms var(--motion-ease-out) both;
}
.js .hero__sub { animation-delay: 140ms; }
.js .hero__actions { animation-delay: 240ms; }
.js .hero .duotone::after {
  animation: hero-develop 900ms var(--motion-ease-out) 200ms both;
  animation-timeline: auto;
  animation-range: normal;
}
@media (prefers-reduced-motion: reduce) {
  .js .hero__title, .js .hero__sub, .js .hero__actions,
  .js .hero .duotone::after {
    animation: none !important;
  }
}
.hero__inner { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 6fr 5fr; gap: var(--space-9); } }
.hero__title { max-width: 14ch; }
/* The comp's italic accent line: Playfair italic, olive (display size —
 * 3.27:1 clears the 3:1 large-text bar). */
.hero__title em, .section__heading em {
  font-style: italic;
  color: var(--olive);
}
.band--slate .section__heading em { color: var(--mist); }
.hero__sub { margin-top: var(--space-6); max-width: 42ch; font-size: 1.15em; }
.hero__actions {
  margin-top: var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center;
}
.hero__actions .link-arrow { margin-top: 0; }
.hero__figure { position: relative; }
.hero__figure img { border-radius: var(--radius-card); }

/* Duotone: the portrait is graded into the palette rather than sitting on
 * top of it. Greyscale, then a slate/ivory tint through blend modes. */
.duotone { position: relative; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; }
.duotone img { filter: grayscale(1) contrast(1.08); width: 100%; }
.duotone::after {
  content: ''; position: absolute; inset: 0;
  background: var(--slate);
  mix-blend-mode: color;
  opacity: 0.55;
}
@media (prefers-reduced-transparency: reduce) { .duotone::after { opacity: 0; } }

/* ---- Post and page bodies -------------------------------------------- */
.post__header { padding-block: var(--space-8) var(--space-6); }
.post__footer { padding-block: var(--space-7) var(--space-9); }
.post__title { margin-top: var(--space-5); }
.post__excerpt { margin-top: var(--space-6); font-size: 1.15em; }
.post__meta, .post-card__meta {
  margin-top: var(--space-5);
  font-size: var(--size-small); letter-spacing: 0.04em;
}
.post__figure { margin-block: var(--space-8); }
.post__figure img { border-radius: var(--radius-card); }
.post__figure figcaption, .page__figure figcaption {
  margin-top: var(--space-4); font-size: var(--size-small);
}

.post__body > * + *, .page__body > * + * { margin-top: var(--space-5); }
.post__body h2, .page__body h2 { margin-top: var(--space-9); }
.post__body h3, .page__body h3 { margin-top: var(--space-7); }
.post__body img, .page__body img { border-radius: var(--radius-card); margin-block: var(--space-7); }
.post__body a, .page__body a { text-decoration-color: var(--olive); }

.post__body blockquote, .page__body blockquote {
  margin-block: var(--space-8);
  padding-left: var(--space-6);
  border-left: 1px solid var(--olive);
  font-family: var(--font-display);
  font-size: var(--size-h3);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Koenig editor cards — an editor can set any image wide or full-bleed. */
.post__body .kg-width-wide, .page__body .kg-width-wide {
  width: min(100vw - var(--space-6) * 2, var(--container));
  max-width: none; margin-inline: auto;
}
.post__body .kg-width-full, .page__body .kg-width-full {
  width: 100vw; max-width: none;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
}
.post__body .kg-width-full img, .page__body .kg-width-full img { border-radius: 0; }
.kg-card figcaption { margin-top: var(--space-3); font-size: var(--size-small); text-align: center; }

/* ---- Cards -----------------------------------------------------------
 * Comp: bordered card, image butted to the top edge, padded body. */
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--motion-duration) var(--motion-ease);
}
.post-card:hover, .post-card:focus-within {
  border-color: color-mix(in srgb, var(--slate) 50%, transparent);
}
.post-card__link { display: block; text-decoration: none; height: 100%; }
.post-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}
.post-card__body { padding: var(--space-6) var(--space-6) var(--space-7); }
.post-card__tag {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text);
}
.post-card__title { margin-block: var(--space-3); font-size: var(--size-h3); }
.post-card__link:hover .post-card__title { text-decoration: underline; text-underline-offset: 0.22em; }

.featured-post { padding-block: var(--space-7) var(--space-8); }
/* Comp: the featured article is one bordered card, image butted to the
 * left edge, text padded on the right. */
.featured-post__link {
  display: grid; gap: var(--space-6);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--motion-duration) var(--motion-ease);
}
.featured-post__link:hover, .featured-post__link:focus-visible {
  border-color: color-mix(in srgb, var(--slate) 50%, transparent);
}
@media (min-width: 900px) { .featured-post__link { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--space-8); } }
.featured-post__image { border-radius: 0; height: 100%; object-fit: cover; }
.featured-post__body { padding: var(--space-6); padding-left: 0; }
@media (max-width: 899px) { .featured-post__body { padding: var(--space-6); padding-top: 0; } }
.featured-post__title { margin-block: var(--space-4); font-size: var(--size-h2); }
.featured-post__link:hover .featured-post__title { text-decoration: underline; text-underline-offset: 0.2em; }

.related { padding-block: var(--space-8); }
.related__heading { margin-bottom: var(--space-6); }

.author-card { padding-block: var(--space-6); border-top: 1px solid var(--border); }
.author-card__name { letter-spacing: 0.04em; }
.author-card__bio { margin-top: var(--space-3); font-size: var(--size-small); }

/* ---- Disclaimer and scope of practice --------------------------------- */
.disclaimer, .scope-of-practice {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  font-size: var(--size-small);
  line-height: 1.65;
}
.disclaimer { margin-block: var(--space-7); }
.scope-of-practice { margin-block: var(--space-8); max-width: 62ch; }

/* ---- CTA band ---------------------------------------------------------
 * Slate ground, ivory type. Olive would be 3.27:1 and fail. */
.cta-band { padding-block: clamp(var(--space-9), 11vw, var(--space-10)); }
.cta-band__heading { max-width: 14ch; }
.cta-band__body { margin-block: var(--space-6) var(--space-8); max-width: 46ch; }

/* ---- Newsletter -------------------------------------------------------- */
.newsletter__line { margin-block: var(--space-4) var(--space-6); max-width: 46ch; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--space-3); max-width: 34rem; }
.newsletter__form input {
  flex: 1 1 220px; min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}
.newsletter__form input::placeholder { color: var(--text-muted); }
.newsletter__state { margin-top: var(--space-4); font-size: var(--size-small); }
.newsletter__state:empty { display: none; }
.newsletter__state--success { display: none; }
.newsletter--compact .newsletter__heading { font-size: var(--size-h3); }

/* ---- Forms ------------------------------------------------------------- */
.enquire__layout { display: grid; gap: var(--space-9); padding-bottom: var(--space-10); }
@media (min-width: 950px) {
  .enquire__layout { grid-template-columns: 7fr 4fr; align-items: start; }
  /* The comp keeps "What happens next" in view while the form scrolls. */
  .enquire__aside { position: sticky; top: 108px; }
}
.enquire__aside-heading { font-size: var(--size-h3); margin-bottom: var(--space-5); }
.enquire__figure { margin-bottom: var(--space-6); }
.enquire__figure img { max-height: 320px; object-position: center 30%; }
.enquire__reassurance { margin-top: var(--space-7); font-size: var(--size-small); max-width: 40ch; }

/* Aside: the numbered steps as a ruled list on the page ground — The
 * Record has no lighter panels. */
.aside-card { padding: 0; }
.aside-card .steps__item { padding-block: var(--space-4); }
.aside-card .steps__item:first-child { border-top: 0; padding-top: 0; }
.aside-card .steps__item:last-child { border-bottom: 0; padding-bottom: 0; }
.aside-card .steps__number { font-size: 1.05rem; line-height: 1.6; }

.enquire__note {
  max-width: 44ch;
  margin-bottom: var(--space-6);
  padding-left: var(--space-5);
  border-left: 1px solid var(--olive);
}
.enquire__after { margin-top: var(--space-5); }

.enquiry-form { display: grid; gap: var(--space-7); max-width: 45rem; }
.field { display: grid; gap: var(--space-3); }

/* Short-field rows — the comp pairs name/email and phone/age/city. */
.form-row { display: grid; gap: var(--space-5); }
@media (min-width: 720px) {
  .form-row { grid-template-columns: 1fr 1fr; align-items: start; }
  .form-row--three { grid-template-columns: 1fr 1fr 1fr; }
}

/* The cadence question sits in its own bordered card (comp). */
.field--fieldset {
  border: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
  background: transparent;
}
.field label, .field legend { line-height: 1.45; max-width: 52ch; }
/* A legend sits on the fieldset's border by default and collides with the
 * card's padding. Float it into normal flow so it reads as the question. */
.field--fieldset legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-4); }
.field--fieldset legend + * { clear: both; }
.req { opacity: 0.6; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: transparent; /* fields sit on the ivory; the line defines them */
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--slate) 45%, transparent);
  border-radius: var(--radius-button);
  transition: border-color var(--motion-duration) var(--motion-ease);
}
.field :is(input, select, textarea):hover { border-color: var(--olive); }
.field textarea { min-height: 9rem; resize: vertical; line-height: var(--leading-body); }

.field.has-error :is(input, select, textarea) { border-color: var(--black); border-width: 2px; }

/* Helper text sits BENEATH the field, never in a tooltip (§6). */
.field__help { font-size: var(--size-small); line-height: 1.55; max-width: 52ch; }
.field__error { font-size: var(--size-small); }
.field__error:not([hidden]) {
  display: flex; gap: var(--space-2); align-items: baseline;
}
.field__error:not([hidden])::before { content: '↳'; opacity: 0.7; }

.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-3); }
.radio, .checkbox { display: flex; gap: var(--space-3); align-items: start; cursor: pointer; }
.checkbox { margin-bottom: var(--space-4); line-height: 1.55; }
.radio input, .checkbox input { margin-top: 0.35em; width: 1.05em; height: 1.05em; flex-shrink: 0; }

.field--consent { gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border); }

.form-errors:empty { display: none; }
.form-errors,
.form-notice {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--black);
  border-radius: var(--radius-button);
  font-size: var(--size-small);
}

/* No-JavaScript failure notices. The enquiries service redirects back to
   /enquire/#error-… and :target reveals the matching line — no script. */
.form-notice { display: none; margin: 0; }
.form-notice:target { display: block; }

/* Honeypot: off-screen, not display:none — some bots skip hidden fields.
   Kept from assistive tech by aria-hidden and tabindex="-1" in the markup. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.enquiry-form__submit { justify-self: start; }

/* ---- Footer ------------------------------------------------------------ */
/* One ruled band. The line opens it, the line closes the link row, and the
 * scope statement is the last thing on every page. */
.site-footer { padding-block: var(--space-7) var(--space-7); margin-top: var(--space-9); }
.site-footer__top {
  display: grid; gap: var(--space-7);
  padding-block: var(--space-7);
}
@media (min-width: 900px) { .site-footer__top { grid-template-columns: 1.4fr 0.8fr 1fr 1.4fr; gap: var(--space-8); } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__company { color: var(--mist); }
.site-footer__col-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: var(--space-4);
}
.site-footer__line { margin-top: var(--space-5); font-size: var(--size-small); max-width: 28ch; }
.site-footer__nav ul { display: grid; gap: var(--space-3); }
.site-footer__nav a { font-size: var(--size-small); text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.site-footer__legal {
  padding-top: var(--space-7);
  font-size: var(--size-small); line-height: 1.65;
  display: grid; gap: var(--space-6);
}
@media (min-width: 900px) {
  .site-footer__legal { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .site-footer__legal p:last-child { text-align: right; }
}
.site-footer__legal p { margin: 0; }
.scope-of-practice-line { max-width: 60ch; }

/* ---- 404 ---------------------------------------------------------------- */
.error-page__actions {
  display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap;
  margin-top: var(--space-8);
}
.error-page__actions .link-arrow { margin-top: 0; }

/* ---- Pagination --------------------------------------------------------- */
.pagination {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-5);
  margin-block: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--size-small); letter-spacing: 0.04em;
}

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