/* ==========================================================================
   Light Unfolding — Speech Pathology & Occupational Therapy — site styles
   Palette: sage, cream, dusty rose — taken from the logo. See DESIGN.md.
   ========================================================================== */

:root {
  /* --- brand ramps -----------------------------------------------------
     Round 2: Catherine asked for brighter, more saturated colour "similar to
     my logo — sage green and dusty rose". The logo artwork itself is almost
     achromatic (sage samples at 3-8% saturation, rose at 22-25%), so these
     ramps keep the logo's hues — sage 90deg, rose 18deg, cream 45deg — and
     lift saturation roughly 3x on sage and 2x on rose. Lightness is tuned per
     step so every text pairing still clears WCAG AA; see the --primary note
     below and the checked pairs in DESIGN.md. */
  --sage-50:  #f5f6f3;
  --sage-100: #ebeee7;
  --sage-200: #d1dbc7;
  --sage-300: #b5c5a5;
  --sage-400: #9eb488;
  --sage-500: #85a267;
  --sage-600: #6b8452;
  --sage-700: #576944;
  --sage-800: #404b34;
  --sage-900: #2b3225;

  --rose-50:  #faf6f5;
  --rose-100: #f5eeea;
  --rose-200: #e9d6ce;
  --rose-300: #dcbeb2;
  --rose-400: #d2aa98;
  --rose-500: #c9947e;
  --rose-600: #ae745b;
  --rose-700: #865d4b;
  --rose-800: #61483d;
  --rose-900: #40312b;

  --cream-50:  #fdfdfb;
  --cream-100: #fbf9f4;
  --cream-200: #f7f3e9;
  --cream-300: #f3eddd;
  --cream-400: #ede6ce;
  --cream-500: #ebe2c7;
  --cream-600: #c5ba9b;

  /* --- semantic ---------------------------------------------------------
     Components reference these, not the ramps above. */
  --bg: #fdfdfb;
  --white: #ffffff;
  --surface: #ffffff;
  --ink-inverse: #ffffff;
  --surface-warm: #f7f3e9;
  --surface-sage: #e3eadc;
  --surface-feature: #ebe2c7;

  --ink: #2b3225;
  --ink-soft: #576944;
  --ink-muted: #61744e;
  --ink-heading: #404b34;

  /* Interactive sage. --primary on white is 5.98:1, so white text on a
     --primary fill passes AA. Brand sage (--brand-sage) is only 3.02:1 and is
     for decoration and large display text only — never small text. Note that
     --ink-muted is deliberately a shade darker than --sage-600: at the ramp's
     own lightness it lands under AA for body-size text on white. */
  --primary: #576944;
  --primary-hover: #404b34;
  --primary-soft: #ebeee7;
  --brand-sage: #7e9f5c;

  --accent: #865d4b;
  --accent-soft: #f5eeea;
  --brand-rose: #c9947e;

  --line: #d1dbc7;
  --line-warm: #e9d6ce;
  --focus: #576944;

  --font-display: "Playfair Display", Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow: 0 2px 8px rgba(44, 46, 41, 0.05), 0 14px 34px rgba(44, 46, 41, 0.07);
  --shadow-soft: 0 1px 4px rgba(44, 46, 41, 0.05);
  --wrap: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The nav bar rests over the top of the viewport, so in-page anchor targets
   need to clear it. Sized to the compact bar, not the full header. */
:target { scroll-margin-top: 92px; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

/* Playfair Display ships here at 700/900 only — 600 would synthesise a fake
   bold. Display type also wants slightly looser leading than the old serif. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-heading);
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 900; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.35rem; }

p { color: var(--ink-soft); }

a { color: var(--primary); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 76px 0; }
.section--tight { padding: 56px 0; }
.section--warm { background: var(--surface-warm); }
.section--sage { background: var(--primary); }
.section--rose { background: var(--rose-100); }

/* ---------- Warmth layer ----------
   Three decorative motifs from DESIGN.md §"Decorative motifs", used sparingly:
   a paper tooth on the tinted bands, a four-point sparkle as a section divider,
   and the flower as a faint watermark (one per page, opt-in).

   All three are CSS-only — no illustration budget, and no extra requests. The
   grain is generated by feTurbulence in a data URI rather than shipped as an
   image, so it costs nothing and never pixelates. */

/* Paper tooth. Multiply keeps it reading as texture in the surface rather than
   a grey film on top of it. Kept well under the level where it would fight the
   type — DESIGN.md: "nothing in this palette shouts". */
.section--warm,
.section--rose { position: relative; }
.section--warm::before,
.section--rose::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Flower watermark — opt in with .section--watermark, at most once per page. */
.section--watermark { position: relative; overflow: hidden; }
.section--watermark::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -56px;
  width: 320px;
  height: 406px;
  pointer-events: none;
  opacity: 0.07;
  background: url("../img/flower-mark.png") center / contain no-repeat;
}

/* Keep real content above both decorative layers. */
.section--warm > .wrap,
.section--rose > .wrap,
.section--watermark > .wrap { position: relative; z-index: 1; }

@media (max-width: 720px) {
  /* At phone widths the watermark lands under body copy rather than beside it. */
  .section--watermark::after { display: none; }
}

/* ---------- Photo band ----------
   A full-bleed photograph with the positioning line over it. The scrim is what
   makes the text legible over an arbitrary image — without it, cream on a pale
   photo fails contrast, and DESIGN.md forbids white text on brand sage. */
.photo-band { position: relative; }
.photo-band img {
  width: 100%;
  height: clamp(240px, 34vw, 420px);
  object-fit: cover;
}
.photo-band__caption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(44, 46, 41, 0.18) 0%, rgba(44, 46, 41, 0.62) 100%);
}
.photo-band__caption p {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.28;
  color: var(--ink-inverse);
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(28, 30, 26, 0.45);
}

/* The second band on the home page sits between two pale sections, so it gets
   a little breathing room rather than running edge-to-edge against them. */
.photo-band--alt { margin-top: 8px; }
.photo-band--alt img { height: clamp(200px, 26vw, 320px); }

/* A placeholder marker that sits under an image rather than after a section. */
.bio__photo .sample-note { margin: 0; display: block; text-align: center; font-style: italic; }

.eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Two-part eyebrow (discipline · coverage).
   Above 1120px: one line, nowrap on each phrase so neither breaks mid-phrase.
   The one-line form needs ~564px of column, which the 1.15fr hero column only
   clears above ~1085px — 1120px keeps a margin so no stray separator dangles.
   At or below 1120px the pair stacks and the separator goes.

   nowrap must NOT survive into the stacked form: the coverage phrase is ~329px,
   which exceeds the mobile column (312px at 360px wide) and would raise the
   column's min-content past the 1fr track, re-breaking the .wrap side gutters
   that 7053a1d fixed. Stacked, it wraps at spaces instead — the non-breaking
   hyphens in the markup keep "in-home"/"in-school" whole. */
.eyebrow--split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.55em;
}
.eyebrow__part { white-space: nowrap; }
.eyebrow__part + .eyebrow__part { letter-spacing: 0.08em; }
.eyebrow__sep { opacity: 0.55; }

@media (max-width: 1120px) {
  .eyebrow--split { display: block; }
  .eyebrow__sep { display: none; }
  .eyebrow__part {
    display: block;
    white-space: normal;
    text-wrap: balance;
  }
  .eyebrow__part + .eyebrow__part { margin-top: 3px; }
}

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 14px; font-size: 1.08rem; }

/* Four-point sparkle divider, closing every centred section head. The two
   hairlines fade outward so it reads as a breath between the heading and the
   content rather than a rule across the page. Decorative only — no content. */
.section-head--center::after {
  content: "";
  display: block;
  width: 132px;
  height: 16px;
  margin: 26px auto 0;
  background:
    linear-gradient(to right, transparent, var(--line-warm)) left center / 48px 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l2.1 8.3 8.3 2.1-8.3 2.1-2.1 8.3-2.1-8.3L1.6 12l8.3-2.1z' fill='%23c5b1a4'/%3E%3C/svg%3E") center center / 14px 14px no-repeat,
    linear-gradient(to left, transparent, var(--line-warm)) right center / 48px 1px no-repeat;
}
/* On the sage band the hairlines have too little contrast to read; drop them
   and keep the sparkle, in cream so it sits on the dark ground. */
.section--sage .section-head--center::after {
  width: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l2.1 8.3 8.3 2.1-8.3 2.1-2.1 8.3-2.1-8.3L1.6 12l8.3-2.1z' fill='%23e8e0c8'/%3E%3C/svg%3E") center center / 14px 14px no-repeat;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 15px 30px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Sage, not brand rose: white on --brand-rose is 2.48:1 and fails AA. White on
   --primary is 6.56:1. */
.btn--primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(44, 46, 41, 0.18);
}
.btn--primary:hover { background: var(--primary-hover); }

.btn--secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn--secondary:hover { background: var(--primary-soft); }

.btn--light {
  background: var(--white);
  color: var(--primary-hover);
}
.btn--light:hover { background: var(--bg); }

.btn--sm { padding: 10px 20px; font-size: 0.94rem; }
.btn--lg { padding: 18px 38px; font-size: 1.1rem; }

.btn-note {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---------- Header / nav ----------
   One row, always. The brand moment lives in the hero on the home page (see
   "Hero badge" below), not in a masthead band up here — a band cost 156px of
   every page's first screen and pushed the primary CTA under the fold on a
   laptop. The header is now just the horizontal lockup and the nav. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 253, 251, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  max-width: var(--wrap);
  margin: 0 auto;
}

/* Brand lockup — flower mark + wordmark pill (see DESIGN.md §"Lockups").
   The pill sits at ~4.4:1 width-to-height; the mark is sized off the pill so
   the two stay in proportion at any header height. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand__mark {
  flex: none;
  width: auto;
  height: 46px;
}
/* The horizontal lockup's wordmark. Set to echo the badge's curved wordmark —
   same caps, same wide tracking, same sage — rather than sitting in a box, so
   the mark and the type read as one logo instead of an image beside a label.

   Colour is --primary (sage 700), not the --brand-sage of the artwork: brand
   sage is 3.31:1 on the header's near-white ground, which fails AA at this
   size. Sage 700 is 6.56:1 and stays in the same family. See DESIGN.md §2. */
/* Stacked over two lines, which does three things at once: it gives the
   wordmark the weight it was missing, it echoes the badge (where the name also
   sits as its own band under the flower), and it makes the lockup ~70px
   narrower — the single line at full tracking left only 16px of slack in the
   nav just above its 1100px collapse, which was too thin. */
.brand__name {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--primary);
}
/* "LIGHT" is tracked out to sit flush with "UNFOLDING" beneath it — the two
   words are 5 and 9 characters, so matching their measures is what makes the
   stack read as a designed block rather than two ragged lines. Tuned by
   measurement; re-check if the font-size changes.

   The negative right margins cancel the phantom trailing letter-space, so the
   lockup's box is the width of the inked type and the nav gap stays honest. */
.brand__name span:first-child { letter-spacing: 1.15em; margin-right: -1.15em; }
.brand__name span:last-child { letter-spacing: 0.2em; margin-right: -0.2em; }
.brand__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Four-point sparkles scattered around the lockup, lifted from the ones
   orbiting the badge's oval. Decorative only, so they hang off pseudo-elements
   rather than adding markup, and they don't affect the lockup's layout box. */
.brand {
  position: relative;
}
.brand::before,
.brand::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l2.1 8.3 8.3 2.1-8.3 2.1-2.1 8.3-2.1-8.3L1.6 12l8.3-2.1z' fill='%23b8a090'/%3E%3C/svg%3E") center / contain no-repeat;
}
.brand::before {
  width: 11px; height: 11px;
  top: -3px; right: -13px;
}
.brand::after {
  width: 7px; height: 7px;
  bottom: 1px; right: -6px;
  opacity: 0.75;
}

/* The nav's own mark only appears once the flying flower has landed on top of
   it, so two flowers are never visible in different places at once. Gated on
   .is-flying, which main.js adds only when there is a hero badge to fly from —
   every other page shows the complete lockup from load. */
.js .site-header.is-flying .nav .brand__mark {
  opacity: clamp(0, calc((var(--p, 0) - 0.94) * 17), 1);
}

@media (max-width: 900px) {
  .brand__mark { height: 40px; }
  .brand__name { font-size: 0.68rem; }
  .brand::before { width: 9px; height: 9px; right: -10px; }
  .brand::after { display: none; }
}
@media (max-width: 380px) {
  .brand { gap: 9px; }
  .brand__mark { height: 36px; }
  .brand__name { font-size: 0.62rem; }
  .brand::before { display: none; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}
.nav__links a:not(.btn) {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn)[aria-current="page"] {
  color: var(--primary);
  border-bottom-color: var(--brand-rose);
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
}
.nav__toggle:hover { background: var(--surface-warm); }
.nav__toggle svg { width: 26px; height: 26px; stroke: var(--primary-hover); }

/* ---------- Hero badge ----------
   The brand moment, home page only. At rest it is the oval badge. On scroll the
   sage ring unfolds — stretching wide as it flattens — and the flower breaks
   free and flies up to the header lockup, where the header's own mark fades in
   underneath it.

   main.js writes --u (unfold, 0->1) and the flower's --fx/--fy/--fs/--frot.
   The ring's overflow is caught by .hero's existing `overflow: hidden`; the
   flower escapes it because a position:fixed element isn't clipped by a
   non-transformed ancestor. */
.hero-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-badge__stage {
  position: relative;
  display: block;
  width: min(300px, 78%);
  aspect-ratio: 337 / 467;
}
.hero-badge__ring {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  /* Wide and flat: the oval opening out rather than shrinking away. */
  transform:
    scaleX(calc(1 + var(--u, 0) * 1.15))
    scaleY(calc(1 - var(--u, 0) * 0.86))
    rotate(calc(var(--u, 0) * -4deg));
  opacity: calc(1 - var(--u, 0));
}
/* Positioned by main.js from the artwork geometry, then flown. Fixed, so the
   journey from the hero up to the header is one continuous arc in viewport
   space rather than two anchors fighting each other. */
.hero-badge__flower {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform:
    translate(calc(var(--fx, 0) * 1px), calc(var(--fy, 0) * 1px))
    rotate(calc(var(--frot, 0) * 1deg))
    scale(var(--fs, 1));
  opacity: clamp(0, calc(1 - (var(--p, 0) - 0.94) * 17), 1);
}
/* Before main.js has measured, the flower must not sit in the top-left corner
   of the viewport. It is revealed on the first frame after positioning. */
.hero-badge__flower:not(.is-placed) { opacity: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 88% -10%, var(--accent-soft) 0%, transparent 62%),
    radial-gradient(700px 480px at -8% 108%, var(--primary-soft) 0%, transparent 60%),
    var(--bg);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
  /* Vertical padding only — keep .wrap's horizontal gutters (padding: 0 24px)
     so the hero doesn't run edge-to-edge on mobile.

     Everything in this block is tuned to one requirement: the primary CTA has
     to sit above the fold on a 1366x640 laptop, which is the tightest common
     desktop viewport. Measure before loosening any of it — at the old sizes the
     CTA landed 151px below the fold. */
  padding-top: 26px;
  padding-bottom: 64px;
}

/* Smaller and tighter than the global h1 scale. The hero h1 is the longest
   heading on the site and sits in the narrower of two columns, so at the
   global clamp it ran to five lines and 327px on a 1366px-wide laptop —
   on its own more than half the available height. */
.hero h1 {
  font-size: clamp(1.8rem, 3.1vw, 2.5rem);
  line-height: 1.16;
  margin: 4px 0 14px;
}
.hero .eyebrow { margin-bottom: 8px; }
.hero h1 em {
  font-style: normal;
  color: var(--primary);
  position: relative;
}

.hero__lede {
  font-size: 1.06rem;
  line-height: 1.55;
  max-width: 34em;
  margin-bottom: 20px;
}

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

.hero__art {
  position: relative;
}
.hero__art svg { width: 100%; height: auto; }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.trust-strip svg { width: 18px; height: 18px; flex: none; }

/* ---------- Empathy checklist ---------- */
.worry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  margin: 34px 0 0;
}
.worry-grid li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: 1.02rem;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.worry-grid svg { width: 24px; height: 24px; flex: none; margin-top: 2px; }

.reassure {
  margin-top: 34px;
  background: var(--primary-soft);
  border-left: 5px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
}
.reassure p { color: var(--primary-hover); font-size: 1.08rem; margin: 0; }
.reassure strong { color: var(--primary-hover); }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: step;
}
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rose-200);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 0.98rem; }
.step__meta {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- Cards / services ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: var(--primary-soft);
}
.card__icon svg { width: 30px; height: 30px; }
.card h3 { margin-bottom: 10px; font-size: 1.25rem; }
.card p { font-size: 0.97rem; flex: 1; }
.card__link {
  margin-top: 16px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--accent);
}
.card__link:hover { text-decoration: underline; }

/* ---------- Concern signs (shared) ---------- */
.ages {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 12px;
}
.signs {
  list-style: none;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
}
.signs li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.signs svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }

/* ---------- Age comparison (concerns page) ----------
   Round 2: communication concerns and sensory/fine-motor concerns, side by
   side, banded by the age each usually first shows up. Two tracks on desktop;
   one below 980px, where each column re-labels itself so the reader still
   knows which discipline they're looking at. */
.agecmp { margin-top: 8px; }

.agecmp__headings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  position: sticky;
  top: 78px;
  z-index: 2;
  padding: 12px 0;
  background: linear-gradient(180deg, var(--bg) 72%, rgba(253, 253, 251, 0));
}
.agecmp__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-heading);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-rose);
}
.agecmp__headings > :first-child { border-bottom-color: var(--brand-sage); }

.agecmp__band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  padding: 30px 0 38px;
  border-bottom: 1px solid var(--line);
}
.agecmp__band:last-of-type { border-bottom: none; }
.agecmp__age { grid-column: 1 / -1; }
.agecmp__age h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 2px; }
.agecmp__age p { font-size: 0.95rem; color: var(--ink-muted); margin: 0; }

.agecmp__col { display: grid; gap: 18px; align-content: start; }
/* Shown only once the grid has collapsed — on desktop the sticky row above
   already names both columns, and repeating it in every band would be noise.
   It stays in the accessibility tree either way (hidden, not display:none),
   because the sticky row is aria-hidden and a screen reader would otherwise
   have nothing telling it which discipline a card belongs to. */
.agecmp__col-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.agecmp__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-soft);
}
.agecmp__card h4 { font-size: 1.15rem; margin-bottom: 8px; }
.agecmp__card > p { font-size: 0.96rem; }
.agecmp__foot { font-size: 0.92rem; margin-top: 14px; }
.agecmp__foot strong { color: var(--primary-hover); }

.agecmp__cta { grid-column: 1 / -1; margin-top: 4px; }

@media (max-width: 980px) {
  .agecmp__headings { display: none; }
  .agecmp__band { grid-template-columns: 1fr; }
  .agecmp__col-label {
    position: static;
    width: auto; height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 0.82rem;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: -4px;
  }
}

/* ---------- Insurance ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
.check-list { list-style: none; display: grid; gap: 14px; margin-top: 22px; }
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 1rem;
  color: var(--ink);
}
.check-list svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.check-list strong { display: block; }
.check-list span { color: var(--ink-soft); font-size: 0.95rem; }

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow);
}
.panel--teal { background: var(--primary); border: none; }
.panel--teal h3, .panel--teal p { color: var(--white); }
.panel--teal p { opacity: 0.88; }

/* ---------- Testimonials ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.quote__stars { color: var(--brand-rose); letter-spacing: 3px; font-size: 1.05rem; margin-bottom: 14px; }
.quote p { font-size: 0.99rem; flex: 1; color: var(--ink); }
.quote footer { margin-top: 18px; font-size: 0.9rem; font-weight: 700; color: var(--primary-hover); }
.quote footer span { display: block; font-weight: 500; color: var(--ink-soft); }
.sample-note { margin-top: 20px; font-size: 0.85rem; color: var(--ink-soft); font-style: italic; }

/* ---------- Guide / lead magnet band ---------- */
.magnet {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: 52px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.magnet h2, .magnet h3 { color: var(--white); }
.magnet p { color: rgba(255, 255, 255, 0.85); }
/* The form card is a white surface inside the sage panel, so the two rules above
   would leave its own text white-on-white. Reassert ink inside the card. */
.magnet .form-card h2, .magnet .form-card h3 { color: var(--ink-heading); }
.magnet .form-card p { color: var(--ink-soft); }
/* --brand-rose is only 2.29:1 on --primary. Cream carries the same warmth at 5.12:1. */
.magnet .eyebrow { color: var(--cream-300); }
.magnet ul { list-style: none; margin: 18px 0 0; display: grid; gap: 10px; }
.magnet ul li { display: flex; gap: 10px; color: rgba(255,255,255,0.92); font-size: 0.98rem; }
.magnet ul svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow);
}
.form-card h3 { margin-bottom: 6px; }
.form-card > p { font-size: 0.94rem; margin-bottom: 20px; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30, 106, 94, 0.15);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 100px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-footnote { font-size: 0.83rem; color: var(--ink-soft); margin-top: 14px; }

.form-msg {
  display: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.95rem;
  margin-top: 16px;
}
.form-msg--ok { background: var(--primary-soft); color: var(--primary-hover); }
.form-msg--err { background: var(--rose-200); color: var(--accent); }
.form-msg.is-visible { display: block; }

.form-success {
  display: none;
  text-align: center;
  padding: 26px 10px;
}
.form-success.is-visible { display: block; }
.form-success svg { width: 56px; height: 56px; margin: 0 auto 16px; }
.form-success h3 { margin-bottom: 10px; }
.form-success p { font-size: 0.98rem; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 500;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "–"; transform: rotate(180deg); }
.faq-item__body { padding: 0 24px 22px; }
.faq-item__body p { font-size: 0.98rem; }
.faq-item__body p + p { margin-top: 10px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { color: var(--white); margin-bottom: 14px; }
.cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 560px; margin: 0 auto 30px; font-size: 1.08rem; }
.cta-band .btn-note { color: rgba(255, 255, 255, 0.75); }

/* ---------- Bio ---------- */
.bio {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 52px;
  align-items: start;
}
.bio__photo {
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.bio__photo svg { width: 100%; height: auto; }
.bio__photo img { width: 100%; height: auto; display: block; }
/* The About slot takes the portrait as-is. The homepage "meet" slot used to be
   a tighter 4:3 crop, but Catherine asked (2026-09-11) for her shoulders to
   show here too, matching the About page framing — so this is now close to
   the source photo's own ~4:5 ratio, just enough object-fit to smooth out
   any column-width rounding rather than to crop meaningfully. */
#meet .bio__photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}



/* Catherine asked (2026-09-29) for her homepage photo to be smaller than a
   full grid column, so it's capped and centred in its own cell rather than
   stretching to match the text column's width. */
#meet .bio__photo {
  max-width: 380px;
  justify-self: center;
}

/* ---------- Team page ---------- */
#team .bio__photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}
/* Placeholder photo box for team members whose portrait hasn't been supplied
   yet — same frame as a real .bio__photo, just holding an icon + a
   .sample-note instead of an <img>. */
.bio__photo--placeholder {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
}
.bio__photo--placeholder svg { width: 56px; height: 56px; opacity: 0.5; }
.bio__photo figcaption {
  padding: 14px 18px;
  font-size: 0.82rem;
  color: var(--rose-800);
  background: var(--rose-200);
  text-align: center;
  font-weight: 600;
}
.creds { list-style: none; margin: 22px 0; display: grid; gap: 12px; }
.creds li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.99rem; color: var(--ink); }
.creds svg { width: 21px; height: 21px; flex: none; margin-top: 3px; }

/* ---------- Milestone guide page ---------- */
.guide-band {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  margin-bottom: 26px;
  overflow: hidden;
}
.guide-band__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 30px;
  background: var(--primary-soft);
}
.guide-band__head h3 { font-size: 1.3rem; color: var(--primary-hover); }
.guide-band__age {
  flex: none;
  background: var(--primary);
  color: var(--white);
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 6px 16px;
  letter-spacing: 0.04em;
}
.guide-band__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.guide-band__col { padding: 26px 30px; }
.guide-band__col + .guide-band__col { border-left: 1px solid var(--line); }
.guide-band__col h4 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.guide-band__col--typical h4 { color: var(--primary); }
.guide-band__col--flags h4 { color: var(--accent); }
.guide-band__col ul { list-style: none; display: grid; gap: 9px; }
.guide-band__col li { display: flex; gap: 10px; font-size: 0.95rem; color: var(--ink-soft); }
.guide-band__col svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }

.urgent-flags {
  background: var(--rose-200);
  border: 1.5px solid var(--brand-rose);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
  margin: 40px 0;
}
.urgent-flags h2, .urgent-flags h3 { font-size: 1.35rem; color: var(--accent); margin-bottom: 12px; }
.urgent-flags ul { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
.urgent-flags li { display: flex; gap: 10px; color: var(--ink); font-size: 0.98rem; }
.urgent-flags svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }

/* ---------- Booking page ---------- */
.booking-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.expect-list { list-style: none; display: grid; gap: 18px; margin-top: 24px; }
.expect-list li { display: flex; gap: 14px; align-items: flex-start; }
.expect-list svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.expect-list strong { display: block; color: var(--ink); }
.expect-list span { color: var(--ink-soft); font-size: 0.96rem; }

#scheduler-embed { display: none; }
#scheduler-embed.is-active { display: block; position: relative; min-height: 780px; }
/* Branded loading mask over the Cliniko iframe (hides its unstyled flash). */
.scheduler-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--ink-soft, #576944);
  font-size: 0.98rem;
  transition: opacity 0.35s ease;
  z-index: 2;
}
.scheduler-loading.is-hidden { opacity: 0; pointer-events: none; }
.scheduler-loading__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(28, 107, 98, 0.2);
  border-top-color: var(--primary);
  animation: scheduler-spin 0.8s linear infinite;
}
@keyframes scheduler-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .scheduler-loading__spinner { animation-duration: 2s; }
  /* No flight and no unfold. The badge simply sits in the hero and the header
     lockup is complete from load — the same end state, with nothing travelling
     across the screen. main.js also stops writing the flower's transform. */
  .hero-badge__ring { transform: none; opacity: 1; }
  .hero-badge__flower { display: none; }
  .js .site-header.is-flying .nav .brand__mark { opacity: 1; }
}
#scheduler-embed .calendly-inline-widget,
#scheduler-embed .scheduler-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
}
#scheduler-embed .scheduler-frame {
  width: 100%;
  min-height: 780px;
  border: 0;
  display: block;
}
.scheduler-linkout {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 40px 34px;
  text-align: center;
}
.scheduler-linkout h3 { margin-bottom: 10px; }
.scheduler-linkout p { margin-bottom: 22px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(253, 253, 251, 0.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(43, 39, 35, 0.1);
}
.sticky-cta .btn { width: 100%; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--primary-hover);
  color: rgba(255, 255, 255, 0.82);
  padding: 60px 0 30px;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
}
.site-footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer p { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }
.footer-brand .brand__mark { height: 40px; }
.footer-brand .brand__tag { color: var(--rose-300); }
/* On the dark sage footer the lockup inverts to cream — which is actually the
   truer reading of the badge, where the wordmark is cream on the sage ring. */
.footer-brand .brand__name { color: var(--cream-500); }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  display: grid;
  gap: 8px;
}

/* ---------- Utility ---------- */
.center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 34px; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Print (milestone guide) ---------- */
@media print {
  .site-header, .site-footer, .sticky-cta, .no-print { display: none !important; }
  body { background: #fff; }
  .guide-band { break-inside: avoid; box-shadow: none; }
  /* Decoration costs toner and adds nothing on paper. */
  .section--warm::before,
  .section--rose::before,
  .section--watermark::after,
  .section-head--center::after { display: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; padding-bottom: 56px; }
  .hero__art { max-width: 460px; margin: 0 auto; }
  .steps, .card-grid, .quote-grid { grid-template-columns: 1fr 1fr; }
  .split, .booking-grid, .magnet { grid-template-columns: 1fr; }
  .magnet { padding: 38px 30px; }
  .bio { grid-template-columns: 1fr; }
  .bio__photo { max-width: 380px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }

  /* Phone: the two CTAs go full-width and stack, so they cost ~150px on their
     own. Everything above them is tightened to keep the primary CTA on the
     first screen of a 375x667 handset — the smallest phone still in real use. */
  .hero__grid { padding-top: 16px; }
  .hero .eyebrow { margin-bottom: 6px; font-size: 0.74rem; }
  .hero__lede { font-size: 1rem; line-height: 1.5; margin-bottom: 18px; }
  .steps, .card-grid, .quote-grid, .worry-grid, .field--row,
  .guide-band__cols { grid-template-columns: 1fr; }
  .guide-band__col + .guide-band__col { border-left: none; border-top: 1px solid var(--line); }

  /* The mobile-nav and sticky-CTA rules that used to sit here were byte-identical
     to — and superseded by — the @media (max-width: 1100px) block near the end of
     this file, which is the real nav breakpoint. Removed rather than left to rot. */

  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero__ctas .btn { width: 100%; }
}

/* ==========================================================================
   Light Unfolding additions — pricing tiers, fee panels, funding, schools, concerns
   ========================================================================== */

/* ---------- Boutique strip ---------- */
.boutique-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.boutique {
  text-align: center;
  padding: 8px 6px;
}
.boutique__icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: var(--surface-sage);
  display: flex; align-items: center; justify-content: center;
}
.boutique__icon svg { width: 32px; height: 32px; }
.boutique h3 { font-size: 1.12rem; margin-bottom: 6px; }
.boutique p { font-size: 0.94rem; }

/* ---------- Concern hub ("what you're noticing") ---------- */
/* Round 2: these were ten open cards and they made the landing page very
   long. They're now <details>, collapsed to the parent's own words, so the
   section scans as a list of quotes you can open. Native disclosure — no JS,
   keyboard and screen-reader behaviour comes free, and Ctrl+F still finds
   closed text in current browsers. */
.concern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.concern {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand-rose);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
}
.concern[open] { border-left-color: var(--primary); box-shadow: var(--shadow); }
.concern summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
}
.concern summary::-webkit-details-marker { display: none; }
.concern summary h3 { font-size: 1.12rem; margin: 0; }
/* The +/– sits in a pseudo-element on the summary, matching .faq-item. */
.concern summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}
.concern[open] summary::after { content: "–"; }
.concern summary:hover h3 { color: var(--primary); }
.concern__body { padding: 0 24px 22px; }
.concern .fear { font-size: 0.9rem; color: var(--ink-soft); font-style: italic; margin-bottom: 10px; }
.concern .reframe { font-size: 0.96rem; color: var(--ink); }
.concern .reframe strong { color: var(--primary-hover); }

/* ---------- Pricing tiers ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 880px;
  margin: 0 auto;
}
.tier {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.tier--featured { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.tier__badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  /* --brand-rose is decoration-only: white on it is 2.62:1. --accent is 5.70:1. */
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(224,122,86,0.35);
}
.tier__name { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary-hover); }
.tier__min { color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; margin-top: 2px; }
.tier__price { font-family: var(--font-display); font-size: 2.3rem; color: var(--ink); margin: 18px 0 2px; }
.tier__price span { font-size: 0.98rem; font-weight: 600; color: var(--ink-soft); font-family: var(--font-body); }
.tier__note { font-size: 0.88rem; color: var(--ink-soft); }
/* Who the tier is for, in clinical terms. Sits between the price and the
   feature list so the choice reads as a recommendation, not an upsell. */
.tier__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-warm);
}
.tier__list { list-style: none; display: grid; gap: 12px; margin: 22px 0; flex: 1; }
/* Block + absolute icon, NOT flex: several of these bullets lead with a <strong>
   ("<strong>90 minutes</strong> of therapy — ..."). Under `display:flex` the
   <strong> and the text after it become two separate flex items sitting in
   side-by-side columns, so the sentence breaks apart and the bolded phrase
   wraps mid-phrase. As a block, the inline content flows as one sentence. */
.tier__list li {
  position: relative;
  padding-left: 30px;
  font-size: 0.96rem;
  color: var(--ink);
}
.tier__list svg { position: absolute; left: 0; top: 0.22em; width: 20px; height: 20px; flex: none; }
.tier__list li.is-off { color: var(--ink-soft); }

/* Discipline label above each pair of milestone columns. Each age band carries
   two: talking/understanding, then movement/everyday skills. */
.guide-band__discipline {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 22px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line-warm);
}
.guide-band__discipline:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }

/* ---------- Fee explainer panels ----------
   Was .mileage, which held a per-kilometre cost-comparison table. Travel is now
   included on both tiers, so the table is gone and the panel explains what the
   billed time actually covers instead. */
.fee-panel {
  background: var(--primary-soft);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
  margin-top: 36px;
}
.fee-panel h3 { color: var(--primary-hover); margin-bottom: 10px; }

/* ---------- Funding cards ---------- */
.funding-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.funding-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-soft);
}
.funding-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.funding-card__icon svg { width: 24px; height: 24px; }
.funding-card h4 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 8px; }
.funding-card p { font-size: 0.9rem; }

/* ---------- Schools dual-audience ---------- */
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.audience {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-soft);
}
.audience__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.audience__icon { width: 50px; height: 50px; border-radius: 14px; background: var(--surface-sage); display: flex; align-items: center; justify-content: center; flex: none; }
.audience__icon svg { width: 28px; height: 28px; }
.audience h3 { font-size: 1.3rem; }
.audience ul { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.audience li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.97rem; color: var(--ink); }
.audience li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* ---------- Path A / B cards (assessment routing) ---------- */
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.path {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  box-shadow: var(--shadow-soft);
}
/* --rose-800 rather than --accent: on a --rose-200 pill the accent is 4.07:1, and
   this is 12.5px uppercase. --rose-800 is 5.98:1. */
.path__tag { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-800); background: var(--rose-200); border-radius: 999px; padding: 5px 14px; margin-bottom: 14px; }
.path h3 { font-size: 1.3rem; margin-bottom: 10px; }

/* ---------- NDIS page ---------- */

/* Availability strip. The one thing an NDIS family scanning providers wants to
   know before anything else, so it gets its own band under the hero. */
.avail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  background: var(--primary-soft);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  padding: 18px 28px;
  text-align: center;
}
.avail__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(47, 158, 107, 0.2);
  flex: none;
}
.avail strong { color: var(--primary-hover); font-size: 1.05rem; }
.avail span { color: var(--ink-soft); font-size: 0.97rem; }

/* Plan-management eligibility cards — two "yes" and one honest "not yet",
   which needs to read as clearly different without looking like a warning. */
.elig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.elig {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}
.elig--yes { border: 1.5px solid var(--primary); }
.elig--no { background: var(--surface-warm); border: 1.5px dashed var(--cream-600); box-shadow: none; }
.elig__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.elig__badge svg { width: 14px; height: 14px; flex: none; }
.elig__badge--yes { color: var(--primary-hover); background: var(--primary-soft); }
.elig__badge--no { color: var(--ink-soft); background: var(--white); border: 1px solid var(--line); }
.elig h3 { font-size: 1.25rem; margin-bottom: 10px; }
.elig p { font-size: 0.96rem; }
.elig p + p { margin-top: 12px; }

/* ---------- Responsive additions ---------- */
@media (max-width: 980px) {
  .boutique-grid { grid-template-columns: 1fr 1fr; }
  .funding-grid { grid-template-columns: 1fr 1fr; }
  .audience-grid, .path-grid { grid-template-columns: 1fr; }
  .elig-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .boutique-grid, .funding-grid, .pricing-grid, .concern-grid { grid-template-columns: 1fr; }
  .elig-grid { grid-template-columns: 1fr; }
  .avail { padding: 16px 20px; }
  .fee-panel { padding: 24px 20px; }
}

/* The Light Unfolding nav has more items — collapse it to the mobile menu earlier so the
   links and CTA never crowd or wrap in the tablet range. The full row (brand +
   7 links + CTA) needs ~1015px of content box, i.e. ~1080px of viewport once the
   24px gutters and a scrollbar are counted. Below that "Is this your child?"
   wraps onto its own line and the header doubles in height, so cut over at 1100
   to leave headroom for font-rendering differences across platforms. */
@media (max-width: 1100px) {
  .nav__toggle { display: block; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 20px;
    box-shadow: 0 16px 32px rgba(43, 39, 35, 0.12);
  }
  .nav__links.is-open { display: flex; }
  .nav__links li { padding: 6px 0; }
  .nav__links .btn { margin-top: 10px; }
  .sticky-cta.is-shown { display: block; }
  body.has-sticky-cta { padding-bottom: 84px; }
}