/* ═══════════════════════════════════════════════════════════════════════════
   Go Well — universal stylesheet (loaded on every page by base.njk).
   All section / component styles live here. Plain CSS, no framework.
   Visual language: teal/sage Material-3, glass cards, soft gradients,
   pill buttons, 20%-grayscale photos, Material Symbols icons.
   Mirrors design/stitch-toolkit/. Tokens in tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--on-background);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text-heading); line-height: 1.15; }
h1 { font-size: var(--step-3); margin: 0 0 var(--space-m); letter-spacing: -.02em; font-weight: 500; }
h2 { font-size: var(--step-2); margin: 0 0 var(--space-m); font-weight: 500; }
h3 { font-size: var(--step-1); margin: 0 0 var(--space-s); font-weight: 500; }
h4 { font-size: var(--step-0); margin: 0 0 .35rem; font-weight: 600; font-family: var(--font-sans); }
p  { margin: 0 0 var(--space-m); }
a  { color: var(--on-primary-container); }
em { color: var(--primary); font-style: italic; }
img { max-width: 100%; height: auto; display: block; }

/* ── Keyboard focus visibility (WCAG 2.4.7 / 2.4.11 AA) ───────────────────
   No element should rely on the (easily-clipped) UA default outline. A clear
   teal ring clears 3:1 non-text contrast on every light surface (primary on
   surface = 6.16:1); dark sections switch to a white ring below. #}             */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.cta :focus-visible, .cat-label :focus-visible, .skip-link:focus-visible { outline-color: #fff; }
main:focus { outline: none; }   /* programmatic focus target only, not a control */

/* ── Skip link (WCAG 2.4.1 Bypass Blocks, Level A) — off-screen until focused ── */
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--primary); color: var(--on-primary); padding: .7em 1.2em;
  border-radius: var(--radius-pill); font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-card); transition: top .15s ease; }
.skip-link:focus { top: 1rem; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle; user-select: none;
}

.wrap   { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { max-width: var(--wrap-narrow); }
.center { text-align: center; margin-inline: auto; }

/* Section eyebrow / heading cluster */
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: var(--step--1);
  color: var(--primary); font-weight: 600; margin: 0 0 var(--space-s); display: block; }
.section-head { max-width: 42rem; margin-bottom: var(--space-l); }
.section-head.center { margin-inline: auto; }
.section-head p { color: var(--on-surface-variant); margin: 0; font-size: var(--step-0); }

section { padding: var(--space-section) 0; }

/* ── Buttons (pill) ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85em 1.8em;
  border-radius: var(--radius-pill); font-weight: 600; font-size: var(--step-0);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--on-primary-container); box-shadow: var(--shadow-card); }
.btn-accent { background: var(--primary-container); color: var(--on-primary-container); }
.btn-ghost { background: transparent; color: var(--on-primary-container); border-color: var(--outline-variant); }
.btn-ghost:hover { background: var(--surface-container); }
.btn-on-dark { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
.btn-on-dark:hover { background: rgba(255,255,255,.1); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(246,250,249,.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head);
  font-weight: 600; font-size: var(--step-1); text-decoration: none; color: var(--primary); }
.brand img { height: 2.5rem; width: auto; }
.nav { display: flex; gap: 2rem; align-items: center; }
.nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; text-decoration: none;
  color: var(--on-surface-variant); font-weight: 600;
  font-size: var(--step--1); letter-spacing: .03em; transition: color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--primary); }
.nav-ico { display: none; }                 /* icons only show in the mobile card grid */
.nav-cta-group { display: flex; align-items: center; gap: .75rem; }
.nav-cta-btn { display: inline-flex; align-items: center; gap: .5em; text-decoration: none;
  font-weight: 700; font-size: var(--step--1); padding: .6em 1.4em; border-radius: var(--radius-pill);
  transition: background .15s, filter .15s; }
.nav-cta-call { background: var(--primary); color: #fff; }
.nav-cta-call:hover { background: var(--on-primary-container); }
.nav-cta-call .nav-cta-label { display: none; }   /* desktop pill shows the number */
.nav-cta-wa { display: none; }                     /* WhatsApp button is mobile-panel only */
.nav-cta-book { background: var(--accent); color: var(--on-accent, #fff); }
.nav-cta-book:hover { filter: brightness(1.08); }
.nav-cta-btn .material-symbols-outlined { font-size: 1.25em; }
.nav-toggle { display: none; align-items: center; justify-content: center; font-size: 1.7rem;
  background: none; border: 0; cursor: pointer; color: var(--primary); line-height: 1; padding: .25rem; }
.nav-toggle-close { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-low) 100%); }
/* Subtle watercolour wash behind the band. Pigment pools lower-right (under the
   split figure); the left scrim keeps the heading/body area on solid surface so
   text contrast is unchanged (AA preserved — see eeat audit). */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: cover; background-position: right center;
  opacity: 1; }
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--surface) 9%, rgba(246,250,249,.6) 40%, transparent 64%); }
.hero .wrap { position: relative; z-index: 1; max-width: 52rem; }
.hero.hero--split .wrap { max-width: var(--wrap); display: grid; gap: var(--space-l);
  grid-template-columns: 1.1fr .9fr; align-items: center; }
.hero h1 { color: var(--text-heading); }
.hero-sub { font-size: var(--step-1); color: var(--on-surface-variant); max-width: 46ch; line-height: 1.5; }
.hero-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: var(--space-m); }
.hero-figure { position: relative; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); }
/* About page portrait: her genuine (near-square) headshot — frame it square so
   the whole face/head shows rather than cropping to the default 4:3 landscape. */
[data-page="about"] .hero-figure { aspect-ratio: 1 / 1; max-width: 24rem; margin-inline: auto; }
[data-page="about"] .hero-figure img { object-position: center 22%; }

/* ── Cover hero (homepage) — the photo IS the full-bleed background, ~100vh.
   Rich photo colours are preserved (bg at full opacity); a highly-transparent
   scrim is opaque only at the far-left edge behind the heading and clears by
   ~60% so the lake, mist and lavender keep their colour. Text stays dark → AA. */
.hero--cover { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
/* Inner-page cover heroes (hubs/spokes/service+location indexes) use the SAME
   full-bleed photo-background + frosted-panel treatment as the homepage, but at a
   moderate band height so the page's content (intro/H2) still flows close behind —
   these are content/SEO pages, not the homepage splash. Mobile keeps the shared
   photo-band-on-top layout below. */
.hero--cover.hero--compact { min-height: 60vh; min-height: 60svh; }
.hero--cover .hero-bg { opacity: 1; background-position: center; }
.hero--cover .hero-bg::after {
  z-index: 1;  /* sit above the cinemagraph video, below the text wrap */
  background: linear-gradient(102deg,
    rgba(246,250,249,.88) 0%, rgba(246,250,249,.62) 24%,
    rgba(246,250,249,.22) 44%, transparent 60%); }
/* ── Cinemagraph (#10744): a subtle looping video layered over the static photo.
   The .hero-bg background-image is the instant poster (LCP paints immediately);
   the video fades in only once it's actually playing (`is-playing`, set in main.js)
   so there's never a black/blank flash. Sits at z-index 0 under the scrim. */
.hero--cover .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
  opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.hero--cover .hero-video.is-playing { opacity: 1; }
.hero--cover .wrap { max-width: var(--wrap); }
/* The body text sits on a soft frosted wash so the eyebrow, sub-copy and ghost
   button stay AA-legible regardless of the photo behind them (the scrim alone
   only carried the large h1 — #10742). Feathered surface gradient + light blur
   reads as lakeside mist, not a UI card, so the photo stays rich around it. */
.hero--cover .hero-body { max-width: 40rem; position: relative;
  padding: var(--space-l) var(--space-l) var(--space-l) var(--space-m);
  margin-left: calc(var(--space-m) * -1); border-radius: var(--radius-xl);
  background: linear-gradient(105deg,
    rgba(246,250,249,.9) 0%, rgba(246,250,249,.87) 46%,
    rgba(246,250,249,.8) 72%, rgba(246,250,249,.66) 100%);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
@supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
  /* No blur support → lean on a slightly more opaque wash so contrast still holds. */
  .hero--cover .hero-body { background: linear-gradient(105deg,
    rgba(246,250,249,.95) 0%, rgba(246,250,249,.92) 60%, rgba(246,250,249,.8) 100%); }
}
/* Mobile: a full-width centred wash buried the photo's subject entirely (#10743 —
   "we lose the impact of the image"). Instead, anchor the text to the BOTTOM and
   keep the top half of the frame clear so the lakeside figure stays the hero.
   The background is zoomed slightly and lifted so the seated figure sits in the
   upper-visible third, well clear of the text band. The body now rides a bottom-up
   gradient: transparent where it overlaps the photo, solidifying to AA-opaque under
   the actual text. Higher specificity than the generic small-screen .hero-bg dimming
   below, so it wins regardless of source order. */
/* Mobile: a full-bleed wash over a portrait crop buried the photo's subject — and
   any overlap is fragile, because the photo scales with viewport height while the
   text block is fixed, so the figure drifts behind the copy on some phones (#10743).
   Robust fix: split into a full-bleed PHOTO BAND on top (the figure always frames
   consistently, cover-cropped, full impact) and the text BELOW on the hero's own
   light surface — so contrast is guaranteed with no wash needed. */
@media (max-width: 720px) {
  /* The photo band flows in normal order on mobile (position:relative below), so the
     global `section` 60px top padding would sit ABOVE it as a void under the sticky
     nav (#11350 — desktop is fine because the absolute bg covers that padding). Zero
     the top padding so the photo band sits flush under the nav. */
  .hero--cover { display: block; min-height: 0; position: relative; padding-top: 0; }
  /* Photo band: a relative block at the top (no longer the inset:0 full cover).
     ~54svh gives the lakeside scene real presence; 'center 48%' frames the seated
     woman just below the heading, with foreground jetty + lavender below her. */
  .hero--cover .hero-bg { position: relative; inset: auto; opacity: 1;
    height: 54svh; min-height: 20rem; max-height: 32rem;
    background-size: cover; background-position: center 48%; }
  .hero--cover .hero-bg::after { display: none; }  /* no photo-wide scrim */

  /* Heading rides back ON the photo — up in the bright sky (#10744 — "put it back
     on the image, text in the sky is fine"). The eyebrow (--primary teal) and h1 (#1a1c1c)
     are both DARK, so a soft top-down LIGHT wash that lifts the sky's luminance only
     where the text sits pushes both clear of AA, while fading to fully transparent
     before the seated figure so her impact is untouched. Sky is the most consistent
     part of any crop, so this is robust across phone widths/heights. */
  .hero--cover .hero-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    padding: calc(var(--space-l) + env(safe-area-inset-top, 0px)) var(--space-m) var(--space-xl);
    background: linear-gradient(180deg,
      rgba(246,250,249,.86) 0%, rgba(246,250,249,.78) 30%,
      rgba(246,250,249,.5) 62%, transparent 100%); }

  /* Sub-copy + buttons stay BELOW the photo on the light surface, exactly as they
     are now — dark text on light surface, AA trivially clears, no wash needed. */
  /* Static so the absolute .hero-head anchors to .hero--cover (the photo), not the
     wrap that flows below it (.hero .wrap is position:relative by default). */
  .hero--cover .wrap { position: static; padding-top: var(--space-l); padding-bottom: var(--space-m); }
  .hero--cover .hero-body { max-width: none; margin-left: 0; padding: 0;
    position: static; border-radius: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero--cover .hero-sub { max-width: none; }

  /* Compact inner-page cover heroes (hubs/spokes/service+location indexes) — the
     heading-on-photo wash is a homepage flourish (#10744); on these content pages
     the pale wash blended into the white sticky nav (no boundary → reads as a void
     with too much whitespace) and the h1 was stranded across the wash→photo fade
     (#11344). Instead: a CLEAN photo band straight under the nav (dark canopy vs
     white nav = instant contrast, no bleed, no void) with ALL the text below it on
     the solid surface — trivially AA, no text at the photo intersection.
     The homepage full cover hero (cover WITHOUT compact) is untouched. */
  .hero--cover.hero--compact .hero-bg {
    height: 40svh; min-height: 15rem; max-height: 24rem;
    background-position: center; }
  .hero--cover.hero--compact .hero-head {
    position: static; padding: 0; background: none; }
  .hero--cover.hero--compact .wrap {
    padding-top: var(--space-l); padding-bottom: var(--space-m); }

  /* Mobile: hero CTAs stack full-width — bigger thumb targets, no ragged
     two-different-width pills (#10746). Centred labels; applies to every hero. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── Intro / prose + SECTION BANDING (#11339) ───────────────────────────────
   .intro is the workhorse neutral block and frequently stacks 2–3 deep (about
   page = 3, hub coverage+prose, service intro+fees). Plain white on plain white
   under the old 120px padding read as one dead void. Fix = an alternating tonal
   rhythm: the base band carries a faint organic radial; stacked intros ZEBRA
   into a soft sage tint with grain texture; a universal hairline seam guarantees
   a visible boundary between ANY two light neighbours. */
.intro { background: var(--surface);
  background-image: radial-gradient(120% 80% at 6% -12%, rgba(9,189,155,.055), transparent 55%);
  background-repeat: no-repeat; }
.intro p { color: var(--on-surface-variant); font-size: var(--step-0); }
.intro > .wrap, .conditions > .wrap { position: relative; z-index: 1; }

/* Tinted alternate band (soft sage + organic grain) — even members of a
   stacked-intro run, plus .conditions. Grain rides a ::before so its opacity is
   precisely controlled and it never tints the text. */
.intro + .intro,
.intro + .intro + .intro + .intro,
.conditions {
  background-color: var(--band-alt);
  background-image: radial-gradient(120% 85% at 100% -12%, rgba(57,102,94,.11), transparent 58%);
  background-repeat: no-repeat; position: relative; }
.intro + .intro::before,
.intro + .intro + .intro + .intro::before,
.conditions::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--texture-grain); background-size: 200px;
  opacity: .4; mix-blend-mode: multiply; }

/* Odd members (3rd, 5th) flip back to the washed base band — and shed the grain. */
.intro + .intro + .intro,
.intro + .intro + .intro + .intro + .intro {
  background-color: var(--surface);
  background-image: radial-gradient(120% 80% at 6% -12%, rgba(9,189,155,.055), transparent 55%); }
.intro + .intro + .intro::before,
.intro + .intro + .intro + .intro + .intro::before { display: none; }

/* Spoke/service run: top-intro(white) → coverage-intro(tinted) → conditions →
   creativity. When the tinted coverage intro is present the conditions grid
   would land tinted-on-tinted, so carry the zebra one step further: conditions
   flips to white, creativity flips to the tint. (No coverage intro → conditions
   keeps its default tint vs the single white intro, untouched by these rules.) */
.intro + .intro + .conditions {
  background-color: var(--surface);
  background-image: radial-gradient(120% 80% at 6% -12%, rgba(9,189,155,.055), transparent 55%); }
.intro + .intro + .conditions::before { display: none; }
.intro + .intro + .conditions + .creativity {
  background-color: var(--band-alt);
  background-image: var(--texture-grain),
    radial-gradient(120% 85% at 100% -12%, rgba(57,102,94,.11), transparent 58%);
  background-size: 200px, cover; background-repeat: repeat, no-repeat;
  background-blend-mode: multiply, normal; }

/* Universal hairline seam: any light section shows a faint top edge so two
   same-tone neighbours never melt together. Accent/dark bands (journey,
   testimonial, stat-strip, poetry, faq-centre, cta) separate by colour already. */
.intro, .svc-grid-wrap, .svc-rows, .spokes, .conditions, .creativity, .faqs {
  border-top: 1px solid var(--band-seam); }
/* The first band after the hero needs no seam (the hero already frames it). */
.hero + .intro, .hero + .svc-grid-wrap, .hero + .svc-rows,
.hero + .spokes, .hero + .conditions, .hero + .creativity, .hero + .faqs {
  border-top: 0; }

/* First section on the page sits directly under the sticky header. A full
   --space-section of blank space above a plain (non-hero) opening section reads
   as a dead white void — most visible on no-hero pages like /about/. Tighten the
   top padding and drop the seam (no neighbour above to separate from).
   :first-of-type (not :first-child) so it still matches when a JSON-LD <script>
   precedes the section in <main>; :not(.hero) leaves full-bleed heroes alone. */
main > section:first-of-type:not(.hero) {
  padding-top: var(--space-l);
  border-top: 0; }

/* ── Trust strip ────────────────────────────────────────────────────────── */
.trust-strip { padding: var(--space-m) 0; background: var(--secondary-container); }
.trust-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; }
.trust-item { display: inline-flex; align-items: center; gap: .65rem; font-weight: 600;
  color: var(--on-secondary-container); font-size: var(--step-1); }
.trust-item svg { color: var(--secondary); }

/* ── Sitewide trust-logo carousel above the footer (#11364) ──────────────────
   Real, verifiable bodies only: BACP + BAATN (memberships) + Metanoia (training).
   A CSS-only seamless marquee: two identical halves animated to translateX(-50%).
   Every .trust-logo has symmetric horizontal padding (NOT flex `gap`) so the
   track is perfectly periodic → -50% lands exactly one half along with no jump.
   The faded edge mask + slow speed give it a calm, premium feel. */
.trust-band { padding: var(--space-l) 0; background: var(--band-alt);
  border-top: 1px solid var(--band-seam); border-bottom: 1px solid var(--band-seam); }
.trust-band__label { margin: 0 0 var(--space-m); text-align: center;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--on-surface-variant); }

.trust-marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.trust-track { display: flex; align-items: center; width: max-content;
  margin: 0; padding: 0; list-style: none;
  animation: trust-scroll 44s linear infinite; }
.trust-marquee:hover .trust-track,
.trust-marquee:focus-within .trust-track { animation-play-state: paused; }
.trust-logo { flex: 0 0 auto; padding-inline: clamp(1.5rem, 4vw, 3.25rem); }
.trust-logo__inner { display: flex; align-items: center; justify-content: center; }
.trust-logo img { display: block; height: clamp(34px, 4.4vw, 52px); width: auto;
  max-width: 180px; object-fit: contain; opacity: .82;
  transition: opacity .35s ease, transform .35s ease; }
.trust-logo img:hover { opacity: 1; transform: translateY(-2px); }
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Screen-reader-only utility (carries the real, linked trust content). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Services grid (cards) ──────────────────────────────────────────────── */
/* Soft mint glow from the top — lifts the card grid off the plain page. */
.svc-grid-wrap { background: radial-gradient(120% 80% at 50% 0%, var(--success-soft) 0%, var(--surface) 58%); }
/* Hubs render two grids back-to-back (spokes + related/planned) — flip the
   second onto the tinted band so the run doesn't read as one block (#11339). */
.svc-grid-wrap + .svc-grid-wrap {
  background: var(--band-alt) radial-gradient(120% 80% at 50% 0%, rgba(57,102,94,.10), transparent 60%) no-repeat; }
.svc-grid-wrap .card { background: #fff; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-m); }
/* Contact-page method cards + form status (task #11277). */
.contact-methods .card-icon { font-size: 2rem; color: var(--primary); }
.contact-pref { display: inline-block; margin-left: .4em; padding: .12em .55em; border-radius: 99px;
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: .62em; font-weight: 600; vertical-align: middle; letter-spacing: .02em; }
.c-status { min-height: 1.2em; margin-top: .75rem; color: var(--on-surface-variant); font-size: .95rem; }
.c-status:empty { margin-top: 0; }
.card { display: block; padding: var(--space-l) var(--space-m); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); text-decoration: none; color: var(--on-surface);
  background: var(--surface); transition: box-shadow .25s, transform .25s, background .25s; }
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); background: #fff; }
.card .card-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--radius); background: var(--success-soft);
  color: var(--primary); margin-bottom: var(--space-s); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--on-surface-variant); margin: 0; font-size: var(--step--1); }

/* ── Service rows (alternating image / text + "what to expect") ─────────── */
.svc-rows { background: var(--surface); }
.svc-rows .svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l);
  align-items: center; }
.svc-rows .svc-row + .svc-row { margin-top: var(--space-section); }
.svc-rows .svc-row:nth-child(even) .svc-row-media { order: 2; }
.svc-row-media { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 1/1; }
.svc-row-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%);
  transition: transform .7s ease; }
.svc-row-media:hover img { transform: scale(1.05); }
.svc-row-media::after { content: ""; position: absolute; inset: 0; background: rgba(0,107,87,.05); }
.svc-row-body h3 { font-size: var(--step-2); margin-bottom: var(--space-s); }
.svc-row-body > p { color: var(--on-surface-variant); margin-bottom: var(--space-m); }
.svc-features { display: grid; gap: var(--space-m); margin-bottom: var(--space-m); }
.svc-feature { display: flex; gap: 1rem; }
.svc-feature .feat-icon { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--success-soft); color: var(--primary); }
.svc-feature h4 { margin: 0 0 .15rem; }
.svc-feature p { margin: 0; font-size: var(--step--1); color: var(--on-surface-variant); }
.expect-box { background: var(--surface-container); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); padding: var(--space-m); }
.expect-box .expect-label { text-transform: uppercase; letter-spacing: .08em; font-size: var(--step--1);
  font-weight: 600; color: var(--primary); margin: 0 0 .4rem; }
.expect-box p { margin: 0; font-size: var(--step--1); color: var(--on-surface-variant); }

/* ── Conditions / symptoms grid ─────────────────────────────────────────── */
/* Background = the tinted alternate band (set in the §banding block above) so a
   conditions grid always reads distinct from the white intro that precedes it. */
.cond-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-m); }
.cond-card { background: rgba(0,107,87,.05); border: 1px solid rgba(0,107,87,.12);
  padding: var(--space-m); border-radius: var(--radius-lg); transition: background .25s, box-shadow .25s; }
.cond-card:hover { background: #fff; box-shadow: var(--shadow-card); }
.cond-card .material-symbols-outlined { color: var(--primary); font-size: 2rem; display: block; margin-bottom: .75rem; }
.cond-card h4 { margin: 0 0 .25rem; }
.cond-card p { margin: 0; font-size: var(--step--1); color: var(--on-surface-variant); }

/* ── Care spokes (detail grid + quick-nav chips) ────────────────────────── */
.spokes { background: var(--surface); }
.spoke-group + .spoke-group { margin-top: var(--space-l); }
.spoke-group > h3 { color: var(--primary); border-bottom: 1px solid var(--outline-variant);
  padding-bottom: var(--space-s); margin-bottom: var(--space-m); }
.spoke-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-m); }
.spoke-card { background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); padding: var(--space-m); transition: box-shadow .25s, transform .25s; }
.spoke-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.spoke-card .material-symbols-outlined { color: var(--primary); font-size: 1.9rem; display: block; margin-bottom: .6rem; }
.spoke-card h4 { margin: 0 0 .35rem; }
.spoke-card p { margin: 0; font-size: var(--step--1); color: var(--on-surface-variant); }
.chip-nav { display: flex; flex-wrap: wrap; gap: .65rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(0,107,87,.05);
  border: 1px solid rgba(0,107,87,.2); color: var(--primary); padding: .6em 1.25em;
  border-radius: var(--radius-pill); font-weight: 600; font-size: var(--step--1); text-decoration: none;
  transition: background .2s, color .2s; }
.chip:hover { background: var(--primary); color: #fff; }
.chip .material-symbols-outlined { font-size: 1.1rem; }

/* ── Journey steps (bento) ──────────────────────────────────────────────── */
/* Feature band — a deeper sage wash so the numbered process steps read as a moment. */
.journey { background: linear-gradient(165deg, var(--secondary-container) 0%, var(--surface-low) 72%); }
.journey .journey-step { background: rgba(255,255,255,.72); }
.journey .journey-step:hover { background: #fff; }
.journey-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-m); }
.journey-step { position: relative; background: var(--surface-highest); border-radius: var(--radius-xl);
  padding: var(--space-l) var(--space-m); overflow: hidden; transition: background .3s, box-shadow .3s; }
.journey-step:hover { background: #fff; box-shadow: var(--shadow-lg); }
.journey-step .step-num { position: absolute; top: .5rem; right: 1.25rem; font-family: var(--font-head);
  font-size: 3.75rem; font-weight: 600; color: rgba(0,107,87,.10); }
.journey-step .material-symbols-outlined { color: var(--primary); font-size: 2.5rem; margin-bottom: var(--space-m); display: block; }
.journey-step h3 { margin-bottom: .5rem; }
.journey-step p { margin: 0; color: var(--on-surface-variant); font-size: var(--step--1); }

/* ── Creativity split (textured / asymmetric) ───────────────────────────── */
/* Base white band (#11339) so it alternates against the tinted .conditions grid
   that precedes it on service pages; the blurred mint blob below adds organic
   texture of its own. */
.creativity { background: var(--surface);
  background-image: radial-gradient(120% 80% at 6% -12%, rgba(9,189,155,.05), transparent 55%);
  background-repeat: no-repeat; overflow: hidden; }
.creativity .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-l); align-items: center; }
.creativity h2 { font-style: italic; }
.creativity .creativity-body p { color: var(--on-surface-variant); font-size: var(--step-0); }
/* Global pill row — used by the location/hub/spoke local-coverage blocks AND the
   creativity split. Was scoped to .creativity only, so the coverage chips rendered
   as bare inline spans: multi-word labels ("Wood End") split mid-pill and the row
   butted straight into the next paragraph (#11347). */
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--space-s) 0 var(--space-m); }
.creativity .tag-row { margin: 0; }
.tag { background: var(--secondary-fixed); color: var(--on-secondary-container);
  padding: .4em 1.1em; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 500;
  white-space: nowrap; }
.creativity-art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.creativity-art img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: transform .5s ease; }
.creativity-art figure { margin: 0; }
.creativity-art figure:first-child { margin-top: 3rem; }
.creativity-art figure:first-child img { transform: rotate(-3deg); }
.creativity-art figure:last-child img { transform: rotate(3deg); margin-top: 1.5rem; }
.creativity-art figure:hover img { transform: rotate(0); }
/* Single-portrait variant (#12401): the -3deg scrapbook tilt + 3rem scatter offset
   are designed for a PAIR of photos. When only one image is passed (domestic-abuse
   page) that lone portrait just reads as crooked — Lydia asked for it straightened.
   Level it, drop the scatter offset, and centre it at its native width (no upscale). */
.creativity-art:has(figure:only-child) { grid-template-columns: 1fr; justify-items: center; }
.creativity-art figure:only-child { margin-top: 0; max-width: 26rem; }
.creativity-art figure:only-child img { transform: none; }
.creativity-art::after { content: ""; position: absolute; right: -3rem; bottom: -3rem;
  width: 16rem; height: 16rem; background: rgba(9,189,155,.2); border-radius: 50%;
  filter: blur(60px); z-index: -1; }
/* Single audio-player variant (#11365): a sung-poem player replaces the image pair.
   Centre the track-card in the wide (7fr) column; keep the soft radial glow. */
.creativity-audio { position: relative; display: flex; justify-content: center; }
.creativity-audio .track-card { width: 100%; max-width: 26rem; }
.creativity-audio::after { content: ""; position: absolute; right: -3rem; bottom: -3rem;
  width: 16rem; height: 16rem; background: rgba(9,189,155,.2); border-radius: 50%;
  filter: blur(60px); z-index: -1; }

/* Text-poem variant of the creativity split (couples spoke, #12393): render one of
   Lydia's poems in the wide column instead of the audio card. Self-contained so the
   spoke needs no poetry.css opt-in; mirrors the framed card look + soft glow. */
.creativity-poem { position: relative; display: flex; justify-content: center; }
.creativity-poem .poem { width: 100%; max-width: 30rem; background: var(--surface-container-lowest, #fff);
  border: 1px solid var(--outline-variant); border-radius: var(--radius-lg);
  padding: var(--space-l); box-shadow: var(--shadow-card); }
.creativity-poem .eyebrow { margin-bottom: .6rem; }
.creativity-poem .poem-title { font-family: var(--font-head); font-style: italic; font-size: var(--step-1);
  color: var(--text-heading); margin: 0 0 .9rem; }
.creativity-poem .poem-body p { color: var(--on-surface-variant); font-size: var(--step-0);
  line-height: 1.55; margin: 0 0 .85rem; }
.creativity-poem .poem-attr { color: var(--on-surface-variant); font-size: var(--step--1); margin: 1rem 0 0; }
.creativity-poem .track-poemlink { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
  font-size: var(--step--1); font-weight: 600; }
/* Snippet mode (#1001803): first stanza only, soft fade into the "Read the full poem" link. */
.creativity-poem .poem--snippet .poem-body { position: relative; }
.creativity-poem .poem--snippet .poem-body::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: 0; height: 2.2em; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface-container-lowest, #fff)); }
.creativity-poem::after { content: ""; position: absolute; right: -3rem; bottom: -3rem;
  width: 16rem; height: 16rem; background: rgba(9,189,155,.2); border-radius: 50%;
  filter: blur(60px); z-index: -1; }

/* ── Testimonial ────────────────────────────────────────────────────────── */
.testimonial { background: var(--secondary-container) url("/images/bg/bg-wash-sage.jpg") center/cover; background-blend-mode: soft-light; text-align: center; }
.testimonial blockquote { font-family: var(--font-head); font-size: var(--step-1); font-style: italic;
  margin: 0 0 var(--space-s); color: var(--text-heading); line-height: 1.45; }
.testimonial .cite { color: var(--on-secondary-container); font-weight: 600; font-size: var(--step--1); }

/* ── Testimonial wall (multi-quote, real consented reviews) ───────────────── */
.testimonial-wall { background: var(--secondary-container) url("/images/bg/bg-wash-sage.jpg") center/cover; background-blend-mode: soft-light; }
.testimonial-wall .section-head { text-align: center; margin-inline: auto; }
.tw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-m); align-items: start; }
.tw-card { position: relative; margin: 0; padding: var(--space-l) var(--space-m) var(--space-m);
  background: rgba(255,255,255,.72); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--space-s); }
.tw-mark { position: absolute; top: .35rem; left: .9rem; color: var(--primary); opacity: .28; }
.tw-mark .material-symbols-outlined { font-size: 3rem; }
.tw-card blockquote { margin: 0; font-family: var(--font-head); font-style: italic;
  font-size: var(--step-0); line-height: 1.5; color: var(--text-heading); }
.tw-cite { margin-top: auto; font-weight: 600; font-size: var(--step--1); color: var(--on-secondary-container); }
.tw-note { margin: var(--space-m) 0 0; text-align: center; font-size: var(--step--1); color: var(--on-surface-variant); }

/* ── FAQs (accordion cards) ─────────────────────────────────────────────── */
.faqs .faq-list { display: grid; gap: .85rem; }
.faqs details { background: var(--surface-container-lowest, #fff); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); padding: 0; overflow: hidden; }
.faqs summary { font-weight: 600; cursor: pointer; padding: var(--space-m); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "expand_more"; font-family: "Material Symbols Outlined";
  color: var(--primary); transition: transform .2s; }
.faqs details[open] summary::after { transform: rotate(180deg); }
.faq-a { padding: 0 var(--space-m) var(--space-m); color: var(--on-surface-variant); font-size: var(--step--1); }
.faq-a p { margin: 0 0 .75rem; }

/* ── FAQ support centre (categorised + stats) ───────────────────────────── */
.faq-centre { background: var(--surface-low) url("/images/bg/bg-wash-sage.jpg") center/cover; background-blend-mode: soft-light; }
.faq-cat + .faq-cat { margin-top: var(--space-l); }
.faq-cat-head { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-m); }
.faq-cat-head .material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--success-soft); color: var(--primary); }
.faq-cat-head h3 { margin: 0; }

/* ── Stat strip ─────────────────────────────────────────────────────────── */
.stat-strip { background: var(--secondary-container); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-m);
  text-align: center; }
.stat .stat-value { font-family: var(--font-head); font-size: var(--step-2); font-weight: 600; color: var(--secondary); }
.stat .stat-label { text-transform: uppercase; letter-spacing: .06em; font-size: var(--step--1);
  color: var(--on-secondary-container); font-weight: 600; }

/* ── Poetry / audio library ─────────────────────────────────────────────── */
/* Editorial sage wash — sets the audio library apart as a calm, featured moment. */
.poetry { background: radial-gradient(110% 70% at 85% 0%, var(--secondary-fixed) 0%, var(--surface) 55%); }
/* Plain variant — drop the wash when two poetry sections stack (#11351). */
.poetry--plain { background: var(--surface); }
.poetry-featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card);
  margin-bottom: var(--space-l); background: #fff; }
.poetry-featured .pf-media { aspect-ratio: 16/10; }
.poetry-featured .pf-media img, .poetry-featured .pf-media .ph-img { width: 100%; height: 100%; object-fit: cover; }
.poetry-featured .pf-body { padding: var(--space-l); display: flex; flex-direction: column; justify-content: center; }
.poetry-featured .pf-body .eyebrow { margin-bottom: .5rem; }
.poetry-featured .pf-body h3 { font-size: var(--step-2); margin-bottom: .5rem; }
.poetry-featured .pf-body p { color: var(--on-surface-variant); }
.play-btn { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  background: var(--primary-container); color: var(--on-primary-container); border: 0;
  padding: .7em 1.4em; border-radius: var(--radius-pill); font-weight: 600; cursor: pointer;
  text-decoration: none; transition: transform .15s; }
.play-btn:hover { transform: translateY(-2px); }
.track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-m); }
.track-card { background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .25s, transform .25s; }
.track-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.track-thumb { position: relative; aspect-ratio: 16/10; }
.track-thumb img, .track-thumb .ph-img { width: 100%; height: 100%; object-fit: cover; }
.track-thumb .track-tag { position: absolute; top: .6rem; left: .6rem; background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px); color: var(--primary); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; padding: .25em .7em; border-radius: var(--radius-pill); }
.track-thumb .track-play { position: absolute; right: .6rem; bottom: .6rem; width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: transform .15s; }
.track-thumb .track-play:hover { transform: scale(1.08); }
.track-meta { padding: var(--space-s) var(--space-m) var(--space-m); }
.track-meta h4 { margin: 0 0 .15rem; }
.track-meta p { margin: 0; font-size: var(--step--1); color: var(--on-surface-variant); }

/* ── Audio-player cards (#11351) — the two-up "songs" feature on /poetry/.
   A native <audio controls> is the real player + no-JS baseline; the overlay
   button is a large JS-synced play/pause affordance over the artwork. ── */
.track-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; margin-inline: auto; }
button.track-play { -webkit-appearance: none; appearance: none; font: inherit; padding: 0; line-height: 0; }
.track-card--player .track-thumb .track-play { width: 3rem; height: 3rem; box-shadow: var(--shadow-card); }
.track-card--player .track-thumb .track-play .material-symbols-outlined { font-size: 1.6rem; }
.track-card.is-playing .track-thumb .track-play { background: var(--primary-dim); }
.track-audio { width: 100%; height: 2.5rem; margin-top: .75rem; border-radius: var(--radius-pill); }
.track-poemlink { display: inline-flex; align-items: center; gap: .35rem; margin-top: .75rem;
  font-size: var(--step--1); font-weight: 600; color: var(--primary); }
.track-poemlink .material-symbols-outlined { font-size: 1.05rem; }
@media (max-width: 560px) { .track-grid--pair { grid-template-columns: 1fr; } }

/* Gradient placeholder for missing imagery (catalogue + pre-asset pages) */
.ph-img { background: linear-gradient(135deg, var(--primary-container), var(--secondary));
  display: block; }
.ph-img.ph-soft { background: linear-gradient(135deg, var(--secondary-fixed), var(--success-soft)); }

/* ── CTA (dark, glass) ──────────────────────────────────────────────────── */
.cta { background: linear-gradient(rgba(13,34,29,.86), rgba(13,34,29,.92)), url("/images/bg/bg-foliage-dark.jpg") center/cover no-repeat var(--inverse-surface); color: var(--inverse-on-surface); }
.cta .cta-card { background: rgba(255,255,255,.07); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem); display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-l); align-items: center; }
.cta .cta-card.no-portrait { grid-template-columns: 1fr; text-align: center; }
.cta h2 { color: #fff; font-size: var(--step-3); }
.cta p { color: var(--inverse-on-surface); max-width: 36rem; }
.cta .cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.cta .cta-card.no-portrait .cta-actions { justify-content: center; }
.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }   /* #1001804: was dark teal on dark band */
.cta .btn-ghost:hover, .cta .btn-ghost:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.cta .cta-alt { margin-top: 1rem; font-size: var(--step--1); color: rgba(255,255,255,.82); }
.cta .cta-alt a { color: #fff; text-decoration: underline; font-weight: 600; white-space: nowrap; }
.cta .cta-alt a:hover, .cta .cta-alt a:focus-visible { color: var(--primary-dim); }
.cta-portrait { width: clamp(11rem, 18vw, 18rem); aspect-ratio: 1; border-radius: 50%;
  border: 8px solid rgba(0,107,87,.25); padding: .4rem; flex: none; }
.cta-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Article AI-assistance disclosure byline (#11266) ───────────────────── */
.article-ai-note { margin-top: .6rem; max-width: 60ch; font-size: var(--step--1);
  line-height: 1.5; color: var(--on-surface-variant); }
.article-ai-note a { color: var(--primary); font-weight: 600; white-space: nowrap; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--inverse-surface); color: var(--inverse-on-surface);
  padding: var(--space-section) 0 var(--space-l); }
.footer-top { display: grid; gap: var(--space-l) var(--space-l);
  grid-template-columns: minmax(0,1.6fr) max-content max-content minmax(max-content,1.2fr); align-items: start; }
/* #1001804: Lydia doesn't want footer links breaking onto two lines — link columns size to
   their longest link (max-content) and links never wrap; brand + contact absorb the rest. */
.footer-col a { white-space: nowrap; }
.site-footer a { color: var(--inverse-on-surface); text-decoration: none;
  transition: color .15s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--primary-dim);
  text-decoration: underline; text-underline-offset: 3px; }

/* Brand block */
.footer-logo { display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-head); font-weight: 600; font-size: var(--step-1);
  color: #fff; }
.footer-logo:hover, .footer-logo:focus-visible { color: #fff; text-decoration: none; }
.footer-logo img { height: 2.4rem; width: auto; }
.footer-tagline { margin: .85rem 0 0; max-width: 30ch; line-height: 1.55;
  color: var(--inverse-on-surface); }
.footer-cred { margin: .85rem 0 .6rem; font-size: var(--step--1);
  color: var(--primary-dim); font-weight: 600; }
.footer-badges { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: .4rem; }
.footer-badges li { font-size: var(--step--1); letter-spacing: .02em;
  padding: .2rem .6rem; border: 1px solid rgba(237,242,240,.28);
  border-radius: var(--radius-pill); color: var(--inverse-on-surface); }

/* Link columns */
.footer-h { font-family: var(--font-sans); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: #fff; margin: 0 0 .9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .6rem; font-size: var(--step-0); }

/* Contact column */
.footer-contact address { margin: 0; line-height: 1.55; font-size: var(--step-0);
  color: var(--inverse-on-surface); }
.footer-contact-link { font-weight: 600; }
.footer-area-note { color: rgba(237,242,240,.78); }
.footer-cta { display: inline-block; margin-top: 1.1rem; background: var(--primary-dim);
  color: var(--on-primary-container) !important; font-weight: 700; white-space: nowrap;
  padding: .7em 1.4em; border-radius: var(--radius-pill); }
.footer-cta:hover, .footer-cta:focus-visible { background: #6ce8c8;
  color: var(--on-primary-container) !important; text-decoration: none; }

/* Bottom bar */
.footer-bottom { display: flex; flex-wrap: wrap; gap: .6rem var(--space-m);
  justify-content: space-between; align-items: center;
  margin-top: var(--space-l); padding-top: var(--space-m);
  border-top: 1px solid rgba(237,242,240,.18); }
.footer-copy { margin: 0; font-size: var(--step--1); color: rgba(237,242,240,.78); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  font-size: var(--step--1); }
.footer-legal a { color: rgba(237,242,240,.78); }

@media (max-width: 1100px) {  /* was 860 — 4 no-wrap columns need ~1100px (#1001804) */
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-l); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  /* #1001804: stacked, not side-by-side — two columns are too narrow for the hub
     names on one line ("Work & Career Wellbeing"). */
  .footer-top { grid-template-columns: 1fr; gap: var(--space-l) var(--space-m); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
address { font-style: normal; }

/* ── Reveal-on-scroll (no-JS = visible) ─────────────────────────────────── */
.reveal { opacity: 1; }
body.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
body.js .reveal.in { opacity: 1; transform: none; }

/* ── Catalogue chrome (utilities page only) ─────────────────────────────── */
.cat-note { background: var(--success-soft); border-bottom: 1px solid var(--outline-variant); }
.cat-note .wrap { padding: var(--space-m) 0; }
.cat-label { background: var(--inverse-surface); color: var(--inverse-on-surface);
  padding: .5rem 0; font-family: var(--font-sans); }
.cat-label .wrap { display: flex; align-items: baseline; gap: 1rem; }
.cat-label code { color: var(--primary-dim); font-size: var(--step--1); }
.cat-label h2 { color: #fff; font-family: var(--font-sans); font-size: var(--step-0); margin: 0; }

/* Decorative GWS doves, subtly scattered across public pages (home/about/poetry)
   and the utilities catalogue. All three source SVGs face right; `--flip` mirrors
   them so a dove on a right edge still flies inward toward the content. Tucked into
   the side gutters, pointer-events:none, low opacity — purely ornamental
   (alt="" aria-hidden). `.gw-decor` is the relative wrapper a section macro call is
   wrapped in so an absolutely-positioned dove anchors to that section's box. */
.cat-demo, .gw-decor { position: relative; }
.u-dove { position: absolute; z-index: 4; pointer-events: none; user-select: none;
  width: clamp(72px, 8vw, 132px); height: auto; opacity: .12; }
.u-dove--flip { transform: scaleX(-1); }
.u-dove--tl { top: 3.4rem; left: 1.5%; }
.u-dove--tr { top: 3.4rem; right: 1.5%; }
.u-dove--bl { bottom: 1.4rem; left: 2%; }
.u-dove--br { bottom: 1.4rem; right: 2%; }
.u-dove--ml { top: 40%; left: 1%; }
.u-dove--mr { top: 32%; right: 1%; }
@media (max-width: 760px) {
  /* keep them subtle but actually visible — .08 read as invisible on phones.
     the side (ml/mr) doves can't live in the gutter once the wrap fills the
     width, so drop them to a bottom corner instead of hiding them. */
  .u-dove { width: 62px; opacity: .18; }
  .u-dove--ml { top: auto; bottom: 1.4rem; left: 2%; }
  .u-dove--mr { top: auto; bottom: 1.4rem; right: 2%; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero.hero--split .wrap,
  .svc-rows .svc-row,
  .creativity .wrap,
  .poetry-featured,
  .cta .cta-card { grid-template-columns: 1fr; }
  .svc-rows .svc-row:nth-child(even) .svc-row-media { order: 0; }
  .cta .cta-card { text-align: center; justify-items: center; }
  .cta .cta-actions { justify-content: center; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Full-height mobile nav panel (#11355): fixed below the sticky header bar so the
     toggle (now an ✕) stays tappable; 2-col icon card grid that scrolls, with a
     Call + WhatsApp CTA row pinned to the bottom. */
  .site-header.open .nav-toggle-open { display: none; }
  .site-header.open .nav-toggle-close { display: inline-flex; }
  /* The fixed panel shares the header's stacking context, so lift the brand + the
     ✕ toggle above it (z>40) — otherwise the panel covers them and ✕ isn't tappable. */
  .site-header.open .brand,
  .site-header.open .nav-toggle { position: relative; z-index: 60; }
  .site-header.open .nav {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; top: 0; z-index: 40;
    height: 100vh; height: 100dvh;
    padding: calc(5rem + var(--space-m)) var(--space-m) calc(var(--space-m) + env(safe-area-inset-bottom));
    background: var(--surface); overflow-y: auto; gap: var(--space-m);
  }
  .site-header.open .nav-links {
    display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
    width: 100%; align-content: start;
  }
  .site-header.open .nav-links li { display: flex; }
  .site-header.open .nav-links a {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: .6rem;
    width: 100%; min-height: 6.5rem; padding: 1.1rem;
    background: var(--surface-low); border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg); color: var(--text-heading);
    font-size: var(--step-0); letter-spacing: 0;
    transition: border-color .15s, background .15s, transform .12s;
  }
  .site-header.open .nav-links a:hover,
  .site-header.open .nav-links a:active {
    border-color: var(--primary); background: var(--surface); transform: translateY(-1px);
  }
  .site-header.open .nav-ico { display: inline-flex; color: var(--primary); }
  .site-header.open .nav-ico .material-symbols-outlined { font-size: 2rem; }
  .site-header.open .nav-label { font-weight: 600; }
  /* Sticky CTA row — pinned to the bottom of the panel, stays put while cards scroll. */
  .site-header.open .nav-cta-group {
    position: sticky; bottom: 0; margin-top: auto;
    display: grid; grid-template-columns: 1fr; gap: .75rem;
    width: 100%; padding-top: var(--space-s);
    background: linear-gradient(180deg, transparent 0, var(--surface) 18%);
  }
  .site-header.open .nav-cta-btn {
    justify-content: center; padding: 1em 1.2em; font-size: var(--step-0);
    border-radius: var(--radius-lg);
  }
  .site-header.open .nav-cta-call .nav-cta-label { display: inline; }
  .site-header.open .nav-cta-call .nav-cta-num { display: none; }
  .site-header.open .nav-cta-wa {
    display: inline-flex; background: #075e54; color: #fff;
  }
  .site-header.open .nav-cta-wa:hover { filter: brightness(1.08); }
  body.nav-open { overflow: hidden; }
  .creativity-art figure:first-child { margin-top: 0; }
  /* On a tall single-column hero the landscape wash crops heavily — soften it and
     centre the pigment so it stays a faint backdrop behind full-width text. */
  .hero-bg { opacity: .6; background-position: center top; }
  .hero-bg::after { background: linear-gradient(180deg, var(--surface) 4%, rgba(246,250,249,.4) 38%, transparent 80%); }
}
@media (prefers-reduced-motion: reduce) {
  body.js .reveal { opacity: 1; transform: none; transition: none; }
  .svc-row-media img, .track-thumb img, .creativity-art img, .btn, .card, .play-btn, .skip-link { transition: none; }
  /* Honour reduced-motion: drop the cinemagraph entirely, fall back to the
     static .hero-bg photo (#10744). display:none also stops playback. */
  .hero--cover .hero-video { display: none !important; }
  /* Trust carousel: stop the scroll — the first logo set shows statically
     under the edge mask (logos still convey the trust signal). */
  .trust-track { animation: none; }
  .trust-logo img { transition: none; }
}

/* ── Sticky quick-contact bar (#11349) — Phone + WhatsApp, sitewide on scroll ──
   Toggled by main.js (.is-visible). WhatsApp brand green uses a deep tone so
   white label/icon clears WCAG AA (white on #075e54 ≈ 7.3:1). */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  gap: .5rem;
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--outline-variant);
  box-shadow: 0 -6px 20px rgba(13, 34, 29, .12);
  transform: translateY(120%);
  transition: transform .3s ease;
  pointer-events: none;
}
.sticky-cta.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-cta-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.sticky-cta-btn:hover { filter: brightness(1.05); }
.sticky-cta-btn:active { transform: scale(.97); }
.sticky-cta-call { background: var(--primary-container); color: var(--on-primary-container); }
.sticky-cta-wa { background: #075e54; color: #fff; }
.sticky-cta-btn .material-symbols-outlined { font-size: 1.3rem; }
.sticky-cta-btn .wa-glyph { width: 1.25rem; height: 1.25rem; }

/* Wider screens: compact floating pill bottom-right, not a full-bleed bar. */
@media (min-width: 721px) {
  .sticky-cta {
    left: auto; right: 1.25rem; bottom: 1.25rem;
    gap: .6rem;
    padding: .55rem;
    max-width: 26rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 30px rgba(13, 34, 29, .2);
  }
  .sticky-cta-btn { flex: 0 0 auto; padding-inline: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ── Sticky-bar "Book" button (#1001084) — primary booking CTA in the float bar,
   sits alongside Call + WhatsApp. Accent fill so it reads as the main action;
   white on --accent clears AA. Given a little extra flex so it leads the row. */
.sticky-cta-book {
  flex: 1.4 1 0;
  background: var(--accent);
  color: var(--on-accent, #fff);
}

/* ── On-site booking embed (#1001084) — /book/ page. Google Appointment Scheduling
   iframe framed in a rounded card; height clamps to the viewport so the whole
   booking flow is usable on mobile without a nested-scroll trap. */
.booking-embed { background: var(--surface); }
.booking-frame {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--outline-variant);
}
.booking-frame iframe {
  display: block;
  width: 100%;
  height: 760px;
  min-height: 620px;
  max-height: 85vh;
  border: 0;
}
.booking-fallback,
.booking-alt {
  margin-top: var(--space-m);
  font-size: var(--step-0);
  color: var(--on-surface-variant);
}
.booking-alt { margin-top: var(--space-s); }
@media (max-width: 600px) {
  .booking-frame iframe { height: 82vh; min-height: 560px; }
}

/* CTA-card WhatsApp button (ctaBlock) — same deep brand green, AA-safe on the dark card. */
.btn-whatsapp { background: #075e54; color: #fff; }
.btn-whatsapp:hover { background: #064a43; box-shadow: var(--shadow-card); }

/* ── Light-touch copy deterrent (#1000452) ───────────────────────────────────
   Activated by copy-guard.js, which adds `.cg` to <html> on every page EXCEPT
   review mode (?edit=1) and only when JS is on. Deliberately narrow so it never
   blocks form entry, tap-to-call, or assistive tech (see copy-guard.js header). */
html.cg main { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
/* Re-enable selection everywhere the visitor genuinely needs it. */
html.cg input,
html.cg textarea,
html.cg select,
html.cg [contenteditable] {
  -webkit-user-select: text; -moz-user-select: text; user-select: text;
}
/* Deter the iOS long-press "Save/Copy Image" callout on content images only —
   links keep their callout so a long-press on the phone number still offers Call. */
html.cg main img { -webkit-touch-callout: none; }