/* ============================================================
   Components & sections
   ============================================================ */

/* ---------- Top announcement ---------- */
.topbar{
  background:var(--espresso); color:var(--cream);
  text-align:center; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  padding:9px 16px; font-weight:300;
  position:relative; z-index:60;
}
.topbar b{ color:var(--gold); font-weight:400; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:var(--top-h,36px); left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:top .5s var(--ease), padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease), color .5s var(--ease);
  color:var(--cream);
}
.nav.stuck{ top:0; }
.nav.solid{
  background:rgba(244,238,227,.86);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  color:var(--espresso);
  top:0;
  padding-block:14px;
  box-shadow:0 1px 0 var(--line-soft);
}
.nav-logo{
  display:flex; flex-direction:column; line-height:1; gap:3px;
}
.nav-logo .lg-main{ font-family:var(--ff-display); font-size:23px; letter-spacing:.02em; }
.nav-logo .lg-sub{ font-size:9px; letter-spacing:.42em; text-transform:uppercase; opacity:.7; }
.nav-links{
  display:flex; align-items:center; gap:clamp(20px,2.4vw,40px);
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:400;
}
.nav-links a{ position:relative; padding:6px 0; opacity:.92; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-actions{ display:flex; align-items:center; gap:18px; }
.nav .btn{ padding:.85em 1.6em; font-size:12px; }
.nav-burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-burger span{ width:24px; height:1.5px; background:currentColor; transition:.4s var(--ease); }

@media (max-width:1040px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}
@media (max-width:560px){
  .nav-actions .btn{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  color:var(--cream); overflow:hidden;
  padding-bottom:clamp(40px,7vh,90px);
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg img{
  width:100%; height:120%; object-fit:cover; object-position:center 35%;
  transform:scale(1.08); will-change:transform;
  animation:kenburns 22s ease-out forwards;
}
@keyframes kenburns{ to{ transform:scale(1.0) translateY(-3%); } }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(34,28,22,.30) 0%, rgba(34,28,22,0) 28%, rgba(34,28,22,.12) 55%, rgba(28,22,17,.74) 100%),
    radial-gradient(120% 80% at 15% 100%, rgba(28,22,17,.55), transparent 60%);
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero h1{
  font-family:var(--ff-display);
  font-size:clamp(50px,9.2vw,158px);
  line-height:.92; font-weight:300; letter-spacing:-.015em;
  max-width:15ch;
  text-shadow:0 2px 40px rgba(0,0,0,.25);
}
.hero h1 em{ font-style:italic; color:#F0E2D2; }
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:30px; margin-top:clamp(26px,4vh,48px);
}
.hero-sub{ max-width:42ch; font-size:clamp(15px,1.3vw,18px); color:rgba(255,255,255,.85); font-weight:300; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.hero-rating{
  display:flex; align-items:center; gap:14px;
  padding-left:26px; border-left:1px solid var(--line-light);
}
.hero-rating .num{ font-family:var(--ff-display); font-size:46px; line-height:1; }
.stars{ display:flex; gap:3px; color:var(--gold); font-size:14px; }
.hero-rating small{ display:block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.8; margin-top:5px; }

.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7);
}
.scroll-hint .bar{ width:1px; height:54px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.scroll-hint .bar::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--cream); animation:scrolldrop 2.4s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{ top:-55%; } 60%,100%{ top:105%; } }

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid var(--line);
  padding-block:26px; overflow:hidden; background:var(--cream);
}
.marquee-track{ display:flex; gap:3.5rem; width:max-content; animation:slide 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(26px,3.6vw,46px); color:var(--mocha); white-space:nowrap;
  display:inline-flex; align-items:center; gap:3.5rem;
}
.marquee-track span::after{ content:""; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- Intro statement ---------- */
.intro{ padding-block:clamp(110px,18vh,220px); }
.intro-inner{ max-width:620px; margin-inline:auto; text-align:center; }
.intro .eyebrow{ margin-bottom:clamp(34px,5vw,56px); }
.intro-statement{
  font-family:var(--ff-sans); font-weight:300;
  font-size:clamp(17px,1.7vw,21px); line-height:2; letter-spacing:.005em;
  color:var(--mocha);
}
.intro-statement em{ font-style:italic; color:var(--camel); }
@media (max-width:860px){ .intro{ padding-block:clamp(80px,14vh,140px); } }

/* ---------- Two worlds ---------- */
.worlds{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px); }
.world{
  position:relative; border-radius:6px; overflow:hidden;
  min-height:clamp(420px,62vh,680px); display:flex; align-items:flex-end;
  color:var(--cream); isolation:isolate;
}
.world .w-img{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.world .w-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); }
.world::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(26,21,16,.05),rgba(26,21,16,.16) 45%,rgba(22,17,12,.82)); }
.world:hover .w-img img{ transform:scale(1.06); }
.world-body{ padding:clamp(28px,3.4vw,52px); width:100%; }
.world-tag{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.world h3{ font-family:var(--ff-display); font-size:clamp(34px,4vw,60px); line-height:1; margin:14px 0 12px; }
.world p{ max-width:40ch; color:rgba(255,255,255,.82); font-size:15px; }
.world .link-underline{ margin-top:22px; color:var(--cream); }
@media (max-width:780px){ .worlds{ grid-template-columns:1fr; } }

/* ---------- Treatments ---------- */
.treatments-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,5vh,64px); }
.section-title{ font-family:var(--ff-display); font-size:clamp(38px,5.6vw,84px); line-height:.98; font-weight:300; letter-spacing:-.015em; }
.section-title em{ font-style:italic; color:var(--camel); }

.treat-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,70px); align-items:start; }
.treat-media{
  position:sticky; top:104px; border-radius:6px; overflow:hidden;
  aspect-ratio:4/5; box-shadow:var(--shadow-md); background:var(--sand);
}
.treat-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s var(--ease), transform 6s var(--ease-out); }
.treat-media img.active{ opacity:1; transform:scale(1.05); }
.treat-media .tm-cap{ position:absolute; left:0; bottom:0; z-index:2; padding:26px; color:var(--cream); width:100%;
  background:linear-gradient(transparent,rgba(20,15,11,.7)); }
.treat-media .tm-cap span{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }

.treat-list{ display:flex; flex-direction:column; }
.treat-item{
  border-top:1px solid var(--line);
  padding:26px 6px; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:baseline;
  transition:padding-left .5s var(--ease), background .5s var(--ease);
}
.treat-item:last-child{ border-bottom:1px solid var(--line); }
.treat-item .t-idx{ font-size:12px; letter-spacing:.1em; color:var(--stone); font-variant-numeric:tabular-nums; }
.treat-item .t-name{ font-family:var(--ff-display); font-size:clamp(24px,2.5vw,34px); line-height:1.05; transition:color .4s; }
.treat-item .t-desc{ font-size:14.5px; color:var(--mocha); max-width:48ch; margin-top:8px;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .6s var(--ease), opacity .5s var(--ease), margin .5s var(--ease); }
.treat-item .t-meta{ text-align:right; white-space:nowrap; }
.treat-item .t-price{ font-family:var(--ff-display); font-size:24px; color:var(--camel); }
.treat-item .t-dur{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin-top:4px; }
.treat-item:hover,.treat-item.active{ padding-left:18px; }
.treat-item.active .t-name{ color:var(--camel); }
.treat-item.active .t-desc{ max-height:120px; opacity:1; margin-top:12px; }
@media (max-width:880px){
  .treat-layout{ grid-template-columns:1fr; }
  .treat-media{ position:relative; top:0; aspect-ratio:16/11; }
}

/* ---------- Ritual (sticky steps) ---------- */
.ritual{ background:var(--espresso); color:var(--cream); }
.ritual .eyebrow{ color:var(--gold); }
.ritual .section-title em{ color:var(--gold); }
.ritual-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:clamp(40px,6vh,80px); border-top:1px solid var(--line-light); }
.r-step{ padding:34px 22px 40px; border-right:1px solid var(--line-light); position:relative; }
.r-step:last-child{ border-right:none; }
.r-step .r-num{ font-family:var(--ff-display); font-size:15px; color:var(--gold); letter-spacing:.1em; }
.r-step h4{ font-family:var(--ff-display); font-size:clamp(22px,2vw,28px); font-weight:300; margin:24px 0 14px; line-height:1.1; }
.r-step p{ font-size:13.5px; color:rgba(255,255,255,.62); }
.r-step .r-dot{ position:absolute; top:-5px; left:22px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(201,168,106,.5); }
.r-step.in .r-dot{ animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(201,168,106,.45);} 70%{ box-shadow:0 0 0 14px rgba(201,168,106,0);} 100%{ box-shadow:0 0 0 0 rgba(201,168,106,0);} }
@media (max-width:900px){ .ritual-grid{ grid-template-columns:1fr 1fr; } .r-step{ border-bottom:1px solid var(--line-light); } .r-step:nth-child(even){ border-right:none; } }
@media (max-width:520px){ .ritual-grid{ grid-template-columns:1fr; } .r-step{ border-right:none; } }

/* ---------- Sensory / product band ---------- */
.sensory{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:90vh; }
.sensory-media{ position:relative; overflow:hidden; }
.sensory-media img{ position:absolute; inset:0; width:100%; height:118%; object-fit:cover; will-change:transform; }
.sensory-body{ display:flex; align-items:center; padding:clamp(50px,8vw,120px); background:var(--blush); }
.sensory-body .inner{ max-width:480px; }
.sensory .section-title{ margin:18px 0 24px; }
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.badge{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:9px 16px; border:1px solid rgba(42,36,29,.22); border-radius:999px; color:var(--mocha); }
@media (max-width:840px){ .sensory{ grid-template-columns:1fr; } .sensory-media{ min-height:60vh; } }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); text-align:center; }
.stat .s-num{ font-family:var(--ff-display); font-size:clamp(50px,6vw,92px); line-height:1; color:var(--espresso); letter-spacing:-.02em; }
.stat .s-num .suffix{ color:var(--camel); }
.stat .s-label{ margin-top:12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; gap:46px 20px; } }

/* ---------- Gallery ---------- */
.gallery{ columns:3; column-gap:clamp(14px,2vw,26px); }
.gallery figure{ break-inside:avoid; margin-bottom:clamp(14px,2vw,26px); border-radius:6px; overflow:hidden; position:relative; }
.gallery img{ width:100%; transition:transform 1.3s var(--ease-out), filter 1.3s var(--ease); filter:saturate(.96); }
.gallery figure:hover img{ transform:scale(1.05); filter:saturate(1.06); }
@media (max-width:860px){ .gallery{ columns:2; } }
@media (max-width:520px){ .gallery{ columns:1; } }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,34px); }
.member{ }
.member .m-photo{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:3/4; background:var(--sand); }
.member .m-photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); filter:grayscale(.15); }
.member:hover .m-photo img{ transform:scale(1.05); filter:grayscale(0); }
.member .m-photo .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--ff-display); font-size:60px; color:var(--sand-deep); }
.member h4{ font-family:var(--ff-display); font-size:24px; font-weight:300; margin-top:18px; }
.member span{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); }
@media (max-width:820px){ .team-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Locations ---------- */
.loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); }
.loc{ background:var(--cream); border:1px solid var(--line-soft); border-radius:6px; padding:clamp(30px,3.5vw,52px); transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.loc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.loc .l-city{ font-family:var(--ff-display); font-size:clamp(30px,3.4vw,46px); }
.loc .l-row{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--mocha); }
.loc .l-row .k{ width:84px; flex:none; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); padding-top:3px; }
@media (max-width:760px){ .loc-grid{ grid-template-columns:1fr; } }

/* ---------- Closing CTA ---------- */
.closing{ position:relative; overflow:hidden; color:var(--cream); text-align:center; }
.closing-bg{ position:absolute; inset:0; z-index:-2; }
.closing-bg img{ width:100%; height:100%; object-fit:cover; }
.closing::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(28,22,17,.62); }
.closing .inner{ max-width:820px; margin-inline:auto; padding-block:clamp(90px,16vh,200px); }
.closing h2{ font-family:var(--ff-display); font-size:clamp(40px,7vw,108px); line-height:.98; font-weight:300; }
.closing h2 em{ font-style:italic; color:var(--gold); }
.closing .hero-cta{ justify-content:center; }

/* ---------- Footer ---------- */
.footer{ background:var(--espresso); color:rgba(255,255,255,.72); padding-top:clamp(60px,9vh,110px); }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-light); }
.footer h5{ font-family:var(--ff-sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:400; margin-bottom:20px; }
.footer .f-brand .lg-main{ font-family:var(--ff-display); font-size:34px; color:var(--cream); }
.footer .f-brand p{ max-width:34ch; margin-top:16px; font-size:14px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; font-size:14px; }
.footer ul a{ transition:color .3s; }
.footer ul a:hover{ color:var(--cream); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-block:30px; font-size:12px; letter-spacing:.05em; color:rgba(255,255,255,.5); }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- Mobile menu ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:95; background:var(--espresso); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; padding:var(--gutter); overflow:auto;
  transform:translateY(-100%); visibility:hidden; opacity:0;
  transition:transform .7s var(--ease-out), opacity .5s var(--ease), visibility 0s linear .7s; }
.mobile-menu.open{ transform:translateY(0); visibility:visible; opacity:1; transition:transform .7s var(--ease-out), opacity .5s var(--ease), visibility 0s; }
.mobile-menu a{ font-family:var(--ff-display); font-size:11vw; padding:10px 0; border-bottom:1px solid var(--line-light); }
.mobile-menu .mclose{ position:absolute; top:24px; right:var(--gutter); font-size:13px; letter-spacing:.2em; text-transform:uppercase; }

/* ============================================================
   Mobile optimization
   ============================================================ */
@media (max-width:1040px){
  .nav{ padding:16px var(--gutter); }
  .nav-burger{ padding:10px; margin:-10px -10px -10px 0; }
}
@media (max-width:760px){
  :root{ --gutter:22px; }
  .topbar{ font-size:10px; letter-spacing:.1em; padding:8px 14px; line-height:1.5; }
  .nav-logo .lg-main{ font-size:20px; }
  .nav-logo .lg-sub{ font-size:8px; letter-spacing:.34em; }
  .section-pad{ padding-block:clamp(56px,9vh,90px); }

  /* hero */
  .hero{ padding-bottom:42px; }
  .hero h1{ font-size:clamp(42px,12vw,66px); max-width:16ch; line-height:.96; }
  .hero-meta{ flex-direction:column; align-items:flex-start; gap:22px; margin-top:26px; }
  .hero-sub{ font-size:15px; max-width:100%; }
  .hero-cta{ width:100%; gap:10px; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; padding-inline:1.2em; }
  .hero-rating{ padding-left:0; border-left:none; padding-top:18px; margin-top:2px;
    border-top:1px solid var(--line-light); width:100%; }
  .scroll-hint{ display:none; }

  /* marquee a touch smaller */
  .marquee{ padding-block:20px; }

  /* treatments list reflow — price/duration drop under the name */
  .treatments-head{ margin-bottom:30px; }
  .treat-item{ grid-template-columns:auto 1fr; gap:4px 14px; padding:20px 2px; }
  .treat-item .t-meta{ grid-column:2 / -1; text-align:left; display:flex; align-items:baseline; gap:14px; margin-top:8px; }
  .treat-item .t-dur{ margin-top:0; }
  .treat-item:hover,.treat-item.active{ padding-left:6px; }

  /* worlds */
  .world{ min-height:clamp(360px,66vh,520px); }
  .world-body{ padding:26px; }

  /* sensory */
  .sensory-media{ min-height:54vh; }

  /* footer */
  .footer-bottom{ flex-direction:column; gap:8px; align-items:flex-start; }
}
@media (max-width:440px){
  .hero h1{ font-size:clamp(34px,11vw,52px); }
  .section-title{ font-size:clamp(31px,9.4vw,46px); }
  .closing h2{ font-size:clamp(36px,12vw,60px); }
  .intro-statement{ font-size:16px; line-height:1.95; }
  .team-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .stats{ gap:36px 16px; }
  .loc{ padding:28px 24px; }
  .badge{ font-size:10.5px; padding:8px 13px; }
}

/* Short viewports (landscape phones / small laptops): keep the hero headline
   from growing into the fixed nav. */
@media (max-height:680px){
  .hero h1{ font-size:clamp(32px,8.5vh,72px); }
  .hero-meta{ margin-top:16px; gap:16px; }
  .hero-sub{ font-size:14px; }
  .hero-rating .num{ font-size:38px; }
}