/* =============================================================
   PROJECT BASE  (per-project system starter - copy per project, then
   make it unique). Pure custom, variable-driven, no framework.

   THE SYSTEM is reused across projects (class names, structure, the
   variable surface). THE DESIGN is unique per project: change the
   variable VALUES below and every button, card, color, and rhythm
   changes with them. Same vocabulary, different-looking site.

   Three layers:
     1. TOKENS      (:root)             <- edit per project (this is the design)
     2. PREDEFINED  (@layer base / components)  <- shared vocabulary, reads tokens
     3. UTILITIES   (@layer utilities)  <- small modifiers layered on top

   Layer order below = UTILITIES beat PREDEFINED beat BASE. No !important.

   FILE MAP
     1.  Tokens (:root)                      - the design
     2a. Base (@layer base)                  - reset + elements
     2b. Predefined (@layer components)      - shared vocabulary
     3.  Utilities (@layer utilities)        - modifiers
     4.  Quality floor                       - reduced motion
     5.  Project layer (@layer components)   - Healing Point blocks
     6.  Project skin (unlayered)            - final palette decisions
     7.  Site patterns (unlayered)           - mobile carousel, mobile
                                               image/text order, button
                                               polish, label-only tabs
   All page-level styling lives here; the HTML carries no inline CSS.
   ============================================================= */

@layer base, components, utilities;

/* =============================================================
   1. TOKENS - THE DESIGN  (edit every value per project)
   Placeholder values below are only a demo. Set them from the logo,
   colors, and reference. Make each project look like nobody else's.
   ============================================================= */
:root {
  color-scheme: light;   /* opt out of browser auto-dark inversion */
  /* ---- BRAND COLORS ----
     Set the three base colors. The ramps auto-derive with relative
     color syntax (oklch) - this is the "automatic color relationships"
     idea, native. Set one color, get its tints/shades/hover. */
  --primary: #9e4a68;   /* plum */
  --accent:  #b14f2c;   /* terracotta (CTA) */

  --primary-hover:       oklch(from var(--primary) calc(l - 0.06) c h);
  --primary-light:       oklch(from var(--primary) calc(l + 0.18) calc(c * 0.85) h);
  --primary-ultra-light: oklch(from var(--primary) calc(l + 0.36) calc(c * 0.45) h);
  --primary-dark:        oklch(from var(--primary) calc(l - 0.16) c h);
  --primary-ultra-dark:  oklch(from var(--primary) calc(l - 0.30) c h);
  --primary-contrast:    #ffffff;   /* readable text on --primary */
  --primary-deep:        #3a2633;   /* aubergine for headings/link ink */

  --accent-hover:        oklch(from var(--accent) calc(l - 0.06) c h);
  --accent-light:        oklch(from var(--accent) calc(l + 0.18) calc(c * 0.85) h);
  --accent-ultra-light:  oklch(from var(--accent) calc(l + 0.36) calc(c * 0.45) h);
  --accent-dark:         oklch(from var(--accent) calc(l - 0.16) c h);
  --accent-contrast:     #ffffff;

  /* ---- NEUTRALS / SURFACES (explicit for full control) ---- */
  --bg:         #fffcfd;   /* bright rose-white page background */
  --surface:    #f8e4ea;   /* blush section background */
  --surface-2:  #f8e4ea;   /* blush for chips/tints */
  --dark:       #3a2633;   /* aubergine dark sections */
  --footer-bg:  #3a2633;   /* aubergine footer */
  --text:       #6a5563;   /* mauve slate body text */
  --text-heading: #3a2633; /* aubergine headings */
  --text-muted: #6a5563;   /* mauve slate secondary text */
  --text-soft:  #6a5563;   /* mauve slate subtext */
  --text-light: #fdfbf7;   /* bright ivory text on dark */
  --border-color: rgba(58,38,51,0.12);
  --border-soft: rgba(58,38,51,0.14);

  /* ---- TYPE ---- */
  --font-display: "Lora", Georgia, serif;
  --font-body:    "Source Sans 3", system-ui, sans-serif;

  --heading-weight: 500;
  --heading-line-height: 1.08;
  --heading-letter-spacing: -0.01em;
  --heading-text-wrap: balance;

  --h1: clamp(3.25rem, 8.4vw, 7.25rem);
  --h2: clamp(2rem, 2.2vw + 1.1rem, 2.75rem);
  --h3: clamp(1.6rem, 2vw + 1rem, 2.25rem);
  --h4: clamp(1.3rem, 1vw + 1rem, 1.6rem);
  --h5: clamp(1.1rem, 0.5vw + 1rem, 1.25rem);
  --h6: 1rem;
  --text-lead: clamp(1.15rem, 0.5vw + 1rem, 1.4rem);
  --text-small: 0.875rem;

  /* ---- FLUID SPACING SCALE (one source for gaps/padding/rhythm) ---- */
  --space-2xs: clamp(0.375rem, 0.3rem + 0.3vw, 0.5rem);
  --space-xs:  clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-s:   clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  --space-m:   clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-l:   clamp(2rem, 1.6rem + 1.8vw, 3.5rem);
  --space-xl:  clamp(3rem, 2.4rem + 3vw, 5.5rem);
  --space-2xl: clamp(4.5rem, 3.5rem + 4vw, 8rem);

  /* ---- LAYOUT ---- */
  --section-space: var(--space-xl);
  --content-width: 1120px;
  --content-narrow: 720px;
  --content-wide: 1320px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---- RADIUS (drives the whole shape language of the site) ---- */
  --radius-s: 9px;
  --radius-m: 12px;
  --radius-l: 20px;

  /* ---- BORDERS ---- */
  --border-width: 1px;
  --border-style: solid;

  /* ---- SHADOWS (a big lever for a site's character) ---- */
  --shadow-s: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-m: 0 6px 20px rgb(0 0 0 / 0.08);
  --shadow-l: 0 18px 50px rgb(0 0 0 / 0.12);

  --transition: 200ms ease;

  /* ---- BUTTON SURFACE (deep, so button style is fully per-project) ---- */
  --btn-padding-block: 0.95rem;
  --btn-padding-inline: 1.75rem;
  --btn-radius: 12px;           /* soft-squared, matching the brand buttons */
  --btn-border-width: 1px;
  --btn-font-size: 1rem;
  --btn-font-weight: 600;
  --btn-transition: var(--transition);

  --btn-primary-bg: var(--accent);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-text: var(--accent-contrast);

  --btn-secondary-bg: var(--accent);
  --btn-secondary-bg-hover: var(--accent-hover);
  --btn-secondary-text: var(--accent-contrast);

  /* ---- CARD SURFACE (deep, so card construction is per-project) ---- */
  --card-bg: #ffffff;
  --card-padding: clamp(1.75rem, 3vw, 2.25rem);
  --card-radius: var(--radius-l);
  --card-border: var(--border-width) var(--border-style) var(--border-color);
  --card-shadow: none;          /* flat cards */

  /* ---- HEADING ELEMENT/CLASS shared props ---- */
  --heading-font-family: var(--font-display);

  /* ---- LINKS ---- */
  --link-color: var(--primary);
  --link-decoration: none;
  --link-underline-offset: 0.15em;

  /* ---- ICONS ---- */
  --icon-size-s: 1rem;
  --icon-size-m: 1.5rem;
  --icon-size-l: 2.25rem;
  --icon-stroke: 2;             /* stroke width for line-style SVG icons */

  /* ---- DARK RELATIONSHIPS ----
     Values a container switches to when it opts into a dark context
     (.bg--dark / .theme--dark). Everything inside auto-adapts. */
  --dark-surface:     oklch(from var(--dark) calc(l + 0.06) c h);
  --dark-surface-2:   oklch(from var(--dark) calc(l + 0.12) c h);
  --dark-text:        var(--text-light);
  --dark-text-muted:  #a6adad;
  --dark-border:      rgb(255 255 255 / 0.14);
  --dark-link:        var(--primary-light);

  /* ---- BREADCRUMB ---- */
  --breadcrumb-sep: "/";        /* set to a chevron etc per project */

  /* ---- PROJECT PALETTE (named steps used by the project layer) ---- */
  --blush:        #f8e4ea;   /* section bands, chips, tints */
  --rose:         #be6c86;   /* light plum step */
  --plum:         #9e4a68;   /* primary accent: icons, active states */
  --aubergine:    #3a2633;   /* ink, dark bands, footer */
  --marigold:     #e8a33a;   /* numerals, heading rule, CTAs on dark */
  --marigold-ink: #3d2606;
  --marigold-hov: #d5911f;
  --terracotta:   #b14f2c;   /* buttons only */
  --shadow-ink:   rgba(58,38,51,0.08);
  --hairline:     rgba(58,38,51,0.12);

  /* ---- SYSTEM KNOBS ---- */
  --grid-gap: var(--space-m);
  --grid-min: 16rem;
  --flow-space: var(--space-m);   /* auto vertical rhythm for .flow */
}

/* =============================================================
   2a. BASE  - reset + element defaults (low precedence)
   ============================================================= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

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

  body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, figcaption, li { max-width: 68ch; }

  /* Headings: element AND class targeting decouples visual size from
     semantic level. <h2 class="h--4"> stays an h2, renders at h4 size. */
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6,
  .h--1, .h--2, .h--3, .h--4, .h--5, .h--6 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
    text-wrap: var(--heading-text-wrap);
  }
  h1, .h1, .h--1 { font-size: var(--h1); }
  h2, .h2, .h--2 { font-size: var(--h2); }
  h3, .h3, .h--3 { font-size: var(--h3); }
  h4, .h4, .h--4 { font-size: var(--h4); }
  h5, .h5, .h--5 { font-size: var(--h5); }
  h6, .h6, .h--6 { font-size: var(--h6); }

  a:where(:not([class*="btn"])) {
    color: var(--link-color);
    text-decoration: var(--link-decoration);
    text-underline-offset: var(--link-underline-offset);
    transition: color var(--transition);
  }
  a:where(:not([class*="btn"])):hover { color: var(--primary-hover); }

  :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
}

/* =============================================================
   2b. PREDEFINED CLASSES - the shared vocabulary (use these first)
   ============================================================= */
@layer components {

  /* ---------- LAYOUT ---------- */
  .content-width        { width: min(100% - (var(--gutter) * 2), var(--content-width));  margin-inline: auto; }
  .content-width--narrow{ width: min(100% - (var(--gutter) * 2), var(--content-narrow)); margin-inline: auto; }
  .content-width--wide  { width: min(100% - (var(--gutter) * 2), var(--content-wide));   margin-inline: auto; }

  .section { padding-block: var(--section-space); }
  .section--sm { padding-block: calc(var(--section-space) * 0.6); }
  .section--lg { padding-block: calc(var(--section-space) * 1.5); }

  /* ---------- AUTO SPACING (contextual "flow" rhythm) ----------
     Adds consistent vertical space between stacked children. */
  .flow > * + * { margin-block-start: var(--flow-space); }
  .flow--tight { --flow-space: var(--space-s); }
  .flow--loose { --flow-space: var(--space-l); }

  /* ---------- AUTO GRIDS (content-responsive, no breakpoints) ---------- */
  .grid--auto-2, .grid--auto-3, .grid--auto-4, .grid--auto-5, .grid--auto-6 {
    display: grid; gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
  }
  .grid--auto-2 { --grid-min: 26rem; }
  .grid--auto-3 { --grid-min: 19rem; }
  .grid--auto-4 { --grid-min: 15rem; }
  .grid--auto-5 { --grid-min: 12rem; }
  .grid--auto-6 { --grid-min: 10rem; }

  /* ---------- FIXED + RATIO GRIDS ---------- */
  .grid--2, .grid--3, .grid--4 { display: grid; gap: var(--grid-gap); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--1-2 { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr 2fr; }
  .grid--2-1 { display: grid; gap: var(--grid-gap); grid-template-columns: 2fr 1fr; }
  @media (max-width: 720px) {
    .grid--2, .grid--3, .grid--4, .grid--1-2, .grid--2-1 { grid-template-columns: 1fr; }
  }

  /* ---------- BUTTONS (fully variable-driven) ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    border-radius: var(--btn-radius);
    border: var(--btn-border-width) solid transparent;
    font-family: var(--font-body); font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight); line-height: 1;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--btn-transition), color var(--btn-transition), border-color var(--btn-transition);
  }
  .btn--primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
  .btn--primary:hover { background-color: var(--btn-primary-bg-hover); }
  .btn--secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
  .btn--secondary:hover { background-color: var(--btn-secondary-bg-hover); }
  .btn--outline { background-color: transparent; border-color: var(--primary); color: var(--primary); }
  .btn--outline:hover { background-color: var(--primary); color: var(--primary-contrast); }

  /* ---------- CARDS (fully variable-driven) ---------- */
  .card {
    background-color: var(--card-bg);
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
  }
  .card--dark { --card-bg: var(--dark); color: var(--text-light); --card-border: 0; }

  /* ---------- BACKGROUNDS / TEXT ---------- */
  .bg--primary       { background-color: var(--primary); color: var(--primary-contrast); }
  .bg--primary-light { background-color: var(--primary-ultra-light); color: var(--text); }
  .bg--accent        { background-color: var(--accent); color: var(--accent-contrast); }
  .bg--surface       { background-color: var(--surface); color: var(--text); }
  .bg--surface-2     { background-color: var(--surface-2); color: var(--text); }
  /* Dark relationships: opting a container into dark context re-scopes the
     tokens locally, so every card, text, border, and link inside adapts
     automatically - the ACSS "dark relationships" idea, native. */
  .bg--dark, .theme--dark {
    --bg: var(--dark);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --text: var(--dark-text);
    --text-muted: var(--dark-text-muted);
    --border-color: var(--dark-border);
    --card-bg: var(--dark-surface);
    --card-border: var(--border-width) var(--border-style) var(--dark-border);
    --link-color: var(--dark-link);
    background-color: var(--bg);
    color: var(--text);
  }

  .text--primary { color: var(--primary); }
  .text--accent  { color: var(--accent); }
  .text--muted   { color: var(--text-muted); }
  .text--lead    { font-size: var(--text-lead); color: var(--text-muted); }

  /* ---------- BORDERS ---------- */
  .border    { border: var(--border-width) var(--border-style) var(--border-color); }
  .border-t  { border-top: var(--border-width) var(--border-style) var(--border-color); }
  .border-b  { border-bottom: var(--border-width) var(--border-style) var(--border-color); }
  .rounded   { border-radius: var(--radius-m); }
  .rounded-l { border-radius: var(--radius-l); }

  /* ---------- ICONS (inline SVG, currentColor) ---------- */
  .icon {
    display: inline-block;
    inline-size: var(--icon-size, var(--icon-size-m));
    block-size: var(--icon-size, var(--icon-size-m));
    flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: var(--icon-stroke);
    stroke-linecap: round; stroke-linejoin: round;
    vertical-align: middle;
  }
  .icon--s { --icon-size: var(--icon-size-s); }
  .icon--l { --icon-size: var(--icon-size-l); }
  .icon--fill { fill: currentColor; stroke: none; }   /* for solid icons */

  /* Icon-only button (meets 44px touch target). Needs an aria-label. */
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2.75rem; block-size: 2.75rem;
    border: 0; border-radius: var(--radius-s);
    background: transparent; color: inherit; cursor: pointer;
    transition: background-color var(--transition);
  }
  .icon-btn:hover { background: var(--surface-2); }

  /* Icon in a tinted container (feature icons, etc.) */
  .icon-box {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 3rem; block-size: 3rem;
    border-radius: var(--radius-m);
    background: var(--primary-ultra-light); color: var(--primary);
  }

  /* ---------- BREADCRUMB ---------- */
  .breadcrumb__list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2xs); list-style: none; font-size: var(--text-small);
  }
  .breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--text-muted); }
  .breadcrumb__item + .breadcrumb__item::before {
    content: var(--breadcrumb-sep); color: var(--text-muted); margin-inline-end: var(--space-2xs);
  }
  .breadcrumb__item[aria-current="page"] { color: var(--text); font-weight: 600; }

  /* ---------- TABS ---------- */
  .tabs__list {
    display: flex; flex-wrap: wrap; gap: var(--space-xs);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
  }
  .tabs__tab {
    padding: 0.75rem 1.1rem; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    color: var(--text-muted); font-weight: 600; cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
  }
  .tabs__tab:hover { color: var(--text); }
  .tabs__tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
  .tabs__panel { padding-block-start: var(--space-m); }
  .tabs__panel[hidden] { display: none; }

  /* ---------- MODAL ---------- */
  .modal {
    position: fixed; inset: 0; z-index: 500;
    display: none; align-items: center; justify-content: center;
    padding: var(--space-m);
  }
  .modal.is-open { display: flex; }
  .modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); }
  .modal__dialog {
    position: relative; z-index: 1;
    inline-size: 100%; max-inline-size: 32rem; max-block-size: 90vh; overflow: auto;
    background: var(--bg); color: var(--text);
    border-radius: var(--radius-l); box-shadow: var(--shadow-l);
    padding: clamp(1.5rem, 4vw, 2.5rem);
  }
  .modal__close { position: absolute; inset-block-start: var(--space-s); inset-inline-end: var(--space-s); }

  /* ---------- FORMS ---------- */
  .field { display: flex; flex-direction: column; gap: var(--space-2xs); }
  .label { font-weight: 600; font-size: var(--text-small); }
  .input, .textarea, .select {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-s);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ultra-light);
  }
  .textarea { min-height: 8rem; resize: vertical; }
  .field--error .input,
  .field--error .textarea,
  .field--error .select { border-color: #c0392b; }
  .field__error { color: #c0392b; font-size: var(--text-small); }
  .field__help  { color: var(--text-muted); font-size: var(--text-small); }

  /* ---------- NAV / FOOTER STRUCTURE (behavior hooks; look is per-project) ----
     Minimal structure only. Design the visual style per project. JS drives
     the open/close and accordion state via these classes + data-attributes. */
  .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--bg); }
  .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); }
  .nav__list { display: flex; gap: var(--space-m); list-style: none; }
  .nav__toggle { display: none; }   /* shown on mobile via utility/query per project */

  .footer__col > .footer__title { cursor: default; }
  /* Mobile: footer columns collapse into accordions (see .is-open in JS). */
  @media (max-width: 720px) {
    .footer__col > .footer__title { cursor: pointer; }
    .footer__col .footer__panel { display: none; }
    .footer__col.is-open .footer__panel { display: block; }
  }
}

/* =============================================================
   3. UTILITIES - small modifiers, highest precedence (token-driven)
   ============================================================= */
@layer utilities {
  /* Flex primitives */
  .flex    { display: flex; gap: var(--gap, var(--space-m)); }
  .stack   { display: flex; flex-direction: column; gap: var(--gap, var(--space-m)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-s)); }
  .flex--center  { align-items: center; justify-content: center; }
  .flex--between { align-items: center; justify-content: space-between; }
  .flex--wrap    { flex-wrap: wrap; }

  .gap--xs { --gap: var(--space-xs); }
  .gap--s  { --gap: var(--space-s); }
  .gap--m  { --gap: var(--space-m); }
  .gap--l  { --gap: var(--space-l); }

  /* Grid modifiers - customize a predefined grid with no new CSS */
  .grid--gap-s  { --grid-gap: var(--space-s); }
  .grid--gap-l  { --grid-gap: var(--space-l); }
  .grid--gap-xl { --grid-gap: var(--space-xl); }
  .grid--min-s  { --grid-min: 12rem; }
  .grid--min-l  { --grid-min: 22rem; }

  /* Spacing */
  .pad--s { padding: var(--space-s); }
  .pad--m { padding: var(--space-m); }
  .pad--l { padding: var(--space-l); }
  .mt--m  { margin-block-start: var(--space-m); }
  .mt--l  { margin-block-start: var(--space-l); }

  /* Text */
  .text--center { text-align: center; }
  .text--left   { text-align: left; }
  .text--right  { text-align: right; }
  .max-w-none   { max-width: none; }

  /* Accessibility helpers */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; left: var(--space-s); top: -100%;
    background: var(--primary); color: var(--primary-contrast);
    padding: 0.6rem 1rem; border-radius: var(--radius-s); z-index: 999;
    transition: top var(--transition);
  }
  .skip-link:focus-visible { top: var(--space-s); }
}

/* =============================================================
   4. QUALITY FLOOR
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   HOW TO MAKE EACH PROJECT UNIQUE
   The class names stay the same across projects. To make THIS project
   look like nobody else's, change the TOKEN VALUES in Region 1:
     - a distinct --primary / --accent (ramps auto-derive)
     - a different --btn-radius / --btn-border-width (pill vs squared)
     - --card-shadow / --card-border / --card-bg (flat vs shadowed cards)
     - --font-display / --font-body pairing
     - --radius-* shape language and --space-* rhythm
     - one signature element built as a project-specific class
   Add project-only classes freely; keep them token-driven.
   ============================================================= */

/* =============================================================
   5. PROJECT LAYER - Healing Point Wellness Clinic
   Signature: editorial serif hero with ghost lotus, credential rail,
   and a live conditions marquee. Values reference the tokens above.
   ============================================================= */

@keyframes hpFloat   { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(2deg); } }
@keyframes hpMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hpRise    { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* If JS never runs, don't leave content hidden. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
/* Guarantee the page canvas is the cream background (beats layer battles + dark-mode canvas). */
html { background-color: var(--bg); }

@layer components {

  :where(h1, h2, h3, h4, h5, h6) { color: var(--text-heading); }

  .eyebrow { font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); font-weight: 600; max-width: none; }
  .kicker  { font-size: 1.125rem; line-height: 1.6; color: var(--text-soft); }
  .kicker--italic { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.1875rem; }
  .lead-body { font-size: 1.03rem; line-height: 1.7; color: var(--text-muted); }
  .content-width--hero { width: min(100% - (var(--gutter) * 2), 1240px); margin-inline: auto; }

  .arrow-link {
    display: inline-block; align-self: flex-start; color: var(--primary-deep); font-weight: 600; font-size: 0.875rem;
    padding-bottom: 4px; text-decoration: none; white-space: nowrap;
    background-image: linear-gradient(var(--primary), var(--primary));
    background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px;
    transition: background-size .32s cubic-bezier(.22,.61,.36,1), color .2s ease;
  }
  .arrow-link:hover { color: var(--primary); background-size: 100% 1.5px; }
  .arrow-link svg, .menu-foot svg { display: inline; vertical-align: -2px; margin-left: 3px; }

  /* colours for these live in region 6.3 - structure only here */
  .btn--call { gap: 10px; }
  .btn--call svg { flex: none; }
  .btn--sm { padding: 0.7rem 1.25rem; font-size: 0.9rem; border-radius: 11px; }
  .btn--elevated { transition: background-color var(--btn-transition), transform var(--btn-transition), box-shadow var(--btn-transition); }
  .btn--elevated:hover { transform: translateY(-2px); }

  .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 22px; }
  .ring-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; }
  .ring-icon--sm { width: 40px; height: 40px; }

  .site-header { border-bottom: 1px solid var(--hairline); }
  .site-header__inner { display: flex; align-items: center; gap: 1.75rem; height: 76px; }
  .site-header__logo { flex: none; display: flex; align-items: center; }
  .site-header__logo img { height: 60px; width: auto; }

  .primary-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
  .primary-nav > a, .nav-btn {
    display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
    font: 500 15px var(--font-body); color: var(--text); padding: 9px 14px; border-radius: 9px;
    background: none; border: 0; cursor: pointer; transition: background .18s ease;
  }
  .primary-nav > a:hover, .nav-btn:hover { background: var(--blush); color: var(--text); }
  .chev { display: inline-flex; align-items: center; color: var(--primary); transition: transform .25s ease; }

  .dropdown { position: relative; }
  .dropdown.is-open .nav-btn .chev { transform: rotate(180deg); }
  .dropdown__menu {
    position: absolute; top: 100%; left: 0; padding-top: 12px; z-index: 120;
    transform: translateY(8px); opacity: 0; visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .dropdown.is-open .dropdown__menu,
  .dropdown:hover .dropdown__menu,
  .dropdown:focus-within .dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .dropdown:hover .nav-btn .chev, .dropdown:focus-within .nav-btn .chev { transform: rotate(180deg); }
  .dropdown__panel { background: #fff; border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(46,46,51,.35); padding: 12px; min-width: 340px; }
  .dropdown__panel--wide { min-width: 560px; padding: 20px 22px; }
  .menu-link { display: block; padding: 11px 14px; border-radius: 10px; color: var(--text); text-decoration: none; transition: background .18s ease; }
  .menu-link:hover { background: var(--blush); }
  .menu-link__sub { display: block; font-size: 12.5px; color: var(--text); font-weight: 400; margin-top: 2px; }
  .menu-star { color: var(--primary); font-size: 12px; margin-left: 6px; }
  .menu-foot { display: block; margin-top: 8px; padding: 12px 14px; border-top: 1px solid #e6ebe0; color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .18s ease; }
  .menu-foot:hover { background: var(--blush); }
  .cond-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .cond-group__title { font: 600 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
  .cond-link { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; transition: background .18s ease, color .18s ease; }
  .cond-link:hover { background: var(--blush); color: var(--primary-deep); }

  .header-cta { flex: none; display: flex; align-items: center; gap: 18px; }
  .header-phone { display: flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; font-size: 14.5px; white-space: nowrap; text-decoration: none; }
  .header-phone .phone-ico { color: var(--primary); }

  .nav-toggle { display: none; margin-left: auto; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(255,255,255,.55); cursor: pointer; color: var(--primary-deep); }

  .mobile-nav { position: fixed; inset: 0; z-index: 300; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 22px; overflow-y: auto; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease, visibility .3s; }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
  .mobile-nav__head img { height: 56px; width: auto; }
  .mnav-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font: 600 21px var(--font-body); color: var(--text-heading); padding: 15px 4px; border-bottom: 1px solid var(--hairline); }
  .mnav-details > summary::-webkit-details-marker { display: none; }
  .mnav-details[open] .chev { transform: rotate(180deg); }
  .mnav-sub { display: flex; flex-direction: column; padding: 4px 0 14px; }
  .mnav-sub a { font: 500 16px var(--font-body); color: var(--text-muted); text-decoration: none; padding: 9px 4px 9px 18px; border-radius: 9px; }
  .mnav-sub a:active { background: var(--surface-2); }
  .mnav-cap { font: 600 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin: 12px 0 2px 18px; }
  .mnav-link { font: 600 21px var(--font-body); color: var(--text-heading); text-decoration: none; padding: 15px 4px; border-bottom: 1px solid var(--hairline); display: block; }
  .mobile-nav__foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
  .mobile-nav__foot .header-phone { justify-content: center; padding: 15px; border: 1px solid var(--border-soft); border-radius: 13px; font-size: 16px; }

  .hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 64vh; }
  .hero__bg { position: absolute; inset: 0; background: url('assets/hero.jpg') center 30% / cover no-repeat; z-index: 0; }
  .hero__scrim { position: absolute; inset: 0; z-index: 1; }   /* gradient in 6.2 */
  .hero__lotus { position: absolute; top: -4%; right: 1%; width: min(46vw, 560px); opacity: 0.1; filter: saturate(1.3); animation: hpFloat 13s ease-in-out infinite; pointer-events: none; z-index: 2; }
  .hero__rail { position: absolute; left: 26px; bottom: 150px; transform: rotate(180deg); writing-mode: vertical-rl; font: 600 11px var(--font-body); letter-spacing: 0.34em; text-transform: uppercase; color: var(--primary-deep); z-index: 3; }
  .hero__inner { position: relative; z-index: 4; padding-block: 150px; }
  .hero__content { max-width: 820px; }
  .hero__eyebrow { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 34px; }
  .seo-h1, .seo-h2 { margin-top: 0; font-weight: inherit; }
  .seo-h1 { margin-bottom: 34px; }
  .hero__eyebrow .rule { width: 38px; height: 1.5px; background: var(--primary); flex: none; }
  .hero__eyebrow .label { font-size: 14px; font-weight: 600; letter-spacing: 0.03em; color: var(--primary-deep); }
  .hero__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.14; text-wrap: balance; letter-spacing: -0.015em; margin: 0; color: var(--text-heading); }
  .hero__title .place { display: block; font-style: italic; font-weight: 400; color: var(--primary-deep); }
  .hero__title .word { display: block; }
  .hero__lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; max-width: 520px; margin: 34px 0 40px; }
  .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  .phone-inline { display: inline-flex; align-items: center; gap: 10px; color: var(--text-heading); font-weight: 600; font-size: 16px; text-decoration: none; }

  .rise { opacity: 0; animation: hpRise .9s cubic-bezier(.22,.61,.36,1) forwards; }
  .d1 { animation-delay: .05s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .22s; }
  .d4 { animation-delay: .42s; } .d5 { animation-delay: .52s; }

  .marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; border-top: 1px solid var(--hairline); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; padding: 15px 0; }
  .marquee__track { display: flex; width: max-content; animation: hpMarquee 34s linear infinite; white-space: nowrap; }
  .marquee__item { display: inline-flex; align-items: center; font: 500 13.5px var(--font-body); padding: 0 26px; }
  .marquee__item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; margin-right: 26px; }

  .what-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 52px; margin-top: 48px; align-items: start; }
  .tabs__list--vertical { flex-direction: column; gap: 6px; border-bottom: 0; }
  .tab-card { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text); padding: 15px 20px; border-radius: 14px; margin-bottom: 0; font-family: var(--font-body); transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .tab-card:hover { color: var(--text-heading); }
  .tab-card[aria-selected="true"] { border-color: var(--border-soft); background: var(--surface-2); color: var(--text-heading); }
  .tab-card .num { font-family: var(--font-display); font-size: 20px; min-width: 26px; }
  .tab-card .ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
  .tab-card .label { font-weight: 600; font-size: 16px; }
  .what-panel { border: 1px solid var(--border-color); border-radius: 20px; padding: 44px 42px; min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
  .what-panel__num { font-family: var(--font-display); font-size: 44px; line-height: 1; margin-bottom: 18px; }
  .what-panel__ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; margin-bottom: 20px; }
  .what-panel p { font-size: 18px; line-height: 1.7; color: var(--text); margin: 0; max-width: none; }
  .what-panel__link { margin-top: 22px; }
  .what-panel--media { display: grid; grid-template-columns: 1fr .8fr; gap: 34px; align-items: center; }
  .what-panel--media .what-panel__body { display: flex; flex-direction: column; }
  .what-panel--media .placeholder { border-radius: 16px; }
  .what-panel[hidden], .map-card[hidden] { display: none; }

  .cond-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
  .cond-card { display: flex; flex-direction: column; }
  .cond-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 27px; margin: 0 0 12px; color: var(--dark); }
  .cond-card p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0 0 22px; flex: 1; max-width: none; }
  .cond-card__links { display: flex; flex-direction: column; gap: 9px; }

  .feature-split { display: grid; gap: 56px; align-items: center; }
  .feature-split--a { grid-template-columns: .9fr 1.1fr; }
  .feature-split--b { grid-template-columns: .85fr 1.15fr; }
  .placeholder { overflow: hidden; background: repeating-linear-gradient(135deg, #e6ebe0, #e6ebe0 12px, #d3ddd2 12px, #d3ddd2 24px); border: 1px solid var(--border-soft); border-radius: 24px; display: flex; align-items: center; justify-content: center; }
  .placeholder--5-4 { aspect-ratio: 5 / 4; }
  .placeholder--16-9 { aspect-ratio: 16 / 9; }
  .media-banner { margin-top: 38px; }
  .placeholder--3-4 { aspect-ratio: 3 / 4; }
  .placeholder__tag { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--primary-deep); background: rgba(255,255,255,.75); padding: 6px 12px; border-radius: 6px; }
  .pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 20px; }
  .pill { padding: 9px 16px; background: var(--surface-2); border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--primary-deep); }

  .section--dark { background: var(--dark); color: var(--text-light); }

  .technique-head p { font-size: 18px; line-height: 1.6; margin: 16px 0 0; }
  .technique-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; margin-top: 48px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; }
  .technique { background: var(--dark); padding: 34px 28px; min-height: 220px; display: flex; flex-direction: column; }
  .technique__num { font-family: var(--font-display); font-size: 34px; line-height: 1; margin-bottom: auto; }
  .technique h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: 24px 0 10px; }
  .technique p { font-size: 14px; line-height: 1.6; margin: 0; max-width: none; }

  .cost-card { background: #fff; border: 1px solid var(--border-color); border-radius: 22px; padding: 52px 48px; }
  .cost-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: start; }
  .cost-grid > * { min-width: 0; }
  .cost-call { display: flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--text-muted); font-size: 14.5px; }
  .cost-accordion { display: flex; flex-direction: column; gap: 14px; }
  #cost .cost-accordion { margin-top: 32px; }

  /* ---- Segmented switch + panel (cost/insurance, reusable) ---- */
  .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--border-color); border-radius: 999px; margin: 30px 0 26px; }
  .seg__btn { appearance: none; border: 0; cursor: pointer; font: 600 15px var(--font-body); color: var(--text-muted); background: transparent; padding: 11px 24px; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
  .seg__btn:hover { color: var(--primary); }

  .cost-panel { display: flex; gap: 22px; align-items: flex-start; background: #fff; border: 1px solid var(--border-color); border-radius: 20px; padding: 34px 34px; }
  .cost-panel[hidden] { display: none; }
  .cost-panel > div { min-width: 0; }
  .cost-panel__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--primary); }
  .cost-panel p { font-size: 17.5px; line-height: 1.7; color: var(--text); margin: 0; max-width: none; }
  .cost-panel__link { margin-top: 18px; }

  /* ---- Safety split (safe-when + urgent signs, reusable) ---- */
  .safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0; }
  .safety-card { background: #fff; border: 1px solid var(--border-color); border-radius: 20px; padding: 30px 30px; }
  .safety-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
  .safety-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--primary); }
  .safety-card__head h3 { font: 600 17px var(--font-body); margin: 0; color: var(--text-heading); }
  .safety-card p { font-size: 16px; line-height: 1.68; color: var(--text); margin: 0; max-width: none; }
  .safety-card--alert { border-color: var(--accent); border-left-width: 1px; }
  .safety-card--alert .safety-card__icon { background: var(--accent); color: var(--accent-contrast); }
  .safety-card--alert .safety-card__head h3 { color: var(--accent); }
  .safety-lead { margin: 18px 0 10px; font: 600 12px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
  .safety-signs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .safety-signs li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
  .safety-signs li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--accent); }

  /* ---- Media tabs (image + underlined tab strip, reusable) ---- */
  .mtabs { display: grid; grid-template-columns: .95fr 1.05fr; gap: 46px; align-items: center; margin-top: 42px; }
  .mtabs__strip { display: flex; gap: 26px; border-bottom: 1px solid var(--border-color); margin-bottom: 26px; }
  .mtabs__tab { appearance: none; background: none; border: 0; padding: 0 0 14px; margin-bottom: -1px; cursor: pointer; font: 600 15px var(--font-body); color: var(--text-muted); border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; }
  .mtabs__tab:hover { color: var(--primary); }
  .mtabs__tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
  .mtabs__panel { font-size: 17.5px; line-height: 1.72; color: var(--text); max-width: none; margin: 0; }
  .mtabs__panel[hidden] { display: none; }

  .faq { background: #fff; border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; }
  .faq > summary { list-style: none; cursor: pointer; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 600 18px var(--font-body); color: var(--dark); }
  .faq > summary::-webkit-details-marker { display: none; }
  .faq__plus { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 400; transition: transform .28s ease, background .28s ease, color .28s ease; }
  .faq[open] .faq__plus { transform: rotate(45deg); }
  .faq__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
  .faq[open] .faq__wrap { grid-template-rows: 1fr; }
  .faq__inner { overflow: hidden; }
  .faq__inner p { margin: 0; padding: 0 28px 26px; font-size: 15.5px; line-height: 1.65; color: var(--text-muted); max-width: none; }
  .faq--cost > summary { gap: 16px; }
  .faq__summary-left { display: inline-flex; align-items: center; gap: 16px; }
  .faq__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: background .25s ease, color .25s ease; }
  .faq--cost .faq__inner p { padding: 0 28px 26px 84px; line-height: 1.7; }
  .faq__link { margin: 0 28px 26px 84px; }
  .faq-head { text-align: center; }
  .faq-head h2 { color: var(--dark); }
  .section--dark .faq-head h2 { color: var(--text-light); }

  .faq-list { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }


  .location-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
  .area-label { font: 600 11px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); margin: 30px 0 12px; }
  .chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
  .chip-tab { cursor: pointer; border: 1px solid transparent; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; font-family: var(--font-body); transition: background .2s ease, color .2s ease, border-color .2s ease; }

  .map-stack { display: flex; flex-direction: column; gap: 18px; }
  .info-card { background: #fff; border: 1px solid var(--border-color); border-radius: 22px; padding: 32px 30px; }
  .info-card address { font-style: normal; font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 18px; max-width: none; }
  .info-line { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }
  .map-card { border: 1px solid var(--border-color); border-radius: 22px; overflow: hidden; background: #fff; }
  .map-card__head { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 13px var(--font-body); color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
  .map-card__dot { display: inline-flex; align-items: center; gap: 7px; }
  .map-card__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
  .map-card iframe { width: 100%; height: 260px; border: 0; display: block; }

  .cta-band { padding-block: 100px; text-align: center; }
  .cta-band h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 7vw, 50px); line-height: 1.06; margin: 0 0 20px; color: var(--dark); }
  .cta-band p { font-size: 18px; line-height: 1.6; color: var(--text-muted); margin: 0 auto 34px; max-width: 560px; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

  .site-footer { background: var(--footer-bg); color: var(--text-light); padding: 72px 0 36px; }
  .footer-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; }
  .site-footer .footer__title { font: 600 12px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; }
  .site-footer .footer__title .chev { display: none; }
  .footer__panel a { display: block; font-size: 14px; line-height: 1.5; margin-bottom: 10px; text-decoration: none; transition: color .18s ease; }
  .footer__panel a:hover { color: var(--text-light); }
  .footer__panel a.btn { display: inline-flex; width: auto; margin-bottom: 0; color: var(--accent-contrast); background: var(--accent); }
  .footer__panel a.btn:hover { color: var(--accent-contrast); background: var(--accent-hover); }
  .footer-contact address { font-style: normal; font-size: 14px; line-height: 1.6; margin: 8px 0 12px; max-width: none; }
  .footer-phone { display: block; color: var(--text-light); font-size: 14px; font-weight: 600; margin-bottom: 10px; text-decoration: none; }
  .footer-phone:hover { color: #fff; }
  .footer-hours { font-size: 13.5px; margin-bottom: 18px; }
  .footer-note { max-width: 820px; font-size: 13.5px; line-height: 1.6; margin: 52px 0 0; font-style: italic; }
  .footer-legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 28px; padding-top: 22px; font-size: 12.5px; max-width: none; }

  .mobile-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200; display: none; gap: 10px; padding: 8px; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 18px; box-shadow: 0 12px 40px -12px rgba(46,46,51,.4); border: 1px solid var(--border-color); }
  .mobile-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; font-weight: 600; font-size: 15px; border-radius: 12px; text-decoration: none; }
  .mobile-bar__call { background: var(--blush); color: var(--aubergine); }
  .mobile-bar__book { background: var(--accent); color: var(--accent-contrast); }

  /* ---- Condition-template blocks (reusable across condition pages) ---- */
  .prose-flow > * + * { margin-top: 18px; }
  .prose-flow h2 { margin-bottom: 6px; }

  .benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 24px; margin-top: 40px; }
  .benefit-card { display: flex; flex-direction: column; }
  .benefit-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 14px 0 10px; color: var(--text-heading); }
  .benefit-card p { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: none; }

  .step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 22px; margin-top: 44px; }
  .step { background: #fff; border: 1px solid var(--border-color); border-radius: 18px; padding: 28px 26px; display: flex; flex-direction: column; }
  .step__num { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--accent); margin-bottom: 16px; }
  .step h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0 0 8px; color: var(--text-heading); }
  .step p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: none; }
  .step-note { margin-top: 26px; font-size: 15.5px; line-height: 1.7; color: var(--text-muted); max-width: none; }

  /* ---- Appointment form card (contact page) ---- */
  .form-card { display: flex; flex-direction: column; gap: 16px; padding: 36px 32px; }
  .form-card .area-label { margin: 0; }
  .form-card .btn { align-self: flex-start; }
  .form-card .field__help { margin: 0; }

  /* ---- Multi-step form wizard ---- */
  .form-wizard { gap: 20px; }
  .wizard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .wizard__count { margin: 0; font: 600 12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
  .wizard__progress { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
  .wizard__dot { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; font: 600 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
  .wizard__dot::before { content: ""; display: block; height: 4px; border-radius: 999px; }
  .wizard__step { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
  .wizard__step[hidden] { display: none; }
  .wizard__legend { padding: 0; font-family: var(--font-display); font-size: 22px; font-weight: 500; }
  .label__opt { font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-left: 6px; }
  .seg--inline { display: flex; gap: 8px; border: 0; background: none; padding: 0; }
  .wizard__summary { border-radius: 16px; padding: 18px 20px; }
  .wizard__summary-title { margin: 0 0 10px; font: 600 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
  .wizard__summary dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .wizard__summary dl > div { display: flex; gap: 12px; justify-content: space-between; font-size: 14.5px; }
  .wizard__summary dt { font-weight: 600; }
  .wizard__summary dd { margin: 0; text-align: right; }
  .wizard__nav { display: flex; gap: 12px; }
  .wizard__nav .btn { flex: 1 1 auto; }
  /* .btn sets display:inline-flex, which would otherwise defeat [hidden] */
  .btn[hidden], .wizard__nav .btn[hidden] { display: none; }

  /* ---- Contact details beside a form ---- */
  .contact-strip { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
  .contact-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; text-decoration: none; }
  .contact-row + .contact-row { border-top: 1px solid var(--hairline); }
  .contact-row__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
  .contact-row span { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.45; }
  .contact-row span strong { font-size: 16px; font-weight: 600; }
  .contact-row--static { margin: 0; max-width: none; }

  /* ---- Form states ---- */
    .form-card.is-sent .field, .form-card.is-sent > .btn, .form-card.is-sent .field__help,
  .form-card.is-sent .wizard__step, .form-card.is-sent .wizard__nav,
  .form-card.is-sent .wizard__progress, .form-card.is-sent .wizard__count { display: none; }
  .form-success { display: flex; gap: 16px; align-items: flex-start; }
  .form-success[hidden] { display: none; }
  .form-success__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
  .form-success h3 { font: 600 18px var(--font-body); margin: 0 0 6px; }
  .form-success p { margin: 0; font-size: 15px; line-height: 1.65; max-width: none; }

  /* ---- Pills that act as links (service areas) ---- */
  .pill--link { text-decoration: none; transition: background-color .2s ease, color .2s ease; }

  .cta-actions--left { justify-content: flex-start; margin-top: 6px; }

  /* ---- Editorial band (dark split + numbered points) ---- */
  .band-split { align-items: center; }
  .band-media { position: relative; }
  .band-media .placeholder { border-radius: 26px; }
  .band-badge {
    position: absolute; right: -14px; bottom: -18px; margin: 0; max-width: 220px;
    padding: 16px 20px; border-radius: 18px;
    font: 500 13px/1.35 var(--font-body);
  }
  .band-badge strong { display: block; font: 500 30px/1 var(--font-display); margin-bottom: 4px; }
  .band-badge span { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .band-lead { font-size: 1.08rem; line-height: 1.75; max-width: none; }
  .band-points { margin-top: 64px; }

  /* ---- Route list (directions as a numbered journey) ---- */
  .route-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; }
  .route-step { position: relative; display: flex; gap: 18px; padding: 0 0 24px 0; }
  .route-step:last-child { padding-bottom: 0; }
  .route-step::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px; width: 1px; }
  .route-step:last-child::before { display: none; }
  .route-step__num {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 39px; height: 39px; border-radius: 50%;
    font: 600 14px var(--font-body); letter-spacing: .02em;
  }
  .route-step__body h3 { font: 600 17px var(--font-body); margin: 8px 0 6px; }
  .route-step__body p { font-size: 15.5px; line-height: 1.7; margin: 0; max-width: none; }

  .note-card { display: flex; gap: 20px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border-color); border-radius: 20px; padding: 28px 30px; margin: 26px 0; }
  .note-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); }
  .note-card p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--text); max-width: none; }
}

@media (max-width: 1080px) {
  .primary-nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero__inner { padding-block: 120px; }
  .hero__rail { display: none; }
}
@media (max-width: 767px) {
  .mobile-bar { display: flex; }
}
@media (max-width: 960px) {
  .what-grid, .feature-split, .cost-grid, .location-grid { grid-template-columns: 1fr; gap: 36px; }
  .cond-grid { grid-template-columns: 1fr 1fr; }
  /* 4-up grids pair off at tablet widths; 3-up grids stay on auto-fit so no card is orphaned */
  .benefit-grid:has(> :nth-child(4)),
  .step-grid:has(> :nth-child(4)),
  .technique-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 960px) {
  .band-badge { right: 12px; bottom: -14px; }
  .band-points { margin-top: 44px; }
}
/* ---- Wide-card grids: when a grid's cards have very uneven content
   length, forcing fewer, wider columns lets the longer card wrap onto
   fewer lines so all the cards in the row settle to a similar height.
   Opt a grid in with the is-wide class on its grid element. ---- */
@media (min-width: 961px) {
  .cond-grid.is-wide, .benefit-grid.is-wide, .step-grid.is-wide, .technique-grid.is-wide {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .cond-grid, .technique-grid, .benefit-grid, .step-grid, .footer-cols { grid-template-columns: 1fr; }
  .site-footer .footer__title { display: flex; align-items: center; justify-content: space-between; }
  .site-footer .footer__title .chev { display: inline-flex; }
  .footer__col.is-open .footer__title .chev { transform: rotate(180deg); }
  .cost-card { padding: 32px 24px; }
  .cost-panel { flex-direction: column; padding: 26px 24px; }
  .what-panel { padding: 32px 26px; }
  .what-panel--media { grid-template-columns: 1fr; gap: 24px; }
  .safety-grid { grid-template-columns: 1fr; }
  .mtabs { grid-template-columns: 1fr; gap: 28px; }
  .mtabs__strip { gap: 18px; }
}

/* =============================================================
   6. PROJECT SKIN - final palette decisions
   Unlayered, so it wins over @layer components above. One pass, no
   duplicate overrides: every selector below appears exactly once and
   holds the value the site actually renders.

   PALETTE  ivory canvas - blush bands - plum ramp (rose/plum/aubergine)
            - marigold for numerals & CTAs on dark - terracotta ONLY on
            buttons (never on link or label text).
   ============================================================= */
/* ---- 6.1 Section bands ---- */
.bg--blush, .bg--mint, .bg--surface, .bg--linen { background-color: var(--blush); color: var(--text); }
.cta-band { background: var(--text); }
.cta-band h2 { color: var(--text-light); }
.cta-band p  { color: var(--text-light); }

/* Marigold rule under every section heading that carries an id */
.section h2[id]::after,
.cta-band h2[id]::after {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--marigold); border-radius: 2px; margin-top: 18px;
}
.faq-head h2[id]::after, .cta-band h2[id]::after { margin-inline: auto; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--marigold); }

/* ---- 6.2 Hero ---- */
.hero { background: var(--blush); }
.hero__scrim { background: linear-gradient(102deg, rgba(255,252,253,.97) 0%, rgba(255,252,253,.93) 32%, rgba(248,228,234,.72) 54%, rgba(58,38,51,.22) 80%, rgba(58,38,51,.4) 100%); }
.hero__eyebrow { flex-direction: column; align-items: flex-start; gap: 14px; }
.hero__eyebrow .rule { width: 34px; height: 3px; background: var(--marigold); border-radius: 2px; }
.hero__eyebrow .label { color: var(--text); }
.hero__title { color: var(--aubergine); }
.hero__title .place { color: var(--terracotta); }
.hero__lead, .hero__rail { color: var(--text); }
.marquee { border-top-color: var(--hairline); background: rgba(255,252,253,.62); }
.marquee__item { color: var(--text); }
.marquee__item::before { background: var(--marigold); }

/* ---- 6.3 Buttons (terracotta lives here and nowhere else) ---- */
.btn--elevated { box-shadow: 0 12px 28px -14px rgba(177,79,44,.45); }
.btn--ghost { background: transparent; color: var(--terracotta); border-color: var(--terracotta); }
.btn--ghost:hover { background: var(--blush); color: var(--terracotta); border-color: var(--terracotta); }
.btn--call { background: var(--bg); color: var(--terracotta); border-color: var(--terracotta); }
.btn--call svg { color: var(--terracotta); }
.btn--call:hover { background: var(--blush); color: var(--terracotta); border-color: var(--terracotta); }
.cta-band .btn--ghost { background: var(--bg); color: var(--terracotta); border-color: var(--terracotta); }
.cta-band .btn--ghost:hover { background: #fff; color: var(--terracotta); border-color: var(--terracotta); }
/* On aubergine bands terracotta fails contrast -> marigold with dark ink */
.section--dark .btn--primary,
.site-footer .footer__panel a.btn,
.cta-band .btn--primary { background: var(--marigold); color: var(--marigold-ink); border-color: var(--marigold); }
.section--dark .btn--primary:hover,
.site-footer .footer__panel a.btn:hover,
.cta-band .btn--primary:hover { background: var(--marigold-hov); color: var(--marigold-ink); }

/* ---- 6.4 Icons, tiles, numerals ---- */
.icon-tile { background: var(--plum); color: var(--bg); border-radius: 50%; }
.what-panel__ico, .cost-panel__icon, .safety-card__icon { background: var(--plum); color: var(--bg); }
.ring-icon { border-color: var(--plum); color: var(--plum); }
.what-panel__num, .step__num, .technique__num { color: var(--marigold); }
.tab-card .num, .tab-card[aria-selected="true"] .num { color: var(--marigold); }
.chev, .menu-star, .header-phone .phone-ico { color: var(--plum); }

/* ---- 6.5 Cards, panels, links, pills ---- */
.cost-card, .info-card, .faq, .step, .safety-card, .cost-panel { background: var(--bg); }
.what-panel { background: var(--bg); border-color: var(--hairline); }
.what-panel p, .menu-link__sub { color: var(--text); }
.cond-card h3, .benefit-card h3 { color: var(--aubergine); }
.arrow-link, .menu-foot { color: var(--aubergine); }
.arrow-link:hover, .menu-foot:hover { color: var(--plum); }
.pill { background: var(--blush); color: var(--aubergine); }
.placeholder { background: repeating-linear-gradient(135deg, #fbf1f4, #fbf1f4 12px, #f4dbe3 12px, #f4dbe3 24px); }
.placeholder__tag { color: var(--aubergine); }
.cond-group__title, .area-label { color: var(--plum); }

/* ---- 6.6 Tabs, chips, segmented switch ---- */
.tab-card, .tab-card .label { color: var(--text); }
.tab-card:hover { color: var(--aubergine); }
.tab-card .ico { background: var(--blush); border-color: transparent; color: var(--plum); }
/* vertical rails: every tab is a visible chip, selected one is solid plum */
.tabs__list--vertical .tab-card {
  background: var(--bg); border: 1px solid var(--hairline); border-radius: 14px;
}
.tabs__list--vertical .tab-card:hover { border-color: var(--plum); }
.tabs__list--vertical .tab-card[aria-selected="true"] { background: var(--plum); border-color: var(--plum); color: #fff; }
.tabs__list--vertical .tab-card[aria-selected="true"] .label { color: #fff; }
.tabs__list--vertical .tab-card[aria-selected="true"] .ico { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }
.tabs__list--vertical .tab-card[aria-selected="true"] .num { color: #fff; }
.chip-tab { background: var(--blush); border-color: transparent; color: var(--aubergine); }
.chip-tab[aria-selected="true"] { background: var(--plum); border-color: var(--plum); color: var(--bg); }
.seg { background: var(--bg); border-color: var(--hairline); }
.seg__btn:hover { color: var(--plum); }
.seg__btn[aria-selected="true"] { background: var(--plum); color: var(--bg); }
.mtabs__tab:hover { color: var(--plum); }
.mtabs__tab[aria-selected="true"] { color: var(--plum); border-bottom-color: var(--plum); }

.tabs__list--vertical .tab-card:not(:has(.ico)) { padding: 17px 20px; font-weight: 600; }

/* ---- 6.7 Accordions ---- */
.faq__plus { background: var(--bg); color: var(--aubergine); border: 0; }
.faq[open] .faq__plus { background: var(--aubergine); color: var(--bg); border: 0; }
.faq__icon { background: var(--bg); color: var(--plum); }
.faq--cost { background: var(--blush); border-color: transparent; }
.faq--cost[open] .faq__icon { background: var(--plum); color: var(--bg); }
/* FAQ accordion cards must contrast against their OWN section's background,
   not against a hardcoded assumption of which id the section uses - white
   section -> blush cards, blush section -> stays the default white/--bg
   card above. Keyed off the section's own bg modifier class so it's correct
   for every Faq instance regardless of its id. */
[data-block="faq"]:not(.bg--blush) .faq { background: var(--blush); border-color: transparent; }

/* ---- 6.8 Safety callout ---- */
.safety-card--alert { border-color: var(--hairline); }
.safety-card--alert .safety-card__icon { background: var(--marigold); color: var(--marigold-ink); }
.safety-card--alert .safety-card__head h3 { color: var(--aubergine); }
.safety-signs li::before { background: var(--marigold); }

/* ---- 6.9 Dark band (techniques) ---- */
.section--dark :where(h1,h2,h3) { color: var(--bg); }
.section--dark .faq-head h2 { color: var(--bg); }
.section--dark .eyebrow { color: #c8b6c2; }
.technique { background: var(--aubergine); }
.technique-grid { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.technique h3 { color: var(--bg); }
.technique p:not(.technique__num), .technique-head p { color: #c8b6c2; }

/* ---- 6.10 Header & navigation ---- */
.site-header { background: rgba(255,252,253,.94); border-bottom-color: var(--hairline); box-shadow: 0 6px 24px -18px var(--shadow-ink); }
/* Header shrinks once the page scrolls (JS toggles .is-scrolled) */
.site-header__inner { transition: height .28s ease; }
.site-header__logo img { height: 68px; transition: height .28s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(58,38,51,.28); }
.site-header.is-scrolled .site-header__inner { height: 68px; }
.site-header.is-scrolled .site-header__logo img { height: 58px; }
.mobile-nav__head img { height: 62px; }
.primary-nav > a, .nav-btn, .header-phone { color: var(--aubergine); }
.menu-link:hover, .cond-link:hover { background: var(--blush); color: var(--aubergine); }
.dropdown__panel { box-shadow: 0 24px 60px -24px rgba(58,38,51,.18); }
.mobile-nav { background: rgba(255,252,253,.98); }
.mobile-nav__foot .header-phone { border-color: var(--border-soft); color: var(--aubergine); }
.mnav-details > summary, .mnav-link { border-bottom-color: var(--hairline); }
.mobile-bar { box-shadow: 0 12px 40px -12px rgba(58,38,51,.18); }

/* ---- 6.9b Active nav state ("you are here") ----
   initActiveNav() in project-base.js sets aria-current="page" on the link
   matching the current URL, and .is-active on the dropdown toggle / mobile
   accordion summary that contains it. */
.primary-nav > a[aria-current="page"],
.nav-btn.is-active {
  background: var(--blush); color: var(--plum); font-weight: 600;
}
.menu-link[aria-current="page"],
.cond-link[aria-current="page"] {
  background: var(--blush); color: var(--primary-deep); font-weight: 600;
}
.menu-foot[aria-current="page"] { color: var(--plum); }
.mnav-link[aria-current="page"],
.mnav-sub a[aria-current="page"],
.mnav-details > summary.is-active {
  color: var(--plum);
}
.mnav-sub a[aria-current="page"] { font-weight: 700; }

/* ---- 6.10b Forms & link pills ---- */
.form-card { background: var(--bg); border-color: var(--hairline); }
.form-card .label { color: var(--aubergine); }
.form-card .input, .form-card .textarea { border-color: var(--hairline); background: var(--bg); }
.form-card .input:focus, .form-card .textarea:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(158,74,104,.14); }
.pill--link:hover { background: var(--plum); color: var(--bg); }
.contact-row { color: var(--aubergine); }
.contact-row:hover { color: var(--plum); }
.contact-row span strong { color: var(--aubergine); }
.contact-row span { color: var(--text); }
.contact-row__ico { background: var(--blush); color: var(--plum); }
.contact-row:hover .contact-row__ico { background: var(--plum); color: var(--bg); }
.form-success__ico { background: var(--plum); color: var(--bg); }
.wizard__count, .wizard__dot { color: var(--rose); }
.wizard__dot::before { background: var(--hairline); }
.wizard__dot.is-active::before { background: var(--plum); }
.wizard__dot.is-done::before { background: var(--marigold); }
.wizard__dot.is-active { color: var(--aubergine); }
.wizard__legend { color: var(--aubergine); }
.label__opt { color: var(--rose); }
.wizard__summary { background: var(--blush); }
.wizard__summary-title { color: var(--plum); }
.wizard__summary dt { color: var(--aubergine); }
.wizard__summary dd { color: var(--text); }
.form-success h3 { color: var(--aubergine); }
.field--error .input, .field--error .textarea { border-color: var(--terracotta); }
.field__error { color: var(--terracotta); }

/* ---- 6.10b2 Editorial band ---- */
.band-badge { background: var(--marigold); color: var(--marigold-ink); box-shadow: 0 18px 40px -20px rgba(0,0,0,.55); }
.band-badge span { color: rgba(61,38,6,.72); }
.section--dark .band-lead, .section--dark .eyebrow { color: #c8b6c2; }
.section--dark .placeholder { background: repeating-linear-gradient(135deg, #4a3341, #4a3341 12px, #563c4c 12px, #563c4c 24px); border-color: rgba(255,255,255,.14); }
.section--dark .placeholder__tag { background: rgba(58,38,51,.72); color: #e8d8e2; }

.section--dark .arrow-link { color: var(--marigold); }
.section--dark .arrow-link:hover { color: #fff; }
.mtabs__panel .lead-body + .lead-body { margin-top: 16px; }

/* ---- 6.10c Route list ---- */
.route-step::before { background: var(--hairline); }
.route-step__num { background: var(--blush); color: var(--aubergine); border: 1px solid var(--hairline); }
.route-step:first-child .route-step__num { background: var(--marigold); color: var(--marigold-ink); border-color: var(--marigold); }
.route-step__body h3 { color: var(--aubergine); }
.route-step__body p { color: var(--text); }

/* ---- 6.11 Footer ---- */
.site-footer .footer__title { color: var(--marigold); }
.footer__panel a { color: #b9a6b3; }
.footer__panel a:hover { color: var(--bg); }
.footer__panel a[aria-current="page"] { color: var(--marigold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.footer-contact address, .footer-hours, .footer-note { color: #b9a6b3; }
.footer-legal { color: #9c8797; }

/* =============================================================
   7. SITE PATTERNS - behaviour every page inherits
   7.1 Mobile carousels: a grid of 3+ cards becomes a swipeable rail
       with the next card peeking + a right-edge swipe indicator.
       initCarousels() in project-base.js wraps the grid and stamps
       [data-carousel]; opt a new grid in with data-carousel.
   7.2 Mobile image + text order: heading -> image -> copy -> CTA.
   7.3 Button motion: hover lift on every CTA.
   ============================================================= */

/* ---- 7.1 Carousels ---- */
.carousel-wrap { position: relative; }
.carousel-wrap[data-draggable] { cursor: grab; }
.carousel-wrap[data-draggable].is-dragging { cursor: grabbing; }
.carousel-wrap.is-dragging > [data-carousel] { scroll-snap-type: none !important; scroll-behavior: auto !important; }
.carousel-wrap.is-dragging > [data-carousel] * { user-select: none; }
.swipe-hint { display: none; }

@media (max-width: 720px) {
  .carousel-wrap { margin-top: 40px; }
  .carousel-wrap > [data-carousel] {
    display: flex; grid-template-columns: none; margin-top: 0;
    gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 56px 2px 2px; margin-inline: -2px; list-style: none;
  }
  .carousel-wrap > [data-carousel]::-webkit-scrollbar { display: none; }
  .carousel-wrap > [data-carousel] > * { flex: 0 0 80%; scroll-snap-align: start; min-width: 0; }
  /* the techniques rail draws its own hairline dividers - drop them when it scrolls */
  .carousel-wrap > .technique-grid { background: transparent; border: 0; }
  .carousel-wrap > .technique-grid > .technique { border-radius: 20px; }

  .swipe-hint {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 3; pointer-events: none;
    padding: 12px 8px; border-radius: 999px;
    background: rgba(255,252,253,.94); border: 1px solid var(--hairline);
    box-shadow: -10px 0 26px -12px rgba(58,38,51,.35);
    transition: opacity .3s ease, transform .3s ease;
  }
  .swipe-hint__label {
    font: 600 9.5px/1 var(--font-body); letter-spacing: .14em;
    text-transform: uppercase; color: var(--aubergine); writing-mode: vertical-rl;
  }
  .swipe-hint__arrows { display: inline-flex; color: var(--terracotta); animation: swipeNudge 1.5s ease-in-out infinite; }
  .carousel-wrap.is-swiped .swipe-hint { opacity: .45; }
  .carousel-wrap.is-end .swipe-hint { opacity: 0; transform: translate(10px, -50%); }
}
@keyframes swipeNudge {
  0%, 100% { transform: translateX(-2px); }
  50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint__arrows { animation: none; }
}

/* ---- 7.1b Desktop carousel: grids of 5+ cards (or explicitly forced via
   data-force-carousel) scroll with prev/next, three cards visible at a time.
   initCarousels() in project-base.js adds .is-desktop-carousel to the wrap. */
.carousel-nav { display: none; }
@media (min-width: 721px) {
  .carousel-wrap.is-desktop-carousel { position: relative; padding-inline: 60px; }
  .carousel-wrap.is-desktop-carousel > [data-carousel] {
    display: flex; grid-template-columns: none;
    gap: var(--grid-gap, 24px); overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .carousel-wrap.is-desktop-carousel > [data-carousel]::-webkit-scrollbar { display: none; }
  .carousel-wrap.is-desktop-carousel > [data-carousel] > * {
    flex: 0 0 calc((100% - 2 * var(--grid-gap, 24px)) / 3); scroll-snap-align: start; min-width: 0;
  }
  .carousel-wrap.is-desktop-carousel > .technique-grid { gap: 1px; }
  .carousel-wrap.is-desktop-carousel > .technique-grid > * { flex-basis: calc((100% - 2px) / 3); }

  .carousel-nav {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    inline-size: 48px; block-size: 48px; border-radius: 50%; padding: 0;
    background: var(--bg); border: 1px solid var(--hairline);
    color: var(--aubergine); cursor: pointer; z-index: 4;
    box-shadow: 0 10px 24px -14px rgba(58,38,51,.35);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
  }
  .carousel-nav:hover:not(:disabled) { background: var(--plum); color: #fff; }
  .carousel-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
  .carousel-nav--prev { left: 0; }
  .carousel-nav--next { right: 0; }
  .section--dark .carousel-nav { background: var(--dark); border-color: rgba(255,255,255,.18); color: var(--text-light); }
  .section--dark .carousel-nav:hover:not(:disabled) { background: var(--marigold); color: var(--marigold-ink); }
}
@media (max-width: 720px) {
  .carousel-wrap.is-desktop-carousel { padding-inline: 0; }
}

/* ---- 7.2 Mobile image + text order ---- */
@media (max-width: 720px) {
  .feature-split { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .feature-split > .flow { display: contents; }
  .feature-split > .flow > * { margin-top: 0; min-width: 0; }
  .feature-split > :not(.flow) { min-width: 0; }
  .feature-split > .flow > .eyebrow { order: 1; }
  .feature-split > .flow > h2,
  .feature-split > .flow > h3 { order: 2; }
  .feature-split > :not(.flow) { order: 3; }              /* the image column */
  .feature-split > .flow > :not(.eyebrow):not(h2):not(h3) { order: 4; }

  /* A long arrow-link label (e.g. a full name/title) plus its nowrap
     chevron can be wider than a narrow phone's content column, forcing
     the page to scroll horizontally. Let it wrap here - the icon just
     flows onto the last line with the final word instead. */
  .arrow-link { white-space: normal; }

  .what-panel--media { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  /* an unlayered display: must not override the hidden panel rule */
  .what-panel[hidden], .what-panel--media[hidden], .map-card[hidden], .cost-panel[hidden], .mtabs__panel[hidden] { display: none; }
  .what-panel--media > .placeholder,
  .what-panel--media > img { order: 1; }
  .what-panel--media > .what-panel__body { order: 2; }
}

/* ---- 7.3 Button motion ---- */
.btn--call, .btn--ghost, .btn--primary {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .22s ease;
}
.btn--call { box-shadow: 0 10px 24px -14px rgba(177,79,44,.5); }
.btn--call:hover, .btn--call:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(177,79,44,.55); }
.btn--primary.btn--elevated:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(177,79,44,.55); }
.cta-band .btn--ghost { box-shadow: 0 10px 24px -14px rgba(177,79,44,.5); }
.cta-band .btn--ghost:hover, .cta-band .btn--ghost:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(177,79,44,.55); }
.site-footer .footer__panel a.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(232,163,58,.5); }

/* ---- 7.4 Paired buttons: same width, stacked on mobile ---- */
@media (max-width: 720px) {
  .hero__actions, .cta-actions, .btn-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%;
  }
  .hero__actions > .btn, .cta-actions > .btn, .btn-row > .btn {
    width: 100%; padding-inline: 1rem; text-align: center;
  }
}

/* ---- 7.5 Images fill the section width on mobile (page gutter kept) ---- */
@media (max-width: 720px) {
  .feature-split > :not(.flow),
  .feature-split > :not(.flow) > .placeholder,
  .feature-split > :not(.flow) > img,
  .mtabs > .placeholder, .mtabs > img,
  .what-panel--media > .placeholder,
  .what-panel--media > img { width: 100%; }
}

/* ---- 7.6 Label-only tab blocks become an accordion on mobile ----
   Applies from 960px down, where .what-grid drops to one column.
   Opt in with data-tabs-layout="accordion" on the .what-grid. Each tab
   sits directly above its own panel: tab 1 -> panel 1 -> tab 2 -> panel 2.
   Both wrappers go display:contents so the buttons and panels become
   siblings of the grid and can be interleaved. */
@media (max-width: 960px) {
  .what-grid { margin-top: 28px; gap: 14px; }

  .what-grid[data-tabs-layout="accordion"] { display: flex; flex-direction: column; }
  .what-grid[data-tabs-layout="accordion"] > * { display: contents; }
  .what-grid[data-tabs-layout="accordion"] .tab-card { width: 100%; }
  .what-grid[data-tabs-layout="accordion"] .tab-card:nth-child(1)   { order: 1; }
  .what-grid[data-tabs-layout="accordion"] .what-panel:nth-child(1) { order: 2; }
  .what-grid[data-tabs-layout="accordion"] .tab-card:nth-child(2)   { order: 3; }
  .what-grid[data-tabs-layout="accordion"] .what-panel:nth-child(2) { order: 4; }
  .what-grid[data-tabs-layout="accordion"] .tab-card:nth-child(3)   { order: 5; }
  .what-grid[data-tabs-layout="accordion"] .what-panel:nth-child(3) { order: 6; }
  .what-grid[data-tabs-layout="accordion"] .tab-card:nth-child(4)   { order: 7; }
  .what-grid[data-tabs-layout="accordion"] .what-panel:nth-child(4) { order: 8; }
  .what-grid[data-tabs-layout="accordion"] .tab-card:nth-child(5)   { order: 9; }
  .what-grid[data-tabs-layout="accordion"] .what-panel:nth-child(5) { order: 10; }
  .what-grid[data-tabs-layout="accordion"] .tab-card:nth-child(6)   { order: 11; }
  .what-grid[data-tabs-layout="accordion"] .what-panel:nth-child(6) { order: 12; }
  .what-grid[data-tabs-layout="accordion"] .what-panel { padding: 26px 22px; min-height: 0; }

  .tabs__list--vertical .tab-card { padding: 15px 18px; font-weight: 600; }
}

/* ---- 7.7 Footer on mobile: divider per collapsed column, clear the CTA bar ---- */
@media (max-width: 767px) {
  /* Sticky (not fixed): the bar pins to the bottom of the viewport while
     scrolling, then settles into flow at the end of the page - so it can
     never be clipped by the viewport and never covers the legal line. */
  .mobile-bar {
    position: sticky;
    inset: auto auto calc(10px + env(safe-area-inset-bottom, 0px)) auto;
    margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 7px; gap: 8px;
  }
  .mobile-bar a { padding-block: 13px; font-size: 14.5px; }
  .site-footer { padding-bottom: 24px; }
}
@media (max-width: 720px) {
  .footer-cols { gap: 0; }
  .footer-cols > .footer__col { border-bottom: 1px solid rgba(255,255,255,.12); padding-block: 6px 14px; }
  .footer-cols > .footer__col:last-child { border-bottom: 0; }
  .site-footer .footer__title { margin-bottom: 10px; padding-block: 8px; }
  .footer__col.is-open .footer__panel { padding-bottom: 6px; }
  .footer-note { margin-top: 28px; }
}