/* ==========================================================================
   Solutions4Wellbeing — homepage stylesheet

   Governing document: "Solutions4Wellbeing Brand Sheet" v1.0, Jul 2026
   (a copy lives in ../brand/). Layout follows the v3 "Warm Editorial" design;
   colour, type, radii and spacing follow the brand sheet where the two differ.

   Tokens below are the single source of truth — never hardcode a hex value
   outside the :root block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset)

   Brand sheet section 03: headings Sora 600/700, body Source Sans 3 400/600,
   detail data IBM Plex Mono. Self-hosted rather than pulled from Google so the
   page makes no third-party request for type.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700; /* variable */
  font-display: swap;
  src: url('../fonts/sora-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600; /* variable */
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* ---- Colour (brand sheet 02) ----
     Harbour Navy / Wave Teal / Shallow Aqua / Kiama Coral / Sandstone / Ink.
     Ratio: ~60% sand or white, ~30% navy and teal, ~10% coral. Never more than
     two background colours in view. Coral means "do this" — one per screen. */
  --navy:            #0E3A4F; /* Harbour Navy  · headers        */
  --teal:            #1F7A8C; /* Wave Teal     · primary        */
  --aqua:            #7FC6C6; /* Shallow Aqua  · fills          */
  --coral:           #E8734A; /* Kiama Coral   · CTA only       */
  --sand:            #EFEAE2; /* Sandstone     · ground         */
  --white:           #FFFFFF;

  --ink:             #15252E; /* Ink · body */
  --body:            #3A4E59; /* never lighter than this on sand */
  --muted:           #5E7481;
  --muted-on-navy:   #B9C6CC;
  --ink-on-aqua:     #0E3A4F; /* white on aqua fails AA — use ink */
  --attrib-on-aqua:  #15252E;
  --note-on-aqua:    #1B3C46;
  --footer-text:     #8FA3AD;

  --rule:            #DCD3C6;
  --rule-on-navy:    #1F4C63;

  --wave: linear-gradient(90deg, var(--teal), var(--aqua));

  /* ---- Type families (brand sheet 03) ----
     Fallbacks are the brand sheet's own nominated substitutes. */
  --font-display: 'Sora', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Headings are Sora 600; the heaviest display moments go to 700. */
  --fw-display: 600;
  --fw-display-strong: 700;

  /* ---- Display scale (fluid) ----
     Retuned for Sora. A geometric sans at the serif's old sizes reads far
     heavier, so the top of the scale comes down roughly 20%. */
  --fs-h1:         clamp(2.25rem, 5.2vw, 3.5rem);   /*  36 → 56 */
  --fs-h2-lg:      clamp(1.875rem, 3.8vw, 3rem);    /*  30 → 48  (Visit) */
  --fs-h2:         clamp(1.75rem, 3.4vw, 2.625rem); /*  28 → 42  (sections) */
  --fs-h2-sm:      clamp(1.625rem, 3vw, 2.25rem);   /*  26 → 36  (Questions) */
  --fs-quote:      clamp(1.5rem, 2.8vw, 2.125rem);  /*  24 → 34 */
  --fs-stat:       clamp(1.75rem, 2.8vw, 2.125rem); /*  28 → 34  (credibility) */
  --fs-h3:         clamp(1.375rem, 2.2vw, 1.875rem);/*  22 → 30  (services) */
  --fs-card-title: 1.375rem;                        /*  22 */
  --fs-summary:    clamp(1.125rem, 1.7vw, 1.3125rem); /* 18 → 21 */
  --fs-name:       1.1875rem;                       /*  19 */
  --fs-wordmark:   1.375rem;                        /*  22 */

  /* ---- Body scale (fixed) ----
     Brand sheet: body 17–19px on web, 1.6 line-height, max 68 characters.
     Anything below 17px is a label or a caption, not body copy. */
  --fs-lead:       19px;
  --fs-body-xl:    19px;
  --fs-body-lg:    18px;
  --fs-body:       18px;
  --fs-body-sm:    17px;
  --fs-ui:         17px;
  --fs-cta:        17px;
  --fs-nav-cta:    16px;
  --fs-note:       16px;
  --fs-meta:       15px;
  --fs-footer:     14.5px;
  --fs-eyebrow:    14px;
  --fs-eyebrow-sm: 13.5px;
  --fs-eyebrow-xs: 13px;

  --lh-tight:      1.02;
  --lh-display:    1.06;
  --lh-quote:      1.2;
  --lh-body:       1.6;
  --lh-body-loose: 1.65;
  --lh-note:       1.7;
  --lh-detail:     1.8;

  /* Brand sheet: tight leading, negative tracking on headlines. */
  --ls-h1:         -0.03em;
  --ls-display:    -0.02em;
  --ls-eyebrow:    0.2em;
  --ls-eyebrow-sm: 0.18em;
  --ls-eyebrow-xs: 0.16em;

  /* ---- Spacing (brand sheet 07) ----
     Scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 80 · 120. Stick to it — arbitrary
     paddings are what made the old site feel uneven. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-20: 80px;
  --s-30: 120px;

  --container:       1180px;
  --gutter:          clamp(20px, 3vw, 24px);
  --section-y:       clamp(64px, 9vw, 120px);  /* inside a coloured band: 120 desktop / 64 mobile */
  --section-y-tight: clamp(56px, 7vw, 96px);   /* the quote band, deliberately tighter */
  /* A white section has no visible edge, so its padding is half a gap. Two of
     them in a row then sum to exactly one --section-y gap instead of two. */
  --section-y-half:  calc(var(--section-y) / 2);
  --header-offset:   104px;

  /* ---- Radii (brand sheet 07): 10px inputs, 18px cards and images, 999px pills.
     The 200px hero arch is the v3 design's signature photo crop, not a card. */
  --r-wave:     6px;
  --r-input:    10px;
  --r-card:     18px;
  --r-image:    18px;
  --r-portrait: 18px;
  --r-arch:     200px;
  --r-pill:     999px;

  /* ---- Motion ---- */
  --t-hover: 160ms ease;
}

/* No shadows in this design. Colour blocking does the work — don't add any. */

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, blockquote, figure { margin: 0; }

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

/* Photos are wrapped in <picture> for avif/webp/jpeg. Keep the wrapper out of
   the layout's way — it should behave exactly as the <img> used to. */
picture { display: block; min-width: 0; min-height: 0; }

a {
  color: var(--teal);
  text-decoration: none;
  transition: color var(--t-hover), background-color var(--t-hover),
    border-color var(--t-hover);
}
a:hover { color: var(--coral); }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-navy :focus-visible,
.on-aqua :focus-visible { outline-color: var(--aqua); }

[id] { scroll-margin-top: var(--header-offset); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal);
}

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

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 50;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  transition: top var(--t-hover);
}
.skip-link:focus { top: var(--s-4); color: var(--white); }

/* Pills ------------------------------------------------------------------- */

.pill {
  display: inline-block;
  font-weight: 700;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-align: center;
}

.pill--navy {
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-nav-cta);
  padding: 14px 26px;
}
.pill--navy:hover { background: var(--coral); color: var(--white); }

.pill--coral {
  background: var(--coral);
  color: var(--white);
  font-size: var(--fs-cta);
  padding: 18px 32px;
}
.pill--coral:hover { background: var(--navy); color: var(--white); }

.pill--coral-on-navy {
  background: var(--coral);
  color: var(--white);
  font-size: var(--fs-cta);
  padding: 18px 32px;
}
.pill--coral-on-navy:hover { background: var(--white); color: var(--navy); }

.pill--outline-navy {
  border: 2px solid var(--navy);
  color: var(--navy);
  font-size: var(--fs-cta);
  padding: 16px 30px;
}
.pill--outline-navy:hover { background: var(--navy); color: var(--white); }

.pill--outline {
  border: 2px solid var(--aqua);
  color: var(--aqua);
  font-size: var(--fs-cta);
  padding: 16px 30px;
}
.pill--outline:hover { background: var(--aqua); color: var(--navy); }

/* Arrow links ------------------------------------------------------------- */

.arrow-link {
  font-weight: 700;
  font-size: var(--fs-ui);
  color: var(--teal);
  align-self: start;
}
.arrow-link:hover { color: var(--coral); }
.arrow-link::after { content: ' \2192'; }

.arrow-link--aqua { color: var(--aqua); }
.arrow-link--aqua:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: 22px;
}

.logo {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 0 0 auto;
}
.logo img { height: 30px; width: auto; }
/* Type treatment only — the brand sheet is explicit that the supplied logo
   artwork replaces this. Wordmark bold, the "4" in coral, wave bar beneath. */
.logo__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-wordmark);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  color: var(--navy);
  white-space: nowrap;
}
.logo__wordmark span { color: var(--coral); }
.logo__wave {
  display: block;
  height: 5px;
  border-radius: var(--r-wave);
  background: var(--wave);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  font-size: var(--fs-ui);
}
.site-nav a {
  color: var(--body);
  padding-block: var(--s-3);
}
.site-nav a {
  position: relative;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover {
  color: var(--navy);
  border-bottom-color: transparent;
  background-image: var(--wave);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--t-hover);
}
.nav-toggle:hover { background: var(--sand); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-hover), background-color var(--t-hover);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after { transform: translateY(7px); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--s-12);
  align-items: center;
  padding-block: var(--s-20) var(--section-y-half);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  color: var(--navy);
  text-wrap: balance;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--body);
  max-width: 520px;
  text-wrap: pretty;
}

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

.link-underline {
  font-weight: 700;
  font-size: var(--fs-cta);
  color: var(--navy);
  border-bottom: 2px solid var(--aqua);
  padding-bottom: 3px;
}
.link-underline:hover { color: var(--coral); border-bottom-color: var(--coral); }

.hero__note {
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--muted);
  font-style: italic;
}

.hero__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 240px;
  gap: var(--s-4);
}
.hero__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__mosaic > :first-child { grid-column: span 2; }
.hero__mosaic > :first-child img { border-radius: var(--r-arch); }
.hero__mosaic > :not(:first-child) img { border-radius: var(--r-image); }

/* --------------------------------------------------------------------------
   6. Credibility strip
   -------------------------------------------------------------------------- */

.credibility {
  background: var(--navy);
  color: var(--sand);
}
.credibility .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-8);
  padding-block: var(--section-y);
}
.credibility__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.credibility__stat {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-stat);
  line-height: 1.1;
  color: var(--white);
  letter-spacing: var(--ls-display);
}
.credibility__body {
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  color: var(--muted-on-navy);
}

/* --------------------------------------------------------------------------
   7. Our care
   -------------------------------------------------------------------------- */

.care {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding-block: var(--section-y-half);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 640px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  color: var(--navy);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.care-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-12);
  align-items: center;
}
.care-row--image-right { grid-template-columns: 1.1fr 0.9fr; }
.care-row--image-right .care-row__media { grid-column: 2; grid-row: 1; }
.care-row--image-right .care-row__copy { grid-column: 1; grid-row: 1; }

.care-row__media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--r-image);
}

.care-row__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

.care-row__eyebrow {
  font-size: var(--fs-eyebrow-sm);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow-sm);
  text-transform: uppercase;
  color: var(--coral);
}

.care-row__copy h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: var(--ls-display);
}

.care-row__copy p {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  color: var(--body);
}

/* --------------------------------------------------------------------------
   8. Studio & gym
   -------------------------------------------------------------------------- */

.studio { background: var(--sand); }
.studio .container {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding-block: var(--section-y);
}

.studio__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: end;
}
.studio__head p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-loose);
  color: var(--body);
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-6);
}

.class-card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.class-card__when {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow-xs);
  text-transform: uppercase;
  color: var(--teal);
}
.class-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-card-title);
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: var(--ls-display);
}
.class-card__body {
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  color: var(--body);
}

.class-card--offer {
  background: var(--navy);
  justify-content: center;
  gap: var(--s-3);
}
.class-card--offer .class-card__name { color: var(--white); }

/* --------------------------------------------------------------------------
   9. Our people
   -------------------------------------------------------------------------- */

.people {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding-block: var(--section-y-half);
}

.people__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-8);
  flex-wrap: wrap;
}
.people__head .section-head { max-width: 600px; }

/* Practitioner cards — /about/ shows the team two-up; each service page shows
   its own practitioner. Portrait left on a sand card (brand sheet: portraits
   sit on sand), text right; stacks narrow. The portraits are small sources, so
   the photo is held at 200px rather than stretched to the column. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: var(--s-6);
}

.practitioner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-6);
  background: var(--sand);
  border-radius: var(--r-card);
  scroll-margin-top: var(--header-offset);
}
.practitioner-section .practitioner { max-width: 760px; }
.practitioner__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-portrait);
}
.practitioner__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.practitioner__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-name);
  letter-spacing: var(--ls-display);
  color: var(--navy);
}
.practitioner__role {
  margin: 0;
  font-weight: 600;
  color: var(--teal);
}
.practitioner__exp {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--ink);
}
.practitioner__bio {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--body);
}
.practitioner__link {
  margin-top: var(--s-2);
  align-self: flex-start;
  font-weight: 600;
}

.practitioner-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--section-y-half);
}

/* --------------------------------------------------------------------------
   10. Testimonial (compliance-bounded — see README)
   -------------------------------------------------------------------------- */

.testimonial { background: var(--aqua); }
.testimonial .container {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--section-y-tight);
}
.testimonial__eyebrow {
  font-size: var(--fs-eyebrow-sm);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow-sm);
  text-transform: uppercase;
  color: var(--ink-on-aqua);
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
  color: var(--ink-on-aqua);
  max-width: 900px;
  letter-spacing: var(--ls-display);
  text-wrap: pretty;
}
.testimonial__attribution {
  font-size: var(--fs-ui);
  color: var(--attrib-on-aqua);
}
.testimonial__note {
  font-size: var(--fs-meta);
  line-height: var(--lh-note);
  color: var(--note-on-aqua);
  max-width: 640px;
}

/* --------------------------------------------------------------------------
   11. Questions
   -------------------------------------------------------------------------- */

.questions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--s-12);
  padding-block: var(--section-y-half);
}
.questions .section-head h2 { font-size: var(--fs-h2-sm); line-height: 1.08; }
.questions__lead {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-loose);
  color: var(--body);
}

.faq { display: flex; flex-direction: column; }

.faq details {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-6);
}
.faq details:last-child { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-summary);
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: var(--ls-display);
  transition: color var(--t-hover);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal); }

.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t-hover);
}
.faq details[open] summary::after {
  transform: translateY(3px) rotate(225deg);
}

.faq p {
  margin-top: 14px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-loose);
  color: var(--body);
}

/* --------------------------------------------------------------------------
   12. Book online (Cliniko embed)

   The widget is cross-origin, so nothing inside it can be styled from here.
   The brand work that IS possible: the ground it sits on, the card that holds
   it, and the accent colour set inside Cliniko's own appearance settings.
   -------------------------------------------------------------------------- */

.booking { background: var(--sand); }
.booking .container {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--section-y);
}

.booking__head { max-width: 680px; }
.booking__lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-loose);
  color: var(--body);
}
.booking__lead a {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 2px solid var(--aqua);
  padding-bottom: 2px;
}
.booking__lead a:hover { color: var(--coral); border-bottom-color: var(--coral); }

.booking__frame {
  background: var(--white);
  border-radius: var(--r-image);
  padding: var(--s-3);
  overflow: hidden;
}
.booking__frame iframe {
  display: block;
  width: 100%;
  height: 900px; /* booking.js replaces this with the widget's real height */
  border: 0;
  border-radius: calc(var(--r-image) - var(--s-3));
}

.booking__note {
  font-size: var(--fs-meta);
  line-height: var(--lh-note);
  color: var(--muted);
  max-width: 640px;
}

/* --------------------------------------------------------------------------
   13. Contact (GoHighLevel form embed)

   Same deal as the booker: cross-origin, so the form's own fields are styled
   in the GoHighLevel form builder, not here. White ground so it reads as a
   distinct step from the sand booking block above it.
   -------------------------------------------------------------------------- */

.contact .container {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--section-y-half);
}

.contact__head { max-width: 680px; }
.contact__lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-loose);
  color: var(--body);
}
.contact__lead a {
  color: var(--navy);
  font-weight: 600;
  border-bottom: 2px solid var(--aqua);
  padding-bottom: 2px;
}
.contact__lead a:hover { color: var(--coral); border-bottom-color: var(--coral); }


.contact__note {
  font-size: var(--fs-meta);
  line-height: var(--lh-note);
  color: var(--muted);
  max-width: 640px;
}

/* ---- The enquiry form ----
   Brand sheet 07: 10px inputs, 999px pills, 48px minimum tap height. */

.enquiry {
  width: 100%;
  max-width: 720px;
  background: var(--sand);
  border-radius: var(--r-card);
  padding: var(--s-8);
}

.enquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--navy);
}

.field input,
.field textarea {
  font-family: inherit;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-input);
  padding: 13px 14px; /* 48px minimum height at this font size */
  width: 100%;
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
}
.field textarea { resize: vertical; min-height: 132px; }

.field input:hover,
.field textarea:hover { border-color: var(--muted); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 122, 140, 0.18);
}
.field input:focus-visible,
.field textarea:focus-visible { outline: none; }

.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: var(--coral); }

.field__hint,
.field__error {
  font-size: var(--fs-meta);
  line-height: var(--lh-note);
  color: var(--muted);
}
.field__error { color: #B3452A; font-weight: 600; } /* coral, darkened for AA on sand */

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-meta);
  line-height: var(--lh-note);
  color: var(--body);
  font-weight: 400;
  cursor: pointer;
}
.checkbox input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--teal);
  cursor: pointer;
}

/* Bot trap — off-screen rather than display:none, which some bots skip. */
.enquiry__trap {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.enquiry__turnstile:not(:empty) { margin-top: var(--s-6); }

.enquiry__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-top: var(--s-8);
}
.enquiry__actions button { border: 0; cursor: pointer; font-family: inherit; }
.enquiry__actions button[disabled] { opacity: 0.6; cursor: progress; }

.enquiry__status {
  font-size: var(--fs-meta);
  line-height: var(--lh-note);
  color: var(--body);
  margin: 0;
}
.enquiry__status--error { color: #B3452A; font-weight: 600; }
/* Focus is moved here after sending so keyboard users keep their place; it is
   a message, not a control, so it does not need a ring. */
.enquiry__status:focus { outline: none; }

/* Success replaces the form entirely — nothing left to fill in. */
.enquiry--sent .enquiry__grid,
.enquiry--sent .enquiry__actions button,
.enquiry--sent .enquiry__turnstile { display: none; }
.enquiry--sent .enquiry__status {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  color: var(--navy);
}
.enquiry--sent .enquiry__actions { margin-top: 0; }

/* --------------------------------------------------------------------------
   14. Multi-page blocks

   Everything the service, hub and utility pages need on top of the home page's
   sections. Same tokens, same scale — nothing new invented here.
   -------------------------------------------------------------------------- */

/* Page opener. Single column by default, split with an image when one is set. */
.page-hero {
  padding-block: var(--s-20) var(--section-y-half);
  display: grid;
  gap: var(--s-12);
}
.page-hero--split { grid-template-columns: 1.05fr 0.95fr; align-items: center; }

.page-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  align-items: flex-start;
  max-width: 62ch; /* brand sheet: max 68 characters per line */
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  color: var(--navy);
  text-wrap: balance;
}
.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--body);
  text-wrap: pretty;
}
.page-hero__note {
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--muted);
  font-style: italic;
}
.page-hero__media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--r-image);
}

/* Body copy sections. */
.prose-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--section-y-half);
}
.prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body-loose);
  color: var(--body);
  max-width: 62ch;
}
.section-head__intro {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-loose);
  color: var(--body);
  max-width: 62ch;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: start;
}
.two-col--text { gap: var(--s-8); }

.checklist__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-card-title);
  letter-spacing: var(--ls-display);
  color: var(--navy);
  margin-bottom: var(--s-4);
}
.checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.checklist li {
  position: relative;
  padding-left: var(--s-8);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-loose);
  color: var(--body);
}
/* Aqua tick, drawn rather than an icon font. */
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* Cross-link cards. */
.related {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--section-y-half);
}
.related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-6);
}
.related__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-8);
  background: var(--sand);
  border-radius: var(--r-card);
  color: var(--body);
  transition: background-color var(--t-hover), transform var(--t-hover);
}
.related__card:hover { background: var(--aqua); color: var(--navy); }
.related__card strong {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-card-title);
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  color: var(--navy);
}
.related__card span { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.related__go {
  margin-top: auto;
  font-weight: 600;
  color: var(--teal);
}
.related__go::after { content: ' \2192'; }
.related__card:hover .related__go { color: var(--navy); }

/* Closing navy band, in place of the old Visit section. */
.cta-band { background: var(--navy); color: var(--sand); }
.cta-band .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  padding-block: var(--section-y);
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-h2-lg);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--white);
  text-wrap: balance;
  max-width: 18ch;
}
.cta-band p {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body);
  color: var(--muted-on-navy);
  max-width: 54ch;
}

/* Sand-ground stacks used on the service pages. */
.studio__stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-block: var(--section-y);
}
.studio__teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
  padding-block: var(--section-y);
}
.studio__teaser > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  align-items: flex-start;
}
.studio__teaser-media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--r-image);
}

/* Contact page: details beside the photo. */
.contact-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-12);
  align-items: start;
  padding-block: var(--section-y-half);
}
.contact-split__details { display: flex; flex-direction: column; gap: var(--s-6); }
.contact-split__details .visit__details { color: var(--body); }
.contact-split__details .visit__details strong { color: var(--navy); }
.contact-split__details .visit__details a { color: var(--teal); }
.contact-split__media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--r-image);
}

/* Current page marker in the nav — the wave, per brand sheet section 04. */
.site-nav a[aria-current='page'] {
  color: var(--navy);
  font-weight: 600;
  background-image: var(--wave);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}

main > section:last-child:not(:is(.credibility, .studio, .testimonial, .booking, .cta-band)) {
  padding-bottom: var(--section-y);
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer-wrap {
  background: var(--navy);
  color: var(--footer-text);
}

.site-footer {
  border-top: 4px solid transparent;
  border-image: var(--wave) 1; /* brand sheet: the wave is the footer's top edge */
  padding-block: var(--s-12);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: var(--s-12);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-note);
}
.site-footer__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display-strong);
  font-size: var(--fs-card-title);
  letter-spacing: var(--ls-display);
  color: var(--white);
  margin-bottom: var(--s-2);
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-6);
}
.site-footer__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-meta);
}

.site-footer a { color: var(--muted-on-navy); }
.site-footer a:hover { color: var(--aqua); }

/* Social icons: 48px round targets (brand sheet tap minimum), outlined so
   they sit quietly on navy and fill aqua on hover. */
.social {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  gap: var(--s-3);
}
.site-footer .social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  border: 1.5px solid color-mix(in srgb, var(--white) 35%, transparent);
  color: var(--white);
  transition: background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.site-footer .social__link:hover {
  background: var(--aqua);
  border-color: var(--aqua);
  color: var(--navy);
}

.site-footer__legal {
  padding-block: var(--s-6) var(--s-12);
  border-top: 1px solid var(--rule-on-navy);
  font-size: var(--fs-footer);
  color: var(--footer-text);
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

/* Tablet and below: two-column grids collapse -------------------------------- */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .hero__lead { max-width: none; }

  .care-row,
  .care-row--image-right {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .care-row--image-right .care-row__media,
  .care-row--image-right .care-row__copy {
    grid-column: 1;
    grid-row: auto;
  }

  .studio__head { grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }

  .questions { grid-template-columns: 1fr; gap: var(--s-8); }

  .visit__inner { grid-template-columns: 1fr; gap: var(--s-8); }

  .page-hero--split { grid-template-columns: 1fr; gap: var(--s-8); }
  .two-col { grid-template-columns: 1fr; gap: var(--s-8); }
  .studio__teaser { grid-template-columns: 1fr; gap: var(--s-8); }
  .contact-split { grid-template-columns: 1fr; gap: var(--s-8); }
  .site-footer { grid-template-columns: 1fr; gap: var(--s-8); }
  .visit__copy > p { max-width: none; }
  .visit__map { height: 320px; }
}

/* Nav collapses to a hamburger ----------------------------------------------
   Six items plus the logo and the booking pill need about 1040px in Sora. */
@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; position: relative; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-2) var(--gutter) var(--s-6);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding-block: 14px;
    font-size: var(--fs-body-sm);
    border-bottom: 1px solid var(--rule);
  }
  .site-nav a:last-child { border-bottom: 0; }

  .site-header { position: sticky; }
  .header-bar { position: relative; }
}

/* Phone ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --header-offset: 84px; }

  /* The bar has to hold wordmark + Book online + hamburger at 320px, and Sora
     is a wide face. Budget at 375px: 40 gutters + ~150 wordmark + 108 pill +
     44 toggle + gaps. Buttons stay above the brand sheet's 48px minimum. */
  .header-bar { padding-block: 16px; gap: var(--s-2); }
  .logo { gap: var(--s-1); }
  .logo img { height: clamp(16px, 3.9vw, 22px); }
  .logo__wordmark { font-size: clamp(0.875rem, 3.9vw, 1.125rem); }
  .logo__wave { height: 3px; }
  .header-actions { gap: var(--s-1); }
  .pill--navy { font-size: 14px; padding: 14px 16px; }
  .nav-toggle { width: 44px; height: 44px; }

  /* Below 360px (iPhone SE 1st gen, small Androids, zoomed text) the header
     needs 308px in 280px. The wordmark is already at the brand sheet's 140px
     floor, so the pill gives instead: it reads "Book", and "online" stays in
     the accessible name so a screen reader still says "Book online". */
  @media (max-width: 359px) {
    .pill__more {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  .hero { padding-block: var(--s-8) var(--section-y-half); gap: var(--s-8); }
  .hero__copy { gap: var(--s-6); }
  .hero__mosaic { grid-template-rows: 160px 200px; gap: var(--s-3); }
  .hero__mosaic > :first-child img { border-radius: 120px; }
  .cta-row { gap: var(--s-3); }
  .pill--coral, .pill--coral-on-navy { padding: 16px 26px; font-size: var(--fs-ui); }
  .pill--outline { padding: 14px 24px; font-size: var(--fs-ui); }
  .hero__lead { font-size: var(--fs-body); }

  .credibility .container { gap: var(--s-8); }

  .care { gap: var(--s-12); }
  .care-row__media img { height: 240px; }

  .people__head { gap: var(--s-6); }

  .visit__inner { padding-block: var(--section-y); }
  .visit__details { gap: var(--s-6); }
  .visit__map { height: 260px; }

  /* Practitioner: photo beside name/title/experience, bio full width below —
     two columns at 375px would leave the bio a 150px strip. */
  .practitioner {
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-4);
  }
  .practitioner__body { display: contents; }
  .practitioner__photo { grid-column: 1; grid-row: 1 / span 3; }
  .practitioner__name, .practitioner__role, .practitioner__exp { grid-column: 2; }
  .practitioner__exp { align-self: start; }
  .practitioner__bio, .practitioner__link { grid-column: 1 / -1; }

  .site-footer { padding-block: var(--s-6) var(--s-8); gap: var(--s-4); }

  .booking .container { gap: var(--s-6); }
  .booking__frame { padding: var(--s-2); border-radius: var(--r-card); }
  .booking__frame iframe { height: 780px; border-radius: calc(var(--r-card) - var(--s-2)); }

  .contact .container { gap: var(--s-6); }
  .enquiry { padding: var(--s-4); }
  .enquiry__grid { grid-template-columns: 1fr; gap: var(--s-4); }

  /* Multi-page blocks at phone size. */
  .page-hero { padding-block: var(--s-12) var(--section-y-half); gap: var(--s-8); }
  .page-hero__copy { gap: var(--s-4); }
  .page-hero__media img { height: 240px; }
  .page-hero__lead { font-size: var(--fs-body); }

  .prose-section, .related { gap: var(--s-6); }
  .two-col { gap: var(--s-8); }
  .checklist li { padding-left: var(--s-6); }
  .related__card { padding: var(--s-6); }
  .related__grid { gap: var(--s-4); }

  .cta-band .container { gap: var(--s-4); }
  .cta-band h2 { max-width: none; }

  .studio__stack { gap: var(--s-6); }
  .studio__teaser { gap: var(--s-8); }
  .studio__teaser-media img { height: 220px; }
  .contact-split { gap: var(--s-8); }
  .contact-split__media img { height: 260px; }

  .site-footer { padding-block: var(--s-8); gap: var(--s-8); }
  .site-footer__links { gap: var(--s-6); }
  .site-footer__legal { padding-block: var(--s-6) var(--s-8); }
}

/* Print ---------------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle { position: static; }
  .faq details { display: block; }
}