/* ==========================================================================
   Mornington Village Medical Centre — shared stylesheet (8 pages)
   Home, About, Services, Contact, Patient Hub, Practice Policy,
   Privacy Policy and Terms. One stylesheet, no framework, no JS.

   The header/footer partials are FIXED and shared verbatim across all pages,
   so nothing here may assume page-specific markup inside them. The active-nav
   state is driven from a body class (see "Active nav" below) because an
   include takes no parameters.

   Sizing model: the root font-size stays 100%. Every type and space step is
   the template's own, generated from its eight --u-* knobs, which this site
   sets in its own block below (see "Type & space scale"). The original drove
   everything from a fluid root (calc(0.7498rem + 0.31266vw), 13.2px at 390,
   16.5px at 1440); that is gone, because under fluid steps it would scale
   everything twice. The steps carry the fluidity; the rem values that remain
   are fixed dimensions (icons, logos, media floors) at a 16px rem.
   ========================================================================== */

/*
 * Site styles. There is no CSS framework and no build step — this file is
 * served exactly as written, so everything the site needs is here or in the
 * site's own additions below.
 *
 * ---------------------------------------------------------------------------
 * FLUID TYPE & SPACE SCALE
 *
 * Every size below is derived from the six anchor numbers in --u-*. Change an
 * anchor and the whole scale moves with it, in proportion. That is the point:
 * retuning a site is editing six numbers, not auditing every value in the file.
 *
 * Each step is a clamp() between its value at the minimum viewport and its
 * value at the maximum, so text and spacing scale smoothly with the viewport
 * instead of jumping at breakpoints. No media queries are needed for sizing.
 *
 * TO RETUNE FOR THIS SITE (see refs/design/DESIGN.md):
 *   --u-min-ratio / --u-max-ratio   how dramatic the jump between sizes is.
 *                                   1.2 (minor third) reads calm and even;
 *                                   1.333 (perfect fourth) reads confident;
 *                                   above ~1.4 gets shouty for a practice site.
 *   --u-min-font / --u-max-font     base body size at each end, in px.
 *   --u-min-vw / --u-max-vw         the viewport range the scale spans.
 *
 * A larger max-ratio with the same min-ratio gives a site that is restrained on
 * a phone and expressive on a desktop, which usually suits a hero-led page.
 */
:root {
    /* --- Anchors: the dial for this site ------------------------------- */
    --u-min-vw: 320;
    --u-max-vw: 1240;
    --u-min-font: 16;
    --u-max-font: 18;
    --u-min-ratio: 1.2;
    --u-max-ratio: 1.25;
    /* Space unit (rem) at each end. Every --space-* step and pair is a fixed
     * multiple of it, so these two knobs move the whole spacing rhythm at once. */
    --u-space-min: 1;
    --u-space-max: 1.25;

    /* --- Derivation. Not usually edited by hand. ----------------------- */
    /* Slope and intercept of the line between the two anchor viewports,
     * expressed so each step can be written as clamp(min, calc(...), max). */
    --u-vw-range: calc(var(--u-max-vw) - var(--u-min-vw));

    /* Type steps, in rem at each anchor. Each step multiplies the previous
     * one by the ratio, so the relationship between sizes is fixed even as the
     * absolute values move. */
    --u-min-0: calc(var(--u-min-font) / 16);
    --u-max-0: calc(var(--u-max-font) / 16);

    --u-min--2: calc(var(--u-min-0) / var(--u-min-ratio) / var(--u-min-ratio));
    --u-max--2: calc(var(--u-max-0) / var(--u-max-ratio) / var(--u-max-ratio));
    --u-min--1: calc(var(--u-min-0) / var(--u-min-ratio));
    --u-max--1: calc(var(--u-max-0) / var(--u-max-ratio));
    --u-min-1: calc(var(--u-min-0) * var(--u-min-ratio));
    --u-max-1: calc(var(--u-max-0) * var(--u-max-ratio));
    --u-min-2: calc(var(--u-min-1) * var(--u-min-ratio));
    --u-max-2: calc(var(--u-max-1) * var(--u-max-ratio));
    --u-min-3: calc(var(--u-min-2) * var(--u-min-ratio));
    --u-max-3: calc(var(--u-max-2) * var(--u-max-ratio));
    --u-min-4: calc(var(--u-min-3) * var(--u-min-ratio));
    --u-max-4: calc(var(--u-max-3) * var(--u-max-ratio));
    --u-min-5: calc(var(--u-min-4) * var(--u-min-ratio));
    --u-max-5: calc(var(--u-max-4) * var(--u-max-ratio));
    /* Display extensions, still the same geometric chain: a site never needs
     * to invent a bigger heading step. */
    --u-min-6: calc(var(--u-min-5) * var(--u-min-ratio));
    --u-max-6: calc(var(--u-max-5) * var(--u-max-ratio));
    --u-min-7: calc(var(--u-min-6) * var(--u-min-ratio));
    --u-max-7: calc(var(--u-max-6) * var(--u-max-ratio));
    --u-min-8: calc(var(--u-min-7) * var(--u-min-ratio));
    --u-max-8: calc(var(--u-max-7) * var(--u-max-ratio));

    /* --- Type scale ---------------------------------------------------- */
    /* step--2 fine print · step-0 body · step-2/3 section headings ·
     * step-4/5 hero display. Use these, not raw px. */
    --step--2: clamp(calc(var(--u-min--2) * 1rem), calc(var(--u-min--2) * 1rem + (var(--u-max--2) - var(--u-min--2)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max--2) * 1rem));
    --step--1: clamp(calc(var(--u-min--1) * 1rem), calc(var(--u-min--1) * 1rem + (var(--u-max--1) - var(--u-min--1)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max--1) * 1rem));
    --step-0: clamp(calc(var(--u-min-0) * 1rem), calc(var(--u-min-0) * 1rem + (var(--u-max-0) - var(--u-min-0)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-0) * 1rem));
    --step-1: clamp(calc(var(--u-min-1) * 1rem), calc(var(--u-min-1) * 1rem + (var(--u-max-1) - var(--u-min-1)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-1) * 1rem));
    --step-2: clamp(calc(var(--u-min-2) * 1rem), calc(var(--u-min-2) * 1rem + (var(--u-max-2) - var(--u-min-2)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-2) * 1rem));
    --step-3: clamp(calc(var(--u-min-3) * 1rem), calc(var(--u-min-3) * 1rem + (var(--u-max-3) - var(--u-min-3)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-3) * 1rem));
    --step-4: clamp(calc(var(--u-min-4) * 1rem), calc(var(--u-min-4) * 1rem + (var(--u-max-4) - var(--u-min-4)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-4) * 1rem));
    --step-5: clamp(calc(var(--u-min-5) * 1rem), calc(var(--u-min-5) * 1rem + (var(--u-max-5) - var(--u-min-5)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-5) * 1rem));
    --step-6: clamp(calc(var(--u-min-6) * 1rem), calc(var(--u-min-6) * 1rem + (var(--u-max-6) - var(--u-min-6)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-6) * 1rem));
    --step-7: clamp(calc(var(--u-min-7) * 1rem), calc(var(--u-min-7) * 1rem + (var(--u-max-7) - var(--u-min-7)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-7) * 1rem));
    --step-8: clamp(calc(var(--u-min-8) * 1rem), calc(var(--u-min-8) * 1rem + (var(--u-max-8) - var(--u-min-8)) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-max-8) * 1rem));

    /* --- Weight -------------------------------------------------------- */
    /* Named by the CSS value, not by a word. "bold" is a claim about how a
     * typeface renders; 700 is what you actually asked for, and two faces
     * disagree about which of their cuts reads as bold.
     *
     * THREE WEIGHTS, DELIBERATELY. Body, emphasis, headline — that is the
     * whole system, and it is expressed by which tokens exist rather than by
     * a rule asking politely. Adding --weight-800 needs a reason: the face
     * has a visibly distinct heavy cut AND 700 alone is not creating enough
     * contrast. If 700 and 800 render identically on screen, that is not one.
     * A flat hierarchy is almost always a spacing or size problem, not a
     * weight problem. */
    --weight-400: 400;  /* body */
    --weight-600: 600;  /* nav, card emphasis, eyebrows */
    --weight-700: 700;  /* headlines, CTAs */

    /* --- Leading ------------------------------------------------------- */
    /* A ladder rather than a derived scale, so it is t-shirt sized like
     * --space-* rather than numbered like --step-*. Tightest to loosest.
     *
     * The relationship worth holding: line-height falls as type size rises.
     * Display type at body leading looks unset; body copy at display leading
     * is unreadable. Pair --leading-xs with --step-4/5 and --leading-l with
     * --step-0. */
    --leading-xs: 1.05;   /* display, very large headlines */
    --leading-s: 1.18;     /* headings */
    --leading-m: 1.3;    /* subheadings, ledes, card copy */
    --leading-l: 1.5;     /* body copy */
    --leading-xl: 1.6;   /* long-form and small print, which need more air */

    /* --- Tracking ------------------------------------------------------ */
    /* Same shape: a ladder, tightest to loosest, in em so it scales with
     * whatever size it is applied to.
     *
     * The relationship: tracking tightens as size grows, and ALL-CAPS always
     * needs opening up — uppercase at 0 tracking reads cramped at any size.
     * Pair --tracking-xs with --step-4/5, --tracking-m with body, and
     * --tracking-l or --tracking-xl with any text-transform: uppercase. */
    --tracking-xs: -0.02em;  /* large display */
    --tracking-s: -0.01em;   /* headings */
    --tracking-m: 0;         /* body — the default, stated so it can be reset to */
    --tracking-l: 0.04em;    /* small caps-ish, buttons */
    --tracking-xl: 0.08em;   /* eyebrows and other all-caps runs */

    /* --- Space scale --------------------------------------------------- */
    /* Multiples of the space unit (--u-space-min / --u-space-max) rather than
     * the type ratio, so spacing stays predictable while type can be as
     * dramatic as the site needs. DO NOT redeclare these per site: tune the
     * --u-* knobs above and every step and pair follows. */
    --space-3xs: clamp(calc(var(--u-space-min) * 0.25rem), calc(var(--u-space-min) * 0.25rem + (var(--u-space-max) * 0.3 - var(--u-space-min) * 0.25) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 0.3rem));
    --space-2xs: clamp(calc(var(--u-space-min) * 0.5rem), calc(var(--u-space-min) * 0.5rem + (var(--u-space-max) * 0.5 - var(--u-space-min) * 0.5) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 0.5rem));
    --space-xs: clamp(calc(var(--u-space-min) * 0.75rem), calc(var(--u-space-min) * 0.75rem + (var(--u-space-max) * 0.75 - var(--u-space-min) * 0.75) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 0.75rem));
    --space-s: clamp(calc(var(--u-space-min) * 1rem), calc(var(--u-space-min) * 1rem + (var(--u-space-max) * 1 - var(--u-space-min) * 1) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 1rem));
    --space-m: clamp(calc(var(--u-space-min) * 1.5rem), calc(var(--u-space-min) * 1.5rem + (var(--u-space-max) * 1.5 - var(--u-space-min) * 1.5) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 1.5rem));
    --space-l: clamp(calc(var(--u-space-min) * 2rem), calc(var(--u-space-min) * 2rem + (var(--u-space-max) * 2 - var(--u-space-min) * 2) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 2rem));
    --space-xl: clamp(calc(var(--u-space-min) * 3rem), calc(var(--u-space-min) * 3rem + (var(--u-space-max) * 3 - var(--u-space-min) * 3) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 3rem));
    --space-2xl: clamp(calc(var(--u-space-min) * 4rem), calc(var(--u-space-min) * 4rem + (var(--u-space-max) * 4 - var(--u-space-min) * 4) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 4rem));
    --space-3xl: clamp(calc(var(--u-space-min) * 6rem), calc(var(--u-space-min) * 6rem + (var(--u-space-max) * 6 - var(--u-space-min) * 6) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 6rem));
    --space-4xl: clamp(calc(var(--u-space-min) * 8rem), calc(var(--u-space-min) * 8rem + (var(--u-space-max) * 8 - var(--u-space-min) * 8) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 8rem));

    /* --- Space pairs --------------------------------------------------- */
    /* A pair moves from the SMALLER step on a phone to the LARGER one on a
     * desktop, so the gap changes step rather than merely scaling. This is what
     * replaces per-breakpoint section padding: --space-l-2xl is roughly the old
     * "40-48px mobile, 80-96px desktop" rule, expressed once. */
    --space-2xs-xs: clamp(calc(var(--u-space-min) * 0.5rem), calc(var(--u-space-min) * 0.5rem + (var(--u-space-max) * 0.75 - var(--u-space-min) * 0.5) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 0.75rem));
    --space-xs-s: clamp(calc(var(--u-space-min) * 0.75rem), calc(var(--u-space-min) * 0.75rem + (var(--u-space-max) * 1 - var(--u-space-min) * 0.75) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 1rem));
    --space-s-m: clamp(calc(var(--u-space-min) * 1rem), calc(var(--u-space-min) * 1rem + (var(--u-space-max) * 1.5 - var(--u-space-min) * 1) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 1.5rem));
    --space-m-l: clamp(calc(var(--u-space-min) * 1.5rem), calc(var(--u-space-min) * 1.5rem + (var(--u-space-max) * 2 - var(--u-space-min) * 1.5) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 2rem));
    --space-l-xl: clamp(calc(var(--u-space-min) * 2rem), calc(var(--u-space-min) * 2rem + (var(--u-space-max) * 3 - var(--u-space-min) * 2) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 3rem));
    --space-xl-2xl: clamp(calc(var(--u-space-min) * 3rem), calc(var(--u-space-min) * 3rem + (var(--u-space-max) * 4 - var(--u-space-min) * 3) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 4rem));
    --space-l-2xl: clamp(calc(var(--u-space-min) * 2rem), calc(var(--u-space-min) * 2rem + (var(--u-space-max) * 4 - var(--u-space-min) * 2) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 4rem));
    --space-s-l: clamp(calc(var(--u-space-min) * 1.125rem), calc(var(--u-space-min) * 1.125rem + (var(--u-space-max) * 2 - var(--u-space-min) * 1.125) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 2rem));  /* skip-a-step: grid gutter */
    --space-2xl-3xl: clamp(calc(var(--u-space-min) * 4rem), calc(var(--u-space-min) * 4rem + (var(--u-space-max) * 6 - var(--u-space-min) * 4) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 6rem));
    --space-3xl-4xl: clamp(calc(var(--u-space-min) * 6rem), calc(var(--u-space-min) * 6rem + (var(--u-space-max) * 8 - var(--u-space-min) * 6) * (100vw - var(--u-min-vw) * 1px) / var(--u-vw-range) * 16), calc(var(--u-space-max) * 8rem));
}

:root {
  /* ── Palette: the template's colour system, set on its dials ───────────
   * The practice's colours ARE the template's roles, so anything shaped like
   * the template (focus rings, the skip link, a component copied from
   * _template later) paints in this practice's colours rather than the
   * template's default blue.
   *
   * Every value is the Elementor design kit's own hex for
   * morningtonvillagemc.com.au (transcribed in this file's first version),
   * converted to OKLCH with the standard OKLab formulas and verified by
   * painting each token to a canvas -- all exact:
   *   --primary     forest            #283D34  rgb(40, 61, 52)
   *   --secondary   terracotta        #B8694A  rgb(184, 105, 74)
   *   --tertiary    morning orange    #D36424  rgb(211, 100, 36)
   *   --ink         system text       #363B40  rgb(54, 59, 64)
   *   --bg          cream page ground #FFFCF1  rgb(255, 252, 241)
   *   --surface     off-white         #FBFAF8  rgb(251, 250, 248)
   *   --border      FAQ rule          #D5D8DC  rgb(213, 216, 220)
   *
   * Three independent hue axes, which is why the dials are separate:
   *   brand    166 deg  forest green
   *   grounds   94 deg  warm sand/cream   (--hue-ground)
   *   ink      248 deg  cool grey         (--hue-neutral)
   * A palette derived from one hue cannot express that, and this site is not
   * unusual -- 15/15 surveyed practices needed per-role chroma and lightness.
   */

  /* Layer 1+2: brand roles, each with its own chroma and lightness. */
  --palette-hue: 166.08;
  --palette-chroma: 0.0311;
  --l-solid: 0.3391;

  --palette-secondary-shift: -124.23;  /* 41.85 */
  --chroma-secondary: 0.1107;          /* 3.56x the primary's */
  --l-secondary: 0.6031;               /* +0.26 lighter */

  --palette-tertiary-shift: -119.71;   /* 46.37 */
  --chroma-tertiary: 0.1580;           /* 5.08x the primary's */
  --l-tertiary: 0.6285;

  --hue-primary:   var(--palette-hue);
  --hue-secondary: calc(var(--palette-hue) + var(--palette-secondary-shift));
  --hue-tertiary:  calc(var(--palette-hue) + var(--palette-tertiary-shift));

  /* Layer 3: neutrals. Ink (and the one grey rule) on the cool axis, the
   * grounds on the warm one -- hue-neutral cannot carry both. */
  --hue-neutral: 248.14;
  --hue-ground: 94.19;
  --chroma-ink: 0.0088;                /* --ink = 1.25x = 0.011 */
  --chroma-ground: 0.0148;
  --chroma-surface: 0.0029;
  --chroma-border: 0.0064;

  /* Layer 4: polarity. Light only, as the original: there is no
   * dark-scheme block, and color-scheme is pinned so UA widgets match. */
  --scheme: 1;
  color-scheme: light;

  /* Lightness dials (the template's, retuned to the kit). */
  --l-hover: 0.48;
  --l-light: 0.66;
  --l-muted: 0.92;
  --l-pale: 0.96;
  --l-on-solid: 0.99;
  --l-ink-strong: calc(0.18 + 0.79 * (1 - var(--scheme)));
  --l-ink:        0.3495;
  --l-ink-mid:    calc(0.45 + 0.35 * (1 - var(--scheme)));
  --l-ink-soft:   calc(0.54 + 0.12 * (1 - var(--scheme)));
  --l-bg:         0.9904;
  --l-surface:    0.9853;
  --l-border:     0.8811;
  --l-border-strong: calc(0.82 - 0.40 * (1 - var(--scheme)));

  /* The roles -- the template's own derivations. --bg and --surface read
   * --hue-ground (falling back to --hue-neutral, as the template does). */
  --primary: oklch(var(--l-primary, var(--l-solid)) var(--palette-chroma) var(--hue-primary));
  --primary-hover: oklch(var(--l-hover) var(--palette-chroma) var(--hue-primary));
  --primary-light: oklch(var(--l-light) var(--palette-chroma) var(--hue-primary));
  --primary-muted: oklch(var(--l-muted) calc(var(--palette-chroma) * 0.35) var(--hue-primary));
  --primary-pale: oklch(var(--l-pale) calc(var(--palette-chroma) * 0.25) var(--hue-primary));
  --on-primary: oklch(var(--l-on-solid) 0 0);

  --secondary: oklch(var(--l-secondary) var(--chroma-secondary) var(--hue-secondary));
  --secondary-hover: oklch(calc(var(--l-secondary) - 0.07) var(--chroma-secondary) var(--hue-secondary));
  --secondary-light: oklch(calc(var(--l-secondary) + 0.11) var(--chroma-secondary) var(--hue-secondary));
  --secondary-pale: oklch(var(--l-pale) calc(var(--chroma-secondary) * 0.25) var(--hue-secondary));
  --on-secondary: oklch(var(--l-on-solid) 0 0);

  --tertiary: oklch(var(--l-tertiary) var(--chroma-tertiary) var(--hue-tertiary));
  --tertiary-hover: oklch(calc(var(--l-tertiary) - 0.07) var(--chroma-tertiary) var(--hue-tertiary));
  --tertiary-pale: oklch(var(--l-pale) calc(var(--chroma-tertiary) * 0.25) var(--hue-tertiary));
  --on-tertiary: oklch(var(--l-on-solid) 0 0);

  --ink-strong: oklch(var(--l-ink-strong) calc(var(--chroma-ink) * 2.5) calc(var(--hue-neutral) + 80));
  --ink: oklch(var(--l-ink) calc(var(--chroma-ink) * 1.25) var(--hue-neutral));
  --ink-mid: oklch(var(--l-ink-mid) var(--chroma-ink) var(--hue-neutral));
  --ink-soft: oklch(var(--l-ink-soft) calc(var(--chroma-ink) * 0.833) var(--hue-neutral));
  --bg: oklch(var(--l-bg) var(--chroma-ground) var(--hue-ground, var(--hue-neutral)));
  --surface: oklch(var(--l-surface) var(--chroma-surface) var(--hue-ground, var(--hue-neutral)));
  --border: oklch(var(--l-border) var(--chroma-border) var(--hue-neutral));
  --border-strong: oklch(var(--l-border-strong) calc(var(--chroma-border) * 1.25) var(--hue-neutral));
  --on-bg: var(--ink);
  --on-surface: var(--ink);

  /* ── Extension colours: kit colours no role can derive ─────────────────
   * Declared once, here; rules reference these names, never a literal. */
  /* Terracotta Strong: the secondary darkened, but on its own hue (45.6 vs
   * 41.9) and chroma, so it cannot be --secondary-hover. */
  --terracotta-strong: oklch(0.4974 0.1042 45.55);   /* #924D2B rgb(146, 77, 43) */
  /* The kit's "system accent", a sage/olive used for rules, outlines and
   * decoration. Renamed from --accent: in the template --accent means the
   * primary, and the two must not be confused. */
  --sage:              oklch(0.6928 0.0476 103.37);  /* #A19E7C rgb(161, 158, 124) */
  --muted-green:       oklch(0.7714 0.0557 104.14);  /* #BAB78E rgb(186, 183, 142) */
  /* The sand grounds of cards, bands and the footer. */
  --sand:              oklch(0.9577 0.0177 92.68);   /* #F5F1E4 rgb(245, 241, 228), "sand" */
  --sand-deep:         oklch(0.9219 0.0223 80.68);   /* #EDE4D5 rgb(237, 228, 213) */

  /* ── Type & space scale: the template's knobs, set for this site ──────
   * The steps and pairs are the template's (the block above this one, copied
   * verbatim); this site sets only the eight knobs. Never redeclare a step
   * here and never invent one: retune the knobs and every step follows.
   *
   * The original's sizes are rem on its fluid root, so it scales one ratio
   * uniformly: body 1rem, leads 1.125, cards 1.15-1.25, 1.5, 1.75, 2, section
   * titles 2.5, displays 3rem -- 16.5px body at 1440 and 13.2px at 390.
   *
   * Range: fixed fleet-wide at 390-1440; sizes hold their 1440 value above.
   * Body: live's 16.5px at 1440; 15px on a phone (live 13.2: the owner's
   * floor is 14.5, 15-16 is normal).
   * Ratio: 1.15 at 1440 is the least-squares fit of live's rem ladder (every
   * live size within 6.4% of a step); 1.12 at 390 lands the current phone
   * heading sizes within about 5%. Fit, px at 1440 (390), live -> step:
   *   footer meta .75rem 12.38    -> step--2 12.48 (11.96)
   *     (the services tabs, contact form labels and enquiry note are
   *     .95rem on live, 15.68; the rules that win, later in this file,
   *     set them at step-1 / step-1 / step-0, not the step--2 above them)
   *   body 1rem 16.5              -> step-0  16.50 (15.00)
   *   leads 1.125rem 18.56,
   *   card titles 1.15rem 18.98   -> step-1  18.98 (16.80)
   *   1.5rem 24.75                -> step-3  25.09 (21.07)
   *   2rem 33                     -> step-5  33.19 (26.44)
   *   section titles 2.5rem 41.25 -> step-7  43.89 (33.16)   +6.4%, the largest
   *   displays 3rem 49.5          -> step-8  50.47 (37.14)
   * Space: the template's 16px -> 20px unit (1 : 1.25), so the 1440 rhythm is
   * live's 10/15/20/30/40/60/80/120 and a phone is 20% tighter. */
  --u-min-vw: 390;
  --u-max-vw: 1440;
  --u-min-font: 15;
  --u-max-font: 16.5;
  --u-min-ratio: 1.12;
  --u-max-ratio: 1.15;
  --u-space-min: 1;
  --u-space-max: 1.25;

  /* Named compositions: values between the ladder's steps, each a sum or
   * difference of steps and pairs, so they move with the knobs. */
  /* Home band leads: 32 on a phone to 120 at 1440. */
  --band-lead: calc(var(--space-2xl-3xl) + var(--space-l-2xl) - var(--space-2xl));
  /* How far a card rides up into a hero's wave, and the forest hero's
   * lead-in: 56 on a phone to 120 at 1440. */
  --rise-deep: calc(var(--space-m-l) + var(--space-l-2xl));
  /* GEOMETRY, not spacing: the original's 14vw offset (the home hero's tall
   * photo, the home About band), which tracks the vw-sized waves and
   * illustration around it. Capped at 200px, a sum of steps. No pair is that
   * steep (8 -> 200 is 25x; the ladder's steepest pair is 2.5x), and it only
   * applies above 767px, where it is 107px or more. */
  --wave-offset: min(14vw, calc(var(--space-4xl) + var(--space-l)));
  /* How far the home hours photo rides up under the hours card (above
   * 1200px). Everything beside the photo reserves at least this much below
   * its content, so the rise can never cover text whatever its height. */
  --hours-rise: calc(var(--space-l) + var(--space-2xs));
  /* How far the home wordmark band rides up into the quote band (up to
   * 1024px); the quote band reserves the same below its headline. */
  --quote-rise: var(--space-s);

  /* ── The template's other scales, retuned to this site ────────────────
   * Weight, leading, radius, border and layer, named exactly as the template
   * names them so a template change or a copied component lands on them. */
  --weight-400: 400;  /* body */
  --weight-500: 500;  /* Open Sans medium: footer legal links, FAQ questions, contact links */
  --weight-600: 600;  /* nav, card emphasis */
  --weight-700: 700;  /* headlines, CTAs */

  /* Leading, tightest to loosest. The original's own values: xs and s are
   * retuned from the template's 1.05/1.18 to 1.15/1.2, 2xs (1) is an
   * extension, and m-l (1.4: buttons, nav, labels, hours rows) sits between
   * m and l. m and l are the template's 1.3 and 1.5. */
  --leading-2xs: 1;
  --leading-xs: 1.15;
  --leading-s: 1.2;
  --leading-m: 1.3;
  --leading-m-l: 1.4;
  --leading-l: 1.5;

  --tracking-xl: 0.08em;   /* all-caps runs */

  /* Radius. l is the template's 1.25rem, the practice's card/panel corner.
   * xs/s/m are written in px, not the template's rem: the original's small
   * corners are fixed px. The odd measured
   * corners (2, 5, 6, 10, 15px) stay literal where they are used. */
  --radius-xs: 4px;       /* the Facebook tile, the skip link */
  --radius-s: 8px;        /* tabs, the enquiry note, FAQ answer box */
  --radius-m: 12px;       /* FAQ pills */
  --radius-l: 1.25rem;    /* cards, panels, photos */
  --radius-round: 50%;
  --radius-pill: 999px;

  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;

  /* Layers. The template's six, retuned: the header sits at 40 so it clears
   * every content layer, and two site layers are added -- flat (0, a
   * stacking context at ground level) and float (3, the cards and
   * illustrations that ride up over a wave). */
  --layer-behind: -1;
  --layer-flat: 0;
  --layer-base: 1;
  --layer-raised: 2;
  --layer-float: 3;
  --layer-overlay: 4;
  --layer-nav: 40;
  --layer-top: 2147483647;

  /* Type */
  --font-display: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --shell:      1450px;  /* content width, per the practice: 1450px on wide screens */
  /* The header bar's height. Every hero band is pulled up underneath the
     (transparent) header by --hero-lift so its background and decoration run
     to the top of the page and show beside the bar, as on the original. */
  --header-h:   134px;
  --hero-lift:  var(--header-h);
  --gutter:     calc(var(--space-l-2xl) - var(--space-s-l));   /* 14 on a phone, 40 at 1440 */
  /* The template's container, fed by the site's own shell and gutter: its
   * content box is exactly min(100% - 2 gutters, shell). */
  --grid-gutter: var(--gutter);
  --grid-max-width: calc(var(--shell) + 2 * var(--grid-gutter));
  --band-pad:   var(--space-xl-2xl);                /* 48px floor, measured at 390 */
  /* The clear zone a hero keeps under its illustration (150px on the
   * original at every desktop width; 240 on the forest hero), and how far
   * the card below rides up into a hero on a phone/tablet. Composed from the
   * ladder so they move with it. */
  --hero-tail: calc(var(--space-3xl) + var(--space-m));
  --hero-tail-forest: calc(var(--space-3xl) + var(--space-3xl));
  --rise: var(--space-l-xl);
  /* The divider bands' desktop height: the original's own 179px. */
  --divider-h: 179px;
  /* GEOMETRY, not spacing: the floor under the full-width people illustration
   * and the stacked photo cards -- 42vw tall, never under 11rem, capped where
   * each component needs it. One curve, defined once. */
  --photo-fluid: clamp(11rem, 42vw, 26.25rem);
}

/* The root stays 100%: the original's fluid root (calc(0.7498rem +
 * 0.31266vw)) is gone, because the steps already carry the fluidity and a
 * fluid root under them would scale everything twice. */
html {
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-l);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;           /* decoration deliberately overhangs */
}

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

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-700); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

/* Form controls inherit typography rather than using browser chrome. */
:where(input, button, textarea, select) { font: inherit; }   /* zero specificity: "Form controls" below must win */

/* ═══ Form controls & focus ═══ form-controls:begin ══════════════════════
 * A text field's look, and every focus ring on the site, are set ONCE,
 * here: by the --field-* and --focus-ring* tokens and a few base rules.
 * Every text-like control on the site (contact, search, careers, booking,
 * anything mediflare.js or Connect writes) inherits it, so they match by
 * construction.
 *
 * - This section is copied VERBATIM from _template and never edited in a
 *   site: check-system.sh fails the site if its copy differs by a character.
 *   A site differs only in TOKEN VALUES, set in the site layer's own :root,
 *   below this section (a later :root wins over the defaults here).
 * - Never restyle a control inside a component. A component rule may place
 *   a field (grid, margin, width) but never sets its border, radius,
 *   background or height -- check-system.sh fails the site if one does.
 * - Fields and buttons share ONE corner, --control-radius: set it in the
 *   site layer's :root and both follow. Never set --field-radius
 *   (check-system.sh fails it), except to 0 in underline mode below;
 *   pill buttons mean pill fields.
 * - The base rules are at zero specificity (:where), so any token change
 *   reaches every field and nothing here outranks a deliberate override.
 * - ONE focus ring per site, on links, buttons and fields alike: an outline
 *   in --focus-ring at --focus-ring-w. No other rule sets a focus outline,
 *   colour or box-shadow (check-system.sh fails one); outline-offset may be
 *   adjusted where a ring would be clipped.
 * - Underline-only fields: set --field-border-w: 0,
 *   --field-border-bottom: var(--border-thin) solid <colour> and
 *   --field-radius: 0 (an underline has no corners to share; a rounded one
 *   curves at its ends, and buttons keep --control-radius); optionally
 *   --field-focus-border-bottom: var(--focus-ring-w) solid var(--focus-ring)
 *   so the underline thickens with the ring. No extra rules. Underline
 *   mode is the only time a site sets --field-radius, and check-system.sh
 *   then requires the 0.
 * - Dark panels and bands: the container re-sets the tokens for its
 *   descendants, never the rules. Tokens defined here are resolved on :root,
 *   so re-set the leaf values, not the ones they derive from:
 *     .band--dark {
 *         --focus-ring: var(--surface);
 *         --field-bg: transparent;
 *         --field-ink: var(--on-primary);
 *         --field-border: var(--on-primary);
 *         --field-placeholder: color-mix(in oklab, var(--on-primary) 70%, transparent);
 *     }
 *   --focus-ring must reach >= 3:1 against every ground it is drawn on.
 * The guard finds this section by the begin/end markers; keep both.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
    --field-h: var(--target-min);                 /* the single-line height: exact, never below the 44px target */
    --field-textarea-h: calc(var(--field-h) * 3); /* the textarea's minimum height */
    --field-pad-block: var(--space-2xs);          /* textarea only; a one-line field centres its text in --field-h */
    --field-pad-inline: var(--space-xs);
    --field-font-size: max(var(--step-0), 1rem);  /* never below 16px, or iOS zooms the page on focus */
    --field-leading: var(--leading-m);
    --field-weight: var(--weight-400);            /* one weight wherever the field sits */
    --field-radius: var(--control-radius);        /* = the .btn radius, by construction; never set it */
    --field-textarea-radius: min(var(--field-radius), var(--radius-l));   /* a pill textarea is a capsule; cap it */
    --field-bg: var(--surface);
    --field-ink: var(--ink);
    --field-border-w: var(--border-thin);
    --field-border: var(--border-strong);
    --field-border-hover: var(--ink-soft);
    --field-placeholder: var(--ink-soft);
    /* Unset by default, so they follow --field-border-w/--field-border:
     * --field-border-bottom          the resting bottom edge (underline mode)
     * --field-focus-border-bottom    the bottom edge while focused
     * --field-focus-outline          the field's ring; leave it to the default */
    --focus-ring: var(--primary);                 /* >= 3:1 against --bg, --field-bg and every ground it lands on */
    --focus-ring-w: var(--border-medium);         /* >= --field-border-w, so the ring covers the border */
}

/* THE focus ring: every interactive element, always. Fields refine the
 * offset and radius below; nothing else sets a focus outline. */
:focus-visible {
    outline: var(--focus-ring-w) solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

label {
    display: block;
    margin-bottom: var(--space-3xs);
    font-size: var(--step--1);
    font-weight: var(--weight-600);
    color: var(--ink-strong);
}

/* THE base rule. Every text-like control: text, email, tel, search, number,
 * date, url, password, select and textarea -- not checkboxes, radios,
 * ranges, files or button-type inputs. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea) {
    --_field-radius: var(--field-radius);
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    height: var(--field-h);
    min-height: var(--field-h);
    padding: 0 var(--field-pad-inline);
    font: inherit;
    font-size: var(--field-font-size);
    font-weight: var(--field-weight);
    line-height: var(--field-leading);
    color: var(--field-ink);
    background-color: var(--field-bg);
    border: var(--field-border-w) solid var(--field-border);
    border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border));
    border-radius: var(--_field-radius);
    box-shadow: none;
    transition: border-color var(--duration-fast) var(--ease-out);
}

:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):hover {
    border-color: var(--field-border-hover);
}

/* One edge on focus. The offset pulls the ring in by the border's width, so
 * it is drawn ON the border (covering it) rather than outside it; the border
 * and shadow are held at rest so nothing draws a second edge. Specificity
 * 0,1,0 and later than the global :focus-visible, so it wins over that one
 * (whose offset and radius suit links, not fields). In underline mode the
 * bottom edge may take --field-focus-border-bottom as well. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus {
    border-color: var(--field-border);
    border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border));
    box-shadow: none;
    outline: none;
}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus-visible {
    outline: var(--field-focus-outline, var(--focus-ring-w) solid var(--focus-ring));
    outline-offset: calc(var(--field-border-w) * -1);
    border-bottom: var(--field-focus-border-bottom, var(--field-border-bottom, var(--field-border-w) solid var(--field-border)));
    border-radius: var(--_field-radius);
}

:where(textarea) {
    --_field-radius: var(--field-textarea-radius);
    height: auto;
    min-height: var(--field-textarea-h);
    padding-block: var(--field-pad-block);
    resize: vertical;
}

/* The chevron is one conic-gradient wedge in --field-ink: tokens only, no
 * image, so it recolours with the palette and the scheme. (Two half-square
 * linear gradients leave a seam where they meet.) */
:where(select) {
    padding-inline-end: calc(var(--field-pad-inline) * 2 + var(--space-xs));
    background-image: conic-gradient(from -45deg at 50% 100%, var(--field-ink) 90deg, transparent 0);
    background-position: calc(100% - var(--field-pad-inline)) 50%;
    background-size: calc(var(--space-3xs) * 2.5) calc(var(--space-3xs) * 1.25);
    background-repeat: no-repeat;
    cursor: pointer;
}
:where(select[multiple], select[size]) { height: auto; padding-block: var(--field-pad-block); padding-inline-end: var(--field-pad-inline); background-image: none; }

:where(input, textarea)::placeholder { color: var(--field-placeholder); opacity: 1; }

/* The browser's own clear (x) in a search box, redrawn as a mask so it takes
 * --field-ink instead of the browser's grey. */
:where(input[type=search])::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 1em;
    block-size: 1em;
    cursor: pointer;
    background-color: var(--field-ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

fieldset { margin: 0 0 var(--space-m); padding: 0; border: 0; }

/* ═══ form-controls:end (Form controls & focus) ═════════════════════════ */

/* This site's field look and focus ring, as the section above reads them:
   the enquiry form's fields (sage edge on a white ground, the buttons' 5px
   corner: --control-radius, live's Book button's corner, which every button
   and field shares). The height is the .btn's own (its padding and line box), so a
   field and the button beside it -- Search, Submit -- are one height.
   ONE ring, forest, on links, buttons and fields alike: >= 9:1 on the sand,
   cream and white grounds, 5.7:1 on muted green, 4.3:1 on sage, 3.1:1 on
   the orange. Forest and terracotta grounds re-set it (below). */
:root {
  --control-radius: 5px;                  /* the .btn corner, and every field's */
  --field-h: max(var(--target-min), calc(var(--step-1) * var(--leading-m-l) + 2 * var(--space-xs)));   /* = .btn height */
  --field-pad-block: var(--space-2xs);
  --field-pad-inline: var(--space-xs);
  --field-bg: var(--surface);
  --field-ink: var(--ink);
  --field-border-w: var(--border-thin);
  --field-border: var(--sage);
  --field-border-hover: var(--sage);      /* the enquiry fields never changed edge on hover */
  --field-placeholder: var(--ink-soft);   /* 4.9:1 on the white field */
  --focus-ring: var(--primary);
  --focus-ring-w: var(--border-medium);
}

/* Dark grounds: forest bands and panels, the terracotta mosaic. The forest
   ring would vanish there, so links, buttons and fields take a white one
   (11:1 on forest, 3.9:1 on terracotta). The enquiry panel's fields are
   dark-panel fields, as the template draws them: the forest shows through,
   white type, a sage edge (4.3:1) that the white ring replaces on focus,
   and a placeholder at 6.1:1. (A white field there could show no ring:
   white on white inside, and forest on forest outside.) Light cards inside
   a dark band are light grounds again. */
.is-forest,
.is-forest-band,
.is-terra,
.panels-shell,
.band--legal-hero,
.band--home-services,
.enquiry { --focus-ring: var(--surface); }
.enquiry {
  --field-bg: transparent;
  --field-ink: var(--on-primary);
  --field-border: var(--sage);
  --field-border-hover: var(--on-primary);
  --field-placeholder: color-mix(in oklab, var(--on-primary) 70%, transparent);
}
.enquiry__note,
.card--cream,
.info-card { --focus-ring: var(--primary); }   /* light cards inside a dark band */


/* ── Shared type roles ──────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;   /* source text is uppercase; the merge tag is not */
  font-size: var(--step-3);            /* 1.5rem in the source */
  line-height: var(--leading-l);
  font-weight: var(--weight-700);
  color: var(--tertiary);
  margin: 0;
}

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-700);
  font-size: var(--step-8);          /* 3rem in the source; .section-title is its 2.5rem */
  line-height: var(--leading-s);
  color: var(--primary);
  margin: 0;
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-700);
  font-size: var(--step-7);
  line-height: var(--leading-s);
  color: var(--primary);
  margin: 0;
}

.prose > p + p { margin-top: var(--space-xs); }
.prose strong { font-weight: var(--weight-700); color: inherit; }
.prose { font-size: var(--step-0); line-height: var(--leading-l); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

/* The search box's Search and the overlay's Close are buttons the platform
   component writes (it takes no classes), so they join these rules rather
   than copying them. */
.btn,
.mf-search__submit,
.mf-search-overlay__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: var(--target-min);   /* the 44px tap target */
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--control-radius);
  font-family: var(--font-display);
  font-weight: var(--weight-600);
  font-size: var(--step-1);          /* 1.15rem in the source */
  line-height: var(--leading-m-l);
  text-align: center;
  text-decoration: none;
  border: 0;                         /* a <button>.btn otherwise keeps the UA's inset border */
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.btn--primary,
.mf-search__submit,
.mf-search-overlay__close { background: var(--primary); color: var(--surface); }
.btn--primary:hover,
.btn--primary:focus-visible,
.mf-search__submit:hover, .mf-search__submit:focus-visible,
.mf-search-overlay__close:hover, .mf-search-overlay__close:focus-visible { background: var(--tertiary); color: var(--surface); }   /* the original hovers to the orange */
.btn--lg { font-size: var(--step-1); font-weight: var(--weight-700); }
.btn--accent { background: var(--tertiary); color: var(--surface); }
.btn--accent:hover,
.btn--accent:focus-visible { background: var(--primary); color: var(--surface); }   /* orange buttons hover to forest, so the change still reads */
/* On a forest band the forest button disappears. The source inverts it there. */
.is-forest .btn--primary,
.band--info.is-forest .btn--primary { background: var(--surface); color: var(--primary); }
.is-forest .btn--primary:hover,
.is-forest .btn--primary:focus-visible { background: var(--tertiary); color: var(--surface); }
.btn__icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }



/* ── Bands ──────────────────────────────────────────────────────────────── */

.band { position: relative; }

/* Interior pages that open with a title rather than a hero. .band supplies no
 * vertical padding of its own - each band--home-* variant brings its own - so
 * a plain band needs this or its content sits flush against the header. */
.band--page-head { padding-block: var(--space-2xl) var(--space-l); }
.band--page-head h1 { margin-bottom: var(--space-2xs); }
.band--page-head .display { margin-bottom: var(--space-s); }
.band--page-head p { max-width: 62ch; }
.band--page-head h1 { font-size: var(--step-5); }   /* was the UA's 2em */

/* The hub widget mounts here and is empty until the site is live. */
#mediflare-yourhealth-hub { min-height: 8rem; margin-bottom: var(--space-2xl); }
/* The container is the template's .u-container: centred, capped, and padded
 * by the gutter rather than narrowed by it. Its content box is exactly the
 * old min(100% - 2 gutters, shell); .band__inner keeps only its stacking. */
.u-container {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}
.band__inner {
  position: relative;
  z-index: var(--layer-raised);
}


/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: var(--layer-nav);
  background: transparent;              /* the hero shows beside the bar */
  padding: 0 var(--gutter);
}
.site-header__bar {
  width: min(100%, var(--shell));
  margin-inline: auto;
  background: var(--sand-deep);
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  padding: var(--space-m) var(--space-l-xl);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.site-header__logo { flex: none; display: block; }
.site-header__logo img { width: 210px; max-width: 46vw; height: auto; }   /* 134px bar, as measured */

.site-nav { margin-inline: auto; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-s-m);
}
.site-nav__list a {
  font-family: var(--font-display);
  font-weight: var(--weight-600);
  font-size: var(--step-1);
  line-height: var(--leading-m-l);
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.site-nav__list a:hover { color: var(--tertiary); }
/* NOTE: `.is-active` is deliberately NOT styled here. The shared partial ships
   About hard-coded as active, which is wrong on 7 of these 8 pages, so the
   active state is driven from the body class instead — see "Active nav". */

.site-header__cta { flex: none; }

/* The menu square: a <button> (see partials/header.html), hidden on desktop. */
.nav-toggle { display: none; border: 0; font: inherit; }


/* ── Active nav ─────────────────────────────────────────────────────────────
 * The shared header partial is byte-identical on every page and an include
 * takes no parameters, so the current item cannot live in the partial. The
 * colour comes from the `page-<slug>` class on <body>, matched by the link's
 * href (static, no script); the header script adds aria-current="page" to the
 * same link for assistive technology. The hrefs carry no trailing slash, as
 * the menu's links do -- with one, these rules matched nothing.
 * ------------------------------------------------------------------------- */
.site-nav__list a:hover     { color: var(--tertiary); }

.page-home             .site-nav__list a[href="/"],
.page-about            .site-nav__list a[href="/about"],
.page-services         .site-nav__list a[href="/services"],
.page-contact          .site-nav__list a[href="/contact"],
.page-patient-hub      .site-nav__list a[href="/patient-hub"],
.page-practice-policy  .site-nav__list a[href="/practice-policy"] {
  color: var(--tertiary);
}
/* health-articles, privacy-policy and terms-and-conditions carry NO active
   item in the original — matching it by adding no rule at all. */

/* ── Waves ──────────────────────────────────────────────────────────────── */
/* Elementor renders a bottom divider as an SVG wider than the band, centred
   with a negative translate and flipped 180deg on the wrapper. Reproduced
   here with a percentage width + translate so it scales instead of pinning. */

.wave {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 300%;
  transform: translateX(-50%);
  line-height: 0;
  pointer-events: none;
  z-index: var(--layer-base);
}
.wave svg { display: block; width: 100%; }
.wave--hero        { width: 300%; height: 12.99vw; }
.wave--hero svg    { height: 100%; fill: var(--secondary); }

.wave--divider-c     { width: 169.1%; height: 9.65vw; bottom: -1px; transform: translateX(-50%) scaleX(-1); }
.wave--divider-c svg { height: 100%; fill: var(--sand-deep); }

.wave--divider-e     { width: 100.1%; height: 11.25vw; bottom: -1px; }
.wave--divider-e svg { height: 100%; fill: var(--primary); }

.wave--divider-g     { width: 153.1%; height: 12.08vw; bottom: -1px; transform: translateX(-50%) scaleX(-1); }
.wave--divider-g svg { height: 100%; fill: var(--sand); }


/* ── Decoration: masked colour blobs ────────────────────────────────────── */
/* Not images — each is a solid-colour element wearing a PNG/SVG mask, exactly
   as the original builds them. Sized in % of the band so they scale. */

/* The .deco layer spans the band and does NOT clip: the BAND's own
   overflow:hidden does the clipping, exactly as the original relies on.
   Clipping here as well would hide shapes that legitimately overhang. */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: var(--layer-flat); }
.deco__shape {
  position: absolute;
  display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;  mask-position: 50% 50%;
  -webkit-mask-size: contain;      mask-size: contain;
}

/* Geometry below is measured, not guessed. Each shape's element box is the
   size of its own absolutely-positioned wrapper and ROTATES IN PLACE; the
   values getBoundingClientRect reports (559x1355, 1366x653) are the rotated
   bounding boxes of 1350x203 and 1350x260 wrappers. Percentages are taken
   against the band so the whole decorative layer scales with the page. */

/* ── Divider bands ──────────────────────────────────────────────────────── */

.band--divider {
  position: relative;
  overflow: hidden;                     /* the clipping IS the design */
}
.band--divider-terra  { background: var(--secondary); }
.band--divider-sand   { background: var(--sand-deep); }
.band--divider-forest { background: var(--primary); }
.band--divider-muted  { background: var(--muted-green); }
.band--divider-cream  { background: var(--bg); }
/* The divider bands' heights (179 / 112 / 74px, the original's own) are set
   in the FIDELITY PASS below. */


.dotted-rule {
  border: 0;
  height: 20px;
  margin: var(--space-s-l) 0;
  background: var(--secondary);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;  mask-size: auto 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 126 26' fill='black' stroke='none'%3E%3Cpath d='M3,10.2c2.6,0,2.6,2,2.6,3.2S4.4,16.5,3,16.5s-3-1.4-3-3.2S0.4,10.2,3,10.2z M18.8,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.2-1.4-3.2-3.2S17,10.2,18.8,10.2z M34.6,10.2c1.5,0,2.6,1.4,2.6,3.2s-0.5,3.2-1.9,3.2c-1.5,0-3.4-1.4-3.4-3.2S33.1,10.2,34.6,10.2z M50.5,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.3-0.9-3.3-2.6S48.7,10.2,50.5,10.2z M66.2,10.2c1.5,0,3.4,1.4,3.4,3.2s-1.9,3.2-3.4,3.2c-1.5,0-2.6-0.4-2.6-2.1S64.8,10.2,66.2,10.2z M82.2,10.2c1.7,0.8,2.6,1.4,2.6,3.2s-0.1,3.2-1.6,3.2c-1.5,0-3.7-1.4-3.7-3.2S80.5,9.4,82.2,10.2zM98.6,10.2c1.5,0,2.6,0.4,2.6,2.1s-1.2,4.2-2.6,4.2c-1.5,0-3.7-0.4-3.7-2.1S97.1,10.2,98.6,10.2z M113.4,10.2c1.2,0,2.2,0.9,2.2,3.2s-0.1,3.2-1.3,3.2s-3.1-1.4-3.1-3.2S112.2,10.2,113.4,10.2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 126 26' fill='black' stroke='none'%3E%3Cpath d='M3,10.2c2.6,0,2.6,2,2.6,3.2S4.4,16.5,3,16.5s-3-1.4-3-3.2S0.4,10.2,3,10.2z M18.8,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.2-1.4-3.2-3.2S17,10.2,18.8,10.2z M34.6,10.2c1.5,0,2.6,1.4,2.6,3.2s-0.5,3.2-1.9,3.2c-1.5,0-3.4-1.4-3.4-3.2S33.1,10.2,34.6,10.2z M50.5,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.3-0.9-3.3-2.6S48.7,10.2,50.5,10.2z M66.2,10.2c1.5,0,3.4,1.4,3.4,3.2s-1.9,3.2-3.4,3.2c-1.5,0-2.6-0.4-2.6-2.1S64.8,10.2,66.2,10.2z M82.2,10.2c1.7,0.8,2.6,1.4,2.6,3.2s-0.1,3.2-1.6,3.2c-1.5,0-3.7-1.4-3.7-3.2S80.5,9.4,82.2,10.2zM98.6,10.2c1.5,0,2.6,0.4,2.6,2.1s-1.2,4.2-2.6,4.2c-1.5,0-3.7-0.4-3.7-2.1S97.1,10.2,98.6,10.2z M113.4,10.2c1.2,0,2.2,0.9,2.2,3.2s-0.1,3.2-1.3,3.2s-3.1-1.4-3.1-3.2S112.2,10.2,113.4,10.2z'/%3E%3C/svg%3E");
}


/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--sand);
  padding: 0 var(--gutter) var(--space-s-m);
}
.site-footer__card {
  width: min(100%, var(--shell));
  margin-inline: auto;
  background: var(--sand-deep);
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-l-xl);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
  align-items: start;
}
.site-footer__logo img { width: min(100%, 17.9rem); }
@media (min-width: 769px) { .site-footer__logo { display: inline-block; vertical-align: top; width: min(100%, 17.9rem); } }   /* an inline link round a block image draws no focus ring */
.site-footer__blurb { margin-top: var(--space-s); max-width: 20.6em; }   /* 369px at 18px in the source: breaks after "families" */

.site-footer__heading {
  font-family: var(--font-body);
  font-weight: var(--weight-700);
  font-size: var(--step-0);
  line-height: var(--leading-l);
  color: var(--primary);
  margin-bottom: var(--space-xs);
}
.site-footer__heading--follow { margin-top: var(--space-s); }

.site-footer__links a,
.site-footer__contact a {
  text-decoration: none;
  font-weight: var(--weight-600);
  color: var(--primary);
  transition: color .18s ease;
}
.site-footer__links a:hover,
.site-footer__contact a:hover { color: var(--tertiary); }
.site-footer__links li + li { margin-top: var(--space-3xs); }

/* Footer hours: an {{#each hours_grouped}} <dl>, one <div> per day group
   Rails computes. As on the original: the day group in bold over its time in
   regular, all in the body ink, no space between groups. */
.site-footer__hours { margin: 0; font-size: var(--step-0); line-height: var(--leading-l); color: var(--ink); }
.site-footer__hours dt { font-weight: var(--weight-700); }
.site-footer__hours dd { margin: 0; }
.site-footer__hours-notes { margin: var(--space-2xs) 0 0; font-size: var(--step-0); line-height: var(--leading-l); color: var(--ink); }

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 1.55rem;
}
.site-footer__contact svg { width: .875rem; height: .875rem; fill: var(--tertiary); flex: none; }

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-round);
  background: var(--primary);
  transition: background-color .18s ease;
}
.site-footer__social a:hover { background: var(--terracotta-strong); }
.site-footer__social svg { width: 1.25rem; height: 1.25rem; fill: var(--surface); }

.site-footer__bottom {
  margin-top: var(--space-l-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s-m);
  font-size: var(--step--2);
}
.site-footer__copy { color: var(--ink); }
.site-footer__powered {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--step--2); color: var(--ink);
}
.site-footer__powered a { font-weight: var(--weight-600); text-decoration: none; color: var(--primary); }
.site-footer__legal { margin-left: auto; display: inline-flex; gap: var(--space-2xs); align-items: center; }
.site-footer__legal a { font-weight: var(--weight-500); text-decoration: none; }
.site-footer__legal a:first-child { color: var(--primary); }
.site-footer__legal a:last-child  { color: var(--ink); }
.site-footer__sep { color: var(--terracotta-strong); }


/* ── Waves: one modifier per measured instance ───────────────────────────── */
.wave--services-hero     { width: 100.1%; height: 15.56vw; bottom: -1px; transform: translateX(-50%); }
.wave--services-hero svg { height: 100%; fill: var(--muted-green); }
.wave--divider-cream     { width: 100.1%; height: 9.65vw; bottom: -1px; transform: translateX(-50%); }
.wave--divider-cream svg { height: 100%; fill: var(--bg); }
.wave--divider-terra     { width: 100.1%; height: 9.65vw; bottom: -1px; transform: translateX(-50%); }
.wave--divider-terra svg { height: 100%; fill: var(--secondary); }
.wave--mosaic-top-terra     { width: 100.1%; height: 2.01vw; top: -1px; bottom: auto; transform: translateX(-50%) rotate(180deg); }
.wave--mosaic-top-terra svg { height: 100%; fill: var(--secondary); }
.wave--divider-sand     { width: 100.1%; height: 9.65vw; bottom: -1px; transform: translateX(-50%); }
.wave--divider-sand svg { height: 100%; fill: var(--sand); }
.wave--contact-top-forest     { width: 100.1%; height: 24.17vw; top: -1px; bottom: auto; transform: translateX(-50%) rotate(180deg); }
.wave--contact-top-forest svg { height: 100%; fill: var(--primary); }
.wave--contact-sand     { width: 100.1%; height: 9.65vw; bottom: -1px; transform: translateX(-50%); }
.wave--contact-sand svg { height: 100%; fill: var(--sand); }
.wave--pp-hero     { width: 100.1%; height: 12.99vw; bottom: -1px; transform: translateX(-50%); }
.wave--pp-hero svg { height: 100%; fill: var(--primary); }
.wave--pp-terra     { width: 100.1%; height: 9.65vw; bottom: -1px; transform: translateX(-50%); }
.wave--pp-terra svg { height: 100%; fill: var(--secondary); }
.wave--pp-top-terra     { width: 100.1%; height: 2.01vw; top: -1px; bottom: auto; transform: translateX(-50%) rotate(180deg); }
.wave--pp-top-terra svg { height: 100%; fill: var(--secondary); }
.wave--pp-cream     { width: 100.1%; height: 9.65vw; bottom: -1px; transform: translateX(-50%); }
.wave--pp-cream svg { height: 100%; fill: var(--bg); }
.wave--pp-forest     { width: 100.1%; height: 11.25vw; bottom: -1px; transform: translateX(-50%); }
.wave--pp-forest svg { height: 100%; fill: var(--primary); }
.wave--pp-sand     { width: 100.1%; height: 12.08vw; bottom: -1px; transform: translateX(-50%); }
.wave--pp-sand svg { height: 100%; fill: var(--sand); }

/* ── Decoration instances ───────────────────────────────────────────────── */
.deco--hero-flower .deco__shape {
  left: -5vw; top: calc(-1vw + 80px);   /* lowered 80px: it sat against the nav */
  width: 16vw; aspect-ratio: 1;
  background: var(--secondary);
  -webkit-mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
          mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
  transform: rotate(-20deg);
}
.deco--hero-shape .deco__shape {
  left: 90%; top: 39vw;
  width: 15vw; aspect-ratio: 1;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
          mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
  transform: rotate(10deg);
}
.deco--contact-flower .deco__shape {
  left: -6vw; top: -8vw;
  width: 17vw; aspect-ratio: 1;
  background: var(--sage);
  -webkit-mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
          mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
  transform: rotate(-25deg);
}
.deco--contact-shape .deco__shape {
  left: 91%; top: 21vw;
  width: 14vw; aspect-ratio: 1;
  background: var(--secondary);
  -webkit-mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
          mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
  transform: rotate(10deg);
}
.deco--pp-flower .deco__shape {
  left: 1.5vw; top: 12vw;
  width: 15vw; aspect-ratio: 1;
  background: var(--secondary);
  -webkit-mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
          mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
  transform: rotate(-20deg);
}
/* Below 1120 the header stacks above the hero, the heading centres nearly
   full width, and at 12vw down the flower sat across the "A" of the H1 and
   the lead (up to 50px deep). Tucked into the band's top-left corner it
   clears the heading by 50px or more and the eyebrow by 24px or more,
   768-1119; the band clips the rest. Hidden below 768 (see below). */
@media (max-width: 1119px) {
  .deco--pp-flower .deco__shape { left: -4vw; top: -6vw; }
}
.deco--pp-shape .deco__shape {
  left: 91%; top: 31vw;
  width: 14vw; aspect-ratio: 1;
  background: var(--muted-green);
  -webkit-mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
          mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
  transform: rotate(10deg);
}
.deco--divider-forest .deco__shape {
  left: 18.7%; top: 0;
  width: 100%; aspect-ratio: 1440 / 470;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: scaleX(-1);
}
.deco--divider-forest-2 .deco__shape {
  left: 0.7%; top: 0;
  width: 100%; aspect-ratio: 1440 / 591;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: none;
}
.deco--divider-forest-mirror .deco__shape {
  left: -40.7%; top: -47.9%;
  width: 100%; aspect-ratio: 1440 / 470;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: rotate(-11deg) scaleX(-1);
}
.deco--divider-muted .deco__shape {
  left: 0.7%; top: 0;
  width: 100%; aspect-ratio: 1440 / 470;
  background: var(--sage);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: none;
}
.deco--divider-terra-blob .deco__shape {
  left: 13.8%; top: 0;
  width: 100%; aspect-ratio: 1440 / 560;
  background: var(--secondary);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: none;
}
.deco--divider-accent-mirror .deco__shape {
  left: -37.2%; top: -45%;
  width: 100%; aspect-ratio: 1440 / 470;
  background: var(--sage);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: rotate(-18deg) scaleX(-1);
}
.deco--divider-forest-c .deco__shape {
  left: -15.8%; top: 0;
  width: 100%; aspect-ratio: 1440 / 600;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: scaleX(-1);
}

/* ==========================================================================
   PAGE BANDS
   Every band below was measured from the original at 1440/1024/768/390 with
   `_p7/grids.mjs`. Column counts are stated explicitly per breakpoint rather
   than left to auto-fit, because Elementor emits explicit counts and auto-fit
   silently disagrees (FINDINGS2 case 3).
   ========================================================================== */

/* ── Generic page hero (services, contact, practice-policy) ─────────────── */
/* One construct serves all three: centred eyebrow + display + lead + CTA,
   over a band that owns its own wave and decoration. */

.band--page-hero {
  overflow: clip;    /* clips like hidden, but is NOT a scroll container, so the
                        shapes' view() scroll timelines resolve to the page */
  /* (pulled under the header by the absolute-positioned header, see FIDELITY PASS) */
  padding-block: calc(var(--space-l-2xl) + var(--hero-lift)) var(--space-l-2xl);
}
.band--page-hero.is-forest { padding-top: calc(var(--rise-deep) + var(--hero-lift)); }
.band--page-hero.is-cream  { background: var(--bg); }
.band--page-hero.is-forest { background: var(--primary); }

.page-hero { text-align: center; display: grid; justify-items: center; }
.page-hero__eyebrow { max-width: min(100%, 46.7rem); }
.page-hero__title   { margin-top: var(--space-xs); max-width: min(100%, 18em); }   /* 875px at 49.5px: Patient Information's title stays on one line */
.page-hero__lead    { margin-top: var(--space-s); max-width: min(100%, 34em); font-size: var(--step-1); }
/* Line lengths in em of the lead's own size: the source's column width over
   its font size, so the text breaks on the same words the source does.
   Contact's lead is a 945px column; Patient Information's is body-sized. */
.page-contact .page-hero__lead         { max-width: min(100%, 46.7em); }
.page-practice-policy .page-hero__lead { max-width: min(100%, 48.8em); font-size: var(--step-0); }
.page-hero__cta     { margin-top: var(--space-m); }

/* On the forest hero the type inverts. */
.is-forest .page-hero__title,
.is-forest .page-hero__lead { color: var(--surface); }

/* The wide people illustration that closes several bands. A hard 420px tall
   in the source at EVERY width (an authoring quirk); expressed as a ratio so
   it scales instead of leaving a blank slab on a phone (FINDINGS2 case 4). */
.people-strip {
  width: 90%;
  margin-inline: auto;
  margin-top: var(--space-s-l);
  aspect-ratio: 1350 / 420;
  /* No background fill and no radius: in the source the figures sit directly on
     the band's own colour. Filling it painted an opaque card over the
     decoration behind — the art is a cut-out, not a photo. */
  background: url("/assets/images/people.7ad65d36ec.webp") center bottom / contain no-repeat;
  position: relative;
  z-index: var(--layer-float);
}
.people-strip--alt {
  width: 74%;
  aspect-ratio: 1498 / 589;               /* the figures alone, cropped */
  background-image: url("/assets/images/patient-family-illustration-olive.cd1403f492.webp");
}

/* The standalone people band that sits between content and footer. */
/* The people band sits on the SAME sand as the footer below it. Measured from
 * the original: rgb(245,241,228) continuously from the illustration down
 * through the footer. Leaving it transparent let the cream page ground show
 * through, so the illustration sat on a different colour from the footer and
 * the seam was visible. */
.band--people-strip { background: var(--sand); padding-inline: var(--gutter); }
.band--people-strip .people-strip { margin-top: 0; }

/* ── Cards, the recurring primitive ─────────────────────────────────────── */

.card {
  border-radius: var(--radius-l);
  padding: var(--space-s-m) var(--space-s-m);
}
.card--sand    { background: var(--sand); }
.card--neutral { background: var(--sand-deep); }
.card--cream   { background: var(--bg); }
.card--muted   { background: var(--muted-green); }

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-1); line-height: var(--leading-m); font-weight: var(--weight-700);
  color: var(--primary);
}
.card__lead { margin-top: var(--space-2xs); font-weight: var(--weight-600); color: var(--primary); }
.card__body { margin-top: var(--space-2xs); }
.contact-split .card__body { font-size: var(--step-1); max-width: 27em; }   /* 521px at 20px */
.card__body p + p,
.card__body ul + p,
.card__body p + ul { margin-top: var(--space-2xs); }
.card__body ul { list-style: disc; padding-left: var(--space-s); }
.card__body li + li { margin-top: var(--space-3xs); }

/* A card whose whole face is a photo. */
.photo-card {
  border-radius: var(--radius-l);
  background-size: cover;
  background-position: center;
}

/* ── Services: the tab panels, rebuilt as stacked sections ──────────────── */
/* The original is an Elementor n-tabs widget: six panels, one visible, driven
   by JS. v2 forbids JS, so every panel is rendered as its own section. See
   FINDINGS-PAGES.md — this is the single largest structural deviation. */

.band--service-panels { background: var(--muted-green); padding-bottom: var(--space-l-xl); }

.panels-shell {
  background: var(--primary);
  border-radius: var(--radius-l);
  padding: var(--space-l-xl);
  margin-top: calc(-1 * var(--rise-deep));   /* rides up into the hero wave */
  position: relative;
  z-index: var(--layer-float);
  color: var(--surface);
}

/* The tab strip becomes a plain in-page index — real links, no JS. */
.panel-index {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-2xs-xs);
  margin-bottom: var(--space-l-xl);
}
.panel-index a {
  font-family: var(--font-display);
  font-weight: var(--weight-600); font-size: var(--step--2); line-height: var(--leading-m);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--surface);
  border: var(--border-thin) solid var(--sage);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-xs);
  transition: background-color .18s ease, color .18s ease;
}
.panel-index a:hover,
.panel-index a:focus-visible { background: var(--tertiary); border-color: var(--tertiary); }

.service-panel { scroll-margin-top: var(--space-m); }
.service-panel + .service-panel { margin-top: var(--space-l-xl); }
.service-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-m-l);
  align-items: stretch;
}
.service-panel__title {
  font-family: var(--font-display);
  font-size: var(--step-5); line-height: var(--leading-xs); font-weight: var(--weight-700);
  color: var(--surface);
  text-transform: uppercase;
}
.service-panel__lead { margin-top: var(--space-xs); font-size: var(--step-0); color: var(--surface); }
.service-panel__body { margin-top: var(--space-xs); color: var(--surface); font-size: var(--step-1); max-width: 20.6em; }   /* 401px at 20px */
.service-panel__body p + p { margin-top: var(--space-2xs); }
.service-panel__cta  { margin-top: var(--space-s); }
.service-panel__figure { margin: 0; }
.service-panel__figure { height: 100%; }
.service-panel__figure img {
  width: 100%;
  /* Fill the row rather than forcing the source's 398x350 box: the copy column
     is the taller of the two, and a fixed ratio left a dead gap under the CTA. */
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-l);
}
/* The 4-up feature chips under each panel. The source grid is 4 -> 2 -> 1. */
.panel-points {
  margin-top: var(--space-s);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
  grid-column: 1 / -1;
}
.panel-points li {
  border-top: var(--border-thin) solid var(--sage);
  padding-top: var(--space-2xs);
  font-weight: var(--weight-600);
  color: var(--surface);
}

/* ── Services: allied health / podiatry ─────────────────────────────────── */

.band--allied { background: var(--bg); padding-block: var(--space-l-2xl) var(--space-l-xl); }
.allied__head { text-align: center; display: grid; justify-items: center; }
.allied__title { margin-top: var(--space-xs); max-width: min(100%, 63.7rem); }
.allied__lead  { margin-top: var(--space-xs); max-width: min(100%, 37.5em); font-size: var(--step-1); }
.allied__cta   { margin-top: var(--space-m); }

/* Source is 655px + 655px at 1440, collapsing to ONE column at 1024. */
.split-2 {
  margin-top: var(--space-l-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
  align-items: stretch;
}
.split-2--media-first .photo-card { order: -1; }

.provider-card__name {
  font-family: var(--font-display);
  font-size: var(--step-1); line-height: var(--leading-m); font-weight: var(--weight-700);
  color: var(--tertiary);
  text-transform: uppercase;
}
.provider-card__avail { margin-top: var(--space-2xs); font-weight: var(--weight-700); color: var(--primary); }
.provider-card__fees  { margin-top: var(--space-xs); font-weight: var(--weight-700); color: var(--primary); }
.provider-card__logo  { margin-top: var(--space-s); width: min(100%, 15.5rem); }

/* ── Billing / results: the 2x2 card-and-photo mosaic ───────────────────── */
/* Explicit 2x2 at 1440 (auto-fit gives THREE columns here — FINDINGS2 case 3),
   one column below 1024, which is what the source does. */

.band--mosaic { padding-block: var(--band-lead) var(--space-m-l); }
.band--mosaic.is-terra  { background: var(--secondary); }
.band--mosaic.is-forest { background: var(--primary); }
.band--mosaic.is-cream  { background: var(--bg); }

.mosaic__head { text-align: center; display: grid; justify-items: center; }
.mosaic__title { margin-top: var(--space-xs); max-width: min(100%, 16.7em); }   /* 689px at 41px: three lines on Services */
.is-terra .mosaic__title,
.is-forest .mosaic__title { color: var(--surface); }
.is-terra .mosaic__head .eyebrow,
.is-forest .mosaic__head .eyebrow { color: var(--surface); }

.mosaic {
  margin-top: var(--space-m-l);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  align-items: stretch;
}

/* ── Contact: the details card ──────────────────────────────────────────── */

.band--contact-card { background: var(--muted-green); padding-bottom: var(--space-l-xl); }
.contact-card {
  background: var(--sand);
  border-radius: var(--radius-l);
  padding: var(--space-l-2xl);
  margin-top: calc(-1 * var(--rise-deep));
  position: relative;
  z-index: var(--layer-float);
}
/* Source: three equal tracks at 1440, ONE at 1024 (not two). */
.contact-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m-l);
}
.contact-tile {
  background: var(--muted-green);
  border-radius: var(--radius-l);
  padding: var(--space-s);
  display: grid; gap: var(--space-3xs);
  align-content: start;
}
.contact-tile__icon svg { width: 1.6rem; height: 1.6rem; fill: var(--primary); }
.contact-tile__label { font-weight: var(--weight-600); color: var(--primary); }
.contact-tile__value { font-family: var(--font-display); font-weight: var(--weight-700); color: var(--primary); word-break: break-word; }
.contact-tile__value a { text-decoration: none; }
.contact-tile__value a:hover { color: var(--tertiary); }

.contact-split {
  margin-top: var(--space-s-l);
  display: grid;
  grid-template-columns: minmax(0, 521fr) minmax(0, 579fr);
  gap: var(--space-l);
  align-items: start;
}
.contact-split__figure { margin: var(--space-s) 0 0; }
.contact-split__figure img {
  width: 100%;
  aspect-ratio: 521 / 421;
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* The enquiry panel. v2 forbids JS, and the original posts to WordPress, so
   this is a real <form> with a mailto action — see FINDINGS-PAGES.md. */
.enquiry {
  background: var(--primary);
  border-radius: var(--radius-l);
  padding: var(--space-s-l);
  color: var(--surface);
}
.enquiry__grid { display: grid; gap: var(--space-xs); }
.enquiry label { display: grid; gap: var(--space-3xs); margin-bottom: 0; font-weight: var(--weight-600); font-size: var(--step--2); color: inherit; }   /* white on the forest panel, not the base label's ink */
.enquiry__submit { margin-top: var(--space-3xs); justify-self: start; }
.enquiry__note {
  margin-top: var(--space-s);
  background: var(--secondary);
  border-radius: var(--radius-s);
  padding: var(--space-xs);
  font-size: var(--step--2);
}
.enquiry__note strong { display: block; margin-bottom: var(--space-3xs); }

/* Hours + map row. Source: 604px card + 696px map at 1440, stacked at 1024. */
.contact-lower {
  margin-top: var(--space-l-xl);
  display: grid;
  grid-template-columns: minmax(0, 604fr) minmax(0, 696fr);
  gap: var(--space-l);
  align-items: stretch;
}
.hours-card { background: var(--sand-deep); border-radius: var(--radius-l); padding: var(--space-l); }
.hours-card__title {
  font-family: var(--font-display);
  font-size: var(--step-1); line-height: var(--leading-m); font-weight: var(--weight-700); color: var(--primary);
}
/* (.hours-card scoped: the shared .hours-list margin reset comes later) */
.hours-card .hours-card__hours { margin-top: var(--space-s); }
.hours-card .hours-list__notes { margin-top: var(--space-s); }
.hours-card__note {
  margin-top: var(--space-s);
  display: flex; gap: var(--space-xs); align-items: flex-start;
}
.hours-card__note svg { width: 1.2rem; height: 1.2rem; flex: none; fill: var(--tertiary); margin-top: var(--space-3xs); }

/* The Google map is an <iframe>, not script — permitted, and the only way to
   keep a real map without JS. */
.map-frame {
  border: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-l);
  display: block;
}

/* ── After-hours / CTA closing band ─────────────────────────────────────── */

.band--closing {
  overflow: clip;
  padding-block: var(--space-l-2xl) var(--space-l-xl);
}
.band--closing.is-sand  { background: var(--sand); }
.band--closing.is-cream { background: var(--bg); }
/* the after-hours band on the patient information page: forest, white type */
.band--closing.is-forest-band { background: var(--primary); color: var(--surface); }
.band--closing.is-forest-band .eyebrow,
.band--closing.is-forest-band .closing__title,
.band--closing.is-forest-band .closing__lead,
.band--closing.is-forest-band a { color: var(--surface); }
.closing { text-align: center; display: grid; justify-items: center; }
.closing__title { max-width: min(100%, 66rem); }
.closing__lead  { margin-top: var(--space-xs); max-width: min(100%, 34.7em); font-size: var(--step-1); }
.page-contact .closing__lead { max-width: min(100%, 44em); }   /* the after-hours lead is an 851px column */
.closing__title { font-size: var(--step-8); }                  /* 3rem in the source, like the heroes */
.band--closing.is-forest-band .closing__lead { max-width: min(100%, 55em); }   /* the after-hours leads run one line each, 1102px at 20px */
.closing__cta   { margin-top: var(--space-m); }
.closing .dotted-rule { width: min(100%, 62rem); }

/* ── FAQ (services) — a real <details> disclosure, no JS ─────────────────── */

.band--faq { background: var(--sand); padding-block: var(--space-l-2xl) var(--space-l-xl); }
.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 591fr) minmax(0, 739fr);
  gap: var(--space-l-2xl);
  align-items: start;
}
.faq-intro__title { margin-top: var(--space-xs); max-width: min(100%, 28rem); }
.faq-intro__lead  { margin-top: var(--space-xs); max-width: min(100%, 23em); font-size: var(--step-1); }
.faq-intro__cta   { margin-top: var(--space-s); }

.faq { display: grid; gap: var(--space-2xs); }
.faq details {
  background: var(--bg);
  border-radius: var(--radius-l);
}
/* A closed <details> must not paint its body. `overflow:hidden` on the details
   element is NOT enough — the collapsed body still lays out and overlapped the
   next summary by ~70px (caught by the overlap check, invisible in a static
   screenshot). Hiding the body explicitly is the fix. */
/* (closed bodies are collapsed by ::details-content below, so they can slide open) */
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-xs-s);
  font-family: var(--font-display);
  font-weight: var(--weight-700);
  font-size: var(--step-0);
  line-height: var(--leading-m-l);
  color: var(--primary);
  display: flex; align-items: center; gap: var(--space-xs);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: .6rem; height: .6rem;
  border-right: var(--border-medium) solid var(--primary);
  border-bottom: var(--border-medium) solid var(--primary);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__body { padding: 0 var(--space-xs-s) var(--space-xs-s); }
.faq__body p + p { margin-top: var(--space-2xs); }
.faq__body a { color: var(--tertiary); }

/* ── Practice-policy: the long information sections ─────────────────────── */

.band--info { padding-block: var(--space-l-2xl) var(--space-l-2xl); }
.band--info.is-forest { background: var(--primary); }
.band--info.is-cream  { background: var(--bg); }

.info-card {
  background: var(--sand-deep);
  border-radius: var(--radius-l);
  padding: var(--space-l-2xl);
  margin-top: calc(-1 * var(--rise-deep));
  position: relative; z-index: var(--layer-float);
}
.info-card__title { font-size: var(--step-5); }
.info-card__lead  { margin-top: var(--space-xs); }

.info-pair {
  margin-top: var(--space-s-m);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
  align-items: start;
}
/* the mask/referrals row pairs text with a photo at 719/399 */
.info-pair--media { grid-template-columns: minmax(0, 719fr) minmax(0, 399fr); }
.info-pair--media img { width: 100%; aspect-ratio: 399 / 323; object-fit: cover; border-radius: var(--radius-l); }

.info-block__title {
  font-family: var(--font-display);
  font-size: var(--step-1); line-height: var(--leading-m); font-weight: var(--weight-700); color: var(--primary);
}
.info-block__body { margin-top: var(--space-2xs); }
/* The source's paired blocks are 550px columns at body size; the block beside
   the illustration is 777px. Telehealth runs full width and is left alone. */
.info-pair:not(.info-pair--media) .info-block__body { max-width: 30.6em; }
.info-pair--media .info-block__body                 { max-width: 43.4em; }
.info-block__body p + p, .info-block__body p + ul { margin-top: var(--space-2xs); }
.info-block__body ul { list-style: disc; padding-left: var(--space-s); }
.info-block + .info-block { margin-top: var(--space-s-m); }

/* Two feature cards side by side (feedback / privacy). */
.feature-pair {
  margin-top: var(--space-m-l);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s-l);
}
.feature-card {
  background: var(--muted-green);
  border-radius: var(--radius-l);
  padding: var(--space-s-l);
  display: grid; align-content: start; gap: var(--space-xs);
}
.feature-card__icon svg { width: 2.6rem; height: 2.6rem; fill: var(--primary); }
.feature-card__title { font-family: var(--font-display); font-size: var(--step-1); line-height: var(--leading-m); font-weight: var(--weight-700); color: var(--primary); }
.feature-card__body  { font-size: var(--step-1); max-width: 29.4em; }   /* 575px at 20px in the source */
.feature-card__body p + p { margin-top: var(--space-2xs); }
.feature-card__cta { justify-self: start; margin-top: var(--space-3xs); }

/* ── Patient Hub / Health Articles: the Connect widget mount ────────────── */
/* In the original both pages are near-empty shells whose content is injected
   at runtime by the Mediflare Connect widget. v2 forbids JS, so the mount
   point is rendered as a static placeholder — see FINDINGS-PAGES.md. */

.band--hub { background: var(--sand); padding-block: calc(var(--space-l-2xl) + var(--hero-lift)) var(--space-l-xl); }
.hub { text-align: center; display: grid; justify-items: center; }
.hub__title { max-width: min(100%, 60rem); }
.hub__lead  { margin-top: var(--space-xs); max-width: min(100%, 62rem); font-size: var(--step-0); }
.hub__mount {
  margin-top: var(--space-s-l);
  width: 100%;
  min-height: 1px;      /* the original's mount is 0px tall until JS runs */
}

/* ── Legal pages (privacy, terms) ───────────────────────────────────────── */

/* Legal pages, as the original builds them: a full-viewport photo under the
   floating header, then the text in a card the width of the shell that
   FLOATS over the photo's lower part — pulled up by 30% of the viewport and
   stacked above the hero. The card must overlap; sitting on the hero's
   edge is wrong. Measured on the original at 1440x900, 1440x1100, 1920. */
.band--legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--primary) var(--legal-hero-image) center / cover no-repeat;
  height: 100vh; height: 100svh;
}
.band--legal { background: var(--bg); padding-block: 0 var(--space-l-2xl); display: flow-root; }
.legal {
  position: relative; z-index: var(--layer-base);
  width: min(100%, var(--shell)); margin-inline: auto;
  margin-top: -30vh; margin-top: -30svh;
  background: var(--sand-deep); border-radius: var(--radius-l);
  padding: var(--space-l-2xl);
}
.legal__title { font-size: var(--step-8); line-height: var(--leading-xs); color: var(--ink); margin-bottom: var(--space-s); }
.legal h2 {
  font-size: var(--step-7); line-height: var(--leading-s); color: var(--ink);
  margin-top: var(--space-m-l);
}
.legal h3 {
  font-size: var(--step-3); line-height: var(--leading-m); color: var(--ink);
  margin-top: var(--space-s-m);
}
.legal h4 {
  font-family: var(--font-display);
  font-size: var(--step-0); line-height: var(--leading-m-l); color: var(--ink);
  margin-top: var(--space-s);
}
.legal p  { margin-top: var(--space-xs); }
.legal ul { list-style: disc; padding-left: var(--space-s); margin-top: var(--space-xs); }
.legal li + li { margin-top: var(--space-3xs); }
.legal a  { color: var(--tertiary); }
.legal strong { font-weight: var(--weight-700); color: var(--ink); }
.legal small { font-size: var(--step--2); }   /* "Last updated": was the UA's smaller */
.legal__updated { margin-top: var(--space-m); font-style: italic; color: var(--sage); }

/* ==========================================================================
   Responsive. The original collapses its nav and every grid at 1024px
   (Elementor's "tablet" breakpoint) and stacks fully below ~768px.
   ========================================================================== */

/* The header's own switch (menu square, booking row, search) is at 1119/1120,
   not the grids' 1024: below 1120 the full desktop bar no longer fits with its
   search icon (measured: comfortable from 1111). See "Header breakpoint". */
@media (max-width: 1119px) {
  :root { --hero-lift: 0px; }
  .site-header { background: var(--bg); }
  .site-header__bar { padding: var(--space-xs) var(--space-s-m); min-height: 0; }
  /* Nav → burger, matching the original's tablet breakpoint exactly. */
  .site-header__bar { justify-content: space-between; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3xs);
    /* 44px minimum touch target (WCAG 2.5.8 / the site conventions' floor).
       2.75rem is 44px at the 16px root; the min-* hold that floor. */
    width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px;
    padding: var(--space-2xs);
    margin-left: auto;
    cursor: pointer;
    order: 2;
  }
  .nav-toggle__bar {
    display: block; height: 2px; width: 100%;
    background: var(--primary); border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .site-header__cta { order: 3; }
  .site-nav {
    order: 4;
    flex-basis: 100%;
    margin-inline: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
  }
  .site-nav__list {
    overflow: hidden;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav__list a { display: block; padding: var(--space-2xs) var(--space-3xs); }
  .site-nav__list li + li { border-top: var(--border-thin) solid color-mix(in srgb, var(--primary) 14%, transparent); }
  .nav-toggle[aria-expanded="true"] ~ .site-nav { grid-template-rows: 1fr; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

}

@media (max-width: 1024px) {
  /* Grids collapse to one column, as the original's do at this width. */
  
  
  
  
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  

  /* Page-band grids collapse at Elementor's tablet breakpoint, matching the
     column counts probed on the original at 1024 (grids.mjs). */
  .service-panel__grid,
  .split-2,
  .mosaic,
  .contact-tiles,
  .contact-split,
  .contact-lower,
  .faq-split,
  .info-pair,
  .info-pair--media,
  .feature-pair { grid-template-columns: minmax(0, 1fr); }

  .panel-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Single column: the photo goes BELOW its text, as the source does. */
  .service-panel__figure { order: 2; }
  .split-2--media-first .photo-card { order: 0; }
  .photo-card { min-height: min(var(--photo-fluid), 18rem); }   /* the stacked photo cards cap at 18rem */

  .panels-shell,
  .contact-card,
  .info-card { margin-top: calc(-1 * var(--rise)); }
}

@media (max-width: 768px) {
  .site-footer__cols { grid-template-columns: minmax(0, 1fr); }
  .site-footer__legal { margin-left: 0; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}



@media (max-width: 560px) {
  .site-header__logo img { width: 11rem; }
  .site-header__cta { width: 100%; justify-content: center; order: 5; }
  .nav-toggle { order: 2; }
  
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 560px) {
  .panel-points { grid-template-columns: minmax(0, 1fr); }
  .people-strip { aspect-ratio: 1350 / 620; width: 100%; }
  .people-strip--alt { aspect-ratio: 1498 / 589; width: 92%; }
  .legal h2 { font-size: var(--step-3); }
}

/* Decoration that lands over body copy on a narrow column is hidden, following
   the original's own `elementor-hidden-mobile` intent (FINDINGS-ABOUT case 2). */
@media (max-width: 767px) {
  .deco--hero-flower,
  .deco--hero-shape,
  .deco--contact-flower,
  .deco--contact-shape,
  .deco--pp-flower,
  .deco--pp-shape { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ==========================================================================
   footer-additions.css — folded in verbatim from shared-partials/, as the
   brief requires. Styles the mandated Mediflare powered-by block and the
   {{opening_hours_html}} markup Rails emits.
   ========================================================================== */
/* --- Powered-by block ------------------------------------------------
 * The shared Mediflare logo is mandated by _template/partials/footer.html
 * and /srv/sites/CLAUDE.md — keep it on every site, do not drop it.
 * Two variants ship; show whichever suits the colour scheme. */
.site-footer__powered {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
}
.site-footer__powered img {
    width: 120px;
    height: auto;
    display: block;
}
.site-footer__powered .mf-logo-dark { display: none; }
/* The original shows the full-colour logo (dark "MEDI") regardless of the
   visitor's colour scheme, so no dark-scheme swap here. */

/* Separator between the copyright and the powered-by line. */
.site-footer__bottom .site-footer__sep {
    opacity: 0.5;
    user-select: none;
}


/* --- Section divider orientation --------------------------------------
 * Measured from the original with truth.mjs. TWO independent flips exist and
 * both were missing from the first transcription:
 *
 *   1. VERTICAL — Elementor's own rule, and the one that makes a divider look
 *      "upside down". It applies rotate(180deg) to the WRAPPER whenever
 *      (data-negative=false AND shape-bottom) or (data-negative=true AND
 *      shape-top). 9 of the 13 dividers on this site carry it.
 *   2. HORIZONTAL — rotateY(180deg) on the SVG itself, independent of the above.
 *
 * A third mechanism exists and must NOT be double-flipped: one divider uses a
 * second, pre-flipped path (282 chars vs 279) instead of a transform.
 * The wrappers here are centred with translateX(-50%), which must be preserved
 * in the same declaration or it is overwritten. */
.wave--services-hero { transform: translateX(-50%) rotate(180deg); }
.wave--divider-terra { transform: translateX(-50%) rotate(180deg); }
.wave--divider-sand { transform: translateX(-50%) rotate(180deg); }
.wave--contact-sand { transform: translateX(-50%) rotate(180deg); }
.wave--pp-hero { transform: translateX(-50%) rotate(180deg); }
.wave--pp-terra { transform: translateX(-50%) rotate(180deg); }
.wave--pp-cream { transform: translateX(-50%) rotate(180deg); }
.wave--pp-forest { transform: translateX(-50%) rotate(180deg); }
.wave--pp-sand { transform: translateX(-50%) rotate(180deg); }

.wave--services-hero svg { transform: rotateY(180deg); }
.wave--mosaic-top-terra svg { transform: rotateY(180deg); }
.wave--divider-sand svg { transform: rotateY(180deg); }
.wave--contact-sand svg { transform: rotateY(180deg); }
.wave--pp-top-terra svg { transform: rotateY(180deg); }
.wave--pp-cream svg { transform: rotateY(180deg); }
.wave--pp-sand svg { transform: rotateY(180deg); }

/* Top-positioned dividers are NOT vertically flipped on the original
 * (Elementor rotates shape-top only when data-negative=true, which none of
 * these are). Stated after the block above so an earlier .wave--* transform
 * cannot reintroduce the rotation. */
.wave--mosaic-top-terra   { transform: translateX(-50%); }
.wave--contact-top-forest { transform: translateX(-50%); }   /* NOT `none`: the intent here is to cancel the ROTATION, but `.wave` centres
     itself with left:50% + translateX(-50%), so dropping the transform entirely
     left it starting at the halfway point and overflowing the page by half the
     viewport at every width (721px at 1440, 195px at 390). Its two sibling rules
     above already keep the translate for exactly this reason. */
.wave--pp-top-terra       { transform: translateX(-50%); }


/* ==========================================================================
   ABOUT (retrofit)
   Folded in from the standalone `pageabout/` build, which predated these
   partials. Everything already present above — .band--divider, .dotted-rule,
   .deco/.deco__shape, .wave, the 1024/768/560 responsive block, the whole
   footer — is REUSED, not repeated; only what the About bands add is below.

   Two classes had to be RENAMED rather than overridden, because the shared
   sheet already owns them with different measured geometry:
     .deco--hero-flower -> .deco--about-flower   (forest clover, -74.38deg)
     .deco--hero-shape  -> .deco--about-shape    (muted-green fan, +17.46deg)
     .band--hero, .hero__… and .wave--hero
                        -> .band--about-hero, .about-hero__… , .wave--about-hero
   The shared .deco--hero-* belong to the services/practice-policy hero and
   are a different rotation and colour; overriding them would have broken
   those pages to fix this one.
   ========================================================================== */

/* ── About hero (band A) ────────────────────────────────────────────────── */

.band--about-hero {
  position: relative;
  background: var(--bg);
  overflow: clip;                       /* clips the decoration; not a scroll container */
  /* (pulled under the header by the absolute-positioned header, see FIDELITY PASS) */
  padding-block: calc(var(--space-m-l) + var(--hero-lift)) 0;
}
.about-hero { text-align: center; display: grid; justify-items: center; }
.about-hero__eyebrow { max-width: min(100%, 46.7rem); }
.about-hero__title   { margin-top: var(--space-xs); max-width: min(100%, 56.5rem); }
.about-hero__lead    { margin-top: var(--space-s); max-width: min(100%, 35em); font-size: var(--step-1); }
.about-hero__cta     { margin-top: var(--space-m); }

.about-hero__illustration {
  width: 100%;
  position: relative;
  z-index: var(--layer-float);                    /* the art sits over the wave, as in the original */
  margin-top: var(--space-s-l);
  aspect-ratio: 2560 / 802;             /* intrinsic ratio of the source art */
  background: url("/assets/images/people.7ad65d36ec.webp") center bottom / contain no-repeat;
}

/* ── About waves ────────────────────────────────────────────────────────── */
/* Orientation measured against the original with _r8/divaudit.mjs. All four
   About dividers are `shape-bottom` with data-negative=false, so Elementor's
   own rule rotates every one of them 180deg on the WRAPPER; c and g carry an
   additional horizontal mirror on the SVG itself. The translateX(-50%)
   centring must stay in the same declaration or it is silently overwritten. */
.wave--about-hero     { width: 300%;   height: 12.99vw; transform: translateX(-50%) rotate(180deg); }
.wave--about-hero svg { height: 100%; fill: var(--secondary); }

.wave--divider-c     { width: 169.1%; height: 9.65vw;  bottom: -1px; transform: translateX(-50%) rotate(180deg); }
.wave--divider-c svg { height: 100%; fill: var(--sand-deep); transform: rotateY(180deg); }

.wave--divider-e     { width: 100.1%; height: 11.25vw; bottom: -1px; transform: translateX(-50%) rotate(180deg); }
.wave--divider-e svg { height: 100%; fill: var(--primary); }

.wave--divider-g     { width: 153.1%; height: 12.08vw; bottom: -1px; transform: translateX(-50%) rotate(180deg); }
.wave--divider-g svg { height: 100%; fill: var(--sand); transform: rotateY(180deg); }

/* ── About decoration instances ─────────────────────────────────────────── */
/* A · flower — forest clover, rotated -74.38deg, overhanging top-left */
.deco--about-flower .deco__shape {
  left: 3vw; top: 23vw;
  width: 12vw; aspect-ratio: 1;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
          mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
  transform: rotate(-74deg);
}
/* A · shape-1 — muted-green petal fan, rotated 17.46deg, right */
.deco--about-shape .deco__shape {
  left: 91%; top: 33vw;
  width: 14vw; aspect-ratio: 1;
  background: var(--muted-green);
  -webkit-mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
          mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
  transform: rotate(17deg);
}
/* C · blob — NEGATIVE-determinant matrix in the original: it is a MIRROR,
   not a 169deg rotation. matrix3d(-0.981627, 0.190809, 0.190809, 0.981627)
   has det = -1, so it decomposes to rotate(-11deg) scaleX(-1). Reading it
   with atan2 alone gives +169deg and paints a slab across the band. */
.deco--divider-c .deco__shape {
  left: -44.4%; top: -46.4%;
  width: 100%; aspect-ratio: 1440 / 436;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: rotate(-11deg) scaleX(-1);
}
/* E · blob — unrotated, offset right */
.deco--divider-e .deco__shape {
  left: 20.2%; top: 0;
  width: 100%; aspect-ratio: 1440 / 470;
  background: var(--secondary);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
}
/* G · blob — mirrored (det -1, zero rotation), offset left */
.deco--divider-g .deco__shape {
  left: -25.3%; top: 0;
  width: 100%; aspect-ratio: 1440 / 470;
  background: var(--sage);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  transform: scaleX(-1);
}

/* ── Story card (band B) ────────────────────────────────────────────────── */

.band--story {
  background: var(--secondary);
  padding-bottom: var(--space-xl);
}
.story-card {
  background: var(--sand-deep);
  border-radius: var(--radius-l);
  padding: var(--space-l-xl);
  margin-top: calc(-1 * var(--rise-deep));   /* rides up into the hero's wave */
  position: relative;
  z-index: var(--layer-float);
}
.story-card__grid {
  display: grid;
  /* the original is two equal tracks (559px each at 1440); they collapse to
     one below 1024 exactly as Elementor's tablet breakpoint does */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);       /* 50px, held at every width */
  align-items: center;
}
.story-card__figure { margin: 0; }
.story-card__figure img {
  width: 100%;
  aspect-ratio: 559 / 494;
  object-fit: cover;
  border-radius: var(--radius-l);
}
.story-card__body > .eyebrow + .section-title { margin-top: var(--space-xs); }
.story-card__body > .section-title + .prose   { margin-top: var(--space-s); max-width: 33.85em; }   /* 604px at 18px in the source */

.accred {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}
.accred__title + .prose { margin-top: var(--space-s); }
.accred__badge { display: flex; justify-content: center; }
.accred__badge img { width: min(100%, 18.75rem); }

/* ── Beliefs (band D) ───────────────────────────────────────────────────── */

.band--beliefs {
  background: var(--sand-deep);
  padding-block: var(--band-pad) var(--band-lead);
}
.beliefs { text-align: center; display: grid; justify-items: center; }
.beliefs__title { margin-top: var(--space-xs); max-width: min(100%, 41.6rem); }
.beliefs__lead  { margin-top: var(--space-xs); max-width: min(100%, 36.7em); font-size: var(--step-1); }
.beliefs__cta   { margin-top: var(--space-m); }

.belief-cards {
  margin-top: var(--space-l-xl);
  width: 100%;
  /* Wrapping flex rather than an auto-fit grid: three cards folded to two
   * columns left a hole beside the third; here a card alone on its row
   * spans it. */
  display: flex; flex-wrap: wrap;
  gap: var(--space-l);       /* 40px floor, measured */
  text-align: left;
}
.belief-card {
  flex: 1 1 min(100%, 17rem);
  background: var(--muted-green);
  border-radius: var(--radius-l);
  padding: var(--space-l);   /* 30px floor, measured */
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.belief-card__icon svg { width: 2.6rem; height: 2.6rem; fill: var(--primary); }
.belief-card__title { font-size: var(--step-5); line-height: var(--leading-m); color: var(--primary); }
.belief-card .prose { font-size: var(--step-1); max-width: 17.6em; }   /* 343px at 20px in the source */

/* ── Doctors (band F) ───────────────────────────────────────────────────── */

.band--doctors {
  background: var(--primary);
  color: var(--surface);
  padding-block: var(--band-pad) var(--band-lead);
}
.doctors { text-align: center; display: grid; justify-items: center; }
.doctors .eyebrow { color: var(--surface); }
.doctors__title { margin-top: var(--space-xs); color: var(--surface); max-width: min(100%, 17em); }   /* one line at 1440, as the source */
.doctors__lead  { margin-top: var(--space-xs); color: var(--surface); max-width: min(100%, 40em); font-size: var(--step-1); }

.person-grid {
  margin-top: var(--space-l);
  width: 100%;
  /* Wrapping flex, as .belief-cards: the third doctor spans a row rather
   * than leaving a hole beside it when three fold to two. */
  display: flex; flex-wrap: wrap;
  gap: var(--space-s-l);       /* 24px floor / 50px at 1440 */
  text-align: left;
}
/* Elementor draws a 1px top + right rule on each icon-box, which reads as
   column separators across the row. Reproduced, with the right-hand rule
   dropped on the last item in each row so it never dangles. */
.person {
  flex: 1 1 min(100%, 16rem);
  border-top: var(--border-thin) solid var(--sage);
  border-right: var(--border-thin) solid var(--sage);
  padding: var(--space-s) var(--space-s) var(--space-s) 0;
}
.person:last-child { border-right: 0; }
.person__name  { font-size: var(--step-5); line-height: var(--leading-m); color: var(--surface); }
.person__role  { margin-top: var(--space-xs); font-weight: var(--weight-600); }
.person__detail{ margin-top: var(--space-3xs); }
.person--light .person__name { color: var(--tertiary); }
.person--light .person__role,
.person--light .person__detail { color: var(--ink); }

/* ── Practice team (band H) ─────────────────────────────────────────────── */
/* Sits on the SAME sand as the footer (--sand), not the cream page
   ground — otherwise a seam shows above the footer. */

.band--team {
  background: var(--sand);
  padding-top: var(--band-pad);
  position: relative;
}
.team {
  width: min(100% - (2 * var(--gutter)), var(--shell));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: var(--space-l-xl);
  align-items: start;
}
.team__badge {
  background: var(--muted-green);
  border-radius: var(--radius-l);
  padding: var(--space-l);       /* 32px floor, measured */
  display: grid;
  gap: var(--space-xs);
}
.team__badge-title { font-size: var(--step-5); }
.person-grid--team { margin-top: 0; }

.team__illustration {
  width: min(100% - (2 * var(--gutter)), var(--shell));
  margin: var(--space-l-xl) auto 0;
  aspect-ratio: 2560 / 802;
  background: url("/assets/images/people.7ad65d36ec.webp") center bottom / contain no-repeat;
}

/* About's own responsive collapses. The nav/footer rules above already apply. */
@media (max-width: 1024px) {
  .accred,
  .team,
  .story-card__grid { grid-template-columns: minmax(0, 1fr); }
  .person { border-right: 0; padding-right: 0; }
  /* Single column: the original drops the photo BELOW the story text. */
  .story-card__body   { order: 1; }
  .story-card__figure { order: 2; }
  .accred__badge { justify-content: flex-start; }
  .story-card { margin-top: calc(-1 * var(--rise)); }
}

@media (max-width: 767px) {
  /* Same `elementor-hidden-mobile` intent as the shared hero decoration. */
  .deco--about-flower,
  .deco--about-shape { display: none; }
}

@media (max-width: 560px) {
  .about-hero__illustration,
  .team__illustration { aspect-ratio: 2560 / 1000; }
}


/* ==========================================================================
   HOME (retrofit)
   Folded in from the standalone `build2/` build, which predated these
   partials and used its own naming (`band-hero`, `.wrap`, `.blob`, `.rule`).
   Translated onto the shared primitives rather than carried across verbatim:

     .band-<x>          -> .band--home-<x>       (shared band--* modifier)
     .wrap/.wrap-narrow -> .band__inner          (already defined above)
     .blob/.blob>span   -> .deco/.deco__shape    (already defined above)
     .rule              -> .dotted-rule          (already defined above)
     --primary/--secondary/--text -> the same template roles here (--primary,
                                     --secondary, --ink), set on this site's dials

   Every page-local component is prefixed `home-` so it cannot collide with
   the six settled pages, which own the unprefixed .hours-card, .info-card,
   .service-card and .contact-* names with different geometry.

   build2 overlaid an absolutely-positioned header on the hero and paid for it
   with padding-top:250px. The SHARED header is in-flow (position:relative,
   cream ground), so that compensation is removed rather than reproduced —
   keeping it would have left a 250px band of empty cream under the header.
   ========================================================================== */

/* ── Home hero (band 1) ─────────────────────────────────────────────────── */

.band--home-hero {
  position: relative;
  z-index: var(--layer-base);
  background: var(--bg);
  overflow: clip;              /* not a scroll container: the badge animates on scroll */
  /* (pulled under the header by the absolute-positioned header, see FIDELITY PASS) */
  padding-block: calc(var(--space-2xl) + var(--hero-lift)) var(--space-l);
}
.band--home-hero .band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-s-m);
}
.home-hero__copy {
  flex: 1 1 0; flex-basis: 43%; min-width: min(100%, 20rem);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-s);
  z-index: var(--layer-float);
  padding-top: var(--space-xl);
}
.home-hero__eyebrow {
  font-family: var(--font-display); font-weight: var(--weight-700);
  font-size: var(--step-3); line-height: var(--leading-l);
  text-transform: uppercase; color: var(--tertiary);
}
.home-hero__title {
  font-family: var(--font-display); font-weight: var(--weight-700);
  font-size: var(--step-8); line-height: var(--leading-s); color: var(--primary);
  position: relative; z-index: var(--layer-float);
}
/* The original keeps the headline on one line and lets it run past its
   column, over the top of the media column's empty upper-left corner. */
@media (min-width: 1280px) { .home-hero__title { white-space: nowrap; } }
.home-hero__lead {
  max-width: 28.6em; display: flex; flex-direction: column; gap: var(--space-xs);   /* 544px at 18.6px: "You want / someone" */
  font-size: var(--step-1); line-height: var(--leading-l);
}
.home-hero__media {
  position: relative; z-index: var(--layer-raised);
  flex: 1 1 0; flex-basis: 54%; min-width: min(100%, 18rem);
  display: flex; gap: var(--space-s); align-items: flex-start;
}
.home-hero__media img { border-radius: 15px; object-fit: cover; width: 100%; }
/* aspect-ratio replaces build2's pinned 367x290 / 352x280 boxes */
.home-hero__photo-tall {
  flex: 1 1 0; min-width: 0; flex-basis: 51%;
  aspect-ratio: 367 / 290; height: auto;
  margin-top: var(--wave-offset);
}
.home-hero__col {
  display: flex; flex-direction: column; gap: var(--space-s);
  flex: 1 1 0; min-width: 0; flex-basis: 49%;
}
.home-hero__photo-wide { aspect-ratio: 352 / 280; height: auto; }
/* The badge sits in a dashed orange frame in the original (2px dashed
   --tertiary, 20px radius, 299x250 at 1440); it was missing from the
   build2 transcription. */
.home-hero__badge {
  display: grid; place-items: center;
  padding: var(--space-s-m);
  border: var(--border-medium) dashed var(--tertiary);
  border-radius: var(--radius-l);
}
.home-hero__badge span {
  display: block; width: 100%; max-width: 13.7rem;
  aspect-ratio: 219 / 170;
  background: url("/assets/images/agpal-badge.abe56ede44.webp") 50% 50% / contain no-repeat;
  transform: rotate(4.31deg);
}
/* the big terracotta blob behind the hero photos */
/* The deco sits on the BAND (not the inner shell) so the colour can run to the
   viewport edge. The mask is the practice's own blob (blobs-2.png, traced to
   SVG) — NOT the hill-shaped divider mask stretched to fit, which gave the
   corner a straight diagonal edge. Geometry measured on the original at 1440
   and 1938: a 1000x600 spacer masked with the blob (contain) and scaled 1.7
   about its centre lands the blob as a 1163x1020 box whose left edge is
   968px in from the shell's left edge and whose bottom sits about 470px
   below the top of the band. Only the blob's lower-left belly shows under
   the header; every visible edge is one of its curves. The source pins this
   in px (it does not scale with the viewport) and hides it below 1025px
   (`elementor-hidden-tablet/-mobile`), reproduced below. */
.deco--home-hero { overflow: hidden; }
.deco--home-hero .deco__shape {
  left: calc(max(var(--gutter), 50% - var(--shell) / 2) + 968px);
  top: -550px;
  width: 1163px; height: 1020px;
  background: var(--secondary);
  -webkit-mask-image: url("/assets/images/mask-blob-hero.2acdbf172e.svg");
          mask-image: url("/assets/images/mask-blob-hero.2acdbf172e.svg");
  transform: none;
}
@media (max-width: 1024px) { .deco--home-hero { display: none; } }

/* ── People illustration (band 2) ───────────────────────────────────────── */
/* The source holds this illustration at a constant 845px at every width, so
   this is one of the few honest fixed heights — capped by vw so it cannot
   dominate a phone screen. */
/* Measured on the original's OWN under-hero band (Elementor container 7bc46d8
   plus the wave container 2c4a2677) at 1440 and 390 in a headless browser.
   The earlier note here cited a 420px/99px spacer: that spacer belongs to the
   footer's Acknowledgement band, not to this one. At 1025+ the source is
   fixed-pixel: the illustration box is 1195x845 (background-size: contain in
   an 845px container, offset 200px -49px), the heads sit 7px above the hero's
   bottom edge, the wave container is 179px with a 139px svg, and the quote
   band starts 399px below the hero. Below 768 the box is 100vw wide, the
   heads sit 33px below the hero at 390 and the quote starts 152px below it;
   the wave container is a fixed 82px with a 52px svg. In between, the source
   goes through an Elementor tablet breakpoint that buries most of the figures
   behind the quote band; that is not reproduced, the clamps interpolate. */
.band--home-people {
  position: relative;
  z-index: var(--layer-base);
  overflow: hidden;
  /* --people-w is the whole image box, transparent margins included: the
     figures occupy columns 4.3%-97.6% and rows 25.7%-77.3% of it, so
     --people-head is the empty strip above the heads and the box is pulled
     up by that much. --people-lift is the 7px the heads overlap the hero by;
     the band takes it as a negative top margin so the heads are not clipped.
     The terracotta wave and the sage blob sit at the bottom of this same
     band, in --wave-zone. The wave is layered IN FRONT of the figures
     (wave 2 > blob 1 > figures 0): its edge cuts across the lower legs and
     the feet are hidden, exactly as the original site does it. Settled with
     the owner; do not put the figures over the wave. The sage blob also
     sits in front of the figures, as it does on the original (it lives in
     the source's wave container): that is what hides the small navy child
     at the far right of the illustration. Do not "fix" him into view. */
  --people-w: min(83vw, 1195px);                        /* the original's 1195px box, measured in its DOM */
  --people-box-h: calc(var(--people-w) * 1358 / 1920);
  --people-head: calc(var(--people-box-h) * 0.257);
  --people-lift: min(0.5vw, 7px);
  --wave-zone: clamp(4.1rem, 12.4vw, 11.2rem);          /* GEOMETRY, not spacing: the sage blob's box, 179px at 1440+ */
  margin-top: calc(-1 * var(--people-lift));
  /* The same viewport-proportional curve as --wave-zone (12.4vw against
     27.7vw, floored and capped at the same viewports), so it is derived from
     it rather than written as a second clamp: 399px + lift at 1440. */
  height: calc(var(--wave-zone) * 27.7 / 12.4 + var(--people-lift));
}
.band--home-people::before {
  /* Not centred: the source anchors the image 200px from the left (its
     background-position) and leaves it there on wider screens, which is also
     what tucks the small navy child at the far right behind the sage blob.
     Below 1440 the anchor scales with the box. */
  content: ""; position: absolute; z-index: var(--layer-flat); left: min(13.9vw, 200px);
  top: calc(-1 * var(--people-head));
  width: var(--people-w); aspect-ratio: 1920 / 1358;
  background: url("/assets/images/mornington-village-patients-illustration.a1cbe7b020.webp") 50% 50% / contain no-repeat;
}
/* the sage blob's box is the bottom --wave-zone of the band, as the old spacer was */
.band--home-people .deco { top: auto; bottom: 0; height: var(--wave-zone); z-index: var(--layer-base); }

/* ── Spacer bands that carry a wave ─────────────────────────────────────── */
/* The source shrinks these 179 -> 112 -> 74 as it narrows; the heights are
   set with .band--divider's in the FIDELITY PASS below. */
.band--home-spacer { position: relative; overflow: hidden; }
.band--home-spacer-cream  { background: transparent; }
.band--home-spacer-terra  { background: var(--secondary); }
.band--home-spacer-sand   { background: var(--sand); }

/* ── Pull quote + wordmark (bands 3, 4) ─────────────────────────────────── */

.band--home-quote {
  background: var(--secondary);
  overflow: hidden;
  padding: var(--space-s-l) var(--gutter) 0;
}
.band--home-quote h2 {
  max-width: 38em; margin-inline: auto; text-align: center;   /* 972px at 25px: breaks after "listening," */
  color: var(--surface); font-size: var(--step-3); line-height: var(--leading-l);
}
.band--home-wordmark {
  background: var(--secondary);
  position: relative; overflow: hidden;
  padding-top: var(--space-xs-s);
}
/* the inner shell and the wave both sat at z-index 2, so the cream wave
   painted over the wordmark once the band got short enough on a phone */
.band--home-wordmark .band__inner { z-index: var(--layer-float); }
.band--home-wordmark h2 {
  text-align: center; color: var(--surface);
  font-size: var(--step-1); line-height: var(--leading-m-l); text-transform: uppercase;
  position: relative; z-index: var(--layer-float);
}

/* ── Hours / contact (band 5) ───────────────────────────────────────────── */

.band--home-hours { background: var(--bg); overflow: hidden; padding-block: var(--band-lead) var(--space-l-2xl); }
.band--home-hours .band__inner {
  display: flex; flex-wrap: wrap;
  gap: var(--space-m-l); align-items: flex-start;
}
.home-hours-card {
  flex: 0 1 41%; min-width: min(100%, 20rem);
  background: var(--muted-green); border-radius: var(--radius-l);
  padding: var(--space-s-l) var(--space-s-l) var(--space-s-l);
  display: flex; flex-direction: column; gap: var(--space-xs);
}
.home-icon-head { display: flex; align-items: flex-start; gap: var(--space-xs); }
.home-icon-head svg { width: 1.875rem; height: 1.875rem; flex: none; margin-top: var(--space-3xs); fill: var(--primary); }
.home-icon-head--orange svg { fill: var(--tertiary); }
.home-icon-head h3 { font-size: var(--step-5); line-height: var(--leading-m); color: var(--primary); }
/* Opening hours, home card and contact card alike: an {{#each hours_grouped}}
   <dl>, one .hours-list__row per day group Rails computes, printing its
   days_long ("Monday to Thursday") and time_12. Nothing is typed: a change
   to the hours in Rails regroups the rows by itself.

   Each row is a wrapping flex line: the day, a dotted leader (the row's own
   ::before, ordered between the two) that takes the slack, and the time
   pushed right. When day and time no longer fit side by side the time drops
   to its own line, still right-aligned, rather than overflowing; a split
   session ("8:00am–12:00pm, 1:00pm–5:00pm") wraps the same way.
   As on the original: display face, bold, body ink, a 2px dotted leader in
   the brand green centred on the row, and the day a step smaller than the
   time on a phone. */
.hours-list { margin: 0; display: flex; flex-direction: column; gap: var(--space-m); }   /* 53px row pitch at 1440, 47 at 390 on the original */
.hours-list__row {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--space-2xs);
  font-family: var(--font-display); font-weight: var(--weight-700);
  font-size: var(--step-1); line-height: var(--leading-m-l); color: var(--ink);
}
.hours-list__row::before {
  content: ""; order: 1;
  flex: 1 1 1rem; min-width: 1rem;
  border-bottom: var(--border-medium) dotted var(--primary);
}
.hours-list__row dt { order: 0; }
.hours-list__row dd { order: 2; margin: 0 0 0 auto; text-align: right; }
.hours-list__notes { font-size: var(--step-0); line-height: var(--leading-l); color: var(--ink); }
@media (max-width: 767px) {
  .hours-list__row dt { font-size: var(--step-0); }
}

.home-hours-note { display: flex; align-items: center; gap: var(--space-xs-s); margin-top: var(--space-xs); }
.home-hours-note svg { width: 2.2rem; height: 2.2rem; flex: none; fill: var(--primary); }
.home-hours-note p { font-style: italic; }
.home-contact-cols {
  flex: 1 1 24rem; min-width: min(100%, 17rem);
  display: flex; flex-wrap: wrap; gap: var(--space-m-l);
  padding-bottom: var(--space-s); margin-top: var(--space-s-l);
}
.home-contact-col { flex: 1 1 15rem; min-width: min(100%, 14rem); display: flex; flex-direction: column; gap: var(--space-s); }
.home-contact-list li { padding-bottom: var(--space-3xs); }
.home-contact-list a {
  display: flex; align-items: center; gap: var(--space-2xs); color: var(--primary);
  font-weight: var(--weight-500); text-decoration: none; overflow-wrap: anywhere;
}
.home-contact-list svg { width: 1.25rem; height: 1.25rem; flex: none; fill: currentColor; }
.home-contact-col .home-bullets { list-style: disc; padding-left: var(--space-s-l); margin-top: var(--space-xs); }
.home-contact-col .home-bullets li { display: list-item; }
/* aspect-ratio, not a pinned 450px */
.home-band-hours__photo {
  display: block; width: min(100% - (2 * var(--gutter)), var(--shell));
  /* stacked below the columns; above 1200px it rides up under the hours
     card by --hours-rise (see "Home hours card" below) */
  margin: var(--space-l-xl) auto 0;
  aspect-ratio: 1360 / 400; height: auto; object-fit: cover;
  border-radius: var(--radius-l);
}

/* ── About teaser (band 6) ──────────────────────────────────────────────── */

.band--home-about { background: var(--sand); position: relative; overflow: visible; padding-block: var(--wave-offset) var(--wave-offset); }
.band--home-about .band__inner { display: flex; flex-wrap: wrap; gap: var(--space-m-l) 0; align-items: flex-start; }
.home-about-intro { display: flex; flex-wrap: wrap; gap: var(--space-xs); width: 100%; }
.home-about-intro__left { flex: 1 1 26rem; min-width: min(100%, 18rem); display: flex; flex-direction: column; gap: var(--space-s); }
.home-about-intro__left h2 { font-size: var(--step-3); line-height: var(--leading-l); color: var(--tertiary); text-transform: uppercase; }
.home-about-intro__left .display { max-width: 7.7em; }   /* 413px at 54px: breaks after "Practice", as the original does */
.home-about-intro__right {
  flex: 1 1 26rem; min-width: min(100%, 18rem); margin-left: auto;
  display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-end; padding-top: var(--space-2xs);
}
.home-about-intro__right p { text-align: right; max-width: 37.2em; }   /* the source's 608px column */
/* the source gives this column 608 of 1350 (45%) and spaces its three items
   and four rules to the full height of the photo beside it */
.home-about-list {
  flex: 0 1 45%; min-width: min(100%, 18rem);
  align-self: stretch;                 /* the rules spread to the photo's full height */
  display: flex; flex-direction: column;
  gap: var(--space-s-m); justify-content: space-between;
}
.home-about-list .dotted-rule { margin: 0; }
.home-about-item { display: flex; gap: var(--space-xs-s); align-items: flex-start; }
.home-about-item svg { width: 2.9rem; height: 2.9rem; flex: none; fill: var(--tertiary); margin-top: var(--space-s-m); }
.home-about-item h3 { font-size: var(--step-5); line-height: var(--leading-m); color: var(--ink); }
.home-about-item p { margin-top: var(--space-3xs); }
/* was 675x673 fixed; now a ratio box that fills its column */
/* The original's photo is a fixed 675x673 beside a 608px list, with the
   gap between them taking the slack. Letting it grow to 50% made it 714px
   and pushed it hard against the rules. */
.home-about-photo {
  flex: 0 0 auto; width: min(675px, 100%); min-width: min(100%, 18rem);
  align-self: flex-start; aspect-ratio: 675 / 673; border-radius: 10px; margin-left: auto;
  background: url("/assets/images/practice-b.491f9078ee.webp") 50% 50% / cover no-repeat;
}
/* The family illustration hangs off the right of the about band. Purely
   decorative, and the source hides it below 1024, so it does too. */
.home-about-family {
  position: absolute; right: 3.5%;
  /* hangs below the band by the height of the wave spacer that follows, so
     the feet land on the top edge of the forest services band */
  bottom: calc(-1 * var(--divider-h));
  width: min(44%, 40rem); aspect-ratio: 1299 / 1050;
  z-index: var(--layer-overlay); pointer-events: none;
}
.home-about-family::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/images/home-family.aea3dd5683.webp") 100% 100% / contain no-repeat;
}

/* ── Services (band 7) ──────────────────────────────────────────────────── */

.band--home-services { background: var(--primary); overflow: hidden; padding-block: var(--space-l-xl) var(--space-l-2xl); }
.band--home-services .band__inner { display: flex; flex-direction: column; gap: var(--space-s-l); }
.home-services-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center; }
/* A ch-based max-width wraps the same way at 1440 as the source's pinned
   530px did, and still reflows below it. */
.home-services-head h2 { font-size: var(--step-8); line-height: var(--leading-s); color: var(--surface); max-width: 10.4em; }   /* three lines, as the source's 566px box */
.home-services-head p { color: var(--surface); font-size: var(--step-0); line-height: var(--leading-l); max-width: 40rem; }
.home-services-head .btn { align-self: center; }
.home-services-grid { display: grid; gap: var(--space-s); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-service-card {
  background: var(--sand); border-radius: var(--radius-l);
  padding: var(--space-s-l);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-s); text-align: center;
}
.home-service-card__icon { height: 7.8rem; display: flex; align-items: flex-end; justify-content: center; }
.home-service-card__icon img { height: 100%; width: auto; object-fit: contain; }
.home-service-card h3 { font-size: var(--step-3); line-height: var(--leading-m-l); color: var(--primary); }
.home-service-card p { font-size: var(--step-0); line-height: var(--leading-l); }

/* ── Allied health (band 8) ─────────────────────────────────────────────── */

.band--home-allied { background: var(--bg); position: relative; overflow: clip; padding-block: var(--space-l-2xl) var(--band-lead); }
.band--home-allied .band__inner { display: flex; flex-direction: column; gap: var(--space-s); padding-top: var(--space-l-2xl); position: relative; z-index: var(--layer-raised); }
.band--home-allied h2 { font-size: var(--step-7); line-height: var(--leading-s); color: var(--primary); max-width: 40rem; }
.home-allied-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: var(--space-l-xl); align-items: start; }
.home-allied-copy { display: flex; flex-direction: column; gap: var(--space-s); }
.home-allied-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); max-width: 42rem; }
.home-allied-body .dotted-rule { width: 100%; }
.home-allied-body h3 { font-size: var(--step-5); line-height: var(--leading-m); color: var(--tertiary); }
.home-allied-photo { position: relative; z-index: var(--layer-flat); margin: var(--band-lead) 0 0; }
.home-allied-photo img {
  position: relative; z-index: var(--layer-base); width: 100%;
  aspect-ratio: 675 / 365; object-fit: cover; border-radius: var(--radius-l);
}
/* the orange sunburst peeks out above the photo; the rest is hidden behind it */
.home-allied-photo::before {
  content: ""; position: absolute; z-index: var(--layer-flat); left: 30%; top: -35%;
  width: 58%; aspect-ratio: 429 / 422;
  background: var(--tertiary);
  -webkit-mask: url("/assets/images/mask-shape1.69b97c0319.svg") 50% 50% / contain no-repeat;
          mask: url("/assets/images/mask-shape1.69b97c0319.svg") 50% 50% / contain no-repeat;
}

/* ── Billing / location (band 9) ────────────────────────────────────────── */

.band--home-billing { background: var(--secondary); position: relative; overflow: hidden; padding-block: var(--band-lead) var(--space-l); }
.band--home-billing .band__inner { display: flex; flex-direction: column; gap: var(--space-s-l); position: relative; z-index: var(--layer-raised); }
.band--home-billing > .band__inner > h2 { text-align: center; color: var(--surface); font-size: var(--step-7); line-height: var(--leading-s); max-width: 43rem; margin-inline: auto; }
/* The source is a deliberate 2x2 (card | photo / photo | card), NOT a flow
   grid: auto-fit produced three columns at 1440. Two explicit columns that
   collapse to one at the mobile breakpoint is the faithful translation. */
.home-billing-grid { display: grid; gap: var(--space-s); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-billing-cell { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: var(--space-2xs); }
.home-billing-cell .home-info-card { width: min(100%, 32rem); }
.home-billing-cell--location { padding: 0; align-items: flex-start; }
.home-billing-cell--location .home-info-card { width: min(100%, 29rem); }
.home-info-card {
  background: var(--sand); border-radius: var(--radius-l);
  padding: var(--space-s) var(--space-s-m);
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.home-info-card--cream { background: var(--bg); }
.home-info-card h3 { font-size: var(--step-5); line-height: var(--leading-m); color: var(--primary); }
.home-info-card .home-lead { font-family: var(--font-display); font-weight: var(--weight-700); font-size: var(--step-1); line-height: var(--leading-l); color: var(--tertiary); }
.home-info-card .dotted-rule { margin: 0; }
/* The source holds these two photos at a CONSTANT height (408px and 385px)
   and lets their width shrink — measured 662x408 at 1440 and 342x408 at 390.
   A pure aspect-ratio box collapses them to ~224px at 390 instead, which is
   most of the reason the rebuilt page ran ~12% short there. Modelled as an
   aspect-ratio with a height floor, so it still reflows rather than pinning. */
.home-photo-cell {
  border-radius: var(--radius-l);
  aspect-ratio: 662 / 408;
  min-height: min(25.5rem, 105vw);
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
}
.home-photo-cell--doctors { background-image: url("/assets/images/home-doctors-meeting.42893b7491.webp"); }
.home-photo-cell--consult {
  background-image: url("/assets/images/legal-terms.b6c03584e2.webp");
  aspect-ratio: 662 / 385;
  min-height: min(24.1rem, 99vw);
}

/* ── Contact (band 10) ──────────────────────────────────────────────────── */

.band--home-contact { background: var(--sand); position: relative; overflow: clip; padding-block: var(--space-l-2xl) 0; }
.band--home-contact .band__inner { display: flex; flex-direction: column; gap: var(--space-m-l); position: relative; z-index: var(--layer-raised); }
.home-contact-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-s-l); text-align: center; }
.home-contact-hero .btn { align-self: center; }
.home-contact-hero h2 { font-size: var(--step-7); line-height: var(--leading-s); color: var(--primary); }
.home-contact-hero p { max-width: 31em; font-size: var(--step-1); line-height: var(--leading-l); }
.home-contact-hero p a { white-space: nowrap; }   /* the phone number stays whole */
.home-contact-hero .dotted-rule { width: min(100%, 40rem); margin: 0; }
.home-ack-card {
  background: var(--muted-green); border-radius: var(--radius-l);
  padding: var(--space-s-l); max-width: 48rem; margin-inline: auto;
  text-align: center; display: flex; flex-direction: column; gap: var(--space-xs);
}
.home-ack-card h3 { font-size: var(--step-1); line-height: var(--leading-l); color: var(--primary); }
.home-ack-card p { max-width: 40em; margin-inline: auto; }   /* 718px at 18px in the source */
/* the source holds this illustration near full height through tablet rather
   than letting it scale with the (much narrower) column */
.home-contact-people {
  width: min(100%, 76.5rem); aspect-ratio: 1224 / 420;
  min-height: var(--photo-fluid); margin-inline: auto;
  background: url("/assets/images/people.7ad65d36ec.webp") 50% 100% / contain no-repeat;
}
/* This blob belongs to the SPACER band above, not to the contact band — the
   spacer's overflow clipping it to a sliver IS the design. */
.deco--home-contact-a .deco__shape {
  top: 0; left: 0; width: 100%; aspect-ratio: 1440 / 470;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  /* determinant of the source matrix3d is negative: a mirror, not a +169deg
     rotation. rotate(-11deg) scaleX(-1) is the correct decomposition. */
  transform: translate(-38%, -5.7rem) rotate(-11deg) scaleX(-1);
}
.deco--home-contact-b .deco__shape {
  top: 3.4rem; left: -39%; width: min(85rem, 94vw); aspect-ratio: 1360 / 214;
  background: var(--secondary);
  -webkit-mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
          mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
  transform: rotate(32deg);
}
.deco--home-contact-c .deco__shape {
  top: 14.5rem; left: 45%; width: min(85rem, 94vw); aspect-ratio: 1360 / 300;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
          mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
  transform: rotate(32deg);
}

/* blobs on the spacer bands */
.deco--home-spacer1 .deco__shape,
.deco--home-spacer2 .deco__shape,
.deco--home-spacer3 .deco__shape {
  width: 100%; aspect-ratio: 1440 / 470;
  -webkit-mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
          mask-image: url("/assets/images/mask-blob.4ce97911b8.svg");
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-position: 50% 0; mask-position: 50% 0;
}
/* The source anchors this blob to the RIGHT edge: 1440x470, right:-290px, so
   at 1440 its left edge is at 20% and beyond that it stays put. */
.deco--home-spacer1 .deco__shape { top: 0; left: auto; right: max(-290px, -20vw); background: var(--sage); }
.deco--home-spacer2 .deco__shape { top: 0; left: -1.5%; background: var(--sage); aspect-ratio: 1440 / 389; transform: rotateY(180deg); }
.deco--home-spacer3 .deco__shape { top: 1.9rem; left: .7%; background: var(--primary); -webkit-mask-size: 142%; mask-size: 142%; }

/* ── Home waves ─────────────────────────────────────────────────────────── */
/* Geometry and orientation both measured against the original with
   _r8/divaudit.mjs; all eight matched build2 as authored and are preserved
   exactly. THREE independent mechanisms are in play and must not be conflated:
     (a) vertical flip  = rotate(180deg) on the WRAPPER  -> .wave--bottom
     (b) horizontal flip= rotateY(180deg) on the SVG      -> .wave--flip
     (c) wave--home-d uses the PRE-FLIPPED path (280 chars, not 277) and
         therefore carries NO transform of its own. Adding one would
         double-flip it. */
.band--home-hero .wave,
.band--home-spacer .wave,
.band--home-people .wave,
.band--home-wordmark .wave,
.band--home-about .wave,
.band--home-allied .wave,
.band--home-billing .wave { left: 0; width: 100%; overflow: hidden; z-index: var(--layer-raised); transform: none; }
.band--home-hero .wave svg,
.band--home-spacer .wave svg,
.band--home-people .wave svg,
.band--home-wordmark .wave svg,
.band--home-about .wave svg,
.band--home-allied .wave svg,
.band--home-billing .wave svg { position: relative; left: 50%; transform: translateX(-50%); display: block; max-width: none; }
/* max-width: none is load-bearing. The global `img, svg { max-width: 100% }`
   reset was silently clamping every home wave svg to its wrapper's width, so
   the 169% and 161% waves (Elementor's `calc(169% + 1.3px)`) rendered
   squeezed to 100% and their crests landed in the wrong places. Verified
   against the live site's rendered svg box (2434.9px at 1440) on 2026-09-28. */

/* Scoped to .page-home: `wave--top/bottom/flip` are build2's own vocabulary,
   not the shared one, and must not reach the six settled pages (which express
   the same two flips per-modifier in the footer-additions block above). */
.page-home .wave--top    { top: -1px; bottom: auto; }
.page-home .wave--bottom { bottom: -1px; top: auto; transform: rotate(180deg); }
.page-home .wave--flip svg { transform: translateX(-50%) rotateY(180deg); }

.wave--home-a svg { width: 169.09%; height: 100%; fill: var(--secondary); }
.wave--home-b svg { width: 161.09%; height: 100%; fill: var(--bg); }
.wave--home-c svg { width: 100.09%; height: 100%; fill: var(--bg); }
/* (c) PRE-FLIPPED PATH. This divider carries the second, already-mirrored
   path (280 chars, not 277) instead of a transform — Elementor's
   data-negative="true" variant. The generic .wave--bottom rotation above
   would double-flip it, so it is cancelled here. Verified against the
   original: wrapper rotation 0, svg rotation 0, path B. */
.page-home .wave--home-d { transform: none; }
.wave--home-d svg { width: 104.09%; height: 100%; fill: var(--primary); }
.wave--home-e svg { width: 127.09%; height: 100%; fill: var(--primary); }
.wave--home-f svg { width: 169.09%; height: 100%; fill: var(--secondary); }
.wave--home-g svg { width: 100.09%; height: 100%; fill: var(--secondary); }
.wave--home-h svg { width: 169.09%; height: 100%; fill: var(--sand); }

/* Home's own responsive collapses. The shared nav/footer rules already apply. */

/* Hours: below ~1200px the narrow card cannot hold the day/time rows beside
   two contact columns (the email breaks mid-word, the leaders vanish), so it
   goes full-width with the columns beneath. The photo then follows the
   columns, so it no longer tucks under the card. */
@media (max-width: 1200px) {
  .band--home-hours .band__inner { flex-direction: column; }
  .home-hours-card { flex-basis: auto; width: 100%; }
  .home-contact-cols { flex-basis: auto; margin-top: 0; }   /* a rem basis becomes a min-HEIGHT in a column */
}

@media (max-width: 1024px) {
  .band--home-hero .band__inner { flex-direction: column; }
  .home-hero__copy { align-items: center; text-align: center; width: 100%; }
  .home-hero__lead { max-width: none; text-align: center; }
  .home-hero__copy .btn { align-self: center; }
  .home-hero__media { width: 100%; }
  .home-hero__photo-tall { margin-top: 0; }
  .deco--home-hero { display: none; }      /* would sit behind the centred headline */
  .home-allied-grid { grid-template-columns: minmax(0, 1fr); }
  .home-allied-photo { margin-top: var(--space-m); }
  .home-allied-photo::before { display: none; }   /* it would overlap the copy above once stacked */
  .band--home-about { padding-bottom: var(--space-l-2xl); }   /* family hidden here */

  .home-about-intro__right { align-items: center; text-align: center; }
  .home-about-intro__right p { text-align: center; }
  .home-about-intro__left { align-items: center; text-align: center; }
  .home-about-intro__left .display { max-width: none; }
  .home-about-photo { margin-left: 0; width: 100%; aspect-ratio: 16 / 10; }
  .home-about-family { display: none; }   /* decorative; the source hides it here */

  .home-services-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
  .home-service-card { padding: var(--space-l); }
  .home-service-card__icon { height: 10.6rem; }
  .home-about-list, .home-about-photo { flex-basis: 100%; }
  .home-about-list { gap: var(--space-s); }
  .home-about-list .dotted-rule { height: 3.25rem; }
  .home-about-item { flex-direction: column; align-items: center; text-align: center; max-width: 70ch; margin-inline: auto; }
  .home-about-item svg { margin-top: 0; }
  .home-about-intro__left, .home-about-intro__right { flex-basis: 100%; }

  /* Band overlaps, measured from the source at this breakpoint. The spacer
     lift is what closes the gap under the fixed-height illustration. */
  /* the wordmark band rides up by --quote-rise and the quote band reserves
     it below its headline; the wordmark's own inset gives the rise back, so
     its text sits where it did, and the headline is never under the band */
  .band--home-wordmark { margin-top: calc(-1 * var(--quote-rise)); padding-top: calc(var(--space-m) - var(--quote-rise)); }
  .band--home-quote { padding-bottom: var(--quote-rise); }
  .home-band-hours__photo { aspect-ratio: 720 / 300; }

  .band--home-billing > .band__inner > h2,
  .band--home-allied h2 { max-width: none; }
  .home-billing-cell, .home-billing-cell--location { align-items: center; }
  .home-allied-body { max-width: none; }
  .home-services-head h2 { max-width: none; }
}

@media (max-width: 767px) {
  /* The source keeps billing 2x2 through tablet and only goes one-up here —
     collapsing it at 1024 made the band 460px taller than the source. */
  .home-billing-grid { grid-template-columns: minmax(0, 1fr); }
  /* The source's own mobile geometry, measured at 390: 100vw image box, heads
     33px below the hero, quote 152px below it, fixed 82px wave container with
     a 52px svg, and a fixed 447px-tall blob hung at top:-123px right:-136px. */
  .band--home-people { --people-w: 100vw; --people-lift: 0px; --wave-zone: 82px; height: 39vw; }
  .band--home-people::before { top: calc(8.5vw - var(--people-head)); left: -4px; }
  .deco--home-spacer1 .deco__shape { top: -123px; right: -136px; height: 447px; aspect-ratio: auto; }
  .home-hero__media { flex-direction: column; }
  .home-hero__badge { padding: var(--space-2xs); }
  .deco--home-hero { display: none; }   /* must not sit under the headline here */
  .band--home-hours .band__inner { flex-direction: column; }
  .home-contact-cols { flex-direction: column; margin-top: 0; }
  .home-band-hours__photo { aspect-ratio: 350 / 245; }
  /* the blobs are decoration; at phone width they would swamp the content */
  .deco--home-contact-b .deco__shape,
  .deco--home-contact-c .deco__shape { opacity: .7; }
}

/* Keyboard users land here first; visually hidden until focused. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:var(--layer-top);
  background: var(--primary); color: var(--surface);
  padding: var(--space-2xs) var(--space-s);border-radius: 0 0 var(--radius-xs) 0;text-decoration:none;
  font-weight: var(--weight-700);
}
.skip-link:focus{left:0}


/* ---- Enquiry form ---------------------------------------------------------
   Posts to Rails via mediflare.js; see index.html. Sits inside the existing
   "We're Here When You Need Us" band, which is a centred flex column, so the
   form is centred and width-limited to match. Built on this site's own tokens
   (--primary, --ink, --radius-l) on this site's dials.
   Inputs take body size but never under 16px - below that iOS zooms on
   focus, and body is 15px on a phone. */
.home-contact-form{
  width:min(100%, 46rem);
  margin-inline:auto;
  padding: var(--space-s-l);
  text-align:left;
}
.home-contact-form h3{text-align:center;margin:0 0 var(--space-m)}
.mf-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap: var(--space-s)}
.mf-form__group{display:flex;flex-direction:column;margin-bottom: var(--space-s)}
.mf-form label{
  font-weight: var(--weight-700);line-height: var(--leading-m-l);color:var(--primary);
  margin-bottom: var(--space-3xs);
}
.mf-form__req{opacity:.75}
.mf-form__note{font-size:var(--step-0);line-height: var(--leading-l);margin:0 0 var(--space-s);opacity:.85}
.mf-form button{align-self:flex-start}
/* Filled in by mediflare.js on success or failure; empty until then. */
.mf-form__status{margin: var(--space-s) 0 0;font-weight: var(--weight-600);min-height:1.5em}
.mf-form__status:empty{margin-top:0}
@media (max-width:600px){
  .mf-form__row{grid-template-columns:minmax(0,1fr);gap:0}
}

/* ── 404 ──────────────────────────────────────────────────────────────
 * Served for any unmatched path, so it stands alone: say what happened, then
 * offer the way back rather than leaving a dead end.
 *
 * Deliberately written against fallbacks rather than this site's own token
 * names - every site in the fleet has a different vocabulary, and a 404 that
 * silently loses its layout because one variable is spelt differently is
 * worse than one that is slightly plainer. */
.notfound {
    padding-block: var(--space-3xl) var(--space-2xl);
    text-align: center;
}
.notfound__inner { max-width: 46rem; margin-inline: auto; }
.notfound__code {
    font-size: var(--step-8);   /* the site's display step, as the hero headlines */
    font-weight: var(--weight-700);
    line-height: var(--leading-xs);
    margin: 0 0 var(--space-2xs);
    opacity: 0.55;
}
.notfound h1 { margin-top: 0; font-size: var(--step-5); }
.notfound__lede { font-size: var(--step-1); line-height: var(--leading-l); margin-inline: auto; max-width: 40rem; }
.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    justify-content: center;
    margin-top: var(--space-l);
}
.notfound__links {
    margin-top: var(--space-xl);
    padding-top: var(--space-l);
    border-top: var(--border-thin) solid currentColor;
    border-color: color-mix(in oklab, currentColor 22%, transparent);
}
.notfound__links-title {
    font-size: var(--step-0);
    text-transform: uppercase;
    letter-spacing: var(--tracking-xl);
    margin: 0 0 var(--space-s);
}
.notfound__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-l);
    justify-content: center;
}
.notfound__links a {
    display: inline-block;
    min-height: 24px;   /* WCAG 2.5.8 target size */
    line-height: var(--leading-l);
    font-weight: var(--weight-600);
}


/* ==========================================================================
   INNER-PAGE POLISH (about, services, contact, practice-policy)
   Matched against the practice's live site, section by section, from the
   reference screenshots the practice supplied. Everything here overrides a
   rule above; nothing is redefined that already matched.
   ========================================================================== */

/* The 100.1%-wide wave dividers overhang the viewport by a hair; the body
   already hides that but the document still reported a 1441px scroll width.
   `clip` (not `hidden`) so main never becomes a scroll container. */
main { overflow-x: clip; }

/* The hand-drawn double underline under a phrase in a heading. The original
   is Elementor's animated headline, "double_underline" marker: an SVG the
   size of the phrase plus 10px on every side, two strokes 9 units wide in a
   500x150 box stretched to fit, drawn in over 1.2s by growing the dash. Same
   SVG, same geometry, same draw. Below-the-fold phrases draw as they scroll
   into view instead of on page load. */
/* z-index 0 on the span makes it a stacking context, so the stroke at -1
   paints behind the span's own text: descenders (y, g, p) sit in front. */
.u-mark { position: relative; display: inline-block; z-index: var(--layer-flat); }
.u-mark__svg {
  position: absolute; left: -10px; top: -10px; z-index: var(--layer-behind);
  width: calc(100% + 20px); max-width: none;   /* the img/svg reset would cap it at the span */
  height: calc(100% + 20px);
  overflow: visible; pointer-events: none;
}
.u-mark__svg path {
  fill: none; stroke: var(--tertiary); stroke-width: 9; stroke-linecap: round;
  /* Drawn by sliding the dash offset, not by growing a zero-length dash:
     a zero-length dash with round caps paints as a dot while it waits. */
  stroke-dasharray: 1500 1500; stroke-dashoffset: 1505;
  animation: u-mark-draw 1.2s ease .3s forwards;
}
/* the second stroke starts once the first is drawn, as on the original */
.u-mark__svg path:nth-of-type(2) { animation-delay: .9s; }
.u-mark--scroll .u-mark__svg path {
  animation: u-mark-draw linear both;
  animation-timeline: view();
  animation-range: entry 60% cover 35%;
}
.u-mark--scroll .u-mark__svg path:nth-of-type(2) { animation-range: entry 90% cover 50%; }
@keyframes u-mark-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .u-mark__svg path { animation: none; stroke-dashoffset: 0; }
}
/* The original breaks these headings onto a second line at a fixed point. */
@media (min-width: 768px) {
  .u-line { display: block; width: max-content; max-width: 100%; margin-inline: auto; }
}

/* Footer column headings are orange in the original. */
.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--tertiary);
}

/* ── About ──────────────────────────────────────────────────────────────── */
/* The doctor / team boxes have a rounded top-right corner on their rule. */
.person { border-top-right-radius: var(--radius-l); padding-top: var(--space-m); }

/* ── Services: real tabs (progressively enhanced) ───────────────────────── */
.panels-shell.has-tabs {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-l-xl);
  align-items: start;
}
.panels-shell.has-tabs .panel-index {
  display: flex; flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: 0;
}
.panels-shell.has-tabs .panel-index a {
  display: block;
  border: 0; border-radius: var(--radius-s);
  background: var(--sand-deep); color: var(--primary);
  padding: var(--space-s) var(--space-xs);
  text-align: center;
  font-size: var(--step--2);
}
.panels-shell.has-tabs .panel-index a:hover,
.panels-shell.has-tabs .panel-index a:focus-visible { background: var(--sand); color: var(--primary); }
.panels-shell.has-tabs .panel-index a.is-active { background: var(--tertiary); color: var(--surface); }
.panels-shell.has-tabs .service-panel { display: none; margin-top: 0; }
.panels-shell.has-tabs .service-panel.is-active { display: block; }
.panels-shell.has-tabs .service-panel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
/* the photo fills the copy's height so it sits in line with the content */
.panels-shell.has-tabs .service-panel__figure { height: 100%; }
.panels-shell.has-tabs .service-panel__figure img { min-height: 0; aspect-ratio: auto; height: 100%; object-fit: cover; }

.service-panel__title { font-size: var(--step-7); line-height: var(--leading-xs); }
.service-panel__lead  { font-size: var(--step-1); max-width: 18.6em; }
/* the feature chips: a dotted rule above, an orange tick beside each */
.panel-points {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 3px dotted var(--sage);
  gap: var(--space-s) var(--space-m);
}
.panel-points li {
  --tick: 2rem;   /* the orange tick's size; the copy starts one gap past it */
  border-top: 0; padding: 0 0 0 calc(var(--tick) + var(--space-2xs));
  position: relative; font-weight: var(--weight-400); line-height: var(--leading-m-l);
  min-height: var(--tick); display: flex; align-items: center;
}
.panel-points li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--tick); height: var(--tick); border-radius: var(--radius-round);
  background: var(--tertiary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") 50% 50% / 55% no-repeat;
}

/* ── Services: podiatry card ────────────────────────────────────────────── */
.provider-card__name  { font-size: var(--step-5); color: var(--primary); text-transform: uppercase; }
.provider-card__avail { color: var(--tertiary); }
.provider-card__fees  { font-size: var(--step-1); }
.provider-card .dotted-rule { margin: var(--space-xs) 0 var(--space-s); height: 12px; }

/* ── Billing mosaic (services, practice policy) ─────────────────────────── */
/* The original's cards are narrower than their cell, sit vertically centred
   and hug the photo beside them. */
.mosaic .card {
  align-self: center;
  width: min(100%, 27rem);
  justify-self: end;
  padding: var(--space-m) var(--space-m-l);
}
.mosaic .card:nth-child(4) { justify-self: start; }
.mosaic .card__title { font-size: var(--step-5); }
.mosaic .card__lead  { color: var(--tertiary); font-size: var(--step-1); font-weight: var(--weight-700); line-height: var(--leading-m-l); }
.mosaic .dotted-rule { margin: var(--space-xs) 0; height: 12px; }
.mosaic .card__body  { margin-top: var(--space-xs); }
.mosaic .card__body ul { padding-left: var(--space-s-m); }
.mosaic .photo-card  { min-height: clamp(14rem, 26vw, 25rem); }   /* GEOMETRY: the mosaic photos' floor (binds at most widths, measured) */

/* ── Services: FAQ pills ────────────────────────────────────────────────── */
.faq details { background: var(--primary); border-radius: var(--radius-m); }
.faq summary {
  color: var(--surface);
  font-family: var(--font-body); font-weight: var(--weight-500);
  padding: var(--space-xs) var(--space-s);
}
.faq summary::after {
  content: "+"; border: 0; width: auto; height: auto; transform: none;
  font-size: var(--step-3); line-height: var(--leading-2xs); font-weight: var(--weight-400);
}
.faq details[open] { background: var(--bg); }
.faq details[open] summary { background: var(--sage); color: var(--primary); border-radius: var(--radius-m) var(--radius-m) 0 0; }
.faq details[open] summary::after { content: "–"; transform: none; }
.faq__body { padding: var(--space-xs) var(--space-s) var(--space-s); }

/* ── Contact ────────────────────────────────────────────────────────────── */
/* The forest hero keeps clear of the card that rides up into it: the button
   was being covered. */
.band--page-hero.is-forest { padding-bottom: var(--space-3xl); }
.contact-card { background: var(--bg); }
.contact-tile {
  text-align: center; justify-items: center;
  padding: var(--space-s-m) var(--space-s);
  gap: var(--space-2xs);
}
.contact-tile__label { font-family: var(--font-display); font-weight: var(--weight-700); font-size: var(--step-1); }
.contact-tile__value { font-family: var(--font-body); font-weight: var(--weight-400); color: var(--ink); }
/* The email address broke mid-word in its tile at body size on a phone. */
@media (max-width: 480px) { .contact-tile__value a[href^="mailto:"] { font-size: var(--step--1); } }
.contact-split__title { color: var(--tertiary); font-size: var(--step-7); }
.contact-split .card__body { margin-top: var(--space-s); }
.contact-split .card__body ul { list-style: disc; padding-left: var(--space-s-m); margin-top: var(--space-2xs); }
.contact-split .card__body li + li { margin-top: var(--space-3xs); }
.contact-split__figure { width: min(100%, 22rem); }
.contact-split__figure img { aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.enquiry label { font-family: var(--font-display); font-size: var(--step-0); font-weight: var(--weight-700); }
.enquiry .btn--primary { background: var(--secondary); color: var(--surface); }
.enquiry .btn--primary:hover, .enquiry .btn--primary:focus-visible { background: var(--tertiary); }
.enquiry__note {
  background: var(--bg); color: var(--ink);
  border-left: var(--border-thick) solid var(--secondary); border-radius: 6px;
  padding: var(--space-xs) var(--space-s);
}
.enquiry__note strong { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
/* the hours card stands on its own below the contact card, as on the original */
.contact-lower { margin-top: var(--space-l-xl); grid-template-columns: minmax(0, 30rem); }
.hours-card { background: var(--sand-deep); padding: var(--space-m-l) var(--space-m); }
.hours-card__title { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--step-5); }
.hours-card__title svg { width: 1.5rem; height: 1.5rem; flex: none; fill: var(--primary); }
.hours-card__note { font-style: italic; align-items: center; }
.hours-card__note svg { width: 1.6rem; height: 1.6rem; fill: var(--primary); margin-top: 0; }

/* ── Closing band (contact, practice policy) ────────────────────────────── */
/* The original shows a terracotta clover at the left and a forest sunburst
   at the right, mid-height, on either side of the copy. */
.band--closing .deco--divider-terra-blob .deco__shape {
  left: -3%; top: 18%; width: min(15rem, 30vw); aspect-ratio: 1;
  background: var(--secondary);
  -webkit-mask-image: url("/assets/images/mask-flower.aebd4030c4.svg"); mask-image: url("/assets/images/mask-flower.aebd4030c4.svg");
  transform: rotate(-12deg);
}
.band--closing .deco--divider-forest-2 .deco__shape {
  left: auto; right: -5%; top: 22%; width: min(16rem, 32vw); aspect-ratio: 429 / 422;
  background: var(--primary);
  -webkit-mask-image: url("/assets/images/mask-shape1.69b97c0319.svg"); mask-image: url("/assets/images/mask-shape1.69b97c0319.svg");
  transform: rotate(18deg);
}

/* ── Practice policy ────────────────────────────────────────────────────── */
.info-card__title  { font-size: var(--step-7); }
.info-block__title { color: var(--tertiary); font-size: var(--step-5); }
.info-pair--media img { aspect-ratio: auto; object-fit: contain; width: min(100%, 22rem); justify-self: center; border-radius: 0; }
.feature-card__title { font-size: var(--step-5); }

@media (max-width: 1024px) {
  .panels-shell.has-tabs { grid-template-columns: minmax(0, 1fr); }
  .panels-shell.has-tabs .panel-index { flex-direction: row; flex-wrap: wrap; }
  .panels-shell.has-tabs .panel-index a { flex: 1 1 12rem; }
  .panels-shell.has-tabs .service-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .mosaic .card, .mosaic .card:nth-child(4) { justify-self: stretch; width: 100%; }
}
@media (max-width: 767px) {
  /* a forced heading break and the underline mark read badly on a phone */
  .u-line { display: inline; width: auto; }
  .u-mark { display: inline; }
  .u-mark__svg { display: none; }
  .band--closing .deco--divider-terra-blob,
  .band--closing .deco--divider-forest-2 { opacity: .5; }
  .contact-lower { grid-template-columns: minmax(0, 1fr); }
}



/* ==========================================================================
   FIDELITY PASS (all five pages, measured against the live original at
   1938 / 1440 / 768 / 390 with Playwright — see scratchpad/agent4/*.txt)
   Overrides only; nothing above is redefined that already matched.
   ========================================================================== */

/* ── Header over the hero, with no seam ──────────────────────────────────
   The heroes used to be pulled up under the in-flow header by a fixed
   --hero-lift (134px). The bar's real height is content-driven — 144px at
   1280+, and 211-216px between 1025 and 1279 where the CTA wrapped onto a
   second row — so every page opened with a 10-82px strip of page colour
   above the hero ("the white gap at the top"). Taking the header out of
   flow removes the dependency: `top: auto` keeps it at its static position
   (so a preview bar's body padding still pushes it down), and the hero
   starts at the top of <main> whatever the bar measures. The heroes keep
   their --hero-lift top padding so the copy still clears the bar. */
@media (min-width: 1120px) {
  .site-header { position: absolute; top: auto; left: 0; right: 0; }
  .site-header__bar { flex-wrap: nowrap; }
  .site-nav { min-width: 0; }
}
/* Pages that open with a plain title band (patient hub, 404) have no hero
   lift of their own, so they take the header's height here. */
.band--page-head { padding-top: calc(var(--space-2xl) + var(--hero-lift)); }
.notfound { padding-top: calc(var(--space-3xl) + var(--hero-lift)); }
/* Between the header breakpoint and 1360 the bar is too narrow for the full
   nav at desktop spacing; tighten rather than wrap. (Was 1025-1279; with the
   search icon the wide spacing is comfortable only from 1353.) */
@media (min-width: 1120px) and (max-width: 1359px) {
  .site-header__bar { padding-inline: var(--space-m); }
  .site-header__logo img { width: 170px; }
  .site-nav__list { gap: var(--space-xs); }
  .site-header__cta { padding-inline: var(--space-xs); white-space: nowrap; }
}

/* ── Cards that ride up into the hero ────────────────────────────────────
   The story card, the services tab panel and the contact card open their
   band with a negative top margin. With nothing to stop it, that margin
   collapsed THROUGH the band, so the band's own background started 155px
   early and painted over the bottom of the hero — the hero wave and the
   feet of the illustration vanished under a flat straight edge (the About
   and Services "curves not applied"). A block formatting context keeps the
   child's margin inside the band. */
.band--story,
.band--contact-card,
.band--service-panels,
.band--info.is-forest { display: flow-root; }

/* The hero keeps a clear zone under its illustration for the wave — 150px
   on the original at every desktop width — and the card overlaps that zone
   by the measured amount (about 111, services 83, contact / patient info
   128). On the ladder (--hero-tail and friends, constant from 1240 up), so
   the overlap still does not drift across desktop widths. */
@media (min-width: 1025px) {
  .band--about-hero { padding-bottom: var(--hero-tail); }
  .band--page-hero.is-cream { padding-bottom: var(--hero-tail); }
  .band--page-hero.is-forest { padding-bottom: var(--hero-tail-forest); }
  /* the figures stand ON the card: its top edge is 14px (--space-xs) above
     their feet on the original (about, services and patient information
     alike); the contact card rides 128px (3xl + 2xs) into the forest hero */
  .story-card   { margin-top: calc(-1 * (var(--hero-tail) + var(--space-xs))); }
  .panels-shell { margin-top: calc(-1 * (var(--hero-tail) + var(--space-xs))); }
  .contact-card { margin-top: calc(-1 * (var(--space-3xl) + var(--space-2xs))); }
  .band--info.is-forest { padding-top: 0; }
  .band--info.is-forest .info-card { margin-top: calc(-1 * (var(--hero-tail) + var(--space-xs))); }
  /* the illustration is the full shell width (1350px) on the original */
  .people-strip { width: 100%; }
  .people-strip--alt { width: 77%; }
  .band--page-hero .people-strip { margin-top: var(--space-s); }
}

/* Below the tablet breakpoint the original hides the hero illustration; ours
   keeps it, so give the card enough room that it does not cover the feet. */
@media (max-width: 1024px) {
  .band--about-hero,
  .band--page-hero.is-cream { padding-bottom: var(--space-xl); }
}

/* ── Waves: the original's geometry ──────────────────────────────────────
   Two things were off. (1) WIDTH: eleven of the inner-page dividers were
   transcribed at 100.1% where the original draws them at 122-300% of the
   viewport — at 100% the whole two-hump path is squeezed into view and the
   curve reads as choppy; at 169% only the broad middle sweep shows.
   (2) HEIGHT: the original's shape heights are fixed px (139 / 162 / 174 /
   187 / 224 / 348) at every desktop width, stepping down to 85 on tablet and
   52 on a phone. Ours were vw-based, so at 1938 every curve was 35% steeper
   than the reference ("contact's curve is too steep"). */
.wave--about-hero        { width: 300%;   height: 187px; }
.wave--divider-c         { width: 169.1%; height: 139px; }
.wave--divider-e         { width: 100.1%; height: 162px; }
.wave--divider-g         { width: 153.1%; height: 174px; }
.wave--contact-top-forest{ width: 122.1%; height: 348px; }
.wave--contact-sand      { width: 169.1%; height: 139px; }
.wave--services-hero     { width: 124.1%; height: 224px; }
.wave--divider-cream     { width: 120.1%; height: 139px; }
.wave--divider-terra     { width: 169.1%; height: 139px; }
.wave--mosaic-top-terra  { width: 100.1%; height: 29px; }
.wave--divider-sand      { width: 169.1%; height: 139px; }
.wave--pp-hero           { width: 300%;   height: 187px; }
.wave--pp-terra          { width: 169.1%; height: 139px; }
.wave--pp-top-terra      { width: 100.1%; height: 29px; }
.wave--pp-cream          { width: 169.1%; height: 139px; }
.wave--pp-forest         { width: 100.1%; height: 162px; }
.wave--pp-sand           { width: 153.1%; height: 174px; }
/* home: same fixed desktop heights (widths were already right) */
.wave--home-a, .wave--home-f, .wave--home-h { height: 139px; }
.wave--home-b { height: 160px; }
.wave--home-c { height: 99px; }
.wave--home-d { height: 79px; }
.wave--home-e { height: 140px; }
.wave--home-g { height: 29px; }

/* The divider bands themselves: 179px on desktop, 112 on tablet, 67-82 on a
   phone — the original's own values, not a clamp approximating them. */
.band--divider, .band--home-spacer { height: var(--divider-h); }
.band--home-wordmark { min-height: var(--divider-h); }

@media (max-width: 1024px) {
  .wave--divider-c, .wave--divider-e, .wave--divider-g,
  .wave--contact-sand, .wave--divider-cream, .wave--divider-terra,
  .wave--divider-sand, .wave--pp-terra, .wave--pp-cream, .wave--pp-forest,
  .wave--pp-sand,
  .wave--home-a, .wave--home-b, .wave--home-d, .wave--home-f, .wave--home-h { height: 85px; }
  .wave--services-hero { width: 134.1%; height: 128px; }
  .band--divider, .band--home-spacer { height: 112px; }
  .band--home-wordmark { min-height: 112px; }
}
@media (max-width: 767px) {
  .wave--divider-c, .wave--divider-e, .wave--divider-g,
  .wave--contact-sand, .wave--divider-cream, .wave--divider-terra,
  .wave--divider-sand, .wave--pp-terra, .wave--pp-cream, .wave--pp-sand,
  .wave--home-a, .wave--home-d, .wave--home-f, .wave--home-h { height: 52px; }
  .wave--pp-forest { height: 44px; }
  .wave--home-b { height: 31px; }
  .wave--home-c { height: var(--home-about-wave-h); }
  .wave--home-e { height: 62px; }
  .wave--services-hero { width: 111.1%; height: 32px; }
  .band--divider, .band--home-spacer { height: 74px; }
  .band--home-wordmark { min-height: 82px; }
}
@media (max-width: 480px) {
  .wave--contact-top-forest { width: 240.1%; height: 148px; }
}

/* ── The colour blobs in the divider bands ───────────────────────────────
   On the original each is a 100%-wide spacer of FIXED px height (436-600)
   at a fixed px offset, masked with the blob (contain). Ours sized them by
   aspect-ratio, so at 1938 every blob was 35% larger than at 1440 and had
   drifted sideways by up to 100px; two on services / patient info were
   anchored at -40% instead of 0. Desktop only — the % geometry below 1025
   was tuned separately and the original re-lays them out there anyway. */
@media (min-width: 1025px) {
  .deco--divider-c .deco__shape            { left: -640px; top: -83px; height: 436px; aspect-ratio: auto; }
  .deco--divider-e .deco__shape            { left: 291px;  top: 0;     height: 470px; aspect-ratio: auto; }
  .deco--divider-g .deco__shape            { left: -364px; top: 0;     height: 470px; aspect-ratio: auto; }
  .deco--divider-forest-c .deco__shape     { left: -228px; top: -10px; height: 600px; aspect-ratio: auto; }
  .deco--divider-forest .deco__shape       { left: 269px;  top: 31px;  height: 470px; aspect-ratio: auto; }
  .band--divider .deco--divider-forest-2 .deco__shape { left: 10px; top: 30px; height: 591px; aspect-ratio: auto; }
  .deco--divider-forest-mirror .deco__shape{ left: 0;      top: 0;     height: 470px; aspect-ratio: auto; }
  .deco--divider-muted .deco__shape        { left: 10px;   top: 30px;  height: 470px; aspect-ratio: auto; }
  .band--divider .deco--divider-terra-blob .deco__shape { left: 198px; top: -11px; height: 560px; aspect-ratio: auto; }
  .deco--divider-accent-mirror .deco__shape{ left: -499px; top: -75px; height: 470px; aspect-ratio: auto; }
  .deco--home-spacer1 .deco__shape         { height: 470px; aspect-ratio: auto; }
  .deco--home-spacer2 .deco__shape         { left: -21px;  height: 389px; aspect-ratio: auto; }
  /* The forest bump under the allied wave and the forest band under the
     billing wave: fixed 470px boxes on the original at every desktop width
     (measured 1440 and 1920). The aspect-ratio boxes grew with the viewport,
     so on wide screens the bump rose into the section above and the band
     slid out of view. The band's offset is a fixed -555px, not a percentage. */
  .deco--home-spacer3 .deco__shape         { left: 10px;   top: 30px;  height: 470px; aspect-ratio: auto; }
  .deco--home-contact-a .deco__shape       { left: 0; top: 0; width: 100%; height: 470px; aspect-ratio: auto;
                                             -webkit-mask-size: contain; mask-size: contain;
                                             -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
                                             /* the source's matrix3d, verbatim: mirror + 11deg, moved -555,-92 */
                                             transform: translate(-555px, -92px) rotate(-11deg) scaleX(-1); }
}

/* ── Band rhythm: the original's 96px lead-in and 110-160px tails ───────── */
.band--story    { padding-bottom: var(--space-3xl); }
.band--beliefs  { padding-block: var(--space-3xl) calc(var(--space-3xl) + var(--space-l)); }
.band--doctors  { padding-block: var(--space-3xl); }
.band--team     { padding-top: var(--space-3xl); }
.band--service-panels { padding-bottom: calc(var(--space-3xl) + var(--space-m)); }
.band--info.is-cream  { padding-block: var(--space-3xl); }
.band--closing.is-forest-band { padding-block: var(--space-3xl); }
.band--closing.is-sand { padding-top: var(--space-3xl); }
.band--people-strip .people-strip { width: 100%; }
.band--people-strip { padding-inline: 0; }   /* the inner shell already carries the gutter; doubling it left the strip 81px short of the original */
/* footer: the original closes 24px under its bottom row, not 90 */
.site-footer__card { padding-bottom: var(--space-m); }
.site-footer__bottom { margin-top: var(--space-xl); }

/* ── Contact: the pieces that had been dropped ───────────────────────────
   The original's enquiry form puts Email and Phone side by side, and the
   hours card shares its row with a Google map (604 / 696 at 1440). */
.contact-split__title { max-width: 12em; }   /* 500px column on the original: "We'll Get Back to / You" */
.enquiry__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.contact-lower { grid-template-columns: minmax(0, 604fr) minmax(0, 696fr); }
.contact-lower .map-frame { min-height: 100%; height: auto; }
@media (max-width: 1024px) {
  .contact-lower { grid-template-columns: minmax(0, 1fr); }
  .contact-lower .map-frame { min-height: clamp(14rem, 40vw, 27.5rem); }   /* GEOMETRY: the stacked map's height */
}
@media (max-width: 600px) {
  .enquiry__row { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   SCROLL MOTION on the floating shapes
   The original gives each clover / sunburst an Elementor "scrolling effect":
   it rotates on its own axis as it travels through the viewport (rotateZ,
   speed 1, over the element's full 0-100% traversal). Reproduced here with a
   native view() timeline: the shape turns through --fx-turn between entering
   at the bottom and leaving at the top (one full turn per traversal: the
   clovers and sunbursts are near-symmetric, so a smaller sweep is hard to
   see; a full turn reads clearly and is still slow at scrolling speed). Uses the individual `rotate`
   property so it composes with each shape's existing `transform` without
   touching it. Browsers without scroll-driven animations simply leave the
   shape at its authored angle; prefers-reduced-motion switches it off.
   The big terracotta / sage fills are deliberately NOT included: the
   original only animates the small floating shapes.
   ========================================================================== */
.deco--hero-flower .deco__shape,
.deco--hero-shape .deco__shape,
.deco--contact-flower .deco__shape,
.deco--contact-shape .deco__shape,
.deco--pp-flower .deco__shape,
.deco--pp-shape .deco__shape,
.deco--about-flower .deco__shape,
.deco--about-shape .deco__shape,
.deco--home-contact-b .deco__shape,
.deco--home-contact-c .deco__shape,
.band--closing .deco--divider-terra-blob .deco__shape,
.band--closing .deco--divider-forest-2 .deco__shape,
.home-allied-photo::before {
  --fx-turn: 180deg;
  animation: deco-scroll-turn linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
  will-change: rotate;
}
/* the clovers turn one way, the sunbursts the other, as on the original */
.deco--hero-shape .deco__shape,
.deco--contact-shape .deco__shape,
.deco--pp-shape .deco__shape,
.deco--about-shape .deco__shape,
.deco--home-contact-c .deco__shape,
.band--closing .deco--divider-forest-2 .deco__shape,
.home-allied-photo::before { --fx-turn: -180deg; }
/* The AGPAL badge turns too, as on the original (rotateZ, speed 0.9, over
   the middle of its traversal). A gentler sweep: it is a logo, not a shape. */
.home-hero__badge span {
  --fx-turn: 22deg;
  animation: deco-scroll-turn linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
  will-change: rotate;
}
@keyframes deco-scroll-turn {
  from { rotate: calc(-1 * var(--fx-turn)); }
  to   { rotate: var(--fx-turn); }
}
@media (prefers-reduced-motion: reduce) {
  .deco__shape, .home-allied-photo::before, .home-hero__badge span { animation: none; rotate: none; }
}

/* The menu links are one step larger from 1440px up; below that the larger
   type leaves under 20px between "Contact" and the booking button. */
@media (max-width: 1439px) {
  .site-nav__list a { font-size: var(--step-0); }
}

/* ── Footer: edge to edge, and the illustration stands on it ───────────
   The footer panel runs the full width of the screen with only its top
   corners rounded, and is pulled up under the illustration so the figures'
   feet rest on its top edge (26px on the inner pages, 38px on the home
   page, whose figures are drawn larger). The footer is pulled up rather
   than the illustration pushed down because the home contact band clips
   its overflow, which would cut the feet off. The strips are positioned
   above the footer so the feet paint over the panel's edge. */
/* Inset at the sides like every other card, flush with the bottom of the
   page, top corners rounded only. The illustrations carry ~5px of faint
   shadow below the solid feet, so the panel is pulled up by that much and
   the feet sit exactly on its top edge. */
.site-footer { position: relative; z-index: var(--layer-flat); padding: 0 var(--gutter) 0; margin-top: calc(-1 * var(--space-3xs)); }
.site-footer__card {
  width: min(100%, var(--shell)); margin-inline: auto;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}
.band--people-strip .people-strip,
.home-contact-people,
.team__illustration { position: relative; z-index: var(--layer-float); }

/* ── Headings hold to two lines ─────────────────────────────────────────── */
.home-services-head h2 { max-width: 24ch; }          /* "Mornington Village / Medical Centre Services" */
.mosaic__title { max-width: min(100%, 52rem); }      /* "… Medical Centre / Appointment and Billing Information" */

/* ── About: the practitioner role line ──────────────────────────────────
   The doctors loop prints both qualifications and profession; the original
   shows the qualifications where there are any (MBBS) and otherwise the
   profession (Podiatrist). An empty line is dropped, and the profession
   line only shows when the qualifications line before it is empty. */
.person__role:empty { display: none; }
.person__role:not(:empty) + .person__role--profession { display: none; }

/* ── Home hours card: the original's geometry ───────────────────────────
   Card 544px wide, inset 40px from the photo's left edge, padded 40/48/60,
   overlapping the photo by 50px; the columns start 114px to its right; the
   photo runs 45px past the shell on each side where the viewport allows
   (1450px at 1920, the shell's 1360 at 1440). Measured on the original. */
@media (min-width: 1201px) {
  .band--home-hours .band__inner { gap: var(--space-3xl); }
  /* The photo rises --hours-rise into this band, so both items reserve it
     below their content: the card's 60px foot is the rise plus 2xs, and the
     columns pad the rise plus s.
     The card still sits over the photo's top edge, as on the original; the
     columns' copy can never run into it, however long it gets. */
  .home-hours-card { flex: 0 0 min(544px, 40vw - 2rem); align-self: stretch; margin-left: var(--space-l); padding: var(--space-l) calc(var(--space-l) + var(--space-2xs)) calc(var(--hours-rise) + var(--space-s)); }
  .home-contact-cols { flex: 1 1 0; padding-bottom: calc(var(--hours-rise) + var(--space-s)); }
  /* the email address stays on one line: the appointments column takes the
     larger share, as on the original */
  .home-contact-col:first-child { flex: 1.35 1 0; }
  .home-contact-col:last-child  { flex: 1 1 0; }
  .home-contact-list a { white-space: nowrap; overflow-wrap: normal; }
  .home-band-hours__photo { margin-top: calc(-1 * var(--hours-rise)); width: min(100vw - 80px, 1450px); }
}

/* ── Home hero people under the booking button; billing grid at fixed sizes ─
   The figures' first silhouette starts 50px into the illustration's box, so
   the box is anchored 50px left of the shell edge and the group begins
   directly under the booking button at every desktop width. Feet stay on
   the band's seam, below the wave's lowest point, so they never float.
   The billing mosaic is the original's fixed geometry: 662px photos (408 and
   385 tall), 513px cards padded 24/32, 38px between columns, 24px between
   rows, so the panels keep the same spacing however wide the screen. */
@media (min-width: 1025px) {
  /* 50px puts the first figure on the shell edge; the extra pull moves the
     group further left, kept smaller where the shell meets the screen edge */
  .band--home-people::before { left: calc(max(var(--gutter), (100% - var(--shell)) / 2) - 50px - 25px); }
  .home-billing-grid { gap: var(--space-m) var(--space-l); }
  .home-billing-cell, .home-billing-cell--location { padding: 0; }
  .home-billing-cell .home-info-card,
  .home-billing-cell--location .home-info-card { width: min(100%, 513px); padding: var(--space-m); }
  .home-photo-cell { width: min(100%, 662px); height: 408px; min-height: 0; aspect-ratio: auto; justify-self: end; }
  .home-photo-cell--consult { height: 385px; justify-self: start; }
}

/* "Where To Find Us": the address breaks before the suburb. The single-line
   {{address}} tag is all this practice's profile provides, so the width does
   the breaking: "Upper Ground 1.03, 241 Main Street," measures 16.4em. */
.home-info-card--cream .home-lead { max-width: 17em; }

/* ── Lead paragraphs hold to two lines ───────────────────────────────────
   Each width is the measured minimum for the copy to fit in two lines at
   the desktop type size, so the leads never run to a third line. */
@media (min-width: 1025px) {
  .home-hero__copy  { flex-basis: 46%; }
  .home-hero__media { flex-basis: 51%; }
  .home-hero__lead  { max-width: 620px; }
  .home-hero__lead p { max-width: none; }
  .home-about-intro__right { flex-basis: 870px; }
  .home-about-intro__right p { max-width: none; }
  .about-hero__lead { max-width: min(100%, 900px); }
  .about-hero__lead p { max-width: none; }
  .page-services .page-hero__lead { max-width: min(100%, 700px); }
  .page-services .page-hero__lead p { max-width: none; }
  .allied__lead { max-width: min(100%, 720px); }
  .faq-intro__lead { max-width: min(100%, 480px); }
  .closing__lead, .page-contact .closing__lead { max-width: min(100%, 840px); }
}
/* Laptop widths: the hero copy column takes half the shell so the lead
   still fits two lines; the about intro stacks its two halves so neither
   the eyebrow nor the lead is squeezed. */
@media (min-width: 1025px) and (max-width: 1559px) {
  .home-hero__copy  { flex-basis: 51%; }
  .home-hero__media { flex-basis: 46%; }
  .home-about-intro__left, .home-about-intro__right { flex-basis: 100%; }
  .home-about-intro__right { margin-top: var(--space-s); }
}
@media (min-width: 1560px) {   /* the shell is its full 1450px from here */
  .home-about-intro__left  { flex: 1 1 0; min-width: 0; }
  .home-about-intro__right { flex: 0 0 850px; }   /* fixed: it must not grow into the left column */
  .home-about-intro__left .display { max-width: 26rem; }   /* "A Family Practice / Built on Trust" */
}

/* ── Services tabs: larger, one type step up ─────────────────────────────── */
.panels-shell.has-tabs .panel-index a { font-size: var(--step-0); padding: var(--space-m) var(--space-s); }
@media (min-width: 1025px) {
  .panels-shell.has-tabs { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}
/* Below that the shell is one column and the tabs sit two per row above the
   panel, each the full width of its half, so the long labels never squeeze
   the content beside them. */
@media (max-width: 1024px) {
  .panels-shell.has-tabs { grid-template-columns: minmax(0, 1fr); }
  .panels-shell.has-tabs .panel-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
  .panels-shell.has-tabs .panel-index a { flex: none; }
}
@media (max-width: 560px) {
  .panels-shell.has-tabs .panel-index { grid-template-columns: minmax(0, 1fr); }
}

/* With the 1450px shell the billing photos fill their column (fixed heights
   kept) so the cards still hug them with the same 38px gap. */
@media (min-width: 1025px) {
  .home-photo-cell { width: 100%; }
}

@media (min-width: 1560px) {
  .band--home-people::before { left: calc((100% - var(--shell)) / 2 - 50px - 60px); }
}

/* ── Contact page: type sizes and hero details ───────────────────────────
   Eyebrow white on the forest hero as the original; the orange hero button
   hovers to the brown; form labels, fields, the note and the hours all one
   step larger. */
.page-contact .page-hero .eyebrow { color: var(--surface); }
.page-contact .page-hero__cta .btn--accent:hover,
.page-contact .page-hero__cta .btn--accent:focus-visible { background: var(--terracotta-strong); color: var(--surface); }
.enquiry label { font-size: var(--step-1); }
.enquiry input, .enquiry textarea { font-size: var(--step-1); }
.enquiry__note { font-size: var(--step-0); }
.enquiry__note strong { font-size: var(--step-3); }
@media (max-width: 1024px) {
  /* the panel copy is full width once the photo drops below it */
  .service-panel__lead, .service-panel__body { max-width: none; }
}

/* ── Services panels: larger tab labels and check items ─────────────────── */
.panels-shell.has-tabs .panel-index a { font-size: var(--step-1); }
.panel-points li { font-size: var(--step-1); }

/* ── FAQ: slides open; the answer sits in a grey-bordered box, no fill change ─ */
.faq details, .faq details[open] { background: var(--primary); border-radius: var(--radius-m); }
.faq summary, .faq details[open] summary { background: transparent; color: var(--surface); border-radius: var(--radius-m); font-size: var(--step-1); }
.faq details[open] summary::after { content: "–"; }
.faq__body {
  margin: 0 var(--space-s) var(--space-s);
  padding: var(--space-s);
  border-radius: var(--radius-s);
  color: var(--surface);
  font-size: var(--step-0);
}
.faq__body a { color: var(--tertiary); }
/* the slide: native details animation where supported (Chrome/Edge 131+,
   Safari 18.4+); elsewhere it opens instantly */
.faq details::details-content {
  height: 0; overflow: hidden;
  transition: height .35s ease, content-visibility .35s allow-discrete;
}
.faq details[open]::details-content { height: auto; }
@supports (interpolate-size: allow-keywords) { .faq { interpolate-size: allow-keywords; } }
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }

/* ── Services: forest blobs behind the wave dividers ─────────────────────
   Measured from the original's Elementor widgets (5000881e, 964b803,
   13fdc396) at 1440 and 1920. Waves already matched; the blobs did not:
   the first is not mirrored, the second's mask is 142% wide and anchored
   to the top (so it is cut off at the right), and the third is shifted
   555px left / 92px up, so only its right lobe shows at the left edge. */
@media (min-width: 1025px) {
  .page-services .deco--divider-forest .deco__shape { transform: none; }
  .page-services .band--divider .deco--divider-forest-2 .deco__shape {
    -webkit-mask-size: 142%; mask-size: 142%;
    -webkit-mask-position: 50% 0; mask-position: 50% 0;
  }
  .page-services .deco--divider-forest-mirror .deco__shape {
    transform: translate(-554.716px, -91.843px) rotate(-11deg) scaleX(-1);
  }
}

/* ── Footer: square Facebook tile; legal links hover orange ─────────────── */
.site-footer__social a { border-radius: var(--radius-xs); }
.site-footer__legal a { transition: color .18s ease; }
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--tertiary); }

/* ── Contact: "We'll Get Back to You" at the original's scale ───────────
   Original at 1440: heading 49.5px, copy 18.6px, illustration 521px wide. */
.contact-split__title { font-size: var(--step-8); }
.contact-split .card__body { font-size: var(--step-1); max-width: 26em; }
.contact-split__figure { width: min(100%, 521px); }

/* ── Services FAQ, as the original: closed items forest; the open one has a
   sage header and its answer sits on the page background in a grey border ─ */
.faq details[open] { background: transparent; border: var(--border-thin) solid var(--border); }
.faq details[open] summary { background: var(--sage); color: var(--primary); margin: -1px -1px 0; }
.faq__body {
  margin: 0; border: 0; border-radius: 0 0 var(--radius-m) var(--radius-m);
  padding: var(--space-s) var(--space-s) var(--space-s-m);
  color: var(--ink);
}

/* ── Services panels: the title runs full width; the photo starts level with
   the intro line and sits beside the copy at its own proportion ─────────── */
@media (min-width: 1025px) {
  .panels-shell.has-tabs .service-panel__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-m-l); row-gap: 0; align-items: start;
  }
  .panels-shell.has-tabs .service-panel__copy { display: contents; }
  .panels-shell.has-tabs .service-panel__copy > * { grid-column: 1; }
  .panels-shell.has-tabs .service-panel__title,
  .panels-shell.has-tabs .service-panel__grid:not(:has(.service-panel__figure)) .service-panel__copy > * { grid-column: 1 / -1; }
  .panels-shell.has-tabs .service-panel__figure {
    grid-column: 2; grid-row: 2 / span 3; align-self: start;
    height: auto; margin-top: var(--space-xs);
  }
  .panels-shell.has-tabs .service-panel__figure img { height: auto; aspect-ratio: 8 / 7; object-fit: cover; }
  /* no photo (chronic conditions, 75+): the copy runs the full panel width */
  .panels-shell.has-tabs .service-panel__grid:not(:has(.service-panel__figure)) :is(.service-panel__lead, .service-panel__body) { max-width: none; }
}

/* ── Hero clovers: a fifth smaller ──────────────────────────────────────── */
.deco--hero-flower .deco__shape    { width: 12.5vw; }
.deco--contact-flower .deco__shape { width: 13.5vw; }
.deco--pp-flower .deco__shape      { width: 12vw; }
.deco--about-flower .deco__shape   { width: 9.5vw; }

/* ── Mobile / tablet: blobs behind the divider waves ──────────────────────
   The desktop geometry (fixed px, rotations) made the blobs taller than the
   74px mobile divider band, so the band edge sliced them into flat cut-outs.
   Below 1025 every divider blob instead fills its band from just under the
   top edge, its flat base hidden behind the wave, so only its curved top
   shows: a crescent peeking out on the same side as on desktop.
   `mask-blob-stretch.svg` is mask-blob.svg with preserveAspectRatio="none". */
@media (max-width: 1024px) {
  :is(.band--divider, .band--home-spacer) > .deco .deco__shape {
    left: -30%; right: auto; top: 6px; bottom: 0;
    width: 130%; height: auto; aspect-ratio: auto;
    -webkit-mask-image: url("/assets/images/mask-blob-stretch.52f9cdbccb.svg");
            mask-image: url("/assets/images/mask-blob-stretch.52f9cdbccb.svg");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-position: 0 0; mask-position: 0 0;
    transform: none; rotate: none;
  }
  /* these peek from the left on desktop, so they do here too */
  :is(.band--divider, .band--home-spacer) > :is(
    .deco--home-spacer2, .deco--home-contact-a, .deco--divider-c, .deco--divider-g,
    .deco--divider-forest-mirror, .deco--divider-forest-c, .deco--divider-accent-mirror
  ) .deco__shape { left: 0; transform: scaleX(-1); }
}

/* ── Mobile / tablet header, as the original: the logo centred on its own
   row, then the booking button and an orange menu square side by side ─── */
@media (max-width: 1119px) {
  .site-header__bar {
    justify-content: center;
    gap: var(--space-s) var(--space-s);
    padding: var(--space-s) var(--space-s-m) var(--space-m);
  }
  .site-header__logo { flex-basis: 100%; display: flex; justify-content: center; }
  .site-header__logo img { width: min(72vw, 22rem); max-width: none; }
  .site-header__cta { order: 2; width: auto; }
  .nav-toggle,
  .site-search__open {   /* the search magnifier is the menu square's twin */
    order: 3; margin-left: 0;
    padding: var(--space-xs);
    background: var(--secondary); border-radius: 6px;
    transition: background-color .18s ease;
  }
  .nav-toggle:hover,
  .site-search__open:hover,
  .site-search__open[aria-expanded="true"] { background: var(--terracotta-strong); }
  .nav-toggle__bar { height: 3px; background: var(--surface); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .site-nav { order: 4; }
  .site-nav__list a { text-align: center; }
}

/* ── Footer: everything centred once it is a single column ─────────────── */
@media (max-width: 768px) {
  .site-footer__cols { text-align: center; }
  .site-footer__logo { display: flex; justify-content: center; }
  .site-footer__blurb { margin-inline: auto; }
  .site-footer__contact li { justify-content: center; }
  .site-footer__social { display: flex; justify-content: center; }
  .site-footer__bottom { align-items: center; text-align: center; }
  .site-footer__bottom > .site-footer__sep { display: none; }
  .site-footer__powered, .site-footer__legal { justify-content: center; }
}

/* Tilted a few degrees so each blob rises out from behind the wave as a
   second, distinct wave. It pivots on its high corner, which stays inside
   the band, so the band edge never slices it; the low end dips behind the
   wave. Left-side blobs use a pre-mirrored mask (no scaleX), so the tilt
   and the pivot stay simple. */
@media (max-width: 1024px) {
  :is(.band--divider, .band--home-spacer) > .deco .deco__shape {
    transform-origin: 100% 0; transform: rotate(var(--blob-tilt, -5deg));
  }
  :is(.band--divider, .band--home-spacer) > :is(
    .deco--home-spacer2, .deco--home-contact-a, .deco--divider-c, .deco--divider-g,
    .deco--divider-forest-mirror, .deco--divider-forest-c, .deco--divider-accent-mirror
  ) .deco__shape {
    -webkit-mask-image: url("/assets/images/mask-blob-stretch-flip.2dc0b70dee.svg");
            mask-image: url("/assets/images/mask-blob-stretch-flip.2dc0b70dee.svg");
    transform-origin: 0 0; transform: rotate(var(--blob-tilt-l, 5deg));
  }
}

/* ── Mobile heroes: people standing on the panel; a rolling
   wave behind them ────────────────────────────────────────────────────────
   The people stay centred, as the practice asked. The hero has no bottom padding here, and the strip's bottom
   margin equals how far the panel rides up into the hero, so the feet land
   exactly on the panel's top edge.
   Each wave now shows nearly its whole curve, two hills with a dip between,
   at a different width, height and offset per page, instead of one slope. */
@media (max-width: 767px) {
  .band.band--page-hero:has(.people-strip),
  .band.band--about-hero { padding-bottom: 0; }
  .band.band--page-hero:has(.people-strip) > .band__inner,
  .band.band--about-hero .about-hero { padding-bottom: 0; }
  .band--page-hero .people-strip,
  .band--about-hero .about-hero__illustration {
    width: 100%; max-width: none; aspect-ratio: 1600 / 501;
    background-size: contain; background-position: center bottom;
    margin: var(--space-m) auto var(--rise);
  }
  .band--page-hero .people-strip--alt { width: 92%; aspect-ratio: 1498 / 589; }
  /* Patient Information's panel rides up into the hero like the others
     (its band's growing top padding pushed it down by 1-17px) */
  .band--page-hero + .band--info { padding-top: 0; }

  /* overlap the band below by 2px so no hairline seam shows at fractional widths */
  .band :is(.wave--about-hero, .wave--services-hero, .wave--pp-hero) { bottom: -2px; }
  .band .wave--about-hero    { width: 110%; height: 36vw; transform: translateX(-50%) rotate(180deg); }
  .band .wave--services-hero { width: 115%; height: 24vw; transform: translateX(-45%) rotate(180deg); }
  .band .wave--pp-hero       { width: 120%; height: 24vw; transform: translateX(-70%) rotate(180deg); }   /* its dip sits under the olive figures */
}

/* ── Home: the people band's figures sit a little higher on phones, so more
   of them shows above the wave ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .band--home-people::before { top: calc(2.5vw - var(--people-head)); }
}

/* ── Mobile / tablet menu: links two steps larger ───────────────────────── */
@media (max-width: 1119px) {
  .site-nav__list a { font-size: var(--step-3); padding-block: var(--space-xs); }
}

/* ── Mobile / tablet divider blobs: each one its own hill ───────────────
   Every blob had the same stretched shape, width and tilt, so each divider
   read as the same thing again. Each now has its own hill (mask-hill-a..d:
   two humps, a long rise, a swell and dip, three soft bumps; -flip mirrors),
   width, offset and tilt. The tilt pivots on a TOP corner, so no part of the
   blob can rise past the band's top edge and be sliced. */
@media (max-width: 1024px) {
  :is(.band--divider, .band--home-spacer) > .deco .deco__shape {
    -webkit-mask-image: var(--hill); mask-image: var(--hill);
    left: var(--hill-x); width: var(--hill-w); top: var(--hill-y);
    transform-origin: var(--hill-o); transform: rotate(var(--hill-t));
  }
  :is(.band--divider, .band--home-spacer) > .deco--home-spacer2 .deco__shape { --hill: url("/assets/images/mask-hill-a-flip.d87585f825.svg"); --hill-w: 140%; --hill-x: 0%; --hill-y: 8px; --hill-t: 3deg; --hill-o: 0 0; }
  :is(.band--divider, .band--home-spacer) > .deco--home-spacer3 .deco__shape { --hill: url("/assets/images/mask-hill-d.10fbda6f53.svg"); --hill-w: 135%; --hill-x: -35%; --hill-y: 4px; --hill-t: -2deg; --hill-o: 100% 0; }
  :is(.band--divider, .band--home-spacer) > .deco--home-contact-a .deco__shape { --hill: url("/assets/images/mask-hill-b-flip.4e0d728e10.svg"); --hill-w: 140%; --hill-x: 0%; --hill-y: 4px; --hill-t: 2deg; --hill-o: 0 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-c .deco__shape { --hill: url("/assets/images/mask-hill-b-flip.4e0d728e10.svg"); --hill-w: 120%; --hill-x: 0%; --hill-y: 6px; --hill-t: 5deg; --hill-o: 0 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-e .deco__shape { --hill: url("/assets/images/mask-hill-a.07457b94d1.svg"); --hill-w: 145%; --hill-x: -45%; --hill-y: 8px; --hill-t: -3deg; --hill-o: 100% 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-g .deco__shape { --hill: url("/assets/images/mask-hill-c-flip.61b31f9383.svg"); --hill-w: 135%; --hill-x: 0%; --hill-y: 4px; --hill-t: 2deg; --hill-o: 0 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-forest .deco__shape { --hill: url("/assets/images/mask-hill-d.10fbda6f53.svg"); --hill-w: 130%; --hill-x: -30%; --hill-y: 6px; --hill-t: -5deg; --hill-o: 100% 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-forest-2 .deco__shape { --hill: url("/assets/images/mask-hill-b.f3e1a8a606.svg"); --hill-w: 115%; --hill-x: -15%; --hill-y: 10px; --hill-t: -2deg; --hill-o: 100% 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-forest-mirror .deco__shape { --hill: url("/assets/images/mask-hill-a-flip.d87585f825.svg"); --hill-w: 110%; --hill-x: 0%; --hill-y: 8px; --hill-t: 6deg; --hill-o: 0 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-forest-c .deco__shape { --hill: url("/assets/images/mask-hill-b-flip.4e0d728e10.svg"); --hill-w: 140%; --hill-x: 0%; --hill-y: 12px; --hill-t: 3deg; --hill-o: 0 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-muted .deco__shape { --hill: url("/assets/images/mask-hill-a.07457b94d1.svg"); --hill-w: 130%; --hill-x: -30%; --hill-y: 4px; --hill-t: -2deg; --hill-o: 100% 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-terra-blob .deco__shape { --hill: url("/assets/images/mask-hill-d.10fbda6f53.svg"); --hill-w: 120%; --hill-x: -20%; --hill-y: 6px; --hill-t: -2deg; --hill-o: 100% 0; }
  :is(.band--divider, .band--home-spacer) > .deco--divider-accent-mirror .deco__shape { --hill: url("/assets/images/mask-hill-b-flip.4e0d728e10.svg"); --hill-w: 125%; --hill-x: 0%; --hill-y: 6px; --hill-t: 5deg; --hill-o: 0 0; }
}

/* ── Phones: breathing room around the dividers ──────────────────────────
   Audited at 390: headings sat 1-39px from a divider curve (Allied Health on
   the home page touched it). Every heading now clears a curve by at least
   --space-xl. The divider bands also grow so their blobs have room to show
   their own shape above the wave (52px is the fixed mobile wave height). */
@media (max-width: 767px) {
  .band--divider, .band--home-spacer { height: calc(52px + var(--space-xl)); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* the home About wave is taller here; clear it the same way */
  .band.band--home-about { padding-top: calc(var(--wave-offset) + var(--space-l)); }
}
@media (max-width: 767px) {
  :root { --home-about-wave-h: 60px; }   /* the About wave's fixed phone height */
  .band.band--home-about { padding-top: calc(var(--home-about-wave-h) + var(--space-xl)); }   /* clears that wave */
}
@media (max-width: 1024px) {
  :is(.band--divider, .band--home-spacer, .band--home-people) + .band { padding-top: var(--space-xl); }
  /* bands whose top edge carries its own wave */
  .band.band--home-billing,
  .band.band--mosaic       { padding-top: calc(var(--space-xl) + var(--space-l)); }
}
@media (max-width: 767px) {
  .band.band--home-allied  { padding-top: calc(var(--space-l-xl) + var(--space-xl)); }
  /* the wordmark band carries a wave along its bottom edge */
  .band--home-wordmark { padding-bottom: calc(var(--space-xl) + var(--space-l)); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* the same two bands, on top of their own (taller) tablet geometry */
  .band.band--home-allied  { padding-top: calc(var(--space-l-2xl) + var(--space-2xl)); }
  .band.band--home-wordmark { padding-bottom: calc(var(--space-l-2xl) + var(--space-2xl)); }
}

/* ── Phones: second polish pass ─────────────────────────────────────────── */
@media (max-width: 767px) {
  /* no floating, scroll-animated shapes on phones */
  .deco--home-contact-b, .deco--home-contact-c,
  .band--closing .deco--divider-terra-blob,
  .band--closing .deco--divider-forest-2 { display: none; }
  .home-allied-photo::before { display: none; }


  /* doctors and staff: inset so the rounded end of each top rule shows */
  .person-grid { padding-inline: var(--space-s); }

  /* About's hero wave was the steepest; flatten it */
  .band .wave--about-hero { height: 22vw; }

  /* eyebrows break into two even lines, not one long and one short */
  .eyebrow, .about-hero__eyebrow, .page-hero__eyebrow, .home-hero__eyebrow,
  .home-about-intro__left h2 { text-wrap: balance; }
}
@media (max-width: 1024px) {
  /* the billing photos kept their ratio AND a minimum height, so they grew
     wider than their column (547px at 390, 209px over at 800); fill it */
  .home-photo-cell { width: 100%; aspect-ratio: auto; height: min(25.5rem, 105vw); min-height: 0; }
  .home-photo-cell--consult { height: min(24.1rem, 99vw); }
  /* the About list's dividers were 3.25rem tall here, which blew the dots up */
  .home-about-list .dotted-rule { height: 20px; }
}
@media (max-width: 1119px) {
  /* menu links: one step down from the last pass */
  .site-nav__list a { font-size: var(--step-1); }
  /* Contact: the forest hero runs up behind the header */
  .page-contact .site-header { background: var(--primary); }
}

/* ── Services tabs on phones: each panel opens directly under its own tab ──
   The tab list and the panel wrapper step out of the box model, so the six
   tabs and six panels become one column and are interleaved by `order`.
   Only the active panel is displayed, so it appears right below its tab. */
@media (max-width: 767px) {
  .panels-shell.has-tabs { display: flex; flex-direction: column; gap: var(--space-xs); }
  .panels-shell.has-tabs .panel-index,
  .panels-shell.has-tabs .panels-body { display: contents; }
  .panels-shell.has-tabs .panel-index a { scroll-margin-top: var(--space-s); align-self: stretch; text-align: center; }
  .panels-shell.has-tabs .service-panel { align-self: stretch; }
  .panels-shell.has-tabs .service-panel.is-active { margin-block: var(--space-2xs) var(--space-s); }
  .panels-shell.has-tabs .panel-index a:nth-of-type(1) { order: 1; }
  .panels-shell.has-tabs .service-panel:nth-of-type(1) { order: 2; }
  .panels-shell.has-tabs .panel-index a:nth-of-type(2) { order: 3; }
  .panels-shell.has-tabs .service-panel:nth-of-type(2) { order: 4; }
  .panels-shell.has-tabs .panel-index a:nth-of-type(3) { order: 5; }
  .panels-shell.has-tabs .service-panel:nth-of-type(3) { order: 6; }
  .panels-shell.has-tabs .panel-index a:nth-of-type(4) { order: 7; }
  .panels-shell.has-tabs .service-panel:nth-of-type(4) { order: 8; }
  .panels-shell.has-tabs .panel-index a:nth-of-type(5) { order: 9; }
  .panels-shell.has-tabs .service-panel:nth-of-type(5) { order: 10; }
  .panels-shell.has-tabs .panel-index a:nth-of-type(6) { order: 11; }
  .panels-shell.has-tabs .service-panel:nth-of-type(6) { order: 12; }
}

/* ── Home hero on phones / tablets: the eyebrow sat 114px under the header
   (the band's 2xl top padding plus the copy column's own xl padding, which
   only exists to clear the overlapping header on desktop). The original
   leaves ~30px; one --space-l does the same. */
@media (max-width: 1024px) {
  .band.band--home-hero { padding-top: var(--space-l); }
  .home-hero__copy { padding-top: 0; }
}

/* ── Footer "Powered by": the words one step up, the logo a little smaller ─ */
.site-footer__powered { font-size: var(--step--2); }
.site-footer__powered img { width: 96px; }

/* ==========================================================================
   SITE SEARCH — the platform component (mediflare.js) writes the box
   unstyled; every rule here is this site's, on its tokens. Two placements,
   swapping at the header's own 1119/1120 (see "Header breakpoint"):
     1120+   an icon between the menu and Book Appointment, opening a panel
     <=1119  a magnifier beside the orange menu square (it joins that rule in
             the mobile header block above), opening the full-screen overlay.
   The overlay and the results list are styled ONLY through :not([hidden]),
   or they never close. Search and Close join .btn/.btn--primary; the field
   joins the enquiry form's fields (5px corner, sage edge), as the buttons'
   corner is 5px too.
   ========================================================================== */
:root {
  --target-min: 2.75rem;    /* 44px: icon-only controls */
  --measure-tight: 45ch;    /* the template's, missing here: the panel's width */
  --layer-modal: 50;        /* the template's, missing here: above the header's 40 */
}

/* Desktop: the menu's forest, orange on hover as the menu links are. */
.site-search { position: relative; flex: none; }
.site-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  color: var(--primary);
  cursor: pointer;
  list-style: none;
  transition: color .18s ease;
}
.site-search__toggle::-webkit-details-marker { display: none; }
.site-search__toggle:hover,
.site-search[open] > .site-search__toggle { color: var(--tertiary); }
.site-search__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline-end: 0;
  z-index: var(--layer-overlay);
  inline-size: min(var(--measure-tight), calc(100vw - 2 * var(--space-s)));
  padding: var(--space-s);
  background: var(--sand-deep);
  border: var(--border-thin) solid color-mix(in srgb, var(--primary) 14%, transparent);   /* the open menu's row rule */
  border-radius: var(--radius-l);   /* the header bar's own corner */
}
.site-search__panel .mf-search__results:not([hidden]) {
  max-block-size: 60dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The phone magnifier: hidden on desktop; sized and coloured with the menu
   square (mobile header block above). White glyph on the orange, as the
   menu square's bars are. */
.site-search__open { display: none; color: var(--surface); border: 0; cursor: pointer; }   /* border: a <button> keeps the UA's bevel otherwise */

/* The box: field and Search on one row, status and results beneath. */
.mf-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xs);
  align-items: center;   /* the field is --field-h, the .btn height, so the two already match; neither stretches the other */
}
.mf-search__label,
.mf-search__status,
.mf-search__results { grid-column: 1 / -1; }
.mf-search__label {   /* read out, not shown: the magnifier and placeholder say it */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mf-search__input { font-size: max(var(--step-0), 1rem); }   /* never under 16px: iOS zooms on focus below it */
.mf-search__submit,
.mf-search-overlay__close { min-block-size: var(--target-min); justify-content: center; text-transform: uppercase; }   /* capitals, as every button on the site is typed */

.mf-search__status {
  margin: 0;
  padding-inline: var(--space-xs);
  font-size: var(--step--1);
  line-height: var(--leading-m);
  color: var(--ink);
}
.mf-search__status:empty { display: none; }

/* Results: titles in the display face and forest, excerpts in body copy,
   matches in an orange tint. */
.mf-search__results { margin: 0; padding: 0; list-style: none; }
.mf-search__results:not([hidden]) { display: flex; flex-direction: column; gap: var(--space-3xs); }
.mf-search__link {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color .18s ease;
}
.mf-search__link:hover,
.mf-search__link:focus-visible { color: var(--ink); background: var(--surface); }
.mf-search__link:hover .mf-search__title { color: var(--tertiary); }
.mf-search__link:focus-visible { outline-offset: calc(-1 * var(--focus-ring-w)); }   /* inset: a scrolling list clips an outset ring */
.mf-search__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-700);
  line-height: var(--leading-s);
  color: var(--primary);
  transition: color .18s ease;
}
.mf-search__excerpt {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--step--1);
  line-height: var(--leading-l);
  color: var(--ink);
}
.mf-search__excerpt mark {
  color: var(--ink);
  background: color-mix(in srgb, var(--tertiary) 24%, transparent);
  border-radius: var(--radius-xs);
}

/* Full screen, on the header bar's sand. One row holds Close, the field and
   Search (Close first, matching the focus order); the results scroll below
   it, inside the overlay. mediflare.js locks the page behind. Subgrid puts
   the box's own children on the overlay's grid. */
.mf-search-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-xs) var(--space-2xs);
  padding-block-start: max(var(--space-s), env(safe-area-inset-top));
  padding-inline: max(var(--space-s), env(safe-area-inset-left)) max(var(--space-s), env(safe-area-inset-right));
  background: var(--sand-deep);
}
.mf-search-overlay__header { display: contents; }
.mf-search-overlay__close {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: var(--layer-base);   /* above the box, which spans this cell too */
}
.mf-search--overlay,
.mf-search--overlay .mf-search__form {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  gap: normal;            /* the overlay's own gaps: the form's smaller one, kept on a subgrid, pushed Search 2px past the row */
  align-items: stretch;   /* Close, the field and Search share one height */
}
.mf-search--overlay .mf-search__input { grid-column: 2; grid-row: 1; }
.mf-search--overlay .mf-search__submit { grid-column: 3; grid-row: 1; }
.mf-search--overlay .mf-search__status { grid-column: 1 / -1; grid-row: 2; }
.mf-search--overlay .mf-search__results {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: stretch;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block-end: max(var(--space-s), env(safe-area-inset-bottom));
}

/* ── Header breakpoint ────────────────────────────────────────────────────
   Menu, booking row and search all swap at 1119/1120 (was 1024/1025, the
   grids' tablet breakpoint, which still governs everything else). With the
   search icon, the full desktop bar -- logo at its 170px, menu, icon, Book --
   fits with at least the menu's own gap to spare only from 1111px (measured
   pixel by pixel), so the desktop bar starts at 1120.

   Below it: Book, then the magnifier, then the menu square, on one row, the
   three a --space-3xs apart (two token steps tighter than the row's --space-s:
   one step, --space-2xs, held them only from 381px; this one reaches 375
   phones, from 373px). Narrower than that, Book keeps
   its row and the two squares share the next. */
@media (max-width: 1119px) {
  .site-search { display: none; }
  .site-search__open { display: inline-flex; align-items: center; justify-content: center; width: var(--target-min); height: var(--target-min); padding: 0; }   /* the glyph is centred, not padded: the menu square's fluid padding shrank it to 12px at 1119 */
  .site-search__open svg { width: 1.5rem; height: 1.5rem; flex: none; }   /* the 24px glyph, as the menu square's bars are 24px wide */
  .site-header__bar { column-gap: var(--space-3xs); }
  .nav-toggle { order: 4; }   /* Book, then the magnifier, then the menu square */
  .site-nav { order: 5; }
  /* A closed menu is hidden from the keyboard and screen readers too, not
     only collapsed to no height; visibility waits for the close animation. */
  .site-nav__list { visibility: hidden; transition: visibility 0s .25s; }
  .nav-toggle[aria-expanded="true"] ~ .site-nav .site-nav__list { visibility: visible; transition: none; }
  /* Focus on the two squares: the forest, not the global orange, which
     measures under 3:1 on the sand bar and on the orange squares. */
  .nav-toggle:focus-visible,
  .site-search__open:focus-visible { outline-offset: 1px; }   /* 3px reach: no further than the gap to the next control */
}
@media (max-width: 372px) {
  .site-header__bar::before { content: ""; order: 3; flex-basis: 100%; }   /* a line break before the squares */
  /* The empty line adds one row gap; the squares take it back. */
  .site-search__open, .nav-toggle { margin-block-start: calc(-1 * var(--space-s)); }
}

/* 1025-1119 now has the tablet header in flow above the hero, so the About
   hero's copy starts 134px higher in its band than it did under the floating
   desktop bar, and its desktop-width lead ran into the forest clover. It keeps
   the tablet width there, as at 1024. */
@media (min-width: 1025px) and (max-width: 1119px) {
  .about-hero__lead { max-width: min(100%, 35em); }
}

/* Long links and words wrap inside page copy rather than running off a
   phone screen (the privacy policy's email address ran 6px past 320). */
main :is(p, li, td, dd, address) { overflow-wrap: break-word; }
main :is(p, li, td, dd, address) a { overflow-wrap: anywhere; }