/* ─────────────────────────────────────────────
   JINAR — redesigned design system
   Mocha page background · stacked cream "sheets"
   · script accents · arched photos · dark brown
   panels. Same token NAMES as before, so
   menu.css / booking.css / admin.css keep working.
   ───────────────────────────────────────────── */
:root{
  /* Solace palette — warm cream, soft gold, deep olive-brown ink */
  --mocha:#EAE4D6;          /* page background (outside the cards) */
  --bark:#2A241A;           /* deep brown panels, footer */
  --bark-2:#3A3226;

  --paper:#F6F1E6;          /* main cream surface */
  --paper-2:#FBF8F1;        /* cards on a surface */
  --cream:#EDE4CF;
  --cream-soft:#F2ECDD;

  --ink:#1F1A12;            /* headings */
  --ink-soft:#5A5140;       /* body copy */
  --label:#8B7E62;          /* small uppercase labels */
  --caramel:#A8740F;        /* gold accent — prices, links */
  --caramel-soft:#D8B25A;   /* light gold */
  --forest:#A8740F;         /* PRIMARY buttons (gold, like Solace) */
  --sage:#C9D0B4;           /* soft sage */
  --sage-light:#EAE4D0;     /* light labels on dark panels */
  --on-forest:#F3EDE0;      /* text on dark panels */

  --linen:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
    radial-gradient(90% 70% at 88% 100%, rgba(216,178,90,.35), rgba(216,178,90,0) 65%),
    linear-gradient(155deg,#F6EFDF 0%,#E7D9B9 45%,#C9AE78 100%);

  --r-xl:30px;
  --r-lg:24px;
  --r-md:16px;
  --r-sm:10px;
  --arch:280px 280px 24px 24px;   /* the arched photo shape */

  --pad:clamp(18px, 4vw, 60px);
  --gap:14px;                     /* mocha gap between sheets */
  --max:1420px;
  --inner:1180px;

  /* ── PHOTO SLOTS ─────────────────────────────
     Same 10 filenames as before — drop photos in
     /frontend/images/ and everything lights up. */
  /* Using .webp instead? Just change the extension below — any mix
     of .jpg and .webp is fine, they are independent. */
  --img-hero:      url('/images/hero.jpg');
  --img-panel:     url('/images/leaves.jpg');
  --img-about:     url('/images/about.jpg');
  --img-band-1:    url('/images/ritual.jpg');
  --img-band-2:    url('/images/treatments.jpg');
  --img-room:      url('/images/room.jpg');
  --img-bath:      url('/images/flower-bath.jpg');
  --img-jacuzzi:   url('/images/jacuzzi.jpg');
  --img-products:  url('/images/products.jpg');
  --img-offers:    url('/images/offers.jpg');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  background:var(--mocha);
  color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{
  font-family:'Jost',system-ui,sans-serif;
  font-weight:400;
  line-height:1.04;
  margin:0;
  letter-spacing:-.02em;
}
/* the one elegant word inside a headline — Wellife's "Wellness" trick */
.serif-i{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--caramel);outline-offset:3px;border-radius:2px}
p a:not(.btn),li a:not(.btn){padding-block:12px}

/* the display accent — was a cursive script, now a clean bold
   sans statement to match the cooler modern direction */
.script{
  font-family:'Jost',system-ui,sans-serif;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.01em;
}

.wrap{max-width:var(--inner);margin:0 auto;padding:0 var(--pad)}

/* ── stacked sheet layout ───────────────────── */
.page{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}
.sheet{
  background:var(--paper);
  border-radius:var(--r-xl);
  margin-top:var(--gap);
  padding:clamp(40px,6vw,80px) var(--pad);
}
.sheet--flush{padding:0;overflow:hidden}

/* ── photo blocks ───────────────────────────── */
.photo{
  position:relative;
  background-color:var(--cream-soft);
  background-size:cover;
  background-position:center;
  background-image:var(--linen);
  overflow:hidden;
}
.arch{border-radius:var(--arch)}

/* ── labels + section heads ─────────────────── */
.eyebrow{
  font-size:11.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--label);margin-bottom:14px;
}
.head-script{
  font-size:clamp(32px,4.2vw,54px);
  color:var(--caramel);
  margin:0 0 10px;
}
.head-serif{font-size:clamp(30px,4vw,48px);color:var(--ink)}
.center{text-align:center}
.center .section-lede{margin-inline:auto}
.section-lede{max-width:58ch;color:var(--ink-soft);font-size:15.5px;margin-top:16px}

/* ── buttons ────────────────────────────────── */
.btn{
  display:inline-block;
  font-size:13.5px;letter-spacing:.01em;
  padding:12px 22px;border-radius:100px;
  background:var(--forest);color:#fff;
  border:1px solid var(--forest);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:inherit;border:1px solid rgba(243,237,224,.55)}
.btn-ghost:hover{background:var(--cream);color:var(--bark);border-color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-cream:hover{background:var(--caramel);color:#fff;border-color:var(--caramel)}
.btn-quiet{background:transparent;color:var(--ink);border:1px solid rgba(31,26,18,.3)}
.btn-quiet:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn-wa:hover{background:#178f47;border-color:#178f47;color:#fff}

/* ── navigation ─────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(246,241,230,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(31,26,18,.08);
}
.nav-in{
  max-width:var(--max);margin:0 auto;padding:12px clamp(16px,3vw,36px);
  display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand-mark{height:34px;width:auto}
.brand-lockup{display:block}
.brand-word{height:20px;width:auto}
.brand-sub{
  display:block;
  font-size:9.5px;font-weight:500;letter-spacing:.26em;color:var(--label);
  text-transform:uppercase;margin-top:6px;white-space:nowrap;
}
.nav-links{display:flex;gap:26px;font-size:13.5px}
.nav-links a{color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--caramel)}
.nav-toggle{display:none}

/* ── HERO — full-bleed (edge to edge, no sheet),
      one photo that melts into brown on the
      right (soft gradient, no card) ──────────── */
.hero{
  position:relative;overflow:hidden;
  min-height:min(80vh,640px);
  margin:14px 14px 0;
  border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:var(--paper);
}
/* the video / photo sits behind a soft cream veil, the way Wellife's
   abstract shape floats behind its headline */
.hero-photo{
  position:absolute;inset:0;
  background-image:var(--img-hero), var(--linen);
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(31,26,18,.18), rgba(31,26,18,.42) 100%),
    linear-gradient(180deg, rgba(31,26,18,.10) 0%, rgba(31,26,18,.05) 45%, rgba(31,26,18,.55) 100%);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1.1s ease;
}
.hero-video.is-on{opacity:1}
.hero-panel{
  position:relative;z-index:2;
  width:min(900px,100%);
  padding:clamp(36px,5vw,64px) clamp(20px,4vw,40px) clamp(100px,11vw,130px);
  display:flex;flex-direction:column;align-items:center;
}
.hero-eyebrow{
  font-size:11.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin:0 0 16px;
}
.hero-title{
  font-size:clamp(38px,5.6vw,76px);line-height:1;
  color:#fff;margin:0 0 18px;text-shadow:0 2px 30px rgba(31,26,18,.25);
}
.hero-title .serif-i{font-size:1.08em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-lede{color:rgba(255,255,255,.9);font-size:clamp(14.5px,1.3vw,16.5px);max-width:50ch;margin:0 auto 26px;text-shadow:0 1px 16px rgba(31,26,18,.3)}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.hero-cta .btn{background:#fff;border-color:#fff;color:var(--ink)}
.hero-cta .btn:hover{background:var(--caramel);border-color:var(--caramel);color:#fff}
.hero-alt{
  font-size:13.5px;color:#fff;background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.45);border-radius:100px;
  padding:0 22px;min-height:44px;display:inline-flex;align-items:center;
}
.hero-alt:hover{background:rgba(255,255,255,.28)}

/* three stat cards overlapping the bottom edge of the hero —
   the middle one raised and filled with the gold gradient */
.hero-stats{
  position:relative;z-index:3;
  margin:-84px auto 0;
  max-width:980px;padding:0 clamp(16px,4vw,40px);
  display:grid;grid-template-columns:1fr 1.05fr 1fr;align-items:center;
}
.hero-stat{
  position:relative;
  background:rgba(251,248,241,.78);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-xl);
  padding:22px 66px 24px 24px;min-height:150px;
  box-shadow:0 20px 50px rgba(31,26,18,.10);
}
.hero-stat:first-child{margin-right:-18px}
.hero-stat:last-child{margin-left:-18px}
.hero-stat-accent{
  z-index:2;min-height:180px;
  background:linear-gradient(120deg,#6B4A0C 0%,#A8740F 45%,#D8B25A 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 26px 60px rgba(107,74,12,.35);
}
.hero-stat-num{
  font-family:'Jost',sans-serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(28px,2.8vw,40px);line-height:1;color:var(--ink);margin:0 0 12px;
}
.hero-stat-accent .hero-stat-num{color:#fff}
.hero-stat-cap{font-size:13.5px;line-height:1.45;color:var(--ink-soft);margin:0}
.hero-stat-accent .hero-stat-cap{color:rgba(255,255,255,.88)}
.hero-stat-ico{
  position:absolute;right:16px;bottom:16px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:18px;font-weight:300;line-height:1;
}
.hero-stat-accent .hero-stat-ico{background:#fff;color:var(--ink)}


/* ── luxury intro (about) ───────────────────── */
.lux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;max-width:var(--inner);margin:0 auto}
.lux h2{font-size:clamp(36px,4.8vw,60px);line-height:1.02;color:var(--ink)}
.lux .lux-script{display:block;font-size:clamp(24px,2.6vw,34px);color:var(--caramel);margin-top:8px}
.lux p{margin-top:24px;color:var(--ink-soft);font-size:15.5px;max-width:48ch}
.lux .btn{margin-top:10px}
.lux-figures{position:relative;min-height:420px}
.lux-arch{
  position:absolute;inset:0 0 0 18%;
  border-radius:var(--arch);
  background-image:var(--img-about), var(--linen);
}
.lux-small{
  position:absolute;left:0;bottom:-10px;
  width:46%;aspect-ratio:1;
  border-radius:var(--r-lg);
  border:6px solid var(--paper);
  background-image:var(--img-panel), var(--linen);
}

/* ── why choose us ──────────────────────────── */
.why-mark{height:54px;width:auto;margin:0 auto 8px}
.why-grid{
  margin:clamp(34px,5vw,56px) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);
  max-width:var(--inner);
}
.why{
  text-align:center;padding:34px 26px 36px;
  background:var(--paper-2);border:1px solid rgba(31,26,18,.08);
  border-radius:var(--r-lg);
}
.why-ico{
  width:58px;height:58px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--cream);color:var(--caramel);
  font-family:'Jost',sans-serif;font-size:24px;
}
.why h3{font-size:24px;margin-bottom:8px}
.why p{font-size:14.5px;color:var(--ink-soft);margin:0 auto;max-width:30ch}

/* ── full-width photo bands ─────────────────── */
.band-photo{
  border-radius:var(--r-xl);
  margin-top:var(--gap);
  position:relative;overflow:hidden;
  min-height:min(56vh,460px);
  display:grid;align-items:center;
  background-size:cover;background-position:center;
  background-color:var(--cream-soft);
}
.band-1{background-image:var(--img-band-1), var(--linen)}
.band-2{background-image:var(--img-band-2), var(--linen)}
.band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,26,18,.72),rgba(31,26,18,.28) 70%)}
.band-in{position:relative;z-index:2;color:#F6F1E6;padding:clamp(40px,7vw,84px) var(--pad);max-width:680px}
.band-in .eyebrow{color:var(--sage-light)}
.band-in h2{font-size:clamp(28px,3.8vw,44px);color:#F6F1E6}
.band-in .script{display:block;font-size:clamp(24px,3vw,36px);color:var(--cream);margin-bottom:6px}
.band-in p{color:rgba(246,239,227,.92);font-size:15.5px;max-width:44ch;margin-top:16px}
.band-in .btn{margin-top:22px;background:var(--cream);color:var(--bark);border-color:var(--cream)}
.band-in .btn:hover{background:#fff;border-color:#fff}

/* ── services (rendered by home.js) ─────────── */
/* ── curved photo rail (Solace gallery) ────────────────────
   A horizontal row of tall photo cards. Two soft ellipses in the
   section colour bite into the top and bottom edge, so the row
   looks slightly bowed — shorter in the middle, taller at the
   sides — exactly like Solace's photo strip. Swipe on phones,
   arrows or trackpad on desktop. */
.curve{
  position:relative;overflow:hidden;
  margin:clamp(30px,5vw,50px) calc(var(--pad) * -1) 0;
  --curve-bg:var(--paper);
  --curve-depth:clamp(26px,4vw,56px);
}
.curve::before,.curve::after{
  content:"";position:absolute;left:-15%;right:-15%;z-index:3;
  height:calc(var(--curve-depth) * 2);
  background:var(--curve-bg);pointer-events:none;border-radius:50%;
}
.curve::before{top:calc(var(--curve-depth) * -1)}
.curve::after{bottom:calc(var(--curve-depth) * -1)}
.curve-track{
  display:flex;gap:clamp(12px,1.6vw,18px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--pad);scroll-padding:0 var(--pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.curve-track::-webkit-scrollbar{display:none}
.curve-nav{display:flex;justify-content:center;gap:10px;margin-top:18px}
.curve-nav button{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(31,26,18,.18);background:var(--paper-2);
  color:var(--ink);font-size:18px;line-height:1;
  transition:background .2s ease,color .2s ease;
}
.curve-nav button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* one photo card */
.pcard{
  position:relative;flex:0 0 clamp(230px,24vw,300px);
  aspect-ratio:3/4.3;border-radius:var(--r-lg);overflow:hidden;
  scroll-snap-align:center;background:var(--cream);
  display:block;color:#fff;
}
.pcard .media,.pcard-media{position:absolute;inset:0;border-radius:0;height:100%}
.pcard::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(31,26,18,0) 38%,rgba(31,26,18,.35) 62%,rgba(31,26,18,.82) 100%);
}
.pcard-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:calc(var(--curve-depth, 30px) * .6 + 16px) 20px calc(var(--curve-depth, 30px) + 14px);
  display:flex;flex-direction:column;gap:6px;text-align:left;
}
.pcard-kick{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.pcard h3{font-size:clamp(20px,1.9vw,24px);line-height:1.12;color:#fff}
.pcard-desc{
  font-size:13px;line-height:1.5;color:rgba(255,255,255,.86);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.pcard-price{font-size:14.5px;color:#fff;line-height:1.35}
.pcard-price small{display:block;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.72)}
.pcard-book{
  flex:0 0 auto;font-size:12.5px;color:var(--ink);background:#fff;
  border-radius:100px;padding:0 16px;min-height:38px;display:inline-flex;align-items:center;
}
.pcard-book:hover{background:var(--caramel-soft)}
.pcard .media{transition:transform .6s ease}
.pcard:hover .media{transform:scale(1.04)}
.pcard-landed{outline:3px solid var(--caramel-soft);outline-offset:-3px}

.svc-cta{text-align:center;margin-top:clamp(30px,4vw,44px)}

/* ── testimonials ───────────────────────────── */
.talk-in{max-width:760px;margin:0 auto;text-align:center}
.stars{color:var(--caramel);font-size:18px;letter-spacing:.35em;margin:18px 0 8px}
.talk-quote{
  font-family:'Jost',sans-serif;font-style:italic;font-weight:400;
  font-size:clamp(21px,3vw,28px);line-height:1.45;color:var(--ink-soft);
  min-height:4.4em;margin:0;
}
.talk-name{
  margin-top:18px;font-size:11.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--label);
}
.talk-nav{display:flex;justify-content:center;gap:12px;margin-top:26px}
.talk-nav button{
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(31,26,18,.22);background:transparent;
  font-size:17px;color:var(--ink);line-height:1;
  transition:background .2s ease,color .2s ease;
}
.talk-nav button:hover{background:var(--forest);border-color:var(--forest);color:var(--paper)}

/* ── spa moments (sits on the mocha, no sheet) ─ */
.moments{padding:clamp(50px,8vw,100px) var(--pad);text-align:center;color:var(--ink)}
.moments .eyebrow{color:var(--label)}
.moments .head-script{color:var(--ink)}
.moments .section-lede{color:var(--ink-soft);margin-inline:auto}
.moments-grid{
  margin:clamp(30px,5vw,50px) auto 0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  max-width:var(--inner);
}
.moment{border-radius:var(--r-md);aspect-ratio:3/4}
.moment:nth-child(1){background-image:var(--img-room), var(--linen)}
.moment:nth-child(2){background-image:var(--img-bath), var(--linen)}
.moment:nth-child(3){background-image:var(--img-jacuzzi), var(--linen)}
.moment:nth-child(4){background-image:var(--img-products), var(--linen)}
.moment:nth-child(5){background-image:var(--img-offers), var(--linen)}
.moment:nth-child(6){background-image:var(--img-panel), var(--linen)}
.moment:nth-child(odd){transform:translateY(14px)}

/* ── FAQ ────────────────────────────────────── */
.faq-grid{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,70px);
  align-items:start;max-width:var(--inner);margin:0 auto;
}
.faq{
  border:1px solid rgba(31,26,18,.12);border-radius:var(--r-md);
  background:var(--paper-2);margin-top:12px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-size:15.5px;color:var(--ink);min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:'Jost',sans-serif;font-size:24px;
  color:var(--caramel);transition:transform .2s ease;flex-shrink:0;
}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 22px 20px;font-size:14.5px;color:var(--ink-soft);max-width:60ch}
.faq-a p{margin:0}
.faq-aside{
  border-radius:var(--arch);overflow:hidden;position:relative;
  min-height:440px;background-image:var(--img-products), var(--linen);
  background-size:cover;background-position:center;background-color:var(--cream-soft);
  display:flex;align-items:flex-end;
}
.faq-aside::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,26,18,0) 40%,rgba(31,26,18,.72))}
.faq-aside-in{position:relative;z-index:2;padding:28px;color:#F6F1E6}
.faq-aside-in h3{font-size:24px;color:#F6F1E6;margin-bottom:6px}
.faq-aside-in p{font-size:13.5px;color:rgba(246,239,227,.9);margin-bottom:16px;max-width:30ch}

/* ── visit / locations ──────────────────────── */
.loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,28px);max-width:var(--inner);margin:clamp(30px,5vw,50px) auto 0}
.loc-grid-single{grid-template-columns:1fr;max-width:560px}
.loc{background:var(--paper-2);border:1px solid rgba(31,26,18,.1);border-radius:var(--r-lg);padding:34px 32px 36px}
.loc h3{font-size:27px;margin-bottom:6px}
.loc-area{font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--label);margin-bottom:20px}
.loc dl{margin:0;display:grid;grid-template-columns:92px 1fr;gap:10px 14px;font-size:14.5px}
.loc dt{color:var(--label);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.loc dd{margin:0;color:var(--ink-soft)}
.loc dd a:hover{color:var(--caramel)}
.loc .btn{margin-top:26px}
.loc-map{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(31,26,18,.1);min-height:340px;
}
.loc-map iframe{display:block;width:100%;height:100%;min-height:340px;border:0}
.loc-map-open{
  position:absolute;left:16px;bottom:16px;
  background:var(--paper);color:var(--ink);
  font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 18px;border-radius:100px;
  box-shadow:0 6px 18px rgba(31,26,18,.22);
  min-height:38px;display:inline-flex;align-items:center;
}
.loc-map-open:hover{background:var(--caramel);color:#fff}
@media (max-width:760px){
  .loc dl{grid-template-columns:1fr;gap:2px 0}
  .loc dt{padding-top:14px}
  .loc dd a{display:inline-flex;align-items:center;min-height:40px}
}

/* ── reservation band ───────────────────────── */
.reserve{
  border-radius:var(--r-xl);margin-top:var(--gap);
  position:relative;overflow:hidden;
  min-height:min(64vh,520px);
  display:grid;place-items:center;text-align:center;
  background-image:var(--img-band-1), var(--linen);
  background-size:cover;background-position:center;background-color:var(--bark);
}
.reserve::after{content:"";position:absolute;inset:0;background:rgba(31,26,18,.68)}
.reserve-in{position:relative;z-index:2;color:#F6F1E6;padding:clamp(46px,8vw,90px) 24px}
.reserve-kick{
  font-family:'Jost',sans-serif;font-style:italic;
  font-size:clamp(18px,2.4vw,24px);color:var(--sage-light);
}
.reserve-script{font-size:clamp(40px,6vw,72px);color:#F6F1E6;margin:4px 0 10px}
.reserve-in p{color:rgba(246,239,227,.92);font-size:15.5px;max-width:46ch;margin:0 auto 26px}
.reserve-in .btn{background:var(--cream);color:var(--bark);border-color:var(--cream)}
.reserve-in .btn:hover{background:#fff;border-color:#fff}

/* ── footer ─────────────────────────────────── */
.footer{
  background:var(--bark);color:var(--on-forest);
  margin-top:var(--gap);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.footer-in{
  max-width:var(--inner);margin:0 auto;
  padding:clamp(48px,7vw,84px) var(--pad) 34px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,60px);
}
.footer img{height:110px;width:auto;filter:invert(1);opacity:.92;margin-bottom:20px}
.footer p{font-size:14.5px;color:var(--on-forest);max-width:34ch}
.footer h4{
  font-family:'Jost',sans-serif;font-weight:400;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage-light);margin:0 0 18px;
}
.footer ul{list-style:none;margin:0;padding:0;font-size:14px;display:grid;gap:2px}
.footer ul a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0}
.footer a:hover{color:#fff}
.footer-base{
  max-width:var(--inner);margin:0 auto;padding:24px var(--pad) 34px;
  border-top:1px solid rgba(243,237,224,.16);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(243,237,224,.85);
}

/* ── whatsapp float ─────────────────────────── */
.wa{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;
  min-height:42px;
  display:flex;align-items:center;gap:10px;
  background:var(--bark);color:var(--paper);
  padding:10px 18px;border-radius:100px;
  font-size:12.5px;letter-spacing:.02em;
  box-shadow:0 10px 30px rgba(31,26,18,.35);
}
.wa:hover{background:var(--caramel)}

/* still used by home.js error fallback */
.sig-loading{color:var(--ink-soft);font-size:14px}
.sig-loading a{color:var(--caramel);border-bottom:1px solid currentColor}

/* ── responsive ─────────────────────────────── */
@media (max-width:1000px){
  .moments-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--paper);
    border-bottom:1px solid rgba(31,26,18,.08);padding:8px var(--pad) 20px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 0;min-height:44px;display:flex;align-items:center;border-bottom:1px solid rgba(31,26,18,.06)}
  .brand-mark{height:34px}
  .brand-word{height:20px}
  .brand-sub{font-size:8px;letter-spacing:.24em;margin-top:5px}
  .nav-toggle{
    display:block;background:none;border:0;cursor:pointer;
    font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink);padding:14px 6px;min-height:44px;
  }
  .nav .btn{display:none}

  .hero{min-height:0;margin:10px 10px 0;border-radius:var(--r-lg)}
  .hero-panel{padding:56px 18px 96px}
  .hero-title{font-size:clamp(34px,10vw,46px)}
  .hero-lede{font-size:15px}
  /* stats become a swipeable row on phones instead of a tall stack */
  .hero-stats{
    margin-top:-60px;padding:0 16px 8px;
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .hero-stats::-webkit-scrollbar{display:none}
  .hero-stat,.hero-stat-accent{
    flex:0 0 78%;scroll-snap-align:center;
    margin:0 !important;min-height:140px;padding:20px 62px 22px 20px;
  }

  .lux{grid-template-columns:1fr}
  .lux-figures{min-height:340px;order:-1}
  .lux-small{bottom:0}

  .why-grid{grid-template-columns:1fr}
  .pcard{flex-basis:68vw}
  .curve{--curve-depth:22px}
  .faq-grid{grid-template-columns:1fr}
  .faq-aside{min-height:340px}
  .loc-grid{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr}
  .moment:nth-child(odd){transform:none}
}
@media (max-width:560px){
  .moments-grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ─────────────────────────────────────────────
   MOTION — page loader, page transitions,
   scroll reveals, hero entrance, photo hovers
   ───────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;z-index:300;
  background:var(--bark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  opacity:1;visibility:visible;
  transition:opacity .45s ease,visibility .45s ease;
}
#loader.hide{opacity:0;visibility:hidden}
#loader img{
  height:64px;width:auto;
  filter:brightness(0) invert(1);
  animation:loaderPulse 1.5s ease-in-out infinite;
}
#loader span{
  font-family:'Jost',sans-serif;font-weight:500;letter-spacing:.02em;
  font-size:20px;color:var(--cream);
}
@keyframes loaderPulse{
  0%,100%{opacity:.35;transform:scale(.94)}
  50%{opacity:1;transform:scale(1)}
}

/* scroll reveal (classes added by /js/page.js) */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}
.reveal.rv-right{transform:translateX(48px)}
.reveal.rv-zoom{transform:scale(.94)}
.reveal.rv-rise{transform:translateY(60px)}
.reveal.in{opacity:1;transform:none}

/* nav: soft shadow after scrolling */
.nav{transition:box-shadow .3s ease,background .3s ease}
.nav.scrolled{box-shadow:0 8px 30px rgba(31,26,18,.08)}

/* the raised gold stat card floats gently */
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hero-stat-accent.in{animation:floaty 6s ease-in-out 1.2s infinite}

/* hero video / photo breathes slowly */
@keyframes slowZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.hero-photo{animation:slowZoom 18s ease-in-out infinite alternate}

/* lively hovers everywhere */
.btn,.hero-alt,.curve-nav button,.talk-nav button,.cat-rail a{transition:translate .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.btn:hover,.hero-alt:hover,.curve-nav button:hover,.talk-nav button:hover,.mg-tab:hover{translate:0 -2px}
/* elements that also scroll-reveal keep their reveal transition and add a hover lift */
.pcard,.why,.mg-tab{
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),
             translate .35s ease,box-shadow .35s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.pcard:hover,.why:hover{translate:0 -6px}
.why:hover{box-shadow:0 18px 40px rgba(31,26,18,.08)}
.hero-stat-ico{transition:transform .3s ease}
.hero-stat:hover .hero-stat-ico{transform:rotate(90deg)}
.faq summary{transition:color .2s ease}
.faq summary:hover{color:var(--caramel)}

/* hero entrance */
.hero-eyebrow,.hero-lede,.hero-cta{animation:riseIn .9s ease both}
.hero-eyebrow{animation-delay:.1s}
.hero-lede{animation-delay:.7s}
.hero-cta{animation-delay:.85s}
@keyframes riseIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* photo micro-interactions */
.moment{transition:transform .5s ease}
.moment:hover{transform:scale(1.025)}

/* accessibility: calm everything down */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-photo,.hero-stat-accent.in{animation:none}
  .hero-eyebrow,.hero-title,.hero-lede,.hero-cta{animation:none}
  #loader{transition:none}
  #loader img{animation:none}
  .moment,.pcard .media{transition:none}
}


/* ─────────────────────────────────────────────
   HOMEPAGE ONLY (body.home) — no frame: every
   section runs edge to edge like the hero. The
   menu / booking pages keep their sheet cards.
   ───────────────────────────────────────────── */
.home .page{max-width:none;padding:0}
.home .sheet{border-radius:0;margin-top:0}
.home .band-photo,
.home .reserve{border-radius:0;margin-top:0}
.home .band-in{
  max-width:var(--max);margin:0 auto;width:100%;
  box-sizing:border-box;
}
/* gentle rhythm now that the gaps are gone:
   every other white section gets a cream tint */
.home #about + .sheet.center,   /* why choose us */
.home #reviews,                 /* testimonials  */
.home #visit{background:var(--cream-soft)}

/* breathing room under the floating stat cards */
.home .hero-stats{margin-bottom:clamp(40px,6vw,70px)}
/* section titles: calm ink instead of gold, like both references */
.head-script{color:var(--ink)}


/* ─────────────────────────────────────────────
   MOTION v2 (QClay-style) — word-by-word headline
   reveals, curtain-reveal photos, soft parallax,
   counting numbers, and a slow text marquee.
   Classes are added by /js/page.js.
   ───────────────────────────────────────────── */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .1em;margin:0 -.04em -.1em}
.split .w > span{
  display:inline-block;transform:translateY(110%);
  transition:transform 1s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i, 0) * 70ms + var(--d, 0s));
}
.split.in .w > span{transform:none}

/* photos open like a curtain, bottom to top */
/* A curtain in the section colour covers the photo and lifts away.
   (The photo itself is never clipped, so the browser can always see
   it scroll into view and trigger the reveal.) */
.clip{overflow:hidden}
.clip::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--clip-bg, var(--paper));
  transform-origin:50% 0;
  transition:transform 1.3s cubic-bezier(.77,0,.18,1) var(--d,0s);
}
.clip.in::before{transform:scaleY(0)}
.clip .media{transform:scale(1.12);transition:transform 1.6s cubic-bezier(.19,1,.22,1) var(--d,0s)}
.clip.in .media{transform:none}
.moments .clip{--clip-bg:var(--mocha)}
#faq .clip{--clip-bg:var(--paper)}

/* slow scrolling word strip between sections */
.marquee{
  overflow:hidden;white-space:nowrap;
  padding:clamp(18px,3vw,30px) 0;
  border-block:1px solid rgba(31,26,18,.1);
  margin:0 0 clamp(30px,5vw,56px);
}
.marquee-track{display:inline-flex;align-items:center;gap:clamp(22px,3vw,40px);animation:marquee 38s linear infinite}
.marquee span{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(24px,3vw,38px);color:var(--ink)
}
.marquee i{font-style:normal;color:var(--caramel);font-size:14px}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .split .w > span{transform:none;transition:none}
  .clip::before{display:none}
  .clip .media{transform:none}
  .marquee-track{animation:none}
}