/* =========================================================
   MK Beauty Salon — homepage concept
   Palette pulled from the salon itself: emerald chairs,
   cream arches, butter niches, brass trim.
   ========================================================= */

:root{
  /* Opt out of browser force-dark (Chrome Android's auto dark theme was
     inverting the cream palette to near-black on the client's phone). */
  color-scheme: light only;

  /* ink */
  --ink:        #16150F;
  --ink-2:      #3D3A31;
  --muted:      #666153;

  /* grounds */
  --cream:      #FBF8F1;
  --bone:       #F3EDE1;
  --butter:     #F1E4C4;

  /* emerald */
  --green:      #123529;
  --green-2:    #1B4A39;
  --green-3:    #2C6B54;
  --green-tint: #E4EDE7;

  /* brass — --gold fills and rules, --gold-ink small text on light grounds,
     --gold-2/-3 reserved for the dark footer, marquee and map */
  --gold:       #8A6A2C;
  --gold-ink:   #7E6127;
  --gold-2:     #C9A75E;
  --gold-3:     #E4D2A6;

  --blush:      #EBD3CA;

  --line:       rgba(22,21,15,.13);
  --line-soft:  rgba(22,21,15,.07);

  --serif: "Cormorant Garamond", Didot, "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Jost", Futura, "Century Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);

  --hdr: 78px;
  --topbar: 38px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* anchor jumps clear the fixed header (66px once scrolled) with 18px of air;
     assets/js/main.js reads this back, so native and scripted jumps agree */
  scroll-padding-top:84px;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1.05em; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
address{ font-style:normal; }
::selection{ background:var(--gold-2); color:#fff; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--green); color:#fff; padding:12px 20px; font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* ---------- type ---------- */
h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(3.1rem, 7.6vw, 6.1rem); line-height:.98;
  letter-spacing:-.018em; margin:.1em 0 .34em;
}
h1 em{ font-style:italic; color:var(--green); }
h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.15rem, 4.5vw, 3.65rem); line-height:1.06;
  letter-spacing:-.012em;
}
h3{ font-family:var(--sans); font-weight:500; font-size:1rem; letter-spacing:.01em; }

.eyebrow{
  font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  font-weight:400; color:var(--gold-ink); margin:0 0 .9em;
}
.eyebrow--gold{ color:var(--gold-ink); }

.rule{ width:56px; height:1px; background:var(--gold); margin:0 0 1.6em; opacity:.7; }

.sec-head{ max-width:640px; margin-bottom:clamp(40px,6vw,72px); }
.sec-head--center{ text-align:center; margin-inline:auto; }
.sec-head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; max-width:none; flex-wrap:wrap;
}
.sec-head__lede{ margin-top:1.1em; color:var(--ink-2); font-size:1.05rem; }

.stars{ color:var(--gold-ink); letter-spacing:.14em; font-size:12px; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--green); --fg:#fff; --bd:var(--green);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  padding:15px 30px; font-size:13px; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; line-height:1;
  border-radius:999px; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(18,53,41,.55); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:11px 22px; font-size:11.5px; }
.btn--lg{ padding:18px 40px; }
.btn--green:hover{ --bg:var(--green-2); --bd:var(--green-2); }
.btn--gold{ --bg:var(--gold); --bd:var(--gold); }
.btn--gold:hover{ --bg:#6F5623; --bd:#6F5623; box-shadow:0 12px 28px -14px rgba(138,106,44,.6); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn--ghost:hover{ --bd:var(--ink); box-shadow:none; }
 /* kept as a modifier so the six HTML files need no edit; the sections that
    used it are light-grounded now, so it matches .btn--ghost. */
.btn--ghost-dark{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn--ghost-dark:hover{ --bd:var(--ink); box-shadow:none; }
.btn--outline{ --bg:transparent; --fg:var(--ink); --bd:rgba(22,21,15,.2); }
.btn--outline:hover{ --bg:var(--ink); --fg:var(--cream); --bd:var(--ink); }
.arr{ width:19px; height:11px; transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* ---------- topbar ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--topbar);
  background:var(--green); color:var(--gold-3);
  font-size:12px; letter-spacing:.06em;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:100%; }
.topbar p{ margin:0; display:flex; align-items:center; gap:8px; }
.topbar .ico{ width:14px; height:14px; opacity:.8; flex:none; }
.topbar__tel{ letter-spacing:.1em; transition:color .3s; }
.topbar__tel:hover{ color:#fff; }
.dot{
  width:6px; height:6px; border-radius:50%; background:#6FCF97; flex:none;
  box-shadow:0 0 0 0 rgba(111,207,151,.6); animation:pulse 2.6s infinite;
}
.dot.is-closed{ background:#C9A75E; animation:none; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(111,207,151,0); } 100%{ box-shadow:0 0 0 0 rgba(111,207,151,0); } }
body.scrolled .topbar{ transform:translateY(-100%); opacity:0; }

@media (max-width: 900px){ .topbar .topbar__loc{ display:none; } }
@media (max-width: 560px){ .topbar .topbar__tel{ display:none; } .topbar__in{ justify-content:center; } }

/* ---------- header ---------- */
.header{
  position:fixed; top:var(--topbar); left:0; right:0; z-index:70; height:var(--hdr);
  display:flex; align-items:center;
  transition:top .45s var(--ease), height .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
body.scrolled .header{
  top:0; height:66px; background:rgba(251,248,241,.9);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line-soft); box-shadow:0 8px 30px -22px rgba(22,21,15,.5);
}
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; width:100%; }

.brand{ color:var(--ink); flex:none; }
.brand__mark{ width:112px; height:auto; transition:width .45s var(--ease); }
body.scrolled .brand__mark{ width:96px; }
.brand__mark--lg{ width:150px; }

.nav{ display:flex; gap:clamp(18px,2.4vw,34px); margin-inline:auto; }
.nav a{
  position:relative; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 0; color:var(--ink-2); transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after, .nav a.is-current::after{ transform:scaleX(1); transform-origin:left; }
.nav a.is-current{ color:var(--ink); }

.header__cta{ display:flex; align-items:center; gap:14px; flex:none; }
.lang{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); font-size:15px; color:var(--ink-2);
  transition:border-color .3s, color .3s, background .3s;
}
.lang:hover{ border-color:var(--gold); color:var(--gold); }

.burger{ display:none; width:40px; height:40px; position:relative; }
.burger span{
  position:absolute; left:9px; right:9px; height:1.4px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:23px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1000px){
  .nav{ display:none; }
  .burger{ display:block; }
  .header__cta .btn{ display:none; }
  .lang{ display:none; }
}

/* ---------- mobile nav ---------- */
.mobilenav{
  position:fixed; inset:0; z-index:65; background:var(--cream);
  padding:calc(var(--hdr) + var(--topbar) + 30px) var(--pad) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transform:translateY(-12px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.mobilenav[hidden]{ display:flex !important; }
.mobilenav.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mobilenav nav{ display:flex; flex-direction:column; gap:4px; }
.mobilenav nav a{
  font-family:var(--serif); font-size:2.5rem; line-height:1.3; color:var(--ink);
  border-bottom:1px solid var(--line-soft); padding:.32em 0;
}
.mobilenav__foot{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.mobilenav__foot .btn{ width:100%; }
.mobilenav__tel{ font-size:14px; letter-spacing:.12em; color:var(--muted); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease) var(--d,0s), transform .95s var(--ease) var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee__track{ animation:none !important; }
}

/* ---------- frames ---------- */
.frame{
  margin:0; position:relative; overflow:hidden; border-radius:210px 210px 14px 14px;
  background:var(--bone); box-shadow:0 40px 80px -50px rgba(18,53,41,.6);
}
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.frame:hover img{ transform:scale(1.035); }
.frame--tall{ aspect-ratio:361/560; }
.frame--gold::after{
  content:""; position:absolute; inset:9px; border:1px solid rgba(168,130,63,.42);
  border-radius:200px 200px 8px 8px; pointer-events:none;
}

/* ---------- HERO ---------- */
.hero{
  position:relative; padding-top:calc(var(--hdr) + var(--topbar) + clamp(36px,6vw,78px));
  padding-bottom:clamp(70px,9vw,120px); overflow:hidden;
}
.hero__glow{
  position:absolute; inset:auto -10% 0 -10%; height:70%;
  background:
    radial-gradient(58% 70% at 78% 40%, rgba(241,228,196,.75), transparent 68%),
    radial-gradient(46% 62% at 12% 78%, rgba(228,237,231,.85), transparent 70%);
  pointer-events:none;
}
.hero__in{
  position:relative; display:grid; gap:clamp(40px,6vw,80px);
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); align-items:center;
}
.hero__copy{ max-width:620px; }
.hero__lede{ font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--ink-2); max-width:47ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.1em; }
.hero__proof{
  display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:2.6em;
  padding-top:1.7em; border-top:1px solid var(--line-soft);
  font-size:13.5px; color:var(--muted);
}
.hero__proof li{ display:flex; align-items:center; gap:9px; }
.hero__proof strong{ font-weight:500; color:var(--ink); }

.hero__art{ position:relative; }
.hero__art .frame--tall{ width:min(100%,420px); margin-left:auto; }
.frame--inset{
  position:absolute; left:0; bottom:-42px; width:min(46%,182px); aspect-ratio:361/470;
  border-radius:120px 120px 10px 10px; border:6px solid var(--cream);
  box-shadow:0 30px 60px -34px rgba(18,53,41,.6);
}
.badge{
  position:absolute; top:26px; left:2%; width:104px; height:104px; border-radius:50%;
  background:var(--green); color:var(--gold-3);
  display:grid; place-items:center; align-content:center; gap:0;
  text-align:center; box-shadow:0 24px 46px -24px rgba(18,53,41,.75);
}
.badge__num{ font-family:var(--serif); font-size:2.5rem; line-height:1; color:#fff; }
.badge__txt{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; line-height:1.5; margin-top:3px; }

.scrollcue{
  position:absolute; left:50%; bottom:22px; translate:-50% 0; width:1px; height:52px;
  background:var(--line); overflow:hidden;
}
.scrollcue span{ position:absolute; inset:0; background:var(--gold); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 55%,100%{ transform:translateY(100%);} }

@media (max-width: 980px){
  .hero__in{ grid-template-columns:1fr; gap:clamp(30px,5vw,52px); }
  .hero__art{ order:-1; display:flex; justify-content:center; }
  .hero__art .frame--tall{ width:min(62%,300px); margin:0; }
  .frame--inset{ left:auto; right:4%; bottom:-26px; width:118px; }
  .badge{ left:2%; top:12%; width:80px; height:80px; }
  .badge__num{ font-size:1.85rem; }
  .badge__txt{ font-size:8.5px; }
  .scrollcue{ display:none; }
  .hero{ padding-top:calc(var(--hdr) + var(--topbar) + 26px); padding-bottom:clamp(54px,9vw,90px); }
}
@media (max-width: 560px){
  .hero__actions .btn{ flex:1 1 100%; }
}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--green); color:var(--gold-3); overflow:hidden;
  padding:17px 0; border-block:1px solid rgba(228,210,166,.14);
}
.marquee__track{
  display:flex; align-items:center; gap:30px; width:max-content;
  animation:slide 44s linear infinite;
}
.marquee span{ font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; }
.marquee i{ color:var(--gold-2); font-style:normal; font-size:11px; opacity:.8; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- SALON ---------- */
.salon{ padding:clamp(80px,11vw,150px) 0; }
.salon__in{
  display:grid; gap:clamp(44px,7vw,96px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center;
}
.salon__art{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.salon__art .frame{ aspect-ratio:361/560; }
.frame--offset{ margin-top:56px; border-radius:14px 14px 150px 150px; }
.salon__copy p{ color:var(--ink-2); max-width:52ch; }

.stats{
  display:grid; grid-template-columns:repeat(4,auto); gap:14px 40px;
  margin-top:2.6em; padding-top:1.9em; border-top:1px solid var(--line-soft);
}
.stats dt{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.35em; }
.stats dd{ margin:0; font-family:var(--serif); font-size:clamp(2rem,3.1vw,2.7rem); line-height:1; color:var(--green); }
.stats__sub{ font-family:var(--sans) !important; font-size:11px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) !important; margin-top:.5em !important; }

@media (max-width: 980px){
  .salon__in{ grid-template-columns:1fr; }
  .salon__art{ max-width:480px; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:26px 30px; }
}
@media (max-width: 520px){
  .frame--offset{ margin-top:32px; }
}

/* ---------- SERVICES ---------- */
.services{ padding:clamp(80px,11vw,150px) 0; background:var(--bone); }
.menu{
  display:grid; gap:clamp(36px,5vw,74px);
  grid-template-columns:minmax(0,380px) minmax(0,1fr); align-items:start;
}
.menu__visual{
  position:sticky; top:calc(66px + 34px); aspect-ratio:361/500;
  border-radius:190px 190px 12px 12px; overflow:hidden; background:var(--green-tint);
  box-shadow:0 44px 84px -52px rgba(18,53,41,.65);
}
.menu__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity .7s var(--ease), transform 1.3s var(--ease);
}
.menu__img.is-on{ opacity:1; transform:scale(1); }
.menu__corner{ position:absolute; width:34px; height:34px; border:1px solid rgba(251,248,241,.6); pointer-events:none; }
.menu__corner--tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
.menu__corner--br{ bottom:16px; right:16px; border-left:0; border-top:0; }

.menu__list{ border-top:1px solid var(--line); }
.menu__item{ border-bottom:1px solid var(--line); position:relative; }
.menu__item a{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(14px,2.4vw,30px); padding:clamp(22px,2.8vw,32px) 4px;
  transition:padding-left .5s var(--ease);
}
.menu__item:hover a, .menu__item.is-active a{ padding-left:14px; }
.menu__no{ font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:.16em; color:var(--gold-ink); width:26px; }
.menu__name{
  display:block; font-family:var(--serif); font-size:clamp(1.42rem,2.5vw,2.05rem);
  line-height:1.16; letter-spacing:-.008em; transition:color .35s;
}
.menu__item:hover .menu__name, .menu__item.is-active .menu__name{ color:var(--green); }
.menu__desc{ display:block; font-size:14.5px; color:var(--muted); margin-top:.45em; max-width:46ch; }
.menu__meta{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.menu__arrow{ width:19px; height:11px; color:var(--gold); opacity:0; transform:translateX(-8px); transition:opacity .4s var(--ease), transform .45s var(--ease); }
.menu__item:hover .menu__arrow, .menu__item.is-active .menu__arrow{ opacity:1; transform:none; }
.menu__thumb{ display:none; }

.services__foot{
  margin-top:clamp(34px,4vw,54px); font-size:14.5px; color:var(--muted); text-align:center;
}
.services__foot a{ color:var(--green); border-bottom:1px solid var(--gold); padding-bottom:1px; }
.services__foot a:hover{ color:var(--gold); }

@media (max-width: 900px){
  .menu{ grid-template-columns:1fr; }
  .menu__visual{ display:none; }
  .menu__list{ border-top:0; }
  .menu__item{ border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:14px; background:var(--cream); }
  .menu__item a{ grid-template-columns:auto 1fr; grid-template-areas:"no meta" "body body"; padding:20px; row-gap:12px; }
  .menu__item:hover a, .menu__item.is-active a{ padding-left:20px; }
  .menu__no{ grid-area:no; }
  .menu__meta{ grid-area:meta; justify-self:end; }
  .menu__body{ grid-area:body; }
  .menu__arrow{ display:none; }
  .menu__thumb{
    display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 22%;
    order:-1;
  }
  .menu__item{ display:flex; flex-direction:column; }
}

/* ---------- SIGNATURE ---------- */
.signature{
  background:var(--butter); color:var(--ink);
  padding:clamp(80px,11vw,150px) 0; position:relative; overflow:hidden;
}
.signature::before{
  content:""; position:absolute; inset:auto -20% -30% 40%; height:70%;
  background:radial-gradient(50% 60% at 50% 50%, rgba(251,248,241,.85), transparent 70%);
  pointer-events:none;
}
.signature__in{
  position:relative; display:grid; gap:clamp(44px,7vw,88px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center;
}
.signature h2{ color:var(--green); margin-bottom:.42em; }
.signature__copy > p{ color:var(--ink-2); max-width:48ch; }
.ritual{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,38px);
  margin:2.6em 0 2.8em; padding-top:2em; border-top:1px solid rgba(22,21,15,.14);
}
.ritual__no{ font-family:var(--sans); font-size:11px; color:var(--gold-ink); letter-spacing:.18em; }
.ritual h3{ margin:.55em 0 .5em; font-size:1.02rem; color:var(--green); font-weight:400; letter-spacing:.02em; }
.ritual p{ margin:0; font-size:14.3px; color:var(--ink-2); line-height:1.6; }
.signature__art .frame{ width:min(100%,400px); margin-inline:auto; aspect-ratio:361/580; }

@media (max-width: 900px){
  .signature__in{ grid-template-columns:1fr; }
  .signature__art{ order:-1; }
  .signature__art .frame{ width:min(72%,320px); }
}
@media (max-width: 560px){ .ritual{ grid-template-columns:1fr; } }

/* ---------- GALLERY ---------- */
.gallery{ padding:clamp(80px,11vw,150px) 0 clamp(60px,8vw,100px); overflow:hidden; }
.ig-link{
  display:inline-flex; align-items:center; gap:10px; font-size:13px;
  letter-spacing:.1em; color:var(--ink-2); transition:color .3s;
}
.ig-link svg{ width:19px; height:19px; }
.ig-link:hover{ color:var(--gold); }
.ig-link--light{ color:rgba(251,248,241,.62); }
.ig-link--light:hover{ color:var(--gold-2); }

.rail{
  display:flex; gap:clamp(12px,1.6vw,22px); overflow-x:auto; overflow-y:hidden;
  padding:6px var(--pad) 26px; margin-top:clamp(28px,4vw,44px);
  scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
  scroll-padding-inline:var(--pad);
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail__item{
  margin:0; flex:0 0 clamp(196px,22vw,268px); scroll-snap-align:start;
  position:relative; border-radius:150px 150px 10px 10px; overflow:hidden;
  background:var(--bone); box-shadow:0 30px 60px -44px rgba(18,53,41,.6);
}
.rail__item img{
  width:100%; aspect-ratio:361/560; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
  -webkit-user-drag:none; user-select:none;
}
.rail__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:34px 18px 16px;
  background:linear-gradient(to top, rgba(18,53,41,.86), transparent);
  color:var(--gold-3); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .5s var(--ease);
}
.rail__item:hover img{ transform:scale(1.05); }
.rail__item:hover figcaption{ opacity:1; transform:none; }

.rail__nav{ display:flex; gap:10px; }
.railbtn{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-2);
  transition:border-color .3s, color .3s, background .3s, transform .3s;
}
.railbtn svg{ width:19px; height:11px; }
.railbtn:hover{ border-color:var(--green); background:var(--green); color:#fff; }
.railbtn[disabled]{ opacity:.3; pointer-events:none; }

/* ---------- VOICES ---------- */
.voices{ padding:clamp(70px,10vw,130px) 0; background:var(--green-tint); }
.voices__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.voice{
  margin:0; background:var(--cream); border-radius:14px;
  padding:clamp(26px,3vw,38px); display:flex; flex-direction:column;
  box-shadow:0 26px 54px -44px rgba(18,53,41,.5);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.voice:hover{ transform:translateY(-4px); box-shadow:0 34px 64px -42px rgba(18,53,41,.55); }
.voice p{
  font-family:var(--serif); font-size:clamp(1.16rem,1.7vw,1.42rem); line-height:1.42;
  color:var(--ink); margin:.9em 0 1.4em; flex:1;
}
.voice cite{
  font-style:normal; font-size:12.5px; letter-spacing:.1em; color:var(--ink);
  padding-top:1em; border-top:1px solid var(--line-soft);
}
.voice cite span{ display:block; color:var(--muted); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:.4em; }
@media (max-width: 860px){ .voices__grid{ grid-template-columns:1fr; } }

/* ---------- VISIT ---------- */
.visit{ background:var(--bone); color:var(--ink); padding:clamp(80px,11vw,150px) 0; }
.visit__in{
  display:grid; gap:clamp(44px,6vw,84px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center;
}
.visit h2{ color:var(--green); margin-bottom:.4em; }
.visit__copy > p{ color:var(--ink-2); max-width:44ch; }
.visit__cols{
  display:grid; grid-template-columns:1fr 1fr; gap:30px;
  margin:2.4em 0; padding-top:2em; border-top:1px solid var(--line);
}
.visit h3{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:1.1em; font-weight:400;
}
.hours th, .hours td{ padding:.5em 0; font-size:14.3px; font-weight:300; text-align:left; }
.hours th{ color:var(--muted); }
.hours td{ text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.hours tr + tr th, .hours tr + tr td{ border-top:1px solid var(--line-soft); }
.contact li{ margin-bottom:.55em; }
.contact a{ font-size:14.3px; color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:2px; transition:border-color .3s, color .3s; }
.contact a:hover{ color:var(--gold); border-color:var(--gold); }
.visit__actions{ display:flex; flex-wrap:wrap; gap:13px; }
.visit__map{
  /* Everything inside is absolutely positioned, so the box needs a width of its
     own — with the mobile `margin-inline:auto` it otherwise shrinks to nothing. */
  width:100%;
  position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  background:var(--green-tint); border:1px solid var(--line);
  box-shadow:0 40px 80px -52px rgba(18,53,41,.7);
}
.visit__map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:saturate(.82);            /* calms Google's palette next to the brass */
}
/* On touch screens a full-width map hijacks the page scroll, so it starts inert
   and wakes on the first tap. Pointer devices get it live straight away. */
.visit__unlock{
  /* full-size hit target; the visible hint is a small pill at the top-right,
     clear of Google's own "Open in Maps" chip which sits top-left on phones */
  position:absolute; inset:0; display:none; align-items:flex-start; justify-content:flex-end;
  padding:12px; background:transparent; cursor:pointer;
}
.visit__unlock span{
  display:inline-block; padding:9px 13px; border-radius:999px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:rgba(251,248,241,.94); border:1px solid rgba(22,21,15,.1);
  box-shadow:0 10px 24px -14px rgba(18,53,41,.6);
}
@media (hover:none) and (pointer:coarse){
  .visit__map iframe{ pointer-events:none; }
  .visit__unlock{ display:flex; }
  .visit__map.is-live iframe{ pointer-events:auto; }
  .visit__map.is-live .visit__unlock{ display:none; }
}
.visit__card{
  position:absolute; left:14px; bottom:14px; right:14px; max-width:290px;
  padding:16px 18px 15px; border-radius:12px;
  background:rgba(251,248,241,.94); border:1px solid rgba(22,21,15,.08);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 40px -22px rgba(18,53,41,.55);
}
.visit__card p{ margin:0; }
.visit__card-name{ font-family:var(--serif); font-size:1.25rem; line-height:1.1; color:var(--green); }
.visit__card-addr{ margin-top:.45em !important; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.visit__card-link{
  display:inline-flex; align-items:center; gap:.5em; margin-top:.9em;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green);
  border-bottom:1px solid var(--gold); padding-bottom:3px; transition:color .3s, gap .3s;
}
.visit__card-link svg{ width:17px; height:10px; }
.visit__card-link:hover{ color:var(--gold); gap:.85em; }
.pin{ transform-origin:186px 345px; animation:drop 3.6s var(--ease) infinite; }
@keyframes drop{ 0%,70%,100%{ transform:translateY(0);} 78%{ transform:translateY(-9px);} 88%{ transform:translateY(0);} }

@media (max-width: 900px){
  .visit__in{ grid-template-columns:1fr; }
  .visit__map{ max-width:420px; margin-inline:auto; }
}
@media (max-width: 560px){ .visit__actions .btn{ flex:1 1 100%; } }
@media (max-width: 480px){ .visit__cols{ grid-template-columns:1fr; gap:26px; } }

/* ---------- BOOK ---------- */
.book{
  padding:clamp(80px,11vw,140px) 0; text-align:center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(241,228,196,.7), transparent 70%),
    var(--cream);
}
.book__in{ max-width:720px; margin-inline:auto; }
.book h2{ margin-bottom:.4em; }
.book__lede{ color:var(--ink-2); font-size:1.05rem; margin-inline:auto; max-width:52ch; }
.book__actions{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:2.2em; }
.book__alt{ margin-top:1.6em; font-size:14px; color:var(--muted); }
.book__alt a{ color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:2px; transition:color .3s, border-color .3s; }
.book__alt a:hover{ color:var(--gold); }
.book__alt span{ margin-inline:.6em; color:var(--gold); opacity:.6; }
@media (max-width: 560px){ .book__actions .btn{ flex:1 1 100%; } }

/* ---------- FOOTER ---------- */
.footer{ background:#0D2820; color:rgba(251,248,241,.62); padding:clamp(56px,7vw,86px) 0 0; font-size:14px; }
.footer__in{
  display:grid; gap:clamp(30px,4vw,50px);
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  padding-bottom:clamp(44px,5vw,66px);
}
.footer__brand .brand__mark{ color:var(--gold-3); margin-bottom:22px; }
.footer__brand p{ max-width:32ch; line-height:1.7; }
/* h2, not h3: footer sections sit directly under the page (the 404 has no h2 of its own) */
.footer__col h2{
  font-family:var(--sans); font-size:10.5px; line-height:1.65; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:1.4em; font-weight:400;
}
.footer__col a{ display:block; margin-bottom:.62em; transition:color .3s; }
.footer__col a:hover{ color:var(--gold-2); }
.footer__col address{ margin-bottom:1.2em; line-height:1.7; }
.footer__base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:22px; border-top:1px solid rgba(228,210,166,.12);
  font-size:12px; letter-spacing:.06em;
}
.footer__base p{ margin:0; }
.footer__note{ color:rgba(251,248,241,.35); }

@media (max-width: 900px){ .footer__in{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer__in{ grid-template-columns:1fr; } }

/* =========================================================
   INNER PAGES
   ========================================================= */

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

/* ---------- page head ---------- */
.pagehead{
  position:relative; overflow:hidden;
  padding:calc(var(--hdr) + var(--topbar) + clamp(46px,7vw,92px)) 0 clamp(46px,6vw,78px);
  background:
    radial-gradient(62% 100% at 78% 0%, rgba(241,228,196,.72), transparent 68%),
    radial-gradient(50% 90% at 10% 100%, rgba(228,237,231,.8), transparent 72%),
    var(--cream);
  border-bottom:1px solid var(--line-soft);
}
.pagehead--tight{ padding-bottom:clamp(34px,4vw,54px); }
.pagehead__in{ max-width:760px; }
.pagehead h1{ font-size:clamp(2.7rem,6vw,4.6rem); margin:.05em 0 .3em; }
.pagehead__lede{ font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--ink-2); max-width:56ch; }
.pagehead__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:1.9em; }
@media (max-width: 560px){ .pagehead__actions .btn{ flex:1 1 100%; } }

/* ---------- jump nav ---------- */
.jump{
  position:sticky; top:0; z-index:40; background:var(--green);
  border-block:1px solid rgba(228,210,166,.16);
}
body.scrolled .jump{ top:66px; }
.jump__rail{
  display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
}
.jump__rail::-webkit-scrollbar{ display:none; }
.jump__rail a{
  flex:none; padding:15px 20px; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(251,248,241,.6); white-space:nowrap;
  border-bottom:2px solid transparent; transition:color .3s, border-color .3s;
}
.jump__rail a:hover{ color:#fff; border-bottom-color:var(--gold-2); }
.jump__rail a:first-child{ padding-left:0; }

/* ---------- category / price list ---------- */
.menus{ padding:clamp(56px,7vw,96px) 0 clamp(30px,4vw,50px); }
.cat{
  display:grid; gap:clamp(34px,5vw,72px);
  grid-template-columns:minmax(0,340px) minmax(0,1fr); align-items:start;
  padding-bottom:clamp(56px,7vw,96px); margin-bottom:clamp(56px,7vw,96px);
  border-bottom:1px solid var(--line-soft);
  scroll-margin-top:53px;   /* the sticky jump-nav, on top of html's scroll-padding-top */
}
.cat:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
/* `order:2` alone drops the photo into the wide 1fr track and squeezes the price
   list into the 340px one; mirror the tracks so the photo keeps its 340px. */
.cat--flip{ grid-template-columns:minmax(0,1fr) minmax(0,340px); }
.cat--flip .cat__aside{ order:2; }
.cat__aside .frame{ aspect-ratio:361/500; position:sticky; top:150px; }
.cat__body h2{ font-size:clamp(1.9rem,3.4vw,2.85rem); }
.cat__blurb{ color:var(--ink-2); max-width:52ch; }

.pricelist{ margin-top:1.6em; }
.pricelist thead th{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  color:var(--muted); text-align:left; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.pricelist thead th:last-child{ text-align:right; }
.pricelist tbody th{
  font-weight:300; text-align:left; padding:14px 14px 14px 0; font-size:15.5px;
}
.pricelist tbody td{ padding:14px 0; font-size:14px; text-align:right; white-space:nowrap; }
.pricelist tbody tr{ border-bottom:1px solid var(--line-soft); transition:background .3s; }
.pricelist tbody tr:hover{ background:rgba(241,228,196,.34); }
.pricelist tbody tr:last-child{ border-bottom:0; }
.pricelist__amt{ color:var(--green); font-variant-numeric:tabular-nums; }

.cat__book{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1.8em;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green);
  border-bottom:1px solid var(--gold); padding-bottom:5px; transition:color .3s, gap .3s;
}
.cat__book svg{ width:18px; height:11px; }
.cat__book:hover{ color:var(--gold); gap:1em; }

@media (max-width: 900px){
  .cat{ grid-template-columns:1fr; }
  .cat--flip .cat__aside{ order:0; }
  .cat__aside{ max-width:300px; }
  .cat__aside .frame{ position:static; }
}
@media (max-width: 540px){
  /* width:100% is load-bearing: with auto margins alone this box shrank to its unloaded
     photo — 0x0 — then popped to 210x291 on load, dragging every category below it
     down the page and making the footer's service links land in the wrong category. */
  .cat__aside{ width:100%; max-width:210px; margin-inline:auto; }
  .pricelist tbody th{ font-size:14.5px; padding-right:10px; }
}

/* ---------- notes ---------- */
.notes{ background:var(--butter); padding:clamp(64px,8vw,110px) 0; }
.notes h2{ margin-bottom:clamp(30px,4vw,52px); }
.notes__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,30px); }
.note{ background:var(--cream); border-radius:14px; padding:clamp(22px,2.6vw,30px); }
.note h3{ margin-bottom:.8em; color:var(--green); }
.note p{ margin:0; font-size:14.3px; color:var(--ink-2); line-height:1.62; }
@media (max-width: 980px){ .notes__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .notes__grid{ grid-template-columns:1fr; } }

/* ---------- shared CTA band ---------- */
.cta{ background:var(--butter); color:var(--ink); padding:clamp(70px,9vw,124px) 0; text-align:center; }
.cta__in{ max-width:660px; margin-inline:auto; }
.cta h2{ color:var(--green); margin-bottom:.42em; }
.cta p{ color:var(--ink-2); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:2em; }
@media (max-width: 560px){ .cta__actions .btn{ flex:1 1 100%; } }

/* ---------- gallery page ---------- */
.grid-sec{ padding:clamp(52px,6vw,84px) 0 clamp(70px,8vw,110px); }
.filters{ display:flex; flex-wrap:wrap; gap:10px; }
.filter{
  padding:11px 22px; border:1px solid var(--line); border-radius:999px;
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2);
  transition:background .3s, color .3s, border-color .3s;
}
.filter:hover{ border-color:var(--ink); }
.filter.is-on{ background:var(--green); border-color:var(--green); color:#fff; }
.filters__count{ margin:1.2em 0 0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.grid{
  display:grid; gap:clamp(12px,1.6vw,22px); margin-top:clamp(24px,3vw,38px);
  grid-template-columns:repeat(4,1fr);
}
.grid__item[hidden]{ display:none; }
.shot{
  display:block; width:100%; padding:0; position:relative; overflow:hidden;
  border-radius:170px 170px 10px 10px; background:var(--bone);
  box-shadow:0 30px 60px -46px rgba(18,53,41,.6);
}
.shot img{ width:100%; aspect-ratio:361/560; object-fit:cover; transition:transform 1.1s var(--ease); }
.shot:hover img{ transform:scale(1.05); }
.shot__cap{
  position:absolute; left:0; right:0; bottom:0; padding:40px 18px 18px; text-align:left;
  background:linear-gradient(to top, rgba(18,53,41,.9), transparent);
  opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .5s var(--ease);
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap{ opacity:1; transform:none; }
.shot__cap strong{
  display:block; color:#fff; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:400;
}
.shot__cap em{ display:block; margin-top:.5em; font-style:normal; font-size:12.5px; color:rgba(232,220,194,.8); }
.grid__empty{ margin-top:2em; color:var(--muted); }
.grid__foot{ margin-top:clamp(30px,4vw,48px); text-align:center; }

@media (max-width: 1000px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 700px){ .grid{ grid-template-columns:repeat(2,1fr); } .shot{ border-radius:110px 110px 8px 8px; } }

/* ---------- lightbox ---------- */
/* `display:grid` below outranks the UA's [hidden] rule, so restore it explicitly —
   otherwise the closed dialog sits invisible over the page and eats every click. */
.lightbox[hidden]{ display:none; }
.lightbox{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(8px,2vw,26px);
  padding:clamp(16px,4vw,48px);
  background:rgba(10,33,26,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .32s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox__stage{ margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; max-height:100%; }
.lightbox__stage img{
  max-height:min(76vh,760px); width:auto; max-width:100%; object-fit:contain;
  border-radius:130px 130px 8px 8px; box-shadow:0 50px 90px -50px #000;
}
.lightbox__stage figcaption{ text-align:center; }
.lightbox__stage figcaption strong{
  display:block; color:#fff; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:400;
}
.lightbox__stage figcaption em{ display:block; margin-top:.5em; font-style:normal; font-size:13px; color:rgba(232,220,194,.72); }
.lightbox__nav, .lightbox__close{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(228,210,166,.3); color:var(--gold-3);
  transition:background .3s, color .3s, border-color .3s;
}
.lightbox__nav svg{ width:20px; height:12px; }
.lightbox__close svg{ width:20px; height:20px; }
.lightbox__nav:hover, .lightbox__close:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.lightbox__close{ position:absolute; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); z-index:2; }
@media (max-width: 640px){
  .lightbox{ grid-template-columns:1fr; }
  .lightbox__nav{ position:absolute; bottom:clamp(16px,4vw,30px); }
  .lightbox__nav--prev{ left:22%; }
  .lightbox__nav--next{ right:22%; }
  .lightbox__stage img{ max-height:62vh; }
}

/* ---------- about page ---------- */
.story{ padding:clamp(70px,9vw,130px) 0; }
.story__in{
  display:grid; gap:clamp(44px,7vw,96px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:center;
}
.story__art{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.story__art .frame{ aspect-ratio:361/560; }
.story__copy p{ color:var(--ink-2); max-width:52ch; }

.room{ background:var(--green-tint); color:var(--ink); padding:clamp(70px,9vw,130px) 0; }
.room__in{
  display:grid; gap:clamp(44px,7vw,88px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center;
}
.room h2{ color:var(--green); margin-bottom:.42em; }
.room__copy > p{ color:var(--ink-2); max-width:48ch; }
.room__art .frame{ width:min(100%,400px); margin-inline:auto; aspect-ratio:361/580; }

.ticks{ margin-top:1.8em; display:grid; gap:.85em; }
.ticks li{ position:relative; padding-left:28px; font-size:14.6px; color:var(--ink-2); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.5em; width:13px; height:7px;
  border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
.ticks--tight li{ color:var(--ink-2); }
.ticks--tight li::before{ border-color:var(--gold); }

.team{ padding:clamp(70px,9vw,130px) 0; background:var(--bone); }
.team__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,34px); }
.role{
  background:var(--cream); border-radius:14px; padding:clamp(26px,3vw,38px);
  border:1px solid var(--line-soft);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.role:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -44px rgba(18,53,41,.5); }
.role__no{ font-size:11px; letter-spacing:.18em; color:var(--gold-ink); }
.role h3{ margin:.9em 0 .6em; font-family:var(--serif); font-size:1.5rem; font-weight:400; color:var(--green); }
.role p{ margin:0; font-size:14.3px; color:var(--ink-2); line-height:1.62; }

.standards{ padding:clamp(70px,9vw,130px) 0; }
.standards__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3.4vw,48px); }
.standard h3{ color:var(--green); margin-bottom:.9em; padding-top:1.1em; border-top:1px solid var(--gold); display:inline-block; }
.standard p{ margin:0; font-size:14.6px; color:var(--ink-2); }

@media (max-width: 980px){
  .story__in, .room__in{ grid-template-columns:1fr; }
  .story__art{ max-width:480px; }
  .room__art{ order:-1; }
  .room__art .frame{ width:min(72%,320px); }
  .team__grid{ grid-template-columns:1fr 1fr; }
  .standards__grid{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width: 620px){ .team__grid{ grid-template-columns:1fr; } }

/* ---------- booking page ---------- */
.booking{ padding:clamp(46px,6vw,78px) 0 clamp(70px,9vw,120px); }
.booking__in{
  display:grid; gap:clamp(30px,4vw,56px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:start;
}

.bookform, .booking__side{ min-width:0; }
.bookform{
  background:var(--cream); border:1px solid var(--line); border-radius:18px;
  padding:clamp(26px,3.4vw,44px); box-shadow:0 40px 80px -60px rgba(18,53,41,.5);
}
.bookform__step{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink);
  margin:0 0 1.6em; padding-bottom:1em; border-bottom:1px solid var(--line-soft);
}
.bookform__step--two{ margin-top:2.4em; }

.field{ margin-bottom:1.4em; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); }
.field label{
  display:block; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:.7em;
}
.req{ color:var(--gold-ink); }
.opt{ color:var(--muted); text-transform:none; letter-spacing:.04em; font-size:11.5px; }

.field input, .field textarea, .field select{
  width:100%; max-width:100%; min-width:0; font-family:var(--sans); font-size:16px; font-weight:300; color:var(--ink);  /* <16px and iOS Safari zooms the page on focus */
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; transition:border-color .3s, box-shadow .3s;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.6; }
.field input::placeholder, .field textarea::placeholder{ color:#A9A497; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(168,130,63,.15);
}
.field input.is-bad, .field select.is-bad{ border-color:#B4443A; box-shadow:0 0 0 3px rgba(180,68,58,.12); }
.field input[type="date"]{ min-height:51px; }

.select{ position:relative; }
.select select{ padding-right:44px; cursor:pointer; text-overflow:ellipsis; }
.select__arrow{
  position:absolute; right:17px; top:50%; translate:0 -50%;
  width:12px; height:8px; color:var(--muted); pointer-events:none;
}

.err{ margin:.6em 0 0; font-size:12.5px; color:#B4443A; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.bookform__submit{ width:100%; margin-top:.6em; }
.bookform__call{ width:100%; margin-top:10px; }
.bookform__small{ margin:1.4em 0 0; font-size:13px; color:var(--muted); line-height:1.6; }
.bookform__small a{ color:var(--green); border-bottom:1px solid var(--gold); padding-bottom:1px; }
.bookform__small a:hover{ color:var(--gold); }
.bookform__err{
  margin:1.2em 0 0; padding:14px 16px; border-radius:10px; font-size:13.5px;
  background:rgba(180,68,58,.08); border:1px solid rgba(180,68,58,.25); color:#8E3229;
}
.bookform__err a{ color:#8E3229; border-bottom:1px solid currentColor; }

.bookform.is-sent::before{
  content:"Request composed — send it in WhatsApp and we will confirm shortly.";
  display:block; margin-bottom:1.6em; padding:15px 18px; border-radius:10px;
  background:var(--green-tint); border:1px solid rgba(18,53,41,.18);
  color:var(--green); font-size:13.5px; line-height:1.55;
}

.booking__side{ display:grid; gap:clamp(16px,2vw,22px); position:sticky; top:100px; }
.side-card{ border:1px solid var(--line); border-radius:18px; padding:clamp(24px,2.8vw,32px); }
.side-card h2{ font-size:1.45rem; margin-bottom:.5em; }
.side-card > p{ font-size:14px; color:var(--muted); margin-bottom:1.4em; }
.side-card--dark{ background:var(--green); border-color:var(--green); color:var(--cream); }
.side-card--dark h2{ color:#fff; }
.side-card--dark > p{ color:rgba(251,248,241,.6); }

.side-actions{ display:grid; gap:2px; }
.side-actions a{
  display:block; padding:15px 0; border-top:1px solid rgba(228,210,166,.18);
  transition:padding-left .4s var(--ease);
}
.side-actions li:last-child a{ border-bottom:1px solid rgba(228,210,166,.18); }
.side-actions a:hover{ padding-left:8px; }
.side-actions strong{ display:block; font-weight:400; color:#fff; font-size:15px; }
.side-actions span{ display:block; margin-top:.35em; font-size:12.5px; color:rgba(251,248,241,.55); }

@media (max-width: 940px){
  .booking__in{ grid-template-columns:minmax(0,1fr); }
  .booking__side{ position:static; }
}
@media (max-width: 520px){ .field-row{ grid-template-columns:minmax(0,1fr); gap:0; } }

/* ---------- FAQ ---------- */
.faq{ padding:clamp(70px,9vw,124px) 0; background:var(--butter); }
.faq__list{ max-width:820px; margin-inline:auto; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(20px,2.4vw,26px) 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:clamp(1.16rem,1.9vw,1.42rem); line-height:1.3;
  transition:color .3s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--green); }
.qa summary svg{ width:14px; height:14px; flex:none; color:var(--gold); transition:transform .4s var(--ease); }
.qa[open] summary svg{ transform:rotate(45deg); }
.qa__body{ padding-bottom:clamp(20px,2.4vw,26px); }
.qa__body p{ margin:0; max-width:64ch; color:var(--ink-2); font-size:15px; }

/* ---------- 404 ---------- */
.oops{
  min-height:78vh; display:grid; place-items:center; text-align:center;
  padding:calc(var(--hdr) + var(--topbar) + 60px) 0 90px;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(241,228,196,.7), transparent 70%),
    var(--cream);
}
.oops__in{ max-width:560px; }
.oops__num{
  font-family:var(--serif); font-size:clamp(5rem,16vw,10rem); line-height:.9;
  color:var(--green); opacity:.16; margin-bottom:-.12em;
}
.oops h1{ font-size:clamp(2.2rem,5vw,3.6rem); }
.oops p{ color:var(--ink-2); }
.oops__actions{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:2em; }


/* ---------- floating booking dock ---------- */
.dock{
  position:fixed; right:22px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:58;
  display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.dock.is-on{ opacity:1; transform:none; pointer-events:auto; }
body.menu-open .dock{ display:none; }

.dock__book, .dock__call{
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  height:52px; border-radius:999px; font-size:12px; letter-spacing:.15em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
  transition:transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.dock__book{
  padding:0 26px 0 22px; background:var(--green); color:var(--cream);
  box-shadow:0 18px 40px -18px rgba(18,53,41,.75);
}
.dock__book svg{ width:17px; height:17px; flex:none; }
.dock__book:hover{ background:var(--gold); color:#fff; transform:translateY(-2px); box-shadow:0 20px 44px -18px rgba(138,106,44,.7); }
.dock__call{
  width:52px; padding:0; background:var(--cream); color:var(--ink);
  border:1px solid var(--line); box-shadow:0 18px 40px -22px rgba(18,53,41,.55);
}
.dock__call svg{ width:18px; height:18px; }
.dock__call span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.dock__call:hover{ border-color:var(--green); background:var(--green); color:#fff; transform:translateY(-2px); }

/* the pill sits over the last row of the footer otherwise */
.footer__base{ padding-bottom:calc(22px + 56px); }

@media (max-width: 640px){
  .dock{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); gap:8px; }
  .dock__book{ flex:1; height:54px; padding:0 18px; font-size:11.5px; }
  .dock__call{ width:auto; height:54px; padding:0 18px; }
  .dock__call span{ position:static; width:auto; height:auto; overflow:visible; clip:auto; }
  .footer__base{ padding-bottom:calc(22px + 84px); }
}