/* ============== THERAPY IN MARLOW — BRAND & LAYOUT TOKENS ==============
   Single source of truth for the design system. Layout, spacing, radii and
   motion are modelled on the Calmind reference (reactheme.com/.../calmind/
   homepage-4) — generous whitespace, soft rounded cards, pill CTAs.

   ✅ COLOURS & FONTS FOLLOW KEELEY'S OFFICIAL "KEY FOR CHANGE" BRAND STYLE
   GUIDE (supplied 2026-06-11, task #10524). Purple #512D7F is the key brand
   colour; lavender #7960A0 the calm accent; amber #FAAF40 the warm accent pop;
   crimson #CC0030 reserved for danger/error; warm cream #FBF3E4 the surface
   tint. TYPE per the guide: Fira Sans (headers) + Open Sans (body) — was
   Montserrat pre-#10524. The old role-named --c-* vars are retained but
   remapped onto the brand so components.css/utilities.css keep working — the
   whole system still swaps from THIS BLOCK ONLY. */

:root {
  /* ---- Keeley's brand palette (keyforchange.com) ----
     Role names kept for back-compat; values are the real brand. */
  --c-plum:        #512d7f;   /* PRIMARY — the key brand purple */
  --c-plum-deep:   #3a1f5c;   /* darker purple for dark sections */
  --c-clay:        #7960a0;   /* ACCENT — soft lavender (her brand accent) */
  --c-clay-deep:   #5f4580;   /* mid purple */
  --c-sage:        #9b86b8;   /* light purple — ornament / calm detail */
  --c-paper:       #fdfbf7;   /* page background — warm near-white */
  --c-cream:       #fbf3e4;   /* tinted surface — her warm cream */
  --c-cream-deep:  #efe1c8;   /* deeper cream — borders, quote marks */
  --c-ink:         #1b1525;   /* body text — near-black, faint purple cast */
  --c-mute:        #6b6478;   /* muted/secondary text */
  --c-line:        #e9e2f0;   /* hairlines, borders — light purple-grey */
  --c-white:       #ffffff;
  --c-crimson:     #cc0030;   /* danger/error/safety ONLY (quick-exit, crisis, form errors) */
  --c-crimson-deep:#a3002a;   /* crimson hover */
  --c-amber:       #faaf40;   /* brand amber (Key for Change style guide #10524) — warm accent pop */
  --c-amber-deep:  #e7972a;   /* deeper amber — hover / borders */

  /* Semantic aliases (use these in component CSS, not the raw names above) */
  --bg:            var(--c-paper);
  --surface:       var(--c-white);
  --surface-tint:  var(--c-cream);
  --primary:       var(--c-plum);
  --accent:        var(--c-clay);    /* lavender — eyebrows, em, numbers, stars */
  --cta:           var(--c-plum);    /* brand purple — primary call-to-action (#10502: was crimson; red reads as danger). Genuine danger/error/safety UI uses --c-crimson directly. */
  --ink:           var(--c-ink);
  --mute:          var(--c-mute);
  --line:          var(--c-line);

  /* ---- Section band tones (#10513) ----
     Dedicated band backgrounds so the page reads as a RHYTHM, not one long
     light field. These are intentionally further apart in value/hue than the
     old paper↔cream pair (which were near-identical). NOTE: kept separate from
     --surface-tint / --c-cream on purpose — those stay reserved for small
     component fills (icon chips, zebra rows, the crisis box) which must stay
     lighter than the band they sit on. Edit the rhythm from HERE only. */
  --band-paper:     #fdfbf7;   /* lightest — warm near-white */
  --band-tint:      #f3e8d2;   /* warm cream — clearly deeper than paper */
  --band-tint-edge: #e7d8bb;   /* tint band hairline (top/bottom seam) */
  --band-lavender:  #ece4f6;   /* cool brand wash — HUE contrast vs the cream */
  --band-lav-edge:  #dccff0;   /* lavender band hairline */
  --band-seam:      rgba(81,45,127,.10);  /* paper↔paper divider hairline */

  /* Faint paper grain — a premium tactile texture laid over the coloured
     bands so neighbouring sections read as distinct *materials*, not just
     slightly different whites. One tile ≈ 120px, very low contrast. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ---- Type (Key for Change brand style guide #10524) ----
     Headers: Fira Sans Medium · Body: Open Sans Regular. The --serif name is
     legacy (no serif in the brand) — it now resolves to the heading face,
     Fira Sans. --sans is the body face, Open Sans. */
  --serif: "Fira Sans", "Helvetica Neue", Arial, sans-serif;   /* headers — Fira Sans */
  --sans:  "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;  /* body — Open Sans */

  /* ---- Shadows (soft, Calmind-style) ---- */
  --shadow-soft: 0 10px 30px rgba(81, 45, 127, .08);
  --shadow-card: 0 18px 50px rgba(81, 45, 127, .13);
  --shadow-hero: 0 30px 90px rgba(58, 31, 92, .30);

  /* ---- Radii (rounded, generous) ---- */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;

  /* ---- Layout / rhythm ---- */
  --maxw: 1240px;
  --maxw-mid: 1040px;
  --pad-x: clamp(14px, 5vw, 72px);
  --gap: clamp(20px, 2.6vw, 34px);
  --section-y: clamp(64px, 8vw, 120px);
}

* { box-sizing: border-box; }
/* overflow-x: clip on <html> — only this stops position:fixed children
   (e.g. the closed mobile-nav drawer parked at translateX(100%)) from
   widening the document on mobile. `clip` over `hidden` so we don't
   establish a new scrolling context (keeps any future position:sticky alive). */
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
section[id] { scroll-margin-top: 90px; }
svg { flex-shrink: 0; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;   /* Fira Sans Medium per the Key for Change brand guide (#10524) */
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--primary);
}
h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: clamp(1.05rem, 1.4vw, 1.22rem); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }

p { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--accent);
  font-weight: 600;
  display: inline-block;
}
.eyebrow.light { color: #c9b6e6; } /* light lavender — readable on dark purple */
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--mute); max-width: 60ch; }

/* ---- Layout primitives ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap--mid { max-width: var(--maxw-mid); }
.section { padding: var(--section-y) 0; position: relative; }
.section--paper { background: var(--band-paper); }
.section--tint  { background: var(--band-tint); }
.section--lavender { background: var(--band-lavender); }
.section--dark  { background: var(--c-plum-deep); color: #efe9f4; }
.section--lavender h1, .section--lavender h2, .section--lavender h3, .section--lavender h4 { color: var(--c-plum-deep); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lede { color: rgba(239,230,233,.8); }

/* --- Band texture + seams (#10513): make alternating sections READ ---
   Coloured bands get a faint paper grain so they feel like distinct
   materials, plus a hairline top/bottom seam so a band never melts into
   its neighbour. The grain sits at z-index 0, behind .section > .wrap
   (z-index 1) and behind the decorative blobs (also later children). */
.section--tint::after,
.section--lavender::after,
.section--dark::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 120px 120px;
}
.section--tint::after,
.section--lavender::after { opacity: .55; mix-blend-mode: multiply; }
.section--dark::after     { opacity: .14; mix-blend-mode: soft-light; }

/* Hairline seams — define each coloured band's top & bottom edge so stacked
   same-tone sections still separate cleanly. */
.section--tint    { box-shadow: inset 0 1px 0 var(--band-tint-edge), inset 0 -1px 0 var(--band-tint-edge); }
.section--lavender{ box-shadow: inset 0 1px 0 var(--band-lav-edge),  inset 0 -1px 0 var(--band-lav-edge); }
/* paper→paper runs (e.g. press → testimonials → author) get a soft divider */
.section--paper + .section--paper { border-top: 1px solid var(--band-seam); }

.section-head { max-width: 64ch; margin: 0 auto clamp(34px, 5vw, 60px); text-align: center; }
.section-head .lede { margin-inline: auto; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head--left .lede { margin-inline: 0; }

/* Brand ornament — hairline · leaf · hairline, between eyebrow and h2 */
.ornament { display: inline-flex; align-items: center; gap: 12px; color: var(--line); margin: 14px 0 18px; }
.ornament::before, .ornament::after { content: ""; display: block; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); }
.ornament i { display: block; width: 8px; height: 8px; border-radius: 50% 0 50% 50%; background: var(--sage); transform: rotate(45deg); }
.ornament--center { justify-content: center; }
.ornament--dark { color: rgba(255,255,255,.28); }
.ornament--dark i { background: var(--accent); } /* lavender pops on dark sections (#10502 — was crimson) */

/* ---- Buttons (pill, Calmind-style) ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: .98rem;
  padding: 15px 30px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--cta); color: #fff; box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--c-plum-deep); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn--plum { background: var(--primary); color: #fff; }
.btn--plum:hover { background: var(--c-plum-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--primary); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--on-dark { background: #fff; color: var(--primary); }
.btn--on-dark:hover { background: var(--c-cream); color: var(--c-plum-deep); transform: translateY(-2px); } /* cream lift — these sit on purple bands, so the old --cta(now purple) hover would blend (#10502) */

/* ---- Reveal-on-scroll (opt-in via .reveal; group with [data-stagger]) ----
   Default = VISIBLE. The hide-pre-reveal state only applies when JS is running
   (html.js, set inline in <head> before paint) AND motion is not user-reduced.
   So no-JS visitors, headless renderers (Google, Lighthouse, Playwright screenshots)
   and prefers-reduced-motion users always see content immediately. */
.reveal { transition: opacity .8s cubic-bezier(.22,.65,.34,1) var(--reveal-d,0ms), transform .8s cubic-bezier(.22,.65,.34,1) var(--reveal-d,0ms); }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.in) { opacity: 0; transform: translateY(26px); }
}
[data-stagger] > .reveal:nth-child(1) { --reveal-d: 0ms; }
[data-stagger] > .reveal:nth-child(2) { --reveal-d: 80ms; }
[data-stagger] > .reveal:nth-child(3) { --reveal-d: 160ms; }
[data-stagger] > .reveal:nth-child(4) { --reveal-d: 240ms; }
[data-stagger] > .reveal:nth-child(5) { --reveal-d: 320ms; }
[data-stagger] > .reveal:nth-child(6) { --reveal-d: 400ms; }
[data-stagger] > .reveal:nth-child(n+7) { --reveal-d: 480ms; }
/* Per-paragraph reveal (#10514): a lighter lift + slightly quicker easing than
   the block-level reveal, so long prose sweeps in calmly instead of heaving.
   JS adds .reveal--item to each child block of an .article. */
.reveal--item { transition-duration: .6s; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal--item:not(.in) { transform: translateY(16px); }
}
/* Cascade zoom-in (#10515): chip/box rows scale up subtly instead of lifting,
   each box staggered via [data-stagger] --reveal-d for a sweep. Overrides the
   base .reveal translateY (later, equal-specificity rule wins). Same JS/no-JS/
   reduced-motion guarantees: the hide state is gated on html.js + no-preference,
   so chips stay fully visible without JS or for reduced-motion users. */
.reveal--zoom { transition-duration: .55s; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal--zoom:not(.in) { opacity: 0; transform: scale(.9); }
}
/* Flourish (#10517): press logos rise + scale in with a soft back-overshoot so each
   one "pops" gently, cascaded via [data-stagger] --reveal-d. Distinct from reveal--zoom
   — the overshoot easing gives it the flourish. Same JS/no-JS/reduced-motion guarantees
   (hide state gated on html.js + no-preference). A gentle perpetual float, phase-offset
   per logo for a continuous wave, is layered on post-reveal in components.css. */
.reveal--flourish { transition-duration: .7s; transition-timing-function: cubic-bezier(.34,1.4,.5,1); }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal--flourish:not(.in) { opacity: 0; transform: translateY(14px) scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Star rating helper ---- */
.stars { color: var(--c-amber); letter-spacing: 2px; font-size: 1rem; } /* gold/amber rating stars — brand amber #10524 */