/*
 * 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));

    /* --- Measure ------------------------------------------------------- */
    --measure: 65ch;        /* body copy */
    --measure-tight: 45ch;  /* card and caption copy */

    /* =====================================================================
     * COLOUR
     *
     * Three anchors drive the whole palette. Change them to match the
     * practice; everything else follows. See refs/design/DESIGN.md.
     *
     * That is the default path, and most sites never go past it. Underneath,
     * the palette is layered so a site can take more control WITHOUT hand-
     * writing hex values, which is what a migrated site needs:
     *
     *   1. Anchors        the three below. Tune these first.
     *   2. Per-role       --chroma-secondary, --l-tertiary and friends. A
     *                     brand's second colour is a designer's pick, not a
     *                     rotation of the first, so each role carries its own
     *                     hue, chroma and lightness, defaulting to the anchors.
     *   3. Neutrals       --hue-neutral, --chroma-ink, --chroma-ground. Greys
     *                     are their own decision -- see the block below.
     *   4. Polarity       --scheme. One number flips light/dark.
     *
     * Derive WITHIN a role, declare ACROSS roles. This is the same split
     * Bootstrap 5.3 makes (mix() generates each scale; the base of each theme
     * colour is declared) and the opposite of deriving everything from one
     * hue, which cannot express a real brand pair.
     *
     *   --palette-hue         the practice's brand hue, 0-360.
     *                         Roughly: 25 terracotta · 60 ochre · 145 green
     *                         · 195 teal · 240 blue · 275 violet · 340 rose
     *   --palette-chroma      how saturated the brand reads. OKLCH chroma is
     *                         NOT 0-1 — it runs about 0-0.37 in sRGB, and
     *                         above ~0.15 a surface colour starts to shout.
     *                         0.04 muted · 0.09 confident · 0.14 vivid
     *   --palette-secondary-shift
     *                         degrees from the primary to the secondary.
     *                         150-180 gives a complement; 30-60 an analogous
     *                         neighbour that reads calmer.
     * ===================================================================== */
    /* Template defaults. THIS SITE'S palette dials (and live's measured
     * values they reproduce) are set once, in the site layer's palette block
     * at the top of the ANNIE LIM section below, which overrides these. */
    --palette-hue: 195;
    --palette-chroma: 0.09;
    --palette-secondary-shift: 150;

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

    /* Secondary and tertiary each carry their OWN chroma and lightness, not
     * the primary's. They default to it, so a site built from this template
     * still tunes with the three numbers above and renders identically.
     *
     * The override exists because a brand's second colour is often a designer's
     * choice rather than a systematic partner: on a migrated site the secondary
     * was measured at 3.6x the primary's chroma and 0.26 lighter in OKLCH
     * (deep forest green against warm terracotta). One shared chroma and one
     * shared lightness cannot express that pair, and forcing it produced a
     * washed-out grey-green beside a dusty mauve.
     *
     * This is the same concession the feedback colours below already make --
     * each of those carries its own chroma because "yellows need more to read
     * as yellow, reds less before they turn fluorescent". Brand colours want
     * the same latitude. */
    --chroma-secondary: var(--palette-chroma);
    --l-secondary: var(--l-solid);

    /* Tertiary: a third brand colour, typically doing button/CTA work, that is
     * neither a tint of the primary nor semantic. Practices routinely have one
     * ("Button Brown", "Morning Orange"). Defaults to an analogous neighbour of
     * the primary so it is harmless when unused. */
    --palette-tertiary-shift: 30;
    --hue-tertiary: calc(var(--palette-hue) + var(--palette-tertiary-shift));
    --chroma-tertiary: var(--palette-chroma);
    --l-tertiary: var(--l-solid);

    /* --- Neutrals: their own hue, not the brand's ---------------------
     *
     * --hue-neutral defaults to the brand hue, so a site that sets nothing
     * keeps the "greys feel of a piece with the accent" behaviour. But it is
     * a SEPARATE dial, because tying greys to the brand hue is not what any
     * mature system does and not what real practices choose:
     *
     *   - Tailwind ships five grey families (slate/gray/zinc/neutral/stone)
     *     precisely so the temperature of the greys is a decision.
     *   - Bootstrap keeps $gray independent of $theme-colors.
     *   - daisyUI declares base-100/200/300 per theme.
     *
     * And measured on our own migrated sites: both chose warm grounds at hue
     * 80-94 despite green brands at 145 and 166 -- roughly 80 degrees off the
     * brand. A green practice does not want green text, and at the default
     * hue 195 the old derivation gave --ink-strong an R-to-B spread of 17,
     * i.e. a visibly blue-black rather than a black.
     *
     * Set --hue-neutral to taste: the brand hue for a tinted-grey scheme, a
     * warm 70-90 for a settled off-black, or leave chroma at 0 for a true
     * neutral. --chroma-ink and --chroma-ground are separate because ink
     * carries tint better than a large ground does -- the same chroma that
     * reads as "warm grey" in a heading reads as "the wrong white" across a
     * full-bleed background. */
    /* +80 deg off the brand, which is what the previous code already did for
     * --ink-strong alone, and what both migrated practices independently
     * chose for their grounds (warm 80-94 against green brands at 145/166).
     * It defaults to the brand hue so that adding this dial changes nothing on
     * an existing site; the interesting values are elsewhere:
     *
     *   var(--palette-hue)              greys tinted toward the brand (default)
     *   calc(var(--palette-hue) + 80)   the offset real practices tend to pick
     *   70-90                           a warm, settled off-black
     *   with --chroma-ink: 0            a true neutral, no hue at all
     */
    /* Template defaults; this site sets its neutral dials in the site layer. */
    --hue-neutral: var(--palette-hue);
    --chroma-ink: 0.012;    /* text. 0 = true grey; 0.03 = clearly tinted */
    --chroma-ground: calc(0.004 + 0.008 * (1 - var(--scheme)));  /* page background */
    --chroma-surface: calc(0.000 + 0.014 * (1 - var(--scheme))); /* raised surfaces */
    --chroma-border: calc(0.008 + 0.007 * (1 - var(--scheme)));  /* rules and outlines */
    /* Grounds carry MORE tint when dark and less when light: 0.014 across a
     * near-black reads as a warm dark, the same 0.014 across a near-white
     * reads as a colour cast. The old code expressed this by declaring the
     * light and dark neutrals separately; here it rides on --scheme. */

    /* Feedback hues are FIXED and do not follow the brand. A danger colour
     * that rotates with the practice's hue stops reading as danger — the
     * entire value of a semantic colour is that it means the same thing on
     * every site. Only the brand colours above derive from --palette-hue. */
    --hue-success: 145;
    --hue-warning: 75;
    --hue-danger: 27;
    --hue-info: 240;

    /* Lightness ramp. Dark mode overrides these below rather than declaring a
     * second palette — in OKLCH, dark mode is largely an inversion of these
     * four numbers. */
    --l-solid: 0.55;   /* solid fills: buttons, badges */
    --l-hover: 0.48;   /* one step darker for hover */
    --l-light: 0.66;   /* one step lighter: gradient partner for --primary */
    --l-muted: 0.92;   /* a touch stronger than pale, for wash gradients */
    --l-pale: 0.96;    /* tinted backgrounds */
    --l-on-solid: 0.99;/* text on a solid fill */

    /* --- Polarity -----------------------------------------------------
     *
     * --scheme is the one number that says which way round the site runs:
     * 1 = dark ink on a light ground (the norm), 0 = light ink on a dark
     * ground. Every neutral below is written as "light value, plus the
     * distance to its dark counterpart, times (1 - scheme)", so flipping the
     * one number inverts the whole set consistently.
     *
     * This is why the dark-mode block further down only sets --scheme and the
     * three brand-lightness values, instead of re-declaring eight neutrals
     * with a second set of hand-picked literals. Two hand-maintained sets
     * drift: the old block never declared --ink-strong at all, so headings
     * stayed at lightness 0.18 -- dark text on a dark ground.
     *
     * A site that should ALWAYS render dark sets --scheme: 0 here and deletes
     * the media query. A site that should never flip deletes the query alone. */
    --scheme: 1;

    /* Neutral lightness, light-mode value first, dark-mode value second.
     * Edit these to shift contrast; they are dials, not literals buried in
     * the colour definitions. */
    --l-ink-strong: calc(0.18 + 0.79 * (1 - var(--scheme)));
    --l-ink:        calc(0.25 + 0.70 * (1 - var(--scheme)));
    --l-ink-mid:    calc(0.45 + 0.35 * (1 - var(--scheme)));
    --l-ink-soft:   calc(0.54 + 0.12 * (1 - var(--scheme)));
    --l-bg:         calc(0.99 - 0.81 * (1 - var(--scheme)));
    --l-surface:    calc(1.00 - 0.78 * (1 - var(--scheme)));
    --l-border:     calc(0.90 - 0.58 * (1 - var(--scheme)));
    --l-border-strong: calc(0.82 - 0.40 * (1 - var(--scheme)));

    /* Brand */
    --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));
    /* Chroma falls as lightness rises — a pale tint at full chroma reads
     * muddy rather than tinted. */
    --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, same shape as the two above. */
    --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);

    /* Aliases for the older names in DESIGN.md, so existing markup and any
     * site copied from an earlier template keep working. */
    --accent: var(--primary);
    --accent-dark: var(--primary-hover);
    --accent-pale: var(--primary-pale);

    /* Feedback. Chroma is per-hue: yellows need more to read as yellow, reds
     * less before they turn fluorescent. */
    --success: oklch(calc(var(--l-solid) - 0.03) 0.13 var(--hue-success));
    --success-pale: oklch(var(--l-pale) 0.03 var(--hue-success));
    --warning: oklch(0.75 0.14 var(--hue-warning));
    --warning-pale: oklch(var(--l-pale) 0.04 var(--hue-warning));
    --danger: oklch(var(--l-solid) 0.17 var(--hue-danger));
    --danger-pale: oklch(var(--l-pale) 0.03 var(--hue-danger));
    --info: oklch(var(--l-solid) 0.11 var(--hue-info));
    --info-pale: oklch(var(--l-pale) 0.03 var(--hue-info));

    /* Neutrals. DESIGN.md asked in prose for "a teal practice and a navy
     * practice want different --ink warmth"; --hue-neutral is that, made a
     * dial instead of a fixed derivation from the brand.
     *
     * Hue and chroma come from the --hue-neutral / --chroma-*
     * dials above, lightness from the --l-* dials, so all three are tunable
     * without editing any of these lines. Ink chroma tapers as text gets
     * lighter, and grounds use the lower --chroma-ground throughout. */
    --ink-strong: oklch(var(--l-ink-strong) calc(var(--chroma-ink) * 2.5) calc(var(--hue-neutral) + 80));  /* headings, dark surfaces */
    --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-neutral));
    --surface: oklch(var(--l-surface) var(--chroma-surface) 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));

    /* Paired foreground for each ground, the way daisyUI's -content and
     * Bootstrap's -emphasis work. Use --on-bg rather than reaching for --ink
     * directly when the ground itself might be flipped. */
    --on-bg: var(--ink);
    --on-surface: var(--ink);

    /* --- Grid ---------------------------------------------------------- */
    /* Deliberately minimal: the container and gutter are fluid, placement is
     * left to each layout. Use .u-container and .u-grid below. */
    --grid-max-width: 77.5rem;
    --grid-gutter: var(--space-s-l);
    --grid-columns: 12;

    /* --- Radius -------------------------------------------------------- */
    /* Named by intent rather than by number, so a change of scale does not
     * mean auditing every --radius-3 in the stylesheet. */
    --radius-xs: 0.25rem;   /* tags, inline chips */
    --radius-s: 0.5rem;     /* buttons, inputs */
    --radius-m: 0.75rem;    /* cards */
    --radius-l: 1.25rem;    /* panels, modals, hero media */
    --radius-round: 50%;    /* avatars */
    --radius-pill: 999px;   /* pills, badges */

    /* --- Border widths ------------------------------------------------- */
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 4px;    /* accent rules, active states */

    /* --- Shadows ------------------------------------------------------- */
    /* Two knobs drive every shadow. --shadow-color takes the brand hue so a
     * raised card reads as part of this practice rather than as generic grey;
     * --shadow-strength is what dark mode adjusts, because a shadow on a dark
     * background needs MORE opacity to be seen, not less. */
    --shadow-color: var(--hue-primary, 220) 20% 15%;
    --shadow-strength: 1%;

    --shadow-s:
        0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
    --shadow-m:
        0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
        0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
    --shadow-l:
        0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
        0 6px 12px -3px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
        0 15px 30px -6px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));

    --shadow-inner-s: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
    --shadow-inner-m: inset 0 2px 6px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));

    /* --- Layers -------------------------------------------------------- */
    /* Six values, so z-index is never invented at the call site. */
    --layer-behind: -1;    /* decorative washes sitting behind content */
    --layer-base: 1;
    --layer-raised: 2;      /* hover cards, sticky rows */
    --layer-nav: 3;         /* sticky header */
    --layer-overlay: 4;     /* dropdowns, popovers */
    --layer-modal: 5;       /* dialogs and their backdrop */
    --layer-top: 2147483647;/* skip links, live-region alerts */

    /* --- Motion -------------------------------------------------------- */
    --duration-fast: 120ms;   /* hover, focus */
    --duration-base: 220ms;   /* most transitions */
    --duration-slow: 400ms;   /* entrances */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --reveal-distance: 1.5rem;

    /* Typefaces. Set these per site; everything else references them. */
    --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: var(--font-body);   /* override for a display face */
}

/*
 * Dark mode. In OKLCH this is mostly an inversion of the lightness ramp
 * rather than a second palette — the hues and chroma above are unchanged.
 *
 * Two things are not simple inversions and are set explicitly:
 *   - the accent gets LIGHTER (0.68, not 0.55), because a mid-lightness
 *     accent loses contrast against a dark background;
 *   - --shadow-strength rises, because a shadow on a dark surface needs more
 *     opacity to be visible at all.
 *
 * Delete this block for a site that should only ever render light.
 */
/* Dark-mode block REMOVED (2026-09-28). This site renders light only: its
 * bands, cards and grounds are fixed brand colours, and the template's flip
 * of --scheme turned every --ink-* token near-white on a cream ground when a
 * visitor's device was in dark mode (the legal pages became unreadable for
 * the owner). The template comment above says a site that should never flip
 * deletes the query alone; that is what happened here. `:root { color-scheme:
 * light }` further down keeps form controls and scrollbars light too. */

/* ═══════════════════════════════════════════════════════════════════════
 * RESET
 *
 * Josh Comeau's Custom CSS Reset (joshwcomeau.com/css/custom-css-reset/),
 * lightly adapted. Normalises browser defaults so the base layer below is
 * building on the same ground in every browser. Leave this alone; make
 * design decisions in the base layer and the tokens above it.
 * ═══════════════════════════════════════════════════════════════════════ */

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

/* Skip link. craft.md requires one as the first element in <body>; without a
 * rule here it renders as a visible link above the header on every site. It is
 * off-screen until focused, then a real control with a visible focus ring. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--layer-top, 2147483647);
    padding: var(--space-xs) var(--space-s);
    background: var(--accent);
    color: var(--on-primary);
    text-decoration: none;
    border-radius: 0 0 0.25rem 0;
}
.skip-link:focus, .skip-link:focus-visible {
    left: 0;   /* the ring is the global one, in Form controls & focus */
}

* { margin: 0; }

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

body {
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* Media is block-level and never overflows its container. */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

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

/* Long words and URLs wrap instead of forcing a horizontal scrollbar. */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* A new stacking context on the root, so app-level layers cannot escape. */
#root, #__next { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ELEMENT BASE LAYER
 *
 * Bare elements are styled here so a page is correct with no classes at
 * all. Without this, an unclassed <h2> falls back to the browser default
 * and whoever writes the page patches it with an inline style — which is
 * how a site ends up with a different heading treatment per page.
 *
 * Every heading has a matching .h1-.h6 class. Use the ELEMENT for document
 * structure (SEO, screen readers, outline) and the CLASS for appearance,
 * so an <h1> can look like an eyebrow without lying about the hierarchy:
 *
 *     <h1 class="h4">Still the page's real heading, just smaller</h1>
 *
 * Sites override these; they are a floor, not a straitjacket.
 * ═══════════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-400);
    line-height: var(--leading-l);
    color: var(--ink);
    background: var(--bg);
}

/* Headings ─────────────────────────────────────────────────────────────
 * Margins are top-heavy on purpose: a heading belongs to what follows it,
 * so the space above is larger than the space below. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: var(--space-l) 0 var(--space-s);
    font-family: var(--font-heading);
    font-weight: var(--weight-700);
    line-height: var(--leading-s);
    letter-spacing: var(--tracking-xs);
    color: var(--ink-strong);
    text-wrap: balance;
}

:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) + * {
    margin-top: 0;
}

/* A heading opening its container needs no space above it. */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child {
    margin-top: 0;
}

h1, .h1 { font-size: var(--step-5); }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-3); }
h4, .h4 { font-size: var(--step-2); }
h5, .h5 { font-size: var(--step-1); line-height: var(--leading-m); }
h6, .h6 {
    font-size: var(--step-0);
    line-height: var(--leading-m);
    letter-spacing: var(--tracking-m);
    text-transform: uppercase;
}

/* A highlighted phrase inside a heading. One mechanism, not three. */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) em {
    font-style: italic;
    color: var(--primary);
}

/* Text ─────────────────────────────────────────────────────────────── */
p, ul, ol, dl, blockquote, figure, table, pre {
    margin: 0 0 var(--space-m);
}

/*
 * Line length is a container's job, not every paragraph's — capping each <p>
 * leaves text hugging the left of any column already sized for reading.
 * Use .measure (or set a width on the container) where prose needs it.
 */
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* Opening paragraph: larger and looser than body copy. */
.lede {
    font-size: var(--step-1);
    line-height: var(--leading-m);
    color: var(--ink-mid);
}

/* Small label above a heading. */
.eyebrow {
    display: block;
    margin-bottom: var(--space-2xs);
    font-size: var(--step--1);
    font-weight: var(--weight-600);
    letter-spacing: var(--tracking-l);
    text-transform: uppercase;
    color: var(--primary);
}

small, .text-small { font-size: var(--step--1); }

strong, b { font-weight: var(--weight-700); }

a {
    color: var(--primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--primary-hover); }

ul, ol { padding-left: var(--space-m); }

/*
 * List spacing applies to PROSE lists only. Navigation, button groups and
 * card grids are lists too, and flow margins on those knock flex/grid items
 * out of alignment (the site header) or balloon the spacing (the footer).
 *
 * Presence of a class is not the test — a footer nav is a nav whether or not
 * anyone put a class on it — so navigation context opts out explicitly.
 */
:where(ul, ol) > li { margin-bottom: var(--space-2xs); }
:where(ul, ol) > li:last-child { margin-bottom: 0; }

nav ul, nav ol,
header ul, header ol,
footer ul, footer ol,
menu {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

nav li, header li, footer li, menu li {
    margin-bottom: 0;
}

/* A list explicitly used for layout carries no bullets, indent or margin. */
:where(ul, ol)[class] {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

:where(ul, ol)[class] > li { margin-bottom: 0; }

blockquote {
    padding-left: var(--space-m);
    border-left: var(--border-thick) solid var(--primary-pale);
    color: var(--ink-mid);
    font-style: italic;
}

hr {
    height: 0;
    margin: var(--space-l) 0;
    border: 0;
    border-top: var(--border-thin) solid var(--border);
}

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

/* Media ────────────────────────────────────────────────────────────────
 * Images carry NO radius and NO background plate by default.
 *
 * They used to. `img { border-radius: var(--radius-m); background: var(--surface) }`
 * was added to fix one square photo on Wellbrook, and it cost far more than it
 * saved: every migration since has had to undo it, because a faithful clone of a
 * customer's live site decides its own corners, and the background plate fills
 * the transparent areas of every PNG and SVG — a logo on a dark footer renders
 * as a solid block. Ten of the thirteen sites on this box carried an override
 * for it before it was removed.
 *
 * A radius is a design decision belonging to the site's own stylesheet, next to
 * the cards it should match. Use .is-rounded (below) or a site-layer rule; do
 * not put it back here. */
img, picture, video, canvas, svg {
    height: auto;
}

/* Opt in where a photo should match the radius of the cards around it. */
img.is-rounded, .is-rounded img { border-radius: var(--radius-m); }

figure { margin-inline: 0; }

figcaption {
    margin-top: var(--space-2xs);
    font-size: var(--step--1);
    color: var(--ink-soft);
}

/* Tables ───────────────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th, td {
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: var(--border-thin) solid var(--border);
    vertical-align: top;
}

th {
    font-weight: var(--weight-600);
    color: var(--ink-strong);
}

tbody tr:last-child :where(th, td) { border-bottom: 0; }

/* Forms ────────────────────────────────────────────────────────────── */
/* ═══ 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) ═════════════════════════ */

/*
 * A bare <button> is usually a UI affordance — a menu toggle, a dropdown
 * trigger — not a visual button, so it gets a reset rather than a look.
 * Add .btn when you want one that looks like a button.
 */
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* Buttons ──────────────────────────────────────────────────────────────
 * .btn is opt-in — put it on a <button> or an <a> that should look like a
 * button. Variants change colour, sizes change scale. A bare <button> is
 * reset above, not styled, because most of them are menu and dropdown
 * triggers rather than visual buttons. */
.btn,
.mf-search__submit,
.mf-search-overlay__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-s);
    font-family: inherit;
    font-size: var(--step--1);
    font-weight: var(--weight-600);
    line-height: var(--leading-s);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    min-block-size: var(--target-min);   /* 44px tap target, every size and variant */
    cursor: pointer;
    border: var(--border-thin) solid transparent;
    border-radius: var(--control-radius);   /* shared with every field; set --control-radius, not this */
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.btn--primary {
    background: var(--primary);
    color: var(--on-primary);
}
.btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }

.btn--secondary {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}
.btn--secondary:hover { background: var(--primary-pale); color: var(--primary-hover); }

.btn--ghost {
    background: transparent;
    color: var(--ink-mid);
}
.btn--ghost:hover { background: var(--primary-pale); color: var(--primary); }

.btn--sm { padding: var(--space-3xs) var(--space-xs); font-size: var(--step--2); }
.btn--lg { padding: var(--space-xs) var(--space-m); font-size: var(--step-0); }

/*
 * ON A DARK GROUND
 *
 * Variants above assume a light background. On a dark or brand-coloured
 * section they invert: the solid button goes white, the outline picks up a
 * translucent white edge. Put .on-dark on the button or any ancestor.
 */
.on-dark .btn--primary,
.btn--primary.on-dark {
    background: var(--surface);
    color: var(--primary);
}

.on-dark .btn--primary:hover,
.btn--primary.on-dark:hover {
    background: var(--surface);
    color: var(--primary-hover);
}

.on-dark .btn--secondary,
.btn--secondary.on-dark {
    color: var(--on-primary);
    border-color: color-mix(in oklab, var(--on-primary) 40%, transparent);
}

.on-dark .btn--secondary:hover,
.btn--secondary.on-dark:hover {
    background: color-mix(in oklab, var(--on-primary) 12%, transparent);
    color: var(--on-primary);
}

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Media frames ────────────────────────────────────────────────────────
 * A frame for an embed — map, video or photo — so the child fills a box of
 * known proportion instead of the element's natural size.
 *
 * The ratio, radius and any framing are DEFAULTS. Change them in this file
 * to suit the design; they are here so a frame is never unstyled, not to
 * fix how it should look. */
.media-frame {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: var(--surface);
}

.media-frame > :where(iframe, img, video) {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

.media-frame--square { aspect-ratio: 1; }
.media-frame--wide { aspect-ratio: 16 / 9; }

/* Cards ────────────────────────────────────────────────────────────────
 * Deliberately minimal — a surface with a radius. Sites compose their own
 * card variants on top; modelling every one here would be guesswork. */
.card {
    padding: var(--space-m);
    background: var(--surface);
    border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-m);
}

/* Utility ──────────────────────────────────────────────────────────── */
.visually-hidden, .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Grid utilities. .u-container centres and pads; .u-grid lays out. Placement
 * within the grid is each layout's business — see refs/design/layouts.md.
 */
.u-container {
    max-width: var(--grid-max-width);
    margin-inline: auto;
    padding-inline: var(--grid-gutter);
}

.u-grid {
    display: grid;
    gap: var(--grid-gutter);
}

/*
 * Section rhythm. EVERY band on a page should be a .section — this is what
 * gives a page its vertical breathing room, and it is the single most
 * repeated review comment when it is missed ("this section is lacking top
 * and bottom padding", raised three separate times on one site).
 *
 * It is a class rather than a bare `section` selector because bands are not
 * always <section> elements, and because a band that deliberately runs flush
 * to its neighbour needs to say so out loud via --flush.
 *
 * Do not hand-roll the padding. --space-l-2xl is the site-wide "40px phone /
 * 80px desktop" step, already a clamp; a bespoke value breaks the rhythm.
 *
 * Verify with bandpad.mjs, which measures the real rendered ink gap between
 * adjacent bands and fails under 40px.
 */
.section { padding-block: var(--space-l-2xl); }
.section--tight { padding-block: var(--space-l); }
.section--flush { padding-block: 0; }

/* A centred intro (eyebrow + heading + standfirst) above a band's content. */
.section__head {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

/*
 * Scroll entrance.
 *
 * Native scroll-driven animation — no library, no IntersectionObserver, no
 * JS. Add .reveal for a plain fade, or one of the directional modifiers.
 *
 * WHY THE WHOLE BLOCK IS INSIDE prefers-reduced-motion: a reveal implemented
 * as `opacity: 0` plus an animation leaves reduced-motion users staring at
 * invisible content when the animation never runs. Scoping the rule means
 * they simply get the content, with no trap to fall into.
 *
 * Safari and Firefox do not support animation-timeline yet, so content there
 * is simply visible. That is the correct failure for a practice site: no
 * entrance effect is always better than content that never arrives.
 */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    .reveal--up { --reveal-from: translateY(var(--reveal-distance)); }
    .reveal--down { --reveal-from: translateY(calc(var(--reveal-distance) * -1)); }
    .reveal--left { --reveal-from: translateX(var(--reveal-distance)); }
    .reveal--right { --reveal-from: translateX(calc(var(--reveal-distance) * -1)); }
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: var(--reveal-from, none);
    }
}

/*
 * Doctor avatar fallback
 * Shows a gradient + person silhouette when no photo exists.
 * The <img> has onerror="this.style.display='none'" which hides
 * the broken image, revealing this CSS background underneath.
 *
 * Derived from the site's own --accent so a missing photo reads as part of
 * this practice rather than as a stray swatch. Define --accent in :root above.
 */
.doctor-avatar {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0.5rem;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--primary) 85%, black),
        var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
}

.doctor-avatar::after {
    content: "";
    position: absolute;
    width: 40%;
    height: 40%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.doctor-avatar img {
    position: relative;
    z-index: var(--layer-base);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*
 * Mediflare footer logo — dark/light variants.
 * Default: inverted (white text) for dark footers.
 * Add .footer-light to <footer> for light backgrounds.
 */
.mf-logo-light { display: none; }
.mf-logo-dark { display: inline; }
.footer-light .mf-logo-light { display: inline; }
.footer-light .mf-logo-dark { display: none; }

/* Hours: prevent time strings from breaking between number and am/pm */
.hours-table td:last-child,
.footer__hours-row span {
    white-space: nowrap;
}
/* ── 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; }

/* Decorative, aria-hidden in the markup - the <h1> carries the meaning. Sized
 * large but kept at a legible contrast: a very pale numeral fails WCAG even
 * when it is ornamental. */
.notfound__code {
    font-size: var(--step-8);   /* the site's display step, as the hero headline */
    font-weight: var(--weight-700);
    line-height: var(--leading-xs);
    margin: 0 0 var(--space-2xs);
    opacity: 0.55;
}
.notfound h1 { margin-top: 0; }
.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;
    /* The rule is a hairline of the surrounding ink rather than a named border
     * token, so it works whatever the site's palette is. */
    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);
}

/* =========================================================================
 * ANNIE LIM FAMILY PRACTICE — site layer
 *
 * Transcribed from https://www.annielim.com.au (Elementor) at 1440, with a
 * second pass at 1920 to tell a real max-width from viewport-minus-padding.
 *
 * Everything measurable here was measured, not chosen. Where a number is
 * expressed as a token rather than a literal, the token's VALUE reproduces
 * live's measurement at the design width; the CSS that gets there is ours,
 * because transcribing live's fixed px would reproduce its responsive faults
 * as well as its design.
 * ========================================================================= */

:root {
    /* --- Palette: live's colours ON the template's dials -----------------
     * Measured off live. Every value is an exact OKLCH conversion of live's
     * sRGB, verified by painting each role to a canvas:
     *   rust   rgb(165,67,31)   oklch(0.5093 0.1385 39.35)   --primary    accent, CTA, display lines
     *   maroon rgb(72,18,14)    oklch(0.2739 0.0831 28.06)   --secondary  headings, eyebrows, utility bar
     *   dark   rgb(33,9,7)      oklch(0.1797 0.0422 27.55)   --tertiary   deep bands, scrims, band copy
     *   cream  rgb(248,243,230) oklch(0.9645 0.0180 89.36)   --bg         page ground; reversed type
     *   ink    rgb(51,51,51)    oklch(0.3211 0 -)            --ink        body copy (measured chroma 0)
     *   white  rgb(255,255,255)                              --surface, --on-primary/secondary/tertiary
     * Every pair in use passes WCAG AA on its own ground (rust on cream 5.54,
     * ink on cream 11.40, white on rust 6.14), so none is adjusted. Because the
     * brand colours ARE the roles, the template's own components (focus rings,
     * links, the skip link, .btn--*) paint in this practice's colours. */
    --palette-hue: 39.35;
    --palette-chroma: 0.1385;
    --l-primary: 0.5093;
    --palette-secondary-shift: -11.29;    /* 28.06 */
    --chroma-secondary: 0.0831;
    --l-secondary: 0.2739;
    --palette-tertiary-shift: -11.8;      /* 27.55 */
    --chroma-tertiary: 0.0422;
    --l-tertiary: 0.1797;
    /* Neutrals: grounds are a warm cream at hue 89.36; ink is a true neutral. */
    --hue-neutral: 89.36;
    --chroma-ground: 0.018;
    --l-bg: 0.9645;
    --chroma-ink: 0;
    --l-ink: 0.3211;
    --l-on-solid: 1;                      /* live's text on fills is #fff */

    /* Colours no role can derive, named once here so no rule writes one inline. */
    --grey-ground: oklch(0.9702 0 0);      /* rgb(245,245,245) alt bands: a true grey, off the cream family */
    /* The staff list's rules: a light grey at 60%. Not recorded as a live
     * measurement anywhere in this build, so kept at the value it had. */
    --staff-rule: oklch(0.8822 0 0);       /* rgb(216,216,216) */

    /* Live's gradient strip, measured stop for stop: maroon to rust. */
    --brand-gradient: linear-gradient(232deg, var(--secondary) 0%, var(--primary) 100%);

    /* Weight: live sets its body copy, ledes and several labels at Raleway 500,
     * measured on every page -- a fourth weight with a measured reason. */
    --weight-500: 500;

    /* --- The eight knobs: the whole type and space scale ----------------
     * Every --step-* and --space-* comes from these (template scale block,
     * _template 14c51d0, verbatim at the top of this file). Never redeclare a
     * step here: retune the knobs.
     *
     * Live sets a FLUID ROOT, calc(0.74981rem + 0.31266vw) (13px at 320, 16.5
     * at 1440, 18 at 1920), and states every size as a rem multiple of it:
     * 0.75 / 0.875 / 1 / 1.1 / 1.25 / 1.5 rem for text, 2 / 2.5 rem for the
     * legal headings, 3 / 3.5 rem for the display lines. The root here stays
     * 100% and the steps carry the fluidity; both would scale twice.
     *
     * Body: 16px on a phone (the readability floor, 2026-09-21: live puts body
     * copy at 13.2px there) to live's 16.50 at 1440. Above 1440 the scale
     * holds, where live keeps growing to 18px at 1920.
     *
     * Ratio: fitted to live's ramp at 1440 so every live size keeps its own
     * step (no two collapse onto one) with steps capped at --step-8:
     *   px at 1440 (390)         live      ours
     *   step--1 labels           14.44     14.22 (14.04)
     *   step-0  body             16.50     16.50 (16.00)
     *   step-1  ledes            18.15     19.14 (18.24)
     *   step-2  eyebrows         20.63     22.20 (20.79)
     *   step-3  card titles      24.75     25.75 (23.70)
     *   step-5  legal h3         33.00     34.66 (30.81)
     *   step-6  legal h2         41.25     40.21 (35.12)
     *   step-7  display--sm      49.50     46.63 (40.04)  live 39.65 at 390
     *   step-8  display          57.75     54.09 (45.64)  live 46.26 at 390
     * 1.14 at the phone end lands the display lines on live's own phone sizes
     * (live's display line is not floored). */
    --u-min-vw: 390;
    --u-max-vw: 1440;
    --u-min-font: 16;
    --u-max-font: 16.5;
    --u-min-ratio: 1.14;
    --u-max-ratio: 1.16;
    /* Space: live's desktop rhythm is 10/15/20/30/40/60/80/120px, exactly the
     * template ladder on a 20px unit (2xs 10, xs 15, s 20, m 30, l 40, xl 60,
     * 2xl 80, 3xl 120). Live does not scale it; ours does, by the template's
     * 1 : 1.25, so a phone is 20% tighter (s 16, m 24, l 32, xl 48). */
    --u-space-min: 1;
    --u-space-max: 1.25;

    /* --- Structure ------------------------------------------------------
     * The container is a REAL cap: measured 1290px inner at both 1440 and
     * 1920, so it holds rather than growing. The utility bar and the CTA card
     * cap at 1140. */
    /* OWNER REQUEST 2026-09-21: content width is 1350px, a deliberate departure
     * from live's measured 1290. The narrow shell scales with it (1140 * 1350 /
     * 1290). Every grid is fr-based and every collage is capped at its own
     * measured px size, so nothing else needed to move. */
    --shell: 84.375rem;        /* 1350px (live: 1290) */
    --shell-narrow: 75rem;     /* 1200px (live: 1140) */

    /* Live pads its bands 120px top and bottom at 1440 and does not scale
     * that with the viewport in any simple way; measured 120 at 1440 and 120
     * at 1920. The template pair runs 64 / 98 / 120 at 390 / 1024 / 1440, so a
     * phone gets 64px instead of 120px of empty cream. */
    --space-band: var(--space-2xl-3xl);

    /* Card radii, measured: 10px on hero photos and small cards, 20px on the
     * service tiles and panels. */
    --radius-card: 0.625rem;   /* 10px */
    --radius-panel: 1.25rem;   /* 20px */

    /* The quote card rides UP over the About photo above it: live's 130px at
     * 1440, here 72 / 107 / 130 at 390 / 1024 / 1440. */
    --space-overlap-quote: calc(var(--space-2xl-3xl) + var(--space-2xs));

    /* Live pads the About band's inner container 150px rather than the 120px it
     * uses elsewhere: 80 / 122 / 150 at 390 / 1024 / 1440. */
    --space-band-about: calc(var(--space-2xl-3xl) + var(--space-s-m));

    /* Two offsets are viewport GEOMETRY, not rhythm, so they stay outside the
     * --space-* family: each tracks the width of a photo that is itself a
     * share of the viewport, which no step can do.
     * The practice band's inset photo rides up over the plate above it. */
    --overlap-practice: clamp(4rem, 20vw, 18.75rem);

    /* The quote card's leftward offset from the About photo (live: 96px). */
    --quote-offset: clamp(0rem, 6.7vw, 6rem);

    /* Live's 45px icon box (service rows, link tiles, stats): a fixed
     * dimension, named once because the stat label is indented by it. */
    --icon-box: 2.8125rem;

    /* Touch targets: 44px, the burger's own size (named 2026-10-05 for the
     * search controls). */
    --target-min: 2.75rem;

    /* Form fields (owner, 2026-10-05): every text control -- contact form,
     * search -- is live's contact field: a 1px rust edge on no fill, the
     * same 10px corner as every button (--control-radius, live's Book
     * button's corner, shared by every button and field), live's 59px
     * height. Focus is ONE 2px rust ring laid over that edge (5.54:1 on the
     * cream). The look is these tokens only; see Form controls. */
    --control-radius: var(--radius-card);
    --field-h: 3.6875rem;               /* live: 59px */
    --field-textarea-h: 8.5rem;         /* live: 136px */
    --field-leading: var(--leading-l);   /* body copy's 1.5, as the fields always had */
    --field-pad-block: var(--space-xs);
    --field-pad-inline: var(--space-s);
    --field-bg: transparent;
    --field-ink: var(--tertiary);
    --field-border: var(--primary);
    --field-border-hover: var(--primary);
    --field-placeholder: color-mix(in oklab, var(--tertiary) 55%, transparent);
    --focus-ring: var(--primary);
}

/* ONE focus ring (owner, 2026-10-06): rust on every light ground (5.54:1 on
 * the cream, 6.14:1 on white). Rust on maroon is only 2.50:1, so the dark
 * grounds -- the utility bar, the legal strip, the contact card, the maroon/
 * dark bands and cards, the scrimmed photo bands and the gradient band --
 * re-set the token to the cream (13.85:1 on maroon). A light card sitting on
 * one of those bands (the CTA card, FAQ items, fact cards, the search panel
 * under the utility bar) takes the rust back. Tokens only; no focus rules. */
.utility, .footer-legal, .footer-main, .contact-card,
.band--dark, .band--photo, .band--gradient, .copy--on-dark,
.svc-card--dark, .svc-card--maroon, .skip-link { --focus-ring: var(--bg); }
.cta__card, .faq-item, .factcard, .site-search__panel { --focus-ring: var(--primary); }
/* The skip link opens at the viewport's top-left corner, where an outset ring
 * is clipped on two sides and lands half on maroon, half on cream: draw it
 * inside the link instead, cream on its rust fill. */
.skip-link:focus-visible { outline-offset: calc(var(--focus-ring-w) * -2); }

/* The site runs light always: live has no dark mode and its cream ground is
 * the brand. Flipping to a dark scheme would invert a palette the practice
 * chose. */
:root { color-scheme: light; }

html { background: var(--bg); }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--step-0);
    /* Live sets its body copy at Raleway 500, not 400 — measured on every inner
     * page. At 400 the face reads thin on the cream ground. */
    font-weight: var(--weight-500);
    line-height: var(--leading-l);
}

/* --- Type roles ---------------------------------------------------------
 * Live pairs Roca (display) with Raleway (body) and uses Manrope for two
 * footer lines only. Roca ships as a single normal-weight TTF and live asks
 * for 700, so the browser synthesises the bold; reproduced by loading the
 * same face and letting it do the same. */
@font-face {
    font-family: 'Roca';
    src: url('/assets/fonts/Roca-Font.ttf') format('truetype');
    font-weight: 400 700;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6, .display, .card-title {
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    color: var(--secondary);
}

/* HEADING LEVEL AND SIZE ARE INDEPENDENT.
 * Live's document outline uses h1/h3/h4/h6 at sizes that do not follow the
 * tag — its band eyebrows are h3 at 20.62px while its display lines are
 * plain divs at 57.75px. The tag carries the outline and accessibility; the
 * class carries the appearance. Do not "fix" one to match the other. */
.display {
    font-size: var(--step-8);
    line-height: var(--leading-xs);
    letter-spacing: var(--tracking-xs);
    color: var(--primary);          /* live: rgb(165,67,31) on the light bands */
}
.display--sm { font-size: var(--step-7); }
/* On the narrowest phones a single long word ("Comprehensive") at --step-8 is
 * wider than the column and scrolls the page sideways (measured 329px in a
 * 284px column at 320). Step down rather than break the word. */
@media (max-width: 22.5rem) {
    .display { font-size: var(--step-7); }
    .display--sm { font-size: var(--step-5); }
}

.eyebrow {
    font-family: 'Raleway', system-ui, sans-serif;
    font-size: var(--step-2);
    font-weight: var(--weight-700);
    color: var(--secondary);        /* live: rgb(72,18,14) on the light bands */
    letter-spacing: var(--tracking-m);
    text-transform: none;   /* live does not uppercase these */
    line-height: var(--leading-s);
}

.card-title {
    font-size: var(--step-3);
    line-height: var(--leading-s);
}

.lede {
    font-size: var(--step-0);
    font-weight: var(--weight-500);
    line-height: var(--leading-l);
    color: var(--ink);
}

/* --- Shell --------------------------------------------------------------
 * .u-container is the template's; the site only narrows it to live's cap. */
/* --shell is live's CONTENT width (1290 measured inside the padding), so the
 * container's gutter has to sit outside it -- max-width alone would leave only
 * 1210 of content and shrink every grid track by 6%. */
.u-container {
    max-width: calc(var(--shell) + var(--grid-gutter) * 2);
}

.band { padding-block: var(--space-band); }
/* Live's second services row runs tight under the first (10px) and closes the
 * pair with the standard 120px below. */
/* The checkerboard is two sections on live, but its four rows sit a constant
 * 30px apart. The first section therefore gives up its bottom padding and the
 * second opens with exactly the grid's own gap — otherwise a full 120px band
 * break lands between rows two and three. */
.services-row-1 { padding-block-end: 0; }
.services-row-2 { padding-block: var(--space-m) var(--space-band); }
.band--cream { background: var(--bg); }
.band--dark  { background: var(--tertiary); color: var(--on-tertiary); }

/* A photographic band. Live applies the photo to the band element and lays a
 * ::before of rgb(33,9,7) at opacity 0.66 over it -- the SAME treatment on
 * every one (bands 3, 5, 8 and 10), so they all read as dark bands with light
 * text. Measured, not chosen. */
.band--photo {
    position: relative;
    isolation: isolate;
    background-size: cover;
    background-position: center;
}
.band--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-behind);
    background: var(--tertiary);
    opacity: 0.66;
}
.band--photo > * { position: relative; z-index: var(--layer-base); }

/* Type on a scrimmed band. Live: eyebrow white, display cream, body white.
 *
 * SCOPED to the band's own copy blocks, NOT to the band as a whole. A light
 * card sitting on a photo band (the closing CTA is a cream panel) keeps its
 * own dark type; an unscoped `.band--photo p { color: white }` painted that
 * card's text white on cream and made it invisible -- a defect the band-height
 * and copy gates both passed. */
.band--photo > .u-container > .about__copy .eyebrow,
.band--photo > .u-container > .practice__copy .eyebrow,
.band--photo > .u-container > .faq__copy .eyebrow,
.about__copy .eyebrow, .practice__copy .eyebrow, .faq__copy .eyebrow { color: var(--on-tertiary); }

.about__copy .display, .practice__copy .display, .faq__copy .display,
.about__copy h2, .practice__copy h3, .faq__copy h2,
.faq__copy .card-title { color: var(--bg); }

.about__copy .lede, .about__copy p,
.practice__copy .lede, .practice__copy p,
.faq__copy .lede, .faq__copy p, .faq__copy .faq__note,
.faq__note, .faq__note p { color: var(--on-tertiary); }

/* The reversed CTA these bands use: cream fill, rust label. */
.btn, .mf-search__submit, .mf-search-overlay__close { padding-block: var(--space-s); }

.btn--reverse {
    background: var(--bg);
    color: var(--primary);
}
/* Live's hover: fill rgb(165,67,31) / #A5431F — which is --primary — white label. */
.btn--reverse:hover { background: var(--primary); color: var(--on-primary); }

/* =========================================================================
 * HEADER
 * ========================================================================= */
.site-header { position: relative; z-index: var(--layer-nav); }

.utility {
    background: var(--secondary);
    color: var(--on-secondary);          /* live: white text, cream icons */
    font-size: var(--step--1);
}
.utility__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-s);
    align-items: center;
    max-width: var(--shell-narrow);
    margin-inline: auto;
    padding-inline: var(--grid-gutter);
}
.utility__item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    justify-content: center;
    margin: 0;
}
.utility__item:first-child { justify-content: flex-start; }
.utility__item:last-child { justify-content: flex-end; }
.utility__item svg { width: 1.125em; height: 1.125em; flex: none; fill: var(--bg); }
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { text-decoration: underline; }

.masthead { background: var(--bg); padding-block: var(--space-xs); }
.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    max-width: calc(var(--shell) + var(--grid-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--grid-gutter);
}
.masthead__logo { flex: none; display: inline-flex; }
.masthead__logo img { width: 151px; height: 100px; object-fit: contain; }

/* Live: logo | nav list centred in the remaining room | CTA. */
.nav { display: flex; align-items: center; gap: var(--space-m); flex: 1; justify-content: flex-end; }
.nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    gap: var(--space-3xs);
}
.nav__list a {
    display: block;
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-0);
    color: var(--primary);           /* live: rgb(165,67,31), not maroon */
    text-decoration: none;
    padding: var(--space-xs) var(--space-xs);   /* live: 13px 15px */
    border-radius: var(--radius-card);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
/* Live's hover and current-page state is a filled maroon pill with white text. */
.nav__list a:hover,
.nav__list a.active { background: var(--secondary); color: var(--on-secondary); }

.nav__burger {
    flex: none;                 /* it was being squeezed to 31px beside the CTA */
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: none;
    border: 0;
    color: var(--secondary);
    cursor: pointer;
}
.nav__burger svg { width: 1.75rem; height: 1.75rem; }

/* The CTA is rust with a 10px radius, measured 201x46 at 1440. The search
 * component's Search and Close buttons wear it too (Close as the reverse,
 * below): they are the site's button, not a copy of it. */
.btn--book,
.mf-search__submit,
.mf-search-overlay__close {
    background: var(--primary);
    color: var(--on-primary);
    border: 0;
    border-radius: var(--control-radius);
    font-family: 'Raleway', system-ui, sans-serif;
    font-weight: var(--weight-700);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-l);
    /* Live's buttons measure 69px tall with 20px of vertical padding; ours were
     * 47px at --space-xs (15px). A step up to --space-s lands on live's box and
     * gives the CTA the presence it has on the source. */
    padding: var(--space-s) var(--space-m);
    text-transform: uppercase;
    white-space: nowrap;
}
.btn--book:hover,
.mf-search__submit:hover { background: var(--secondary); color: var(--on-secondary); }

/* Below the width where the six nav items plus the logo and CTA stop fitting,
 * the list becomes a panel. It collapsed at 64rem until 2026-10-05, but the
 * row did not fit there: "Patient Info" and "Health Info" wrapped onto two
 * lines from 1025 to 1140. Measured with the labels held to one line: the row
 * fits from 1100 with the links a step tighter (see the nav block), so menu,
 * Book Appointment and search all swap at 68.75rem / 68.8125rem. */
@media (max-width: 68.75rem) {
    .nav__burger { display: inline-flex; }
    .nav__list {
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg);
        border-top: var(--border-thin) solid color-mix(in oklab, var(--secondary) 15%, transparent);
        box-shadow: var(--shadow-m);
        padding: var(--space-s);
        display: none;
    }
    .nav__list[data-open] { display: flex; }
    .nav__list a { padding: var(--space-s); }
    .nav__list { margin: 0; gap: var(--space-3xs); }
    .nav { flex: none; }
    .masthead__inner { position: relative; }
}
/* Between the phone stack and desktop, three equal columns are too narrow for
 * "Weekdays: 8:00 am – 5:00 pm" at a readable size and it broke onto two lines
 * (seen at 768). Size each column to its own content instead. */
@media (max-width: 62rem) {
    .utility__inner { grid-template-columns: repeat(3, auto); justify-content: space-between; }
    .utility__item { white-space: nowrap; }
}
/* Stacked, the three rows share one left edge: a single content-sized column,
 * centred in the bar, each row starting with its icon (owner, 2026-10-06). */
@media (max-width: 40rem) {
    .utility__inner { grid-template-columns: max-content; justify-content: center; gap: var(--space-3xs); }
    .utility__item,
    .utility__item:first-child,
    .utility__item:last-child { justify-content: flex-start; }
    /* (The stacked bar's height is trimmed beside the touch-target rules, further
     * down, because those rules would otherwise override it.) */
}

/* Below ~26rem the logo, burger and CTA together need more room than the
 * viewport has (measured 390px of content at a 360px viewport), so the CTA
 * takes its own row rather than shrinking under a 44px tap target. */
@media (max-width: 30rem) {
    .masthead__inner { flex-wrap: wrap; row-gap: var(--space-2xs); }
    .masthead__logo { order: 1; }
    .nav { order: 2; margin-inline-start: auto; }
    .btn--book {
        order: 3;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .nav__list { top: calc(100% + 0.25rem); }
}

/* =========================================================================
 * BAND 0 — HERO
 * Live: 1290 shell split 595 | 595 with a 100px gap, 120/40/80 padding.
 * The left column is a three-photo collage: a 500x550 plate with a 200x270
 * and a 250x160 pulled up over it.
 * ========================================================================= */
/* Live washes a clinic photograph behind the whole hero on a ::before at
 * opacity 0.25 — an element-only background sweep does not see it, which is
 * exactly the pseudo-element case the transcription notes warn about. */
.hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-band) var(--space-2xl);
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-behind);
    background-size: cover;
    background-position: 0% 0%;
}
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: center;
}

.hero__collage { position: relative; max-width: 500px; }
.hero__collage img { border-radius: var(--radius-card); display: block; }

/* Hard offset "frames", measured off live:
 *   plate       rgb(72,18,14)  -25px -25px 0 0    (maroon, up-left)
 *   tall inset  rgb(165,67,31)  20px  20px 0 -5px (rust, down-right)
 *   wide inset  none
 * They are decorative offsets at a fixed size, so px is correct here. */
.hero__plate { box-shadow: -25px -25px 0 0 var(--secondary); }
.hero__inset--tall { box-shadow: 20px 20px 0 -5px var(--primary); }
.hero__plate { width: 100%; aspect-ratio: 500 / 550; object-fit: cover; }

/* The two inset photos ride over the plate. They are in flow with negative
 * margins rather than absolutely positioned, so the column still has a real
 * height and the band below cannot butt into it. */
.hero__inset {
    position: relative;
    z-index: var(--layer-raised);
    display: block;
    object-fit: cover;
}
/* The overlaps are stated as a share of each inset's own height, so the
 * collage keeps its proportions at every width instead of coming apart
 * between two breakpoints. Live at 1440: the tall inset overlaps the plate by
 * 208 of its 270px, the wide one by 122 of its 160px. */
/* Measured on live at 1440, inside a 500-wide plate:
 *   plate        500x550, top 342, bottom 892
 *   tall inset   200x270, top 662  -> overlaps the plate by 230
 *   wide inset   250x160, top 810  -> overlaps the tall inset by 122
 *   column bottom 970, i.e. 628 tall
 * Both overlaps are stated as a share of the plate's own width, so the collage
 * holds its proportions at every viewport rather than coming apart between two
 * breakpoints. 230/500 = 46%; 122/500 = 24.4%. */
.hero__inset--tall {
    width: 40%;
    aspect-ratio: 200 / 270;
    margin-inline-start: auto;
    margin-inline-end: -19%;   /* live: the inset's right edge sits 95px past the 500 plate */
    margin-top: -46%;
}
.hero__inset--wide {
    width: 50%;
    aspect-ratio: 250 / 160;
    margin-inline-start: 39.6%;  /* live: x=273 against a plate starting at 75 */
    margin-top: -24.4%;
}

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); }
.hero__note { font-weight: var(--weight-700); margin: 0; }
.hero__note a { color: var(--primary); }
/* The number in this sentence is the main call action on a phone but was a 24px
 * target. Padding grows the touch area; the equal negative margin hands the
 * space straight back, so not one line of text moves. */
.hero__note a { display: inline-block; padding-block: var(--space-xs); margin-block: calc(var(--space-xs) * -1); }
/* A phone number must never wrap: it is one token to a reader, and half of it
 * on the next line is unreadable and unusable. */
.nowrap, a[href^="tel:"] { white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; padding-top: var(--space-3xs); }

@media (max-width: 62rem) {
    .hero__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .hero__collage { max-width: 32rem; }
    /* The tall inset bleeds 19% past the plate at desktop, which is live's own
     * composition. Once the collage is the full column width that bleed leaves
     * the page instead: measured 47px of sideways scroll at 390. Pull it back
     * inside, and give the shadows room rather than letting them scroll. */
    .hero__inset--tall { margin-inline-end: 0; }
    .hero { overflow-x: clip; }
}

/* =========================================================================
 * BAND 1 — gradient strip. 100px tall, capped at 1140, no content.
 * ========================================================================= */
.strip { background: var(--brand-gradient); height: 6.25rem; }

/* =========================================================================
 * BAND 2 — "What Sets Us Apart": four 300px cards, radius 10, centred icons
 * ========================================================================= */
/* The head is a full-width centred column: its CHILDREN carry the caps, not
 * the head itself. As a shrink-to-fit flex column it collapsed to the lede's
 * 650px and wrapped the display line to three lines instead of live's two. */
.section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* The template caps .section__head at 46rem (736px). Live's heads run the
     * full 1290 shell with only the LEDE held to 650, so the cap has to be
     * lifted here or every band's display line wraps a line early. */
    max-width: none;
    gap: var(--space-m);
    text-align: center;
    padding-bottom: var(--space-xl);
}
.section__head > * { margin-inline: auto; }
/* Live caps only the LEDE at 650px; the display line above it runs wider
 * (881px on the services band), so capping the whole head wrapped it to three
 * lines and added 67px to the band. */
.section__head > * { max-width: 100%; }
/* Live's caps are 650px and 881px at 1440, but live's type keeps growing past
 * 1440 while the caps do not, so at 1920 the services head wrapped to three
 * lines (owner, 2026-09-26). Stated in em of their own type the caps grow with
 * it: identical at 1440 (39.4 x 16.5 = 650; 15.25 x 57.75 = 881), two lines at
 * every width above. */
.section__head .lede { max-width: 39.4em; }
.section__head .display { max-width: 15.25em; }

.pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
}
.pillar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    text-align: center;
    background: var(--bg);
    border: var(--border-medium) solid var(--primary);   /* live: 2px solid rgb(165,67,31) */
    border-radius: var(--radius-card);
    padding: var(--space-xl) var(--space-m);
}
.pillar__icon { width: 4.375rem; height: 4.375rem; color: var(--primary); }
.pillar__icon svg { width: 100%; height: 100%; fill: currentColor; }
.pillar p { margin: 0; }

@media (max-width: 62rem) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .pillars { grid-template-columns: 1fr; } }

/* =========================================================================
 * BAND 3 — About. A photographic wash under the cream ground, copy left,
 * a 516-wide photo right with the quote card riding up over it.
 * ========================================================================= */
/* Live pads this band's inner container 150px rather than the 120px it uses
 * elsewhere, which is why the About band is taller than its neighbours. */
.about { padding-block: 0; }
.about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
    padding-block: var(--space-band-about);
}
.about__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); }
/* The photo sits at the RIGHT of its column, as on live (x=945 in a column
 * ending at 1365), and the column carries the card's 96px offset as its own
 * start padding. The card's negative margin then only pulls it back into that
 * padding — it can never cross into the copy column. Before this, the card's
 * left edge sat 16px over the end of the paragraph at every width from 1280
 * up (owner's screenshot, 2026-09-26). */
.about__media { display: flex; flex-direction: column; align-items: flex-end; padding-inline-start: var(--quote-offset); }
.about__photo {
    width: 100%;
    max-width: 26.25rem;
    aspect-ratio: 420 / 460;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: 20px -20px 0 0 var(--secondary);   /* measured off live */
}

/* The quote card is an in-flow sibling with a negative top margin, per the
 * overlap rule — never absolutely positioned inside the photo. It carries no
 * full-bleed ground of its own, so the photograph it rides into stays visible
 * beside it rather than being painted over. */
.about__quote {
    position: relative;
    z-index: var(--layer-raised);
    margin-top: calc(-1 * var(--space-overlap-quote));
    align-self: flex-start;
    /* Live sets the photo at x=945 and the card at x=849 — the card is inset
     * 96px to the LEFT of the photo's edge, which is what makes it read as
     * riding across the corner rather than sitting under it. */
    margin-inline-start: calc(-1 * var(--quote-offset));
    width: min(19rem, 100%);
    min-height: 11.875rem;      /* 190px, live's card height */
    display: flex;
    align-items: center;        /* centre the quote vertically in the card */
    justify-content: center;
    text-align: center;         /* ...and horizontally */
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-card);
    padding: var(--space-m);
    font-family: 'Roca', Georgia, serif;
    font-size: var(--step-3);
    font-style: italic;
    line-height: var(--leading-s);
    margin-bottom: 0;
}

/* Stacked, the media column keeps its --quote-offset start padding and the
 * photo sits at the start of what is left, so the card's negative offset
 * lands on the container edge instead of past it. Zeroing the padding here
 * (as this rule used to) left the card's -offset with nothing to pull back
 * into: it hung up to 34px off the left of the viewport at 960 and below. */
@media (max-width: 62rem) {
    .about__inner { grid-template-columns: 1fr; }
    .about__media { max-width: 32rem; align-items: flex-start; }
}

/* =========================================================================
 * BAND 4 — Meet The Team. 3-across rows of a 150px round portrait beside
 * a role eyebrow and a name.
 * ========================================================================= */
/* The team is a centred flex wrap rather than a grid, so a final short row
 * centres itself instead of hugging the left. Live leaves its last two people
 * at x=75/522 in a 3-column grid; the owner asked for them centred, so this is
 * a deliberate improvement on live rather than a fidelity fix. The basis
 * reproduces the grid's own track width, so full rows are identical to before. */
.team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Live: rows 200px apart on a 150px portrait (a 50px row gap) and a
     * 50px column gap inside the 1290 shell. */
    gap: var(--space-xl) var(--space-xl);
}
.team > .person {
    /* One third of the shell, less its share of the two column gaps -- the same
     * width the 3-track grid produced (390px at 1440). */
    flex: 0 1 calc((100% - var(--space-xl) * 2) / 3);
}

/* A final short row sits TOGETHER in the middle rather than each person being
 * centred within a third of the row. flex-basis:auto alone was not enough --
 * the row still distributed the free space between the two, landing them over
 * 1000px apart and reading as a broken grid. (The real culprit was a
 * margin-inline:auto on .person, which absorbs free space BEFORE
 * justify-content can pack anything; it is gone.)
 *
 * Scoped to the width where the row is genuinely three across: at the 2-up and
 * 1-up breakpoints a 3-column basis sized the orphans wrongly (282 against 451
 * at 1024, and two 85px items at 390).
 *
 * :nth-child(3n+1):nth-last-child(2) is "starts a row AND is 2nd from the end",
 * i.e. the first of a two-person final row (11 people, 3 per row). */
@media (min-width: 68.0625rem) {
    .team > .person:nth-child(3n + 1):nth-last-child(2),
    .team > .person:nth-child(3n + 1):nth-last-child(2) ~ .person,
    .team > .person:nth-child(3n + 1):last-child {
        flex: 0 0 auto;
        max-width: calc((100% - var(--space-xl) * 2) / 3);
    }
}
/* Centre each person's block within its track. Centring the flex content alone
 * leaves the portraits ragged (measured x=107/552/978) because every name is a
 * different width, so the block itself is centred and given a shared width. */
.person {
    display: flex;
    align-items: center;
    justify-content: center;   /* centre the portrait+name pair inside the cell */
    gap: var(--space-m);
    min-width: 0;
}
.person > div { min-width: 0; }
.person__photo {
    width: 9.375rem;      /* 150px, a fixed avatar box */
    height: 9.375rem;
    flex: none;
    border-radius: var(--radius-round);
    object-fit: cover;
    background: color-mix(in oklab, var(--secondary) 8%, transparent);
}
.person__role {
    display: block;
    font-size: var(--step-0);
    font-weight: var(--weight-500);
    color: var(--tertiary);          /* live: rgb(33,9,7) */
    text-transform: uppercase;
    letter-spacing: var(--tracking-l);
}
.person__name {
    margin: 0;
    font-family: 'Roca', Georgia, serif;   /* live sets the names in the display face */
    font-weight: var(--weight-700);
    font-size: var(--step-3);
    color: var(--primary);                    /* live: rgb(165,67,31) */
}
.team__action { display: flex; justify-content: center; padding-top: var(--space-xl); }

@media (max-width: 68rem) { .team > .person { flex-basis: calc((100% - var(--space-xl)) / 2); } }
@media (max-width: 44rem) {
    .team { gap: var(--space-l); }
    .team > .person { flex-basis: 100%; }
    .person__photo { width: 7rem; height: 7rem; }
}

/* =========================================================================
 * BAND 5 — The Practice. Dark band over a photo wash; 595|595 split with a
 * photo collage left and copy plus contact rows right.
 * ========================================================================= */
.practice { color: var(--on-tertiary); }
.practice .display, .practice h4 { color: var(--bg); }
.practice__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.practice__media { position: relative; }
.practice__photo { width: 100%; max-width: 500px; aspect-ratio: 500 / 600; object-fit: cover; border-radius: var(--radius-card); display: block;
    box-shadow: -20px -20px 0 0 var(--secondary); }   /* live: rgb(72,18,14) -20px -20px — missed in phase 1 */
.practice__inset {
    position: relative;
    z-index: var(--layer-raised);
    display: block;
    width: 300px;         /* live: a fixed 300x350 inset on the 500 plate */
    max-width: 60%;
    aspect-ratio: 300 / 350;
    object-fit: cover;
    border-radius: var(--radius-card);
    margin-top: calc(-1 * var(--overlap-practice));
    margin-inline-start: auto;
    box-shadow: var(--shadow-l);
}
.practice__copy { display: flex; flex-direction: column; gap: var(--space-m); }
.practice__copy .lede { color: var(--bg); }
/* Live: a 595x300 Google map after the description, square corners. Rounded
 * here to the card radius so it sits with the photos beside it. */
.practice__map { width: 100%; aspect-ratio: 595 / 300; height: auto; border: 0; border-radius: var(--radius-card); display: block; margin-block-start: var(--space-2xs); }

@media (max-width: 62rem) {
    .practice__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .practice__media { max-width: 32rem; }
}

/* =========================================================================
 * BANDS 6 & 7 — Services checkerboard.
 * Live: three 410px columns, each a 2-row stack of 410x336 (band 6) or
 * 410x360 (band 7) tiles at radius 20, alternating photo / colour card so the
 * grid reads as a checkerboard. Column 1 and 3 lead with a photo; column 2
 * leads with a card, which is what staggers the rows.
 * ========================================================================= */
.services-grid {
    display: grid;
    /* minmax(0,1fr), not 1fr: a bare 1fr has an AUTO minimum, so a card whose
     * copy cannot shrink blows its track wider than the container. Measured
     * here as three 930/868/981 tracks inside a 1210 grid. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
}
/* min-width:0 on the column AND the tiles: a grid item's default min-width is
 * auto, so a card whose padding plus copy exceeds its track renders wider than
 * the track and pushes the row off-screen. Measured at 1160: 343px tracks with
 * 403px cards, scrolling the page 10px sideways. */
.services-col { display: grid; gap: var(--space-m); min-width: 0; }
.services-col > * { min-width: 0; }

.svc-tile {
    border-radius: var(--radius-panel);
    aspect-ratio: 410 / 336;
    background-size: cover;
    background-position: center;
}
.svc-tile--tall { aspect-ratio: 410 / 360; }

.svc-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    text-align: center;
    padding: var(--space-l);           /* live: 50px */
    border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-panel);
    /* Aspect ratio ONLY -- no min-height. The two together impose a width floor
     * (336px tall at 410/336 means >=410px wide), which stopped the cards
     * shrinking and ran them 11px off the page between 1200 and 1240. The ratio
     * alone gives live's 410x336 at the design width and shrinks below it. */
    aspect-ratio: 410 / 336;
}
/* live: 45px, cream on the coloured cards, maroon on the cream one */
.svc-card__icon { width: var(--icon-box); height: var(--icon-box); color: var(--bg); }
.svc-card__icon svg { width: 100%; height: 100%; fill: currentColor; }
.svc-card--cream .svc-card__icon { color: var(--secondary); }
.svc-card--tall { aspect-ratio: 410 / 360; }
.svc-card p { margin: 0; }
.svc-card--dark   { background: var(--tertiary); color: var(--on-tertiary); }
.svc-card--dark .card-title { color: var(--bg); }
.svc-card--cream  {
    background: var(--bg);
    color: var(--ink);
    border: var(--border-medium) solid var(--primary);   /* live: 2px solid rgb(165,67,31) */
}
.svc-card--maroon { background: var(--secondary); color: var(--on-secondary); }
.svc-card--maroon .card-title { color: var(--bg); }

/* Below three columns the checkerboard stagger stops meaning anything, so the
 * tiles become a plain two-up and then a stack, and the aspect ratio is
 * released so a card is as tall as its copy needs. */
@media (max-width: 74rem) {
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-card, .svc-card--tall { aspect-ratio: auto; min-height: 15rem; }
}
/* Two-up, the three tile/card COLUMNS of each band cannot fill a 2-track
 * grid: the third wrapped to a row of its own and left the right half empty
 * (owner, 2026-10-03; measured 70-72% of the grid filled at every width from
 * 641 to 1184). So at two-up the columns dissolve and their six children flow
 * as one grid: three rows, each one service as a photo beside its card. The
 * source order (tile card | card tile | tile card) makes that a checkerboard
 * on its own. The photo fills its cell (width AND height 100%, so its aspect
 * ratio still sizes the row but never widens the photo past its track): a card
 * whose copy runs taller than the photo's ratio never leaves a hole under it. Scoped above
 * 40rem: in the single column the card-first `order` rules below would
 * otherwise reorder across the whole band instead of within each pair. */
@media (min-width: 40.0625rem) and (max-width: 74rem) {
    .services-col { display: contents; }
    .svc-tile { width: 100%; height: 100%; }
}
@media (max-width: 40rem) {
    .services-grid { grid-template-columns: 1fr; }
    .svc-tile, .svc-tile--tall { aspect-ratio: 16 / 10; }
}

/* =========================================================================
 * BAND 8 — FAQ. Grey band over a photo wash, 645|645 split: copy left,
 * a padded panel of native <details> right.
 * ========================================================================= */
.faq__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.faq__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); }
.faq__note { margin: 0; }
.faq__note p { margin: 0; color: var(--on-tertiary); }
.faq__note .card-title { display: block; font-size: var(--step-2); margin-bottom: var(--space-3xs); }

.faq__panel {
    /* Live's panel is a transparent wrapper padded 80px; the CARDS carry the
     * fill, so the photograph shows between them. */
    padding: var(--space-2xl);
}

/* Native <details>, matching live -- including its +/- glyph, which is a
 * FontAwesome plus and minus rather than a chevron. Live's items are SEPARATED
 * CARDS (cream fill, radius 10, 20px padding), not a continuous ruled list. */
/* Question and answer are ONE card: the summary carries the top of the fill and
 * the panel the rest, so an open item reads as a single expanded card rather
 * than two stacked ones. (Live stacks them; the owner asked for this instead.) */
.faq-item {
    background: var(--bg);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.faq-item + .faq-item { margin-top: var(--space-2xs); }
.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    cursor: pointer;
    list-style: none;
    background: transparent;
    padding: var(--space-s);          /* live: 20px */
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-1);
    color: var(--secondary);
    transition: color var(--duration-fast) var(--ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--primary); }
.faq-item__icon { flex: none; width: 1rem; height: 1rem; fill: var(--primary); }
.faq-item .icon-minus { display: none; }
.faq-item[open] .icon-minus { display: block; }
.faq-item[open] .icon-plus { display: none; }
/* The reveal: a grid-rows 0fr -> 1fr transition animates to the content's own
 * height without needing a hard-coded max-height, and collapses cleanly. */
.faq-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-base) var(--ease-out);
}
.faq-item[open] .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__body {
    overflow: hidden;
    padding-inline: var(--space-s);
}
.faq-item__body > p { padding-bottom: var(--space-s); }

@media (prefers-reduced-motion: reduce) {
    .faq-item__panel { transition: none; }
}
.faq-item__body p { margin: 0; font-weight: var(--weight-500); color: var(--ink); }
.faq-item__body a { color: var(--primary); }

@media (max-width: 62rem) {
    .faq__inner { grid-template-columns: 1fr; }
    .faq__panel { padding: var(--space-l); }
}

/* =========================================================================
 * BAND 9 — Respect notice + three link cards.
 * Live: a 492 | 492 | 246 three-track grid — a white card over a photo, a
 * photo panel, and a stack of three 246x270 link tiles.
 * ========================================================================= */
.respect__inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-m);
    align-items: stretch;
}
.respect__card {
    min-width: 0;
    background: var(--surface);      /* live: solid rgb(255,255,255) */
    border-radius: var(--radius-panel);
    padding: var(--space-xl);      /* live: 70px */
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    justify-content: center;
    background-size: cover;
    background-position: right center;
}
.respect__card p { margin: 0; font-weight: var(--weight-500); }
.respect__photo {
    border-radius: var(--radius-panel);
    background-size: cover;
    background-position: center;
    min-height: 20rem;
}
.respect__links { display: grid; gap: var(--space-m); align-content: space-evenly; }

/* Live's link tiles are SOLID colour cards, not photographs behind a scrim:
 * rgb(33,9,7) / rgb(72,18,14) / rgb(33,9,7), radius 10px, 40px padding. */
.link-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    text-align: center;
    min-height: 16.875rem;      /* 270px */
    padding: var(--space-l);    /* live: 40px */
    border-radius: var(--radius-card);
    /* Live sets BOTH a photograph and a colour on the same element; the colour
     * shows wherever the photo does not cover, and the label sits on top. */
    background-color: var(--tertiary);
    background-size: cover;
    background-position: center;
    color: var(--bg);
    text-decoration: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.link-tile:nth-child(2) { background-color: var(--secondary); }
/* A scrim so the label keeps its contrast over any photograph. */
.link-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-behind);
    background: color-mix(in oklab, var(--tertiary) 55%, transparent);
    transition: background var(--duration-base) var(--ease-out);
}
.link-tile:hover::before { background: color-mix(in oklab, var(--tertiary) 72%, transparent); }
.link-tile > * { position: relative; }
.link-tile__icon { width: var(--icon-box); height: var(--icon-box); color: var(--bg); }   /* live: 45px */
.link-tile__icon svg { width: 100%; height: 100%; fill: currentColor; }
.link-tile__title { font-family: 'Roca', Georgia, serif; font-weight: var(--weight-700); font-size: var(--step-3); color: var(--bg); margin: 0; }
.link-tile__more { font-size: var(--step-0); letter-spacing: var(--tracking-l); text-transform: uppercase; }

/* The link column carries a --step-3 heading (live 24.75px), so it needs a real floor: at 1100
 * a 195px track left 137px of content and clipped "Appointment Information".
 * minmax(15rem, 1fr) keeps the three-track layout only while it fits. */
@media (min-width: 74.0625rem) {
    .respect__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(15rem, 1fr); }
}
@media (max-width: 74rem) {
    .respect__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .respect__links { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
    .respect__inner { grid-template-columns: 1fr; }
    .respect__card { padding: var(--space-l); }
}
/* The three-across link row needs ~230px a tile before "Appointment
 * Information" wraps and clips inside its fixed 270px height: measured 205px
 * tiles at a 720 viewport. Below that it goes two-up, then one. */
@media (max-width: 56rem) {
    .respect__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .link-tile { padding: var(--space-m); }
}
@media (max-width: 30rem) {
    .respect__links { grid-template-columns: 1fr; }
}

/* =========================================================================
 * BAND 10 — closing CTA. A cream card on a photo wash, 520|520 inside it.
 * ========================================================================= */
.cta__card {
    background: var(--bg);
    border-radius: var(--radius-card);
    /* Live's card runs the full shell, not the narrow one, padded 50px with
     * 100px at the right. Held to 1140 with tighter padding it read as cramped. */
    padding: var(--space-xl) var(--space-3xl) var(--space-xl) var(--space-xl);
}
.cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.cta__photo { width: 100%; aspect-ratio: 520 / 486; object-fit: cover; border-radius: var(--radius-card); display: block; }
.cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); min-width: 0; }
.cta__copy p { max-width: 60ch; }
.cta__copy .btn, .cta__copy > div:last-child { margin-block-start: var(--space-xs); }

@media (max-width: 62rem) {
    .cta__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .cta__card { padding: var(--space-l); }
}

/* =========================================================================
 * FOOTER — three stacked bands: cream contact strip, dark main, maroon legal
 * ========================================================================= */
/* HotDoc injects .hotdoc-lightbox as a body child after the footer. Closed, it
 * still occupies 30px past the footer and extends the document, leaving blank
 * space below the legal bar. It is theirs, not ours, so it is pinned out of
 * flow rather than restyled. */
.hotdoc-lightbox:not([style*="block"]) { position: absolute; }
/* Closed, the lightbox also parks its modal off the right-hand edge, which on a
 * phone widened the document to 512px on the pages where HotDoc had finished
 * injecting before first paint (measured on /services and /doctors-and-staff).
 * Collapse the closed box so nothing inside it can extend the page. */
.hotdoc-lightbox:not([style*="block"]) { top: 0; left: 0; width: 0; height: 0; overflow: hidden; }
body > .hotdoc-lightbox { margin: 0; }

.site-footer { background: var(--bg); margin-bottom: 0; }
.footer-legal { margin-bottom: 0; }

.footer-contact { padding-block: var(--space-xl); }
/* Live holds each side block to a 220px column, so the address breaks onto two
 * lines and the phone block sits as a left-aligned column at the right edge. */
.footer-contact__block { max-width: 13.75rem; }
.footer-contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
}
.footer-contact__block { display: flex; flex-direction: column; }
.footer-contact__block--end { justify-self: end; width: 100%; }
.footer-contact__label { margin: 0; font-weight: var(--weight-600); color: var(--secondary); }
.footer-contact__value {
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-2);
    color: var(--primary);
    text-decoration: none;
    line-height: var(--leading-s);
}
.footer-contact__value:hover { text-decoration: underline; }
/* Touch targets. The address, phone and legal links measured 17-23px tall; a
 * finger needs 44. Padding rather than a bigger font, so nothing looks different. */
.footer-contact__value { display: inline-block; padding-block: var(--space-xs); }
.footer-contact__block { gap: 0; }
.footer-links a { display: inline-block; padding-block: var(--space-xs); }
.footer-powered a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.utility a { display: inline-block; padding-block: var(--space-xs); }
.utility { padding-block: 0; }   /* the link's own padding now sets the bar's height */
.utility__item { min-height: 2.75rem; }
/* These two sit AFTER the header's own phone rules in the file, so the phone
 * exception has to be restated here or it loses on source order — which is how
 * the stacked bar stayed 142px tall after it was first "fixed". */
@media (max-width: 40rem) {
    .utility { padding-block: var(--space-2xs); }
    .utility__item { min-height: 0; }
    /* The phone keeps its 44px target but takes only its text line's room, so
     * its row sits at the same spacing as the hours and address rows. */
    .utility a { margin-block: calc(-1 * var(--space-xs)); }
}
.footer-contact__logo img { width: 226px; height: 150px; object-fit: contain; }

.footer-main { background: var(--tertiary); color: var(--on-tertiary); padding-block: var(--space-2xl); }
.footer-main__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2xl);
    align-items: center;          /* live centres the three columns on each other */
}
.footer-main p { margin: 0; font-size: var(--step--1); font-weight: var(--weight-400); }
.footer-main h2, .footer-main h3, .footer-main h4, .footer-main h5, .footer-main h6 { color: var(--on-tertiary); }
/* Live tags these <h6>; the level is set by the document outline (they follow
 * an <h3>, so <h6> skips two levels and axe rightly flags it) while the SIZE
 * stays live's 20.62px via the class. Tag = semantics, class = appearance. */
.footer-heading { font-size: var(--step-2); line-height: var(--leading-s); }
.footer-hours { display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-hours .footer-heading { margin: 0; font-size: var(--step-2); }
.footer-hours p, .footer-hours span {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: var(--weight-500);
    font-size: var(--step-0);
}
.footer-mid { display: flex; flex-direction: column; align-items: center; gap: var(--space-m); text-align: center; }
.footer-news { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-m); }
.footer-news .footer-heading { margin: 0; font-size: var(--step-2); color: var(--primary); }
.footer-news__note { font-size: var(--step--2); }
/* The Connect newsletter widget renders itself into this mount; the site only
 * gives it room. It is empty until {{connect_token}} exists on the box. */
.mediflare-yourhealth-newsletter-signup:empty { min-height: 0; }

.footer-legal { background: var(--secondary); color: var(--bg); padding-block: var(--space-m); }
/* OWNER REQUEST 2026-09-26: three zones — copyright | Powered by Mediflare
 * (centred) | Privacy / Terms — split by thin cream rules. Live groups the
 * credit with the copyright at the left; this is a deliberate departure. */
.footer-legal__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-l);
}
.footer-legal p, .footer-legal h2 { margin: 0; font-size: var(--step--1); font-weight: var(--weight-500); font-family: 'Raleway', system-ui, sans-serif; color: var(--bg); }
.footer-legal a { color: var(--on-secondary); font-size: var(--step--1); }
/* Footer links underline on hover only (owner, 2026-09-27). */
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }
.footer-copyright { justify-self: start; }
.footer-powered {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step--2);
    justify-self: center;
    padding-inline: var(--space-l);
    border-inline: var(--border-thin) solid color-mix(in oklab, var(--bg) 45%, transparent);
}
.footer-powered img { width: 72px; height: 26px; object-fit: contain; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs) var(--space-m); justify-self: end; }
.footer-links a { position: relative; }
/* A small rule between the two links, matching the ones round the credit. */
.footer-links a + a::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--space-m) * -0.5);
    top: 50%;
    height: 1em;
    transform: translateY(-50%);
    border-inline-start: var(--border-thin) solid color-mix(in oklab, var(--bg) 45%, transparent);
}

@media (max-width: 62rem) {
    .footer-contact__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-l); }
    .footer-contact__block, .footer-contact__block--end { align-items: center; text-align: center; justify-self: center; max-width: none; }
    .footer-main__inner { text-align: center; }
    /* Stacked: everything centred, the vertical rules become a short rule
     * above and below the credit so the three zones still read as three. */
    .footer-legal__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--space-s); }
    .footer-copyright, .footer-powered, .footer-links { justify-self: center; justify-content: center; }
    .footer-powered { border-inline: 0; padding-inline: 0; padding-block: var(--space-xs); border-block: var(--border-thin) solid color-mix(in oklab, var(--bg) 45%, transparent); width: 100%; max-width: 20rem; justify-content: center; }
    .footer-main__inner { grid-template-columns: 1fr; }
    .footer-mid { order: -1; }
}

/* =========================================================================
 * REVEALS — one-way, IntersectionObserver-driven. NOT the template's
 * scroll-linked .reveal, which plays backwards on scroll-up.
 *
 * The hiding rule is gated on .js so a visitor without JavaScript, or one for
 * whom the script throws, sees the page rather than a blank one.
 * ========================================================================= */
.js [data-reveal] {
    opacity: 0;
    transition:
        opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.js [data-reveal="up"]    { transform: translateY(26px); }
.js [data-reveal="down"]  { transform: translateY(-26px); }
.js [data-reveal="left"]  { transform: translateX(-18px); }
.js [data-reveal="right"] { transform: translateX(18px); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal][data-revealed] { opacity: 1; transform: none; }
.js [data-reveal][data-reveal-done] { will-change: auto; transition: none; }

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .js [data-reveal="up"],
    .js [data-reveal="down"],
    .js [data-reveal="left"],
    .js [data-reveal="right"] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Nav dropdowns ------------------------------------------------------
 * Live renders About / Patient Info / Health Info as parents whose own href is
 * "#". Reproduced as <button>s so they are operable by keyboard and announce
 * their state, rather than as links that go nowhere. */
.nav__item--has-menu { position: relative; }
.nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    background: none;
    border: 0;
    cursor: pointer;
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-0);
    color: var(--primary);
    padding: var(--space-xs) var(--space-xs);
    border-radius: var(--radius-card);
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.nav__toggle:hover, .nav__toggle.active,
.nav__toggle[aria-expanded="true"] { background: var(--secondary); color: var(--on-secondary); }
.nav__chev { width: 0.75em; height: 0.75em; transition: transform var(--duration-fast) var(--ease-out); }
.nav__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__menu {
    list-style: none;
    margin: 0;
    padding: var(--space-2xs);
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 13rem;
    background: var(--bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-m);
    z-index: var(--layer-overlay);
}
.nav__menu a { white-space: nowrap; font-size: var(--step--1); }
.nav__menu[data-open] { display: block; }
/* (After .nav__toggle, so its padding is outranked by order.)
 * Desktop labels hold one line (2026-10-05: they wrapped at 1025-1140). From
 * the switch at 1101 to 1159 the links and toggles take one step less side
 * padding, which is what makes the row fit there; type is unchanged. */
@media (min-width: 68.8125rem) {
    .nav__list a, .nav__toggle { white-space: nowrap; }
}
@media (min-width: 68.8125rem) and (max-width: 72.4375rem) {
    .nav__list a, .nav__toggle { padding-inline: var(--space-2xs); }
}
@media (hover: hover) and (min-width: 68.8125rem) {
    .nav__item--has-menu:hover .nav__menu,
    .nav__item--has-menu:focus-within .nav__menu { display: block; }
}

/* In the mobile panel the submenu is a plain indented list rather than a
 * floating card — a popover inside a panel has nothing to float above. */
@media (max-width: 68.75rem) {
    .nav__menu {
        position: static;
        box-shadow: none;
        background: none;
        min-width: 0;
        padding-inline-start: var(--space-m);
    }
    .nav__toggle { width: 100%; justify-content: space-between; padding: var(--space-s); }
}

/* The template gives every heading `margin: var(--space-l) 0 var(--space-s)`,
 * which is right for prose and wrong inside a flex or grid layout that already
 * states its own gap — it added 40px above and 20px below every card title and
 * band heading. Zeroed where a layout owns the spacing; prose keeps the default. */
.section__head > *,
.hero__copy > *,
.about__copy > *,
.practice__copy > *,
.faq__copy > *,
.cta__copy > *,
.pillar > *,
.svc-card > *,
.respect__card > *,
.person__name,
.link-tile > *,
.footer-hours > *,
.footer-news > * {
    margin-block: 0;
}

/* =========================================================================
 * INNER PAGES — re-transcribed against live on 2026-09-21.
 *
 * The first pass at these pages assumed they reuse the homepage hero and a
 * common split band. They do not: every hero has its own collage geometry and
 * most bands are their own layout. Each rule below is measured off live at
 * 1440 (positions, shadows, radii, colours); the narrow-width behaviour is
 * ours, because live's is Elementor stacking fixed-size blocks.
 * ========================================================================= */

/* --- Shared -------------------------------------------------------------- */

/* Copy on the cream ground. Live sets band copy in rgb(33,9,7) — the same
 * value as the dark bands — and keeps rgb(51,51,51) for hero ledes only. */
.prose-dark { color: var(--tertiary); }

/* A copy column: eyebrow, display line, paragraphs, action. The layout owns
 * the spacing, so the template's heading margins are zeroed. */
.copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); min-width: 0; }
.copy > * { margin-block: 0; }
.copy p { max-width: 65ch; }
.copy .eyebrow + .display { margin-block-start: calc(var(--space-s) * -1); }   /* live: 18px between the pair */
.copy--on-dark .eyebrow { color: var(--on-tertiary); }
.copy--on-dark .display, .copy--on-dark h2, .copy--on-dark h3 { color: var(--bg); }
.copy--on-dark p, .copy--on-dark li { color: var(--on-tertiary); }

/* .btn--book is declared after .btn--reverse, so the pair needs stating. */
.btn--book.btn--reverse,
.mf-search-overlay__close { background: var(--bg); color: var(--primary); }
.btn--book.btn--reverse:hover,
.mf-search-overlay__close:hover { background: var(--primary); color: var(--on-primary); }

/* The hero wash differs per page — its own photograph at its own opacity. */
.hero::before {
    background-image: var(--hero-wash, url('/assets/images/hero-band-bg.237abc2135.webp'));
    opacity: var(--hero-wash-opacity, 0.25);
}
/* Three of the inner heroes put the copy LEFT and the collage RIGHT. Source
 * order is copy first, so a phone reads the page title before the photos. */
.hero--flip .collage { justify-self: end; }

/* A photo collage. Live positions each photo at fixed px inside a 595px
 * column; stated here as shares of the collage's own box, so the composition
 * holds its proportions at every width and the column keeps a real height.
 * --w/--h are the box, --x/--y/--iw/--ih each item, all in live's px. */
.collage {
    position: relative;
    width: 100%;
    max-width: calc(var(--w) / 16 * 1rem);
    aspect-ratio: var(--w) / var(--h);
}
.collage__item {
    position: absolute;
    left: calc(var(--x) / var(--w) * 100%);
    top: calc(var(--y) / var(--h) * 100%);
    width: calc(var(--iw) / var(--w) * 100%);
    height: calc(var(--ih) / var(--h) * 100%);
    object-fit: cover;
    display: block;
    border-radius: var(--radius-card);
    /* The hard offset frames: fixed decorative dimensions, so px. */
    box-shadow: var(--sx, 0) var(--sy, 0) 0 0 var(--sc, transparent);
}
.collage--soft .collage__item { border-radius: var(--radius-panel); }
@media (max-width: 62rem) {
    .hero--flip .collage { justify-self: start; }
    .collage { margin-inline: auto; }
    .hero .collage { margin-block-start: var(--space-m); }
}
/* Where the collage comes first (the pages that are not flipped), its lower
 * frame hangs 20px below the box and sat tight on the eyebrow under it. */
@media (max-width: 62rem) {
    .hero:not(.hero--flip) .collage { margin-block-end: var(--space-s); }
}
@media (max-width: 40rem) {
    /* A 25px frame on a 300px photo reads as a slab; ease it back. */
    .collage__item { box-shadow: calc(var(--sx, 0) * 0.6) calc(var(--sy, 0) * 0.6) 0 0 var(--sc, transparent); }
}

/* Inline icons (Font Awesome paths lifted from live's own inline SVG). */
.icon { display: block; fill: currentColor; flex: none; }

/* Bands that carry two columns. */
.cols-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3xl);              /* live: 100px between 595px columns */
    align-items: center;
}
.cols-2 > * { min-width: 0; }
@media (max-width: 62rem) {
    .cols-2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* A band head split in two: heading left, lede right. `.section__head` centres
 * by default, so the split has to undo that, including the auto margins. */
.section__head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    text-align: start;
    gap: var(--space-2xl);
}
.section__head--split > * { margin-inline: 0; max-width: none; }
.section__head--split .lede, .section__head--split .display { max-width: none; }
@media (max-width: 62rem) {
    .section__head--split { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
}

.band--photo > .u-container > .section__head .display { color: var(--bg); }
.band--photo > .u-container > .section__head .lede,
.band--photo > .u-container > .section__head p { color: var(--on-tertiary); }

/* Live's gradient band: the strip's 232deg gradient carrying a centred head. */
.band--gradient {
    background: var(--brand-gradient);
    color: var(--on-secondary);
    padding-block: var(--space-xl);     /* live: 50px */
}
.band--gradient .eyebrow,
.band--gradient .display { color: var(--bg); }
.band--gradient .display em { color: var(--on-secondary); font-style: normal; }

/* The rotating word in "Annie Lim ___ your health journey". Live cycles four
 * words with Elementor's letter-by-letter "typing" effect on a 2.5s hold. The
 * first version here crossfaded the words in a fixed-width slot, which left a
 * hole either side of the short ones; the owner asked for the typing effect
 * instead (2026-09-26). The word is now inline and its text is typed and
 * deleted by the script, so the sentence closes up around whatever is showing
 * — exactly as live does. Nothing here animates width in CSS: the width follows
 * the text, as it does for any heading. */
.rotator {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    color: var(--on-secondary);
    cursor: pointer;
    border-radius: var(--radius-card);
    white-space: nowrap;
}
.rotator:focus-visible { outline-offset: 0.15em; }
/* The caret: a thin bar after the word, blinking (opacity only). */
.rotator__caret {
    display: inline-block;
    width: 0.06em;
    height: 0.95em;
    margin-inline-start: var(--space-3xs);
    vertical-align: -0.1em;
    background: currentColor;
    animation: rotator-caret 1s steps(2, start) infinite;
}
@keyframes rotator-caret { to { opacity: 0; } }
.rotator[aria-pressed="true"] .rotator__caret { animation: none; opacity: 0; }
/* Below the desktop layout the word takes a centred line of its own, so the
 * tail of the sentence does not hop between lines as the word grows. */
@media (max-width: 62rem) {
    .rotator { display: block; width: fit-content; margin-inline: auto; }
}
/* No motion wanted: the script leaves the word at "supports" and shows no caret. */
@media (prefers-reduced-motion: reduce) {
    .rotator { cursor: default; }
    .rotator__caret { display: none; }
}
.band--gradient .lede, .band--gradient p { color: var(--on-secondary); }
/* The template gives .section__head 60px of bottom padding for the content
 * that normally follows it; here nothing does, so it made the band 60/120
 * where live is 50/43. */
.band--gradient .section__head { gap: var(--space-xs); margin-block-end: 0; padding-block-end: 0; }
.band--gradient .section__head .display { max-width: none; }

/* The four-up panel: ONE cream panel (1290x427, 20px radius) on a scrimmed
 * photo, four cells split by 1px rust rules, each an icon, a rust Roca title
 * and a line of copy. Not the homepage's `.pillar`, which is four separately
 * bordered cards. */
.pillar-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--bg);
    border-radius: var(--radius-panel);
    padding-block: var(--space-2xl);      /* live: 70px */
}
.pillar-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
    padding-inline: var(--space-xl);      /* live: 60px */
    border-inline-end: var(--border-thin) solid var(--primary);
}
.pillar-cell:last-child { border-inline-end: 0; }
.pillar-cell > * { margin-block: 0; }
.pillar-cell .icon { width: 3.4375rem; height: 3.4375rem; color: var(--secondary); margin-block: var(--space-s) var(--space-m); }
.pillar-cell .card-title { color: var(--primary); }
.pillar-cell p { color: var(--tertiary); }
@media (max-width: 68rem) { .pillar-cell { padding-inline: var(--space-m); } }
@media (max-width: 62rem) {
    .pillar-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); padding-block: var(--space-xl); }
    .pillar-cell:nth-child(2n) { border-inline-end: 0; }
}
@media (max-width: 34rem) {
    .pillar-panel { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-m); }
    .pillar-cell { border-inline-end: 0; padding-block-end: var(--space-xl); border-block-end: var(--border-thin) solid var(--primary); }
    .pillar-cell:last-child { border-block-end: 0; padding-block-end: 0; }
}

/* Tick lists: live's marker is the FA check at 15px, rust on light grounds and
 * cream on dark ones; the label is bold on light grounds. */
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.tick-list li { display: flex; align-items: baseline; gap: var(--space-xs); font-weight: var(--weight-600); color: var(--tertiary); }
.tick-list .icon { width: 0.9375rem; height: 0.9375rem; color: var(--primary); position: relative; top: 0.125rem; }
.tick-list--on-dark li { color: var(--on-tertiary); font-weight: var(--weight-500); font-size: var(--step-1); }
.tick-list--on-dark .icon { color: var(--bg); }
.tick-list--2col { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--space-xs) var(--space-l); }
@media (max-width: 34rem) { .tick-list--2col { grid-template-columns: minmax(0, 1fr); } }

/* "Why Choose Us": copy | photo | three counters, on a scrimmed photo. Live
 * sets each counter as icon + Roca number, with the label UNDER the number. */
.stats__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.15fr) minmax(0, 0.6fr);
    gap: var(--space-xl);
    align-items: center;
}
.stats__photo { width: 100%; aspect-ratio: 476 / 568; object-fit: cover; border-radius: var(--radius-panel); display: block; }
.stats { margin: 0; display: flex; flex-direction: column; gap: var(--space-xl); }
.stat { display: flex; flex-direction: column; gap: var(--space-3xs); }
/* <dt> must precede <dd> in the markup; the order is flipped visually so the
 * label sits under the number, as live draws it. */
.stat__label { order: 2; color: var(--on-tertiary); padding-inline-start: calc(var(--icon-box) + var(--space-s)); }
.stat__value {
    order: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-s);
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-7);
    color: var(--bg);
    line-height: var(--leading-xs);
}
.stat__value .icon { width: var(--icon-box); height: var(--icon-box); color: var(--bg); }
@media (max-width: 68rem) {
    .stats__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .stats { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--space-l); }
}
@media (max-width: 48rem) {
    .stats__inner { grid-template-columns: minmax(0, 1fr); }
    /* Alone in one column the photo filled the width and stood ~950px tall at
     * 768, with the counters stacked in a corner under it. Cap it, and keep the
     * counters in a row until there is genuinely no room for three. */
    .stats__photo { max-width: 28rem; }
}
@media (max-width: 34rem) {
    .stats { flex-direction: column; }
}


/* --- /the-practice ------------------------------------------------------- */

/* "Exceptional Care": a scrimmed photo band. Two columns split by a 1px cream
 * rule, the right one sitting on the left one's baseline, then a full-width
 * 1290x450 photograph under both. */
.care__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    margin-block-end: var(--space-xl);      /* live: 50px to the photograph */
}
.care__lead { padding-inline-end: var(--space-3xl); border-inline-end: var(--border-thin) solid var(--bg); }
/* --space-2xl, not 3xl: at 3xl (120px; live is 100) the tick list had 555px for
 * two columns that need 564, and both long labels wrapped. */
.care__detail { padding-inline-start: var(--space-2xl); gap: var(--space-m); }
.care__detail .tick-list { width: 100%; }
.care__photo { width: 100%; aspect-ratio: 1290 / 450; object-fit: cover; border-radius: var(--radius-panel); display: block; }
@media (max-width: 62rem) {
    .care__top { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-l); }
    .care__lead { padding-inline-end: 0; border-inline-end: 0; padding-block-end: var(--space-l); border-block-end: var(--border-thin) solid var(--bg); }
    .care__detail { padding-inline-start: 0; }
    .care__photo { aspect-ratio: 3 / 2; }
}

/* "A Practice Committed to Your Future": a 630|630 mosaic — one wide photo
 * over two tall ones at left, a scrimmed photo card carrying the copy at
 * right. All 20px radius, 30px apart. */
.future {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: var(--space-m);
}
.future__photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-panel); display: block; min-width: 0; }
.future__photo--wide { grid-column: 1 / 3; aspect-ratio: 630 / 350; }
.future__photo--tall { aspect-ratio: 300 / 350; }
.future__card {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-panel);
    background-size: cover;
    background-position: center;
    padding: var(--space-3xl) var(--space-2xl);   /* live: 90px */
    justify-content: center;
}
.future__card::before { content: ''; position: absolute; inset: 0; z-index: var(--layer-behind); background: var(--tertiary); opacity: 0.66; }
@media (max-width: 62rem) {
    .future { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .future__card { grid-column: 1 / -1; grid-row: auto; padding: var(--space-xl) var(--space-l); }
}


/* --- /practice-policies -------------------------------------------------- */

/* Two photo/copy rows on one cream band, 120px apart. Live sets the policies
 * as plain copy on the cream — rust Roca title, dark body — not as cards. The
 * first photo carries a maroon frame down-left, the second a rust one
 * down-right. */
.policy-rows { display: flex; flex-direction: column; gap: var(--space-band); }
.policy-row--top { align-items: start; }
.policy-photo { width: 100%; object-fit: cover; border-radius: var(--radius-card); display: block; }
.policy-photo--square { aspect-ratio: 1 / 1; box-shadow: -20px 20px 0 0 var(--secondary); }
.policy-photo--tall { aspect-ratio: 595 / 744; box-shadow: 20px 20px 0 0 var(--primary); }
.policy-list { display: flex; flex-direction: column; gap: var(--space-xl); color: var(--tertiary); }
.policy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); min-width: 0; }
.policy > * { margin-block: 0; }
.policy .card-title { color: var(--primary); }
.policy p { max-width: 65ch; }
@media (max-width: 62rem) {
    /* Photo first in both rows, whatever the source order. */
    .policy-row--top .policy-photo { order: -1; }
    .policy-photo--tall { aspect-ratio: 1 / 1; }
    .policy-photo { max-width: 37.1875rem; margin-inline: auto; }
}


/* --- /health-facts ------------------------------------------------------- */

/* The hero is a split head (title left, lede right) over a 1290x450 banner. */
.facts-hero { padding-block: var(--space-band); }
.facts-hero__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
    margin-block-end: var(--space-xl);
}
.facts-hero__head > * { margin-block: 0; min-width: 0; }
.health-facts__banner { width: 100%; aspect-ratio: 1290 / 450; object-fit: cover; border-radius: var(--radius-panel); display: block; }
@media (max-width: 62rem) {
    .facts-hero__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
    .health-facts__banner { aspect-ratio: 3 / 2; }
}

/* Three cream cards on the scrimmed photo, each holding up to three topic
 * groups. Live: 50px padding, 50px between cards, groups 130px apart. */
.factcards { display: flex; flex-direction: column; gap: var(--space-xl); }
.factcard {
    background: var(--bg);
    border-radius: var(--radius-panel);
    padding: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-2xl);
}
.factcard--wide { grid-template-columns: minmax(0, 1fr); }
.factgroup { display: flex; flex-direction: column; gap: var(--space-s); min-width: 0; }
.factgroup > * { margin-block: 0; }
.factgroup__stack { display: flex; flex-direction: column; gap: var(--space-l); min-width: 0; }
.factgroup__title {
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-2);             /* live: 20.6px */
    color: var(--primary);
}
.factgroup__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3xs); }
.factcard--wide .factgroup__links { display: block; columns: 2; column-gap: var(--space-2xl); }
.factcard--wide .factgroup__links li { break-inside: avoid; margin-block-end: var(--space-3xs); }
.factgroup__links li {
    position: relative;
    padding-inline-start: var(--space-s);
    color: var(--secondary);                 /* live: rgb(72,18,14), Raleway 500 */
    line-height: var(--leading-m);
}
.factgroup__links li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.85em;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-round);
    background: var(--secondary);
    transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
/* The topic links. Live gives them no hover at all, so a visitor cannot tell
 * the links from the one plain item; here the label turns rust, gains an
 * underline and nudges right, and the bullet follows. */
.factgroup__links a {
    display: inline-block;
    padding-block: var(--space-3xs);
    color: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.25em;
    transition: color var(--duration-fast) var(--ease-out),
                text-decoration-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.factgroup__links a::after {
    content: '\2197';                      /* north-east arrow: opens another site */
    display: inline-block;
    margin-inline-start: var(--space-3xs);
    opacity: 0;
    transform: translate(-0.2em, 0.2em);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.factgroup__links a:hover,
.factgroup__links a:focus-visible { color: var(--primary); text-decoration-color: currentColor; transform: translateX(0.25rem); }
.factgroup__links a:hover::after,
.factgroup__links a:focus-visible::after { opacity: 1; transform: none; }
.factgroup__links li:has(a:hover)::before,
.factgroup__links li:has(a:focus-visible)::before { background: var(--primary); transform: scale(1.4); }
.factgroup__links li:not(:has(a)) { padding-block: var(--space-3xs); }
@media (prefers-reduced-motion: reduce) {
    .factgroup__links a, .factgroup__links a::after, .factgroup__links li::before { transition: none; }
    .factgroup__links a:hover, .factgroup__links a:focus-visible { transform: none; }
}
@media (max-width: 62rem) {
    .factcard { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-l); }
    .factcard--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
    .factcard { grid-template-columns: minmax(0, 1fr); }
    .factcard--wide .factgroup__links { columns: 1; }
}
/* A finger needs more than a 33px row: on phone and tablet widths every topic
 * link is a 44px target. Desktop keeps live's tighter rhythm for a mouse. */
@media (max-width: 64rem) {
    .factgroup__links { gap: 0; }
    .factgroup__links a { padding-block: var(--space-xs); min-height: 2.75rem; }
    .factgroup__links li:not(:has(a)) { padding-block: var(--space-xs); }
    .factgroup__links li::before { top: 1.35em; }
}


/* --- /contact ------------------------------------------------------------ */

/* The hero media: a 500x500 photo framed in RUST (the only rust plate frame on
 * the site) with a maroon details card riding its lower-right corner. The card
 * holds text, so unlike a collage photo it stays in flow and is pulled up and
 * across with margins stated as shares of the 595px column. */
.contact-media { width: 100%; max-width: 37.1875rem; min-width: 0; }
.contact-media__photo {
    width: 84%;                            /* 500 of 595 */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-card);
    box-shadow: -25px -25px 0 0 var(--primary);
}
.contact-card {
    position: relative;
    z-index: var(--layer-raised);
    margin: -29.75% 0 0 35%;               /* live: up 177px, across 208px */
    background: var(--secondary);
    color: var(--on-secondary);
    border-radius: var(--radius-card);
    padding: var(--space-xl) var(--space-l);   /* live: 50px; eased inline so the email holds one line */
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}
.contact-card__row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-s); align-items: center; }
.contact-card__row .icon { width: 1.75rem; height: 1.75rem; color: var(--on-secondary); grid-row: 1 / 3; }
.contact-card dt { font-weight: var(--weight-600); color: var(--on-secondary); line-height: var(--leading-s); }
.contact-card dd { margin: 0; color: var(--on-secondary); overflow-wrap: anywhere; }
.contact-card a { color: inherit; text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }
@media (max-width: 62rem) { .contact-media { margin-inline: auto; margin-block-start: var(--space-m); } }
@media (max-width: 40rem) {
    .contact-media__photo { width: 100%; box-shadow: -15px -15px 0 0 var(--primary); }
    .contact-card { margin: calc(var(--space-xl) * -1) var(--space-s) 0; padding: var(--space-l); }
}

/* "Find Us": a maroon band with a photograph washed over it at 25%, not the
 * standard 66% scrim. The head sits top-left, the 860x660 map under it, and a
 * cream form card overlaps the map's right-hand side from 70px above it. */
.find { position: relative; isolation: isolate; background: var(--secondary); }
.find::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: var(--layer-behind);
    background: url('/assets/images/young-female-radiologist-sitting-by-workplace-in-f.d0e3365375.webp') center / cover;
    opacity: 0.25;
}
.find__inner {
    display: grid;
    grid-template-columns: minmax(0, 729fr) minmax(0, 131fr) minmax(0, 430fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-s);
}
.find__head { grid-column: 1 / 2; grid-row: 1; gap: var(--space-2xs); }
.find__head .eyebrow { color: var(--bg); }
.find__head .display { color: var(--on-secondary); }
.find__head .eyebrow + .display { margin-block-start: 0; }   /* outranks .copy's pull-up */
.find__map {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100%;
    aspect-ratio: 860 / 660;
    border: 0;
    border-radius: var(--radius-panel);
    display: block;
}
.find__form {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
    align-self: start;
    margin-block-start: var(--space-l);
    position: relative;
    z-index: var(--layer-raised);
    background: var(--bg);
    border-radius: var(--radius-panel);
    padding: var(--space-2xl);             /* live: 70px */
    box-shadow: var(--shadow-m);
    min-width: 0;
}
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.field { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: var(--weight-600); color: var(--secondary); font-size: var(--step--1); }
/* The fields' look (live: 1px rust edge, 10px corner, 59px height) is the
 * --field-* tokens in :root, shared with the search field: see Form controls. */
.find__form .btn { margin-block-start: var(--space-m); }
/* Panel title and the disclaimer under the form: owner additions (2026-09-27);
 * live has neither. */
.find__form-title { color: var(--secondary); margin-block: 0 var(--space-m); }
.form-disclaimer {
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-s);
    border-block-start: var(--border-thin) solid color-mix(in oklab, var(--secondary) 25%, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.form-disclaimer p { margin: 0; font-size: var(--step--1); color: var(--tertiary); line-height: var(--leading-m); }
.form-disclaimer strong { color: var(--secondary); text-transform: uppercase; letter-spacing: var(--tracking-l); font-weight: var(--weight-700); }
@media (max-width: 62rem) {
    .find__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-l); }
    .find__head, .find__map, .find__form { grid-column: 1; grid-row: auto; }
    .find__form { margin-block-start: 0; padding: var(--space-l); }
    .find__map { aspect-ratio: 4 / 3; }
}
@media (max-width: 30rem) { .contact-fields { grid-template-columns: minmax(0, 1fr); } }


/* --- /services ----------------------------------------------------------- */

/* The hero collage carries a dark quote card over its lower-right corner. It
 * holds text, so it is placed against the collage wrapper rather than sized as
 * a share of it, and drops under the photos on a phone. */
.services-hero { padding-block-end: var(--space-band); }
.services-collage { position: relative; width: 100%; max-width: 37.1875rem; justify-self: end; min-width: 0; }
.quote-card {
    position: absolute;
    inset-inline-end: 8.4%;               /* live: 50px in from the column edge */
    bottom: 3.2%;
    width: 45%;                           /* live: 268 of 595 */
    margin: 0;
    background: var(--tertiary);
    color: var(--bg);
    border-radius: var(--radius-panel);
    padding: var(--space-m);              /* live: 30px */
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-style: italic;
    font-size: var(--step-2);             /* live: 20.6px */
    line-height: var(--leading-s);
    text-align: center;
}
.quote-card p { margin: 0; }
@media (max-width: 62rem) { .services-collage { justify-self: start; margin-inline: auto; } }
@media (max-width: 40rem) {
    .quote-card { position: relative; inset: auto; width: auto; margin-block-start: var(--space-l); }
}

/* "Key Areas of Health": the gradient band with a centred head and centred
 * cream pills. Live marks the pills up as href="#" anchors that go nowhere;
 * they are list items here, since a link that does not navigate is a defect. */
.key-areas { padding-block: var(--space-2xl); }
.key-areas .display { color: var(--on-secondary); }
.key-areas .section__head .lede { max-width: 46.875rem; }   /* live: 750px */
.chips { list-style: none; margin: 0; padding: var(--space-l) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); max-width: 74rem; margin-inline: auto; }
.chip {
    background: var(--bg);
    color: var(--secondary);
    border-radius: var(--radius-pill);
    padding: var(--space-xs) var(--space-s);     /* live: 15px 25px */
    font-weight: var(--weight-700);
    font-size: var(--step-1);                    /* live: 18.6px */
    line-height: var(--leading-s);
}

/* Nursing services: three 267px photo tiles and a cream 400px checklist card. */
.nursing { display: grid; grid-template-columns: repeat(3, minmax(0, 267fr)) minmax(0, 400fr); gap: var(--space-m); align-items: start; }
.nursing-tile { display: flex; flex-direction: column; gap: var(--space-s); min-width: 0; }
.nursing-tile > * { margin-block: 0; }
.nursing-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); display: block; margin-block-end: var(--space-2xs); }
.nursing-tile .card-title { color: var(--bg); font-size: var(--step-2); }
.nursing-tile p { color: var(--on-tertiary); font-size: var(--step--1); }
.nursing-card {
    background: var(--bg);
    border-radius: var(--radius-card);
    padding: var(--space-l);              /* live: 50px; eased to 40 so the labels wrap less (owner, 2026-09-27) */
    box-shadow: var(--shadow-m);
    min-width: 0;
}
.nursing-card .tick-list { gap: var(--space-2xs); }   /* tighter than the 15px default (owner, 2026-09-27) */
.nursing-card .tick-list li { font-weight: var(--weight-700); }
@media (max-width: 68rem) {
    .nursing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nursing-card { grid-column: 1 / -1; }
    .nursing-card .tick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-l); }
}
@media (max-width: 40rem) {
    .nursing { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
    .nursing-card { padding: var(--space-l); }
    .nursing-card .tick-list { grid-template-columns: minmax(0, 1fr); }
}

/* The ten service rows: a 553|737 pair reading as one 20px-radius block, the
 * photo a CSS background on its own half, alternating sides. The copy half is
 * MAROON beside a left-hand photo and DARK beside a right-hand one — two
 * different grounds on live, not one. */
.services-head .lede { max-width: 48em; }           /* live: 750px; widened so each lede holds two lines (four in all) at 1280/1440/1920 — owner, 2026-09-27 */
.services-head .lede + .lede { margin-block-start: var(--space-s); }
.services-head .btn { margin-block-start: var(--space-m); }
.service-rows { display: flex; flex-direction: column; gap: var(--space-xl); margin-block-start: var(--space-2xl); }
.service-row { display: grid; grid-template-columns: minmax(0, 553fr) minmax(0, 737fr); align-items: stretch; border-radius: var(--radius-panel); overflow: hidden; }
.service-row--right { grid-template-columns: minmax(0, 737fr) minmax(0, 553fr); }
.service-row__photo { background-size: cover; background-position: center; min-height: 18rem; }
.service-row--right .service-row__photo { order: 2; }
.service-row__copy {
    background: var(--secondary);
    color: var(--on-secondary);
    padding: var(--space-3xl) var(--space-2xl);      /* live: 120px 80px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-s);
    min-width: 0;
}
.service-row--right .service-row__copy { order: 1; background: var(--tertiary); }
.service-row__copy > * { margin-block: 0; }
.service-row__copy .icon { width: var(--icon-box); height: var(--icon-box); color: var(--bg); margin-block-end: var(--space-xs); }
.service-row__copy .card-title { color: var(--bg); }
.service-row__copy p, .service-row__copy li { color: var(--on-secondary); max-width: 65ch; }
.service-row__list { margin: 0; padding-inline-start: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); }
/* `display: flex` on the <ul> turns each <li> into a flex item, which drops its
 * list marker — so the list rendered as four indented lines with no bullets. */
.service-row__list li { display: list-item; list-style: disc; }
.service-row__list li::marker { color: var(--bg); }
@media (max-width: 62rem) {
    .service-row,
    .service-row--right { grid-template-columns: minmax(0, 1fr); }
    .service-row__photo,
    .service-row--right .service-row__photo { order: 1; aspect-ratio: 16 / 9; min-height: 0; }
    .service-row__copy,
    .service-row--right .service-row__copy { order: 2; padding: var(--space-xl) var(--space-l); }
}


/* --- /doctors-and-staff -------------------------------------------------- */

/* One white card per practitioner: 20px radius, 50px padding, 80px apart.
 * A 100px round portrait, the name in rust Roca, the role in plain copy, a
 * rust rule, then the biography a step up from body size (live: 18.6px). */
.doctors { display: flex; flex-direction: column; gap: var(--space-2xl); }
.doctor {
    background: var(--surface);
    border-radius: var(--radius-panel);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    min-width: 0;
    color: var(--tertiary);
}
.doctor > * { margin-block: 0; }
.doctor__avatar { width: 6.25rem; height: 6.25rem; border-radius: var(--radius-round); object-fit: cover; margin-block-end: var(--space-xs); }
.doctor__name {
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-2);
    color: var(--primary);
    line-height: var(--leading-s);
}
.doctor__role {
    margin-block-start: calc(var(--space-s) * -1 + var(--space-3xs));
    padding-block-end: var(--space-m);
    margin-block-end: var(--space-xs);
    border-block-end: var(--border-thin) solid var(--primary);
    font-weight: var(--weight-400);
}
.doctor p:not(.doctor__role) { font-size: var(--step-1); line-height: var(--leading-l); max-width: 90ch; }
@media (max-width: 40rem) { .doctor { padding: var(--space-l); } }

/* Our staff: a scrimmed photo band. Head row: heading with its
 * description under it (owner, 2026-09-27 — live puts the lede in a middle
 * column), CTA at the right. Then a ruled list: name at the left, role at the
 * far right. */
.staff-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xl);
    align-items: end;
    margin-block-end: var(--space-2xl);
}
.staff-head > * { margin-block: 0; min-width: 0; }
.staff-head .copy { gap: var(--space-s); }
.staff-head .display { color: var(--bg); }
.staff-head p { color: var(--on-tertiary); max-width: 80ch; }   /* three lines at 1440 */
/* The practice nurse keeps the doctors' white card, above the ruled list. */
.staff__nurse { margin-block-end: var(--space-2xl); }
.staff { list-style: none; margin: 0; padding: 0; border-block-start: var(--border-thin) solid color-mix(in srgb, var(--staff-rule) 60%, transparent); }
.staff__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-m);
    padding-block: var(--space-m);        /* live: 30px */
    border-block-end: var(--border-thin) solid color-mix(in srgb, var(--staff-rule) 60%, transparent);
}
.staff__row > * { margin-block: 0; }
.staff__name { font-family: 'Raleway', system-ui, sans-serif; color: var(--on-tertiary); font-size: var(--step-2); font-weight: var(--weight-700); }
.staff__role { color: var(--bg); font-size: var(--step-1); text-align: end; }
@media (max-width: 62rem) {
    .staff-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); justify-items: start; }
}
@media (max-width: 30rem) {
    .staff__row { flex-direction: column; align-items: flex-start; gap: var(--space-3xs); }
    .staff__role { text-align: start; }
}


/* --- /appointment -------------------------------------------------------- */

.hours-mini { margin: 0; display: flex; flex-direction: column; gap: var(--space-3xs); color: var(--tertiary); }
.hours-mini > div { display: flex; gap: var(--space-2xs); }
.hours-mini dt { font-weight: var(--weight-500); }
.hours-mini dd { margin: 0; }

/* The four booking guidelines: alternating copy/photo rows on the cream, held
 * to a 1130px measure inside the shell. Photos carry the offset frames —
 * maroon down-right when the photo is at the right, rust down-left at the
 * left. Not cards. */
.guide-rows { display: flex; flex-direction: column; gap: var(--space-3xl); margin-block-start: var(--space-2xl); }
.guide-head::after {
    content: '';
    display: block;
    width: 18.75rem;
    max-width: 60%;
    border-block-end: var(--border-thin) solid var(--primary);
    margin: var(--space-m) auto 0;
}
.guide-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; padding-inline: var(--space-2xl); }
.guide-row > * { min-width: 0; }
.guide-row__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); display: block; box-shadow: 20px 20px 0 0 var(--secondary); }
.guide-row--photo-left .guide-row__photo { box-shadow: -20px 20px 0 0 var(--primary); }
.guide-row .copy { gap: var(--space-s); color: var(--tertiary); }
.guide-row .card-title { color: var(--primary); margin-block-end: var(--space-2xs); }
.guide-row ul { margin: 0; padding-inline-start: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); }
.guide-row .btn { margin-block-start: var(--space-s); }
@media (max-width: 68rem) { .guide-row { padding-inline: 0; gap: var(--space-2xl); } }
@media (max-width: 62rem) {
    .guide-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
    .guide-row__photo { order: -1; max-width: 36rem; margin-inline: auto; }
}

/* New patients: a scrimmed band, split head, three cream step cards. Each card
 * is a maroon numbered disc, a rust title, the copy, and a photo at the foot. */
.newpatient-head .copy { align-items: flex-start; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
.step {
    background: var(--bg);
    border-radius: var(--radius-panel);
    padding: var(--space-xl);              /* live: 50px */
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    min-width: 0;
    color: var(--tertiary);
}
.step > * { margin-block: 0; }
.step__num {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-round);
    background: var(--secondary);
    color: var(--on-secondary);
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-2);
    margin-block-end: var(--space-s);
}
.step .card-title { color: var(--primary); }
.step ul { margin: 0; padding-inline-start: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); }
.step__photo { width: 100%; aspect-ratio: 310 / 194; object-fit: cover; border-radius: var(--radius-panel); display: block; margin-block-start: auto; }
.step ul + .step__photo, .step p + .step__photo { padding-block-start: 0; }
.step > :nth-last-child(2) { margin-block-end: var(--space-s); }
@media (max-width: 68rem) { .steps { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; } }
@media (max-width: 40rem) { .step { padding: var(--space-l); } }

/* --- /patient-hub and /health-info --------------------------------------- */

/* Both mount the Connect bundle, which renders EMPTY until a connect_token
 * exists in /etc/mf-sites/annie-lim.json. Expected before cutover — the min
 * height stops the band collapsing to nothing in the meantime. */
#mediflare-yourhealth-hub { min-height: 12.5rem; }

/* --- /privacy-policy and /terms-and-conditions ---------------------------
 * Live (measured 2026-09-27 at 1440): a full-bleed photo banner 900px tall,
 * then a maroon-to-rust gradient ground (live's 232deg brand gradient, here
 * top-to-bottom as live sets it on this page) carrying a cream card the width
 * of the shell, 20px radius, 100px padding, riding 270px up over the photo and
 * with 120px of ground beneath it. The title is Roca in rust at --step-8; the
 * section headings are Roca in ink at 2.5x and 2x the body size (41.25 / 33px
 * on live), here --step-6 and --step-5 (40.2 / 34.7 at 1440).
 * The banner height and the overlap are shares of the viewport so the
 * composition holds on a phone (390: 244px banner, 73px overlap). */
.legal-hero {
    height: min(62.5vw, 56.25rem);             /* live: 900px at 1440 */
    background-size: cover;
    background-position: center;
}
.legal-body {
    --overlap-legal: min(18.75vw, 16.875rem);   /* live: 270px at 1440; geometry, a share of the banner */
    background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
    padding-block: 0 var(--space-3xl);          /* live: 120px under the card */
    /* flow-root makes this section a formatting-context root, so the card's
     * negative top margin cannot collapse through .u-container and pull the
     * WHOLE section — gradient and all — up over the photo. Without it the
     * brown ground rose with the card and the overlap was invisible: photo,
     * card top and brown all met on one line (owner, 2026-09-28). */
    display: flow-root;
}
.legal-card {
    position: relative;
    /* Narrower than the shell so it floats between the photo and the ground
     * rather than running edge to edge (owner, 2026-09-27): 1200px, centred,
     * with a soft shadow to lift it. Live's is the full 1290 shell. */
    max-width: var(--shell-narrow);
    margin-inline: auto;
    margin-block-start: calc(var(--overlap-legal) * -1);
    background: var(--bg);
    border-radius: var(--radius-panel);
    padding: var(--space-2xl-3xl);              /* live: 100px */
    color: var(--ink);
    box-shadow: var(--shadow-m);
    z-index: var(--layer-base);                 /* above the photo and the ground */
}
.legal-card > :first-child { margin-block-start: 0; }
.legal-card > :last-child { margin-block-end: 0; }
.legal-card h1 {
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-8);
    line-height: var(--leading-xs);
    color: var(--primary);
    margin-block: 0 var(--space-s);
}
.legal-card h2,
.legal-card h3 {
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    color: var(--primary);                         /* owner, 2026-09-28: same ochre as the title (live: ink) */
    line-height: var(--leading-s);
    margin-block: var(--space-m) var(--space-2xs);
}
.legal-card h2 { font-size: var(--step-6); }   /* live: 41.25px */
.legal-card h3 { font-size: var(--step-5); }   /* live: 33px */
.legal-card .lede { font-size: var(--step-0); color: var(--ink); }
.legal-card p, .legal-card li { max-width: 80ch; }
.legal-card a { color: var(--primary); }
@media (max-width: 62rem) {
    .legal-card { padding: var(--space-xl) var(--space-l); }
}
@media (max-width: 40rem) {
    .legal-card { padding: var(--space-l) var(--space-m); }
    .legal-body { padding-block-end: var(--space-2xl); }
}

/* ── Doctor bios and Rails hours (data pass, 2026-10-03) ─────────────────
 * Bios arrive from Rails as PLAIN TEXT, paragraphs split by a blank line, so
 * the one element that holds them preserves line breaks. A doctor with no bio
 * (Crocker) leaves it empty, and the card's flex gap must not count it. */
.doctor__bio { white-space: pre-line; }
.doctor__bio:empty { display: none; }

/* The opening_hours_html tag is a two-column table whose day groupings Rails
 * computes (Mon–Fri, Sat, Sun ...). Strip the template's data-table look; each
 * spot below then fits it to its own layout. */
.hours-table { width: auto; margin: 0; }
.hours-table td { padding: 0; border: 0; text-align: start; }
.hours-table td:first-child { padding-inline-end: var(--space-2xs); }
.hours-table tr + tr td { padding-block-start: var(--space-3xs); }

/* Utility bar: one line, rows run inline and are split by a centred dot. */
.utility__item--hours .hours-table,
.utility__item--hours .hours-table tbody,
.utility__item--hours .hours-table tr,
.utility__item--hours .hours-table td { display: inline; }
.utility__item--hours .hours-table tr + tr td { padding-block-start: 0; }
.utility__item--hours .hours-table tr + tr::before { content: "\00B7"; padding-inline: var(--space-2xs); }
/* A day group never breaks inside itself ("Sat, / Sun Closed" at 1040 did). */
.utility__item--hours .hours-table tr { white-space: nowrap; }
/* Below the header switch the table goes back to being a table: one row per
 * day group, stacked. (Below 62rem the bar's columns are content-sized and
 * nowrap, and the one-line form ran off a 680px screen; from 62rem to the
 * switch the one-line form fitted only by breaking mid-group, so the stacked
 * form runs to 68.75rem since 2026-10-05.) */
@media (max-width: 68.75rem) {
    .utility__item--hours .hours-table { display: table; }
    .utility__item--hours .hours-table tbody { display: table-row-group; }
    .utility__item--hours .hours-table tr { display: table-row; }
    .utility__item--hours .hours-table td { display: table-cell; }
    .utility__item--hours .hours-table tr + tr::before { content: none; }
}

/* Footer: centred under its heading, in the footer's hours type. */
.footer-hours .hours-table {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: var(--weight-500);
    font-size: var(--step-0);
}

/* Appointment hero: the day column takes the weight the old <dt> had. */
.hours-mini .hours-table td:first-child { font-weight: var(--weight-500); }

/* =========================================================================
 * NARROW-SCREEN OVERRIDES THAT MUST COME LAST
 * These restate properties set by the page sections above. At equal
 * specificity the later rule wins, so they live at the end of the file rather
 * than beside the components they adjust — placed earlier, they silently lose.
 * ========================================================================= */
/* The offset frames on the in-flow photos get the same easing as the collage
 * ones. At full size a 20px frame on a phone ran out to the edge of the screen,
 * because the page gutter there is only 16-20px (seen on /appointment and
 * /practice-policies at 390). */
@media (max-width: 40rem) {
    .guide-row__photo { box-shadow: 12px 12px 0 0 var(--secondary); }
    .guide-row--photo-left .guide-row__photo { box-shadow: -12px 12px 0 0 var(--primary); }
    .policy-photo--square { box-shadow: -12px 12px 0 0 var(--secondary); }
    .policy-photo--tall { box-shadow: 12px 12px 0 0 var(--primary); }
    .practice__photo { box-shadow: -12px -12px 0 0 var(--secondary); }
}
/* Small laptops: the half-width column cannot hold two columns of ticks without
 * wrapping the long labels (seen at 1280 and 1100), so they run as one tidy
 * column there. Below 62rem the band stacks, the list gets the full width, and
 * two columns fit again. */
@media (min-width: 62.0625rem) and (max-width: 84rem) {
    .care__detail .tick-list--2col { grid-template-columns: minmax(0, 1fr); }
}

/* Copy before photo wherever a band stacks (owner, 2026-09-27). Every
 * two-column pair that puts its photograph first in source order — heroes,
 * the Practice band, the closing CTA card, the philosophy and policy rows,
 * the "Committed to Your Future" mosaic, every services and guideline row —
 * reorders so a phone reads the words before it sees the picture. `order`
 * only has an effect once the grid is a single column, so nothing moves at
 * desktop widths. Two of the earlier narrow rules (policy-row--top and
 * service-row--right) deliberately put the photo FIRST; these outrank them
 * by source order. */
@media (max-width: 62rem) {
    .hero__inner > .hero__copy { order: 1; }
    .hero__inner > .hero__collage,
    .hero__inner > .collage,
    .hero__inner > .services-collage,
    .hero__inner > .contact-media { order: 2; }
    .practice__inner > .practice__copy { order: 1; }
    .practice__inner > .practice__media { order: 2; }
    .cta__inner > .cta__copy { order: 1; }
    .cta__inner > .cta__photo { order: 2; }
    .cols-2 > .copy, .cols-2 > .policy-list { order: 1; }
    .cols-2 > .collage, .cols-2 > .policy-photo,
    .policy-row--top .policy-photo { order: 2; }
    .future > .future__card { order: 1; }
    .future > .future__photo { order: 2; }
    .service-row .service-row__copy,
    .service-row--right .service-row__copy { order: 1; }
    .service-row .service-row__photo,
    .service-row--right .service-row__photo { order: 2; }
    .guide-row > .copy { order: 1; }
    .guide-row > .guide-row__photo { order: 2; }
}
/* The homepage services checkerboard: once it is one column, each tile/card
 * pair reads card first. */
@media (max-width: 40rem) {
    .services-col > .svc-card { order: 1; }
    .services-col > .svc-tile { order: 2; }
}

/* Phone masthead (owner, 2026-09-27): the logo centred on its own line at
 * desktop size (151x100, was 113x75), then the burger and the CTA side by
 * side, centred, at their existing sizes. The earlier 30rem rule that sent
 * the CTA to a full-width row of its own is undone here. */
@media (max-width: 40rem) {
    .masthead__inner { flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-s); }
    .masthead__logo { flex: 0 0 100%; justify-content: center; order: 1; }
    .masthead__logo img { width: 151px; height: 100px; }
    .nav { order: 2; flex: none; margin-inline-start: 0; justify-content: center; gap: var(--space-s); }
    .masthead .btn--book { order: 0; width: auto; }
    .nav__list { top: calc(100% + 0.25rem); }
}
/* Wherever the burger shows it sits on a dark-brown tile (owner, 2026-09-27). */
@media (max-width: 68.75rem) {
    .nav__burger { background: var(--tertiary); color: var(--bg); border-radius: var(--radius-card); }
    .nav__burger:hover, .nav__burger[aria-expanded="true"] { background: var(--secondary); }
}

/* =========================================================================
 * SITE SEARCH (2026-10-05)
 *
 * mediflare.js writes the search box wherever the markup asks for one, as
 * plain HTML with mf-search__* class hooks and no styling; every rule here is
 * this site's, on its tokens. Two placements, swapping at the burger's own
 * breakpoint (68.75rem / 68.8125rem), so no width shows both or neither:
 *
 *   desktop  .site-search: a magnifier in the maroon utility bar, beside the
 *            phone number, opening a cream panel. The masthead has no room:
 *            its nav only fits from 1100 with the links a step tighter.
 *   phones   .site-search__open: a tile like the burger's, opening the
 *            full-screen overlay. Beside the burger on a tablet; on the logo's
 *            row at 40rem and below, where the burger and Book Appointment
 *            already fill their row at 320.
 *
 * The search field IS a contact-form field: its look is the --field-*
 * tokens (Form controls), never a rule here.
 * Search and Close are .btn--book and its reverse — see those rules.
 *
 * Style the overlay, the popup and the results ONLY through :not([hidden]).
 * Giving them a display of their own overrides the browser's
 * [hidden] { display: none } and they never close.
 * ========================================================================= */

/* The box, wherever it sits. */
.mf-search__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xs);
    align-items: center;
}
.mf-search__status,
.mf-search__results { grid-column: 1 / -1; }
.mf-search__input { grid-column: 1 / -1; }
[data-mf-search-submit] .mf-search__input { grid-column: auto; }

/* Read out, not shown: the magnifier and the placeholder say what it is. */
.mf-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

.mf-search__results { margin: 0; padding: 0; list-style: none; }
.mf-search__results:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}
/* Two classes deep: the panel sits in the utility bar, whose `.utility a`
 * rules would otherwise make every result white and inline-block. */
.mf-search__results .mf-search__link {
    display: block;
    padding: var(--space-2xs) var(--space-xs);
    color: var(--ink);
    text-decoration: none;
    overflow-wrap: anywhere;
    border-radius: var(--radius-card);
    transition: background var(--duration-fast) var(--ease-out);
}
.mf-search__results .mf-search__link:hover,
.mf-search__results .mf-search__link:focus-visible {
    color: var(--ink);
    text-decoration: none;
    background: var(--primary-pale);
}
/* Inside a scrolling list an outset ring is clipped, so it sits inset. */
.mf-search__results .mf-search__link:focus-visible { outline-offset: calc(var(--border-medium) * -1); }

/* Titles in the site's heading face and colour; matches in a rust tint. */
.mf-search__title {
    display: block;
    font-family: 'Roca', Georgia, serif;
    font-weight: var(--weight-700);
    font-size: var(--step-1);
    line-height: var(--leading-s);
    color: var(--secondary);
}
.mf-search__excerpt {
    display: block;
    margin-block-start: var(--space-3xs);
    font-size: var(--step--1);
    line-height: var(--leading-m);
    color: var(--ink);
}
.mf-search__excerpt mark {
    color: var(--tertiary);
    background: color-mix(in oklab, var(--primary) 20%, transparent);
    border-radius: var(--radius-xs);
}

/* --- Desktop: the magnifier in the utility bar, and its panel ------------ */
.site-search { display: none; position: relative; }
@media (min-width: 68.8125rem) {
    .site-search { display: block; }
}

.site-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    list-style: none;
    color: var(--bg);                   /* the bar's cream icons */
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
}
.site-search__toggle::-webkit-details-marker { display: none; }
.utility .site-search__toggle svg { width: 1.25em; height: 1.25em; fill: none; }
.site-search__toggle:hover,
.site-search[open] > .site-search__toggle { background: color-mix(in oklab, var(--bg) 18%, transparent); }
/* Inset: the toggle is the bar's full height, so an outset ring would spill
 * onto the cream masthead below and vanish there. The cream ring comes from
 * the utility bar's --focus-ring override. */
.site-search__toggle:focus-visible {
    outline-offset: calc(var(--border-medium) * -1);
}

.site-search__panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2xs));
    inset-inline-end: 0;
    z-index: var(--layer-overlay);
    inline-size: min(var(--measure-tight), calc(100vw - 2 * var(--grid-gutter)));
    padding: var(--space-s);
    font-size: var(--step-0);
    color: var(--ink);
    white-space: normal;
    background: var(--bg);
    border: var(--border-thin) solid color-mix(in oklab, var(--secondary) 15%, transparent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-m);
}
.site-search__panel .mf-search__form { row-gap: var(--space-xs); }
.site-search__panel .mf-search__results:not([hidden]) {
    max-block-size: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --- Phones and tablets: the overlay trigger ----------------------------- */
/* The burger's dark-brown tile (owner, 2026-09-27), so the two read as a pair. */
.site-search__open {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    color: var(--bg);
    background: var(--tertiary);
    border-radius: var(--radius-card);
    transition: background var(--duration-fast) var(--ease-out);
}
.site-search__open svg { width: 1.5rem; height: 1.5rem; }
.site-search__open:hover,
.site-search__open[aria-expanded="true"] { background: var(--secondary); }

@media (max-width: 68.75rem) {
    .site-search__open { display: inline-flex; margin-inline-start: auto; }
}
/* On a phone the logo has its row to itself, centred; the trigger joins the
 * burger and Book Appointment in the row below it, first in that row, on the
 * same --space-s gap as the burger and Book (owner, 2026-10-06). The three
 * fit from 361px; at 22.5rem and below Book Appointment reads "Book", its
 * aria-label keeping the full name. */
@media (max-width: 40rem) {
    .site-search__open { order: 2; margin: 0; }
}
@media (max-width: 22.5rem) {
    .masthead .btn--book__more { display: none; }
}

/* --- The overlay: full screen on the cream ground ------------------------ */
/* Close on its own row at the top right (before the box, as the focus order
 * runs), then the field and Search, the status, and the results scrolling
 * in the space left. Subgrid puts the box's own children on this grid. */
.mf-search-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: var(--layer-modal);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: var(--space-s) var(--space-2xs);
    padding-block-start: max(var(--space-s), env(safe-area-inset-top));
    padding-inline: max(var(--grid-gutter), env(safe-area-inset-left)) max(var(--grid-gutter), env(safe-area-inset-right));
    background: var(--bg);
}
.mf-search-overlay__header {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
}
.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;
    align-items: stretch;   /* the field and Search share one height */
}
.mf-search--overlay { grid-row: 2 / -1; }   /* below Close's row */
.mf-search--overlay .mf-search__input { grid-column: 1; grid-row: 1; }
.mf-search--overlay .mf-search__submit { grid-column: 2; 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;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: max(var(--space-s), env(safe-area-inset-bottom));
}

/* Doctor photos come from the app (photo_url, #301), inside a .doctor-avatar box
 * that shows the fallback for a doctor without one. The box keeps the photo's own
 * size and shape, which .doctor-avatar would otherwise set. */
.doctor__avatar.doctor-avatar, .person__photo.doctor-avatar { aspect-ratio: auto; border-radius: var(--radius-round); display: flex; }
/* The fallback's gradient is for a doctor with no photo: under a photo it shows as
 * a hairline ring at the anti-aliased edge, so a box holding a photo has none. */
.doctor-avatar:has(img) { background: none; }
/* The card's own photo background is a pale placeholder; with no photo the box shows
 * the fallback's primary gradient, which the white person icon needs. */
.person__photo.doctor-avatar:not(:has(img)) { background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 85%, black), var(--primary)); }