/* ==========================================================================
   ÉLITE Spa & Wellness
   Warm sand + deep forest editorial luxury.

   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout utilities
   5.  Buttons & links
   6.  Reveal primitives
   7.  Chrome: cursor, grain, ambient, preloader, curtain
   8.  Navigation & menu
   9.  Hero
   10. Sections & components
   11. Forms
   12. Footer
   13. Responsive
   14. Reduced motion & print
   ========================================================================== */

/* 1. Tokens ================================================================ */

:root {
    /* Sand */
    --sand-50:  #FDFCFA;
    --sand-100: #FAF7F2;
    --sand-200: #F1EADD;   /* alt band — far enough from --bg to actually read */
    --sand-250: #EAE1D2;
    --sand-300: #E9DFCE;
    --sand-400: #D8C9B2;

    /* Forest */
    --forest-900: #0E1813;
    --forest-800: #16241D;
    --forest-700: #1F2E26;
    --forest-600: #2E4238;
    --forest-500: #3F574B;

    /* Sage + gold */
    --sage-600: #56635A;   /* body copy: ~6.6:1 on cream, was ~4.4:1 */
    --sage-500: #8A9086;
    --sage-400: #A8AEA3;
    --gold-600: #A8874B;
    --gold-500: #C0A062;
    --gold-400: #D4BC8A;
    --gold-200: #EADDC2;

    --danger: #A6402F;
    --success: #3F6B4E;

    /* Semantic — light surface (default) */
    --bg:        var(--sand-100);
    --bg-alt:    var(--sand-200);
    --surface:   #FFFDF8;
    --ink:       var(--forest-800);
    --ink-soft:  var(--sage-600);
    --ink-faint: var(--sage-500);
    --line:      rgba(31, 46, 38, .20);
    --line-soft: rgba(31, 46, 38, .11);
    --line-gold: rgba(168, 135, 75, .38);

    /* --accent is for fills; --accent-ink is the text-sized gold that passes
       AA on cream (the old one was ~3.3:1 and used for every eyebrow). */
    --accent:     var(--gold-600);
    --accent-ink: #8A6C31;

    /* Type */
    --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fs-hero:  clamp(2.6rem, 7.4vw, 6.5rem);
    --fs-d1:    clamp(2.1rem, 4.4vw, 3.75rem);
    --fs-d2:    clamp(1.75rem, 3.2vw, 2.7rem);
    --fs-d3:    clamp(1.35rem, 2vw, 1.85rem);
    --fs-d4:    clamp(1.1rem, 1.35vw, 1.3rem);
    --fs-lead:  clamp(1rem, 1.05vw, 1.125rem);
    --fs-body:  1rem;
    --fs-sm:    0.9375rem;
    --fs-xs:    0.8125rem;
    --fs-micro: 0.6875rem;

    /* Rhythm. The outer:inner air ratio was 3.6:1, which read as empty rather
       than generous — sections now breathe less and content breathes more. */
    --space-2xs: 0.4rem;
    --space-xs:  0.75rem;
    --space-sm:  1.25rem;
    --space-md:  2.25rem;
    --space-lg:  3.25rem;
    --space-xl:  4.5rem;
    --space-2xl: 5.5rem;
    --space-3xl: 8rem;

    --gutter: clamp(1.1rem, 3.6vw, 3.5rem);
    --maxw: 1240px;
    --maxw-text: 62ch;

    /* Sharp corners. 20px radius on cards read as SaaS, not spa. */
    --radius-sm: 2px;
    --radius: 3px;
    --radius-lg: 5px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(30, 44, 36, .05), 0 8px 20px -10px rgba(30, 44, 36, .14);
    --shadow-md: 0 2px 6px rgba(30, 44, 36, .06), 0 20px 44px -20px rgba(30, 44, 36, .22);
    --shadow-lg: 0 6px 14px rgba(30, 44, 36, .07), 0 44px 88px -34px rgba(30, 44, 36, .32);
    --shadow-media: 0 28px 64px -30px rgba(22, 36, 29, .48), 0 4px 12px -6px rgba(22, 36, 29, .16);

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-lux: cubic-bezier(.19, 1, .22, 1);
    --dur-fast: .18s;
    --dur: .32s;
    --dur-slow: .8s;

    /* z-index scale */
    --z-ambient: 0;
    --z-grain: 1;
    --z-content: 2;
    --z-nav: 60;
    --z-menu: 70;
    --z-curtain: 90;
    --z-cursor: 100;
    --z-preloader: 110;
}

/* Dark surface — applied per section or per page */
.section--dark,
.treatment--dark,
.booking__aside,
.foot {
    --bg:        var(--forest-800);
    --bg-alt:    var(--forest-900);
    --surface:   var(--forest-700);
    --ink:       var(--sand-100);
    --ink-soft:  rgba(250, 247, 242, .74);
    --ink-faint: rgba(250, 247, 242, .52);
    --line:      rgba(233, 223, 206, .20);
    --line-soft: rgba(233, 223, 206, .10);
    --line-gold: rgba(212, 188, 138, .45);
    --accent:     var(--gold-400);
    --accent-ink: var(--gold-400);
}

/* 2. Reset & base ========================================================== */

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: auto; /* Lenis owns scrolling */
}

body {
    background: var(--sand-100);
    color: var(--forest-700);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
    background: var(--sand-300);
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

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

address { font-style: normal; }

::selection {
    background: var(--gold-500);
    color: var(--forest-900);
}

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

.skip-link {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 200;
    padding: .75rem 1.25rem;
    background: var(--forest-700);
    color: var(--sand-100);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 3. Typography ============================================================ */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;              /* 400 goes weedy and grey at display sizes */
    font-optical-sizing: auto;
    line-height: 1.04;
    letter-spacing: -0.016em;
    text-wrap: balance;
}

h1 { font-size: var(--fs-d1); }
h2 { font-size: var(--fs-d2); }
h3 { font-size: var(--fs-d3); line-height: 1.14; }

h1 em, h2 em, h3 em {
    font-style: italic;
    color: var(--accent);
}

p { text-wrap: pretty; }

.display-hero {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 500;
    font-optical-sizing: auto;
    line-height: .90;
    letter-spacing: -0.032em;
}

/* The italic pull-quotes in `.section--clear` want the lighter weight. */
.pull-quote {
    font-family: var(--font-display);
    font-size: var(--fs-d2);
    font-weight: 400;
    font-style: italic;
    line-height: 1.16;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.58;
    color: var(--ink-soft);
    max-width: var(--maxw-text);
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent-ink);
}

.eyebrow::before {
    content: '';
    width: clamp(20px, 3vw, 44px);
    height: 1px;
    background: currentColor;
    opacity: .55;
    flex: none;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
    content: '';
    width: clamp(20px, 3vw, 44px);
    height: 1px;
    background: currentColor;
    opacity: .55;
}

.text-muted { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }

.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.index-tag {
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .18em;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}

/* 4. Layout utilities ====================================================== */

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: 1080px; }
.container--text { max-width: 820px; }

.section {
    position: relative;
    z-index: var(--z-content);
    padding-block: var(--space-xl);
    background: var(--bg);
    color: var(--ink);
}

.section--tight { padding-block: var(--space-lg); }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--bg-alt); }
/* Pullquote strips: a couple of lines of type — they don't earn full section air. */
.section--clear { background: transparent; padding-block: var(--space-lg); }

/* Dark sections are the page's rhythm: cream → dark → cream → dark. They get
   extra height and a soft gold/forest wash so they read as lit rooms rather
   than as flat blocks of colour. */
.section--dark {
    background: var(--forest-800);
    color: var(--sand-100);
    padding-block: var(--space-xl);
    isolation: isolate;
}

.section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(115% 75% at 10% -10%, rgba(192, 160, 98, .11), transparent 58%),
        radial-gradient(95% 70% at 105% 108%, rgba(46, 66, 56, .85), transparent 55%);
}

.section--dark > * { position: relative; z-index: 1; }

.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    transform-origin: left center;
}

.grid { display: grid; gap: var(--space-md); }

.split-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--space-lg);
    align-items: end;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-lg);
}

/* The gold segment under every section header — the site's signature
   "a section is starting" gesture. Drawn by GSAP via --rule-x. */
.split-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: clamp(60px, 8vw, 120px);
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(var(--rule-x, 1));
    transform-origin: left center;
}

.has-js:not(.reduced-motion):not(.no-motion) .split-head { --rule-x: 0; }

/* Alternate these across a page so four section headers do not read as one
   repeated template. */
.split-head--stack { grid-template-columns: 1fr; max-width: 42ch; }
.split-head--offset { grid-template-columns: 1fr; }
.split-head--offset .lead { margin-left: auto; max-width: 46ch; }

.stack-sm > * + * { margin-top: var(--space-xs); }
.stack > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-md); }

/* 5. Buttons & links ======================================================= */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-line: var(--line);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 52px;
    padding: .95rem 1.75rem;
    border: 1px solid var(--btn-line);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .035em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}

.btn > * { position: relative; z-index: 1; }

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--forest-700);
    transform: translateY(101%);
    transition: transform .5s var(--ease-out);
}

.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0); }

.btn:hover { color: var(--sand-100); border-color: var(--forest-700); }
.btn:active { transform: scale(.985); }

.btn .icon { transition: transform .4s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }

.btn--gold {
    box-shadow: 0 2px 10px -4px rgba(168, 135, 75, .5);
    --btn-bg: var(--gold-500);
    --btn-fg: var(--forest-900);
    --btn-line: var(--gold-500);
    font-weight: 500;
}
.btn--gold::after { background: var(--forest-700); }
.btn--gold:hover { color: var(--sand-100); border-color: var(--forest-700); }

.btn--solid {
    --btn-bg: var(--forest-700);
    --btn-fg: var(--sand-100);
    --btn-line: var(--forest-700);
}
.btn--solid::after { background: var(--gold-500); }
.btn--solid:hover { color: var(--forest-900); border-color: var(--gold-500); }

.btn--ghost { --btn-line: rgba(31, 46, 38, .30); }
.section--dark .btn--ghost,
[data-theme='dark'] .btn--ghost { --btn-line: rgba(233, 223, 206, .45); }

.btn--sm { min-height: 42px; padding: .6rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 62px; padding:1.15rem 2.35rem; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-busy { opacity: .5; pointer-events: none; }

/* Understated text link with a wiping underline */
.link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-block: .2rem;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: right center;
    transition: transform .45s var(--ease-out);
}

.link:hover::after { transform: scaleX(0); }
.link .icon { transition: transform .4s var(--ease-out); }
.link:hover .icon { transform: translateX(5px); }

.link--gold { color: var(--accent); }

/* Phone numbers ------------------------------------------------------------
   The spa takes its bookings by phone, so the number is treated as a primary
   action everywhere it appears rather than as body copy. Buttons are excluded
   — they already carry their own emphasis. */
a[href^="tel:"]:not(.btn) {
    color: var(--accent-ink);          /* AA-safe gold on cream (4.6:1) */
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: color var(--dur) ease;
}
a[href^="tel:"]:not(.btn):hover { color: var(--accent); }

/* On the forest surfaces the dark gold disappears — use the light one. */
.foot a[href^="tel:"]:not(.btn),
.menu a[href^="tel:"]:not(.btn),
.hero a[href^="tel:"]:not(.btn),
.section--dark a[href^="tel:"]:not(.btn),
.band a[href^="tel:"]:not(.btn),
.booking__aside a[href^="tel:"]:not(.btn),
.nav.is-inverted a[href^="tel:"]:not(.btn) { color: var(--gold-400); }

.foot a[href^="tel:"]:not(.btn):hover,
.menu a[href^="tel:"]:not(.btn):hover,
.hero a[href^="tel:"]:not(.btn):hover,
.section--dark a[href^="tel:"]:not(.btn):hover,
.band a[href^="tel:"]:not(.btn):hover,
.booking__aside a[href^="tel:"]:not(.btn):hover,
.nav.is-inverted a[href^="tel:"]:not(.btn):hover { color: var(--sand-100); }

/* 6. Reveal primitives ===================================================== */

/* Word-by-word headline masking */
.split { display: inline; }

.word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .08em;
    margin-bottom: -.08em;
}

/* No `will-change` here. Every word of every split heading matches this rule,
   so declaring it promoted every word on the page to its own compositor layer
   permanently — around sixty layers on the homepage alone, held for the whole
   session. GSAP promotes each word for the duration of its own tween and
   releases it afterwards, which is what we actually want. */
.word__inner { display: inline-block; }

.has-js:not(.reduced-motion) .word__inner { transform: translateY(105%); }

/* Generic fade/rise */
.has-js:not(.reduced-motion) [data-reveal] { opacity: 0; }

/* Failsafe. `no-motion` is set by main.js when GSAP is unavailable, and by the
   inline head script if the deferred bundle never executes at all. Without it,
   a blocked CDN would leave the page permanently blank. */
.no-motion .word__inner { transform: none !important; }
.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
.no-motion [data-mask] { --mask-y: 0% !important; }
.no-motion .split-head,
.no-motion .stat { --rule-x: 1 !important; }
.no-motion [data-mask] > img,
.no-motion [data-mask] > picture { transform: none !important; }
.no-motion .preloader { display: none; }
.no-motion .hero-stage { height: auto; }
.no-motion .hero { position: relative; }
.no-motion .hero__vignette { display: none; }

/* Image mask reveal */
/* Photography carries most of the page's visual weight, so every image gets a
   real frame: elevation off the cream, a hairline ring, a grounding gradient
   at the foot, and one shared colour normalisation so photos from different
   sources sit together. */
.media {
    position: relative;
    overflow: hidden;
    background: var(--sand-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-media);
}

.media img,
.media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.97) contrast(1.03);
}

.media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(31, 46, 38, .12);
    background: linear-gradient(to top, rgba(14, 24, 19, .16), transparent 42%);
}

.media__frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; }

[data-mask] { clip-path: inset(0% 0% var(--mask-y, 0%) 0%); }
.has-js:not(.reduced-motion) [data-mask] { --mask-y: 100%; }

.has-js:not(.reduced-motion) [data-mask] > img,
.has-js:not(.reduced-motion) [data-mask] > picture { transform: scale(1.2); }

.ratio-1 { aspect-ratio: 1; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-34 { aspect-ratio: 3 / 4; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-23 { aspect-ratio: 2 / 3; }
.ratio-tall { aspect-ratio: 5 / 7; }

/* 7. Chrome ================================================================ */

/* Ambient Three.js canvas */
.ambient {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-ambient);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.ambient.is-ready { opacity: 1; }

/* Film grain.
   Deliberately static and viewport-sized. The previous version was
   inset:-50% (four times the viewport), mix-blend-mode:multiply and animated
   on an infinite loop — which forced a full-page composite several times a
   second and was a major source of scroll jank. A still, un-blended texture
   is visually near-identical and costs nothing after first paint. */
.grain {
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-repeat: repeat;
    contain: strict;
}

/* Floating WhatsApp button — official green for instant recognition. */
.wa-float {
    position: fixed;
    right: clamp(1rem, 2.5vw, 1.75rem);
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    z-index: 50; /* above content, below nav (60) / menu (70) / curtain (90) */
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 10px 28px -10px rgba(14, 24, 19, .5);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}

.wa-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -12px rgba(14, 24, 19, .55);
}

.wa-float .icon { stroke-width: 1.6; }

/* On the two form pages the fields run full-bleed on mobile, so a fixed
   54px bubble sits directly on the date picker icon, the email field and
   the textarea. Both pages already carry their own phone/WhatsApp CTA. */
@media (max-width: 720px) {
    .page--booking .wa-float,
    .page--contact .wa-float { display: none; }
}

@media print {
    .wa-float { display: none !important; }
}

/* Preloader */
.preloader {
    position: fixed;
    inset: 0;
    z-index: var(--z-preloader);
    display: grid;
    place-items: center;
    background: var(--forest-800);
    color: var(--sand-100);
}

.reduced-motion .preloader { display: none; }

.preloader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: min(560px, 86vw);
}

/* Canvas and fallback text occupy the same box so the swap is invisible. */
.preloader__stage {
    position: relative;
    width: 100%;
    height: clamp(80px, 16vw, 130px);
}

.preloader__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.preloader__mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 7vw, 3.5rem);
    font-weight: 500;
    letter-spacing: .18em;
    padding-left: .18em;
    color: var(--sand-100);
}

/* Once the particle canvas has sampled the text, drop the DOM copy. */
.preloader.is-vaporizing .preloader__mark { visibility: hidden; }

.preloader__line {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(233, 223, 206, .2);
    overflow: hidden;
}

.preloader__line i {
    display: block;
    width: 100%; height: 100%;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left center;
}

.preloader__count {
    display: flex;
    align-items: baseline;
    gap: .1em;
    font-size: var(--fs-xs);
    letter-spacing: .18em;
    color: var(--gold-400);
    font-variant-numeric: tabular-nums;
}
.preloader__count em { font-style: normal; opacity: .6; }

/* Barba curtain */
.curtain {
    position: fixed;
    inset: 0;
    z-index: var(--z-curtain);
    display: flex;
    pointer-events: none;
}

.curtain__panel {
    flex: 1;
    background: var(--forest-800);
    transform: scaleY(0);
    transform-origin: bottom center;
}

/* Promoted only while a transition is actually running. */
.is-transitioning .curtain__panel { will-change: transform; }

.curtain__label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 5.5rem);
    font-style: italic;
    color: var(--gold-400);
    opacity: 0;
}

/* 8. Navigation ============================================================ */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-nav);
    padding-block: var(--nav-pad, clamp(.9rem, 1.8vw, 1.5rem));
    color: var(--forest-800);
    transition: transform .55s var(--ease-out), color .45s ease,
                padding-block var(--dur) var(--ease-out);
    will-change: transform;
}

/* The blur is attached to `.is-stuck` rather than sitting at opacity:0 on
   every page. A backdrop-filter is evaluated even when the layer is fully
   transparent, so leaving it always-on meant paying for a full-width blur on
   every single scroll frame, including at the top of the page. */
.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(250, 247, 242, .86);
    border-bottom: 1px solid var(--line-soft);
    opacity: 0;
    transition: opacity .4s ease;
}

.nav.is-stuck::before {
    opacity: 1;
    background: rgba(250, 247, 242, .94);   /* reads as frosted on its own */
}

/* The blur costs a snapshot + two-pass Gaussian per scroll frame, so it is
   opt-in only where there is likely to be a real GPU. */
@media (min-width: 1025px) and (pointer: fine) {
    .nav.is-stuck::before {
        background: rgba(250, 247, 242, .86);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}
.nav.is-hidden { transform: translateY(-105%); }

/* Pre-JS state: pages that open on a dark hero declare it on <body>, so the
   nav is never briefly dark-on-dark before watchDarkZones() runs. */
body[data-theme-start='dark'] .nav:not(.is-stuck) { color: var(--sand-100); }

.nav.is-inverted { color: var(--sand-100); }
.nav.is-inverted::before { background: rgba(22, 36, 29, .78); border-bottom-color: rgba(233, 223, 206, .12); }

/* While the full-screen menu is open the nav has to sit ABOVE the backdrop:
   the close button is the toggle in the nav, and the menu panel (z 70) would
   otherwise cover it, leaving no way to shut the menu on a touch device.
   It also has to read light-on-dark, and it must not be hidden by the
   scroll-direction rule. */
.is-menu-open .nav {
    z-index: calc(var(--z-menu) + 1);
    color: var(--sand-100);
    transform: none;
}
.is-menu-open .nav::before { opacity: 0; }

.nav__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.nav__brand {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1;
    margin-right: auto;
}

.nav__brand-mark {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    letter-spacing: .2em;
    padding-left: .2em;
}

.nav__brand-sub {
    font-size: 9px;
    letter-spacing: .34em;
    text-transform: uppercase;
    opacity: .55;
    padding-left: .25em;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2.25rem);
}

.nav__link {
    position: relative;
    padding-block: .5rem;
    font-size: var(--fs-sm);
    font-weight: 450;
    overflow: hidden;
}

.nav__link-text { display: inline-block; transition: transform .45s var(--ease-out); }

.nav__link::after {
    content: '';
    position: absolute;
    left: 0; bottom: .35rem;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--ease-out);
}

.nav__link:hover::after,
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--gold-600); }
.nav.is-inverted .nav__link.is-current { color: var(--gold-400); }

.nav__actions {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 1.4vw, 1.25rem);
}

/* Not dimmed: the number is the fastest way to book, so it reads at full
   strength beside the Book button. */
.nav__phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-sm);
    letter-spacing: .02em;
}

.nav.is-inverted .nav__cta {
    --btn-bg: var(--gold-400);
    --btn-line: var(--gold-400);
    --btn-fg: var(--forest-900);
}
.nav.is-inverted .nav__cta::after { background: var(--sand-100); }
.nav.is-inverted .nav__cta:hover { color: var(--forest-900); border-color: var(--sand-100); }

/* Menu toggle */
.menu-toggle {
    display: none;
    position: relative;
    width: 48px; height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.menu-toggle__bar {
    display: block;
    width: 22px; height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .4s var(--ease-out), width .4s var(--ease-out), opacity .3s ease;
}
.menu-toggle:hover .menu-toggle__bar:last-child { width: 14px; }

.is-menu-open .menu-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.is-menu-open .menu-toggle__bar:last-child { width: 22px; transform: translateY(-3.75px) rotate(-45deg); }

/* Full-screen menu */
.menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: grid;
    visibility: hidden;
    pointer-events: none;
}

.menu.is-open { visibility: visible; pointer-events: auto; }

.menu__bg {
    position: absolute;
    inset: 0;
    background: var(--forest-800);
    transform: translateY(-100%);
}

.menu__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-lg);
    align-content: center;
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: clamp(6rem, 14vh, 9rem) var(--gutter) var(--space-lg);
    color: var(--sand-100);
    overflow-y: auto;
    max-height: 100svh;
}

.menu__nav { display: flex; flex-direction: column; }

.menu__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(.6rem, 1.6vh, 1.1rem);
    border-bottom: 1px solid rgba(233, 223, 206, .12);
    overflow: hidden;
}

.menu__index {
    font-size: var(--fs-micro);
    letter-spacing: .2em;
    color: var(--gold-400);
    opacity: .7;
}

.menu__label {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    transition: transform .5s var(--ease-out), color .4s ease;
}

.menu__arrow {
    display: grid;
    place-items: center;
    color: var(--gold-400);
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}

.menu__link:hover .menu__label { transform: translateX(clamp(.5rem, 1.6vw, 1.5rem)); color: var(--gold-400); }
.menu__link:hover .menu__arrow { opacity: 1; transform: translateX(0); }
.menu__link--accent .menu__label { font-style: italic; color: var(--gold-400); }

.menu__aside {
    display: grid;
    gap: var(--space-sm);
    align-content: center;
    font-size: var(--fs-sm);
    color: rgba(250, 247, 242, .7);
}

.menu__block-title {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: .5rem;
}

.menu__block p { display: flex; gap: 1rem; justify-content: space-between; max-width: 320px; }
.menu__block p a:hover { color: var(--gold-400); }

.menu__social { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-top: var(--space-xs); }
.menu__social a {
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(233, 223, 206, .25);
    padding-bottom: 3px;
    transition: color var(--dur) ease, border-color var(--dur) ease;
}
.menu__social a:hover { color: var(--gold-400); border-color: var(--gold-400); }

/* 9. Hero ================================================================== */

/* Cinematic hero.
   The stage reserves the scroll distance; the hero sticks inside it, so it
   holds still while the camera pushes in and the headline drifts away. Cheaper
   than a ScrollTrigger pin — no pin-spacer, no re-measuring, and it degrades
   to a plain hero if anything is off. */
.hero-stage {
    position: relative;
    z-index: 1;              /* every following section scrolls OVER the hero */
    height: 190svh;
}

.hero {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100svh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding-top: clamp(8rem, 18vh, 12rem);
    padding-bottom: clamp(2.5rem, 6vh, 5rem);
    overflow: hidden;
    color: var(--sand-100);
}

.hero__bg {
    position: absolute;
    inset: -8% 0 -8%;
    z-index: -2;
    overflow: hidden;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
    /* The hero photograph carries a heavy orange cast from its uplighting.
       Pulling the saturation back and darkening it lets the forest-green
       scrim below take over, so the hero sits in the palette instead of
       fighting it. Replace the photo and this can be relaxed. */
    filter: saturate(.52) brightness(.80) contrast(1.06);
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to bottom, rgba(14, 24, 19, .58) 0%, rgba(14, 24, 19, .10) 30%, rgba(14, 24, 19, .28) 58%, rgba(14, 24, 19, .90) 100%),
        radial-gradient(130% 85% at 18% 105%, rgba(14, 24, 19, .58), transparent 62%),
        /* Flat forest wash that ties the photograph to the brand colour. */
        linear-gradient(rgba(22, 36, 29, .34), rgba(22, 36, 29, .34));
}

/* Gold dust embers over the photograph, under the copy. Painted by JS
   (capped particle count); hidden entirely when motion is off. */
.hero__dust {
    position: absolute;
    inset: 0;
    /* canvas is a replaced element: inset alone will not stretch it */
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.no-motion .hero__dust,
.reduced-motion .hero__dust { display: none; }

/* Deepens as the camera pushes in — driven by --cine in JS. */
.hero__vignette {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--cine, 0);
    background:
        radial-gradient(125% 95% at 50% 48%, transparent 45%, rgba(14, 24, 19, .52) 100%),
        linear-gradient(to bottom, rgba(14, 24, 19, .14), rgba(14, 24, 19, .30));
}

.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    gap: var(--space-md);
}

.hero__eyebrow { color: var(--gold-400); }

.hero__title {
    color: var(--sand-100);
    max-width: 14ch;
    text-shadow: 0 2px 40px rgba(14, 24, 19, .35);
}

.hero__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, .62);
}

.hero__badges li { display: flex; align-items: center; }

.hero__badges li + li::before {
    content: '';
    width: 1px;
    height: 11px;
    background: rgba(233, 223, 206, .35);
    margin-inline: 1.1rem;
}

/* Location line under the badges — pulls the address above the fold. */
.hero__loc {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-top: calc(var(--space-md) * -0.55);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    color: rgba(250, 247, 242, .7);
}

.hero__loc .icon { color: var(--gold-400); flex: none; }

/* Frosted info card in the hero's open right side. Inside .hero__inner so
   the scrubbed exit and the intro stagger both carry it automatically. */
.hero__card {
    position: absolute;
    right: var(--gutter);
    top: 0;
    width: 330px;
    display: grid;
    gap: var(--space-xs);
    padding: 1.5rem 1.6rem 1.3rem;
    background: rgba(14, 24, 19, .45);
    border: 1px solid rgba(233, 223, 206, .16);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--sand-100);
}

.hero__card-label {
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-400);
}

.hero__card-hours {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: var(--fs-sm);
    color: rgba(250, 247, 242, .72);
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(233, 223, 206, .14);
}

.hero__card-hours strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--sand-100);
    font-variant-numeric: tabular-nums;
}

.hero__card-list { display: grid; gap: .55rem; }

.hero__card-list a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--fs-sm);
    color: rgba(250, 247, 242, .82);
    transition: color var(--dur) ease;
}
.hero__card-list a:hover { color: var(--gold-400); }

.hero__card-list em {
    font-style: normal;
    color: rgba(250, 247, 242, .5);
    font-variant-numeric: tabular-nums;
}

.hero__card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(233, 223, 206, .14);
    font-size: var(--fs-xs);
}

.hero__card-foot a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: rgba(250, 247, 242, .72);
    transition: color var(--dur) ease;
}
.hero__card-foot a:hover { color: var(--gold-400); }

@media (max-width: 1240px) {
    .hero__card { display: none; }
}

.hero__title em {
    display: block;
    font-style: italic;
    color: var(--gold-400);
    padding-left: clamp(1rem, 8vw, 8rem);
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(212, 188, 138, .34);
}

.hero__lead {
    max-width: 46ch;
    color: rgba(250, 247, 242, .82);
    font-size: var(--fs-lead);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.hero .btn--ghost {
    --btn-line: rgba(233, 223, 206, .4);
    --btn-fg: var(--sand-100);
}
.hero .btn--ghost::after { background: var(--sand-100); }
.hero .btn--ghost:hover { color: var(--forest-800); border-color: var(--sand-100); }

/* Keep the hero actions clear of the scroll rail on wide screens. */
@media (min-width: 1025px) {
    .hero__meta { padding-right: clamp(2rem, 4vw, 4rem); }
}

.hero__scroll {
    position: absolute;
    right: clamp(.9rem, 2vw, 2rem);
    bottom: clamp(2.5rem, 6vh, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    font-size: var(--fs-micro);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, .6);
    writing-mode: vertical-rl;
}

.hero__scroll i {
    display: block;
    position: relative;
    width: 1px; height: 56px;
    overflow: hidden;
}

.hero__scroll i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--gold-400), transparent);
    animation: scrollHint 2.4s var(--ease-in-out) infinite;
}

/* transform only — transform-origin in keyframes forces the animation onto
   the main thread, so the wipe is expressed as a translate instead. */
@keyframes scrollHint {
    0%   { transform: translateY(-100%); }
    45%, 55% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* Interior page header */
/* Page header — two-column editorial block: the headline holds the left,
   the intro and its CTA sit bottom-right against it. Single-column left the
   whole right half empty and stranded the button mid-air. */
.page-head {
    position: relative;
    z-index: var(--z-content);
    padding-top: clamp(7.5rem, 15vh, 10.5rem);
    padding-bottom: var(--space-lg);
    background: var(--bg);
    overflow: hidden;
}

.page-head__inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
    align-items: end;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--line);
}

.page-head .crumbs { grid-column: 1 / -1; }

.page-head__title {
    grid-column: 1;
    font-size: var(--fs-d1);
    max-width: 15ch;
    margin: 0;
}
.page-head__title em { display: inline; }

/* Intro + CTA, stacked and bottom-aligned with the headline. */
.page-head__row {
    grid-column: 2;
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
    align-self: end;
    padding-bottom: .35rem;
}

.page-head__lead { max-width: 46ch; }

@media (max-width: 860px) {
    .page-head__inner { grid-template-columns: 1fr; }
    .page-head__title { grid-column: 1; max-width: 18ch; }
    .page-head__row { grid-column: 1; }
}

.crumbs {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-xs);
    color: var(--ink-faint);
}
.crumbs a:hover { color: var(--accent); }
.crumbs span { opacity: .5; }

/* 10. Sections & components =============================================== */

/* Marquee strip */
.marquee {
    position: relative;
    z-index: var(--z-content);
    padding-block: var(--space-sm);
    background: var(--forest-800);
    color: var(--sand-100);
    overflow: hidden;
    display: flex;
}

.marquee__track {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-md);
    padding-right: var(--space-md);
    white-space: nowrap;
    will-change: transform;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    font-style: italic;
    color: rgba(250, 247, 242, .82);
}

.marquee__item .icon { color: var(--gold-400); flex: none; }

/* Editorial two-column feature */
.feature {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-md);
    align-items: center;
}

.feature__media { grid-column: 1 / span 6; }
.feature__body { grid-column: 8 / span 5; display: grid; gap: var(--space-sm); }

.feature--flip .feature__media { grid-column: 7 / span 6; order: 2; }
.feature--flip .feature__body { grid-column: 1 / span 5; order: 1; }

.feature__stack {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}
.feature__stack .media:last-child { margin-top: clamp(2rem, 8vw, 6rem); }

/* Stat row */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}

.stat {
    position: relative;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line-soft);
    padding-right: var(--space-sm);
}
.stat:last-child { border-right: 0; }

/* Gold hairline that unzips across each column as the row enters view. */
.stat::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 100%; height: 1px;
    background: var(--gold-500);
    transform: scaleX(var(--rule-x, 1));
    transform-origin: left center;
}

.has-js:not(.reduced-motion):not(.no-motion) .stat { --rule-x: 0; }

.stat__num {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stat__num sup { font-size: .4em; vertical-align: super; color: var(--accent-ink); }
.stat__label {
    margin-top: .6rem;
    font-size: var(--fs-sm);
    letter-spacing: .06em;
    color: var(--ink-soft);
    max-width: 22ch;
}

/* Pinned services showcase */
.showcase { position: relative; }

.showcase__pin {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-lg);
    align-items: start;
}

.showcase__visual {
    position: sticky;
    top: 14vh;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--forest-700);
    box-shadow: var(--shadow-media);
}

.showcase__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(212, 188, 138, .22);
}

.showcase__img {
    position: absolute;
    inset: 0;
    opacity: 0;
    clip-path: inset(0% 0% var(--mask-y, 0%) 0%);
}
.showcase__img:first-child { opacity: 1; }
.showcase__img img { width: 100%; height: 100%; object-fit: cover; }

.showcase__list { display: grid; }

.showcase__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: .35rem clamp(1rem, 2.5vw, 2rem);
    padding-block: clamp(1rem, 2.2vh, 1.6rem);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: opacity .4s ease;
}

.showcase__item:first-child { border-top: 1px solid var(--line); }
.showcase__list:hover .showcase__item { opacity: .42; }
.showcase__list:hover .showcase__item:hover,
.showcase__item.is-active { opacity: 1; }

.showcase__name {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.9vw, 1.75rem);
    font-weight: 500;
    line-height: 1.1;
    transition: transform .5s var(--ease-out), color .4s ease;
}
.showcase__item:hover .showcase__name,
.showcase__item.is-active .showcase__name { transform: translateX(.5rem); color: var(--accent); }

.showcase__meta {
    display: flex;
    gap: 1rem;
    font-size: var(--fs-xs);
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Gold underline that grows on the active row. */
.showcase__item::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%; height: 1px;
    background: var(--gold-400);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s var(--ease-lux);
}
.showcase__item.is-active::after { transform: scaleX(1); }

.showcase__excerpt {
    grid-column: 2 / -1;
    max-width: 46ch;
    margin-top: .5rem;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height .5s var(--ease-out), opacity .4s ease, margin .5s var(--ease-out);
}
.showcase__item.is-active .showcase__excerpt { height: auto; opacity: 1; }

/* Pinned horizontal strip */
.hstrip {
    position: relative;
    z-index: var(--z-content);
    background: var(--bg);
    padding-block: var(--space-xl);
    overflow: hidden;
}

.hstrip__lane {
    display: flex;
    gap: var(--space-sm);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-xs);
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.hstrip__lane { cursor: grab; }
.hstrip__lane:active { cursor: grabbing; }

/* While scroll position is driving the rail, snapping would fight every
   frame — it is released back to the visitor on touch, below. */
.hstrip__lane.is-auto {
    scroll-snap-type: none;
    cursor: default;
    scrollbar-width: none;
}
.hstrip__lane.is-auto::-webkit-scrollbar { height: 0; }

.hstrip__lane::-webkit-scrollbar { height: 3px; }
.hstrip__lane::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.hstrip__card {
    position: relative;
    flex: none;
    width: clamp(210px, 23vw, 300px);
    scroll-snap-align: start;
}

.hstrip__card .media { aspect-ratio: 3 / 4; }

/* Oversized horizontally so the scroll-driven parallax (xPercent ±7 in JS)
   never exposes the frame edge. */
.hstrip__card .media > img {
    width: 116%;
    max-width: none;
    margin-left: -8%;
    will-change: transform;
}

/* Rail progress: filled by JS from the same value that drives scrollLeft. */
.hstrip__progress {
    max-width: var(--maxw);
    margin: var(--space-sm) auto 0;
    padding-inline: var(--gutter);
}

.hstrip__progress i {
    display: block;
    height: 2px;
    background: var(--gold-500);
    opacity: .55;
    transform: scaleX(0);
    transform-origin: left center;
}

@media (max-width: 860px) {
    /* Native swipe below 860px — the JS never drives the bar there. */
    .hstrip__progress { display: none; }
}

.hstrip__card:nth-child(even) { margin-top: clamp(1rem, 3vw, 2.25rem); }

.hstrip__caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: var(--space-xs);
    padding-top: .75rem;
    border-top: 1px solid var(--line);
}

.hstrip__name { font-family: var(--font-display); font-size: var(--fs-d4); font-weight: 500; }
.hstrip__meta { font-size: var(--fs-xs); color: var(--accent-ink); white-space: nowrap; }

@media (max-width: 860px) {
    .hstrip__card { width: min(72vw, 280px); }
    .hstrip__card:nth-child(even) { margin-top: 0; }
}

@media (hover: none) {
    .hstrip__lane.is-auto { scroll-snap-type: x mandatory; }
}

.reduced-motion .hstrip__lane.is-auto,
.no-motion .hstrip__lane.is-auto { scroll-snap-type: x mandatory; }

/* Treatment cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    /* box-shadow is not compositable — only the lift is transitioned. */
    transition: transform .5s var(--ease-out);
}

/* Inner ring + top highlight, so a card reads as a raised surface rather
   than a rectangle of slightly different cream. */
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(31, 46, 38, .06);
}

.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(14, 24, 19, .28), transparent 45%);
}
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.06); }

.card__tag {
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 2;
    padding: .4rem .8rem;
    border-radius: var(--radius-pill);
    background: rgba(250, 247, 242, .93);
    font-size: var(--fs-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--forest-700);
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    flex: 1;
    padding: clamp(1.6rem, 2.6vw, 2.25rem);
}

.card__title { font-size: var(--fs-d4); }
.card__excerpt { font-size: var(--fs-sm); color: var(--ink-soft); flex: 1; }

.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.card__price {
    font-family: var(--font-display);
    font-size: 1.55rem;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}
.card__price small { font-size: .62em; color: var(--ink-faint); font-family: var(--font-body); }

/* Treatment detail rows (services page) */
.treatment {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-xl);
    border-top: 1px solid var(--line);
    align-items: start;
    scroll-margin-top: 7rem;
}

/* The photo holds while the copy scrolls past it. */
.treatment__media .media { position: sticky; top: 12vh; }

/* Alternating dark ground, full-bleed without leaving the grid. */
.treatment--dark {
    background: var(--forest-800);
    color: var(--sand-100);
    border-top-color: transparent;
    box-shadow: 0 0 0 100vmax var(--forest-800);
    clip-path: inset(0 -100vmax);
    padding-block: var(--space-xl);
    margin-block: var(--space-md);
}

.treatment__media { grid-column: 1 / span 5; }
.treatment--flip .treatment__media { grid-column: 8 / span 5; order: 2; }
.treatment__body { grid-column: 7 / span 6; display: grid; gap: var(--space-sm); align-content: start; }
.treatment--flip .treatment__body { grid-column: 1 / span 6; order: 1; }

.treatment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
}

.treatment__price {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: var(--accent-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border-bottom: 2px solid var(--line-gold);
    padding-bottom: .15rem;
}

/* Outlined numeral anchoring each row — replaces an 11px index tag that was
   doing no work at all. */
.treatment__numeral {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.4vw, 4rem);
    font-weight: 500;
    line-height: .82;
    letter-spacing: -.03em;
    color: transparent;
    -webkit-text-stroke: 1px var(--line);
    margin-bottom: var(--space-2xs);
}
.treatment--dark .treatment__numeral { -webkit-text-stroke-color: rgba(233, 223, 206, .32); }

.treatment__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    color: var(--ink-faint);
}
.treatment__facts span { display: inline-flex; align-items: center; gap: .45rem; }

.includes { display: grid; gap: .7rem; }
.includes li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.includes .icon { color: var(--accent); margin-top: .28em; flex: none; }

/* Packages */
.packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm);
    align-items: start;
}

.package {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: clamp(1.75rem, 3vw, 2.75rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: transform .5s var(--ease-out), border-color .4s ease, background-color .4s ease;
}

.package { box-shadow: var(--shadow-sm); }
.package:hover { transform: translateY(-5px); border-color: var(--gold-500); }

.package--featured {
    position: relative;
    z-index: 1;
    transform: translateY(-10px);
    background: linear-gradient(165deg, var(--forest-700) 0%, var(--forest-900) 100%);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    color: var(--sand-100);
    --ink: var(--sand-100);
    --ink-soft: rgba(250, 247, 242, .7);
    --line: rgba(233, 223, 206, .18);
    --line-soft: rgba(233, 223, 206, .1);
    --accent: var(--gold-400);
}

.package__badge {
    align-self: flex-start;
    padding: .35rem .75rem;
    border-radius: var(--radius-pill);
    background: var(--gold-500);
    color: var(--forest-900);
    font-size: var(--fs-micro);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.package__name { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink); }
.package__price {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1;
    color: var(--accent);
}
.package__price small { font-family: var(--font-body); font-size: .28em; letter-spacing: .1em; color: var(--ink-faint); }
.package__summary { font-size: var(--fs-sm); color: var(--ink-soft); }
.package ul { display: grid; gap: .65rem; padding-top: var(--space-xs); border-top: 1px solid var(--line-soft); }
.package li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.package li .icon { color: var(--accent); margin-top: .3em; }
.package .btn { margin-top: auto; }
.package--featured::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(212, 188, 138, .30);
}
.package--featured:hover { transform: translateY(-16px); }
.package__price { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.package--featured .btn { --btn-bg: var(--gold-400); --btn-line: var(--gold-400); --btn-fg: var(--forest-900); }

@media (max-width: 900px) {
    .package--featured, .package--featured:hover { transform: none; }
}
.package--featured .btn::after { background: var(--sand-100); }

/* Gallery mosaic */
.mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xs);
    grid-auto-flow: dense;
}

.tile {
    position: relative;
    grid-column: span 2;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--sand-300);
    box-shadow: var(--shadow-media);
}

.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(31, 46, 38, .12);
}

.tile--wide { grid-column: span 4; aspect-ratio: 16 / 10; }
.tile--tall { grid-column: span 2; aspect-ratio: 3 / 4.6; }

.tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out), filter .6s ease;
}
.tile:hover img { transform: scale(1.05); }

.tile__caption {
    position: absolute;
    z-index: 2;
    left: 0; right: 0; bottom: 0;
    padding: clamp(1rem, 2vw, 1.75rem);
    color: var(--sand-100);
    background: linear-gradient(to top, rgba(14, 24, 19, .82), rgba(14, 24, 19, 0));
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.tile:hover .tile__caption,
.tile:focus-within .tile__caption { opacity: 1; transform: translateY(0); }

.tile__title { font-family: var(--font-display); font-size: var(--fs-d4); }
.tile__text { font-size: var(--fs-xs); color: rgba(250, 247, 242, .78); margin-top: .25rem; }

/* Testimonials */
.quotes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    align-items: stretch;
}

@media (max-width: 1180px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .quotes { grid-template-columns: 1fr; } }

.quote {
    display: grid;
    gap: var(--space-xs);
    align-content: start;
    padding: clamp(1.4rem, 1.9vw, 1.85rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.quote .icon--mark {
    color: var(--gold-400);
    opacity: 1;
    transform: scale(1.1);
    transform-origin: left top;
}

.quote__text {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.5;
    color: var(--ink);
}

.quote__by { font-size: var(--fs-xs); letter-spacing: .06em; color: var(--ink-faint); }
.quote__by strong { display: block; color: var(--ink); font-weight: 500; letter-spacing: 0; margin-bottom: .15rem; }

.stars { display: flex; gap: .25rem; color: var(--gold-500); }
.stars .icon { fill: currentColor; }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-md); }

.member__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: var(--space-xs);
    background: var(--sand-300);
}
.member__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.member:hover .member__media img { transform: scale(1.05); }

.member__name { font-family: var(--font-display); font-size: var(--fs-d4); }
.member__role { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin-block: .35rem .6rem; }
.member__note { font-size: var(--fs-sm); color: var(--ink-soft); }

/* Timeline / steps */
/* Steps + a sticky photo that keeps the right half of the dark section
   from sitting empty. Sticky, never pinned — page scroll stays native. */
.steps-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: var(--space-lg);
    align-items: start;
}

/* Holds the offer posters. Not sticky — two stacked squares are taller than
   the viewport, and a sticky element that tall just judders. */
.steps-media {
    display: grid;
    gap: var(--space-sm);
    align-content: start;
}

/* Square: the posters are 1:1 and a portrait crop cut through their heading
   and the contact strip. */
.steps-media .media { aspect-ratio: 1 / 1; }

@media (max-width: 1024px) {
    .steps-layout { grid-template-columns: 1fr; }
    .steps-media { display: none; }
}

.steps { display: grid; gap: 0; counter-reset: step; }

.step {
    display: grid;
    grid-template-columns: minmax(90px, 140px) 1fr;
    gap: var(--space-md);
    padding-block: var(--space-md);
    border-top: 1px solid var(--line);
    align-items: start;
}

.step__num {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}
.step__title { font-size: clamp(1.3rem, 2vw, 1.75rem); margin-bottom: .6rem; }
.step__text { color: var(--ink-soft); max-width: 58ch; }

/* House rules (About) — card grid on cream; five cards sit 3 + 2-centred.
   NB: item class is rules__item, NOT .rule — .rule is the site's 1px
   hairline divider (line ~371) and its height crushes anything sharing it. */
.rules {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-md);
}

.rules__item {
    grid-column: span 2;
    display: grid;
    gap: .55rem;
    align-content: start;
    padding: 1.4rem 1.5rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

/* Second row (cards 4-5) centred under the three above. */
.rules__item:nth-child(4) { grid-column: 2 / span 2; }

.rules__num {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}

.rules__title { font-size: var(--fs-d4); }

.rules__text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; }

@media (max-width: 1024px) {
    .rules { grid-template-columns: repeat(2, 1fr); }
    .rules__item, .rules__item:nth-child(4) { grid-column: span 1; }
}

@media (max-width: 640px) {
    .rules { grid-template-columns: 1fr; }
    .rules__item, .rules__item:nth-child(4) { grid-column: span 1; }
}

/* Duration/price tiers on a treatment row */
.tiers {
    display: grid;
    gap: 0;
    max-width: 22rem;
    border-top: 1px solid var(--line);
}

.tiers li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .6rem;
    border-bottom: 1px solid var(--line);
}

.tiers__time { font-size: var(--fs-sm); color: var(--ink-soft); }

.tiers__price {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.section--dark .tiers,
.section--dark .tiers li { border-color: rgba(233, 223, 206, .16); }
.section--dark .tiers__time { color: rgba(250, 247, 242, .6); }
.section--dark .tiers__price { color: var(--sand-100); }

.treatment__price small {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--ink-soft);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--line); }

.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    min-height: 64px;
    padding-block: var(--space-sm);
    text-align: left;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    color: var(--ink);
    transition: color var(--dur) ease;
}
.accordion__btn:hover { color: var(--accent); }

.accordion__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    transition: transform .45s var(--ease-out), background-color .3s ease, color .3s ease;
}
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); background: var(--accent); color: var(--sand-50); }

.accordion__panel { overflow: hidden; height: 0; }
.accordion__panel-inner { padding-bottom: var(--space-sm); color: var(--ink-soft); max-width: 68ch; }

/* Contact info blocks */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }

.info__label {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: .75rem;
}

.info__value { font-size: var(--fs-lead); font-family: var(--font-display); line-height: 1.35; }
.info__value a { border-bottom: 1px solid var(--line); transition: border-color var(--dur) ease, color var(--dur) ease; }
.info__value a:hover { color: var(--accent); border-color: var(--accent); }
.info__note { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .5rem; }

.map {
    position: relative;
    aspect-ratio: 21 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--sand-200);
}
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.95) sepia(.12); }

/* Big CTA band */
.band {
    position: relative;
    z-index: var(--z-content);
    padding-block: var(--space-xl);
    background: var(--forest-800);
    color: var(--sand-100);
    overflow: hidden;
    text-align: center;
}

.band__bg { position: absolute; inset: -10% 0; z-index: 0; opacity: .30; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.band__inner { position: relative; z-index: 1; display: grid; gap: var(--space-sm); justify-items: center; }
.band__title { font-size: var(--fs-d1); max-width: 18ch; }
.band__title em { color: var(--gold-400); }

/* 11. Forms ================================================================ */

.form {
    display: grid;
    gap: var(--space-sm);
}

.form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.field { display: grid; gap: .5rem; }
.field--full { grid-column: 1 / -1; }

.field__label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--ink);
}
.field__req { color: var(--accent); }

.field__hint { font-size: var(--fs-xs); color: var(--ink-faint); }

.field__control {
    width: 100%;
    min-height: 54px;
    padding: .95rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: var(--fs-body);
    transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease;
}

.field__control::placeholder { color: var(--ink-faint); }

.field__control:hover { border-color: var(--sage-400); }

.field__control:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-500) 22%, transparent);
}

textarea.field__control { min-height: 148px; resize: vertical; line-height: 1.6; }

select.field__control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236E7A70' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.75rem;
    cursor: pointer;
}

.field.is-invalid .field__control { border-color: var(--danger); }
.field.is-invalid .field__control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }

.field__error {
    display: none;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-xs);
    color: var(--danger);
}
.field.is-invalid .field__error { display: flex; }

/* Chip radio group */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }

.chip { position: relative; }
.chip input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.chip span {
    display: block;
    padding: .7rem 1.15rem;
    min-height: 46px;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}
.chip input:hover + span { border-color: var(--sage-400); color: var(--ink); }
.chip input:checked + span {
    background: var(--forest-700);
    border-color: var(--forest-700);
    color: var(--sand-100);
}
.chip input:focus-visible + span { outline: 2px solid var(--gold-600); outline-offset: 3px; }

/* Consent checkbox */
.consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    cursor: pointer;
}
.consent input {
    appearance: none;
    width: 22px; height: 22px;
    margin-top: .15em;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
.consent input::after {
    content: '';
    width: 11px; height: 6px;
    border-left: 1.75px solid var(--sand-50);
    border-bottom: 1.75px solid var(--sand-50);
    transform: rotate(-45deg) scale(0);
    transition: transform .25s var(--ease-out);
}
.consent input:checked { background: var(--forest-700); border-color: var(--forest-700); }
.consent input:checked::after { transform: rotate(-45deg) scale(1); }

/* Form-level feedback */
.form__alert {
    display: none;
    gap: .75rem;
    align-items: start;
    padding: 1.1rem 1.35rem;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: var(--fs-sm);
}
.form__alert.is-shown { display: grid; grid-template-columns: auto 1fr; }
.form__alert--ok { border-color: color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); color: var(--success); }
.form__alert--err { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); color: var(--danger); }
.form__alert strong { display: block; margin-bottom: .15rem; }

.form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
}

/* Honeypot — never visible, never announced */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Booking layout */
.booking {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: var(--space-lg);
    align-items: start;
}

.booking__aside {
    position: sticky;
    top: 7.5rem;
    display: grid;
    gap: var(--space-sm);
    padding: clamp(1.6rem, 2.8vw, 2.4rem);
    border-radius: var(--radius-lg);
    background: var(--forest-800);
    color: var(--sand-100);
}

.booking__aside h2 { font-size: 1.5rem; }

.summary { display: grid; gap: .85rem; padding-top: var(--space-xs); border-top: 1px solid var(--line); }
.summary li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.summary li strong { color: var(--sand-100); font-weight: 500; text-align: right; }
.summary li[data-empty] strong { color: rgba(250, 247, 242, .35); font-style: italic; }

.booking__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-top: var(--space-xs);
    border-top: 1px solid var(--line);
}
.booking__total span { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.booking__total strong { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--gold-400); }

.booking__fineprint { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }

/* 12. Footer =============================================================== */

.foot {
    position: relative;
    z-index: var(--z-content);
    padding-top: var(--space-xl);
    background: var(--forest-900);
    color: var(--sand-100);
    overflow: hidden;
}

.foot__glow {
    position: absolute;
    top: -30%; left: 50%;
    width: min(1100px, 120vw); height: 700px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(192, 160, 98, .16), transparent 68%);
    pointer-events: none;
}

.foot__note { font-size: var(--fs-sm); color: rgba(250, 247, 242, .65); max-width: 42ch; margin-bottom: var(--space-xs); }

.foot__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: var(--space-md);
    max-width: var(--maxw);
    margin-inline: auto;
    padding: var(--space-lg) var(--gutter);
}

.foot__heading {
    font-family: var(--font-body);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: var(--space-xs);
}

.foot__col ul { display: grid; gap: .7rem; }
.foot__col a, .foot__col address {
    font-size: var(--fs-sm);
    color: rgba(250, 247, 242, .68);
    transition: color var(--dur) ease;
    line-height: 1.7;
}
.foot__col a:hover { color: var(--gold-400); }

.foot__more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--gold-400) !important;
    margin-top: .3rem;
}
.foot__more .icon { transition: transform var(--dur) var(--ease-out); }
.foot__more:hover .icon { transform: translateX(4px); }

/* Oversized wordmark with a cursor-tracked gradient reveal.
   Width-capped: at full --maxw the band ran 280px tall and dominated the
   footer. The pointer→viewBox mapping scales with the svg rect, so the cap
   is safe for the reveal effect. */
.foot__wordmark {
    position: relative;
    max-width: min(var(--maxw), 940px);
    margin-inline: auto;
    padding-inline: var(--gutter);
    margin-top: calc(var(--space-lg) * -1);
}

.foot__wordmark svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.foot__wordmark text {
    font-family: var(--font-display);
    /* Sized for "ELITE SPA" (9 chars) inside the 300-unit viewBox — the old
       62px fit the 5-char "ELITE" only. */
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0.12em;
    /* Nudges the wide letter-spacing back to optical centre. */
    transform: translateX(0.07em);
    fill: transparent;
    stroke-width: 0.4;
    user-select: none;
}

.foot__wordmark-base { stroke: rgba(233, 223, 206, .10); }

.foot__wordmark-draw {
    stroke: var(--gold-500);
    stroke-opacity: .17;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
}

.foot__wordmark.is-drawn .foot__wordmark-draw {
    animation: wordmarkDraw 3.2s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes wordmarkDraw {
    to { stroke-dashoffset: 0; }
}

.foot__wordmark-fill {
    stroke: url(#wmGradient);
    stroke-width: 1;
    opacity: 0;
    /* Lifts the lit letters off the near-black footer. */
    filter: drop-shadow(0 0 10px rgba(212, 188, 138, .30));
    transition: opacity .45s var(--ease-out);
}

.foot__wordmark.is-hovered .foot__wordmark-fill { opacity: 1; }

/* Touch devices get the finished state — there is no cursor to track. */
@media (hover: none) {
    .foot__wordmark { cursor: default; }
    .foot__wordmark-fill { opacity: .8; }
}

@media (max-width: 720px) {
    .foot__wordmark { margin-top: 0; }
    .foot__wordmark text { font-size: 42px; letter-spacing: .08em; }
}

.reduced-motion .foot__wordmark-draw,
.no-motion .foot__wordmark-draw {
    animation: none;
    stroke-dashoffset: 0;
}

.foot__bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    max-width: var(--maxw);
    margin-inline: auto;
    padding: var(--space-sm) var(--gutter);
    border-top: 1px solid rgba(233, 223, 206, .14);
    font-size: var(--fs-xs);
    color: rgba(250, 247, 242, .5);
}

.foot__bar-links { display: flex; align-items: center; gap: var(--space-sm); }
.foot__bar-links a:hover { color: var(--gold-400); }

.foot__top-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    color: rgba(250, 247, 242, .65);
    font-size: var(--fs-xs);
    transition: color var(--dur) ease;
}
.foot__top-btn:hover { color: var(--gold-400); }
.icon--up { transform: rotate(-90deg); }

/* Anchor-style chips (jump links, not radio inputs) */
a.chip { text-decoration: none; }
a.chip:hover span { border-color: var(--gold-500); color: var(--ink); }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-items: center;
    padding: clamp(3.5rem, 8vh, 6rem) clamp(1rem, 6vw, 6rem);
}

.lightbox[hidden] { display: none; }

.lightbox__scrim {
    position: absolute;
    inset: 0;
    background: rgba(14, 24, 19, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: zoom-out;
    opacity: 0;
}

.lightbox__figure {
    position: relative;
    display: grid;
    gap: var(--space-xs);
    justify-items: center;
    max-width: min(1100px, 100%);
    max-height: 100%;
}

.lightbox__img {
    max-width: 100%;
    max-height: 72vh;
    width: auto;
    border-radius: var(--radius);
    box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
    background: var(--forest-700);
}

.lightbox__cap {
    display: grid;
    gap: .3rem;
    text-align: center;
    color: var(--sand-100);
}
.lightbox__title { font-family: var(--font-display); font-size: 1.35rem; }
.lightbox__text { font-size: var(--fs-sm); color: rgba(250, 247, 242, .65); }

.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border: 1px solid rgba(233, 223, 206, .28);
    border-radius: 50%;
    color: var(--sand-100);
    background: rgba(22, 36, 29, .55);
    backdrop-filter: blur(6px);
    transition: background-color var(--dur) ease, border-color var(--dur) ease, transform var(--dur) var(--ease-out);
}
.lightbox__btn:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--forest-900); }
.lightbox__btn:active { transform: scale(.94); }

.lightbox__btn--close { top: clamp(1rem, 3vh, 2rem); right: clamp(1rem, 3vw, 2.5rem); }
.lightbox__btn--prev { left: clamp(.5rem, 2.5vw, 2.5rem); top: 50%; transform: translateY(-50%) rotate(180deg); }
.lightbox__btn--next { right: clamp(.5rem, 2.5vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__btn--prev:active { transform: translateY(-50%) rotate(180deg) scale(.94); }
.lightbox__btn--next:active { transform: translateY(-50%) scale(.94); }

.lightbox__count {
    position: absolute;
    bottom: clamp(1rem, 3vh, 2rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    letter-spacing: .18em;
    color: rgba(250, 247, 242, .55);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .lightbox__btn--prev { left: .5rem; }
    .lightbox__btn--next { right: .5rem; }
    .lightbox__img { max-height: 60vh; }
}

/* Nav: shrinks once you start scrolling, with a scroll-progress hairline. */
.nav { --nav-pad: clamp(1.05rem, 2vw, 1.6rem); }
.nav.is-stuck { --nav-pad: .65rem; }

.nav__brand-sub {
    transition: opacity var(--dur) var(--ease-out), max-height var(--dur) var(--ease-out);
    max-height: 2em;
}
.nav.is-stuck .nav__brand-sub { opacity: 0; max-height: 0; }

.nav__progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(var(--progress, 0));
    transform-origin: left center;
    opacity: 0;
    transition: opacity var(--dur) ease;
}
.nav.is-stuck .nav__progress { opacity: 1; }

/* A soft gold light that follows the pointer across a card. One delegated
   handler writes --mx/--my; nothing else changes, so there is no layout or
   paint cost beyond the gradient itself. */
.card, .package, .quote { position: relative; isolation: isolate; }

.card::before,
.package::before,
.quote::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                rgba(212, 188, 138, .09), transparent 62%);
    opacity: 0;
    transition: opacity .4s var(--ease-out);
}

.card.is-lit::before,
.package.is-lit::before,
.quote.is-lit::before { opacity: 1; }

/* .package--featured already uses ::before for its gold ring. */
.package--featured::before { background: none; opacity: 1; }

.card > *, .package > *, .quote > * { position: relative; z-index: 1; }

@media (hover: none) {
    .card::before, .package::before, .quote::before { display: none; }
}

/* A lead card, so a grid of identical tiles gains a focal point. */
.card--feature { grid-column: span 2; }
.card--feature .card__media { aspect-ratio: 16 / 10; }
.card--feature .card__title { font-size: var(--fs-d3); }
.card--feature .card__excerpt { max-width: 46ch; }

@media (max-width: 900px) {
    .card--feature { grid-column: span 1; }
}

/* 13. Responsive =========================================================== */

@media (max-width: 1180px) {
    .foot__grid { grid-template-columns: repeat(2, 1fr); }
    .showcase__pin { grid-template-columns: 1fr; gap: var(--space-md); min-height: auto; }
    .showcase__visual { position: relative; top: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 1024px) {
    .nav__links, .nav__phone { display: none; }
    .menu-toggle { display: flex; }

    .menu__inner { grid-template-columns: 1fr; gap: var(--space-md); align-content: start; }
    .menu__aside { grid-template-columns: repeat(2, 1fr); }

    .feature, .treatment { grid-template-columns: 1fr; gap: var(--space-md); }
    .feature__media, .feature__body,
    .feature--flip .feature__media, .feature--flip .feature__body,
    .treatment__media, .treatment__body,
    .treatment--flip .treatment__media, .treatment--flip .treatment__body {
        grid-column: 1 / -1;
        order: initial;
    }

    .booking { grid-template-columns: 1fr; }
    .booking__aside { position: static; }
    .treatment__media .media { position: relative; top: auto; }

    .split-head { grid-template-columns: 1fr; gap: var(--space-sm); align-items: start; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-sm); }
    .stat:nth-child(2n) { border-right: 0; }
    .mosaic { grid-template-columns: repeat(4, 1fr); }
    .tile--wide { grid-column: span 4; }
}

@media (max-width: 720px) {
    :root {
        --space-xl: 4.5rem;
        --space-2xl: 5.5rem;
    }

    body { font-size: 1rem; }

    .hero { min-height: 92svh; }
    .hero__title em { padding-left: 0; }
    .hero__meta { flex-direction: column; align-items: flex-start; }
    .hero__scroll { display: none; }
    .hero__actions .btn { flex: 1 1 auto; }

    .menu__aside { grid-template-columns: 1fr; }
    .menu__link { grid-template-columns: auto 1fr; }
    .menu__arrow { display: none; }

    .form__grid { grid-template-columns: 1fr; }

    .mosaic { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
    .tile, .tile--wide, .tile--tall { grid-column: span 2; aspect-ratio: 4 / 3; }
    .tile__caption { opacity: 1; transform: none; }

    .step { grid-template-columns: 1fr; gap: .5rem; }
    .stats { grid-template-columns: 1fr; }
    .stat { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: var(--space-sm); }
    .stat:last-child { border-bottom: 0; }

    .foot__grid { grid-template-columns: 1fr 1fr; }
    .foot__bar { flex-direction: column; align-items: flex-start; }

    .feature__stack { grid-template-columns: 1fr; }
    .feature__stack .media:last-child { margin-top: 0; }

    .treatment__head { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .curtain__panel:nth-child(n+3) { display: none; }
}

@media (max-width: 420px) {
    .btn--lg { padding: 1rem 1.5rem; font-size: var(--fs-sm); }
    .nav__brand-sub { display: none; }
}

/* 14. Reduced motion & print =============================================== */

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

    .grain { animation: none; }
    .hero__scroll i { animation: none; opacity: .5; }
    .ambient { display: none; }
    .word__inner { transform: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    [data-mask] { --mask-y: 0% !important; }
    .split-head, .stat { --rule-x: 1 !important; }
    .showcase__item::after { transform: scaleX(0); }
    [data-mask] > img,
    [data-mask] > picture { transform: none !important; }
    .marquee__track { transform: none !important; }
    .hero-stage { height: auto; }
    .hero { position: relative; }
    .hero__vignette { display: none; }
}

@media print {
    .nav, .menu, .curtain, .preloader, .ambient, .grain,
    .hero__scroll, .foot__top-btn { display: none !important; }
    body { background: #fff; color: #000; }
    .section { padding-block: 1.5rem; }
}