/* ==========================================================================
   Demo Salon Ltd - Warm Sand & Ivory
   Hand-built, no framework. Sections are BEM-ish and independent.
   ========================================================================== */

:root {
    --ivory:      #FBF7F1;
    --ivory-2:    #F4EDE2;
    --paper:      #FFFFFF;
    --ink:        #221D19;
    --ink-2:      #4A423B;
    --muted:      #8A7E73;
    --sand:       #E9DCC7;
    --sand-2:     #DCC7A8;
    --clay:       #B0705A;
    --clay-dk:    #8C543F;
    --blush:      #F6E3DD;  /* topbar: the clay accent, lightened and desaturated */
    --blush-line: rgba(176, 112, 90, .20);
    --dark:       #2A2320;
    --dark-2:     #3A312B;
    --line:       rgba(34, 29, 25, .13);
    --line-soft:  rgba(34, 29, 25, .07);

    --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --wrap: 1200px;
    --gut: clamp(1.15rem, 4vw, 2.5rem);
    --r: 2px;
    --shadow-s: 0 2px 14px rgba(34, 29, 25, .06);
    --shadow-m: 0 18px 50px -22px rgba(34, 29, 25, .35);
    --shadow-l: 0 36px 90px -40px rgba(34, 29, 25, .5);
    --ease: cubic-bezier(.22, .68, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink-2);
    font: 400 16px/1.75 var(--sans);
    letter-spacing: .012em;
    overflow-x: hidden;
}

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

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: .004em;
    line-height: 1.12;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--clay-dk); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--clay); }

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

::selection { background: var(--sand-2); color: var(--ink); }

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

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ink); color: #fff; padding: .8rem 1.2rem;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- structure */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
}
.wrap--wide   { max-width: 1520px; }
.wrap--narrow { max-width: 780px; }

.sec { padding: clamp(4.5rem, 9vw, 8.5rem) 0; position: relative; }
.sec--alt { background: var(--ivory-2); }
.sec--dark { background: var(--dark); color: rgba(255, 255, 255, .72); }
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: #fff; }

.sec__head { max-width: 62ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.sec__head--split {
    display: flex; flex-wrap: wrap; gap: 1.5rem 3rem;
    align-items: flex-end; justify-content: space-between; max-width: none;
}
.sec__head--split > div { max-width: 38ch; }
.sec__head--split .sec__lede { max-width: 44ch; margin: 0; }

.sec__title { font-size: clamp(2rem, 4.2vw, 3.35rem); }
.sec__title--center { text-align: center; }
.sec__lede { color: var(--muted); font-size: 1.02rem; margin-top: 1rem; }
.sec__lede--center { text-align: center; margin-inline: auto; max-width: 56ch; }
.sec__cta { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.center { text-align: center; }
.empty { text-align: center; color: var(--muted); padding: 3rem 0; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .7rem;
    margin: 0 0 1.1rem;
    font: 500 .72rem/1 var(--sans);
    letter-spacing: .3em; text-transform: uppercase; color: var(--clay);
}
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .6; }
.eyebrow--center { display: flex; justify-content: center; }
.eyebrow--center::after { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .6; }
.eyebrow--light { color: var(--sand-2); }

.prose { color: var(--ink-2); }
.prose p { margin-bottom: 1.15em; }
.prose--lg { font-size: 1.075rem; line-height: 1.85; }
.prose--lg p:first-child::first-letter {
    float: left; font-family: var(--serif); font-size: 3.6em; line-height: .82;
    padding: .06em .12em 0 0; color: var(--clay);
}

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: 1.02rem 1.9rem;
    font: 500 .78rem/1 var(--sans);
    letter-spacing: .18em; text-transform: uppercase;
    border: 1px solid transparent; border-radius: var(--r);
    cursor: pointer; position: relative; overflow: hidden;
    transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn .ico { width: 1.05rem; height: 1.05rem; transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn--sm { padding: .8rem 1.35rem; font-size: .7rem; }
.btn--full { width: 100%; }

.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--clay-dk); color: #fff; transform: translateY(-2px); }

.btn--outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--paper); }
.btn--light { border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.link-more {
    display: inline-flex; align-items: center; gap: .5rem;
    font: 500 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink); padding-bottom: .3rem;
    border-bottom: 1px solid var(--line);
}
.link-more .ico { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.link-more:hover { color: var(--clay-dk); border-color: var(--clay); }
.link-more:hover .ico { transform: translateX(4px); }

.rnd {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    border: 1px solid var(--line); background: transparent; color: var(--ink);
    cursor: pointer; transition: all .3s var(--ease); flex: none;
}
.rnd:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.rnd--soft { background: var(--sand); border-color: transparent; color: var(--clay-dk); cursor: default; }
.rnd--soft:hover { background: var(--sand); color: var(--clay-dk); }

/* ----------------------------------------------------------------- topbar */

.topbar {
    background: var(--blush); color: var(--ink-2);
    border-bottom: 1px solid var(--blush-line);
    font-size: .78rem; letter-spacing: .06em;
}
.topbar__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 2.9rem; flex-wrap: wrap;
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 1.6rem; }
.topbar__bit { display: inline-flex; align-items: center; gap: .5rem; color: inherit; }
.topbar__bit .ico { width: .95rem; height: .95rem; color: var(--clay-dk); }
.topbar__bit:hover { color: var(--ink); }
.topbar__social { display: flex; align-items: center; gap: .85rem; }
.topbar__social a { color: var(--clay-dk); display: inline-flex; opacity: .75; transition: opacity .25s var(--ease), color .25s var(--ease); }
.topbar__social a:hover { color: var(--clay-dk); opacity: 1; }
.topbar__social .ico { width: 1rem; height: 1rem; }

/* ----------------------------------------------------------------- header */

.site-header {
    position: sticky; top: 0; z-index: 90;
    background: rgba(251, 247, 241, .92);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line-soft);
    transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; min-height: 5.1rem;
}
.site-header--overlay {
    /* top:auto is load-bearing. The base .site-header rule sets top:0 for its
       sticky behaviour, and an absolutely positioned box inherits it - which
       pinned this header to the very top of the page, right on top of the
       topbar. top:auto puts it back at its static position, i.e. directly
       below the topbar, still floating over the hero. */
    position: absolute; left: 0; right: 0; top: auto;
    background: transparent; border-color: transparent;
}
.site-header--overlay.is-stuck {
    position: fixed; top: 0;   /* once stuck it SHOULD pin to the viewport */
    background: rgba(251, 247, 241, .95);
    border-color: var(--line-soft);
    box-shadow: var(--shadow-s);
    animation: dropin .4s var(--ease) both;
}
@keyframes dropin { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.brand { display: inline-flex; align-items: center; gap: .85rem; color: var(--ink); }
.brand__img { max-height: 3rem; width: auto; }
.brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    border: 1px solid var(--clay); color: var(--clay-dk);
    font: 400 1.05rem/1 var(--serif); letter-spacing: .06em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font: 400 1.42rem/1.05 var(--serif); color: var(--ink); letter-spacing: .01em; }
.brand__sub { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: .28rem; }
.brand--light .brand__name { color: #fff; }
.brand--light .brand__sub { color: rgba(255, 255, 255, .55); }
.brand--light .brand__mark { border-color: var(--sand-2); color: var(--sand-2); }

.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.1rem); }
.nav__link {
    position: relative; color: var(--ink);
    font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400;
    padding: .4rem 0;
}
.nav__link::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: var(--clay); transition: width .3s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: var(--clay-dk); }
.nav__close, .nav__foot { display: none; }

.site-header__cta { display: flex; align-items: center; gap: .8rem; }

.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 2.75rem; height: 2.75rem; padding: 0 .6rem;
    background: transparent; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.nav-toggle span { display: block; height: 1px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle span:nth-child(2) { width: 70%; }

/* ------------------------------------------------------------------- hero */

.hero {
    position: relative;
    padding: clamp(9rem, 15vw, 12.5rem) 0 clamp(4rem, 8vw, 7rem);
    background: linear-gradient(175deg, var(--ivory) 0%, var(--ivory-2) 62%, var(--sand) 190%);
    overflow: hidden;
}
.hero__wash {
    position: absolute; inset: auto -20% -45% 45%;
    height: 78vh; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(220, 199, 168, .55), rgba(220, 199, 168, 0) 72%);
    pointer-events: none;
}
.hero__in {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center; position: relative;
}
.hero__title {
    font-size: clamp(2.9rem, 7.2vw, 5.6rem);
    line-height: 1.02; letter-spacing: -.012em;
}
.hero__title em { font-style: italic; color: var(--clay-dk); }
.hero__lede { margin-top: 1.6rem; max-width: 44ch; font-size: 1.06rem; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }

.hero__stats {
    display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.2rem);
    margin-top: clamp(2.5rem, 5vw, 3.6rem);
    padding-top: 2rem; border-top: 1px solid var(--line);
}
.hero__stats b { display: block; font: 400 2.15rem/1 var(--serif); color: var(--ink); }
.hero__stats span { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.hero__media { position: relative; }
.hero__arch {
    margin: 0; overflow: hidden;
    border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px;
    box-shadow: var(--shadow-l);
    aspect-ratio: 4 / 5;
}
.hero__arch img { width: 100%; height: 100%; object-fit: cover; }
.hero__inset {
    position: absolute; left: -3.5rem; bottom: -2rem; width: 11.5rem;
    margin: 0; overflow: hidden; border: 8px solid var(--ivory);
    border-radius: var(--r); box-shadow: var(--shadow-m); aspect-ratio: 1;
}
.hero__inset img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge {
    position: absolute; right: -1.2rem; top: 2.2rem;
    background: var(--paper); padding: 1rem 1.25rem; border-radius: var(--r);
    box-shadow: var(--shadow-m); text-align: center; max-width: 11rem;
}
.hero__badge-stars { display: flex; justify-content: center; gap: .1rem; color: var(--clay); }
.hero__badge-stars .ico { width: .85rem; height: .85rem; fill: currentColor; }
.hero__badge b { display: block; font: 400 1.55rem/1.2 var(--serif); color: var(--ink); }
.hero__badge span:last-child { font-size: .68rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

.hero__cue {
    position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
    width: 1px; height: 3.4rem; background: var(--line); overflow: hidden;
}
.hero__cue span { position: absolute; inset: 0; background: var(--clay); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------------------------------------------------------------- marquee */

.marquee {
    background: var(--dark); color: var(--sand);
    padding: 1.15rem 0; overflow: hidden; position: relative;
}
.marquee__track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee__set { display: flex; align-items: center; }
.marquee__word {
    font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.75rem);
    font-style: italic; padding: 0 1.4rem; white-space: nowrap; color: #fff;
}
.marquee__dot { color: var(--clay); display: inline-flex; }
.marquee__dot .ico { width: .95rem; height: .95rem; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ------------------------------------------------------------------ intro */

.intro { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.intro__media { position: relative; padding-bottom: 3rem; }
.intro__img { margin: 0; overflow: hidden; border-radius: var(--r); }
.intro__img--tall { aspect-ratio: 4 / 5; box-shadow: var(--shadow-m); }
.intro__img--tall img { width: 100%; height: 100%; object-fit: cover; }
.intro__img--small {
    position: absolute; right: -2.2rem; bottom: 0; width: 55%;
    border: 9px solid var(--ivory); box-shadow: var(--shadow-m); aspect-ratio: 1;
}
.intro__img--small img { width: 100%; height: 100%; object-fit: cover; }
.sec--alt .intro__img--small { border-color: var(--ivory-2); }
.intro__seal {
    position: absolute; left: -1.4rem; top: -1.4rem;
    width: 6.6rem; height: 6.6rem; border-radius: 50%;
    background: var(--clay); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .25rem; text-align: center; box-shadow: var(--shadow-m);
}
.intro__seal .ico { width: 1.35rem; height: 1.35rem; }
.intro__seal span { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }

.intro__points { margin: 1.8rem 0 0; display: grid; gap: .85rem; }
.intro__points li { display: flex; gap: .75rem; align-items: baseline; font-size: .96rem; color: var(--muted); }
.intro__points b { color: var(--ink); font-weight: 500; }
.intro__tick {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sand); color: var(--clay-dk);
    transform: translateY(.2rem);
}
.intro__tick .ico { width: .8rem; height: .8rem; }
.intro__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.2rem; }
.intro__sig { margin: 0; }
.intro__sig-name { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--ink); }

/* ------------------------------------------------------------ service cards */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.4vw, 2.1rem); }
.card {
    background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-m); }
.card__media { display: block; position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__num {
    position: absolute; left: 1rem; top: 1rem;
    font: 400 .78rem/1 var(--sans); letter-spacing: .2em;
    background: rgba(251, 247, 241, .92); color: var(--ink); padding: .45rem .6rem;
}
.card__body { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; position: relative; }
.card__icon {
    position: absolute; right: 1.5rem; top: -1.55rem;
    width: 3.1rem; height: 3.1rem; border-radius: 50%;
    background: var(--sand); color: var(--clay-dk);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 8px var(--paper);
}
.card__title { font-size: 1.5rem; margin-bottom: .35rem; padding-right: 2.5rem; }
.card__title a { color: inherit; }
.card__title a:hover { color: var(--clay-dk); }
.card__sub { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); margin-bottom: .7rem; }
.card__text { color: var(--muted); font-size: .95rem; margin-bottom: 1.4rem; }
.card__foot {
    margin: auto 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.card__price { font-family: var(--serif); font-size: 1.28rem; color: var(--ink); }
.card__more { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.card:hover .card__more { color: var(--clay-dk); }
.card__more .ico { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------- features */

.feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2.2rem); }
.feat { text-align: center; padding: 2.4rem 1.5rem; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--paper); transition: all .4s var(--ease); }
.feat:hover { border-color: var(--sand-2); transform: translateY(-5px); }
.feat__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.6rem; height: 3.6rem; border-radius: 50%;
    background: var(--ivory-2); color: var(--clay-dk); margin-bottom: 1.2rem;
    transition: all .4s var(--ease);
}
.feat:hover .feat__icon { background: var(--clay); color: #fff; }
.feat__icon .ico { width: 1.5rem; height: 1.5rem; }
.feat__title { font-size: 1.32rem; margin-bottom: .6rem; }
.feat__text { color: var(--muted); font-size: .93rem; }

/* ---------------------------------------------------------------- pillars */

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.8rem); }
.pillar { position: relative; padding: 2.6rem 2rem; background: var(--paper); border-radius: var(--r); }
.pillar__no {
    position: absolute; right: 1.4rem; top: 1rem;
    font: 400 3.4rem/1 var(--serif); color: var(--sand);
}
.pillar__icon { display: inline-flex; color: var(--clay); margin-bottom: 1rem; }
.pillar__icon .ico { width: 1.9rem; height: 1.9rem; }
.pillar__title { font-size: 1.45rem; margin-bottom: .65rem; }
.pillar__text { color: var(--muted); font-size: .96rem; }

/* ------------------------------------------------------------------ steps */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); counter-reset: s; }
.step { position: relative; padding-top: 2.2rem; }
.step::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: rgba(255, 255, 255, .16);
}
.step__num {
    position: absolute; right: 0; top: -1.1rem;
    font: 400 3.6rem/1 var(--serif); color: rgba(255, 255, 255, .09);
}
.step__icon { display: inline-flex; color: var(--sand-2); margin-bottom: 1rem; }
.step__icon .ico { width: 1.8rem; height: 1.8rem; }
.step__title { font-size: 1.35rem; margin-bottom: .55rem; }
.step__text { font-size: .94rem; color: rgba(255, 255, 255, .62); }

/* ------------------------------------------------------------- price menu */

.menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.menu__group-title {
    font-size: 1.05rem; letter-spacing: .24em; text-transform: uppercase;
    font-family: var(--sans); font-weight: 500; color: var(--clay-dk);
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
}
.menu__group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.menu__list { display: grid; gap: 1.15rem; }
.menu__row { display: flex; align-items: baseline; gap: .6rem; }
.menu__name { display: flex; flex-direction: column; }
.menu__name b { font: 400 1.22rem/1.3 var(--serif); color: var(--ink); }
.menu__name i { font-style: normal; font-size: .84rem; color: var(--muted); }
.menu__leader { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-.25rem); min-width: 1.5rem; }
.menu__price { font: 400 1.22rem/1 var(--serif); color: var(--clay-dk); white-space: nowrap; }
.menu__note { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 2rem; font-style: italic; }

/* ---------------------------------------------------------------- gallery */

.grid-gal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 15rem;
    gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.gal { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); grid-row: span 1; }
.gal--tall { grid-row: span 2; }
.gal--wide { grid-column: span 2; }
.gal__link { display: block; width: 100%; height: 100%; position: relative; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gal:hover img { transform: scale(1.07); }
.gal__hover {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(42, 35, 32, .42); opacity: 0; transition: opacity .35s var(--ease);
}
.gal:hover .gal__hover { opacity: 1; }
.gal__plus {
    width: 3.2rem; height: 3.2rem; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .7); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transform: scale(.8); transition: transform .35s var(--ease);
}
.gal:hover .gal__plus { transform: scale(1); }
.gal figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.2rem .9rem;
    background: linear-gradient(transparent, rgba(42, 35, 32, .82));
    color: #fff; transform: translateY(100%); transition: transform .4s var(--ease);
}
.gal:hover figcaption { transform: translateY(0); }
.gal figcaption b { display: block; font: 400 1.1rem/1.2 var(--serif); }
.gal figcaption i { font-style: normal; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }

/* ------------------------------------------------------------------- team */

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2.2rem); }
.mate { text-align: center; }
.mate__photo { position: relative; margin: 0 0 1.3rem; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; }
.mate__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); filter: saturate(.92); }
.mate:hover .mate__photo img { transform: scale(1.05); }
.mate__social {
    position: absolute; right: .9rem; bottom: .9rem;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: var(--paper); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(.6rem); transition: all .35s var(--ease);
}
.mate:hover .mate__social { opacity: 1; transform: translateY(0); }
.mate__social:hover { background: var(--clay); color: #fff; }
.mate__name { font-size: 1.42rem; }
.mate__role { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--clay); margin: .4rem 0 .7rem; }
.mate__bio { color: var(--muted); font-size: .92rem; }
.mate__tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink); margin-top: .6rem; }
.mate__tag .ico { width: .9rem; height: .9rem; color: var(--clay); }

/* ------------------------------------------------------------------ join */

.join { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.join__img { margin: 0; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow-m); }
.join__img img { width: 100%; height: 100%; object-fit: cover; }
.join__copy .btn { margin-top: 1.6rem; }

/* ------------------------------------------------------------ testimonials */

.sec--quotes { background: var(--ivory); }
.quotes { position: relative; }
.quotes__viewport { overflow: hidden; }
.quotes__track { display: flex; transition: transform .6s var(--ease); }
.quote {
    flex: 0 0 100%; margin: 0; padding: 0 clamp(0rem, 6vw, 6rem);
    text-align: center; display: flex; flex-direction: column; align-items: center;
}
.quote__mark { color: var(--sand-2); margin-bottom: 1rem; }
.quote__mark .ico { width: 2.6rem; height: 2.6rem; fill: currentColor; stroke: none; }
.quote__stars { display: flex; gap: .2rem; color: var(--clay); margin-bottom: 1.4rem; }
.quote__stars .ico { width: 1rem; height: 1rem; fill: currentColor; }
.quote__text {
    font-family: var(--serif); font-size: clamp(1.35rem, 2.7vw, 2.05rem);
    line-height: 1.45; color: var(--ink); max-width: 34ch; margin-bottom: 1.8rem;
}
.quote__by { display: flex; align-items: center; gap: .9rem; }
.quote__avatar { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; }
.quote__by span { text-align: left; display: flex; flex-direction: column; }
.quote__by b { font-weight: 500; color: var(--ink); font-size: .95rem; letter-spacing: .04em; }
.quote__by i { font-style: normal; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.quotes__ctrl { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.6rem; }
.quotes__dots { display: flex; gap: .5rem; }
.quotes__dots button {
    width: .5rem; height: .5rem; padding: 0; border-radius: 50%;
    border: 1px solid var(--muted); background: transparent; cursor: pointer;
    transition: all .3s var(--ease);
}
.quotes__dots button.is-on { background: var(--clay); border-color: var(--clay); transform: scale(1.35); }

/* ------------------------------------------------------------------ stats */

.sec--stats { padding: clamp(3rem, 6vw, 4.5rem) 0; background: var(--ivory-2); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat { position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: -1rem; top: 15%; bottom: 15%; width: 1px; background: var(--line); }
.stat__num { display: block; font: 400 clamp(2.4rem, 5vw, 3.4rem)/1 var(--serif); color: var(--ink); }
.stat__label { display: block; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: .7rem; }
.stat__sub { font-style: normal; font-size: .85rem; color: var(--clay); }

/* -------------------------------------------------------------------- cta */

.cta {
    position: relative; padding: clamp(5rem, 10vw, 8.5rem) 0;
    background-image: var(--cta-img); background-size: cover; background-position: center;
    background-attachment: fixed; text-align: center; color: #fff;
}
.cta__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 35, 32, .68), rgba(42, 35, 32, .78)); }
.cta__in { position: relative; }
.cta__title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.cta__text { color: rgba(255, 255, 255, .78); max-width: 52ch; margin: 1.2rem auto 0; }
.cta__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }
@media (hover: none) { .cta { background-attachment: scroll; } }

/* ------------------------------------------------------------------ posts */

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); }
.post__media { display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; margin-bottom: 1.3rem; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post__media img { transform: scale(1.05); }
.post__meta { display: flex; gap: 1.2rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; }
.post__title { font-size: 1.55rem; margin-bottom: .7rem; }
.post__title a { color: var(--ink); }
.post__title a:hover { color: var(--clay-dk); }
.post__text { color: var(--muted); font-size: .95rem; margin-bottom: 1.1rem; }
.posts--page .post--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.posts--page .post--lead .post__media { margin-bottom: 0; grid-row: span 4; aspect-ratio: 3 / 2; }
.posts--page .post--lead .post__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* -------------------------------------------------------------- article */

.article__hero { margin: 0 0 2.2rem; overflow: hidden; border-radius: var(--r); }
.article__byline { display: flex; gap: 1.4rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; }
.article__lede { font-family: var(--serif); font-size: 1.4rem; line-height: 1.5; color: var(--ink); margin-bottom: 1.8rem; }
.article__foot { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* --------------------------------------------------------------- pagehead */

.pagehead {
    position: relative; overflow: hidden; text-align: center;
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(180deg, var(--ivory-2), var(--ivory));
    border-bottom: 1px solid var(--line-soft);
}
.pagehead__glow {
    position: absolute; left: 50%; top: -60%; transform: translateX(-50%);
    width: 70rem; height: 70rem; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(220, 199, 168, .4), rgba(220, 199, 168, 0) 70%);
}
.pagehead .wrap { position: relative; }
.pagehead__title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
.pagehead__lede { color: var(--muted); max-width: 56ch; margin: 1.1rem auto 0; }

.crumbs { margin-bottom: 1.6rem; }
.crumbs ol { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--clay-dk); }
.crumbs__sep { margin-left: .5rem; opacity: .5; }

/* ----------------------------------------------------------- service list */

.srv-list { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }
.srv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.srv--flip .srv__media { order: 2; }
.srv__media { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); aspect-ratio: 5 / 4; box-shadow: var(--shadow-m); }
.srv__media img { width: 100%; height: 100%; object-fit: cover; }
.srv__no {
    position: absolute; left: 0; top: 0; padding: .9rem 1.2rem;
    background: var(--ivory); font: 400 1.15rem/1 var(--serif); color: var(--clay-dk);
}
.srv__icon { display: inline-flex; color: var(--clay); margin-bottom: .9rem; }
.srv__icon .ico { width: 2rem; height: 2rem; }
.srv__title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.srv__title a { color: inherit; }
.srv__sub { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--clay); margin: .6rem 0 1rem; }
.srv__text { color: var(--muted); }
.srv__foot { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.8rem; }
.srv__price { font: 400 1.6rem/1 var(--serif); color: var(--ink); }

/* --------------------------------------------------------- service detail */

.detail { display: grid; grid-template-columns: 1.6fr .75fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.detail__hero { margin: 0 0 2.2rem; overflow: hidden; border-radius: var(--r); }
.detail__h { font-size: 1.9rem; margin: 2.6rem 0 1.4rem; }
.detail__menu { margin-top: 2rem; padding: 2rem; background: var(--ivory-2); border-radius: var(--r); }
.detail__menu .detail__h { margin-top: 0; }

.sidecard { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.9rem; margin-bottom: 1.4rem; position: sticky; top: 7rem; }
.sidecard + .sidecard { position: static; }
.sidecard__eyebrow { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.sidecard__price { font: 400 2.4rem/1 var(--serif); color: var(--ink); margin-bottom: 1.4rem; }
.sidecard__call { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; font-size: .95rem; color: var(--ink); }
.sidecard__h { font-size: 1.25rem; margin-bottom: 1rem; }
.sidecard--list ul { display: grid; gap: .1rem; }
.sidecard--list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: .95rem; }
.sidecard--list a:hover { color: var(--clay-dk); padding-left: .3rem; }
.sidecard--list .ico { width: 1rem; height: 1rem; opacity: .45; }

/* -------------------------------------------------------------------- faq */

.faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq__aside { position: sticky; top: 7rem; }
.faq__help { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: 1.8rem; font-size: .93rem; color: var(--muted); }
.faq__help .ico { color: var(--clay); }
.faq__list { display: grid; }
.acc { border-bottom: 1px solid var(--line); }
.acc__h { margin: 0; }
.acc__btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.4rem 0; background: none; border: 0; cursor: pointer; text-align: left;
    font: 400 1.24rem/1.35 var(--serif); color: var(--ink);
}
.acc__btn:hover { color: var(--clay-dk); }
.acc__sign {
    flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
    color: var(--clay-dk); transition: transform .35s var(--ease), background .3s var(--ease);
}
.acc.is-open .acc__sign { transform: rotate(135deg); background: var(--sand); }
.acc__panel { padding-bottom: 1.5rem; color: var(--muted); font-size: .97rem; max-width: 62ch; }

/* ------------------------------------------------------------ book / form */

.sec--book { background: var(--ivory); }
.book { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.book--wide { grid-template-columns: 1fr 1fr; }
.book__h { font-size: 1.35rem; margin: 2rem 0 1rem; }
.book__facts { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
.book__facts li { display: flex; align-items: center; gap: 1rem; }
.book__facts li > span:last-child { display: flex; flex-direction: column; }
.book__facts b { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.book__facts a, .book__facts li > span:last-child { color: var(--ink); }
.book__facts a:hover { color: var(--clay-dk); }
.book__hours { display: grid; gap: .7rem; margin-top: 1.2rem; max-width: 26rem; }
.book__hours li { display: flex; align-items: baseline; gap: .6rem; font-size: .93rem; }
.book__hours b { font-weight: 400; color: var(--ink); white-space: nowrap; }
.book__note { margin-top: 1.8rem; font-size: .9rem; color: var(--muted); display: flex; gap: .5rem; align-items: baseline; }
.book__note .ico { color: var(--clay); }
.book__call { margin-top: 1.6rem; }
.book__call a { display: inline-flex; align-items: center; gap: .45rem; }
.book__steps { display: grid; gap: 1.3rem; margin: 2rem 0; }
.book__steps li { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; align-items: baseline; }
.book__steps span {
    grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--sand); color: var(--clay-dk);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 1.1rem;
}
.book__steps b { font-weight: 500; color: var(--ink); }
.book__steps i { font-style: normal; font-size: .92rem; color: var(--muted); }

.qform { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: var(--r); box-shadow: var(--shadow-s); border: 1px solid var(--line-soft); }
.qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.field { display: block; margin-bottom: 1.2rem; }
.field__label { display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.field__label i { color: var(--clay); font-style: normal; }
.field__input {
    width: 100%; padding: .95rem 1rem; font: 400 .98rem/1.4 var(--sans); color: var(--ink);
    background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r);
    transition: border-color .25s var(--ease), background .25s var(--ease);
    -webkit-appearance: none; appearance: none;
}
.field__input:focus { outline: none; border-color: var(--clay); background: var(--paper); }
.field__input::placeholder { color: rgba(138, 126, 115, .7); }
textarea.field__input { resize: vertical; min-height: 7rem; }
.field__select { position: relative; display: block; }
.field__select .ico { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%) rotate(90deg); pointer-events: none; color: var(--muted); }
.qform__foot { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: .5rem; }
.qform__note { font-size: .84rem; color: var(--muted); margin: 0; max-width: 26ch; }
.qform__flash { padding: .95rem 1.1rem; border-radius: var(--r); font-size: .93rem; margin-bottom: 1.4rem; }
.qform__flash--ok { background: #EDF3EC; color: #2F5D3A; border: 1px solid #CFE0CE; }
.qform__flash--err { background: #FBEDE9; color: #8C3E28; border: 1px solid #EBD2CA; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mapwrap { line-height: 0; filter: grayscale(1) contrast(.92) sepia(.12); }
.mapwrap iframe { width: 100%; height: 26rem; border: 0; display: block; }

/* ----------------------------------------------------------------- footer */

.foot { background: var(--dark); color: rgba(255, 255, 255, .62); padding: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3.5rem; }
.foot__blurb { margin-top: 1.4rem; font-size: .94rem; max-width: 34ch; }
.foot__social { display: flex; gap: .7rem; margin-top: 1.5rem; }
.foot__social a {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
    display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .7);
    transition: all .3s var(--ease);
}
.foot__social a:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
.foot__h { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--sand-2); font-family: var(--sans); font-weight: 500; margin-bottom: 1.3rem; }
.foot__links { display: grid; gap: .65rem; }
.foot__links a { color: rgba(255, 255, 255, .62); font-size: .94rem; }
.foot__links a:hover { color: #fff; padding-left: .25rem; }
.foot__contact { display: grid; gap: 1rem; }
.foot__contact li { display: flex; gap: .7rem; font-size: .94rem; }
.foot__contact .ico { color: var(--sand-2); flex: none; margin-top: .25rem; }
.foot__contact a { color: rgba(255, 255, 255, .62); }
.foot__contact a:hover { color: #fff; }
.foot__hours { display: grid; gap: .45rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .86rem; }
.foot__hours li { display: flex; justify-content: space-between; gap: 1rem; }
.foot__hours b { font-weight: 400; color: rgba(255, 255, 255, .85); }
.foot__bar {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.6rem 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem;
}
.foot__bar p { margin: 0; }
.foot__credit { color: rgba(255, 255, 255, .4); }

/* ------------------------------------------------------------- to top / lb */

.to-top {
    position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 70;
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    background: var(--ink); color: #fff; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(1rem);
    transition: all .35s var(--ease);
}
.to-top .ico { transform: rotate(-90deg); }
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--clay-dk); }

.lightbox {
    position: fixed; inset: 0; z-index: 200; background: rgba(26, 22, 20, .94);
    display: flex; align-items: center; justify-content: center; padding: 4rem 1.5rem;
}
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.lightbox__fig img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: var(--r); }
.lightbox__fig figcaption { color: rgba(255, 255, 255, .7); margin-top: 1rem; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; }
.lightbox__close, .lightbox__nav {
    position: absolute; background: transparent; border: 1px solid rgba(255, 255, 255, .25);
    color: #fff; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all .3s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: #fff; color: var(--ink); }
.lightbox__close { top: 1.5rem; right: 1.5rem; }
.lightbox__nav--prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.5rem; top: 50%; transform: translateY(-50%); }

.lost .ico { width: 4rem; height: 4rem; color: var(--sand-2); }

/* ----------------------------------------------------------------- reveal */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
    .cards, .feats, .team, .posts, .stats { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .grid-gal { grid-template-columns: repeat(3, 1fr); }
    .detail { grid-template-columns: 1fr; }
    .sidecard { position: static; }
    .stat + .stat::before { display: none; }
}

@media (max-width: 900px) {
    .site-header__in { min-height: 4.4rem; }

    /* The drawer below is position:fixed and lives INSIDE .site-header, so the
       header must not become its containing block. Both backdrop-filter and a
       lingering transform (animation fill-mode: both) would do exactly that and
       trap the panel inside the 4.4rem header box. Neither is missed here: the
       header background is already 92% opaque, and the drop-in only matters on
       desktop scroll. */
    .site-header { backdrop-filter: none; }
    .site-header--overlay.is-stuck { animation: none; }

    /* .site-header owns a stacking context at z-index 90, so the drawer's own
       z-index is scoped inside it and the dimmer (110, a child of body) would
       paint over the top. Lift the whole header while the menu is open. */
    body.nav-open .site-header { z-index: 130; }

    .nav {
        position: fixed; inset: 0 0 0 auto; width: min(23rem, 86vw); z-index: 120;
        background: var(--ivory); padding: 5.5rem 2rem 2rem;
        transform: translateX(100%); transition: transform .45s var(--ease);
        box-shadow: var(--shadow-l); display: flex; flex-direction: column;
        overflow-y: auto;
    }
    .nav.is-open { transform: translateX(0); }
    .nav__list { flex-direction: column; align-items: flex-start; gap: .3rem; width: 100%; }
    .nav__list li { width: 100%; border-bottom: 1px solid var(--line-soft); }
    .nav__link { display: block; padding: 1rem 0; font-size: .92rem; }
    .nav__close { display: inline-flex; position: absolute; right: 1.5rem; top: 1.5rem; background: none; border: 0; cursor: pointer; color: var(--ink); }
    .nav__foot { display: block; margin-top: auto; padding-top: 2rem; }
    .nav__phone { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-size: 1.05rem; }
    .nav-toggle { display: flex; }
    body.nav-open { overflow: hidden; }
    body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(26, 22, 20, .45); z-index: 110; }

    .hero__in, .intro, .faq, .book, .book--wide, .srv, .join, .posts--page .post--lead { grid-template-columns: 1fr; }
    .srv--flip .srv__media { order: 0; }
    .hero { padding-top: clamp(4.5rem, 12vw, 7rem); }
    .hero__media { order: -1; max-width: 30rem; margin-inline: auto; }
    .hero__badge { right: 0; }
    .hero__inset { left: -1rem; width: 8.5rem; }
    .intro__media { max-width: 32rem; }
    .menu { grid-template-columns: 1fr; }
    .faq__aside { position: static; }
    .foot__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .cards, .feats, .team, .posts, .pillars, .steps, .stats { grid-template-columns: 1fr; }
    .grid-gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 11rem; }
    .gal--wide { grid-column: span 2; }
    .qform__row { grid-template-columns: 1fr; }
    /* Hours + phone + socials wrap onto two rows on a phone, doubling the
       topbar height. The socials are in the footer too, so drop them here and
       keep the bar to one line. */
    .topbar__bit--hide-sm, .topbar__social { display: none; }
    .topbar__in { justify-content: center; gap: 1.25rem; }
    .foot__grid { grid-template-columns: 1fr; }
    .hero__stats { gap: 1.6rem 2rem; }
    .hero__inset { display: none; }
    .site-header__cta .btn { display: none; }
    .prose--lg p:first-child::first-letter { font-size: 3em; }
}