.footer__band::before {
  filter: blur(26px);
  background:
    radial-gradient(50% 30% at 50% 34%, rgba(0, 78, 195, 0.30) 0%, rgba(0, 78, 195, 0) 82%),
    radial-gradient(40% 22% at 18% 30%, rgba(0, 78, 195, 0.20) 0%, rgba(0, 78, 195, 0) 82%),
    radial-gradient(40% 22% at 82% 30%, rgba(0, 78, 195, 0.20) 0%, rgba(0, 78, 195, 0) 82%);
}
/* ==========================================================================
   Feathers Life Coach & Counsellor — homepage
   Built from Figma PHBuWarr6GZjwgUKyzFoCo / 108:5697 "Desktop / Homepage".
   Tokens: see .specs/TOKENS.md · World: see DESIGN.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Type */
  --f-sans: "Rethink Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-h1: 3.25rem;      /* 52 */
  --t-h1-lh: 1.192;     /* 62 */
  --t-h2: 2.5rem;       /* 40 */
  --t-h2-lh: 1.25;      /* 50 */
  --t-h3: 1.375rem;     /* 22 */
  --t-lead: 1.1875rem;  /* 19 */
  --t-lead-lh: 1.632;   /* 31 */
  --t-body: 1rem;       /* 16 */
  --t-body-lh: 1.625;   /* 26 */
  --t-sm: 0.875rem;     /* 14 */
  --t-xs: 0.8125rem;    /* 13 */
  --t-stat: 1.875rem;   /* 30 */

  /* Colour */
  --c-primary: #004ec3;
  --c-primary-hover: #003a99;
  --c-primary-deep: #002066;
  --c-ink: #000000;
  --c-body: #333a52;
  --c-body-soft: #3d3d3d;      /* section leads, card intros */
  --c-white: #ffffff;
  --c-tint-blue: #cee5ed;
  --c-tint-off: #f7fbff;
  --c-hero-a: #a8e2ff;
  --c-hero-b: #ace2fc;
  --c-hero-c: rgba(191, 230, 253, 0);

  /* text on tinted surfaces */
  --c-term: #2c3355;           /* dt, card titles on tint */
  --c-term-body: #3f4664;      /* dd, card bodies on tint */
  --c-cta-body: #33405c;       /* CTA lead */

  /* footer (cool ground) -- the cream palette is retired: it lived only here,
     on a site that is blue everywhere else */
  --c-foot-body: #4a5163;
  --c-foot-muted: #6b7182;
  --c-foot-rule: rgba(0, 32, 102, 0.12);

  /* card washes */
  --c-card-blue-a: #c0e7ff;
  --c-card-blue-b: #edfbff;

  /* rules */
  --c-rule: rgba(0, 32, 102, 0.14);
  --c-rule-support: rgba(44, 51, 85, 0.16);
  --c-rule-sand: #e8dcc3;      /* warm hairline: training cards, core chips, mode cards */

  --g-hero: linear-gradient(90deg, var(--c-hero-a) 0%, var(--c-hero-b) 59.26%, var(--c-hero-c) 89.423%);
  --g-brand: linear-gradient(-69.11deg, #004ec3 0%, #002066 100%);

  /* Space */
  --sp-page: 20px;
  --w-page: 1440px;
  --w-band: 1316px;
  --w-wide: 1256px;
  --w-text: 1196px;
  --sp-section: 100px;

  /* Radius */
  --r-hero: 28px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* Elevation — offset + soft blur, never a zero-offset halo */
  --e-1: 0 1px 2px rgba(0, 32, 102, 0.05), 0 2px 8px rgba(0, 32, 102, 0.04);
  --e-2: 0 2px 4px rgba(0, 32, 102, 0.05), 0 8px 24px rgba(0, 32, 102, 0.07);
  --e-3: 0 4px 8px rgba(0, 32, 102, 0.06), 0 18px 44px rgba(0, 32, 102, 0.1);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-mid: 320ms;
  --dur-slow: 700ms;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: var(--t-body-lh);
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* an email or URL in prose must never force a box wider than the viewport */
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   3 · Browser surfaces — the parts we did not draw still carry the design
   -------------------------------------------------------------------------- */
::selection {
  background: #cfe2ff;
  color: var(--c-primary-deep);
}

html { scrollbar-color: #9dbede var(--c-tint-off); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-tint-off); }
::-webkit-scrollbar-thumb {
  background: #9dbede;
  border: 3px solid var(--c-tint-off);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: #7ba7cc; }

input, textarea { caret-color: var(--c-primary); }

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  translate: -50% -120%;
  padding: 12px 24px;
  background: var(--c-primary);
  color: var(--c-white);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  transition: translate var(--dur-fast) var(--ease-out);
}
.skip-link:focus { translate: -50% 0; }

/* --------------------------------------------------------------------------
   4 · Layout primitives
   -------------------------------------------------------------------------- */
.band {
  width: 100%;
  padding-inline: var(--sp-page);
}

.band--tint  { background: var(--c-tint-blue); }
.band--off   { background: var(--c-tint-off); }
.band--white { background: var(--c-white); }

.wrap {
  width: 100%;
  max-width: var(--w-text);
  margin-inline: auto;
}
.wrap--wide { max-width: var(--w-wide); }

.section { padding-block: var(--sp-section); }

/* The signature two-part heading: sans plain half + serif italic accent half */
.h2 {
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  color: var(--c-ink);
}
.h2 em,
.h1 em,
.about__h em,
.about__t em {
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: italic;
}

.section-head {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.section-head p,
.section-head-lead {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 1.25rem;   /* 20 */
  line-height: 1.5;     /* 30 */
  color: var(--c-body-soft);
}

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

/* --------------------------------------------------------------------------
   5 · Icons — Phosphor Icons (MIT), regular weight on a 256 grid.
   Phosphor draws filled paths, so colour comes from `fill`, never `stroke`.
   -------------------------------------------------------------------------- */
.i {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
  stroke: none;
}
.i--sm { width: 18px; height: 18px; }
.i--xs { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   6 · Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding-inline: 26px;
  border-radius: var(--r-lg);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: var(--e-1);
}
.btn--primary:hover { background: var(--c-primary-hover); translate: 0 -1px; box-shadow: var(--e-2); }
.btn--primary:active { translate: 0 0; box-shadow: var(--e-1); }

.btn--brand {
  height: 40px;
  padding-inline: 24px;
  border-radius: var(--r-md);
  background-image: var(--g-brand);
  color: var(--c-white);
}
.btn--brand:hover { box-shadow: var(--e-2); translate: 0 -1px; }

/* Actions that sit on a --g-brand panel (.svc__more, and anything like it).
   Kept as modifiers rather than per-panel rules so the next gradient callout
   reuses them instead of inventing a fourth button recipe. */
.btn--on-brand {
  background: var(--c-white);
  color: var(--c-primary-deep);
  font-weight: 600;
  box-shadow: var(--e-1);
}
.btn--on-brand:hover { translate: 0 -1px; box-shadow: var(--e-2); }
.btn--on-brand:active { translate: 0 0; box-shadow: var(--e-1); }

.btn--on-brand-quiet {
  background: rgba(255, 255, 255, 0.14);
  border: 0.8px solid rgba(255, 255, 255, 0.34);
  color: var(--c-white);
}
.btn--on-brand-quiet:hover { background: rgba(255, 255, 255, 0.24); }
.btn--on-brand-quiet .i {
  width: 18px;
  height: 18px;
  transition: translate var(--dur-fast) var(--ease-out);
}
.btn--on-brand-quiet:hover .i { translate: 3px 0; }

/* text + circular icon pair, e.g. "Call us ->" */
.btn-pair {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-ink);
}
.btn-pair__disc {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--r-lg);
  background: var(--c-white);
  color: var(--c-primary-deep);
  box-shadow: var(--e-1);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out);
}
.btn-pair:hover .btn-pair__disc {
  background: var(--c-primary);
  color: var(--c-white);
  translate: 2px 0;
}

.btn--quiet {
  background: var(--c-white);
  border: 0.8px solid var(--c-rule);
  color: var(--c-primary);
  box-shadow: var(--e-1);
}
.btn--quiet:hover { border-color: rgba(0, 78, 195, 0.4); box-shadow: var(--e-2); translate: 0 -1px; }
.btn--quiet .i { width: 18px; height: 18px; transition: translate var(--dur-fast) var(--ease-out); }
.btn--quiet:hover .i { translate: 3px 0; }

.link-u {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-thickness var(--dur-fast) var(--ease-out);
}
.link-u:hover { color: var(--c-primary-deep); text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   7 · Header — glass pill, fixed, with dropdown menus
   Figma 131:10 · 1316 wide, 80 tall, rgba(255,255,255,.6) + blur(12.5px), r20
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 34px 0 auto;
  z-index: 60;
  padding-inline: var(--sp-page);
  pointer-events: none;
  transition: inset-block-start var(--dur-mid) var(--ease-out);
}
.header__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: var(--w-band);
  height: 80px;
  margin-inline: auto;
  padding: 12px 60px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  transition: background-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.header.is-stuck { inset-block-start: 14px; }
.header.is-stuck .header__bar {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--e-2);
}

.brand {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: italic;
  font-size: 1.875rem;   /* 30 */
  line-height: 1;
  color: var(--c-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.brand:hover { color: var(--c-primary-deep); }

.nav { flex: 1 1 auto; }
.nav__list { display: flex; align-items: center; gap: 16px; }
.nav__item { position: relative; }


.nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--c-primary); background: rgba(0, 78, 195, 0.07); }
.nav__link[aria-current="page"] { color: var(--c-primary); }

.header__actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--c-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: rgba(0, 78, 195, 0.08); }

/* --------------------------------------------------------------------------
   8 · Hero — Figma 108:5700 / 116:7974
   1400x840 card, r28, photo bleed right, blue gradient wash left
   -------------------------------------------------------------------------- */
.hero {
  padding-top: var(--sp-page);
  padding-inline: var(--sp-page);
}
.hero__card {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 840px;
  margin-inline: auto;
  border-radius: var(--r-hero);
  overflow: hidden;
  background: var(--c-hero-b);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* The Figma zooms past `cover` — image scaled to 178.2% of the card and panned
   hard right (116:7976). The source photo's aspect matches that scale exactly,
   so these percentages reproduce the crop rather than distorting it. */
.hero__media img {
  position: absolute;
  width: 178.2%;
  height: 135.45%;
  left: -78.21%;
  top: -15.01%;
  max-width: none;
  object-fit: cover;
}
/* the blue wash that lets the headline sit on the photo */
.hero__wash {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 83.5%;              /* 1169 / 1400 */
  background: var(--g-hero);
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
}

.hero__copy {
  position: absolute;
  top: 226px;
  left: 80px;          /* Figma 116:7978 — 80 from the card edge, not the nav band */
  width: 560px;
  max-width: calc(100% - 160px);
}
.h1 {
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--c-ink);
}
.h1 span { display: block; }
.hero__lead {
  margin-top: 22px;
  max-width: 520px;
  font-size: var(--t-lead);
  line-height: var(--t-lead-lh);
  color: #12182b;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}

/* Stat bar — glass, inside the card, 40px above its bottom edge */
.stats {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 40px;
  translate: -50% 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1316px, calc(100% - 84px));
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
/* DOM order is dt (label) then dd (number) so the <dl> is valid and reads
   naturally; the visual order is reversed here. */
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 22px 20px;
  text-align: center;
}
.stat + .stat { box-shadow: inset 1px 0 0 0 var(--c-rule); }
.stat__n {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: var(--t-stat);
  line-height: 1.267;
  color: var(--c-primary-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__n > span { display: inline-flex; align-items: center; }
.stat__l {
  margin-top: 2px;
  font-size: var(--t-xs);
  line-height: 1.462;
  color: var(--c-body);
}

/* The one authored moment: the bar rises and resolves into focus on load. */
@media (prefers-reduced-motion: no-preference) {
  .stats {
    animation: stats-in var(--dur-slow) var(--ease-out) 260ms both;
  }
  @keyframes stats-in {
    from {
      opacity: 0;
      translate: -50% 22px;
      -webkit-backdrop-filter: blur(0px);
      backdrop-filter: blur(0px);
      background: rgba(255, 255, 255, 0.3);
    }
    to {
      opacity: 1;
      translate: -50% 0;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      background: rgba(255, 255, 255, 0.68);
    }
  }
}

/* --------------------------------------------------------------------------
   9 · Positioning statement — the page's <h1>
   The device: the section is built on ONE vertical seam taken from the
   heading's own grammar. Left of the seam is the practice as a place you can
   walk into — a bounded, washed panel holding a photograph, pinned to a named
   town. Right of it are the two practices the heading names and their reach,
   as open type on the white band. The heading stops being a label above
   content and becomes the thing the section is made of.
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 56px;
  padding-block: 92px;
}
/* the seam itself: one hairline in column 7, running the full height of both
   rows and fading at each end so it reads as an axis, not a border */
.about::before {
  content: "";
  grid-column: 7;
  grid-row: 1 / -1;
  justify-self: center;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%, var(--c-rule) 7%, var(--c-rule) 93%, transparent 100%);
}

.about__h {
  grid-column: 1 / span 6;
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  color: var(--c-ink);
}
.about__lead {
  grid-column: 8 / span 5;
  max-width: 46ch;
  font-size: 1.125rem;   /* 18 */
  line-height: 1.778;    /* 32 */
  color: var(--c-body-soft);
}

/* ---- left of the seam: here ---- */
.about__here {
  grid-column: 1 / span 6;
  border-radius: var(--r-hero);
  overflow: hidden;
  background: linear-gradient(176.198deg,
    var(--c-card-blue-a) 4.5205%, var(--c-card-blue-b) 85.836%);
  box-shadow: var(--e-1);
}
.about__figure {
  margin: 0;
  aspect-ratio: 3 / 2;   /* holds the box whether the photo has arrived or not */
}
.about__figure img { width: 100%; height: 100%; object-fit: cover; }

/* the placeholder is deliberate: the panel's own wash, a glass plate and a
   caption naming what belongs here. Never grey, never a broken-image icon. */
.about__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.22);
  border-bottom: 0.8px solid rgba(255, 255, 255, 0.7);
}
.about__ph-plate {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 0.8px solid rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  color: var(--c-primary);
}
.about__ph-plate .i { width: 28px; height: 28px; }
.about__ph-cap {
  font-size: var(--t-xs);
  line-height: 1.462;
  color: var(--c-term);
}

.about__here-body { padding: 28px; }
.about__t {
  font-size: 1.875rem;   /* 30 */
  line-height: 1.267;
  color: var(--c-ink);
}
.about__d {
  margin-top: 8px;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-term-body);
}

/* ---- right of the seam: the two practices, and their reach ---- */
.about__reach {
  grid-column: 8 / span 5;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about__route {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 20px;
  padding: 24px 14px;
  margin-inline: -14px;   /* text still aligns to the grid edge */
  border-top: 0.8px solid var(--c-rule);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.about__route:last-child { border-bottom: 0.8px solid var(--c-rule); }
.about__route-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.about__route-i { display: grid; place-items: center; color: var(--c-primary); }
.about__route-i .i { width: 22px; height: 22px; }
.about__route-t {
  font-size: 1.375rem;   /* 22 */
  font-weight: 600;
  line-height: 1.273;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.about__route-d {
  grid-column: 1;
  font-size: var(--t-sm);
  line-height: 1.571;
  color: var(--c-term-body);
}
.about__route-go {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 20px;
  height: 20px;
  color: var(--c-primary);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out);
}
.about__route:hover { background: rgba(0, 78, 195, 0.045); }
.about__route:hover .about__route-go { opacity: 1; translate: 4px 0; }
.about__route:hover .about__route-t { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   10 · Services — REWORKED from Figma 108:6254
   Figma had 5 incoherent tabs, placeholder dot-ring/rectangle art, no
   descriptions, and 8 solid blue buttons. Kept: the 26px card radius, the
   176.2deg wash geometry, the glass image well, the serif-italic card title.
   -------------------------------------------------------------------------- */
.svc__head { text-align: center; }
.svc__head .h2 { margin-bottom: 18px; }
.svc__head p {
  max-width: 56ch;
  margin-inline: auto;
  font-size: 1.25rem;      /* 20 */
  line-height: 1.5;        /* 30 */
  color: var(--c-body-soft);
}

/* Filters — one tab per real category; the panel shows that category only.
   42 services is too many for a flat grid, so the taxonomy does the navigating. */
.svc__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
.svc__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 18px;
  border: 0.8px solid transparent;
  border-radius: 10px;
  background: #f0f2f5;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.svc__tab .i { color: var(--dot, var(--c-primary)); }
.svc__tab:hover { background: #e6e9ee; }
.svc__tab[aria-selected="true"] {
  background: var(--c-white);
  border-color: var(--dot, var(--c-primary));
  color: var(--dot, var(--c-primary));
  box-shadow: var(--e-1);
}
.svc__count {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-body-soft);
  font-variant-numeric: tabular-nums;
}
.svc__tab[aria-selected="true"] .svc__count { color: inherit; }

.svc__panel { outline-offset: 6px; }
.svc__cat {
  margin-top: 44px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.625rem;   /* 30 */
  line-height: 1.267;
  text-align: center;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}

.svc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 216px;
  padding: 24px;
  border-radius: 26px;
  background: var(--wash, linear-gradient(176.198deg, #c0e7ff 4.5205%, #edfbff 85.836%));
  color: var(--c-ink);
  box-shadow: var(--e-1);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              translate var(--dur-mid) var(--ease-out);
}
.svc-card:hover { box-shadow: var(--e-3); translate: 0 -3px; }

/* One wash per category, all at the same lightness and gradient geometry so
   six hues still read as one system. */
.svc-card[data-group="personal"]     { --wash: linear-gradient(176.198deg, #c0e7ff 4.5205%, #edfbff 85.836%); --plate: #0063c7; }  /* sky blue      */
.svc-card[data-group="relationship"] { --wash: linear-gradient(176.198deg, #fbd8e3 4.5205%, #fef2f6 85.836%); --plate: #b03b62; }  /* soft rose     */
.svc-card[data-group="family"]       { --wash: linear-gradient(176.198deg, #fde2c8 4.5205%, #fff7ee 85.836%); --plate: #a55a15; }  /* warm apricot  */
.svc-card[data-group="career"]       { --wash: linear-gradient(176.198deg, #ccdcf3 4.5205%, #eff4fd 85.836%); --plate: #24528f; }  /* steel blue    */
.svc-card[data-group="addiction"]    { --wash: linear-gradient(176.198deg, #c5e9e0 4.5205%, #eefbf8 85.836%); --plate: #0d6a58; }  /* calm teal     */
.svc-card[data-group="specialized"]  { --wash: linear-gradient(176.198deg, #ddd9f5 4.5205%, #f5f3fd 85.836%); --plate: #4b45a2; }  /* soft lavender */

/* the glass well from the Figma card, resized to hold a drawn icon */
.svc-card__plate {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 0.8px solid rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  color: var(--plate, var(--c-primary));
}
.svc-card__plate .i { width: 28px; height: 28px; }

.svc-card__t {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.375rem;   /* 22 */
  line-height: 1.273;
  color: var(--c-ink);
  text-wrap: balance;
  letter-spacing: -0.005em;
}
.svc-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--plate, var(--c-primary));
}
.svc-card__go .i {
  width: 16px;
  height: 16px;
  transition: translate var(--dur-fast) var(--ease-out);
}
.svc-card:hover .svc-card__go .i { translate: 4px 0; }

.svc-card[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .svc-card { animation: card-in 340ms var(--ease-out) both; }
  @keyframes card-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
}

/* The closing offer under the services grid. It plays the same part as
   .train-offer at the foot of the training grid -- a grid ends, one panel
   invites the next step -- so it is built to the same recipe: brand gradient,
   translucent icon tile, serif title, actions on the end. Anything else here
   reads as a different site. */
.svc__more {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 48px;
  padding: 30px 34px;
  border-radius: 26px;
  background-image: var(--g-brand);
  color: var(--c-white);
  box-shadow: var(--e-2);
}
.svc__more-i {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 0.8px solid rgba(255, 255, 255, 0.3);
}
.svc__more-i .i { width: 28px; height: 28px; }
.svc__more h3 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem;   /* 26 */
  line-height: 1.231;
  color: var(--c-white);
  letter-spacing: -0.005em;
}
.svc__more p {
  margin-top: 6px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
/* the count is the point of the sentence, so it stays the brightest thing in it */
.svc__more strong { font-weight: 600; color: var(--c-white); }
.svc__more-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   11 · Meet Your Counsellor — Figma 108:5767
   -------------------------------------------------------------------------- */
.mc__head { text-align: center; margin-bottom: 56px; }
.mc__grid {
  display: grid;
  grid-template-columns: 440px 1fr;   /* Figma 108:5773 / 108:5775 */
  gap: 64px;
  align-items: start;
}
.mc__figure { margin: 0; }
.mc__figure img {
  width: 100%;
  aspect-ratio: 440 / 540;      /* Figma 108:5773 — reserve the box, no CLS */
  object-fit: cover;
  border-radius: 29px;
  background: var(--c-tint-blue);
  box-shadow: var(--e-2);
}
.mc__name {
  font-size: 2.125rem;   /* 34 */
  line-height: 1.2;
  color: var(--c-ink);
}
.mc__creds {
  margin-top: 10px;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-primary);
}
.mc__role {
  margin-top: 2px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.mc__bio { margin-top: 24px; max-width: 70ch; }
.mc__bio p { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--c-body-soft); }
.mc__bio p + p { margin-top: 16px; }

.mc__credentials { margin-top: 32px; padding-top: 26px; border-top: 0.8px solid var(--c-rule-support); }
.mc__credentials h3 {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-term);
}
.mc__credentials ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
  margin-top: 18px;
}
.mc__credentials li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--c-ink);
}
.mc__credentials li .i {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--c-term);
}

/* Pattern ticker — the clipped marquee row at the bottom of the Figma section */
.ticker {
  margin-top: 40px;
  padding-block: 16px;
  border-block: 0.8px solid var(--c-rule-support);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  gap: 0;
}
.ticker__group {
  display: flex;
  align-items: center;
  gap: 0;
  flex: none;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-inline: 18px;
  font-size: var(--t-body);
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-term);
}
.ticker__item .i { width: 14px; height: 14px; color: var(--c-primary); }

@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: ticker 34s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  @keyframes ticker { from { translate: 0 0; } to { translate: -50% 0; } }
}

/* --------------------------------------------------------------------------
   12 · Who We Support — ITERATED from Figma 108:5860
   Kept: the 2-column definition list, the 570px hairlines that do not bridge
   the gutter. Added: a drawn icon per group, a closing rule, hover feedback.
   -------------------------------------------------------------------------- */
.who__head { text-align: center; margin-bottom: 56px; }
.who__row {
  display: grid;
  grid-template-columns: 24px 206px 1fr;
  gap: 0 20px;
  align-items: start;
  padding: 24px 0;
  border-top: 0.8px solid var(--c-rule-support);
  transition: background-color var(--dur-fast) var(--ease-out);
}
/* close the list: the last row in each column also draws a bottom rule */
.who__row:nth-last-child(-n + 2) { border-bottom: 0.8px solid var(--c-rule-support); }
.who__row:hover { background: rgba(255, 255, 255, 0.42); }
.who__row .i { margin-top: 2px; color: var(--c-primary); }
.who__t {
  font-size: 1.125rem;   /* 18 */
  font-weight: 600;
  line-height: 1.444;    /* 26 */
  color: var(--c-term);
}
.who__d {
  font-size: var(--t-body);
  line-height: 1.625;    /* 26 */
  color: var(--c-term-body);
}

/* --------------------------------------------------------------------------
   13 · Our Approach & Methods — ITERATED from Figma 108:5918
   The Figma centred two long paragraphs at 760px. Those are gone at the
   client's request; the section now leads on the five-step process, and the
   "Collaborative · Practical · Goal-Oriented" kicker is retired with them.
   Numbers are earned here: this is an ordered sequence, not a set of traits.
   -------------------------------------------------------------------------- */
.appr__head { text-align: center; }
.steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 56px;
}
/* the rail the steps sit on — it is the sequence, made visible */
.steps__list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--c-rule) 10%, var(--c-rule) 90%, transparent 100%);
}
.step {
  position: relative;
  z-index: 1;
  text-align: center;
}
.step__n {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  box-shadow: var(--e-1);
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.step__t {
  margin-top: 18px;
  font-size: 1.0625rem;   /* 17 */
  line-height: 1.412;
  font-weight: 600;
  color: var(--c-term);
}
.step__d {
  margin-top: 8px;
  font-size: var(--t-sm);
  line-height: 1.571;
  color: var(--c-term-body);
}

/* --------------------------------------------------------------------------
   15 · Training & Professional Development
   Was three cards of long bullet lists with a ragged bottom row (the Figma's
   own `align-self: start`). Now three equal programme cards over one offer
   banner — the free session is a different kind of thing from a programme, so
   it gets its own shape and the page's only use of the brand gradient at size.
   -------------------------------------------------------------------------- */
.train__head { text-align: center; margin-bottom: 56px; }
.train__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.train-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 30px 28px;
  border: 0.8px solid var(--c-rule-sand);
  border-radius: 26px;
  background: var(--c-white);
  box-shadow: var(--e-1);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              translate var(--dur-mid) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.train-card:hover {
  border-color: #d9c8a6;
  box-shadow: var(--e-3);
  translate: 0 -3px;
}
/* icon beside the heading, not stacked above it — a 52px tile over an h3 is
   the generic feature-card shape, and the mode cards were fixed the same way */
.train-card__head {
  display: flex;
  align-items: center;
  gap: 15px;
}
.train-card__i { color: var(--c-primary); }
.train-card__i .i { width: 28px; height: 28px; }
.train-card__t {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem;   /* 26 */
  line-height: 1.231;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.train-card__d {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-body-soft);
}
.train-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-primary);
}
.train-card__go .i {
  width: 16px;
  height: 16px;
  transition: translate var(--dur-fast) var(--ease-out);
}
.train-card:hover .train-card__go .i { translate: 4px 0; }

/* the free session — an offer, not a programme */
.train-offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 24px;
  padding: 30px 34px;
  border-radius: 26px;
  background-image: var(--g-brand);
  color: var(--c-white);
  box-shadow: var(--e-2);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              translate var(--dur-mid) var(--ease-out);
}
.train-offer:hover { box-shadow: var(--e-3); translate: 0 -2px; }
.train-offer__i {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 0.8px solid rgba(255, 255, 255, 0.3);
}
.train-offer__i .i { width: 28px; height: 28px; }
.train-offer__t {
  display: block;
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem;   /* 26 */
  line-height: 1.231;
  letter-spacing: -0.005em;
}
.train-offer__d {
  display: block;
  margin-top: 6px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.train-offer__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.14);
  border: 0.8px solid rgba(255, 255, 255, 0.34);
  font-size: 0.9375rem;   /* 15 */
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.train-offer:hover .train-offer__go { background: rgba(255, 255, 255, 0.24); }
.train-offer__go .i {
  width: 17px;
  height: 17px;
  transition: translate var(--dur-fast) var(--ease-out);
}
.train-offer:hover .train-offer__go .i { translate: 4px 0; }

/* --------------------------------------------------------------------------
   16 · Available in Tamil & English — ITERATED from Figma 108:6115
   Fixed: the three tags rendered flush with no separator
   ("IndividualConfidentialOne-to-One"). Added: an icon and a factual detail
   line per mode, both drawn from copy already on the page.
   -------------------------------------------------------------------------- */
.lang__head { text-align: center; }

.lang__display {
  margin-top: 44px;
  text-align: center;
  font-family: var(--f-sans);
  font-weight: 500;
  font-style: italic;
  font-size: 2.5rem;      /* 44 */
  line-height: 1.273;      /* 56 */
  color: var(--c-primary-deep);
}
/* Rethink Sans has no Tamil coverage at all (its Google Fonts subsets are latin
   and latin-ext only), so Tamil keeps a Tamil face. The synthetic oblique is now
   matching a real sans italic rather than a serif one, so the angle is pulled
   back from 11deg to 9deg -- Rethink Sans italic is a more moderate slope than
   Instrument Serif italic was.

   Doubled attribute selector, specificity (0,2,0), so a single-class rule that
   sets font-family cannot outrank it on source order. This is not cosmetic: a
   plain [lang="ta"] is (0,1,0) and lost to .lang__word, which meant the display
   Tamil word was rendering in an arbitrary system fallback, not Noto Serif Tamil. */
/* Doubled attribute selector, specificity (0,2,0), so a single-class rule that
   sets font-family cannot outrank it on source order. This is not cosmetic: a
   plain [lang="ta"] is (0,1,0) and lost to .lang__word, which meant the display
   Tamil word was rendering in an arbitrary system fallback, not Noto Serif Tamil. */
[lang="ta"][lang] {
  font-family: "Noto Serif Tamil", "Nirmala UI", "Latha", serif;
  font-weight: 400;
  font-style: oblique 9deg;
}
.lang__display [lang="ta"] { font-size: 0.92em; }
/* Tamil runs optically larger than Latin at the same px, so it is trimmed back
   to sit on the same line */
.stat__n [lang="ta"] { font-size: 0.9em; }
.lang__display .lang__slash { padding-inline: 6px; }

.lang__modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.mode {
  padding: 34px 36px;
  border: 0.8px solid var(--c-rule-sand);
  border-radius: 29px;
  background: var(--c-white);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.mode:hover { border-color: #d9c8a6; box-shadow: var(--e-2); }
.mode__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mode__i { color: var(--c-primary); }
.mode__i .i { width: 26px; height: 26px; }
.mode h3 {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-weight: 400;
  font-size: 1.625rem;    /* 30 */
  line-height: 1.267;     /* 38 */
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.mode > p {
  margin-top: 10px;
  font-size: 1.0625rem;   /* 17 */
  line-height: 1.647;     /* 28 */
  color: var(--c-body-soft);
}
.mode__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.8px solid var(--c-rule);
  font-size: var(--t-sm);
  color: var(--c-term-body);
}
.mode__meta .i { color: var(--c-primary); }

.lang__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.lang__tags li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: #f1f1f1;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-term);
}
.lang__tags .i { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   17 · Why Feathers — Figma 108:6143 (as designed)
   -------------------------------------------------------------------------- */
.why__head { text-align: center; margin-bottom: 56px; }

/* --------------------------------------------------------------------------
   18 · Closing CTA — Figma 108:6180
   -------------------------------------------------------------------------- */
.cta-wrap { padding-block: 80px; }
.cta {
  padding: 76px 60px;
  border-radius: 40px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(178.4447deg, var(--c-card-blue-a) 4.5205%, var(--c-card-blue-b) 85.836%);
}
.cta__p {
  max-width: 62ch;
  margin: 18px auto 0;
  font-size: 1.125rem;   /* 18 */
  line-height: 1.667;    /* 30 */
  color: var(--c-cta-body);
}
.cta__meta,
.cta__meta span { padding-inline: 6px; color: var(--c-rule-strong, rgba(0, 32, 102, 0.35)); }
.cta__tag {
  margin-top: 26.8px;
  font-family: var(--f-sans);
  font-weight: 500;
  font-style: italic;
  font-size: 1.5rem;     /* 24 */
  line-height: 1.417;    /* 34 */
  color: var(--c-primary-deep);
}
.cta__tag em { font-style: italic; }

/* --------------------------------------------------------------------------
   19 · Footer — Figma 108:6199
   The 280px band is two blurred gradient blooms (nodes 108:6201 / 108:6202),
   not text: a navy bloom over the top half, a peach bloom under it, both
   dissolving into the cream body.
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;              /* crops the watermark exactly as the design does */
  padding-top: 280px;
  padding-bottom: 144px;
  padding-inline: var(--sp-page);
  background: var(--c-tint-off);
  isolation: isolate;
}

.footer__band {
  position: absolute;
  inset: 0 0 auto;
  height: 280px;
  overflow: hidden;
  /* The Figma band ran navy -> mauve -> peach -> cream: a sunset, and the only
     warm thing on an all-blue site. Same 13-stop shape, cooled to the brand. */
  background: linear-gradient(180deg,
    #ffffff 0%, #ffffff 10%,
    #f1f6fd 18%, #dbe8f8 26%, #b9d0ee 34%, #97b6e4 44%,
    #7ba3dc 55%, #92b4e4 64%, #b2cbee 73%, #d3e2f6 82%,
    #ecf3fc 91%, var(--c-tint-off) 98%);
}
/* One cool bloom replaces the Figma's navy + peach pair (nodes 108:6201 and
   108:6202). The peach one had nothing left to bloom once the warm palette
   went, so it is gone rather than recoloured. */
.footer__band::before {
  content: "";
  position: absolute;
  left: -12%;
  top: 0;
  width: 124%;
  height: 280px;
  pointer-events: none;
  filter: blur(26px);
  background:
    radial-gradient(50% 30% at 50% 34%, rgba(0, 78, 195, 0.30) 0%, rgba(0, 78, 195, 0) 82%),
    radial-gradient(40% 22% at 18% 30%, rgba(0, 78, 195, 0.20) 0%, rgba(0, 78, 195, 0) 82%),
    radial-gradient(40% 22% at 82% 30%, rgba(0, 78, 195, 0.20) 0%, rgba(0, 78, 195, 0) 82%);
}

.footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--w-text);
  margin-inline: auto;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer__brand {
  display: block;        /* it is an <a> now; keep the block box it had as a <p> */
  width: fit-content;
  font-size: 2.375rem;   /* 38 */
  line-height: 1;
}
.footer__about p:not(.footer__brand) {
  max-width: 360px;
  margin-top: 18px;
  font-size: var(--t-body);
  line-height: 1.625;
  color: var(--c-foot-body);
}
.footer__h {
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--c-foot-muted);
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a .i { color: var(--c-foot-muted); transition: color var(--dur-fast) var(--ease-out); }
.footer__col a:hover { color: var(--c-primary); }
.footer__col a:hover .i { color: var(--c-primary); }

/* Scope of practice. Not decoration and not a card: the practitioner is not a
   registered mental health professional, so the boundary of what is offered has
   to be stated where every page can reach it. Quiet type, but present. */
.footer__scope {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--c-foot-rule);
}
.footer__scope h2 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-foot-body);
}
.footer__scope p {
  max-width: 74ch;
  margin-top: 10px;
  font-size: var(--t-xs);
  line-height: 1.62;
  color: var(--c-foot-body);
}
.footer__scope strong { font-weight: 600; color: var(--c-primary-deep); }

/* the scope note is its own band, so the legal row keeps its rule and inset --
   only the gap tightens, since 56px belongs after the columns, not after a note */
.footer__scope + .footer__legal { margin-top: 28px; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--c-foot-rule);
  font-size: var(--t-xs);
  line-height: 1.538;    /* 20 */
  color: var(--c-foot-body);
}
.footer__disclaimer { max-width: 620px; text-align: right; }

/* The legal links sit on their own line above the copyright row rather than
   becoming a third item in it: .footer__legal is a two-part flex row with the
   disclaimer pushed right, and a third child lands in the middle looking
   accidental. order:-1 with a full-width basis lifts them out of that row
   without needing a separate wrapper in the markup. */
.footer__links {
  order: -1;
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-bottom: 6px;
}
.footer__links a {
  color: var(--c-foot-body);
  text-decoration-line: underline;
  text-decoration-color: var(--c-foot-rule);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover {
  color: var(--c-primary);
  text-decoration-color: currentColor;
}

.footer__mark {
  position: absolute;
  left: calc(50% + 236px);
  bottom: -101px;
  z-index: 0;
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: italic;
  font-size: 182px;
  line-height: 194px;
  color: var(--c-primary);
  /* stays brand blue: white would disappear on the light ground. Lowered
     from .18 because #f7fbff is lighter than the cream it used to sit on. */
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   20 · Responsive
   The Figma is a 1440 desktop board. Everything below is this build's own
   work: the source has no tablet or mobile screen.
   -------------------------------------------------------------------------- */

/* ---- 1400 and down: gutters absorb the overflow ---- */
@media (max-width: 1400px) {
  .hero__card { height: 780px; }
  .hero__copy { top: 200px; }
  .footer__mark { left: auto; right: -88px; }
}

/* ---- 1240 and down: narrower content column ---- */
@media (max-width: 1240px) {
  :root { --sp-section: 84px; }
  .header__bar { padding-inline: 32px; gap: 20px; }
  .header__actions { gap: 20px; }
  .nav__list { gap: 6px; }
  .wrap, .wrap--wide, .wrap--band { max-width: 100%; padding-inline: 32px; }
  .hero__inner { padding-inline: 32px; }
  .hero__copy { left: 32px; }
  .svc__grid { grid-template-columns: repeat(3, 1fr); }
  .mc__grid { grid-template-columns: 360px 1fr; gap: 40px; }
  .steps__list { gap: 16px; }
  /* the stat cells narrow faster than the type does; "தமிழ் & English" is the
     longest value and wrapped at ~1024 before this went fluid */
  .stat__n { font-size: clamp(1.25rem, 2.05vw, 1.875rem); }
  .cta { padding: 60px 40px; }
}

/* ---- 1080 and down: tablet ---- */
@media (max-width: 1080px) {
  /* .train-offer carries one action and holds three columns down to 720. This
     panel carries two, so the buttons drop under the text here instead of
     starving the heading to a 125px column. The icon keeps its own column. */
  .svc__more { grid-template-columns: auto minmax(0, 1fr); row-gap: 20px; }
  .svc__more-actions { grid-column: 2; }

  .header__bar { padding-inline: 24px; }
  .nav { display: none; }
  .nav-toggle { display: grid; }

  /* the nav re-forms as a sheet under the bar: six links, no submenus */
  .header.is-open .nav {
    display: block;
    position: absolute;
    left: var(--sp-page);
    right: var(--sp-page);
    top: calc(100% + 10px);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 14px;
    border-radius: var(--r-lg);
    /* opaque, not glass: this sheet sits over page copy and the links have to
       be the only thing you read. Also avoids a costly blur on phones. */
    background: var(--c-white);
    border: 0.8px solid var(--c-rule);
    box-shadow: var(--e-3);
  }
  .header.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .header.is-open .nav__link { width: 100%; padding: 14px 12px; }
  .header__actions { margin-left: auto; gap: 12px; }

  .stat__l { font-size: 0.75rem; }

  /* the seam is the device, so it is the LAST thing to collapse: the
     statement stacks first, the two halves keep their axis */
  .about { row-gap: 40px; padding-block: 72px; }
  .about__h { grid-column: 1 / -1; }
  .about__lead { grid-column: 1 / -1; max-width: 62ch; }
  .about::before { grid-row: 2; }
  .svc__grid { grid-template-columns: repeat(2, 1fr); }
  .mc__grid { grid-template-columns: 1fr; gap: 36px; }
  .mc__figure img { max-width: 440px; }
  .who__row:nth-last-child(-n + 2) { border-bottom: 0; }
  .who__row:last-child { border-bottom: 0.8px solid var(--c-rule-support); }
  /* five columns cramp before 1080 — the rail turns vertical instead */
  .steps__list { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
  .steps__list::before {
    top: 27px;
    bottom: 27px;
    left: 27px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      var(--c-rule) 0%, var(--c-rule) 100%);
  }
  .step {
    display: grid;
    grid-template-columns: 54px 1fr;
    grid-template-areas: "n t" "n d";
    align-content: start;
    gap: 0 20px;
    padding-bottom: 30px;
    text-align: left;
  }
  .step:last-child { padding-bottom: 0; }
  .step__n { grid-area: n; margin-inline: 0; }
  .step__t { grid-area: t; margin-top: 12px; }
  .step__d { grid-area: d; }
  .train__grid { grid-template-columns: 1fr 1fr; }
  .train-card:nth-child(3) { grid-column: 1 / -1; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__about { grid-column: 1 / -1; }
  .footer__mark { display: none; }
}

/* ---- 900 and down: the hero re-composes ---- */
@media (max-width: 900px) {
  :root { --sp-section: 68px; }

  /* Stacking the copy over the photo needs a wash so opaque it hides the
     counsellor entirely — so the phone hero splits instead: photo first,
     copy on the blue below it. */
  .hero__card {
    height: auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--c-hero-a) 0%, var(--c-hero-b) 68%, #bfe7fd 100%);
  }
  .hero__media {
    position: static;
    order: 1;
    height: 320px;
    flex: none;
  }
  .hero__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 88% 26%;
  }
  .hero__wash { display: none; }
  .hero__inner { order: 2; height: auto; padding: 36px 40px 40px; }
  .hero__copy {
    position: static;
    width: 100%;
    max-width: 560px;
  }
  .hero__lead { max-width: none; }
  .stats {
    position: static;
    translate: none;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }
  .stat { box-shadow: none; }
  .stat:nth-child(even) { box-shadow: inset 1px 0 0 0 var(--c-rule); }
  .stat:nth-child(n + 3) { box-shadow: inset 0 1px 0 0 var(--c-rule); }
  .stat:nth-child(4) { box-shadow: inset 1px 0 0 0 var(--c-rule), inset 0 1px 0 0 var(--c-rule); }

  @media (prefers-reduced-motion: no-preference) {
    .stats { animation-name: stats-in-static; }
    @keyframes stats-in-static {
      from { opacity: 0; translate: 0 22px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }

  .lang__modes { grid-template-columns: 1fr 1fr; }
  .lang__modes .mode:last-child { grid-column: 1 / -1; }
  .mc__credentials ul { grid-template-columns: 1fr; }
}

/* ---- 720 and down: phone ---- */
@media (max-width: 720px) {
  :root {
    --sp-page: 14px;
    --sp-section: 56px;
    --t-h1: 2.25rem;      /* 36 */
    --t-h1-lh: 1.2;
    --t-h2: 1.875rem;     /* 30 */
    --t-h2-lh: 1.267;
  }
  html { scroll-padding-top: 96px; }

  .header { inset-block-start: 12px; }
  .header__bar { height: 66px; padding-inline: 18px; }
  .brand { font-size: 1.5rem; }
  .header__actions .btn--brand { padding-inline: 16px; font-size: var(--t-sm); }

  .wrap, .wrap--wide, .wrap--band { padding-inline: 20px; }
  .hero__inner { padding: 28px 20px 24px; }
  .hero__media { height: 260px; }
  .hero__card { border-radius: 22px; }
  .hero__lead { font-size: 1.0625rem; line-height: 1.6; }
  .hero__actions { flex-wrap: wrap; gap: 12px; }
  .stats { grid-template-columns: 1fr; }
  .stat { box-shadow: none !important; }
  .stat + .stat { box-shadow: inset 0 1px 0 0 var(--c-rule) !important; }
  .stat__n { font-size: 1.625rem; }

  /* one column; the seam turns 90 degrees rather than disappearing */
  .about { grid-template-columns: 1fr; row-gap: 28px; padding-block: 56px; }
  .about::before { display: none; }
  .about__here, .about__reach { grid-column: 1 / -1; }
  .about__here { border-radius: var(--r-lg); }
  .about__here-body { padding: 22px; }
  .about__t { font-size: 1.5rem; }
  .about__lead { font-size: 1.0625rem; line-height: 1.7; }
  .about__route { padding: 20px 12px; margin-inline: -12px; }
  .about__route-t { font-size: 1.25rem; }

  .svc__grid { grid-template-columns: 1fr; gap: 14px; }

  /* Six categories stacked would be ~300px of buttons before any content, so
     the filters become a scroll strip that bleeds to the screen edges. */
  .svc__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--sp-page) * -1);
    padding: 2px var(--sp-page) 10px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    scrollbar-width: thin;
  }
  .svc__filters::-webkit-scrollbar { height: 4px; }
  .svc__filters::-webkit-scrollbar-thumb { background: #b9cbd8; border: 0; }
  .svc__tab {
    flex: none;
    scroll-snap-align: start;
    font-size: var(--t-sm);
    padding: 10px 14px;
    min-height: 44px;
  }
  .svc__cat { font-size: 1.5rem; margin-top: 32px; }
  /* one column is wide and short — plate beside the title, action below */
  .svc-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-areas: "plate title" ".     go";
    align-items: center;
    min-height: 0;
    padding: 18px 20px;
    gap: 6px 16px;
  }
  .svc-card__plate { grid-area: plate; width: 48px; height: 48px; border-radius: 14px; }
  .svc-card__plate .i { width: 24px; height: 24px; }
  .svc-card__t { grid-area: title; font-size: 1.25rem; }
  .svc-card__go { grid-area: go; margin-top: 0; }
  .svc__more {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 22px;
    margin-top: 36px;
  }
  .svc__more h3 { font-size: 1.375rem; }
  /* one column now, so release the column-2 placement set at 1080 */
  .svc__more-actions {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .svc__more-actions .btn { width: 100%; }

  .mc__name { font-size: 1.625rem; }
  .mc__figure img { max-width: none; }

  .who__row { grid-template-columns: 20px 1fr; gap: 0 14px; }
  .who__d { grid-column: 2; margin-top: 4px; }

  .section-head p,
  .section-head-lead { font-size: 1.0625rem; line-height: 1.6; }
  .step { padding-bottom: 24px; }


  .train__grid { grid-template-columns: 1fr; }
  .train-card:nth-child(3) { grid-column: auto; }
  .train-card { padding: 24px 22px; }
  .train-offer {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 22px;
  }
  .train-offer__t { font-size: 1.375rem; }
  .train-offer__go { justify-content: center; }

  .lang__display { font-size: 2rem; }
  /* three modes will not fit two columns on a phone */
  .lang__modes { grid-template-columns: 1fr; gap: 14px; }
  .lang__modes .mode:last-child { grid-column: auto; }
  .mode { padding: 26px 22px; }
  .mode h3 { font-size: 1.5rem; }


  .cta-wrap { padding-block: 48px; }
  .cta { padding: 40px 22px; border-radius: 26px; }
  .cta__tag { font-size: 1.25rem; }

  .footer { padding-top: 200px; padding-bottom: 72px; }
  .footer__band { height: 200px; }
  .footer__band::before { height: 200px; }
  .footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .footer__legal { flex-direction: column; gap: 14px; }
  .footer__disclaimer { max-width: none; text-align: left; }
}

/* --------------------------------------------------------------------------
   21 · Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   22 · Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .nav-toggle, .skip-link, .ticker, .footer__band, .footer__mark { display: none !important; }
  .hero__card { height: auto; }
  .hero__media, .hero__wash { display: none; }
  .band { background: #fff !important; }
  /* .why-card is gone (section 27 replaced it); the rest still print */
  .svc-card, .train-card, .mode, .cta, .step, .tip { break-inside: avoid; }
  a[href^="http"]::after,
  a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* ==========================================================================
   23 · Counselling page (counselling.html)
   Reuses the homepage system throughout — .svc-card and its six category
   washes, .steps__list, .lang__*, .cta, .btn. Only the page header, the
   contents nav, the category block and the FAQ are new.
   ========================================================================== */

/* ---- breadcrumb ---- */
.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--c-body-soft);
}
.crumb a { color: var(--c-primary); }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb .i { rotate: -90deg; opacity: 0.5; }

/* ---- page header ---- */
.pagehead { padding-block: 132px 84px; }
.pagehead__h {
  max-width: 20ch;
  margin-top: 22px;
  font-size: var(--t-h1);
  line-height: var(--t-h1-lh);
  color: var(--c-ink);
}
.pagehead__lead {
  max-width: 58ch;
  margin-top: 22px;
  font-size: 1.1875rem;   /* 19 */
  line-height: 1.684;
  color: var(--c-body-soft);
}
.pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
/* the homepage stat bar, restated static for an inner page */
.pagehead__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  border: 0.8px solid var(--c-rule);
  border-radius: var(--r-lg);
  background: var(--c-tint-off);
  overflow: hidden;
}
.fact {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 22px 20px;
  text-align: center;
}
.fact + .fact { box-shadow: inset 1px 0 0 0 var(--c-rule); }
.fact dd {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem;   /* 26 */
  line-height: 1.3;
  color: var(--c-primary-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fact dd [lang="ta"] { font-size: 0.86em; }
.fact dt {
  margin-top: 2px;
  font-size: var(--t-xs);
  line-height: 1.462;
  color: var(--c-body);
}

/* ---- contents ---- */
.toc-wrap { padding-block: 72px; }
.toc__h {
  font-size: 1.5rem;   /* 24 */
  line-height: 1.333;
  text-align: center;
  color: var(--c-ink);
}
.toc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.toc__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  border: 0.8px solid var(--c-rule);
  border-radius: var(--r-md);
  background: var(--c-white);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-ink);
  box-shadow: var(--e-1);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out);
}
.toc__item:hover {
  border-color: var(--dot, var(--c-primary));
  box-shadow: var(--e-2);
  translate: 0 -1px;
}
.toc__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--dot, var(--c-primary));
}
.toc__n {
  margin-left: auto;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-body-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- a category block: heading, then the same cards as the homepage ---- */
.cats { padding-block: 92px; }
.cat + .cat { margin-top: 76px; }
.cat__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 0.8px solid var(--c-rule);
}
.cat__i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--c-tint-off);
  border: 0.8px solid var(--c-rule);
  color: var(--c-primary);
}
.cat__i .i { width: 24px; height: 24px; }
.cat__t {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.75rem;   /* 28 */
  line-height: 1.25;
  color: var(--c-ink);
}
.cat__n {
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-body-soft);
  font-variant-numeric: tabular-nums;
}
.cat__d {
  margin-top: 6px;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-body-soft);
}
.cat__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}

/* ---- FAQ ---- */
.faq__head { text-align: center; margin-bottom: 48px; }
.faq {
  max-width: 62rem;
  margin-inline: auto;
}
/* the rule belongs to the item, not to an unpadded wrapper */
.faq__item { border-bottom: 0.8px solid var(--c-rule); }
.faq__item:first-child { border-top: 0.8px solid var(--c-rule); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 1.125rem;   /* 18 */
  font-weight: 600;
  line-height: 1.444;
  color: var(--c-term);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-primary); }
.faq__mark {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-primary);
  transition: rotate var(--dur-fast) var(--ease-out);
}
.faq__item[open] .faq__mark { rotate: 180deg; }
.faq__a {
  padding: 0 4px 26px;
  max-width: 68ch;
}
.faq__a p {
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--c-term-body);
}

/* ---- counselling page, responsive ---- */
@media (max-width: 1240px) {
  .cat__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
  .pagehead { padding-block: 116px 68px; }
  .toc { grid-template-columns: repeat(2, 1fr); }
  .cat__grid { grid-template-columns: repeat(2, 1fr); }
  .cats { padding-block: 72px; }
  .cat + .cat { margin-top: 60px; }
}
@media (max-width: 900px) {
  .pagehead__facts { grid-template-columns: 1fr 1fr; }
  .fact { box-shadow: none; }
  .fact:nth-child(even) { box-shadow: inset 1px 0 0 0 var(--c-rule); }
  .fact:nth-child(n + 3) { box-shadow: inset 0 1px 0 0 var(--c-rule); }
  .fact:nth-child(4) { box-shadow: inset 1px 0 0 0 var(--c-rule), inset 0 1px 0 0 var(--c-rule); }
}
@media (max-width: 720px) {
  .pagehead { padding-block: 96px 52px; }
  .pagehead__h { max-width: none; }
  .pagehead__lead { font-size: 1.0625rem; line-height: 1.6; }
  .pagehead__actions { flex-direction: column; align-items: stretch; }
  .pagehead__actions .btn { width: 100%; }
  .pagehead__actions .btn-pair { justify-content: center; }
  .pagehead__facts { grid-template-columns: 1fr; margin-top: 40px; }
  .fact { box-shadow: none !important; }
  .fact + .fact { box-shadow: inset 0 1px 0 0 var(--c-rule) !important; }
  .toc-wrap { padding-block: 52px; }
  .toc { grid-template-columns: 1fr; gap: 10px; }
  .toc__h { font-size: 1.25rem; }
  .cats { padding-block: 56px; }
  .cat + .cat { margin-top: 48px; }
  .cat__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .cat__head { gap: 14px; }
  .cat__t { font-size: 1.5rem; }
  .faq__q { font-size: 1.0625rem; padding: 20px 2px; }
}

/* ==========================================================================
   24 · Online counselling page (online-counselling.html)
   Shares the page header, FAQ, .mode and .cta from section 23 and the
   homepage. Only the booking steps and the six area cards are new.
   ========================================================================== */

/* ---- booking steps: three, so they sit as equal columns, not a rail ---- */
.osteps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.ostep {
  position: relative;
  padding: 30px 28px;
  border: 0.8px solid var(--c-rule-sand);
  border-radius: 26px;
  background: var(--c-white);
  box-shadow: var(--e-1);
}
.ostep__n {
  position: absolute;
  top: 24px;
  right: 26px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-primary);
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* a bare icon, not a tile: consistent with the mode and training cards, and a
   bordered box stacked near a heading is the generic feature-card shape */
.ostep__i { display: grid; place-items: center; color: var(--c-primary); }
.ostep__i .i { width: 28px; height: 28px; }
/* icon beside the heading, not a tile stacked above it */
.ostep__head {
  display: flex;
  align-items: center;
  gap: 15px;
}
.ostep__t {
  font-size: 1.25rem;   /* 20 */
  line-height: 1.4;
  color: var(--c-term);
}
.ostep__mail { overflow-wrap: anywhere; }
.ostep__d {
  margin-top: 8px;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-body-soft);
}

/* ---- the six areas, each carrying its own category wash ---- */
.areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 210px;
  padding: 26px;
  border-radius: 26px;
  background: var(--wash);
  color: var(--c-ink);
  box-shadow: var(--e-1);
  transition: box-shadow var(--dur-mid) var(--ease-out),
              translate var(--dur-mid) var(--ease-out);
}
.area:hover { box-shadow: var(--e-3); translate: 0 -3px; }
.area[data-group="personal"]     { --wash: linear-gradient(176.198deg, #c0e7ff 4.5205%, #edfbff 85.836%); --plate: #0063c7; }
.area[data-group="relationship"] { --wash: linear-gradient(176.198deg, #fbd8e3 4.5205%, #fef2f6 85.836%); --plate: #b03b62; }
.area[data-group="family"]       { --wash: linear-gradient(176.198deg, #fde2c8 4.5205%, #fff7ee 85.836%); --plate: #a55a15; }
.area[data-group="career"]       { --wash: linear-gradient(176.198deg, #ccdcf3 4.5205%, #eff4fd 85.836%); --plate: #24528f; }
.area[data-group="addiction"]    { --wash: linear-gradient(176.198deg, #c5e9e0 4.5205%, #eefbf8 85.836%); --plate: #0d6a58; }
.area[data-group="specialized"]  { --wash: linear-gradient(176.198deg, #ddd9f5 4.5205%, #f5f3fd 85.836%); --plate: #4b45a2; }
.area__i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.5);
  border: 0.8px solid rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  color: var(--plate);
}
.area__i .i { width: 26px; height: 26px; }
.area__t {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.375rem;   /* 22 */
  line-height: 1.227;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
.area__n {
  font-size: var(--t-sm);
  color: #2f3550;
}
.area__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--plate);
}
.area__go .i { width: 16px; height: 16px; transition: translate var(--dur-fast) var(--ease-out); }
.area:hover .area__go .i { translate: 4px 0; }

@media (max-width: 1080px) {
  .osteps, .areas { grid-template-columns: 1fr 1fr; }
  .osteps .ostep:last-child, .areas .area:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .osteps, .areas { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .osteps .ostep:last-child, .areas .area:last-child { grid-column: auto; }
  .ostep { padding: 24px 22px; }
  .ostep__n { top: 20px; right: 22px; }
  .area { min-height: 0; padding: 22px; }
}

/* ==========================================================================
   25 · Crisis callout (counselling.html)
   ========================================================================== */

/* Listing suicidal ideation and self-harm as a service creates a duty: someone
   in crisis may land on this page. The callout is deliberately not a card —
   it must not read as one more thing to browse. */
.crisis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  margin-top: 40px;
  padding: 28px 30px;
  border: 1px solid #c9d8ef;
  border-radius: 26px;
  background: #eef4fd;
}
.crisis__i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--c-white);
  border: 0.8px solid #c9d8ef;
  color: var(--c-primary-deep);
}
.crisis__i .i { width: 26px; height: 26px; }
.crisis__t {
  font-size: 1.25rem;   /* 20 */
  line-height: 1.4;
  color: var(--c-primary-deep);
}
.crisis p {
  margin-top: 8px;
  max-width: 68ch;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--c-term-body);
}
.crisis strong { font-weight: 600; color: var(--c-primary-deep); }
.crisis__line { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .crisis {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 22px;
    margin-top: 32px;
  }
  .crisis__t { font-size: 1.125rem; }
}

/* ==========================================================================
   26 . Relationship check-in (assessment.html)
   ========================================================================== */

/* Each area owns an accent. --area is set inline on .ck as the areas change, so
   the panel, the focus ring and the progress group move together. That is the
   whole gamification budget: you feel the ground shift. No points, no confetti. */
.ck { --area: var(--c-primary); }

/* ---- 1 . sticky strip ----------------------------------------------------- */
.ckbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--c-primary-deep);
  color: var(--c-white);
}
.ckbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 11px var(--sp-page);
}
.ckbar__t {
  font-weight: 600;
  font-size: var(--t-sm);
}
.ckbar__m {
  display: block;
  margin-top: 1px;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.72);
}
.ckbar__right { display: flex; align-items: center; gap: 18px; }
.ckbar__flags { display: flex; gap: 8px; }
.ckbar__flag {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 0.8px solid rgba(255, 255, 255, 0.22);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
/* "Nothing saved" is the promise people actually want, so it gets the emphasis */
.ckbar__flag--key {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-primary-deep);
}
.ckbar .btn--brand {
  background-image: none;
  background-color: var(--c-white);
  color: var(--c-primary-deep);
}

/* ---- 2 . header + 3 . how to answer -------------------------------------- */
.pagehead--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 56px;
  align-items: start;
}
.pagehead--split .pagehead__h,
.pagehead--split .pagehead__lead { max-width: none; }

.ck__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ck__pill {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-tint-off);
  border: 0.8px solid var(--c-rule);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-primary-deep);
}
.ck__pill--alt { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

.ck__feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.ck__feats li {
  padding: 20px 20px 22px;
  border-radius: 20px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule-sand);
  box-shadow: var(--e-1);
}
.ck__feat-i { display: block; color: var(--c-primary); }
.ck__feat-i .i { width: 24px; height: 24px; }
.ck__feat-t {
  display: block;
  margin-top: 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-ink);
}
.ck__feat-d {
  display: block;
  margin-top: 5px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-body-soft);
}

.howto {
  padding: 30px 32px 32px;
  border-radius: 26px;
  background: var(--c-tint-off);
  border: 0.8px solid var(--c-rule);
}
.howto__h {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem;   /* 26 */
  line-height: 1.23;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.howto__list { margin-top: 20px; counter-reset: howto; }
.howto__list li {
  position: relative;
  counter-increment: howto;
  padding: 16px 0 16px 38px;
  border-top: 0.8px solid var(--c-rule);
}
.howto__list li::before {
  content: counter(howto);
  position: absolute;
  left: 0;
  top: 16px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-primary-deep);
}
.howto__k { display: block; font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.howto__d {
  display: block;
  margin-top: 3px;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-body-soft);
}
.howto__tip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--c-white);
  border: 0.8px dashed var(--c-rule-sand);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-term-body);
}
.howto__tip .i { color: var(--c-primary); }
.howto__go { width: 100%; margin-top: 20px; }
.howto__go .i { width: 18px; height: 18px; }
.howto__meta {
  margin-top: 12px;
  font-size: var(--t-xs);
  text-align: center;
  color: var(--c-body-soft);
}

/* ---- 4 . stage head ------------------------------------------------------- */
.ck__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.ck__head .section-head-lead { max-width: 58ch; margin-top: 10px; }
.ck__of {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-primary-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ck__head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ck__head-actions .i { width: 17px; height: 17px; }

/* ---- 5 . progress + question --------------------------------------------- */
.ck__bar { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.ck__segs { display: flex; flex: 1; gap: 10px; }
.ck__seg-group { display: flex; flex: 1; gap: 3px; }
.ck__seg {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 32, 102, 0.11);
  transition: background-color var(--dur-mid) var(--ease-out);
}
.ck__seg.is-done { background: var(--area, var(--c-primary)); }
.ck__seg.is-at {
  background: var(--c-primary-deep);
  box-shadow: 0 0 0 3px rgba(0, 78, 195, 0.14);
}
.ck__count {
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem;   /* 24 */
  line-height: 1;
  color: var(--c-primary-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ck__count-of { color: var(--c-body-soft); }

.ck__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: start;
}
/* grid items default to min-width:auto, which floors a 1fr column at the item's
   min-content and pushed the stage 8px past a 320px viewport. Let them shrink. */
.ck__cols > *, .ck__stage > * { min-width: 0; }
.ck__stage { display: grid; gap: 20px; }
.ck__q {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 34px 36px;
  border-radius: 26px;
  background: var(--area, var(--c-primary));
  color: var(--c-white);
  box-shadow: var(--e-2);
  transition: background-color var(--dur-slow) var(--ease-out);
}
.ck__area {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 0.8px solid rgba(255, 255, 255, 0.3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ck__stmt {
  font-family: var(--f-sans);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.24;
  text-wrap: balance;
}

/* five options, each: key | label | hint pushed to the trailing edge */
/* min-width:0 is load-bearing -- a <fieldset> carries a UA default of
   min-width:min-content that a grid column cannot shrink past, which pushed
   the stage 8px wider than a 320px viewport. */
.ck__answers {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
.ck__opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  border-radius: 18px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule);
  box-shadow: var(--e-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out);
}
.ck__opt:hover { border-color: var(--area); box-shadow: var(--e-2); translate: 2px 0; }
.ck__opt input { position: absolute; opacity: 0; pointer-events: none; }
.ck__opt:has(input:checked) {
  border-color: var(--area);
  box-shadow: 0 0 0 2px var(--area), var(--e-2);
}
/* the radio is hidden, so the focus ring has to live on the label */
.ck__opt:has(input:focus-visible) { outline: 3px solid var(--c-primary); outline-offset: 3px; }
.ck__opt-key {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--c-tint-off);
  border: 0.8px solid var(--c-rule);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-primary-deep);
  font-variant-numeric: tabular-nums;
}
.ck__opt:has(input:checked) .ck__opt-key {
  background: var(--area);
  border-color: var(--area);
  color: var(--c-white);
}
.ck__opt-l { font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }
.ck__opt-h { font-size: var(--t-xs); color: var(--c-body-soft); white-space: nowrap; }

.ck__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
}
.ck__nav .btn:disabled { opacity: 0.42; pointer-events: none; }
.ck__hint { font-size: var(--t-xs); color: var(--c-body-soft); }
.ck__hint kbd {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-primary-deep);
}
.ck__noscript {
  max-width: 60ch;
  margin: 0 auto;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule-sand);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-body-soft);
}

/* ---- 6 . live panel ------------------------------------------------------- */
.live {
  position: sticky;
  top: 96px;
  padding: 26px 26px 28px;
  border-radius: 26px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule-sand);
  box-shadow: var(--e-1);
}
.live__h {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.live__d { margin-top: 8px; font-size: var(--t-xs); line-height: 1.55; color: var(--c-body-soft); }
.live__rows { display: grid; gap: 16px; margin-top: 22px; }
.live__row { --area: var(--c-primary); opacity: 0.62; transition: opacity var(--dur-mid) var(--ease-out); }
.live__row.is-ready { opacity: 1; }
.live__row-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.live__row-n { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink); }
.live__row-v {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--area);
  font-variant-numeric: tabular-nums;
}
.live__part { color: var(--c-body-soft); font-weight: 500; }
.live__track {
  height: 7px;
  margin-top: 7px;
  border-radius: 4px;
  background: rgba(0, 32, 102, 0.09);
  overflow: hidden;
}
/* scaleX, not width: animating width thrashes layout on every keystroke */
.live__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--area);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.live__row-d { margin-top: 5px; font-size: var(--t-xs); line-height: 1.45; color: var(--c-body-soft); }
.live__left {
  margin-top: 22px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-body-soft);
  font-variant-numeric: tabular-nums;
}
.live__left.is-clear { color: var(--c-primary); }
.live__go { width: 100%; margin-top: 12px; }
.live__go .i { width: 18px; height: 18px; }

/* ---- 7-13 . results ------------------------------------------------------- */
.res__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
}
.res__left { display: grid; gap: 24px; }
.res__right { display: grid; gap: 28px; }

/* 8 . summary */
.res__sum {
  padding: 30px 32px 32px;
  border-radius: 26px;
  background-image: var(--g-brand);
  color: var(--c-white);
  box-shadow: var(--e-2);
}
.res__sum-k {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.res__sum-t {
  margin-top: 8px;
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.625rem, 2.4vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.005em;
}
.res__sum-d {
  margin-top: 12px;
  max-width: 62ch;
  font-size: var(--t-body);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.9);
}
.res__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.res__chips li {
  display: grid;
  gap: 2px;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 0.8px solid rgba(255, 255, 255, 0.26);
}
.res__chips span {
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}
.res__chips strong { font-size: 1.0625rem; font-weight: 600; }

/* 9 . plan */
.res__plan {
  padding: 26px 30px 28px;
  border-radius: 26px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule-sand);
  box-shadow: var(--e-1);
}
.res__plan-t {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.res__plan-list { margin-top: 16px; display: grid; gap: 11px; counter-reset: plan; }
.res__plan-list li {
  position: relative;
  counter-increment: plan;
  padding-left: 34px;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-body-soft);
}
.res__plan-list li::before {
  content: counter(plan);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: var(--c-primary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-white);
}
.res__plan-list strong { font-weight: 600; color: var(--c-ink); }

/* 10 . per-area habits */
.res__tips { display: grid; gap: 16px; }
.tip {
  --area: var(--c-primary);
  padding: 24px 26px 26px;
  border-radius: 22px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule);
  box-shadow: var(--e-1);
}
.tip__h { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.tip__i { display: grid; place-items: center; color: var(--area); }
.tip__i .i { width: 22px; height: 22px; }
.tip__n { font-size: 1.125rem; font-weight: 600; color: var(--c-ink); }
.tip__b {
  margin-left: auto;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.tip.is-strong .tip__b { background: #e4f2ea; color: #1d6b4a; }
.tip.is-steady .tip__b { background: var(--c-tint-off); color: var(--c-primary-deep); }
.tip.is-attention .tip__b { background: #fdeee6; color: #9a4a12; }
.tip__hold {
  margin-top: 12px;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-body-soft);
}
.tip__list { margin-top: 14px; display: grid; gap: 9px; }
.tip__list li {
  padding-left: 16px;
  border-left: 2px solid var(--c-rule-sand);
  font-size: var(--t-body);
  line-height: 1.58;
  color: var(--c-body-soft);
}

/* 11 . disclaimer — the same shape as the crisis callout, same job */
.res__note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 28px 30px;
  border: 1px solid #c9d8ef;
  border-radius: 26px;
  background: #eef4fd;
}
.res__note-i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--c-white);
  border: 0.8px solid #c9d8ef;
  color: var(--c-primary-deep);
}
.res__note-i .i { width: 26px; height: 26px; }
.res__note-t { font-size: 1.25rem; line-height: 1.4; color: var(--c-primary-deep); }
.res__note p {
  margin-top: 8px;
  max-width: 72ch;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--c-term-body);
}

/* 12 . chart */
.res__chart, .res__scores {
  margin: 0;
  padding: 26px 26px 28px;
  border-radius: 26px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule-sand);
  box-shadow: var(--e-1);
}
.res__chart-h {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.res__donut { position: relative; margin-top: 18px; }
.res__donut svg { width: 100%; height: auto; display: block; }
.res__donut-track { fill: none; stroke: rgba(0, 32, 102, 0.07); }
.res__donut-seg { fill: none; stroke-linecap: butt; }
.res__donut-mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  pointer-events: none;
  text-align: center;
}
.res__donut-mid span:first-child {
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: 2.375rem;   /* 40 */
  line-height: 1;
  color: var(--c-primary-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.res__donut-mid span:last-child {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-body-soft);
}
.res__legend { display: grid; gap: 8px; margin-top: 20px; }
.res__legend li {
  --area: var(--c-primary);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: var(--t-sm);
  color: var(--c-body-soft);
}
.res__key { width: 10px; height: 10px; border-radius: 3px; background: var(--area); }
.res__legend strong {
  font-weight: 600;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.res__chart figcaption {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.8px solid var(--c-rule);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-body-soft);
}

/* 13 . area scores */
.res__bars { display: grid; gap: 18px; margin-top: 18px; }
.res__bar { --area: var(--c-primary); }
.res__bar-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.res__bar-n { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink); }
.res__bar-v {
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--area);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.res__track {
  height: 9px;
  margin-top: 8px;
  border-radius: 5px;
  background: rgba(0, 32, 102, 0.09);
  overflow: hidden;
}
.res__fill { display: block; height: 100%; border-radius: 5px; background: var(--area); }
.res__bar-b { margin-top: 6px; font-size: var(--t-xs); line-height: 1.45; color: var(--c-body-soft); }

/* 14 . review */
.res__review {
  margin-top: 40px;
  padding: 28px 30px 30px;
  border-radius: 26px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule-sand);
  box-shadow: var(--e-1);
}
.res__answers { margin-top: 18px; display: grid; gap: 0; counter-reset: ans; }
.res__answers li {
  --area: var(--c-primary);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-top: 0.8px solid var(--c-rule);
}
.res__answers li:last-child { border-bottom: 0.8px solid var(--c-rule); }
.res__ans-a {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--area);
}
.res__ans-q { font-size: var(--t-body); line-height: 1.5; color: var(--c-body-soft); }
.res__ans-v {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}

.res__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
  padding: 30px 34px;
  border-radius: 26px;
  background-image: var(--g-brand);
  color: var(--c-white);
  box-shadow: var(--e-2);
}
.res__cta-t {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.231;
  letter-spacing: -0.005em;
}
.res__cta p { margin-top: 6px; font-size: var(--t-body); line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.res__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.res__cta-actions .i { width: 18px; height: 18px; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
  .pagehead--split { grid-template-columns: 1fr; gap: 40px; }
  .howto { max-width: 560px; }
  .ck__cols { grid-template-columns: 1fr; }
  /* the live panel stops being a sidebar and becomes a summary above the nav */
  .live { position: static; }
  .live__rows { grid-template-columns: repeat(2, 1fr); }
  .res__grid { grid-template-columns: 1fr; }
  .res__right { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
@media (max-width: 860px) {
  .ck__feats { grid-template-columns: 1fr; }
  .res__right { grid-template-columns: 1fr; }
  .res__cta { grid-template-columns: 1fr; }
  .res__cta-actions .btn { width: 100%; }
  .ckbar__flags { display: none; }   /* the badges are the first thing to go */
}
@media (max-width: 720px) {
  .ckbar__inner { padding: 9px var(--sp-page); gap: 14px; }
  .ckbar__m { display: none; }
  .howto { padding: 24px 22px 26px; }
  .ck__bar { gap: 14px; }
  .ck__segs { gap: 6px; }
  .ck__seg-group { gap: 2px; }
  .ck__count { font-size: 1.25rem; }
  .ck__q { padding: 26px 22px; }
  .ck__stmt { font-size: 1.375rem; }
  .ck__opt { padding: 13px 16px; gap: 12px; }
  /* the hint would push the label to two lines at this width */
  .ck__opt { grid-template-columns: auto 1fr; }
  .ck__opt-h { display: none; }
  .ck__hint { display: none; }
  .ck__nav { gap: 12px; }
  .ck__nav .btn { flex: 1; }
  .live__rows { grid-template-columns: 1fr; }
  .res__sum, .res__plan, .tip, .res__chart, .res__scores, .res__review { padding: 24px 22px 26px; }
  .res__note { grid-template-columns: 1fr; gap: 16px; padding: 24px 22px; }
  .res__note-t { font-size: 1.125rem; }
  .res__cta { padding: 26px 22px; }
  .res__cta-t { font-size: 1.375rem; }
  .res__chips li { flex: 1; }
  .res__answers li { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .res__ans-a { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .ck__seg, .ck__q, .ck__opt, .live__fill, .live__row { transition: none; }
}

/* ==========================================================================
   27 . Section lift — the five blocks that had no compositional idea
   --------------------------------------------------------------------------
   Nine section headings in a row were centred, which is most of why the page
   read as one long undifferentiated column. Sections whose composition is
   asymmetric now take a left head; sections that are genuinely symmetrical
   (the language pair, the step rail) keep the centred one. That alternation is
   the rhythm, and it costs nothing.

   Loaded after everything above, so these win on source order at equal
   specificity — including over the older responsive rules.
   ========================================================================== */

/* ---- #audience — an index, because breadth is the point ------------------- */
/* Ten groups read as ten groups only when you can see all ten at once. A
   scrolling stack of ten identical rows reads as "a long list", which is the
   opposite of the claim the section is making. */
.who__head {
  text-align: left;
  max-width: var(--w-text);
  margin-bottom: 40px;
}
.who__index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  border-top: 0.8px solid var(--c-rule-support);
}
.who__row {
  display: block;
  padding: 17px 2px;
  border-bottom: 0.8px solid var(--c-rule-support);
  background: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.who__row:hover { background: rgba(255, 255, 255, 0.5); }
.who__t {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.3125rem;   /* 21 */
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.who__i { flex: none; color: var(--c-primary); translate: 0 2px; }
.who__d {
  margin-top: 5px;
  padding-left: 29px;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-body-soft);
}

/* ---- #languages — the bilingual pair is the section ----------------------- */
.lang__head { text-align: center; }
.lang__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
  margin: 56px 0 52px;
  padding: 44px 0;
  border-block: 0.8px solid var(--c-rule);
}
.lang__side { text-align: center; }
.lang__word {
  display: block;
  font-family: var(--f-sans);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.35rem, 6vw, 4.2rem);
  line-height: 1.06;
  color: var(--c-primary-deep);
}
/* Noto Serif Tamil runs optically larger than Rethink Sans at the same size */
.lang__word[lang="ta"] { font-size: clamp(2.15rem, 5.5vw, 3.9rem); }
/* one line under the pair, not a label under each word -- captioning the word
   "English" with "ENGLISH" was pure redundancy */
.lang__note {
  max-width: 46ch;
  margin: -28px auto 52px;
  text-align: center;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-body-soft);
}
.lang__rule {
  width: 1px;
  height: 96px;
  background: var(--c-rule);
}

/* ---- #why — a figure and an adjective are not the same object ------------- */
.why__head {
  text-align: left;
  max-width: var(--w-text);
  margin-bottom: 44px;
}
.why__split {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.why__facts { display: grid; gap: 34px; }
.why__fact-n {
  font-family: var(--f-sans);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(3rem, 5.2vw, 4.2rem);
  line-height: 0.94;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.why__fact-l {
  margin-top: 10px;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-body-soft);
}
.why__traits { border-top: 0.8px solid var(--c-rule); }
.why__trait {
  padding: 20px 0;
  border-bottom: 0.8px solid var(--c-rule);
}
.why__trait dt {
  font-family: var(--f-sans);
  font-weight: 600;
  font-style: normal;
  font-size: 1.375rem;   /* 22 */
  line-height: 1.2;
  color: var(--c-ink);
  letter-spacing: -0.005em;
}
.why__trait dd {
  margin-top: 6px;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-body-soft);
}

/* ---- #approach — the rail was right, it just had nothing to say ----------- */
.appr__head { text-align: center; max-width: 62ch; margin: 0 auto; }
.appr__head .section-head-lead { margin-top: 12px; }
/* the rail now runs in brand blue and stops at a terminal dot, so the sequence
   reads as going somewhere rather than as five circles that happen to align */
.steps__list::before {
  background: linear-gradient(90deg,
    transparent 0%, rgba(0, 78, 195, 0.28) 12%, rgba(0, 78, 195, 0.28) 88%, transparent 100%);
}
.step__n { border-color: rgba(0, 78, 195, 0.22); }

/* ---- #book — a contact card, not a third gradient band -------------------- */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 56px;
  align-items: start;
  padding: 56px 56px 58px;
  text-align: left;
}
.cta__p { max-width: 54ch; margin-top: 16px; }
.cta__tag {
  margin-top: 28px;
  font-size: 1.375rem;
}
.cta__card {
  padding: 26px 28px 28px;
  border-radius: 24px;
  background: var(--c-white);
  border: 0.8px solid var(--c-rule);
  box-shadow: var(--e-1);
}
.cta__card-k {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-body-soft);
}
.cta__routes { margin-top: 6px; }
.cta__route + .cta__route { border-top: 0.8px solid var(--c-rule); }
.cta__route a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 14px;
  padding: 15px 0;
}
.cta__route-i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--c-tint-off);
  border: 0.8px solid var(--c-rule);
  color: var(--c-primary-deep);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.cta__route-i .i { width: 20px; height: 20px; }
.cta__route a:hover .cta__route-i { background: var(--c-primary); color: var(--c-white); }
.cta__route-n {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}
.cta__route-d {
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--c-body-soft);
}
.cta__meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.8px solid var(--c-rule);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-body-soft);
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .why__split { grid-template-columns: 1fr; gap: 40px; }
  .why__facts { grid-template-columns: 1fr 1fr; gap: 28px; }
  .cta { grid-template-columns: 1fr; gap: 36px; padding: 44px 40px 46px; }
  .cta__card { max-width: 460px; }
}
@media (max-width: 860px) {
  .who__index { grid-template-columns: 1fr; column-gap: 0; }
  .lang__pair { gap: 28px; padding: 34px 0; margin: 40px 0 38px; }
  .lang__rule { height: 72px; }
}
@media (max-width: 720px) {
  .who__head, .why__head { margin-bottom: 30px; }
  .who__row { padding: 15px 0; }
  .who__t { font-size: 1.1875rem; }
  .who__d { padding-left: 0; margin-top: 6px; }
  .lang__pair {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 0;
  }
  /* the divider turns horizontal once the pair stacks */
  .lang__rule { width: 64px; height: 1px; margin-inline: auto; }
  .why__facts { grid-template-columns: 1fr; gap: 24px; }
  .cta { padding: 34px 22px 36px; gap: 28px; border-radius: 26px; }
  .cta__tag { font-size: 1.1875rem; margin-top: 22px; }
  .cta__card { padding: 20px 18px 22px; }
  .cta__route a { gap: 3px 12px; padding: 13px 0; }
  .cta__route-i { width: 36px; height: 36px; border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .who__row, .cta__route-i { transition: none; }
}

/* ==========================================================================
   28 . Legal pages (privacy.html, terms.html, disclaimer.html)
   --------------------------------------------------------------------------
   These are read, not browsed. Nobody arrives here to be persuaded, so the
   job is different from every other section: one narrow measure of prose,
   a way to jump to the clause you came for, and enough vertical air that a
   wall of obligations does not read as one.

   No new colours and no new type sizes — legal pages that look designed
   look like marketing, which is the wrong signal on exactly the pages a
   reader is checking for straight answers.
   ========================================================================== */

.legal {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  /* Capped and centred rather than filling the wrap. The prose is held to a
     68ch measure regardless, so a full-width track just leaves 250px of dead
     space against the right edge and makes the page look broken on a laptop.
     232 + 64 + 656 = 952, which is the measure plus the rail and no more. */
  max-width: 952px;
  margin-inline: auto;
}

/* ---- the jump list ------------------------------------------------------- */
/* Sticky, because the whole point of a clause list is reaching a clause from
   halfway down a long page. */
.legal__toc {
  position: sticky;
  top: 96px;
  padding: 22px 20px 24px;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 0.8px solid var(--c-rule);
  box-shadow: var(--e-1);
}
.legal__toc-h {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-body-soft);
}
.legal__toc-list {
  margin-top: 12px;
  padding: 0;
  list-style: none;
  counter-reset: clause;
}
.legal__toc-list li { counter-increment: clause; }
.legal__toc-list a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 7px 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--c-body);
  transition: color var(--dur-fast) var(--ease-out);
}
/* The numbers are generated, not written into the markup: the clause order
   lives in .specs/legal.py, and hand-numbered links go stale the first time a
   clause is inserted. tabular-nums keeps the text edge straight. */
.legal__toc-list a::before {
  content: counter(clause, decimal-leading-zero);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--c-primary);
}
.legal__toc-list a:hover { color: var(--c-primary-deep); }

/* ---- the prose ---------------------------------------------------------- */
.legal__updated {
  margin-top: 20px;
  font-size: var(--t-sm);
  color: var(--c-body-soft);
}
.legal__body { max-width: 68ch; }
.legal__sec + .legal__sec {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 0.8px solid var(--c-rule);
}
.legal__sec > h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--c-ink);
}
.legal__sec > h3 {
  margin-top: 24px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-ink);
}
.legal__sec p,
.legal__sec ul {
  margin-top: 14px;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-body);
}
.legal__sec ul { padding-left: 0; list-style: none; }
.legal__sec li + li { margin-top: 9px; }
/* A marker drawn as a pseudo-element rather than a list bullet, so the second
   line of a long clause aligns under the first word and not under the dot. */
.legal__sec li {
  position: relative;
  padding-left: 22px;
}
.legal__sec li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: 0.55;
}
.legal__sec code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--c-tint-off);
  border: 0.8px solid var(--c-rule);
  font-size: 0.9em;
}

/* A clause the client still has to decide, called out so it cannot be skimmed
   past. It ships visible on purpose: a placeholder nobody notices is worse
   than one that looks unfinished. */
.legal__flag {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--c-primary);
  background: var(--c-tint-blue);
  font-size: var(--t-sm);
}

/* ---- the callout above the body ----------------------------------------- */
.legal__call {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 40px;
  padding: 22px 24px 24px;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 0.8px solid var(--c-rule);
  box-shadow: var(--e-1);
}
.legal__call-i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--c-tint-blue);
  color: var(--c-primary-deep);
}
.legal__call-t {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.legal__call p {
  margin-top: 6px;
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: var(--c-body);
}
/* The crisis callout is the one place on these pages that earns emphasis. */
.legal__call--warn {
  border-color: rgba(0, 78, 195, 0.3);
  background: var(--c-tint-blue);
}
.legal__call--warn .legal__call-i {
  background: var(--c-primary);
  color: var(--c-white);
}

.legal__foot {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 0.8px solid var(--c-rule);
  font-size: var(--t-sm);
  color: var(--c-body-soft);
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .legal { grid-template-columns: 1fr; gap: 34px; }
  /* Unsticks when it stacks: a sticky block above the prose would cover it. */
  .legal__toc { position: static; top: auto; }
  .legal__toc-list { columns: 2; column-gap: 32px; }
}
@media (max-width: 620px) {
  .legal__toc-list { columns: 1; }
  .legal__call { grid-template-columns: 1fr; gap: 12px; padding: 18px 18px 20px; }
  .legal__sec + .legal__sec { margin-top: 32px; padding-top: 28px; }
  .legal__sec > h2 { font-size: 1.3125rem; }
}

@media print {
  .legal__toc, .legal__foot { display: none; }
  .legal { grid-template-columns: 1fr; }
  .legal__sec, .legal__call { break-inside: avoid; }
}