/* ============================================================
   Hamlet Podiatry — Stagg Studio
   Typography: Inter Variable (no curls, older-reader friendly)
   Palette: Warm cream + deep forest green (from Michele's brand)
   Style: Premium, restrained, village-quiet
   ============================================================ */

/* ===== Fonts ===== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-roman.var.woff2') format('woff2');
}

/* Metric-adjusted fallback to eliminate CLS on font swap */
@font-face {
    font-family: 'Inter Fallback';
    font-style: normal;
    font-weight: 100 900;
    src: local('Arial');
    size-adjust: 107.1%;
    ascent-override: 90%;
    descent-override: 22.4%;
    line-gap-override: 0%;
}

/* ===== Tokens ===== */
:root {
    /* Typography */
    --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    /* Colour — warm cream base */
    --bg: #F5F1E8;
    --bg-deep: #EBE3D2;
    --bg-darker: #E4DBC6;
    --cream: #FAF6EC;
    --cream-bright: #FDFBF5;

    /* Ink */
    --ink: #1A1F1D;
    --ink-soft: #3E4643;
    --ink-muted: #6B7671;
    --ink-faint: #9AA29D;

    /* Green — Michele wanted lighter & more optimistic. Big shift: -900 now alive teal, not forest. */
    --green-900: #2F7A68;
    --green-800: #1F6B5C;
    --green-700: #267163;
    --green-600: #3D8B7A;
    --green-500: #5AA292;
    --green-300: #A7C7B9;
    --green-100: #E1ECE4;

    /* Structure */
    --rule: #D4CBB8;
    --rule-soft: #E0D8C6;
    --shadow-sm: 0 1px 2px rgba(47, 122, 104, 0.04);
    --shadow-md: 0 8px 24px -8px rgba(47, 122, 104, 0.12);
    --shadow-lg: 0 24px 48px -12px rgba(47, 122, 104, 0.18);

    /* Spacing — 8px grid */
    --sp-1: 0.5rem;    /* 8 */
    --sp-2: 1rem;      /* 16 */
    --sp-3: 1.5rem;    /* 24 */
    --sp-4: 2rem;      /* 32 */
    --sp-6: 3rem;      /* 48 */
    --sp-8: 4rem;      /* 64 */
    --sp-12: 6rem;     /* 96 */
    --sp-16: 8rem;     /* 128 */

    /* Section padding — fluid */
    --section-y: clamp(4rem, 10vw, 9rem);
    --section-x: clamp(1.5rem, 5vw, 3rem);

    /* Radii */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;
    --r-full: 9999px;

    /* Easing */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

    /* Duration */
    --t-fast: 180ms;
    --t-med: 320ms;
    --t-slow: 560ms;

    /* Z */
    --z-nav: 100;
    --z-sticky: 90;
    --z-overlay: 200;

    /* Container */
    --max: 1320px;
}

/* ===== Reset ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 768px) {
    html { scroll-behavior: smooth; scroll-padding-top: 88px; }
}

body {
    font-family: var(--font);
    font-size: 1.125rem;       /* 18px — generous for older reader */
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--green-700);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Hero sits on dark image — need cream focus ring for contrast */
.hero :focus-visible,
.nav:not(.is-scrolled) :focus-visible,
.book :focus-visible,
.foot :focus-visible,
.mob-cta :focus-visible {
    outline-color: var(--cream-bright);
}

/* Skip link */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--green-800);
    color: var(--cream);
    padding: var(--sp-2) var(--sp-3);
    z-index: 300;
    border-radius: 0 0 var(--r-md) 0;
}
.skip:focus {
    left: 0;
}

/* ===== Typography ===== */
h1, h2, h3, h4 {
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--ink);
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 5.25rem); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
h4 { font-size: 1.25rem; letter-spacing: -0.015em; }

p { max-width: 62ch; }

.eyebrow {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green-700);
    display: inline-block;
}

.lede {
    font-size: clamp(1.125rem, 1.4vw, 1.35rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 58ch;
}

/* ===== Layout ===== */
.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--section-x);
}

section {
    position: relative;
}

/* Paint containment on static sections → fewer repaints during scroll.
   Hero is excluded — its 100dvh + absolutely-positioned media are happier uncontained. */
.about, .treatments, .reviews, .pricing, .visit, .book {
    contain: paint;
}

/* ===== Grain overlay (subtle, GPU-light, tiny SVG tiled) ===== */
.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    mix-blend-mode: multiply;
    transform: translateZ(0);   /* own layer, paints once */
    contain: strict;
}

/* Hide grain on touch devices — it's decorative, saves a composited layer on mobile */
@media (pointer: coarse) {
    .grain { display: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    padding: var(--sp-3) 0;
    transition: padding var(--t-med) var(--ease-out);
    isolation: isolate;
}

/* Compositor-safe nav background: opacity on a pseudo-element, not on background */
.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(245, 241, 232, 0.88);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--rule-soft);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease-out);
    pointer-events: none;
}

.nav.is-scrolled {
    padding: var(--sp-2) 0;
}
.nav.is-scrolled::before {
    opacity: 1;
}

/* Progressive enhancement: CSS scroll-timeline nav solidify (no main-thread cost) */
@supports (animation-timeline: scroll()) {
    .nav::before {
        animation: navSolid linear both;
        animation-timeline: scroll(root);
        animation-range: 0 80px;
        transition: none;
    }
    .nav {
        animation: navPad linear both;
        animation-timeline: scroll(root);
        animation-range: 0 80px;
        transition: none;
    }
    @keyframes navSolid { to { opacity: 1; } }
    @keyframes navPad { to { padding-block: var(--sp-2); } }
}

.nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--cream);
    transition: color var(--t-med);
    white-space: nowrap;
    min-width: 0;
    line-height: 1;
}
.nav__brand-name {
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.nav.is-scrolled .nav__brand {
    color: var(--ink);
}

.nav__brand-mark {
    color: rgba(250, 246, 236, 0.55);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-left: 0.625rem;
    border-left: 1px solid rgba(250, 246, 236, 0.2);
    transition: color var(--t-med), border-color var(--t-med);
}
.nav.is-scrolled .nav__brand-mark {
    color: var(--ink-muted);
    border-left-color: var(--rule);
}

.nav__links {
    display: none;
    gap: var(--sp-4);
    list-style: none;
}
.nav__links a {
    font-size: 0.9375rem;
    color: var(--cream);
    font-weight: 400;
    letter-spacing: -0.005em;
    transition: color var(--t-fast), opacity var(--t-fast);
    opacity: 0.85;
}
.nav__links a:hover { opacity: 1; }
.nav.is-scrolled .nav__links a { color: var(--ink); opacity: 0.75; }
.nav.is-scrolled .nav__links a:hover { opacity: 1; color: var(--green-700); }

.nav__cta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.nav__phone {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cream);
    letter-spacing: -0.005em;
    display: none;
    transition: color var(--t-fast);
}
.nav.is-scrolled .nav__phone { color: var(--ink); }
.nav__phone:hover { color: var(--green-300); }
.nav.is-scrolled .nav__phone:hover { color: var(--green-700); }

@media (min-width: 720px) {
    .nav__phone { display: inline-flex; }
}
@media (min-width: 900px) {
    .nav__links { display: flex; }
}

/* ===== Buttons ===== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 0.95rem 1.5rem;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    transition: color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                transform 160ms var(--ease-out);
    min-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 460ms var(--ease-spring);
    will-change: transform;
}

.btn:hover::before { transform: scaleX(1); }

.btn:active { transform: scale(0.97); }

.btn--primary {
    background: var(--green-800);
    color: var(--cream-bright);
    border-color: var(--green-800);
}
.btn--primary::before { background: var(--green-900); }
.btn--primary:hover { border-color: var(--green-900); }

.btn--ghost {
    background: transparent;
    color: var(--cream);
    border-color: rgba(250, 246, 236, 0.32);
}
.btn--ghost::before { background: rgba(250, 246, 236, 0.12); }
.btn--ghost:hover { border-color: rgba(250, 246, 236, 0.6); }

.btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn--outline::before { background: var(--ink); }
.btn--outline:hover { color: var(--cream); }

.btn--arrow::after {
    content: '→';
    font-weight: 400;
    transition: transform var(--t-fast) var(--ease-out);
}
.btn--arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    color: var(--cream);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
    /* Slight premium blur to push image back and foreground text */
    filter: blur(3px);
    transform: scale(1.06) translate3d(0,0,0);
}

@media (min-width: 768px) {
    .hero__media img { object-position: center 48%; }
}

/* Gradient overlay: stronger at text positions to guarantee 4.5:1 AA contrast */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 85% 65% at 50% 50%,
            rgba(47, 122, 104, 0.5) 0%,
            rgba(47, 122, 104, 0.68) 55%,
            rgba(47, 122, 104, 0.82) 100%),
        linear-gradient(to bottom,
            rgba(47, 122, 104, 0.45) 0%,
            rgba(47, 122, 104, 0.32) 30%,
            rgba(47, 122, 104, 0.42) 62%,
            rgba(47, 122, 104, 0.78) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding-top: clamp(6rem, 10vh, 9rem);
    padding-bottom: clamp(4rem, 8vh, 6rem);
    text-align: center;
}

.hero__content {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 var(--sp-2);
}

.hero__eyebrow {
    color: var(--green-300);
    margin-bottom: var(--sp-3);
    display: inline-block;
}

/* Premium staggered hero entrance — editorial cascade */
@media (prefers-reduced-motion: no-preference) {
    .js .hero__eyebrow,
    .js .hero__title,
    .js .hero__sub,
    .js .hero__actions {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        animation: heroRise 760ms var(--ease-spring) forwards;
        will-change: opacity, transform;
    }
    .js .hero__eyebrow { animation-delay: 80ms; }
    .js .hero__title   { animation-delay: 180ms; }
    .js .hero__sub     { animation-delay: 320ms; }
    .js .hero__actions { animation-delay: 460ms; }
}
@keyframes heroRise {
    to { opacity: 1; transform: none; }
}

.hero__title {
    font-size: clamp(2.5rem, 5.8vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 500;
    color: var(--cream-bright);
    margin-bottom: var(--sp-4);
    text-wrap: balance;
}

.hero__title-accent {
    color: var(--green-300);
}

.hero__sub {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: rgba(250, 246, 236, 0.9);
    max-width: 40rem;
    margin: 0 auto var(--sp-5, 2.5rem);
    font-weight: 400;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    align-items: center;
    justify-content: center;
}

.hero__primary {
    background: var(--cream-bright);
    color: var(--green-900);
    border-color: var(--cream-bright);
    font-weight: 500;
    padding: 1.125rem 1.75rem;
}
.hero__primary:hover {
    background: var(--green-100);
    border-color: var(--green-100);
}

.hero__phone-link {
    color: var(--cream);
    font-weight: 500;
    padding: 1rem 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--t-fast);
}
.hero__phone-link::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-300);
    box-shadow: 0 0 0 4px rgba(167, 199, 185, 0.2);
    margin-right: 0.25rem;
}
.hero__phone-link:hover { color: var(--green-300); }

/* ============================================================
   CREDENTIALS STRIP — dark green, extends the hero as trust seal
   ============================================================ */
.creds {
    background: var(--green-900);
    color: var(--cream);
    border-bottom: 1px solid rgba(167, 199, 185, 0.12);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.creds::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(47, 122, 104, 0.28), transparent 65%);
    pointer-events: none;
}
.creds__list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: start;
}
.creds__item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: var(--sp-2);
    border-right: 1px solid transparent;
}
.creds__label {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-300);
    line-height: 1;
}
.creds__value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cream-bright);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
@media (min-width: 760px) {
    .creds__list {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(1.5rem, 3vw, 3rem);
    }
    .creds__item {
        padding-right: 0;
    }
    .creds__item:not(:last-child) {
        border-right-color: rgba(167, 199, 185, 0.2);
    }
}

/* ============================================================
   ABOUT — Michele (side-by-side)
   ============================================================ */
.about {
    padding: var(--section-y) 0;
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

.about__text {
    max-width: 36rem;
}

.about__eyebrow { margin-bottom: var(--sp-2); }

.about__title {
    margin-bottom: var(--sp-4);
    text-wrap: balance;
}

.about__body p {
    color: var(--ink-soft);
    margin-bottom: var(--sp-3);
    font-size: 1.0625rem;
}
.about__body p:last-child { margin-bottom: 0; }

.about__facts {
    margin-top: var(--sp-5, 2.5rem);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
    display: grid;
    gap: var(--sp-3);
}
.about__fact {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--sp-3);
    align-items: baseline;
}
.about__fact dt {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 500;
}
.about__fact dd {
    font-size: 0.9375rem;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.4;
    margin: 0;
}

/* Editorial pull-quote — clean, no decorative dashes */
.about__quote {
    position: relative;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    border-radius: 14px;
    background: var(--green-900);
    color: var(--cream-bright);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: -0.022em;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}
.about__quote::before {
    content: '';
    position: absolute;
    top: clamp(1.5rem, 3vw, 2.25rem);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(2rem, 3.5vw, 2.75rem);
    height: 2px;
    background: var(--green-300);
    opacity: 0.55;
    pointer-events: none;
}
.about__quote::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 90% 70% at 50% 0%, rgba(47, 122, 104, 0.38), transparent 65%),
        radial-gradient(circle at 50% 120%, rgba(167, 199, 185, 0.10), transparent 55%);
    pointer-events: none;
}
.about__quote > * { position: relative; }

.about__quote-text {
    display: block;
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    max-width: 42rem;
    margin: 0 auto;
    text-wrap: pretty;
}

.about__quote-attrib {
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid rgba(167, 199, 185, 0.22);
    max-width: 16rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.75rem;
    color: var(--green-300);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}

.about__portrait {
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--bg-darker);
    box-shadow: var(--shadow-lg);
}
.about__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 35%;
    transition: transform 1200ms var(--ease-out);
}


@media (min-width: 900px) {
    .about__grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(3rem, 7vw, 6rem);
        align-items: start;
    }
    .about__portrait {
        position: sticky;
        top: 96px;
        align-self: start;
    }
}

/* ============================================================
   TREATMENTS
   ============================================================ */
.treatments {
    padding: var(--section-y) 0;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.treatments__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.treatments__head > div { max-width: 46rem; }
.treatments__head .eyebrow { margin-bottom: var(--sp-2); }
.treatments__head h2 { text-wrap: balance; }
.treatments__intro {
    color: var(--ink-soft);
    font-size: 1.0625rem;
    max-width: 44rem;
    margin: 0 auto;
}
.treatments__intro-link {
    display: inline-block;
    margin-left: 0.35rem;
    color: var(--green-800);
    font-weight: 500;
    border-bottom: 1px solid var(--green-300);
    padding-bottom: 1px;
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.treatments__intro-link:hover { color: var(--green-900); border-color: var(--green-700); }

.treatments__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--rule);
}

@media (min-width: 1000px) {
    .treatments__grid { grid-template-columns: 1fr 1fr 1fr; }
    /* 7 service cards + CTA: last row = 1 card + CTA spanning 2, completing the 3-col grid */
    .treatments__grid .treatment--cta { grid-column: span 2; }
}

.treatment {
    background: var(--cream);
    padding: var(--sp-5, 2.25rem) var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    text-decoration: none;
    transition: background var(--t-med) var(--ease-out),
                transform var(--t-med) var(--ease-out);
    min-height: 17rem;
    position: relative;
    isolation: isolate;
    contain: layout paint;
}
.treatment::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--cream-bright), var(--bg));
    opacity: 0;
    transition: opacity var(--t-med) var(--ease-out);
}
.treatment:hover::after { opacity: 1; }
.treatment:hover { transform: translate3d(0, -2px, 0); }
.treatment::after {
    background: linear-gradient(135deg, var(--cream-bright), var(--cream));
}

.treatment__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: var(--sp-2);
}

.treatment__title {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
}

.treatment__price {
    font-size: 0.875rem;
    color: var(--green-700);
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.treatment__desc {
    font-size: 0.9375rem;
    color: var(--ink-muted);
    line-height: 1.55;
    flex: 1;
}

.treatment__link {
    margin-top: auto;
    padding-top: var(--sp-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--green-700);
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: gap var(--t-fast) var(--ease-out);
}
.treatment:hover .treatment__link { gap: 0.6rem; }

/* "Not sure what you need?" card variant — deep green CTA */
.treatment--cta {
    background: var(--green-900);
    color: var(--cream);
}
.treatment--cta::after {
    background: linear-gradient(135deg, var(--green-800), var(--green-900));
}
.treatment--cta .treatment__title { color: var(--cream-bright); }
.treatment--cta .treatment__desc { color: rgba(250, 246, 236, 0.78); }
.treatment--cta .treatment__link { color: var(--green-300); }

/* ============================================================
   REVIEWS — dark green editorial carousel with auto-advance
   ============================================================ */
.reviews {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--green-900);
    color: var(--cream);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Soft radial warmth behind cards to lift the dark green */
.reviews::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(47, 122, 104, 0.45), transparent 65%),
        radial-gradient(circle at 10% 100%, rgba(167, 199, 185, 0.08), transparent 50%);
    pointer-events: none;
}

.reviews__inner { position: relative; }

/* Header row: title left, nav arrows right */
.reviews__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    align-items: end;
    justify-items: center;
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.reviews__eyebrow {
    color: var(--green-300) !important;
    margin-bottom: var(--sp-2);
}
.reviews__title-block h2 {
    color: var(--cream-bright);
    margin-bottom: var(--sp-3);
    text-wrap: balance;
    font-weight: 500;
}

.reviews__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
    color: rgba(250, 246, 236, 0.78);
    font-size: 0.875rem;
    letter-spacing: -0.005em;
}
.reviews__score {
    font-size: 1rem;
    font-weight: 500;
    color: var(--cream-bright);
}
.reviews__stars {
    display: inline-flex;
    gap: 1px;
    line-height: 0;
}
.reviews__stars svg { fill: #F0C04E; filter: drop-shadow(0 0 6px rgba(240, 192, 78, 0.25)); }
.reviews__count {
    padding-left: 0.625rem;
    border-left: 1px solid rgba(167, 199, 185, 0.3);
}

.reviews__head {
    justify-items: center;
    text-align: center;
}

/* The scroll-snap carousel track */
.reviews__track-wrap {
    position: relative;
    margin-inline: calc(var(--section-x) * -1);
}

.reviews__track {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 6px var(--section-x) 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--section-x);
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--section-x),
        #000 calc(100% - var(--section-x)),
        transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--section-x),
        #000 calc(100% - var(--section-x)),
        transparent 100%);
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible {
    outline-offset: -4px;
    border-radius: var(--r-md);
}

/* Individual review card — bright cream on dark green */
.review {
    flex: 0 0 clamp(20rem, 30vw, 24rem);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: var(--cream-bright);
    border: 1px solid rgba(167, 199, 185, 0.2);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    color: var(--ink);
    transition: transform var(--t-med) var(--ease-out),
                box-shadow var(--t-med) var(--ease-out);
    contain: layout paint;
    min-height: 16.5rem;
    position: relative;
}
@media (hover: hover) {
    .review:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35);
    }
}

.review__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--rule-soft);
}

.review__stars {
    display: inline-flex;
    gap: 1px;
    line-height: 0;
}
.review__stars svg { fill: #F0C04E; }

.review__source {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
    background: var(--bg-deep);
    padding: 0.25rem 0.55rem;
    border-radius: var(--r-full);
}

.review__body {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
    font-weight: 400;
    margin: 0;
    flex: 1;
}

.review__foot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule-soft);
}

.review__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--green-800);
    color: var(--cream-bright);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.review__id {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.review__name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.review__date {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    letter-spacing: 0.005em;
}

/* Thin progress bar under track — visualises auto-advance */
.reviews__progress {
    height: 2px;
    background: rgba(167, 199, 185, 0.18);
    margin: 0.25rem var(--section-x) 0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.reviews__progress-fill {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--green-300);
    border-radius: 2px;
    transition: width 120ms linear;
}
.reviews__track-wrap[data-paused="true"] .reviews__progress-fill { background: rgba(167, 199, 185, 0.4); }

.reviews__foot {
    text-align: center;
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
.reviews__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--cream-bright);
    border-bottom: 1px solid rgba(167, 199, 185, 0.45);
    padding-bottom: 2px;
    transition: color var(--t-fast), border-color var(--t-fast), gap var(--t-fast);
}
.reviews__link:hover {
    color: var(--green-300);
    border-color: var(--green-300);
    gap: 0.7rem;
}

/* ============================================================
   PRICING — soft sage tint, quiet premium
   ============================================================ */
.pricing {
    padding: var(--section-y) 0;
    background: var(--green-100);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.pricing__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 4vw, 3.5rem);
}

.pricing__intro {
    max-width: 40rem;
    text-align: center;
}
.pricing__intro .eyebrow { margin-bottom: var(--sp-2); }
.pricing__intro h2 { margin-bottom: var(--sp-3); text-wrap: balance; }
.pricing__intro p {
    color: var(--ink-soft);
    font-size: 1.0625rem;
    margin: 0 auto;
    max-width: 36rem;
}

.pricing__list {
    list-style: none;
    width: 100%;
    max-width: 80rem;
    text-align: left;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(47, 122, 104, 0.18);
    border: 1px solid rgba(47, 122, 104, 0.22);
    border-radius: var(--r-md);
    overflow: hidden;
}
.pricing__row {
    background: var(--green-100);
    position: relative;
}

/* Fee tile — price-forward, editorial, clean */
.pricing__link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.1rem, 2vw, 1.75rem);
    color: inherit;
    min-height: 10rem;
    position: relative;
    transition: background var(--t-med) var(--ease-out);
    height: 100%;
    isolation: isolate;
}
@media (hover: hover) {
    .pricing__link:hover { background: var(--cream-bright); }
    .pricing__link:hover .pricing__arrow { opacity: 1; transform: translateX(0); }
    .pricing__link:hover .pricing__service-title { color: var(--green-900); }
}

/* Price is the hero of the tile */
.pricing__cost {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: 500;
    color: var(--green-900);
    letter-spacing: -0.04em;
    white-space: nowrap;
    font-variant-numeric: lining-nums;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.12em;
}
.pricing__from {
    font-size: 0.42em;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0.25em;
}
.pricing__sym {
    font-size: 0.6em;
    color: var(--green-700);
    margin-right: 0.03em;
    font-weight: 500;
}

/* Service label — smaller now, sits under the price */
.pricing__service {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}
.pricing__service-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
    transition: color var(--t-fast);
}
.pricing__service-note {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    line-height: 1.4;
    display: none; /* Cleaner tile — notes live on the detail page */
}

/* Arrow indicator — subtle, appears on hover */
.pricing__arrow {
    position: absolute;
    top: clamp(1.1rem, 2vw, 1.75rem);
    right: clamp(1.1rem, 2vw, 1.75rem);
    font-size: 1rem;
    color: var(--green-700);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--t-med) var(--ease-out),
                transform var(--t-med) var(--ease-out);
}

/* Visual order: price up top, title below. DOM order preserved for SR context. */
.pricing__top {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(47, 122, 104, 0.12);
    margin-top: auto;
}
.pricing__bottom {
    order: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.pricing__num {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--green-700);
    font-feature-settings: "tnum";
    align-self: flex-start;
}

@media (min-width: 1000px) {
    .pricing__list { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .pricing__service-note { display: block; }
    .pricing__link { min-height: 12rem; }
}

.pricing__foot {
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
    font-size: 0.9375rem;
    color: var(--ink-soft);
    text-align: center;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}
.pricing__foot a {
    display: inline-block;
    color: var(--green-800);
    font-weight: 500;
    border-bottom: 1px solid var(--green-300);
    padding-bottom: 1px;
    margin-left: 0.35rem;
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.pricing__foot a:hover { color: var(--green-900); border-color: var(--green-700); }

/* ============================================================
   VISIT / FIND US
   ============================================================ */
.visit {
    padding: var(--section-y) 0;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.visit__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

.visit__photo {
    aspect-ratio: 4/3;
    width: 100%;
    max-width: 56rem;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-darker);
    box-shadow: var(--shadow-md);
}
.visit__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Map */
.visit__map {
    position: relative;
    aspect-ratio: 16/10;
    width: 100%;
    max-width: 64rem;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-darker);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--rule);
}
.visit__map iframe {
    display: block;
    width: 100%;
    height: 100%;
}
.visit__map-link {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    background: var(--cream-bright);
    color: var(--green-900);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-radius: var(--r-full);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--rule);
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
    text-decoration: none;
}
.visit__map-link:hover {
    background: var(--green-100);
    transform: translateY(-1px);
}

@media (min-width: 700px) {
    .visit__map { aspect-ratio: 16/8; }
}

.visit__details {
    max-width: 56rem;
    width: 100%;
    text-align: center;
}
.visit__details .eyebrow { margin-bottom: var(--sp-2); }
.visit__details h2 { margin-bottom: var(--sp-4); text-wrap: balance; }
.visit__details .lede { margin: 0 auto; }

.visit__blocks {
    display: grid;
    gap: var(--sp-5, 2.5rem);
    width: 100%;
    max-width: 56rem;
    text-align: center;
}

.visit__block {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
}
.visit__block-title {
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 500;
    margin-bottom: var(--sp-2);
}
.visit__block p,
.visit__block a,
.visit__hours li {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.55;
}
.visit__block a {
    color: var(--green-700);
    border-bottom: 1px solid var(--green-300);
    padding-bottom: 1px;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.visit__block a:hover {
    color: var(--green-900);
    border-color: var(--green-700);
}

/* Block modifiers */
.visit__block--center {
    text-align: center;
}
.visit__block--center p {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
}
.visit__block--center p + p { margin-top: 0.35rem; }
.visit__block--hours { text-align: center; }

.visit__hours {
    list-style: none;
    display: grid;
    gap: 0;
    margin: 0 auto;
    max-width: 24rem;
    width: 100%;
}
.visit__hours li {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(47, 122, 104, 0.1);
    text-align: center;
}
.visit__hours li:last-child { border-bottom: 0; }
.visit__hours li:first-child { padding-top: 0; }
.visit__hours li::after {
    content: '';
    /* dot separator between day and time */
    order: 2;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--green-300);
    margin: 0 0.15rem;
    align-self: center;
}
.visit__hours-day {
    font-size: 0.9375rem;
    color: var(--ink);
    letter-spacing: -0.005em;
    font-weight: 500;
    order: 1;
}
.visit__hours-time {
    font-size: 0.9375rem;
    color: var(--green-800);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    order: 3;
}
.visit__hours li.closed .visit__hours-day { color: var(--ink-muted); font-weight: 400; }
.visit__hours li.closed .visit__hours-time { color: var(--ink-faint); font-weight: 400; }
.visit__hours li.closed::after { background: var(--ink-faint); opacity: 0.4; }

@media (min-width: 700px) {
    .visit__blocks { grid-template-columns: repeat(2, 1fr); max-width: 44rem; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1000px) {
    .visit__blocks { grid-template-columns: repeat(4, 1fr); max-width: none; }
}

/* ============================================================
   BOOK CTA
   ============================================================ */
.book {
    padding: var(--section-y) 0;
    background: var(--green-900);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}

.book::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(47, 122, 104, 0.3), transparent 65%);
    pointer-events: none;
}

.book__inner {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

.book .eyebrow {
    color: var(--green-300);
    margin-bottom: var(--sp-3);
}

.book h2 {
    color: var(--cream-bright);
    margin-bottom: var(--sp-4);
    text-wrap: balance;
}

.book p {
    color: rgba(250, 246, 236, 0.85);
    font-size: 1.125rem;
    margin: 0 auto var(--sp-5, 2.5rem);
    max-width: 40rem;
}

.book__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    justify-content: center;
}

.book__primary {
    background: var(--cream-bright);
    color: var(--green-900);
    border-color: var(--cream-bright);
    padding: 1.125rem 1.75rem;
    font-weight: 500;
}
.book__primary:hover {
    background: var(--green-100);
}

.book__secondary {
    color: var(--cream);
    border-color: rgba(250, 246, 236, 0.3);
}
.book__secondary:hover {
    background: rgba(250, 246, 236, 0.08);
    border-color: rgba(250, 246, 236, 0.6);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
    background: var(--ink);
    color: var(--cream);
    padding: var(--sp-8) 0 var(--sp-4);
}

.foot__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5, 2.5rem);
}

.foot__brand h3 {
    color: var(--cream);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: var(--sp-2);
}
.foot__brand p {
    font-size: 0.9375rem;
    color: rgba(250, 246, 236, 0.55);
    max-width: 22rem;
    line-height: 1.55;
}

.foot__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
}

.foot__col-title {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250, 246, 236, 0.5);
    margin-bottom: var(--sp-2);
    font-weight: 500;
}
.foot__list {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    font-size: 0.9375rem;
}
.foot__list a,
.foot__list li {
    color: rgba(250, 246, 236, 0.82);
    transition: color var(--t-fast);
    line-height: 1.5;
    word-break: break-word;
}
.foot__list a:hover { color: var(--green-300); }

.foot__bottom {
    margin-top: var(--sp-6);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(250, 246, 236, 0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(250, 246, 236, 0.5);
}
.foot__bottom > * { text-align: center; }
.foot__bottom a { color: rgba(250, 246, 236, 0.7); }
.foot__bottom a:hover { color: var(--green-300); }

.foot__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

@media (min-width: 700px) {
    .foot__grid {
        grid-template-columns: 1.4fr 3fr;
        gap: var(--sp-6);
        align-items: start;
    }
    .foot__cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   REVEAL ANIMATIONS (gentle, compositor-safe, with --i stagger)
   ============================================================ */
.js .reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 640ms var(--ease-out),
                transform 640ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
    will-change: opacity, transform;
}
.js .reveal.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
/* Release will-change after animation settles to free GPU memory */
.js .reveal.is-settled {
    will-change: auto;
}

/* Portrait is always immediately visible — no reveal animation interferes
   with its position: sticky behaviour on desktop. */

/* Note: content-visibility: auto was tested here but breaks IntersectionObserver
   reveals in content-visibility:hidden state. Removed in favour of reveal integrity. */

/* Reduced-motion: Tier 2 — keep crossfades, kill movement */
@media (prefers-reduced-motion: reduce) {
    .hero__media img { animation: none !important; }
    .js .hero__eyebrow,
    .js .hero__title,
    .js .hero__sub,
    .js .hero__actions {
        animation: heroCrossfade 320ms var(--ease-out) both;
    }
    @keyframes heroCrossfade { from { opacity: 0; } to { opacity: 1; } }
    .js .reveal {
        opacity: 0;
        transform: none;
        transition: opacity 300ms var(--ease-out);
    }
    .js .reveal.is-in { opacity: 1; }
    .js .about__portrait {
        clip-path: none !important;
        transition: opacity 300ms var(--ease-out);
    }
    .treatment:hover { transform: none; }
    .btn::before { transition: opacity 200ms; }
    .btn:hover::before { transform: scaleX(1); }
}

/* ============================================================
   TREATMENT DETAIL PAGE LAYOUT
   ============================================================ */
.tx-hero {
    padding: clamp(7rem, 14vh, 10rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--green-900);
    color: var(--cream);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}
.tx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 55% at 50% 35%, rgba(47, 122, 104, 0.5), transparent 65%);
    pointer-events: none;
}
.tx-hero__crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-300);
    margin-bottom: 1.25rem;
    transition: color var(--t-fast), gap var(--t-fast);
}
.tx-hero__crumb:hover { color: var(--cream-bright); gap: 0.65rem; }
.tx-hero__crumb::before { content: '←'; font-size: 0.95rem; }

.tx-hero h1 {
    color: var(--cream-bright);
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    letter-spacing: -0.035em;
    line-height: 1.04;
    max-width: 24ch;
    margin: 0 auto 1rem;
    text-wrap: balance;
}
.tx-hero__sub {
    color: rgba(250, 246, 236, 0.85);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.55;
    max-width: 44ch;
    margin: 0 auto 1.5rem;
}

.tx-hero__chips {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.tx-hero__chip {
    font-size: 0.8125rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--r-full);
    background: rgba(167, 199, 185, 0.12);
    border: 1px solid rgba(167, 199, 185, 0.3);
    color: var(--cream-bright);
    letter-spacing: -0.005em;
}
.tx-hero__chip strong { color: var(--green-300); font-weight: 500; }

/* Body content */
.tx-body {
    padding: clamp(3rem, 7vw, 6rem) 0;
}
.tx-body__inner {
    max-width: 56rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}
.tx-body__content {
    max-width: 38rem;
    margin: 0 auto;
}
.tx-body__content p {
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.tx-body__content p:last-child { margin-bottom: 0; }
.tx-body__content h2 {
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    letter-spacing: -0.02em;
    margin: 2rem 0 0.75rem;
    color: var(--ink);
    text-wrap: balance;
}
.tx-body__content h2:first-child { margin-top: 0; }
.tx-body__content ul {
    list-style: none;
    display: grid;
    gap: 0.625rem;
    margin: 0.75rem 0 1.25rem;
}
.tx-body__content li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.55;
}
.tx-body__content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 8px;
    height: 1px;
    background: var(--green-700);
}

/* Side panel (price + CTA) */
.tx-side {
    background: var(--bg-deep);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.tx-side__label {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 500;
}
.tx-side__price {
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -0.03em;
    color: var(--green-900);
    font-weight: 500;
    line-height: 1;
}
.tx-side__note {
    font-size: 0.9375rem;
    color: var(--ink-soft);
    line-height: 1.5;
    padding-top: 1rem;
    border-top: 1px solid rgba(47, 122, 104, 0.14);
}
.tx-side__btn {
    margin-top: 0.25rem;
}
.tx-side__btn.btn--primary {
    width: 100%;
    padding: 1rem 1.5rem;
}
.tx-side__call {
    text-align: center;
    font-size: 0.875rem;
    color: var(--ink-muted);
}
.tx-side__call a {
    color: var(--green-700);
    font-weight: 500;
    border-bottom: 1px solid var(--green-300);
    padding-bottom: 1px;
    transition: color var(--t-fast);
}
.tx-side__call a:hover { color: var(--green-900); }

@media (min-width: 880px) {
    .tx-body__inner {
        grid-template-columns: 1.6fr 1fr;
        max-width: 64rem;
        gap: clamp(3rem, 5vw, 5rem);
        align-items: start;
    }
    .tx-body__content { max-width: 100%; }
    .tx-side { position: sticky; top: 120px; }
}

/* Other treatments strip */
.tx-related {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--bg);
    border-top: 1px solid var(--rule);
}
.tx-related h2 {
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-4);
    color: var(--ink);
    text-align: center;
}
.tx-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
    max-width: 56rem;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .tx-related__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.tx-related__link {
    background: var(--cream);
    padding: 1.25rem 1.25rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: background var(--t-med) var(--ease-out);
}
.tx-related__link:hover { background: var(--cream-bright); }
.tx-related__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.tx-related__price {
    font-size: 0.8125rem;
    color: var(--green-700);
    letter-spacing: -0.005em;
}

/* ============================================================
   PRIVACY / LEGAL PAGES — readable long-form
   ============================================================ */
.privacy {
    max-width: 44rem;
    margin: 0 auto;
}
.privacy__updated {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin-bottom: var(--sp-5, 2.5rem);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--rule);
}
.privacy h2 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    letter-spacing: -0.02em;
    margin: 2.5rem 0 0.75rem;
    color: var(--ink);
}
.privacy h2:first-of-type { margin-top: 0; }
.privacy p {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    max-width: none;
}
.privacy ul {
    list-style: none;
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0 1.5rem;
    padding: 0;
}
.privacy li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.55;
}
.privacy li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 8px;
    height: 1px;
    background: var(--green-700);
}
.privacy a {
    color: var(--green-800);
    border-bottom: 1px solid var(--green-300);
    padding-bottom: 1px;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.privacy a:hover { color: var(--green-900); border-color: var(--green-700); }

/* ============================================================
   MOBILE (≤ 768px) — crafted, not shrunk.
   Desktop styles remain untouched; these overrides shape a
   proper mobile experience for 375 / 390 / 430 widths.
   ============================================================ */
@media (max-width: 768px) {

    /* --- Global rhythm (8pt grid, tighter mobile cadence) --- */
    :root {
        --section-y: clamp(2.75rem, 7vw, 4rem);
        --section-x: 1.25rem;
    }
    body {
        font-size: 1rem;          /* 16px — snappier mobile read */
        line-height: 1.55;
    }
    h1 { font-size: clamp(2.1rem, 9.5vw, 2.75rem); line-height: 1.02; letter-spacing: -0.03em; }
    h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.1; letter-spacing: -0.025em; }
    h3 { font-size: 1.125rem; }
    .eyebrow { font-size: 0.75rem; letter-spacing: 0.18em; }
    .lede { font-size: 1rem; line-height: 1.55; }

    /* --- Nav (touch targets 48px min on all buttons) --- */
    .nav { padding: 0.875rem 0; }
    .nav.is-scrolled { padding: 0.75rem 0; }
    .nav__brand { font-size: 1rem; }
    .nav__brand-mark { font-size: 0.7rem; letter-spacing: 0.12em; }
    .nav__cta .btn { min-height: 44px; padding: 0.65rem 1.15rem; font-size: 0.875rem; }

    /* --- Credentials strip (mobile: slimmer, still dark green) --- */
    .creds { padding: 1.5rem 0; }
    .creds__list { gap: 1.25rem 1rem; grid-template-columns: 1fr 1fr; }
    .creds__label { font-size: 0.6rem; letter-spacing: 0.14em; }
    .creds__value { font-size: 0.875rem; line-height: 1.3; }

    /* --- Hero: full viewport on mobile (like Crystal Palace).
           Container uses dvh (fills visible area).
           Media layer uses lvh (largest possible = constant value for device).
           This means the image NEVER rescales when the address bar toggles,
           it just gets more or less of itself cropped by overflow: hidden. --- */
    /* --- Mobile hero: LOCKED height. Never resizes on address-bar toggle.
           Everything uses svh (smallest viewport) = a constant value on the device.
           When the Safari chrome retracts, the hero does NOT grow, content does NOT
           re-centre, image does NOT rescale. Nothing moves. --- */
    .hero {
        min-height: 100vh;   /* fallback for old browsers */
        min-height: 100svh;  /* locked constant, unaffected by chrome toggle */
        height: 100svh;
    }
    .hero__media {
        height: 100svh;
        min-height: 0;
    }
    .hero__media img {
        height: 100%;
        min-height: 0;
    }
    .hero__overlay {
        height: 100svh;
        min-height: 0;
    }

    /* Content truly centred inside the locked viewport */
    .hero__inner {
        min-height: 100svh;   /* lock inner too — no shift when chrome toggles */
        padding-top: clamp(4.5rem, 9vh, 5.5rem);
        padding-bottom: clamp(4.5rem, 9vh, 5.5rem);
    }
    .hero__content {
        padding: 0;
        max-width: 100%;
    }
    .hero__eyebrow { font-size: 0.68rem; margin-bottom: 1rem; letter-spacing: 0.14em; }
    .hero__title {
        font-size: clamp(1.875rem, 8vw, 2.375rem);
        line-height: 1.08;
        letter-spacing: -0.03em;
        margin-bottom: 1.125rem;
    }
    .hero__title br { display: none; } /* let it wrap naturally */
    .hero__title-accent { display: block; margin-top: 0.2em; }
    .hero__sub {
        font-size: 0.9375rem;
        line-height: 1.55;
        margin-bottom: 1.75rem;
        max-width: 34ch;
        margin-left: auto;
        margin-right: auto;
    }
    .hero__actions { gap: 0.75rem; flex-direction: column; width: 100%; }
    .hero__primary { width: 100%; max-width: 20rem; padding: 1.05rem 1.5rem; font-size: 1rem; }
    .hero__phone-link { padding: 0.5rem 1rem; font-size: 0.9375rem; }

    /* Softer overlay so image reads as ambiance, not a wall */
    .hero__overlay {
        background:
            linear-gradient(to bottom,
                rgba(47, 122, 104, 0.70) 0%,
                rgba(47, 122, 104, 0.52) 40%,
                rgba(47, 122, 104, 0.55) 65%,
                rgba(47, 122, 104, 0.80) 100%);
    }

    /* --- About (mobile: portrait FIRST, then text) --- */
    .about { padding: var(--section-y) 0; }
    .about__grid {
        gap: 2rem;
        display: flex;
        flex-direction: column;
    }
    .about__portrait { order: -1; }
    .about__text { order: 1; max-width: 100%; }
    .about__title { margin-bottom: 1.25rem; }
    .about__body p { margin-bottom: 1rem; font-size: 1rem; }
    .about__facts {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        gap: 0.875rem;
    }
    .about__fact {
        grid-template-columns: 6rem 1fr;
        gap: 1rem;
    }
    .about__fact dt { font-size: 0.65rem; letter-spacing: 0.16em; }
    .about__fact dd { font-size: 0.875rem; line-height: 1.35; }
    .about__quote { margin-top: 1.75rem; padding-top: 1.25rem; font-size: 1.0625rem; line-height: 1.45; }
    .about__portrait { aspect-ratio: 3/4; max-width: 22rem; margin: 0 auto; box-shadow: 0 12px 32px -10px rgba(47, 122, 104, 0.18); }
    .about__portrait img { object-position: 58% 30%; }

    /* --- Treatments: 2-col grid on mobile (not carousel — differentiates from Reviews) --- */
    .treatments { padding: var(--section-y) 0; }
    .treatments__head { margin-bottom: 1.75rem; gap: 0.75rem; }
    .treatments__intro { font-size: 0.9375rem; max-width: none; }
    .treatments__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--rule);
        border: 1px solid var(--rule);
        border-radius: 10px;
        overflow: hidden;
    }
    .treatment {
        min-height: auto;
        padding: 1.25rem 1.125rem;
        gap: 0.5rem;
        border-radius: 0;
        border: 0;
        background: var(--cream);
    }
    .treatment__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
        margin-bottom: 0.5rem;
    }
    .treatment__title { font-size: 1rem; letter-spacing: -0.02em; line-height: 1.2; }
    .treatment__price {
        font-size: 0.8125rem;
        letter-spacing: -0.005em;
        text-transform: none;
        color: var(--green-700);
        background: transparent;
        border: 0;
        padding: 0;
        font-weight: 500;
    }
    .treatment__desc { font-size: 0.8125rem; line-height: 1.5; }
    .treatment__link { padding-top: 0.6rem; font-size: 0.8125rem; }
    .treatment:hover { transform: none; } /* touch devices: kill hover lift */

    /* CTA card on mobile: completes the 4x2 grid (always visible as 8th card) */
    .treatment--cta {
        grid-column: auto;
        background: var(--green-900);
        color: var(--cream);
    }
    .treatment--cta .treatment__head { gap: 0.35rem; }
    .treatment--cta .treatment__title { font-size: 1rem; color: var(--cream-bright); }
    .treatment--cta .treatment__desc { font-size: 0.8125rem; color: rgba(250, 246, 236, 0.8); }
    .treatment--cta .treatment__link { font-size: 0.8125rem; padding-top: 0.6rem; color: var(--green-300); }

    /* --- Reviews (tighter mobile padding to reduce drag) --- */
    .reviews { padding: 2.75rem 0 3rem; }
    .reviews__head { margin-bottom: 1.5rem; gap: 1rem; }
    .reviews__title-block h2 { margin-bottom: 0.625rem; }
    .reviews__meta { justify-content: center; font-size: 0.8125rem; gap: 0.4rem 0.6rem; }
    .reviews__count { padding-left: 0.5rem; }
    .review {
        flex-basis: calc(100vw - 3rem);
        max-width: 22rem;
        min-height: 15rem;
        padding: 1.25rem 1.125rem;
        gap: 0.75rem;
    }
    .review__top { padding-bottom: 0.75rem; }
    .review__body { font-size: 0.9375rem; line-height: 1.5; }
    .review__name { font-size: 0.875rem; }
    .review__date { font-size: 0.75rem; }
    .review__avatar { width: 32px; height: 32px; font-size: 0.875rem; }
    .review__foot { padding-top: 0.75rem; }
    .review__source { font-size: 0.7rem; padding: 0.2rem 0.45rem; }
    .reviews__track { gap: 0.75rem; padding: 6px var(--section-x) 1.25rem; }
    .reviews__link { font-size: 0.875rem; }

    /* --- Pricing --- */
    .pricing { padding: var(--section-y) 0; }
    .pricing__grid { gap: 1.75rem; }
    .pricing__intro h2 { margin-bottom: 0.875rem; }
    .pricing__intro p { font-size: 0.9375rem; }
    .pricing__list { border-radius: 10px; }
    .pricing__link {
        padding: 1rem 0.875rem;
        gap: 0.625rem;
        min-height: 8.5rem;
    }
    .pricing__num { font-size: 0.6rem; letter-spacing: 0.14em; }
    .pricing__service-title { font-size: 0.8125rem; line-height: 1.3; }
    .pricing__cost { font-size: 1.375rem; letter-spacing: -0.03em; }
    .pricing__from { font-size: 0.48em; }
    .pricing__sym { font-size: 0.65em; }
    .pricing__top { padding-top: 0.5rem; gap: 0.2rem; }
    .pricing__foot { font-size: 0.875rem; margin-top: 1.5rem; }

    /* --- Visit --- */
    .visit { padding: var(--section-y) 0; }
    .visit__grid { gap: 1.75rem; }
    .visit__details .lede { font-size: 0.9375rem; max-width: 32ch; }
    .visit__map {
        aspect-ratio: 4/5;   /* taller than wide on mobile — more map, less clipping */
        max-width: 100%;
        border-radius: 10px;
    }
    .visit__map-link {
        right: 0.6rem;
        bottom: 0.6rem;
        padding: 0.55rem 0.85rem;
        font-size: 0.8125rem;
    }
    .visit__blocks {
        gap: 1.25rem;
        grid-template-columns: 1fr;   /* single column on mobile — prevents content overflow */
    }
    .visit__block {
        padding-top: 1rem;
        min-width: 0;   /* let children shrink inside grid track */
    }
    .visit__block-title { font-size: 0.7rem; letter-spacing: 0.16em; margin-bottom: 0.5rem; }
    .visit__block p, .visit__block a, .visit__hours li {
        font-size: 0.9375rem;
        overflow-wrap: anywhere;   /* long email / transport text wraps cleanly */
        word-break: break-word;
    }
    /* Opening hours: same grouped-row pattern as desktop, tighter */
    .visit__hours { max-width: none; }
    .visit__hours li { padding: 0.5rem 0; }
    .visit__hours-day, .visit__hours-time { font-size: 0.875rem; }

    /* --- Book CTA --- */
    .book { padding: var(--section-y) 0; }
    .book h2 { margin-bottom: 1rem; }
    .book p { font-size: 0.9375rem; margin-bottom: 1.5rem; }
    .book__actions { flex-direction: column; width: 100%; gap: 0.75rem; }
    .book__primary, .book__secondary { width: 100%; max-width: 20rem; padding: 1rem 1.5rem; }

    /* --- Footer --- */
    .foot { padding: 3rem 0 2rem; }
    .foot__grid { gap: 2rem; }
    .foot__brand h3 { font-size: 1.125rem; }
    .foot__brand p { font-size: 0.9rem; max-width: 100%; }
    .foot__col-title { font-size: 0.7rem; letter-spacing: 0.16em; margin-bottom: 0.625rem; }
    .foot__list { font-size: 0.9rem; gap: 0.35rem; }
    .foot__bottom { margin-top: 2rem; padding-top: 1rem; font-size: 0.75rem; gap: 0.5rem; }

    /* --- Treatment detail pages (mobile) --- */
    .tx-hero { padding: 6rem 0 2.25rem; }
    .tx-hero h1 { font-size: clamp(1.875rem, 8vw, 2.5rem); }
    .tx-hero__sub { font-size: 0.9375rem; }
    .tx-body { padding: 2.5rem 0 3rem; }
    .tx-body__inner { gap: 2rem; }
    .tx-side { padding: 1.5rem 1.25rem; gap: 1rem; }
    .tx-side__price { font-size: 2rem; }
    .tx-side__note { font-size: 0.9rem; padding-top: 0.75rem; }
    .tx-related { padding: 2.5rem 0 3rem; }
    .tx-related__link { padding: 1rem; }

    /* --- Container gutter tighter on 375 range --- */
    .container { padding-inline: var(--section-x); }

    .hero__media img {
        transform: scale(1.04) translate3d(0, 0, 0);
        animation: none !important;
        will-change: auto;
    }
}

/* --- Small phone refinements (≤ 390px) --- */
@media (max-width: 390px) {
    :root { --section-x: 1.125rem; }
    .hero__title { font-size: clamp(2rem, 10vw, 2.5rem); }
    .hero__sub { font-size: 0.9rem; }
    .visit__blocks { gap: 1.125rem; }
    .visit__hours { max-width: 14rem; }
}

/* --- Extra small (≤ 360px) safety, incl. 320px iPhone SE --- */
@media (max-width: 360px) {
    :root { --section-x: 1.125rem; }
    .creds__list { gap: 0.875rem 0.625rem; }
    .creds__value { font-size: 0.8125rem; line-height: 1.3; }
    .creds__label { font-size: 0.55rem; }
    .treatment { padding: 1rem 0.875rem; gap: 0.4rem; }
    .treatment__title { font-size: 0.9375rem; }
    .treatment__desc { font-size: 0.8rem; }
    .treatment__link { font-size: 0.75rem; padding-top: 0.5rem; }
    .about__fact {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .hero__title { font-size: clamp(1.875rem, 9.5vw, 2.375rem); }
    .hero__sub { font-size: 0.875rem; }
}

/* ============================================================
   BOOKING MODAL — custom Cliniko-backed flow
   Mounted in <body> by /js/booking.js
   ============================================================ */

/* Lock body scroll when modal is open, but preserve scrollbar gutter */
html.bk-open { overflow: hidden; scrollbar-gutter: stable; }
html.bk-open body { overflow: hidden; }

.bk {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: stretch;
    pointer-events: none;
}
.bk[hidden] { display: none; }

.bk__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 31, 28, 0.55);
    backdrop-filter: saturate(1.1) blur(6px);
    -webkit-backdrop-filter: saturate(1.1) blur(6px);
    opacity: 0;
    transition: opacity 320ms var(--ease-out);
    pointer-events: auto;
}
.bk.is-open .bk__backdrop { opacity: 1; }

.bk__dialog {
    position: relative;
    margin: auto;
    /* Needs room for Cliniko's booking form inside the iframe */
    width: min(980px, calc(100vw - 1.5rem));
    height: min(860px, calc(100dvh - 2rem));
    max-height: calc(100dvh - 2rem);
    background: var(--bg);
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 30px 80px -20px rgba(14, 31, 28, 0.45),
        0 12px 32px -8px rgba(14, 31, 28, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(16px) scale(0.985);
    opacity: 0;
    transition:
        transform 360ms var(--ease-spring),
        opacity 280ms var(--ease-out);
    pointer-events: auto;
    outline: none;
}
/* Mobile: full-screen dialog (iframe needs every pixel) */
@media (max-width: 600px) {
    .bk__dialog {
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
    }
}
.bk.is-open .bk__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.bk__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ---------- Header (steps + close) ---------- */
.bk__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--cream);
    flex: 0 0 auto;
}

.bk__steps {
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bk__steps::-webkit-scrollbar { display: none; }

.bk__step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    color: var(--ink-faint);
    border-radius: var(--r-full);
    transition: color var(--t-med), background var(--t-med);
    white-space: nowrap;
}
.bk__step.is-current {
    color: var(--green-900);
    background: var(--green-100);
}
.bk__step.is-done {
    color: var(--green-700);
}
.bk__step-num {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    transition: transform 280ms var(--ease-spring), background 280ms var(--ease-out), color 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.bk__step.is-current .bk__step-num {
    background: var(--green-700);
    color: var(--cream);
    border-color: var(--green-700);
}
.bk__step.is-done .bk__step-num {
    background: var(--green-700);
    color: var(--cream);
    border-color: var(--green-700);
    transform: scale(1.0);
    animation: bkStepDone 320ms var(--ease-spring) both;
}
@keyframes bkStepDone {
    0%   { transform: scale(0.8); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.bk__step-label {
    font-weight: 500;
    letter-spacing: -0.005em;
}
/* On narrow screens, the "Date, time & payment" label can break awkwardly —
   abbreviate to save space while keeping the pill visible. */
@media (max-width: 540px) {
    .bk__step-label { font-size: 0.72rem; }
    .bk__step:nth-child(2) .bk__step-label::before {
        content: 'Book';
    }
    .bk__step:nth-child(2) .bk__step-label { font-size: 0; letter-spacing: 0; }
    .bk__step:nth-child(2) .bk__step-label::before { font-size: 0.72rem; letter-spacing: -0.005em; }
}

.bk__close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--r-full);
    color: var(--ink-soft);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    flex: 0 0 auto;
}
.bk__close:hover {
    background: var(--bg-deep);
    color: var(--ink);
}
.bk__close:active { transform: scale(0.94); }

/* ---------- Body ---------- */
.bk__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    opacity: 1;
    transition: opacity 120ms var(--ease-out);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.bk__body.is-leaving { opacity: 0; }
.bk__body--padded { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.bk__body--embed { padding: 0; overflow: hidden; }

.bk__intro { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.bk__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-700);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.bk__title {
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 0.5rem;
    text-wrap: balance;
}
.bk__lede {
    color: var(--ink-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
    max-width: 52ch;
}
.bk__lede em { font-style: italic; color: var(--green-800); font-weight: 500; }

.bk__loading {
    padding: 2rem 0;
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.bk__loading::after {
    content: '';
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    animation: bkPulse 1.1s var(--ease-in-out, ease-in-out) infinite;
}
@keyframes bkPulse {
    0%, 100% { opacity: 0.2; transform: scale(0.85); }
    50%      { opacity: 0.8; transform: scale(1.1); }
}

.bk__error {
    padding: 1.25rem;
    background: rgba(199, 168, 92, 0.1);
    border: 1px solid rgba(199, 168, 92, 0.35);
    border-radius: var(--r-md);
    color: var(--ink);
}
.bk__error strong { display: block; margin-bottom: 0.35rem; }
.bk__error p { font-size: 0.875rem; color: var(--ink-soft); margin: 0; }
.bk__error a { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Step 1: Services grid ---------- */
.bk__services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}
@media (min-width: 720px) {
    .bk__services { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

.bk__svc {
    text-align: left;
    padding: 1rem 1.125rem;
    background: var(--cream-bright);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    cursor: pointer;
    transition:
        border-color 220ms var(--ease-out),
        background 220ms var(--ease-out),
        transform 220ms var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: inherit;
}
.bk__svc:hover,
.bk__svc:focus-visible {
    border-color: var(--green-700);
    background: #FFFCF4;
    transform: translateY(-1px);
}
.bk__svc:active { transform: translateY(0) scale(0.998); }
/* Optimistic "chosen" state painted for ~120ms before the step transitions —
   confirms the tap landed, discourages double-taps. */
.bk__svc.is-chosen {
    border-color: var(--green-700);
    background: var(--green-100);
    transform: translateY(0);
}

.bk__svc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.bk__svc-name {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}
.bk__svc-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: var(--ink-muted);
    flex-wrap: wrap;
    line-height: 1;
}
.bk__svc-mins {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.bk__svc-mins::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--green-500);
    display: inline-block;
}
.bk__svc-dep {
    color: var(--green-800);
    font-weight: 500;
}

.bk__svc-desc {
    font-size: 0.84rem;
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0;
    max-width: none;
}

.bk__svc-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--rule-soft);
}
.bk__svc-next {
    font-size: 0.78rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.bk__svc-next::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--green-500);
    display: inline-block;
    flex: 0 0 auto;
}
.bk__svc-next.is-pending {
    color: var(--ink-faint);
    opacity: 0.6;
}
.bk__svc-next.is-pending::before {
    background: var(--ink-faint);
    animation: bkPulse 1.4s var(--ease-in-out, ease-in-out) infinite;
}
.bk__svc-next.is-empty {
    color: var(--ink-faint);
}
.bk__svc-next.is-empty::before { background: var(--ink-faint); }

.bk__svc-go {
    font-size: 0.8rem;
    color: var(--green-700);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform 220ms var(--ease-out);
    flex: 0 0 auto;
}
.bk__svc:hover .bk__svc-go { transform: translateX(2px); }


/* ---------- Step 2: Embedded Cliniko booking widget ---------- */
.bk__embed-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--cream);
    flex: 0 0 auto;
}
.bk__embed-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.875rem;
    font-size: 0.86rem;
    color: var(--ink-soft);
    border-radius: var(--r-full);
    border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast);
    min-height: 40px;
    flex: 0 0 auto;
}
.bk__embed-back:hover {
    background: var(--bg-deep);
    color: var(--ink);
}
.bk__embed-back svg {
    flex: 0 0 auto;
}

.bk__embed-context {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    line-height: 1.15;
}
.bk__embed-context-name {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bk__embed-context-meta {
    font-size: 0.72rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}

.bk__embed-trust {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--green-700);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    flex: 0 0 auto;
    padding: 0.3rem 0.6rem;
    border-radius: var(--r-full);
    background: var(--green-100);
}

@media (max-width: 540px) {
    .bk__embed-trust { display: none; }
    .bk__embed-back { padding: 0.5rem 0.7rem; font-size: 0.78rem; }
    .bk__embed-back span { display: none; }
    .bk__embed-context-name { font-size: 0.86rem; }
}

.bk__embed-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--cream-bright);
    overflow: hidden;
}

.bk__embed-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--cream-bright);
}

.bk__embed-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    background: var(--bg);
    color: var(--ink-muted);
    font-size: 0.95rem;
    z-index: 1;
    transition: opacity 320ms var(--ease-out), visibility 320ms;
}
.bk__embed-loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.bk__embed-loading-pulse {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--green-300);
    opacity: 0.6;
    animation: bkPulse 1.2s var(--ease-in-out, ease-in-out) infinite;
}


/* ---------- Footer (step 1 only — booking trust / direct call) ---------- */
.bk__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--rule-soft);
    background: var(--cream);
    flex: 0 0 auto;
}
.bk__foot-note {
    font-size: 0.78rem;
    color: var(--ink-muted);
    line-height: 1.4;
    max-width: 30ch;
}
@media (max-width: 540px) {
    .bk__foot { padding: 0.6rem 0.875rem; gap: 0.6rem; }
    .bk__foot-note { display: none; }
}

.bk__call {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.875rem;
    border-radius: var(--r-full);
    color: var(--green-700);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    transition: color var(--t-fast), background var(--t-fast);
    min-height: 44px;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.bk__call:hover {
    color: var(--green-900);
    background: var(--green-100);
}
.bk__call svg { opacity: 0.7; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .bk__backdrop, .bk__dialog,
    .bk__svc, .bk__day, .bk__time, .bk__cta,
    .bk__body, .bk__step-num {
        transition: opacity 120ms linear !important;
        transform: none !important;
        animation: none !important;
    }
    .bk__loading::after { animation: none; opacity: 0.6; }
    .bk__steps::after { transition: none !important; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .nav, .book, .grain, .bk { display: none !important; }
    body { color: #000; background: #fff; padding-bottom: 0; }
    a { text-decoration: underline; }
}