/* ===========================================================================
   Mind Body & Soul Aesthetic — site stylesheet
   Rebuilt on the Mind Body & Soul Design System.
   Loads the DS tokens (fonts → colours → type → spacing → base), then styles
   the marketing-site components against those tokens. Display = Jost (light),
   body = Mulish, palette = clay + sand, pill buttons, soft radii, warm shadows.
   The class API is unchanged so every page adopts the new look at once.
   =========================================================================== */
/* NOTE: previously this file @import'd the design-system tokens below,
   which forced the browser through a serial chain of CSS requests before
   it could render anything (site.css -> _ds/styles.css -> 4 token files).
   PageSpeed flagged ~2.85s of render-blocking delay from this. The token
   files are inlined below instead; the source of truth is still
   mind-body-soul-design-system-20095bf6-7daf-4bbf-9c1d-cf33091355e9/tokens/*.css if the design system needs updating -
   re-run the bundle step after editing those files. */

/* ---- design-system tokens: colors ---- */
/* ===========================================================================
   Mind Body & Soul — Colour tokens
   A disciplined two-family palette: terracotta "clay" + warm "sand", with
   earthy, muted semantics. Derived from the brand logo (#AF5E2D on #E0D4C5).
   =========================================================================== */
:root {
  /* --- Clay (terracotta — the single brand colour) ---------------------- */
  --clay-50:  #F8EFE8;
  --clay-100: #EFDCCD;
  --clay-200: #E0BFA3;
  --clay-300: #CE9C73;
  --clay-400: #C07E4F;
  --clay-500: #AF5E2D;  /* brand primary — sampled from logo */
  --clay-600: #964F26;
  --clay-700: #7A4020;
  --clay-800: #5C311A;
  --clay-900: #3E2212;

  /* --- Sand (warm neutral — surfaces & text) ---------------------------- */
  --sand-50:  #FBF7F2;  /* warm page white */
  --sand-100: #F4EDE3;
  --sand-200: #EADFD1;
  --sand-300: #E0D4C5;  /* brand sand — sampled from banner */
  --sand-400: #CFBFAA;
  --sand-500: #B8A38B;
  --sand-600: #95816A;
  --sand-700: #6E5E4B;
  --sand-800: #463B2F;
  --sand-900: #2A2219;  /* deep espresso — primary ink */

  /* --- Earthy semantics (muted, never neon) ----------------------------- */
  --sage-500:    #6E7B59;  /* success / botanical */
  --sage-50:     #EEF0E6;
  --amber-500:   #C0883B;  /* warning */
  --amber-50:    #F8EEDC;
  --brick-500:   #A8442F;  /* error / danger */
  --brick-50:    #F6E4DD;

  /* =========================================================================
     Semantic aliases — reference these in components, not the raw scales.
     ========================================================================= */
  /* Surfaces */
  --surface-page:    var(--sand-50);
  --surface-card:    #FFFFFF;
  --surface-sunken:  var(--sand-100);
  --surface-raised:  #FFFFFF;
  --surface-inverse: var(--sand-900);
  --surface-brand:   var(--clay-500);
  --surface-brand-soft: var(--clay-50);

  /* Text */
  --text-primary:   var(--sand-900);
  --text-secondary: var(--sand-700);
  --text-muted:     #7E6C57;  /* AA-safe muted tone — 4.72:1 on --surface-page, 5.04:1 on white cards. --sand-600 (3.50:1) failed WCAG AA for normal text. */
  --text-on-brand:  var(--sand-50);
  --text-on-dark:   var(--sand-100);
  --text-brand:     var(--clay-600);

  /* Lines & borders */
  --border-subtle: var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong: var(--sand-400);
  --border-brand:  var(--clay-300);

  /* Interactive (primary = clay) */
  --color-primary:        var(--clay-500);
  --color-primary-hover:  var(--clay-600);
  --color-primary-active: var(--clay-700);
  --color-on-primary:     var(--sand-50);
  /* --clay-500 only measures 4.41:1 against --color-on-primary — just under
     AA for normal-size text. Use this darkened variant for solid fills that
     carry on-primary text (buttons); --color-primary itself is unchanged for
     non-text uses (icons, borders, brand accents). 4.64:1. */
  --color-primary-text-safe: #AA5B2C;

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--clay-500) 45%, transparent);

  /* Status */
  --color-success: var(--sage-500);
  --color-warning: var(--amber-500);
  --color-danger:  var(--brick-500);
}

/* ---- design-system tokens: typography ---- */
/* ===========================================================================
   Mind Body & Soul — Typography tokens
   Display: Jost (geometric, elegant, set LIGHT with open tracking — echoes the
   logotype). Body: Mulish (warm humanist sans, highly readable).
   =========================================================================== */
:root {
  /* Families */
  --font-display: 'Jost', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, sans-serif;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (1.25 major-third, rem) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */
  --text-5xl:  5.25rem;   /* 84 */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing — display runs tight, eyebrows run WIDE (brand signature) */
  --tracking-display: -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-eyebrow: 0.28em;  /* uppercase labels, like the logo tagline */

  /* Semantic roles */
  --type-display-font:  var(--font-display);
  --type-display-weight: var(--weight-light);
  --type-heading-font:  var(--font-display);
  --type-heading-weight: var(--weight-regular);
  --type-eyebrow-font:  var(--font-display);
  --type-body-font:     var(--font-body);
  --type-body-weight:   var(--weight-regular);
}

/* ---- design-system tokens: spacing ---- */
/* ===========================================================================
   Mind Body & Soul — Spacing, radii, shadows, layout
   Generous, calm spacing. Soft organic radii. Whisper-soft warm shadows
   (never hard, never grey — tinted with espresso so they sit in the palette).
   =========================================================================== */
:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Radii — soft, organic */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Warm, espresso-tinted shadows */
  --shadow-xs: 0 1px 2px rgba(42, 34, 25, 0.06);
  --shadow-sm: 0 2px 8px rgba(42, 34, 25, 0.07);
  --shadow-md: 0 8px 24px rgba(42, 34, 25, 0.09);
  --shadow-lg: 0 18px 48px rgba(42, 34, 25, 0.12);
  --shadow-brand: 0 12px 30px rgba(175, 94, 45, 0.22);

  /* Borders */
  --border-width: 1px;
  --border-hairline: 1px;

  /* Layout */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --gutter: var(--space-5);

  /* Motion — calm, spa-like; ease-out, generous, no bounce */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);      /* @kind other */
  --duration-fast: 160ms;                            /* @kind other */
  --duration-base: 280ms;                            /* @kind other */
  --duration-slow: 520ms;                            /* @kind other */
}

/* ---- design-system: base/reset ---- */
/* ===========================================================================
   Mind Body & Soul — Base / reset
   Minimal, opinionated resets + a few brand utility classes for specimen
   cards and prose. Components carry their own styling.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / heading helpers */
.mbs-display {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
.mbs-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.mbs-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--text-sm);
  color: var(--text-brand);
}

a { color: var(--clay-600); text-underline-offset: 3px; }

/* ---------- Back-compat aliases ----------------------------------------
   Older inline styles in the pages reference these names; remap them to DS
   tokens so nothing drifts off-palette. New rules below use DS vars directly. */
:root {
  --paper:        var(--sand-50);     /* page */
  --paper-2:      var(--sand-100);    /* alt band */
  --cream:        var(--surface-card);/* cards (white) */
  --ink:          var(--sand-900);    /* primary text / espresso */
  --ink-2:        var(--sand-700);    /* secondary text */
  --ink-mute:     var(--sand-600);    /* labels / meta */
  --terra:        var(--clay-500);    /* brand primary */
  --terra-deep:   var(--clay-600);    /* hover */
  --rose:         var(--clay-300);    /* soft accent / rules */
  --rose-dark:    var(--clay-600);    /* accent text */
  --tan:          var(--sand-400);
  --gold:         var(--clay-400);
  --line:         var(--border-subtle);
  --line-strong:  var(--border-strong);
  --serif:        var(--font-display);/* now Jost */
  --sans:         var(--font-body);   /* now Mulish */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: var(--leading-normal);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Phosphor icon baseline ----------------------------------- */
i[class*="ph-"] { font-style: normal; line-height: 1; display: inline-block; vertical-align: middle; }

/* ---------- Reduced motion ------------------------------------------------
   Every transition/transform in this file (nav hovers, dropdown reveals,
   mobile drawer slide, card hover) collapses to an instant state change for
   visitors who've asked for reduced motion, instead of being skipped entirely. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Type --------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
.display em { font-style: normal; font-weight: var(--weight-light); color: var(--clay-600); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}
.eyebrow .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clay-300);
  vertical-align: middle;
  margin: 0 14px 3px;
}
.lede {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- Layout ------------------------------------------------------- */
.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
}

/* ---------- Utility bar -------------------------------------------------- */
.utility {
  background: var(--sand-900);
  color: var(--sand-200);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.utility .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  gap: 24px;
}
.utility .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sand-300);
}
.utility .pill i { font-size: 15px; color: var(--clay-300); }
.utility .right { display: flex; gap: 28px; }
a.pill { text-decoration: none; transition: color var(--duration-fast) var(--ease-soft); }
.utility a.pill:hover { color: var(--sand-50); }

/* ---------- Header / nav ------------------------------------------------- */
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sand-50) 88%, transparent);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: saturate(140%) blur(10px);
}
header.nav .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 92px;
  gap: 32px;
}
.navlist {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.navlist a {
  position: relative;
  padding: 8px 0;
  transition: color var(--duration-fast) var(--ease-soft);
}
.navlist a:hover { color: var(--clay-600); }
.navlist a.has-sub::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  margin-left: 8px;
  opacity: 0.55;
}
.navlist .item { position: relative; }
.navlist .submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 300px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px 20px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft), visibility 0s linear var(--duration-base);
  z-index: 60;
}
.navlist .submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.navlist .submenu li { padding: 8px 0; white-space: nowrap; }
.navlist .submenu a {
  font-family: var(--font-body);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
}
.navlist .submenu a:hover,
.navlist .submenu a:focus-visible { color: var(--clay-600); }
.navlist .item:hover .submenu,
.navlist .item:focus-within .submenu,
.navlist .item.is-open .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft), visibility 0s;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.brand .mark {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--text-primary);
  white-space: nowrap;
}
.brand .mark span { color: var(--clay-500); }
.brand-logo { display: block; height: 76px; width: auto; }
footer .brand-block .brand-logo { height: 110px; margin-bottom: 10px; }
@media (max-width: 640px) { .brand-logo { height: 60px; } }
.brand .sub {
  display: block;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
  margin-top: 6px;
  white-space: nowrap;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}

/* ---------- Buttons (DS pill) ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary-text-safe);
  background: var(--color-primary-text-safe);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-brand);
  transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
}
.btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn i { font-size: 16px; }

/* secondary / outline */
.btn.ghost {
  background: transparent;
  color: var(--clay-600);
  border-color: var(--border-brand);
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--clay-50);
  color: var(--clay-700);
  border-color: var(--border-brand);
}

/* outline button for use on clay / espresso backgrounds */
.btn.line {
  background: transparent;
  color: var(--sand-50);
  border-color: color-mix(in srgb, var(--sand-50) 50%, transparent);
  box-shadow: none;
}
.btn.line:hover {
  background: color-mix(in srgb, var(--sand-50) 12%, transparent);
  border-color: var(--sand-50);
  color: var(--sand-50);
}

/* for use on clay / espresso backgrounds */
.btn.invert {
  background: var(--sand-50);
  color: var(--sand-900);
  border-color: var(--sand-50);
  box-shadow: var(--shadow-md);
}
.btn.invert:hover {
  background: var(--sand-100);
  color: var(--sand-900);
  border-color: var(--sand-100);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-600);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--clay-300);
  transition: color var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft);
}
.text-link:hover { color: var(--clay-700); border-color: var(--clay-500); }
.text-link i { font-size: 15px; }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: 72px;
  padding-bottom: 96px;
  overflow: hidden;
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(44px, 6vw, 92px);
  margin: 24px 0 30px;
}
.hero h1 .line { display: block; }
.hero h1 .alt { color: var(--clay-600); }
.hero p.intro {
  max-width: 520px;
  margin: 0 0 40px;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.65;
}
.hero-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
}
.hero-media .frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.hero-media .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .frame.a {
  width: 100%; height: 100%;
  right: 0; top: 0;
  box-shadow: var(--shadow-lg);
}
.hero-media .frame.b {
  width: 38%; height: 46%;
  left: 0; bottom: 6%;
  border: 6px solid var(--sand-50);
  box-shadow: var(--shadow-md);
}
.hero-media .tag {
  position: absolute;
  left: 0; bottom: -12px;
  z-index: 4;
  background: var(--sand-50);
  padding: 12px 18px 0 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-secondary);
}
.hero-meta {
  display: flex;
  gap: 32px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  align-items: flex-start;
}
.hero-meta .stat { flex: 0 0 auto; min-width: 0; }
.hero-meta .num {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 44px;
  line-height: 1;
  color: var(--clay-600);
}
.hero-meta .lbl {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}
.hero-meta .vline { width: 1px; align-self: stretch; background: var(--border-default); }

/* ---------- Hero — full-bleed immersive variant -------------------------- */
.hero.bleed {
  padding: 0;
  min-height: min(86vh, 820px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--sand-900);
}
.hero.bleed .bg { position: absolute; inset: 0; }
.hero.bleed .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero.bleed .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(42,34,25,0.9) 0%, rgba(42,34,25,0.64) 40%, rgba(42,34,25,0.14) 74%, rgba(42,34,25,0.02) 100%);
}
.hero.bleed .wrap { position: relative; z-index: 2; width: 100%; }
.hero.bleed .inner { max-width: 660px; }
.hero.bleed .eyebrow { color: var(--clay-200); }
.hero.bleed .eyebrow .dot { background: var(--clay-300); }
.hero.bleed h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 1.04;
  color: var(--sand-50);
  margin: 22px 0 26px;
  text-wrap: balance;
}
.hero.bleed h1 em { font-style: normal; color: var(--clay-200); }
.hero.bleed .intro {
  color: var(--sand-200);
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 34px;
}
.hero.bleed .hero-cta { gap: 16px; }
.hero.bleed .trust {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 44px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sand-300);
}
.hero.bleed .trust .d { width: 5px; height: 5px; border-radius: 50%; background: var(--clay-300); }
@media (max-width: 640px) {
  .hero.bleed { min-height: 600px; }
  .hero.bleed .scrim { background: linear-gradient(180deg, rgba(42,34,25,0.45) 0%, rgba(42,34,25,0.82) 70%); }
  .hero.bleed h1 { font-size: 46px; }
  .hero.bleed .trust { gap: 12px; margin-top: 32px; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- Section base ------------------------------------------------- */
section { position: relative; }
.band { padding: 120px 0; }
.band.alt { background: var(--surface-card); }
.band.dark { background: var(--sand-900); color: var(--sand-100); }
.band.dark .eyebrow { color: var(--clay-300); }
.band.dark .display { color: var(--sand-50); }
.band.dark .display em { color: var(--clay-300); }
.band.dark .lede { color: var(--sand-300); }
.band.dark .text-link { color: var(--sand-50); border-color: color-mix(in srgb, var(--sand-50) 32%, transparent); }
.band.dark .text-link:hover { color: var(--clay-300); border-color: var(--clay-300); }

.sec-head {
  text-align: center;
  margin: 0 auto 72px;
  max-width: 880px;
}
.sec-head h2 {
  font-size: clamp(40px, 4.8vw, 64px);
  margin: 18px 0 0;
}
.sec-head .lede { margin-top: 24px; }

/* ---------- Intro statement band ---------------------------------------- */
.statement {
  text-align: center;
  padding: 132px 0 120px;
  background: var(--sand-100);
}
.statement .display {
  font-size: clamp(36px, 4.4vw, 58px);
  max-width: 1040px;
  margin: 24px auto 48px;
  line-height: 1.14;
}
.statement .ornament {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--clay-600);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.statement .ornament .ln { width: 48px; height: 1px; background: var(--clay-300); display: block; }

/* ---------- Services grid ----------------------------------------------- */
.services-band { padding: 130px 0; }
.services-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
.services-head h2 {
  font-size: clamp(44px, 5.4vw, 76px);
  margin: 16px 0 0;
}
.services-head .right {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
  max-width: 460px;
  justify-self: end;
}
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft);
}
.svc:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.svc .img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.svc .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-soft);
}
.svc:hover .img img { transform: scale(1.06); }
.svc .body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.svc .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.svc .head h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
  color: var(--text-primary);
}
.svc .level {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-600);
}
.svc .arr {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--text-primary);
  transition: background var(--duration-base) var(--ease-soft), color var(--duration-base) var(--ease-soft), border-color var(--duration-base) var(--ease-soft);
}
.svc:hover .arr { background: var(--clay-500); color: var(--sand-50); border-color: var(--clay-500); }
.svc .arr i { font-size: 16px; }
.svc .desc { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }

/* ---------- Philosophy --------------------------------------------------- */
.philosophy .grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 96px;
  align-items: center;
}
.philosophy .grid.solo { grid-template-columns: 1fr; gap: 0; max-width: 760px; }
.philosophy .media { position: relative; width: 100%; }
.philosophy .media .ph-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.philosophy .media .ph-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.philosophy .media .quote {
  position: absolute;
  left: 4%; bottom: 6%;
  z-index: 3;
  background: var(--sand-50);
  padding: 24px 28px;
  max-width: 290px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.philosophy .media .quote .mark-q {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.5;
  color: var(--clay-400);
  display: block;
  margin-bottom: 8px;
}
.philosophy .media .quote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.philosophy h2 { font-size: clamp(44px, 5vw, 68px); margin: 22px 0 32px; }
.philosophy .body p {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.78;
  margin: 0 0 20px;
  max-width: 520px;
}
.philosophy .sig { margin-top: 36px; display: flex; align-items: center; gap: 18px; }
.philosophy .sig .name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 24px;
  color: var(--text-primary);
}
.philosophy .sig .role {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------- Signature services CTA card --------------------------------- */
.signature { padding: 120px 0; background: var(--sand-100); }
.sig-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.sig-card h2 { font-size: clamp(38px, 4.6vw, 58px); margin: 18px 0 28px; }
.sig-card p { color: var(--text-secondary); font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
.sig-card .pillgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 36px;
}
.sig-card .pillgrid .p {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--sand-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
}
.sig-card .pillgrid .p i { font-size: 18px; color: var(--clay-500); flex: 0 0 auto; }
.sig-card .act { margin-top: 40px; }

/* ---------- Press / awards ---------------------------------------------- */
.press { padding: 130px 0; }
.press-head { text-align: center; margin-bottom: 80px; }
.press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.press-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 56px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.press-card .seal {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--clay-50);
  display: grid;
  place-items: center;
  color: var(--clay-600);
}
.press-card .seal i { font-size: 38px; }
.press-card blockquote {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.32;
  color: var(--text-primary);
  margin: 0;
  max-width: 460px;
}
.press-card .src {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- New standard / closing dark band ---------------------------- */
.standard {
  background: var(--sand-900);
  color: var(--sand-100);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.standard .grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}
.standard .eyebrow { color: var(--clay-300); }
.standard .eyebrow .dot { background: var(--clay-300); }
.standard h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1.06;
  margin: 22px 0 32px;
  color: var(--sand-50);
  letter-spacing: var(--tracking-display);
}
.standard h2 em { font-style: normal; color: var(--clay-300); }
.standard p { color: var(--sand-300); font-size: 17px; line-height: 1.8; margin: 0 0 24px; max-width: 520px; }
.standard .media { position: relative; aspect-ratio: 4 / 5; }
.standard .media .a { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.standard .media .a img { width: 100%; height: 100%; object-fit: cover; }
.standard .badge {
  position: absolute;
  right: -28px; top: 28px;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: var(--clay-500);
  color: var(--sand-50);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 16px;
  line-height: 1.25;
  z-index: 2;
  box-shadow: var(--shadow-brand);
}
.standard .badge span {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

/* ---------- Footer ------------------------------------------------------- */
footer {
  background: var(--sand-100);
  color: var(--text-primary);
  padding: 96px 0 32px;
  border-top: 1px solid var(--border-subtle);
}
footer .grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 64px;
}
footer .brand-block .mark {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 44px;
  line-height: 1;
  color: var(--text-primary);
}
footer .brand-block .mark span { color: var(--clay-500); }
footer .brand-block .sub {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px;
}
footer .brand-block p { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin-top: 24px; max-width: 340px; }
footer h4 {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  margin: 0 0 22px;
}
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
footer ul a { font-family: var(--font-body); font-size: 16px; color: var(--text-primary); transition: color var(--duration-fast) var(--ease-soft); }
footer ul a:hover { color: var(--clay-600); }
footer .contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}
footer .contact-row span { display: block; }
footer .contact-row a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-soft); }
footer .contact-row a:hover { color: var(--clay-600); }
footer .contact-row i { font-size: 18px; color: var(--clay-500); flex: 0 0 auto; margin-top: 2px; }
footer .social { display: flex; gap: 12px; margin-top: 24px; }
footer .social a {
  width: 40px; height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  transition: background var(--duration-base) var(--ease-soft), color var(--duration-base) var(--ease-soft), border-color var(--duration-base) var(--ease-soft);
}
footer .social a:hover { background: var(--clay-500); color: var(--sand-50); border-color: var(--clay-500); }
footer .social i { font-size: 16px; }
footer .meta {
  border-top: 1px solid var(--border-subtle);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary); /* was --text-muted: 4.33:1 on this footer's sand-100 bg, fails AA (needs 4.5:1). text-muted was calibrated against --surface-page/white, not sand-100. text-secondary = 5.37:1 here. */
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1100px) {
  .wrap { padding: 0 32px; }
  .navlist { gap: 24px; }
  .hero .grid,
  .philosophy .grid,
  .standard .grid,
  .services-head,
  .sig-card,
  footer .grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .services-head .right { justify-self: start; }
  .sig-card { padding: 56px 40px; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .press-grid { grid-template-columns: 1fr; }
  footer .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .utility { display: none; }
  .hero { padding-top: 32px; padding-bottom: 64px; }
  .hero h1 { font-size: 52px; }
  .hero-meta { flex-direction: column; gap: 18px; }
  .hero-meta .vline { display: none; }
  .band, .services-band, .press, .standard, .signature { padding: 80px 0; }
  .services { grid-template-columns: 1fr; }
  .sec-head { margin-bottom: 48px; }
  .display, .sig-card h2 { line-height: 1.12; }
  .sig-card { padding: 48px 22px; }
  .sig-card .pillgrid { gap: 10px; margin-top: 28px; }
  .sig-card .pillgrid .p { gap: 10px; padding: 13px 16px; font-size: 15px; line-height: 1.25; }
  footer .grid { grid-template-columns: 1fr; gap: 40px; }
  footer .meta { flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================================
   SERVICE / INNER PAGE COMPONENTS
   ============================================================ */

/* ---------- Service / page hero ---------- */
.svc-hero {
  padding: 92px 0 80px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--sand-100);
}
.svc-hero .inner { max-width: 880px; }
.breadcrumb {
  display: flex;
  align-items: center;
  /* Without wrap the crumb trail is a single flex line, so a long final crumb
     pushes past the viewport and gives the whole page a horizontal scrollbar
     on narrow phones. */
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 30px;
}
.breadcrumb a { transition: color var(--duration-fast) var(--ease-soft); }
.breadcrumb a:hover { color: var(--clay-600); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .here { color: var(--text-primary); }
.svc-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
  font-size: clamp(42px, 6vw, 80px);
  margin: 0 0 26px;
  text-wrap: balance;
}
.svc-hero h1 em { font-style: normal; color: var(--clay-600); }
.svc-hero .sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 0 40px;
}

/* ---------- Section scaffolding ---------- */
.svc-section { padding: 96px 0; }
.svc-section.alt { background: var(--surface-card); }
.svc-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.svc-grid .label-col .eyebrow { margin-bottom: 14px; }
.svc-grid .label-col h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  margin: 0;
}
.svc-grid .label-col h2 em { font-style: normal; color: var(--clay-600); }
.prose p { color: var(--text-secondary); font-size: 17px; line-height: 1.78; margin: 0 0 20px; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- Benefits / treats list ---------- */
.treats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.treats li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.treats li .ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--clay-50);
  color: var(--clay-600);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.treats li .ic i { font-size: 17px; }
.treats li b { font-weight: 700; }

/* ---------- FAQ accordion ---------- */
.faq-wrap { max-width: 900px; margin: 0 auto; }
.faq { border-top: 1px solid var(--border-default); }
.faq:last-child { border-bottom: 1px solid var(--border-default); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 56px 28px 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.25;
  color: var(--text-primary);
  transition: color var(--duration-base) var(--ease-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--clay-600); }
.faq summary .plus {
  position: absolute;
  right: 6px; top: 50%;
  width: 22px; height: 22px;
  transform: translateY(-50%);
}
.faq summary .plus::before,
.faq summary .plus::after {
  content: "";
  position: absolute;
  background: var(--clay-500);
  transition: transform var(--duration-base) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft);
}
.faq summary .plus::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq summary .plus::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.faq[open] summary .plus::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq[open] summary { color: var(--clay-600); }
.faq .answer {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.75;
  padding: 0 56px 30px 0;
  max-width: 760px;
}
.faq .answer p { margin: 0; }

/* ---------- Pricing table ---------- */
.price-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 32px;
  border-bottom: 1px solid var(--border-subtle);
}
.price-row:last-child { border-bottom: 0; }
.price-row .name { font-family: var(--font-display); font-size: 21px; color: var(--text-primary); line-height: 1.2; }
.price-row .name small {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: none;
}
.price-row .dots { flex: 1; border-bottom: 1px dotted var(--border-strong); transform: translateY(-4px); min-width: 24px; }
.price-row .amt { font-family: var(--font-display); font-size: 23px; color: var(--clay-600); white-space: nowrap; }
.price-group-head {
  padding: 20px 32px 12px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--sand-100);
  border-bottom: 1px solid var(--border-subtle);
}
.price-note { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ---------- Closing CTA (dark) ---------- */
.svc-cta {
  background: var(--sand-900);
  color: var(--sand-100);
  padding: 110px 0;
  text-align: center;
}
.svc-cta .eyebrow { color: var(--clay-300); }
.svc-cta .eyebrow .dot { background: var(--clay-300); }
.svc-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1.06;
  color: var(--sand-50);
  margin: 16px auto 24px;
  max-width: 820px;
  letter-spacing: var(--tracking-display);
}
.svc-cta h2 em { font-style: normal; color: var(--clay-300); }
.svc-cta p { color: var(--sand-300); font-size: 17px; line-height: 1.7; max-width: 560px; margin: 0 auto 38px; }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; gap: 32px; }
  .treats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .svc-hero { padding: 56px 0 48px; }
  .svc-section { padding: 64px 0; }
  .price-row { padding: 18px 20px; gap: 14px; }
  .price-row .name { font-size: 19px; }
  .price-row .amt { font-size: 20px; }
  .price-group-head { padding: 16px 20px 10px; }
  .svc-cta { padding: 72px 0; }
}

/* ---------- Multi-page content helpers ---------- */
.lead {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 780px;
  margin: 0;
}
.prose .lead { margin-bottom: 8px; }

/* Feature cards */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.feature {
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 32px;
}
.feature .ic {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--clay-50);
  color: var(--clay-600);
  margin-bottom: 20px;
}
.feature .ic i { font-size: 24px; }
.feature h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 23px;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.feature p { color: var(--text-secondary); font-size: 15px; line-height: 1.7; margin: 0; }

/* Services hub groups */
.hub-group + .hub-group { margin-top: 80px; }
.group-head { margin: 0 0 36px; max-width: 720px; }
.group-head .eyebrow { margin-bottom: 14px; }
.group-head h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0 0 12px;
}
.group-head h2 em { font-style: normal; color: var(--clay-600); }
.group-head p { color: var(--text-secondary); font-size: 16px; line-height: 1.7; margin: 0; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: stretch; }
.enquiry { display: flex; flex-direction: column; gap: 20px; }
.enquiry .field label {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.enquiry input,
.enquiry textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft);
}
.enquiry input::placeholder,
.enquiry textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.enquiry input:focus,
.enquiry textarea:focus { outline: none; border-color: var(--clay-500); box-shadow: 0 0 0 4px var(--focus-ring); }
.enquiry textarea { min-height: 160px; resize: vertical; }
.info-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.info-list .contact-row { display: flex; align-items: flex-start; gap: 12px; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }
.info-list .contact-row span { display: block; }
.info-list .contact-row b { color: var(--text-primary); }
.info-list .contact-row a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-soft); }
.info-list .contact-row a:hover { color: var(--clay-600); }
.info-list .contact-row i { font-size: 19px; color: var(--clay-500); flex: 0 0 auto; margin-top: 2px; }
.contact-layout > div { display: flex; flex-direction: column; }
.contact-layout .enquiry { flex: 1 1 auto; }
.contact-layout .enquiry .btn,
.contact-layout > div > .btn { margin-top: auto; align-self: stretch; justify-content: center; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 40px; }
.contact-layout .map-embed { height: 100%; }
.contact-layout .map-embed iframe { height: 100%; min-height: 520px; }
.map-embed { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.map-embed iframe {
  display: block; width: 100%; height: 360px; border: 0;
  filter: sepia(0.32) saturate(0.85) hue-rotate(-10deg) brightness(1.03) contrast(0.94);
}
.map-embed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clay-500);
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}

/* Legal / policy pages */
.legal { max-width: 820px; }
.legal .updated {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 36px;
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 48px 0 16px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 21px; color: var(--text-primary); margin: 30px 0 10px; }
.legal p { color: var(--text-secondary); font-size: 16px; line-height: 1.85; margin: 0 0 16px; }
.legal ul { margin: 0 0 20px; padding-left: 22px; }
.legal li { color: var(--text-secondary); font-size: 16px; line-height: 1.8; margin-bottom: 8px; }
.legal a { color: var(--clay-600); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .cols-3 { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Mobile navigation drawer ---------- */
.nav-burger { display: none; }
@media (max-width: 767px) {
  header.nav .wrap { grid-template-columns: auto 1fr auto; gap: 14px; }
  header.nav .wrap > nav,
  header.nav .navlist,
  header.nav .nav-right .text-link,
  header.nav .nav-right .ghost { display: none; }
  header.nav .nav-burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px; height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    margin-left: -8px;
  }
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--duration-base) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft);
}
.mobile-nav { position: fixed; inset: 0; z-index: 120; visibility: hidden; pointer-events: none; }
.mobile-nav.open { visibility: visible; pointer-events: auto; }
.mobile-nav .mn-backdrop { position: absolute; inset: 0; background: rgba(42, 34, 25, 0.46); opacity: 0; transition: opacity var(--duration-slow) var(--ease-soft); }
.mobile-nav.open .mn-backdrop { opacity: 1; }
.mobile-nav .mn-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 380px);
  background: var(--sand-50);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -24px 0 60px rgba(42, 34, 25, 0.18);
  padding: 30px 30px 44px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-soft);
}
.mobile-nav.open .mn-panel { transform: translateX(0); }
.mn-close { align-self: flex-end; position: relative; width: 44px; height: 44px; background: transparent; border: none; margin: -6px -6px 6px; }
.mn-close span { position: absolute; top: 50%; left: 50%; width: 22px; height: 1.5px; background: var(--text-primary); }
.mn-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mn-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.mn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mn-list > li { border-bottom: 1px solid var(--border-subtle); }
.mn-list > li > a {
  display: block;
  padding: 17px 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 26px;
  line-height: 1.1;
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--ease-soft);
}
.mn-list > li > a:hover { color: var(--clay-600); }
.mn-sub { list-style: none; margin: -4px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mn-sub li a {
  display: block;
  padding: 7px 0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-soft);
}
.mn-sub li a:hover { color: var(--clay-600); }
.mn-cta { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.mn-cta .btn { width: 100%; justify-content: center; }
.mn-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mn-cta .mn-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-soft);
}
.mn-cta .mn-phone i { font-size: 18px; color: var(--clay-500); }
.mn-cta .mn-phone:hover { color: var(--clay-600); }
.mn-cta .mn-contact { font-size: 13px; }

/* ===========================================================================
   TEAM — About page "Meet the hands you're in"
   Portrait photo paired with a stacked list of therapist bios. Built entirely
   on design-system tokens (clay/sand palette, Jost display, Mulish body).
   =========================================================================== */
.team-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 64px;
  align-items: start;
}

/* --- Photo ---------------------------------------------------------------- */
.team-photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: var(--shadow-md);
}
.team-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.team-photo figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px 26px 20px;
  background: linear-gradient(to top, rgba(42, 34, 25, 0.68), rgba(42, 34, 25, 0));
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.team-photo figcaption .sep { opacity: 0.55; margin: 0 4px; }

/* --- Bios ----------------------------------------------------------------- */
.team-list { display: grid; gap: 20px; }
.team-member {
  border: 1px solid var(--border-subtle);
  background: var(--surface-page);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 34px;
  transition: box-shadow var(--duration-fast, .18s) var(--ease-soft, ease),
              border-color var(--duration-fast, .18s) var(--ease-soft, ease);
}
.team-member:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-brand);
}
.team-member .who {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.team-member h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0;
}
.team-member .role {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}
.team-member .exp {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.team-member .exp i { font-size: 17px; color: var(--clay-500); }
.team-member .exp .dot-sep { color: var(--border-strong); }
.team-member p:not(.exp) {
  color: var(--text-secondary);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .team-layout { grid-template-columns: 1fr; gap: 40px; }
  .team-photo { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .team-member { padding: 26px 24px; }
  .team-member h3 { font-size: 24px; }
  .team-photo figcaption { padding: 48px 20px 16px; }
}

/* ===========================================================================
   TESTIMONIALS — Homepage "What our clients say"
   Static three-across strip, no carousel. Built on the same card recipe as
   .feature (border-subtle, surface-card, radius-lg, shadow-sm) for visual
   consistency with the About page's "Our approach" cards.
   =========================================================================== */
.testimonials { background: var(--surface-page); }
.testimonial-grid { align-items: stretch; }
.testimonial-card {
  margin: 0;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}
.testimonial-card .stars {
  display: flex;
  gap: 4px;
  color: var(--clay-500);
  margin-bottom: 18px;
}
.testimonial-card .stars i { font-size: 15px; }
.testimonial-card blockquote {
  margin: 0 0 22px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.75;
  flex: 1;
}
.testimonial-card figcaption {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.testimonial-card figcaption .name { font-weight: var(--weight-medium); }
.testimonial-card figcaption .sep { color: var(--border-strong); margin: 0 8px; }
.testimonial-card figcaption .treatment { color: var(--text-muted); }

@media (max-width: 640px) {
  .testimonial-card { padding: 28px 26px; }
}

/* --- Team member quote — a client review attached to a named therapist --- */
.member-quote {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.65;
  font-style: italic;
}
.member-quote .ph-quotes {
  display: block;
  font-size: 18px;
  color: var(--clay-300);
  margin-bottom: 6px;
  font-style: normal;
}
.member-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ===========================================================================
   OFFER LANDING PAGES
   Campaign landing pages under /offers/. Built on the same DS tokens as the
   service pages so an offer page reads as part of the site, not a bolt-on.
   Deliberately narrower than a service page: one message, one CTA.
   =========================================================================== */

/* ---- Offer badge ------------------------------------------------------- */
.offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--clay-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.offer-badge i { font-size: 14px; }

/* ---- Price block in the hero ------------------------------------------- */
.offer-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 34px;
}
.offer-price .now {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  color: var(--clay-600);
  letter-spacing: var(--tracking-display);
}
.offer-price .was {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--text-muted);
}
/* The strike sits on the <s> around the number only, so the word "was"
   stays readable and the block still makes sense with CSS disabled. */
.offer-price .was s { text-decoration: line-through; }
.offer-price .save {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-600);
  border: 1px solid var(--clay-300);
  border-radius: 999px;
  padding: 6px 14px;
}

/* ---- Inclusions list ---------------------------------------------------- */
.offer-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.offer-includes li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.offer-includes .ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--sand-100);
  border: 1px solid var(--border-subtle);
  color: var(--clay-600);
  font-size: 15px;
}
.offer-includes b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ---- Numbered steps (first appointment / how it works) ------------------ */
.offer-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
  counter-reset: step;
}
.offer-steps li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  align-items: start;
  counter-increment: step;
}
.offer-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 20px;
  line-height: 52px;
  text-align: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--clay-300);
  color: var(--clay-600);
}
.offer-steps h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 20px;
  margin: 12px 0 8px;
  color: var(--text-primary);
}
.offer-steps p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 15.5px;
}

/* ---- Offer fine print --------------------------------------------------- */
.offer-terms {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 32px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.offer-terms h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.offer-terms ul { margin: 0; padding-left: 18px; }
.offer-terms li {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 6px;
}

/* ---- Single-quote social proof block ------------------------------------ */
.offer-proof {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.offer-proof .stars {
  display: flex;
  justify-content: center;
  gap: 5px;
  color: var(--clay-500);
  margin-bottom: 22px;
}
.offer-proof blockquote {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--text-primary);
}
.offer-proof cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .offer-steps li { grid-template-columns: 1fr; gap: 10px; }
  .offer-steps li::before { line-height: 44px; width: 44px; height: 44px; }
  .offer-terms { padding: 24px 20px; }
}