/*
  COPYRIGHT © 2026 Xeronine LLC. All Rights Reserved.
  Proprietary and confidential. This file and the template it belongs to are
  the intellectual property of Xeronine LLC, provided under the x9hosted Proprietary
  Template License (tenants/_templates/LICENSE). Unauthorized copying,
  redistribution, reuse, or derivative use — in whole or in part — is prohibited.
  x9hosted™, Xeronine™ and Serene™ are trademarks of Xeronine LLC.
  Provenance: X9H-TPL-CANARY:serene:massage-wellness-v1
*/

/* ---------- tokens ---------------------------------------------------- */
:root{
  --bg:#fffaf4;            /* warm ivory */
  --bg-alt:#fdf0e4;        /* sunlit peach band */
  --bg-deep:#f6ede4;
  --surface:#ffffff;
  --surface-2:#fff6ec;
  --text:#33271f;          /* warm deep brown */
  --text-soft:#5c4b3e;
  --muted:#87705f;
  --accent:#e08a5c;        /* terracotta */
  --accent-deep:#c96f42;
  --accent-2:#7ba686;      /* sage */
  --accent-3:#f0c274;      /* honey */
  --on-accent:#fffaf4;
  --border:rgba(51,39,31,.10);
  --border-strong:rgba(51,39,31,.18);
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1180px;
  --gap:clamp(18px,5vw,56px);
  --radius:18px;
  --radius-lg:32px;
  --shadow:0 6px 22px rgba(120,78,48,.10),0 1px 4px rgba(120,78,48,.06);
  --shadow-lg:0 26px 60px rgba(120,78,48,.18),0 8px 22px rgba(120,78,48,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;background:var(--bg);color:var(--text);
  font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* soft sunlit wash behind everything */
body::before{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%,rgba(240,194,116,.34),transparent 30%),
    radial-gradient(circle at 88% 4%,rgba(224,138,92,.22),transparent 28%),
    radial-gradient(circle at 70% 88%,rgba(123,166,134,.20),transparent 32%);
  filter:blur(30px);
}
/* height:auto is load-bearing, not cosmetic: every <img> carries width/height
   attributes (so the browser reserves space and the layout doesn't jump), and
   those map to a presentational `height` that silently wins over any
   `aspect-ratio` we set. Without this, every cropped tile renders at its full
   intrinsic height instead of the ratio the design asks for. */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:999;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:10px}

h1,h2,h3,.page-title{font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}

@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(10px,-14px,0)}}
@keyframes kenburns{0%{transform:scale(1.06) translate3d(0,0,0)}100%{transform:scale(1.16) translate3d(-1.5%,-2%,0)}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-14px,12px,0) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- nav ------------------------------------------------------- */
.nav{
  position:fixed;left:var(--gap);right:var(--gap);top:14px;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 12px 10px 16px;border:1px solid var(--border);border-radius:999px;
  background:rgba(255,250,244,.82);backdrop-filter:blur(16px);box-shadow:var(--shadow);
}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:-.03em;line-height:1.1}
.brand-mark{width:38px;height:38px;border-radius:50%;flex:none;box-shadow:0 4px 14px rgba(224,138,92,.34)}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a{color:var(--text-soft);text-decoration:none;font-weight:600;font-size:.92rem}
.nav-links a:hover,.nav-links a:focus,.nav-links a[aria-current=page]{color:var(--accent-deep)}
.nav-cta{padding:11px 20px;border-radius:999px;background:linear-gradient(120deg,var(--accent),var(--accent-3));color:var(--on-accent)!important;box-shadow:0 6px 16px rgba(224,138,92,.32)}
.nav-cta:hover{transform:translateY(-1px)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:99px;content:""}
.nav-toggle span{margin:auto;position:relative}
.nav-toggle span::before,.nav-toggle span::after{position:absolute;left:0}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded=true] span{background:transparent}
.nav-toggle[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* ---------- hero ------------------------------------------------------ */
.hero{position:relative;min-height:92vh;display:grid;place-items:center;padding:150px var(--gap) 96px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:url('../assets/hero.jpg') center 42%/cover no-repeat;animation:kenburns 26s var(--ease) infinite alternate}
/* Scrim tuned so the headline keeps well over 7:1 contrast on the left while the
   photograph still reads as a photograph on the right — this is the one image
   most visitors will ever see, so burying it defeats the point. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(105deg,rgba(255,250,244,.94) 0%,rgba(255,250,244,.86) 30%,rgba(255,244,232,.40) 58%,rgba(224,138,92,.14) 100%),
    linear-gradient(0deg,rgba(255,250,244,.90),transparent 42%);
}
.hero-inner{position:relative;z-index:2;width:min(var(--maxw),100%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(250px,.62fr);gap:clamp(28px,5vw,68px);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent-deep);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem}
.kicker::before{content:"";width:26px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-3))}
.hero h1{font-size:clamp(2.9rem,7.4vw,5.6rem);margin:18px 0 6px}
.hero h1 em{font-style:italic;color:var(--accent-deep)}
.lede{font-size:clamp(1.05rem,2vw,1.26rem);color:var(--text-soft);max-width:600px;margin:18px 0 30px}
.hero-actions,.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.trust span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid var(--border);font-size:.83rem;font-weight:600;color:var(--text-soft);box-shadow:var(--shadow)}
.trust svg{width:16px;height:16px;color:var(--accent-2);flex:none}

.hero-card{
  position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px;background:rgba(255,255,255,.88);backdrop-filter:blur(6px);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.hero-card::before{content:"";position:absolute;inset:auto -30% -45% 30%;height:190px;background:radial-gradient(circle,rgba(240,194,116,.42),transparent 70%);animation:float 11s var(--ease) infinite}
.hero-card>*{position:relative}
.hero-card h2{font-size:1.35rem;margin-bottom:4px}
.hero-card p{color:var(--muted);font-size:.93rem;margin-bottom:16px}
.mini-list{display:grid;gap:0}
.mini-list div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--border);font-size:.92rem}
.mini-list div:first-child{border-top:0}
.mini-list strong{font-weight:600}
.mini-list span{color:var(--accent-deep);font-weight:700;white-space:nowrap}

.scroll-cue{position:absolute;z-index:2;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--accent),transparent)}

/* ---------- buttons --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:14px 26px;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:700;font-size:.96rem;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-3));color:var(--on-accent);box-shadow:0 10px 24px rgba(224,138,92,.34)}
.btn-ghost{border-color:var(--border-strong);background:rgba(255,255,255,.7);color:var(--text)}
.btn-sage{background:var(--accent-2);color:#fff;box-shadow:0 10px 24px rgba(123,166,134,.34)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* ---------- layout ---------------------------------------------------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,110px) var(--gap)}
.band{position:relative}
.band-alt{background:linear-gradient(180deg,var(--bg-alt),rgba(253,240,228,.35))}
.band-deep{background:var(--bg-deep)}
.section-head{max-width:720px;margin-bottom:42px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.center .kicker::before{display:none}
.section-head h2,.page-title{font-size:clamp(2.05rem,4.6vw,3.5rem);margin-top:14px}
.section-note{color:var(--text-soft);font-size:1.05rem;margin-top:14px}
.page-top{padding-top:clamp(140px,18vh,190px)}

/* ---------- intro split ----------------------------------------------- */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,70px);align-items:center}
.split.flip{grid-template-columns:1.08fr .92fr}
.photo-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:6px solid var(--surface)}
.photo-frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.photo-frame.wide img{aspect-ratio:5/4}
.photo-badge{
  position:absolute;left:-18px;bottom:26px;padding:14px 20px;border-radius:18px;
  background:var(--surface);box-shadow:var(--shadow-lg);border:1px solid var(--border);
  font-family:var(--font-display);font-weight:700;line-height:1.15;
}
.photo-badge b{display:block;font-size:1.7rem;color:var(--accent-deep)}
.photo-badge small{font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prose p{color:var(--text-soft);margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.signature{margin-top:22px;font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--accent-deep)}

/* ---------- service cards --------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card-img{position:relative;overflow:hidden}
.card-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.06)}
.card-img .pill{position:absolute;top:12px;left:12px;padding:6px 13px;border-radius:999px;background:rgba(255,250,244,.94);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body h3{font-size:1.36rem}
.card-body p{color:var(--muted);font-size:.95rem;flex:1}
.card-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--border);margin-top:4px}
.card-meta .price{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--accent-deep)}
.card-meta .dur{font-size:.85rem;color:var(--muted);font-weight:600}

/* ---------- steps ----------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{position:relative;padding:30px 26px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.step::before{
  counter-increment:step;content:counter(step);
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:50%;
  background:linear-gradient(130deg,var(--accent),var(--accent-3));color:var(--on-accent);
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;box-shadow:0 8px 18px rgba(224,138,92,.3);
}
.step h3{font-size:1.22rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.95rem}

/* ---------- gallery --------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery button{padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);line-height:0}
/* 4:3 matches the source photography, so tiles crop the subject as little as
   possible — a square tile was cutting the massage tables out of the frame. */
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .55s var(--ease),filter .3s var(--ease)}
.gallery button:hover img{transform:scale(1.07)}
.lightbox{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px;background:rgba(40,28,20,.86);backdrop-filter:blur(6px)}
.lightbox.open{display:grid}
.lightbox img{max-width:min(1100px,94vw);max-height:88vh;width:auto;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.lightbox button{position:absolute;top:20px;right:22px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;cursor:pointer}

/* ---------- testimonials ---------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{padding:30px 28px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.quote .stars{color:var(--accent-3);letter-spacing:.12em;font-size:1rem}
.quote p{font-family:var(--font-display);font-size:1.1rem;line-height:1.5;color:var(--text)}
.quote footer{font-size:.85rem;color:var(--muted);font-weight:600}

/* ---------- schedule -------------------------------------------------- */
.tabs{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:28px}
.tabs button{padding:11px 24px;border:0;border-radius:999px;background:none;font:inherit;font-weight:700;font-size:.92rem;color:var(--muted);cursor:pointer}
.tabs button[aria-selected=true]{background:linear-gradient(120deg,var(--accent),var(--accent-3));color:var(--on-accent);box-shadow:0 6px 14px rgba(224,138,92,.3)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.day{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);padding:16px 14px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.day h3{font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-body);font-weight:700;color:var(--muted)}
.day .where{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)}
.slot{display:block;width:100%;text-align:left;padding:8px 11px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);font:inherit;font-size:.85rem;font-weight:600;color:var(--text);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.slot:hover{background:var(--accent-3);transform:translateX(2px)}
.slot.full{background:transparent;color:var(--muted);border-style:dashed;cursor:not-allowed;font-weight:500}
.slot.full:hover{background:transparent;transform:none}
.day .closed{color:var(--muted);font-size:.85rem;font-style:italic}

/* ---------- membership ------------------------------------------------ */
/* Layered with positive z-indexes only. Negative-z children inside an isolated
   stacking context render inconsistently in some capture/print paths, and the
   copy here is near-white — if the photo and its scrim drop out, the text
   vanishes into the page. Positive indexes cannot fail that way. */
.member-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:#33271f}
.member-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.member-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(51,39,31,.90),rgba(51,39,31,.62) 55%,rgba(224,138,92,.55))}
.member-band .inner{position:relative;z-index:2;padding:clamp(38px,6vw,72px);color:#fff8f0;max-width:640px}
.member-band h2{font-size:clamp(1.9rem,4vw,3rem);color:#fff8f0}
.member-band p{color:rgba(255,248,240,.86);margin:16px 0 26px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tier{padding:32px 28px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.tier.featured{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-8px)}
.tier .tier-name{font-family:var(--font-display);font-size:1.4rem;font-weight:700}
.tier .tier-price{font-family:var(--font-display);font-size:2.6rem;font-weight:700;color:var(--accent-deep);line-height:1}
.tier .tier-price small{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--muted)}
.tier ul{list-style:none;display:grid;gap:10px;flex:1}
.tier li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--text-soft)}
.tier li::before{content:"✓";color:var(--accent-2);font-weight:800;flex:none}
.tier .ribbon{align-self:flex-start;padding:5px 13px;border-radius:999px;background:var(--accent-3);color:#4a3316;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.locked{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.locked article{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);padding:28px 26px;filter:saturate(.7)}
.locked h3{font-size:1.15rem;margin-bottom:8px}
.locked p{color:var(--muted);font-size:.93rem}
.locked .lock{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);color:var(--accent-deep)}
.locked .lock svg{width:16px;height:16px}

/* ---------- price list ------------------------------------------------ */
.menu-group{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);padding:clamp(24px,3.4vw,38px);margin-bottom:26px}
.menu-group h3{font-size:clamp(1.5rem,2.8vw,2rem);color:var(--accent-deep);margin-bottom:6px}
.menu-group>p{color:var(--muted);margin-bottom:22px}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:18px 0;border-top:1px solid var(--border)}
.menu-item h4{font-family:var(--font-display);font-size:1.15rem;font-weight:600}
.menu-item .price{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--accent-deep);white-space:nowrap}
.menu-item .desc{grid-column:1/-1;color:var(--muted);font-size:.95rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;grid-column:1/-1;margin-top:6px}
.chip{padding:3px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.73rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.chip.sage{background:rgba(123,166,134,.16);border-color:rgba(123,166,134,.36);color:#3f6b4e}

/* ---------- forms ----------------------------------------------------- */
.form-card{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);padding:clamp(24px,3.4vw,40px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field.full{grid-column:1/-1}
label{display:block;font-size:.76rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}
input,select,textarea{width:100%;border:1px solid var(--border-strong);border-radius:13px;background:var(--surface-2);color:var(--text);padding:13px 14px;font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;background:var(--surface)}
textarea{resize:vertical;min-height:120px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.4em;margin-top:16px;font-weight:700;color:var(--muted)}
.form-status.ok{color:#3f6b4e}
.form-status.err{color:#b6482a}
.info-list{display:grid;gap:16px;margin-top:20px}
.info-list div{padding-top:16px;border-top:1px solid var(--border)}
.info-list div:first-child{border-top:0;padding-top:0}
.info-list strong{display:block;color:var(--accent-deep);font-family:var(--font-display);font-size:1.05rem}
.info-list a{color:var(--text-soft)}
.map-box{margin-top:22px;min-height:210px;border-radius:var(--radius);border:1px solid var(--border);display:grid;place-items:center;text-align:center;color:var(--muted);padding:24px;background:radial-gradient(circle at 28% 24%,rgba(240,194,116,.34),transparent 34%),radial-gradient(circle at 76% 72%,rgba(123,166,134,.30),transparent 36%),var(--surface-2)}

/* ---------- faq ------------------------------------------------------- */
.faq{display:grid;gap:14px;max-width:820px}
.faq details{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);padding:18px 22px}
.faq summary{cursor:pointer;font-family:var(--font-display);font-size:1.1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-deep);font-size:1.4rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--text-soft);margin-top:12px;font-size:.97rem}

/* ---------- cta band -------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,9vw,120px) var(--gap);background:#33271f}
.cta-band .cta-bg{position:absolute;inset:0;z-index:0;background:url('../assets/cta.jpg') center/cover no-repeat;animation:kenburns 30s var(--ease) infinite alternate}
.cta-band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(51,39,31,.78),rgba(51,39,31,.62)),radial-gradient(circle at 50% 120%,rgba(224,138,92,.5),transparent 60%)}
.cta-band h2{position:relative;z-index:2;font-size:clamp(2.1rem,5vw,3.8rem);color:#fff8f0;max-width:840px;margin:0 auto}
.cta-band p{position:relative;z-index:2;color:rgba(255,248,240,.85);max-width:620px;margin:18px auto 30px}
.cta-band .cta-row{position:relative;z-index:2;justify-content:center}

/* ---------- footer ---------------------------------------------------- */
.footer{border-top:1px solid var(--border);background:var(--bg-deep);padding:52px var(--gap) 40px}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.footer h4{font-family:var(--font-body);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer nav{display:grid;gap:9px}
.footer a{color:var(--text-soft);text-decoration:none;font-size:.94rem}
.footer a:hover{color:var(--accent-deep)}
.footer .about-blurb{color:var(--muted);font-size:.94rem;margin-top:14px;max-width:340px}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--accent-deep);box-shadow:var(--shadow)}
.socials svg{width:18px;height:18px}
.copyright{max-width:var(--maxw);margin:34px auto 0;padding-top:22px;border-top:1px solid var(--border);color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.demo-note{font-size:.78rem;color:var(--muted);opacity:.85}

/* ---------- reveal ---------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- utilities -------------------------------------------------- */
/* Every rule the site uses lives in this one stylesheet — the pages carry no
   inline style attributes and no per-page CSS, so a palette or spacing change
   is a single edit here and lands on all six pages at once. */
.mt-3{margin-top:18px}
.mt-4{margin-top:22px}
.mt-5{margin-top:24px}
.mt-6{margin-top:30px}
.mt-7{margin-top:34px}
.mt-8{margin-top:40px}
.mb-0{margin-bottom:0}
.row-center{justify-content:center}
.tier-blurb{color:var(--muted);font-size:.95rem}
.on-dark{color:var(--accent-3)}
/* Fraunces ships a decorative italic ampersand. It is lovely at display sizes
   and unreadable at 1.1rem, where it reads as a stray symbol — so small
   headings borrow the body face for "&" only. */
h3 .amp,h4 .amp,.tier-name .amp{font-family:var(--font-body);font-weight:600;font-style:normal}

/* ---------- mobile action bar ----------------------------------------- */
/* Phone-first: the two things a massage client actually wants (book, call) stay
   one thumb-tap away at all times. Hidden on >860px where the nav CTA is visible. */
.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,250,244,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(120,78,48,.14);
}
.mobile-bar a{flex:1;padding:15px 12px;font-size:.98rem;min-height:52px}

/* ---------- responsive ------------------------------------------------ */
@media(max-width:1040px){
  .cards,.steps,.quotes,.tiers,.locked{grid-template-columns:repeat(2,1fr)}
  .tier.featured{transform:none}
  .week{grid-template-columns:repeat(4,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .nav-toggle{display:grid}
  .nav-links{position:absolute;top:66px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:6px;padding:16px;border-radius:24px;background:rgba(255,250,244,.98);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 6px}
  .nav-cta{text-align:center}
  .hero{min-height:auto;padding-top:132px}
  .hero-inner,.split,.split.flip,.footer-inner{grid-template-columns:1fr}
  .hero-card{max-width:460px}
  .photo-badge{left:12px}
  /* Vertical scrim on narrow screens (the desktop diagonal has no room to work).
     Kept light enough that the photograph still reads — the copy is dark brown
     on a pale image, so contrast holds well past this. */
  .hero::after{background:linear-gradient(180deg,rgba(255,250,244,.90),rgba(255,250,244,.79) 52%,rgba(255,244,232,.66))}
  .trust{gap:8px}
  .trust span{padding:7px 13px;font-size:.8rem}
}
@media(max-width:860px){
  /* thumb-reachable action bar; keep the footer clear of it */
  .mobile-bar{display:flex}
  body{padding-bottom:82px}
  /* iOS zooms any input under 16px on focus — pin body-size inputs at 16px */
  input,select,textarea{font-size:16px}
  /* comfortable tap targets everywhere (WCAG 2.5.8 / 44px) */
  .nav-links a,.tabs button,.slot,.faq summary,.socials a{min-height:44px}
  .tabs{display:flex;width:100%}
  .tabs button{flex:1;padding:12px 10px}
  .slot{padding:12px 13px;font-size:.9rem}
  .btn{padding:15px 24px}
}
@media(max-width:660px){
  .cards,.steps,.quotes,.tiers,.locked{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
  .day{min-height:0}
  .day .slots{display:flex;flex-wrap:wrap;gap:8px}
  .day .slots .slot{flex:1 1 calc(50% - 8px);text-align:center}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery button:nth-child(4n+1) img,.gallery button:nth-child(4n+4) img{aspect-ratio:1}
  .form-grid{grid-template-columns:1fr}
  .nav{left:12px;right:12px}
  .hero h1{font-size:2.6rem}
  .hero{padding-left:20px;padding-right:20px}
  .menu-item{grid-template-columns:1fr}
  .menu-item .price{margin-top:2px}
  .copyright{justify-content:flex-start}
  .photo-badge{padding:11px 16px}
  .photo-badge b{font-size:1.4rem}
  .lightbox button{top:12px;right:12px}
}
/* Ken Burns on a full-bleed background is expensive on low-power phones and
   costs LCP — hold the hero still on small screens. */
@media(max-width:660px),(prefers-reduced-motion:reduce){
  .hero-bg,.cta-band .cta-bg{animation:none}
}