/* =====================================================================
   Nepali Ghar Hotel — "An Archive of Home"
   Editorial heritage design system
   Fraunces · Space Mono · Inter  |  Paper · Ink · Madder Brick
   ===================================================================== */

:root{
  --paper:#ECE5D7;
  --paper-2:#E4DAC8;
  --paper-3:#DCD1BC;
  --ink:#1B1714;
  --ink-2:#322A23;
  --brick:#A6432B;
  --brick-deep:#8C3622;
  /* Brand green, straight off the identity sheet (R140 G183 B138) */
  --sage:#8CB78A;
  /* one step deeper on the same hue — gives the flat sage panels a little depth */
  --sage-2:#74A072;
  /* The identity sage read too minty as a full-bleed field beside the warm paper
     tones — it sat outside the palette rather than in it. This is the same green
     walked toward the paper's warmth (hue 98, desaturated, lifted): still clearly
     green, but it belongs to the theme. Large flat panels only — accents, badges
     and card gradients keep the brand --sage. Slightly lighter than --sage, so
     every dark-text contrast note below holds or improves. */
  --sage-soft:#ADBDA3;
  /* same hue taken down to near-black for dark fields and hero fallbacks */
  --pine:#233522;
  --ochre:#B0824A;
  /* Same gold, lightness raised for text sitting on photography. --ochre is a
     mid-tone (relative luminance .26) — over a hero photo it cannot clear 4.5:1
     against either the bright or the shadowed parts of the frame, which is why
     inner-page eyebrows and breadcrumbs measured as low as 1.04:1. This step-up
     sits at .49, enough for large display text over a veiled photo. Dark fields
     only; on the paper tints it is far too light. */
  --ochre-hi:#D9A961;
  /* the identity green with only its lightness pulled down (same hue 117, same
     saturation 24%) so eyebrow text holds its own against the paper tints.
     Taken a further step down from the original #3E623C: at 5.6:1 that cleared
     AA on paper but still read as a faint tint at 11.8px / .16em tracking, and
     eyebrows like "Two Wings, One Home" sank into the background beside the
     display heading under them. Now 7.9:1 on --paper, 6.6:1 on --paper-3. */
  --seto:#2C462B;
  --muted:#6B6053;
  --line:rgba(27,23,20,.18);
  --line-soft:rgba(27,23,20,.10);
  --line-light:rgba(236,229,215,.22);

  --wrap:1300px;
  --pad:48px;
  --section:104px;   /* vertical rhythm between sections */
  --head-gap:76px;   /* space below a section heading block */
  /* aligns full-bleed strips (room track, gallery) to the .wrap content column */
  --gutter:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));

  --serif:"Fraunces",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;

  --e1:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:18px;line-height:1.6;font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
::selection{background:var(--brick);color:var(--paper)}

.skip-link{position:absolute;left:-999px;top:0;z-index:3000;background:var(--ink);color:var(--paper);padding:10px 18px}
.skip-link:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.center{text-align:center}

/* ---------- Typographic primitives ---------- */
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.kicker{
  font-family:var(--mono);font-size:.74rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--seto);display:flex;align-items:center;gap:14px;margin-bottom:40px;
}
.kicker .idx{font-weight:700;color:var(--ink)}
.kicker--light{color:var(--ochre)}
.kicker--light .idx{color:var(--paper)}

.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,5.2vw,4.6rem);
  line-height:1.0;
  letter-spacing:-.015em;
  color:var(--ink);
  font-optical-sizing:auto;
}
.display em{font-style:italic;font-weight:400;color:var(--brick)}
/* unified with .display so every section header matches; only the hero title is larger */
.display--xl{font-size:clamp(2.4rem,5.2vw,4.6rem)}
.display--light{color:var(--paper)}
.display--light em{color:var(--ochre)}

.lede{font-size:18px;line-height:1.72;color:var(--ink-2);max-width:44ch;margin-top:34px}
p{max-width:62ch}

.arrow-link{
  display:inline-flex;align-items:center;gap:.6em;margin-top:22px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding-bottom:4px;border-bottom:1px solid var(--ink);transition:gap .3s var(--e1),color .3s,border-color .3s;
}
.arrow-link:hover{gap:1em;color:var(--brick);border-color:var(--brick)}
.arrow-link--light{color:var(--paper);border-color:rgba(236,229,215,.5)}
.arrow-link--light:hover{color:#fff;border-color:#fff}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  padding:17px 32px;min-height:52px;transition:.3s var(--e1);
}
.btn-solid{background:var(--brick);color:var(--paper)}
.btn-solid:hover{background:var(--ink);color:var(--paper)}
.btn-lg{padding:20px 44px}
.btn-outline{border:1px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-outline--light{border-color:rgba(236,229,215,.5);color:var(--paper)}
.btn-outline--light:hover{background:var(--paper);color:var(--ink)}
.btn-ghost{border:1px solid rgba(236,229,215,.55);color:var(--paper)}
.btn-ghost:hover{background:var(--paper);color:var(--ink)}

/* ---------- Reveal (progressive enhancement) ---------- */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--e1),transform 1s var(--e1)}
.js .reveal.in{opacity:1;transform:none}

.ln{display:block;overflow:hidden;padding-bottom:.22em}
.ln>span{display:block}
.js .reveal-lines .ln>span{transform:translateY(112%);transition:transform 1s var(--e2)}
.js .reveal-lines.in .ln>span{transform:none}
.reveal-lines .ln:nth-child(2)>span{transition-delay:.10s}
.reveal-lines .ln:nth-child(3)>span{transition-delay:.20s}

.media{position:relative;overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e1)}
.reveal-img .media::after{content:"";position:absolute;inset:0;background:var(--brick);transform:scaleX(0);transform-origin:right;transition:transform 1.1s var(--e2)}
.js .reveal-img:not(.in) .media::after{transform:scaleX(1);transform-origin:left}
.js .reveal-img:not(.in) .media img{transform:scale(1.14)}
/* hover zoom — gentle push-in on editorial imagery (figures, dining, wings) */
.media:hover img{transform:scale(1.06)}
.dip:hover .media img{transform:scale(1.06)}    /* zoom across the whole diptych card, not just the image strip */

/* ---------- Creative cursor (desktop, fine pointer) ----------
   Two-part follower: a precise dot + a lagging ring. mix-blend-mode:difference keeps
   it legible over both the paper-light and ink-dark sections. Added by JS only when the
   device has a fine pointer and motion is allowed; native cursor is hidden via .cursor-on. */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:4000;pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;will-change:transform;opacity:0}
.cursor-on .cursor-dot,.cursor-on .cursor-ring{opacity:1}
.cursor-dot{width:4px;height:4px;background:#fff;margin:-2px 0 0 -2px;transition:opacity .25s}
.cursor-ring{width:38px;height:38px;border:1px solid #fff;margin:-19px 0 0 -19px;
  transition:opacity .25s,width .3s var(--e1),height .3s var(--e1),margin .3s var(--e1),background .3s}
.cursor-dot.is-hidden{opacity:0}
.cursor-ring.is-hover{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,255,255,.10)}
.cursor-ring.is-down{width:30px;height:30px;margin:-15px 0 0 -15px}
.cursor-on,.cursor-on *{cursor:none}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}}
.hdr{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .45s var(--e1),box-shadow .45s var(--e1)}
.hdr-row{max-width:var(--wrap);margin:0 auto;padding:17px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;transition:padding .45s var(--e1)}
.wordmark{position:relative;display:inline-block;width:82px;height:118px;transition:.45s var(--e1)}
.wordmark img{position:absolute;top:0;left:0;height:118px;width:auto;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));transition:.45s var(--e1)}
.wordmark .wm-emblem{clip-path:inset(0 0 27% 0)}
.wordmark .wm-text{clip-path:inset(73% 0 0 0);filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.45))}
.hdr.scrolled{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.hdr.scrolled .hdr-row{padding-top:8px;padding-bottom:8px}
.hdr.scrolled .wordmark{height:66px;width:46px}
.hdr.scrolled .wordmark img{filter:none;height:66px}

.nav ul{display:flex;gap:26px}
.nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);display:flex;align-items:center;gap:7px;padding:4px 0;position:relative;text-shadow:0 1px 8px rgba(15,11,8,.45)}
.nav a .mono-i{font-size:.6rem;opacity:.6}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--ochre);transition:width .3s var(--e1)}
.nav a:hover::after{width:100%}
.hdr.scrolled .nav a{color:var(--ink);text-shadow:none}
.hdr.scrolled .nav a::after{background:var(--brick)}
.nav-x{display:none}

/* "More" dropdown — holds the bar to eight links so the header stops crowding
   the tel + Book Now block. News and Gallery live behind the three-line toggle.
   In the mobile drawer the toggle is hidden and both links render inline, so
   nothing on the site is ever reachable only through a dropdown. */
.nav-more{position:relative;display:flex;align-items:center}
.nav-more-t{display:flex;flex-direction:column;justify-content:center;gap:4px;width:24px;height:24px;padding:0;background:none;border:0}
.nav-more-t span{display:block;width:20px;height:1.5px;background:var(--paper);
  transition:background .3s var(--e1),transform .3s var(--e1),opacity .2s var(--e1)}
.hdr.scrolled .nav-more-t span{background:var(--ink)}
.nav-more.open .nav-more-t span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-more.open .nav-more-t span:nth-child(2){opacity:0}
.nav-more.open .nav-more-t span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* ul.nav-drop, not .nav-drop: it has to out-specify `.nav ul{gap:26px}`, which
   would otherwise space the two items 26px apart down the panel */
.nav ul.nav-drop{position:absolute;top:calc(100% + 16px);right:0;z-index:1300;flex-direction:column;gap:0;min-width:172px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 20px 44px -26px rgba(20,15,11,.6);padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--e1),transform .3s var(--e1),visibility .3s var(--e1)}
.nav-more.open .nav-drop{opacity:1;visibility:visible;transform:none}
.nav .nav-drop a{display:block;padding:11px 18px;color:var(--ink);text-shadow:none}
.nav .nav-drop a::after{display:none}
.nav .nav-drop a:hover{background:var(--paper-2);color:var(--brick)}

.hdr-act{display:flex;align-items:center;gap:20px}
.hdr-tel{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--paper);text-shadow:0 1px 8px rgba(15,11,8,.45)}
.hdr.scrolled .hdr-tel{color:var(--ink);text-shadow:none}
.reserve{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--brick);border:1px solid var(--brick);padding:11px 22px;transition:.3s}
.reserve:hover{background:var(--brick-deep);border-color:var(--brick-deep);color:var(--paper)}
.hdr.scrolled .reserve{color:var(--paper);background:var(--brick);border-color:var(--brick)}
.hdr.scrolled .reserve:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.burger{display:none;flex-direction:column;gap:6px;width:40px;height:40px;align-items:center;justify-content:center}
.burger span{width:24px;height:1.5px;background:var(--paper);transition:.3s}
.hdr.scrolled .burger span{background:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--paper);overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:-3;will-change:transform;background:linear-gradient(160deg,var(--ink),var(--ink-2))}
.hero-img img{width:100%;height:120%;object-fit:cover;transform-origin:50% 40%}
.js .hero-img img{animation:kenburns 24s var(--e1) both}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,15,11,.5) 0%,rgba(20,15,11,.16) 40%,rgba(20,15,11,.82) 100%)}
/* the grain only shifts on desktop pointer-move; its .6s transition self-promotes during
   that motion, so no permanent layer is needed for this full-viewport noise texture. */
.hero-grain{position:absolute;inset:-40px;z-index:-1;opacity:.5;pointer-events:none;
  transform:translate(calc(var(--mx,0)*16px),calc(var(--my,0)*16px));transition:transform .6s var(--e1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}


/* cinematic load curtain (sits above the hero, slides up on entry) */
.hero-curtain{position:absolute;inset:0;z-index:6;background:var(--ink);transform:translateY(-101%);pointer-events:none}
.js .hero-curtain{transform:translateY(0);animation:curtain 1.15s var(--e2) both}
@keyframes curtain{0%{transform:translateY(0)}100%{transform:translateY(-101%)}}

.hero-side{position:absolute;top:50%;font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(236,229,215,.7);writing-mode:vertical-rl}
.hero-side--l{left:18px;transform:translateY(-50%) rotate(180deg)}
.hero-side--r{right:18px;transform:translateY(-50%)}
.hero-inner{position:relative;max-width:var(--wrap);width:100%;margin:0 auto;padding:0 var(--pad) 8vh;
  /* soft halo carries legibility over the live video so text stays legible on any frame */
  text-shadow:0 1px 4px rgba(15,11,8,.45),0 2px 24px rgba(15,11,8,.5)}
.kicker--light{margin-bottom:24px}
.hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.9rem,6.4vw,5.8rem);line-height:.96;letter-spacing:-.02em;color:rgba(236,229,215,.9)}
.hero-title em{font-style:italic;color:rgba(236,229,215,.9)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:42px;flex-wrap:wrap}
.hero-sub{font-size:clamp(1rem,1.4vw,1.18rem);max-width:42ch;color:rgba(236,229,215,.92)}
.hero-sub em{font-family:var(--serif);font-style:italic}
.hero-cta{flex-shrink:0}

/* archive-plate meta strip */
.hero-meta{display:flex;flex-wrap:wrap;gap:18px 46px;margin-top:44px;padding-top:26px;max-width:760px;border-top:1px solid rgba(236,229,215,.22)}
.hm{display:flex;flex-direction:column;gap:6px}
.hm-k{color:var(--ochre);font-size:.62rem;letter-spacing:.2em}
.hm-v{font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1;color:var(--paper)}
.hm--time .hm-v{font-family:var(--mono);font-style:normal;font-size:.95rem;letter-spacing:.04em;display:inline-flex;align-items:center;gap:9px}
.hm--time .hm-v::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ochre);animation:pulse 2.6s var(--e1) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(176,130,74,.5)}70%{box-shadow:0 0 0 10px rgba(176,130,74,0)}100%{box-shadow:0 0 0 0 rgba(176,130,74,0)}}

/* choreographed entrance */
.js .hero-line{opacity:0;transform:translateY(28px);transition:opacity 1s var(--e1),transform 1s var(--e1)}
.js .hero.is-loaded .hero-line{opacity:1;transform:none}
.js .hero.is-loaded .kicker--light{transition-delay:.5s}
.js .hero.is-loaded .hero-sub{transition-delay:.9s}
.js .hero.is-loaded .hero-cta{transition-delay:1s}
.js .hero.is-loaded .hero-meta{transition-delay:1.1s}
.hero .reveal-lines.in .ln:nth-child(1)>span{transition-delay:.58s}
.hero .reveal-lines.in .ln:nth-child(2)>span{transition-delay:.7s}
.js .hero-side,.js .scrollcue{opacity:0;transition:opacity 1s var(--e1)}
.js .hero.is-loaded .hero-side,.js .hero.is-loaded .scrollcue{opacity:1;transition-delay:1.25s}

.scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,229,215,.8);text-shadow:0 1px 8px rgba(15,11,8,.55)}
.scrollcue-l{width:46px;height:1px;background:rgba(236,229,215,.6);position:relative;overflow:hidden}
.scrollcue-l::after{content:"";position:absolute;inset:0;background:var(--paper);transform:translateX(-100%);animation:cue 2.4s var(--e1) infinite}
@keyframes cue{50%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}

/* hero video play/pause toggle */
.hero-vtoggle{position:absolute;bottom:30px;right:24px;z-index:4;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(236,229,215,.45);border-radius:50%;color:var(--paper);background:rgba(20,15,11,.28);backdrop-filter:blur(4px);transition:background .3s var(--e1),border-color .3s var(--e1),transform .3s var(--e1)}
.hero-vtoggle:hover{background:var(--brick);border-color:var(--brick);transform:scale(1.06)}
.hero-vtoggle svg{width:20px;height:20px;fill:currentColor}
.hero-vtoggle .vt-play{display:none}
.hero-vtoggle[aria-pressed="false"] .vt-pause{display:none}
.hero-vtoggle[aria-pressed="false"] .vt-play{display:block}
.js .hero-vtoggle{opacity:0;transition:opacity 1s var(--e1),background .3s var(--e1),border-color .3s var(--e1),transform .3s var(--e1)}
.js .hero.is-loaded .hero-vtoggle{opacity:1;transition-delay:1.25s}

/* ---------- Booking ---------- */
.book{background:var(--ink);color:var(--paper);padding:0}
/* desktop: the sheet wrapper and close button are inert pass-throughs */
.book-sheet{display:contents}
.book-close{display:none}
.book-bar{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;align-items:stretch}
.bk-field{display:flex;flex-direction:column;gap:8px;padding:34px var(--pad);border-right:1px solid rgba(236,229,215,.14);cursor:pointer}
.bk-field:first-child{padding-left:var(--pad)}
.bk-field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);cursor:pointer}
.bk-field input,.bk-field select{background:transparent;border:none;color:var(--paper);font-family:var(--sans);font-size:1rem;padding:2px 0;width:100%;cursor:pointer}
.bk-field input:focus,.bk-field select:focus{outline:none}
.bk-field select option{color:#000}
.bk-field input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6}

/* ---- Rooms & Guests custom dropdown ---- */
.bk-field--rg{position:relative}
.rg-trigger{position:relative;display:block;width:100%;text-align:left;background:transparent;color:var(--paper);font-family:var(--sans);font-size:1rem;padding:2px 20px 2px 0;cursor:pointer}
.rg-trigger::after{content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ochre);border-bottom:1.5px solid var(--ochre);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--e1)}
.bk-field--rg.rg-open .rg-trigger::after{transform:translateY(-30%) rotate(-135deg)}
/* fixed + JS-anchored so it stays within the viewport on scroll, at every breakpoint;
   scrolls internally when taller than the available space */
.rg-panel{position:fixed;z-index:1200;width:min(360px,calc(100vw - 24px));max-height:80vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 24px 60px -16px rgba(20,15,11,.45);padding:22px 22px 18px;
  font-family:var(--sans);font-size:15px;line-height:1.5;text-align:left}
.rg-panel[hidden]{display:none}
.rg-title{font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--ink);margin-bottom:16px}
.rg-row--total{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid #ece8df}
.rg-row-label{font-size:.95rem;color:var(--ink-2)}
.rg-room{padding:14px 0;border-bottom:1px solid #ece8df}
.rg-room:last-child{border-bottom:none}
.rg-room-name{font-size:.9rem;color:var(--muted);background:#f4f1ea;margin:0 -22px 14px;padding:8px 22px}
.rg-guests{display:flex;gap:20px}
.rg-guest{flex:1;display:flex;flex-direction:column;gap:10px}
.rg-guest-label{font-size:.88rem;color:var(--ink-2)}
.rg-step{display:inline-flex;align-items:center;gap:6px}
.rg-btn{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:8px;
  background:#efece4;color:var(--ink);font-size:1.15rem;line-height:1;transition:background .2s,opacity .2s}
.rg-btn:hover{background:#e3ded2}
.rg-btn:disabled{opacity:.35;cursor:not-allowed}
.rg-num{min-width:22px;text-align:center;font-size:1rem;font-variant-numeric:tabular-nums}
.rg-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.rg-add{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:.92rem;font-weight:500}
.rg-add span{font-size:1.2rem;line-height:1;color:var(--brick)}
.rg-add:hover{color:var(--brick)}
.rg-add:disabled{opacity:.4;cursor:not-allowed}
.rg-done{border:1px solid var(--ink);border-radius:8px;padding:11px 26px;font-size:.85rem;font-weight:500;color:var(--ink);transition:.25s var(--e1)}
.rg-done:hover{background:var(--ink);color:var(--paper)}

.bk-action{display:flex;flex-direction:column}
.bk-submit{flex:1;background:var(--brick);color:var(--paper);font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;padding:0 40px;display:flex;align-items:center;justify-content:center;gap:.6em;transition:background .3s}
.bk-submit:hover{background:var(--brick-deep)}
.book-err{max-width:var(--wrap);margin:0 auto;padding:14px var(--pad);color:#F0B8A6;font-family:var(--mono);font-size:.74rem;background:var(--ink)}
/* manage-booking link sits directly beneath the Book Now button, within its column */
.book-manage{display:flex;align-items:center;justify-content:center;gap:.5em;background:var(--ink);color:rgba(236,229,215,.72);font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:11px 14px;border-top:1px solid rgba(236,229,215,.14);transition:gap .3s var(--e1),color .3s}
.book-manage:hover{gap:.9em;color:var(--paper)}

/* ---------- Section rhythm ---------- */
.welcome,.rooms,.exp,.facil,.offers,.loc,.voices,.meet,.gallery,.final{padding:var(--section) 0}
.wings{padding:var(--section) 0 0}

/* ---------- 01 Welcome ---------- */
/* Pendant lamp hanging into the Welcome section — the lamp that hangs in the
   window of the Nepali Ghar mark, redrawn as a hairline and dropped on a long
   cord from the section's top edge.
   It hangs in the gutter between the copy and the photograph. Anchored to the
   text column's right edge rather than to the viewport: a viewport-based offset
   tracked neither column and landed on the photo by 1280px.
   The gutter is 120px but only its first 90px are free — .fig-vlabel runs
   vertically up the last 30px — so the lamp is sized to that 90px band, not to
   the gutter. Below 1024px the grid stacks, the gutter goes and so does the lamp. */
/* These light-field sections sit on the plain --paper page background. They stay
   positioned (and isolated, so any negative-z child of theirs paints above that
   background rather than dropping into the root stacking context) because the
   pendant lamps and figure labels inside them are absolutely placed. */
.welcome,.garden,.offers,
.page-hero + .isec:not(.isec--dark):not(.isec--pine):not(.gallery):not(.dining):not(.outlet):not(.spa):not(.meet):not(.fitness):not(.final){position:relative;isolation:isolate}

/* The studio's own lamp artwork, carrying its gold line baked in — so this no
   longer tints with currentColor the way the traced hairline SVG did. It is held
   just off full strength so it still reads as a mark on the leaf rather than as
   content; the old .62 was tuned to soften a dark sepia line and leaves the gold
   too pale on cream.
   The lamps are injected by script.js from one definition — see PENDANTS there —
   rather than pasted into a dozen files. */
.pendant{position:absolute;width:var(--pd-w,60px);opacity:.85;
  pointer-events:none;z-index:0}
/* Sized on width alone: the art is 825x3009, so each --pd-w below hangs a cord
   about 3.6x its own width. The widths are unchanged from the traced lamp, which
   keeps every shade at the scale its gutter was tuned for. */
.pendant img{display:block;width:100%;height:auto}
/* Fallback cord, applied by script.js where the full drop no longer clears the
   content below it. The crop takes the top off — that end of the artwork is plain
   cord, so it simply reads as a shorter hang, and anchoring to the bottom keeps the
   shade itself whole.
   2.17, not the traced lamp's 2.33: that drawing carried ~7% empty box below its
   shade, where this artwork runs to its own bottom edge. Matching the box would hang
   the shade ~10px lower than before and drop it onto the kicker beneath it on
   /rooms/ — 2.17 lands the ink exactly where the old ink ended. */
.pendant--short img{height:calc(var(--pd-w,60px) * 2.17);object-fit:cover;object-position:bottom}
/* Each placement drops into a column that is empty for its section's full height,
   so none of them cost the layout anything. */
/* every host must be positioned — a lamp using left:calc(100% + …) against a static
   parent resolves off the full-width section instead of the column and overflows */
.welcome-text,.garden-fig,.offers-head,.rd-gallery{position:relative}
.welcome-text > .pendant{top:calc(var(--section) * -1);left:calc(100% + 15px)}
.garden-fig  > .pendant{top:calc(var(--section) * -1);left:calc(100% + 14px)}
.offers-head > .pendant{top:calc(var(--section) * -1);right:4px;--pd-w:66px}
/* room detail pages carry the same two-column shape — 80px gutter, lamp sized to it */
.rd-gallery  > .pendant{top:calc(var(--section) * -1);left:calc(100% + 12px);--pd-w:56px}
/* Inner pages: first light section under the hero. Its head is left-aligned and
   narrower than the wrap, so the lamp drops down the empty right edge of the column. */
.pendant--inner{top:0;right:calc(var(--gutter) + 6px);left:auto;--pd-w:64px}
.pendant--inner-l{top:0;left:calc(var(--gutter) + 6px);right:auto;--pd-w:64px}
.welcome-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:120px;align-items:center}
.welcome-text .display{margin-bottom:8px}
.quote{margin:34px 0 8px;padding-left:26px;border-left:2px solid var(--brick)}
.quote p{font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.45;color:var(--ink)}
.quote cite{display:block;font-family:var(--mono);font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brick);margin-top:18px}
.welcome-fig{position:relative}
.welcome-fig .media{aspect-ratio:4/5}
.welcome-fig figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted);margin-top:16px;text-transform:uppercase}
.welcome-fig figcaption .mono{color:var(--brick)}
.fig-vlabel{position:absolute;top:0;left:-30px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ---------- 02 Wings ---------- */
.wings-head{text-align:center;max-width:880px;margin:0 auto var(--head-gap)}
.wings-head .kicker{justify-content:center;width:fit-content;margin-inline:auto}
.wings-note{margin:24px auto 0;color:var(--muted)}
.diptych{display:grid;grid-template-columns:1fr 1fr}
.dip{position:relative;min-height:78vh;display:flex;align-items:flex-end;color:var(--paper);overflow:hidden}
.dip .media{position:absolute;inset:0}
/* deepened over the lower half so the label stays legible on the bright Seto Ghar facades */
.dip .media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,15,11,.05) 0%,rgba(20,15,11,.3) 35%,rgba(20,15,11,.72) 65%,rgba(20,15,11,.9) 100%)}
.dip:first-child{border-right:1px solid var(--ochre)}
.dip-body{position:relative;z-index:2;padding:72px}
.dip-label{margin-bottom:14px}
.dip-label .mono{color:var(--ochre)}
.dip-name{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:-.01em}
.dip-body p{color:rgba(236,229,215,.85);max-width:38ch;margin:14px 0 0}

/* ---------- 03 Rooms ---------- */
/* card image height — drives the vertical centring of the overlay arrows.
   Landscape 3:2 cards, so --media-h is 2/3 of the card width (was 4/3 when portrait).
   --rc-inset pins the arrows to the outer edges of the full-bleed track, one page
   margin in from each side of the viewport. The track runs edge to edge, so the
   arrows belong at its ends — parked at the content gutter instead they landed a
   card and a half inboard, sitting over the middle of the lane.
   The right inset is the larger of the two: the fixed contact rail owns the right
   64px of the viewport (16px offset + 48px buttons) and paints above the track at
   z-index 1150, so the next arrow is held clear of that envelope. */
.rooms{--card-w:min(520px,86vw);--media-h:calc(var(--card-w) * 2 / 3);
  --rc-size:54px;--rc-inset:var(--pad);--rc-inset-r:max(var(--pad),76px)}
.rooms-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:var(--head-gap);flex-wrap:wrap}
.rooms-aside{max-width:340px}
.rooms-aside p{color:var(--muted);font-size:.96rem}
/* arrows overlaid just inside the card images, vertically centred on the photo */
.rooms-scroller{position:relative}
.rc-btn{position:absolute;top:calc(var(--media-h) / 2);transform:translateY(-50%);z-index:5;
  width:var(--rc-size);height:var(--rc-size);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);background:rgba(236,229,215,.92);color:var(--ink);
  font-size:1.2rem;line-height:1;cursor:pointer;box-shadow:0 2px 14px rgba(27,23,20,.18);
  transition:background .3s,color .3s,opacity .3s}
.rc-btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.rc-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.rc-prev{left:var(--rc-inset)}
.rc-next{right:var(--rc-inset-r)}
/* Near edge to edge: the lane is held one card-gap (40px) off each screen edge, so the
   part-cut card at either end breathes instead of being jammed against the glass with
   its caption clipped. This is a MARGIN, not padding — padding belongs to the scrolled
   content and slides away the moment the lane moves, whereas the margin insets the
   scroll viewport itself, so the 40px strip survives at every scroll position.
   Snapping is off on purpose. script.js opens the track half a card in, so the left
   edge cuts through a card and the row reads as a strip that continues past the
   screen. Every snap position is a card's leading edge, and mandatory snapping is
   applied to programmatic scrolls too — it would drag that opening offset straight
   back to 0. The arrows still move by exactly one card + gap, so the row stays
   ordered without it; only drag is free-form now. */
.room-track{display:flex;gap:40px;overflow-x:auto;margin:0 40px;padding:0 0 10px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.room-track:active{cursor:grabbing}
.room-track::-webkit-scrollbar{display:none}
.rcard{flex:0 0 var(--card-w)}
/* landscape 3:2 window; the photo is centre-cropped to fill it whatever its native ratio */
.rcard-media{position:relative;aspect-ratio:3/2;overflow:hidden}
.rcard-media img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:transform .9s var(--e1)}
.rcard:hover .rcard-media img{transform:scale(1.05)}
/* scroll-reveal brick wipe — same effect as the editorial imagery elsewhere */
.reveal-img .rcard-media::after{content:"";position:absolute;inset:0;background:var(--brick);transform:scaleX(0);transform-origin:right;transition:transform 1.1s var(--e2)}
.js .reveal-img:not(.in) .rcard-media::after{transform:scaleX(1);transform-origin:left}
.js .reveal-img:not(.in) .rcard-media img{transform:scale(1.14)}
/* text-shadow instead of mix-blend-mode: blend modes composite against the backdrop and
   repaint on every frame while the room track scrolls; a shadow keeps the same legibility. */
.rcard-no{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:.8rem;color:var(--paper);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.rcard-body{padding:28px 0 0}
.rcard-tag{margin-bottom:8px}
.rcard-tag .mono{color:var(--brick)}
.rcard-body h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.05;letter-spacing:-.01em}
.rcard-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:8px 0 0}

/* ---------- 04 Dining ---------- */
.dining{--dgut:clamp(18px,2.4vw,40px);position:relative;background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.dining-img{min-height:480px;height:100%}
/* photo is matted inside the ink ground: keeps the stacked dining blocks from butting edge-to-edge */
.dining-img .media{position:absolute;top:var(--dgut);bottom:var(--dgut);left:var(--dgut);width:calc(50% - var(--dgut) * 1.5);height:auto}
/* compact vertical rhythm so each dining/bar panel fits one screen on standard displays */
.dining-panel{padding:clamp(32px,5vh,72px) var(--pad) clamp(32px,5vh,72px) 90px;display:flex;flex-direction:column;justify-content:center}
.dining-panel .display{color:var(--paper);margin-bottom:12px}
.dining-panel .display em{color:var(--ochre)}
.dining-logo{display:block;width:clamp(104px,12vh,148px);height:auto;margin:0 0 14px;border-radius:14px}
.fitness-logo{display:block;width:150px;height:auto;margin:2px 0 20px}
.dining-hours{color:var(--ochre);margin-bottom:13px;letter-spacing:.06em}
.dining-panel p{color:rgba(236,229,215,.82);line-height:1.5}
.dining-dishes{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}
.dining-dishes li{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(236,229,215,.3);padding:7px 12px;color:rgba(236,229,215,.9)}
.dining--bar{grid-template-columns:1fr 1fr;border-top:1px solid rgba(236,229,215,.12)}
.dining--bar .dining-panel{order:1;padding:clamp(32px,5vh,72px) 90px clamp(32px,5vh,72px) var(--pad)}
.dining--bar .dining-img{order:2}
.dining--bar .dining-img .media{left:auto;right:var(--dgut)}
/* short desktop/laptop viewports: compress harder so the side-by-side panel still fits one screen */
@media (min-width:1025px) and (max-height:800px){
  .dining-panel,.dining--bar .dining-panel{padding-top:clamp(24px,3.4vh,44px);padding-bottom:clamp(24px,3.4vh,44px)}
  .dining-panel .display{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:9px}
  .dining-logo{width:clamp(88px,10.5vh,120px);margin-bottom:11px}
  .dining-hours{margin-bottom:10px}
  .dining-panel p{line-height:1.45}
  .dining-dishes{margin:11px 0}
}

/* ---------- 05 Experiences ---------- */
.exp-feature{display:grid;grid-template-columns:1.05fr .95fr;gap:120px;align-items:center;margin-bottom:120px}
/* text left, image carousel right (natural DOM order); mobile still stacks image-first below */
.exp-time{color:var(--brick);margin-top:24px;letter-spacing:.08em}
.exp-fig .media{aspect-ratio:4/5}
.exp-fig figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.exp-fig figcaption .mono{color:var(--brick)}
.exp-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.exp-list li{padding:56px 44px 56px 0;border-bottom:1px solid var(--line);position:relative;
  display:flex;flex-direction:column}
.exp-no{display:block;color:var(--brick);margin-bottom:18px;font-size:.8rem}
.exp-list h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;margin-bottom:10px}
.exp-list p{color:var(--muted);font-size:.94rem}
/* Photography hangs off the BOTTOM of each excursion card rather than the top.
   The A/B/C headings then stay on one line across the row no matter which
   excursions have a photo and which are still copy-only, and margin-top:auto
   bottom-aligns the frames themselves once more than one does. */
.exp-media{margin-top:auto;padding-top:30px}
.exp-media .media{aspect-ratio:3/2}

/* ---------- Read More (dining + wellness) ---------- */
.readmore{margin-top:4px}
.readmore-body[hidden]{display:none}
.readmore-body>p{margin-top:18px}
.readmore-body>p:first-child{margin-top:20px}
.readmore-toggle{
  display:inline-flex;align-items:center;gap:.55em;margin-top:20px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding-bottom:4px;border-bottom:1px solid var(--ink);transition:gap .3s var(--e1),color .3s,border-color .3s;
}
.readmore-toggle:hover{gap:.9em;color:var(--brick);border-color:var(--brick)}
.readmore-ic{font-family:var(--mono);font-size:.95rem;line-height:1}
/* on the dark dining/bar panels the toggle + revealed copy read light */
.dining-panel .readmore-toggle{color:var(--paper);border-color:rgba(236,229,215,.5);margin-top:12px}
.dining-panel .readmore-toggle:hover{color:#fff;border-color:#fff}
.dining-panel .readmore-body>p{color:rgba(236,229,215,.82)}

/* wellness — the three Himalayan Buddhist Meditation Center activities */
.exp-acts{margin-top:32px;border-top:1px solid var(--line)}
.exp-act{padding:24px 0;border-bottom:1px solid var(--line)}
.exp-act-name{font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.1;color:var(--ink)}
.exp-act-time{color:var(--brick);margin-top:8px;letter-spacing:.08em}
.exp-act .readmore-body>p{color:var(--muted);font-size:.96rem;max-width:54ch}
.exp-act-fig{margin:22px 0 4px;max-width:420px}
.exp-act-fig img{width:100%;height:auto;display:block;border-radius:10px}

/* ---------- 05b Spa (opening soon) ---------- */
.spa{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding:calc(var(--section) * 1.35) 0;border-top:1px solid rgba(236,229,215,.12)}
.spa-inner{position:relative;z-index:1;max-width:760px;margin-inline:auto;text-align:center}
.spa .kicker--light{justify-content:center;width:fit-content;margin-inline:auto;margin-bottom:18px}
.spa-soon{background:var(--brick);color:var(--paper);padding:5px 12px;letter-spacing:.14em;font-size:.62rem}
.spa .display{color:var(--paper);margin-bottom:24px}
.spa .display em{color:var(--ochre)}
/* the global p{max-width:62ch} caps this measure below the 760px column, so without
   auto margins the text block sits flush left and reads ~15px off-centre against the
   heading and the figure below it */
.spa-lede{color:rgba(236,229,215,.82);font-size:1.05rem;line-height:1.75;margin-inline:auto}
.spa .readmore{margin-top:6px;display:flex;flex-direction:column;align-items:center}
.spa .readmore-body>p{color:rgba(236,229,215,.82);text-align:left}
.spa .readmore-toggle{color:var(--paper);border-color:rgba(236,229,215,.5)}
.spa .readmore-toggle:hover{color:#fff;border-color:#fff}
/* the spa figure lives in its own .wrap below .spa-inner — it carries the gap itself.
   The spa photo is a close-up object study (the lit Sukunda lamp), not a room shot.
   At full .wrap width it rendered ~1170px across and read as a blown-up macro, so the
   plate is capped to the 760px text column above it — same measure as .spa-inner, which
   makes the tight crop look deliberate rather than over-zoomed. */
.spa-fig{position:relative;z-index:1;margin-top:clamp(36px,4.4vw,64px);max-width:760px;margin-inline:auto}
.spa-fig .media{aspect-ratio:3/2}
.spa-fig figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(236,229,215,.6);margin-top:16px;text-align:center}

/* Split variant (home): copy in the left column, the Sukunda plate in the right,
   instead of the photo running full-bleed behind centred text. Same column ratio
   and gutter as .welcome-grid so the two paired sections scan as one system.
   The stacked variant above still serves the facilities and experiences pages. */
.spa-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:120px;align-items:center}
.spa--split .spa-inner{max-width:none;margin-inline:0;text-align:left}
.spa--split .kicker--light{justify-content:flex-start;margin-inline:0}
.spa--split .spa-lede{margin-inline:0}
.spa--split .readmore{align-items:flex-start}
/* the plate is a column-mate now, not a band under the text — it carries no top gap,
   fills its column, and takes the portrait crop that pairs with a column of copy */
.spa--split .spa-fig{margin:0;max-width:none}
.spa--split .spa-fig .media{aspect-ratio:4/5}
.spa--split .spa-fig figcaption{text-align:left}

/* ---------- 06 Facilities ---------- */
.facil{background:var(--paper-2)}
.facil-head{margin-bottom:var(--head-gap)}
.facil-list{display:grid;grid-template-columns:1fr 1fr;gap:0 120px}
.frow{display:flex;align-items:center;gap:18px;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .35s var(--e1)}
.frow:hover{padding-left:14px}
.ficon{flex:0 0 auto;width:30px;height:30px;color:var(--brick);transition:transform .35s var(--e1)}
.ficon svg{width:100%;height:100%;display:block}
.frow:hover .ficon{transform:scale(1.08)}
.fname{font-family:var(--serif);font-size:1.35rem;font-weight:400}
.fnote{margin-left:auto;color:var(--muted);white-space:nowrap}
/* .fnote is nowrap and flex items floor at min-content, so on the narrowest phones
   the name + note pair could not shrink to fit and pushed the facilities page 18px
   wider than the viewport. Below 380px the note drops to its own line instead. */
@media(max-width:380px){
  .frow{flex-wrap:wrap}
  .fname{min-width:0}
  .frow .fnote{margin-left:48px;white-space:normal}
}

/* ---------- 07 Meetings ---------- */
.meet{position:relative;color:var(--paper);overflow:hidden}
.meet-bg{position:absolute;inset:0;z-index:-1}
.meet-bg img{width:100%;height:100%;object-fit:cover}
.meet-veil{position:absolute;inset:0;background:linear-gradient(110deg,rgba(20,15,11,.92),rgba(35,53,34,.7))}
.meet-inner{max-width:760px}
.meet-logo{display:block;width:auto;height:128px;margin:6px 0 22px}
.meet-lede{color:rgba(236,229,215,.85);margin:22px 0 44px;font-size:1.1rem}
.meet-stats{display:flex;gap:84px;flex-wrap:wrap;margin-bottom:56px}
.mstat{display:flex;flex-direction:column}
.mnum{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,5vw,4.4rem);line-height:1;color:var(--ochre)}
.mnum i{font-style:normal;font-size:.6em}
.mlab{color:rgba(236,229,215,.8);margin-top:10px;letter-spacing:.06em}
/* --- Meetings: split panel layout (content half + photo half) --- */
/* Content-sized like the dining panels so the section reads at the same scale
   as Chiya Pasal, with a full-size section heading matching the other sections. */
.meet--split{padding:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;background:var(--paper)}
.meet-panel{display:flex;align-items:center;padding:clamp(32px,5vh,72px) 72px}
.meet--split .meet-inner{max-width:600px;width:100%}
/* The ruled stats band and the tall logo are what carried this panel above the dining
   blocks it sits beside — the dishes row in a dining panel costs far less height than
   three bordered figures. Both are trimmed here so the section matches at any viewport,
   not only on the short screens the media query below covers. */
.meet--split .meet-logo{height:clamp(76px,10vh,102px);margin:0 0 12px}
.meet--split .display{font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1.04;margin-bottom:14px}
.meet--split .meet-lede{margin:13px 0 6px;font-size:1.05rem;line-height:1.55}
.meet--split .meet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;flex-wrap:nowrap;
  margin:16px 0 20px;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.meet--split .mstat{padding:12px 18px 12px 0}
.meet--split .mstat + .mstat{border-left:1px solid var(--line-light);padding-left:24px}
.meet--split .mnum{font-size:clamp(2rem,2.5vw,2.8rem)}
.meet--split .mlab{font-size:.66rem}
.meet-media{position:relative;min-height:480px;overflow:hidden}
.meet-media .media{position:absolute;inset:0}
/* The Baithak badge is printed into the top-right of the photograph, and the panel is
   wider than the picture is tall — so object-fit:cover crops the height, and centring
   that crop cut the badge in half. Held near the top instead, which keeps the badge
   whole and loses only the front row of chair backs. */
.meet-media img{object-position:50% 6%}
.meet-media img{width:100%;height:100%;object-fit:cover}

/* ---------- 08 Offers ---------- */
.offers-head{margin-bottom:var(--head-gap)}
.offer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.ocard{display:flex;flex-direction:column}
.ocard-media{aspect-ratio:4/5}
/* Stand-in for an offer with no photograph. A tint of the page's own paper rather
   than the brand green — the green read as a colour block dropped between the
   photographed cards. The glyph carries the card instead, so it takes a deep brick
   that holds ~5:1 on the lower tint. */
.ocard-media--noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--paper-2),var(--paper-3))}
.ocard-glyph{width:76px;height:76px;color:var(--brick-deep)}
.otag{position:absolute;top:16px;left:16px;z-index:2;background:var(--brick);color:var(--paper);padding:8px 14px;letter-spacing:.1em}
.ocard-body{padding:26px 0 0;display:flex;flex-direction:column;align-items:flex-start}
.ocard h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.05;margin-bottom:10px}
.ocard-body p{color:var(--muted)}

/* ---------- 08b Why Book Direct ----------
   The direct-booking value proposition. Deliberately a different composition from
   .trustband (which is a flat 4-up badge row): a sticky heading column on the left,
   a numbered editorial list on the right. Handles an odd item count (5) without the
   ragged last row a fixed grid would give. Shared by the homepage and /offers. */
.wbd{background:var(--paper-3);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:var(--section) 0}
.wbd-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:80px;align-items:start}

.wbd-head{position:sticky;top:120px}
.wbd-note{color:var(--ink-2);margin-top:26px;max-width:38ch}
.wbd-act{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.wbd-list{display:flex;flex-direction:column}
.wbd-item{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
  padding:26px 0;border-top:1px solid var(--line-soft)}
.wbd-item:first-child{border-top:none;padding-top:0}
.wbd-item:last-child{padding-bottom:0}
.wbd-num{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ochre);
  padding-top:.5em;font-weight:700}
.wbd-ic{width:30px;height:30px;flex:0 0 auto;color:var(--brick);transition:transform .35s var(--e1)}
.wbd-ic svg{width:100%;height:100%;display:block}
.wbd-item:hover .wbd-ic{transform:translateY(-2px)}
.wbd-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.7vw,1.5rem);
  line-height:1.15;margin-bottom:7px}
.wbd-body p{color:var(--muted);font-size:16.5px;line-height:1.62;max-width:52ch}
/* icon sits in the same optical column as the numeral, above the copy on narrow screens */
.wbd-mark{display:flex;align-items:center;gap:16px}

@media(max-width:1024px){
  .wbd-grid{grid-template-columns:1fr;gap:52px}
  .wbd-head{position:static}
  .wbd-note{max-width:60ch}
}
@media(max-width:520px){
  .wbd{padding:calc(var(--section) * .72) 0}
  .wbd-item{grid-template-columns:1fr;gap:12px;padding:22px 0}
  .wbd-mark{gap:13px}
  .wbd-act .btn{width:100%;text-align:center}
}

/* ---------- 09 Gallery — uniform portrait grid ----------
   Three 5:4 plates per row, every frame the same size. This replaced a
   tall/wide mosaic: there, a tile's cell size was assigned by a rhythm pattern rather
   than by the photo, so a wide room shot dropped into a tall cell lost both its sides
   to object-fit:cover. One shape for every plate means one predictable crop, and the
   eye reads down a steady column instead of around a ragged one.
   Hover (or keyboard focus) zooms the frame and fades in its plate number + caption.
   Tapping opens the lightbox. */
.gallery{background:var(--ink);padding:116px 0 100px}
.gallery-head{margin-bottom:30px}
.gallery-hint{color:var(--ochre);opacity:.8;margin-top:18px}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;padding:0 var(--gutter);margin-bottom:44px}
/* the frame owns the shape — aspect-ratio, not a row span, so every plate matches */
.gitem{position:relative;overflow:hidden;background:#000;border-radius:2px;display:block;aspect-ratio:5/4}
.gitem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e1)}
/* foot scrim, deepened on hover so the caption stays legible on any frame */
.gitem::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(15,11,8,.7) 0%,rgba(15,11,8,0) 55%);opacity:.6;transition:opacity .4s var(--e1)}
/* archive plate number — top-left, fades in on hover/focus */
.gitem-no{position:absolute;top:12px;left:13px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:rgba(236,229,215,.92);
  text-shadow:0 1px 6px rgba(15,11,8,.7);opacity:0;transform:translateY(-5px);transition:opacity .4s var(--e1),transform .4s var(--e1)}
/* caption — bottom-left */
.gitem-cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;pointer-events:none;
  opacity:0;transform:translateY(10px);transition:opacity .45s var(--e1),transform .45s var(--e1)}
.gitem-cap-k{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);margin-bottom:4px}
.gitem-cap-t{font-family:var(--serif);font-size:1.05rem;line-height:1.1;color:var(--paper);text-shadow:0 1px 8px rgba(15,11,8,.6)}

.gitem:hover img,.gitem:focus-visible img{transform:scale(1.07)}
.gitem:hover::after,.gitem:focus-visible::after{opacity:1}
.gitem:hover .gitem-no,.gitem:focus-visible .gitem-no,
.gitem:hover .gitem-cap,.gitem:focus-visible .gitem-cap{opacity:1;transform:none}
.gitem:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ochre)}
.gitem[hidden]{display:none}

/* ---------- Gallery category filter ----------
   Chips filter the single mosaic in place. The tile rhythm (wide/tall) is
   re-applied per visible set in the page script, so each chapter packs cleanly
   instead of inheriting the "All" layout's holes. */
.gfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px}
html:not(.js) .gfilter{display:none}   /* without the script the chips would be dead controls */
.gchip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(236,229,215,.78);background:transparent;border:1px solid rgba(236,229,215,.26);
  padding:10px 16px;border-radius:2px;
  transition:color .3s var(--e1),border-color .3s var(--e1),background-color .3s var(--e1)}
.gchip:hover{color:var(--paper);border-color:rgba(236,229,215,.6)}
.gchip-n{font-size:.58rem;color:var(--ochre);opacity:.85}
.gchip.is-on{color:var(--ink);background:var(--ochre);border-color:var(--ochre)}
.gchip.is-on .gchip-n{color:rgba(27,23,20,.6);opacity:1}
.gchip:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
.gallery-empty{text-align:center;color:rgba(236,229,215,.6);padding:36px 0}

/* ---------- 10 Location ---------- */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:center}
.leaders{margin:30px 0 36px}
.leaders li{display:flex;align-items:baseline;gap:10px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.leaders li>span:first-child{font-family:var(--serif);font-size:1.2rem}
.leaders .ld{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.leaders .mono{color:var(--brick);white-space:nowrap}
.loc-map{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line)}
.loc-map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}

/* ---------- Voices ---------- */
.voices{background:var(--paper-2)}
.voices .kicker{justify-content:center;margin-bottom:46px;width:fit-content;margin-inline:auto}
.vtrack{max-width:820px;margin:0 auto;position:relative;min-height:240px}
.vquote{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transition:opacity .7s var(--e1)}
.vquote.is-active{position:relative;opacity:1;visibility:visible}
.vquote blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.35;letter-spacing:-.01em;max-width:24ch;margin-bottom:28px}
.vquote blockquote::before{content:"“";color:var(--brick);font-size:2em;display:block;line-height:.4;margin-bottom:.2em}
.vquote figcaption{color:var(--muted)}
.vdots{display:flex;gap:10px;justify-content:center;margin-top:36px}
.vdots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.3s}
.vdots button.active{background:var(--brick);transform:scale(1.3)}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:116px;padding-top:64px;border-top:1px solid var(--line)}
.titem{text-align:center;display:flex;flex-direction:column;gap:8px}
.titem strong{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--brick)}
.titem .mono{color:var(--muted)}

/* ---------- Final CTA ---------- */
.final{position:relative;color:var(--paper);text-align:center;overflow:hidden}
.final-bg{position:absolute;inset:0;z-index:-1}
.final-bg img{width:100%;height:100%;object-fit:cover}
.final-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,11,.72),rgba(20,15,11,.86))}
.final-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.final .kicker{justify-content:center;width:fit-content;margin-inline:auto;text-indent:.16em}
.final-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1;letter-spacing:-.02em;margin-bottom:22px}
.final-title em{font-style:italic;color:var(--ochre)}
.final-sub{color:rgba(236,229,215,.85);max-width:46ch;margin:0 auto 38px}
.final-act{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:rgba(236,229,215,.78);padding:120px 0 0;position:relative}
/* Anthemion band across the footer's top edge — the Rana-era palmette stencil
   that runs the Seto Ghar lobby walls. The artwork is an 8887x303 strip whose
   ends meet cleanly, so repeat-x tiles it without a seam. One ornamental moment,
   site-wide, where the page hands over to the dark footer. Decorative only, so
   it is a background rather than an element in the DOM. */
/* The box is 36px but the tile is drawn at 30px, anchored to the top. The
   artwork is cropped tight to its own bounding box, so the scroll spirals sit
   tangent to its bottom edge — in an exact-fit box the tile's scaled height
   rounds past the box and shaves a wide flat slice off every curl. The 6px of
   slack below absorbs that rounding; the band's top edge is unchanged. */
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:36px;
  background:url("https://assets.simplotel.com/simplotel/image/upload/c_limit,w_1800,q_auto,f_auto/nepali-ghar-hotel/Stencil_Pattern_466ceef7.png") repeat-x center top/auto 30px;opacity:.72}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:50px;border-bottom:1px solid rgba(236,229,215,.14);flex-wrap:wrap}
/* split like the header wordmark: emblem keeps its original colours, only the text
   beneath it is knocked out to white so it reads on the dark footer */
.foot-mark{position:relative;display:inline-block;width:76px;height:108px}
.foot-logo{position:absolute;top:0;left:0;height:108px;width:auto}
.foot-logo-emblem{clip-path:inset(0 0 27% 0)}
.foot-logo-text{clip-path:inset(73% 0 0 0);filter:brightness(0) invert(1)}
.foot-tag{color:var(--ochre)}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:48px;padding:80px var(--pad)}
.foot-col h4{color:var(--ochre);margin-bottom:20px;font-weight:400}
.foot-col ul{display:flex;flex-direction:column;gap:12px}
.foot-col a{font-size:.92rem;transition:color .3s,padding-left .3s}
.foot-col a:hover{color:var(--paper);padding-left:5px}
.foot-social a{display:inline-flex;align-items:center;gap:11px}
.soc-ic{flex:0 0 auto;width:17px;height:17px;color:var(--ochre);transition:color .3s,transform .3s}
.foot-social a:hover .soc-ic{color:var(--paper);transform:translateY(-1px)}
.foot-contact address{font-style:normal;font-size:.92rem;line-height:1.55;display:flex;flex-direction:column;gap:16px}
.foot-contact a:hover{color:var(--ochre)}
.fc-row{display:flex;align-items:flex-start;gap:12px}
.fc-ic{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--ochre)}
.fc-row a:hover{padding-left:0}            /* keep label aligned with its icon on hover */
.fc-row .mono{color:rgba(236,229,215,.55)}
.foot-bottom{border-top:1px solid rgba(236,229,215,.14);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.foot-bottom .mono{font-size:.68rem;color:rgba(236,229,215,.55)}
.foot-sitemap{transition:color .3s var(--e1)}
.foot-sitemap:hover{color:var(--paper)}
.powered a{color:var(--ochre)}
.powered a:hover{color:var(--paper)}

/* ---------- Floating ---------- */
/* hidden until the page is scrolled; outlined by default, fills with brick on hover */
/* translucent paper fill instead of backdrop-filter:blur(): a fixed, blurring element must
   recompute the blur of everything behind it on every scroll frame — a major jank source.
   A solid-ish background gives the same airy look with zero per-frame cost. */
.totop{position:fixed;right:24px;bottom:24px;z-index:1100;width:48px;height:48px;border-radius:50%;background:rgba(236,229,215,.88);color:var(--brick);border:1px solid var(--brick);display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow:0 6px 20px rgba(20,15,11,.2);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s var(--e1),visibility .35s var(--e1),background .3s var(--e1),color .3s var(--e1),border-color .3s var(--e1),transform .35s var(--e1),box-shadow .3s var(--e1)}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--brick);color:var(--paper);border-color:var(--brick);transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,15,11,.45)}
.mbook{display:none}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(15,11,8,.96);display:none;align-items:center;justify-content:center;padding:40px}
.lb.open{display:flex}
.lb img{max-width:90vw;max-height:86vh;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-x{position:absolute;top:22px;right:28px;color:var(--paper);font-size:2.2rem;width:48px;height:48px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--paper);font-size:2.8rem;width:60px;height:60px;opacity:.7;transition:.3s}
.lb-nav:hover{opacity:1}
.lb-prev{left:14px}.lb-next{right:14px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1024px){
  :root{--pad:34px;--section:88px;--head-gap:52px}
  .welcome-grid,.exp-feature,.loc-grid,.spa-grid{grid-template-columns:1fr;gap:48px}
  /* single column from here — no gutter left for the lamp to hang in */
  .pendant{display:none}
  .exp-fig{order:-1}
  .dining,.dining--bar{grid-template-columns:1fr}
  .dining-img{min-height:clamp(220px,32svh,340px);position:relative}
  .dining-img .media,.dining--bar .dining-img .media{position:absolute;left:var(--dgut);right:var(--dgut);width:auto}
  .dining-panel,.dining--bar .dining-panel{padding:clamp(28px,4vh,54px) var(--pad)}
  .dining--bar .dining-img{order:-1}
  .dining--bar .dining-panel{order:0}
  /* meetings split → stack, photo on top (matches the dining stack) */
  .meet--split{grid-template-columns:1fr}
  .meet-panel{padding:clamp(28px,4vh,54px) var(--pad)}
  .meet--split .meet-inner{max-width:760px}
  .meet-media{min-height:clamp(220px,32svh,340px);order:-1}
  /* booking form → popup sheet: hidden inline, opened from the floating Reserve button
     (and any other Book/Reserve CTA) via JS, which toggles .is-open */
  .book{position:fixed;inset:0;z-index:1300;display:none;padding:0;
    background:rgba(15,11,8,.62);flex-direction:column;justify-content:flex-end}
  .book.is-open{display:flex}
  .book-sheet{display:block;position:relative;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--ink);border-radius:16px 16px 0 0;padding-top:44px;box-shadow:0 -22px 50px -20px rgba(0,0,0,.7)}
  .book.is-open .book-sheet{animation:bookSheetUp .45s var(--e2)}
  .book-sheet::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:rgba(236,229,215,.3)}
  .book-close{display:flex;align-items:center;justify-content:center;position:absolute;top:6px;right:10px;z-index:3;
    width:46px;height:38px;font-size:1.9rem;line-height:1;color:var(--paper)}
  .book-bar{grid-template-columns:1fr 1fr}
  .bk-field:nth-child(2){border-right:none}
  .bk-action{grid-column:span 2}
  .bk-submit{padding:22px}
  .facil-list{grid-template-columns:1fr;gap:0}
  .loc-map{aspect-ratio:4/3}

  /* nav → drawer (moved up from 860px: the full horizontal header
     overflows between ~861px and ~1100px with 7 links + tel + Reserve) */
  .burger{display:flex}
  .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,380px);background:var(--paper);z-index:1200;
    transform:translateX(100%);transition:transform .5s var(--e2);padding:100px 36px 40px;box-shadow:-30px 0 60px -40px rgba(0,0,0,.5);overflow-y:auto}
  .nav.open{transform:none}
  .nav ul{flex-direction:column;gap:0}
  .nav a{color:var(--ink)!important;font-size:.92rem;padding:18px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav-x{display:block;position:absolute;top:30px;right:32px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
  /* in the drawer there is no crowding to solve, so the toggle folds away and
     News + Gallery sit in the list like every other link */
  .nav-more{display:block;position:static}
  .nav-more-t{display:none}
  .nav-drop{position:static;min-width:0;padding:0;background:none;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none}
  .nav .nav-drop a{padding:18px 0;color:var(--ink);background:none}
  .nav .nav-drop a:hover{background:none;color:var(--ink)}
  body.nav-open{overflow:hidden}
  .hdr-tel,.reserve{display:none}
  /* mobile reserve bar (CTA returns here since the header Reserve is hidden) */
  .mbook{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--brick);color:var(--paper);
    align-items:center;justify-content:center;font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;padding:17px}
  .totop{bottom:72px}
  /* centre the footer bottom bar and give it clearance so the floating back-to-top
     button (fixed bottom-right) never lands on top of the powered-by / sitemap row */
  .foot-bottom{justify-content:center;text-align:center;padding-bottom:92px}
  body{padding-bottom:54px} /* clear fixed Reserve bar so footer stays visible */
}
@keyframes bookSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media(max-width:860px){
  :root{--section:72px;--head-gap:44px}
  .diptych{grid-template-columns:1fr}
  .dip{min-height:62vh}
  .dip-body{padding:48px}
  .dip:first-child{border-right:none;border-bottom:1px solid var(--ochre)}
  .exp-feature{margin-bottom:56px}
  .exp-list{grid-template-columns:1fr}
  .exp-list li{padding:30px 0}
  /* offers → horizontal swipe slider on touch */
  .offer-cards{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:18px;scroll-padding-left:var(--pad);padding-bottom:10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .offer-cards::-webkit-scrollbar{display:none}
  .ocard{flex:0 0 82%;scroll-snap-align:start}
  /* category chips → one swipeable line; wrapping put 5 stacked rows above the mosaic */
  .gfilter{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scroll-snap-type:x proximity;scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:6px;margin-bottom:22px}
  .gfilter::-webkit-scrollbar{display:none}
  .gchip{flex:0 0 auto;scroll-snap-align:start}
  /* gallery grid → horizontal swipe slider on touch; three portrait plates across
     would be thumbnail-sized here. The 5:4 frame carries over, so the crop a phone
     viewer sees is the same one the desktop grid shows. */
  .gallery-grid{display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:12px;padding:0 var(--pad) 10px;scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gallery-grid::-webkit-scrollbar{display:none}
  .gitem{flex:0 0 72%;scroll-snap-align:start}
  .gitem-no,.gitem-cap{opacity:1;transform:none}
  .gitem::after{opacity:1}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .trust{grid-template-columns:1fr 1fr;gap:30px}
  .meet-stats{gap:36px}
  .hero-side{display:none}
  .fig-vlabel{display:none}
}

/* short / landscape phones — don't force a 640px-tall hero on a 400px-tall screen */
@media(max-height:600px) and (orientation:landscape){
  .hero{min-height:520px}
}

@media(max-width:520px){
  :root{--pad:20px;--section:60px;--head-gap:36px}
  /* roomier left inset so the first card's image + text aren't flush to the screen edge */
  .room-track{padding-left:28px;scroll-padding-left:28px}
  /* "Your dream venue" split on phones — matches the dining phone treatment */
  .meet-media{min-height:clamp(150px,21svh,230px)}
  .meet-panel{padding:clamp(20px,3vh,38px) var(--pad)}
  .meet--split .meet-logo{height:clamp(66px,16vw,92px);margin-bottom:10px}
  .meet--split .display{font-size:clamp(1.85rem,8.2vw,2.5rem);margin-bottom:8px}
  .meet--split .meet-lede{font-size:15px;line-height:1.5;margin:12px 0 6px}
  .meet--split .meet-stats{margin:14px 0 16px}
  .meet--split .mstat{padding:12px 8px 12px 0}
  .meet--split .mnum{font-size:clamp(1.7rem,7vw,2.3rem)}
  .book-bar{grid-template-columns:1fr}
  .bk-field{border-right:none;border-bottom:1px solid rgba(236,229,215,.14)}
  .bk-action{grid-column:span 1}
  .gitem-cap-t{font-size:1.05rem}
  .foot-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr;gap:22px}
  .dip-body{padding:36px 26px}
  .hero-foot{gap:24px}
  .hero-cta{width:100%;justify-content:center}
  .hero-meta{gap:14px 28px;margin-top:32px;padding-top:20px}
  .hm-v{font-size:1rem}
  .final-act{flex-direction:column}
  .final-act .btn{width:100%}
  .meet-stats{gap:28px}
  /* dining/bar: keep each panel within one phone screen */
  .dining-img{min-height:clamp(150px,21svh,230px)}
  .dining-panel,.dining--bar .dining-panel{padding:clamp(20px,3vh,38px) var(--pad)}
  .dining-panel p{font-size:15px;line-height:1.5}
  .dining-logo{width:92px;margin-bottom:10px}
  .dining-panel .display{font-size:clamp(1.85rem,8.2vw,2.5rem);margin-bottom:8px}
  .dining-hours{font-size:.82rem;margin-bottom:9px}
  .dining-dishes{margin:11px 0;gap:6px}
  .dining-dishes li{font-size:.62rem;padding:6px 10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .reveal-lines .ln>span,.js .hero-line{opacity:1!important;transform:none!important}
  .js .reveal-img:not(.in) .media::after,.js .reveal-img:not(.in) .rcard-media::after{transform:scaleX(0)!important}
  .js .reveal-img:not(.in) .media img,.js .reveal-img:not(.in) .rcard-media img{transform:none!important}
  .js .hero-side,.js .scrollcue,.js .hero-vtoggle{opacity:1!important}
  .hero-curtain{display:none!important}
  /* no hover zoom for users who prefer reduced motion */
  .media:hover img,.dip:hover .media img,.rcard:hover .rcard-media img,.gitem:hover img{transform:none!important}
}

/* =====================================================================
   ADDITIONS — carousels, trust band, garden, fitness,
   events, newsletter, floating widgets, chatbot
   ===================================================================== */

/* ---------- accessibility util ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Generic media carousel ---------- */
.mcar{position:relative}
.mcar-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--e1),transform .9s var(--e1)}
.mcar-slide.is-active{opacity:1}
/* Keeps subject matter sitting left of frame (e.g. the chalked Chiya Pasal board)
   inside the cover-crop, which centres by default. */
.mcar-slide--left{object-position:left center}
/* Same idea vertically, for a portrait plate in a landscape panel. The Nepali Ghar
   facade is 616x651; in the ~960x733 diptych panel, cover trims roughly 180 source
   pixels of height, and centred that took 90px off the top — the whole Newari roof,
   which is the part that names the building. Biasing the window up to 14% costs
   about 27px at the roofline instead, and spends the rest of the crop on the
   forecourt and parked cars at the foot of the frame, which carry nothing. */
.mcar-slide--top{object-position:50% 14%}
.mcar-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;gap:8px;justify-content:center;pointer-events:none}
.mcar-dots button{pointer-events:auto;width:8px;height:8px;border-radius:50%;background:rgba(236,229,215,.4);border:1px solid rgba(236,229,215,.65);transition:transform .3s var(--e1),background .3s}
.mcar-dots button.is-active{background:var(--paper);transform:scale(1.3)}
.mcar-arrows{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 10px;pointer-events:none}
.mcar-btn{pointer-events:auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;
  color:var(--paper);background:rgba(20,15,11,.34);border:1px solid rgba(236,229,215,.4);opacity:0;transition:opacity .3s var(--e1),background .3s,border-color .3s}
.mcar:hover .mcar-btn,.mcar-btn:focus-visible{opacity:1}
.mcar-btn:hover{background:var(--brick);border-color:var(--brick)}
.dip .mcar-dots{top:20px;bottom:auto;left:auto;right:22px;justify-content:flex-end}

/* ---------- Trust band (relocated, prominent) ---------- */
.trustband{background:var(--paper-3);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trustband-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tbadge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:46px 22px;border-right:1px solid var(--line-soft);color:inherit}
.tbadge:last-child{border-right:none}
.tb-ic{width:34px;height:34px;color:var(--brick);transition:transform .35s var(--e1)}
.tb-ic svg{width:100%;height:100%;display:block}
.tbadge:hover .tb-ic{transform:translateY(-2px)}
.tb-t{font-family:var(--serif);font-size:1.35rem;color:var(--ink)}
.tb-s{color:var(--muted)}
a.tbadge{transition:background .3s}
a.tbadge:hover{background:rgba(166,67,43,.06)}

/* ---------- Garden & Organic Farm ---------- */
.garden{padding:var(--section) 0;background:var(--paper)}
.garden-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:90px;align-items:center}
.garden-fig .media{aspect-ratio:4/5}
.garden-fig figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.garden-feats{margin:30px 0 8px;border-top:1px solid var(--line)}
.garden-feats li{padding:18px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.gf-k{color:var(--brick)}
.gf-v{color:var(--ink-2);font-size:.98rem}

/* ---------- Sustainability ---------- */
.susta{padding:var(--section) 0;background:var(--paper-2)}
.susta-intro{display:grid;grid-template-columns:1.02fr .98fr;gap:80px;align-items:center;margin-bottom:var(--head-gap)}
.susta-lede{font-size:19px;line-height:1.74;color:var(--ink-2);margin-top:30px;max-width:52ch}
.susta-stats{display:flex;flex-wrap:wrap;gap:40px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.susta-stats li{display:flex;flex-direction:column;gap:5px}
.ss-n{font-family:var(--serif);font-size:1.55rem;line-height:1;color:var(--brick)}
.ss-l{color:var(--muted)}
.susta-hero .media{aspect-ratio:5/4}
.susta-hero figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.susta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.eco-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-soft);border-radius:2px;overflow:hidden;
  transition:transform .4s var(--e1),box-shadow .4s var(--e1)}
.eco-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px -24px rgba(27,23,20,.55)}
.eco-media{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sage),var(--sage-2))}
.eco-glyph{width:52px;height:52px;color:var(--pine)}
.eco-body{flex:1;display:flex;flex-direction:column;padding:26px 26px 30px}
.eco-k{color:var(--brick);margin-bottom:10px}
.eco-title{font-family:var(--serif);font-weight:400;font-size:1.42rem;line-height:1.12;color:var(--ink)}
.eco-body p{color:var(--ink-2);font-size:.96rem;line-height:1.6;margin-top:12px}

/* ---------- Fitness Centre — split (gym photo + content panel) ---------- */
.fitness{background:var(--paper)}
.fitness--split{display:grid;grid-template-columns:.95fr 1.05fr;align-items:stretch}
/* 480px and the dining panel's padding, not a viewport-scaled height of its own:
   this section sits in the same run of split panels as Chiya Pasal and the venue
   block, and a 66vh floor made it stand a head taller than them on wide screens. */
.fitness-media{position:relative;min-height:480px;overflow:hidden;margin:0}
.fitness-media .media{position:absolute;inset:0}
.fitness-media img{width:100%;height:100%;object-fit:cover}
.fitness-panel{display:flex;align-items:center;padding:clamp(32px,5vh,72px) 72px}
.fitness-inner{max-width:600px;width:100%}
.fitness-panel .kicker{margin-bottom:14px}
.fitness-panel .display{margin:0}
.fitness-hours{display:inline-flex;align-items:center;gap:10px;margin-top:20px;color:var(--paper);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(20,15,11,.34);border:1px solid rgba(236,229,215,.28);padding:9px 16px}
.fitness-hours .fh-dot{width:7px;height:7px;border-radius:50%;background:var(--ochre);flex:0 0 auto}
.fitness-intro{color:rgba(236,229,215,.85);font-size:1.05rem;line-height:1.7;margin:26px 0 0;max-width:48ch}
.fitness-features{display:grid;grid-template-columns:1fr 1fr;gap:24px 34px;margin-top:34px;
  padding-top:30px;border-top:1px solid var(--line-light)}
.fitness-features li{display:flex;align-items:center;gap:14px}
.ff-ic{width:32px;height:32px;flex:0 0 auto;color:var(--ochre)}
.ff-ic svg{width:100%;height:100%;display:block}
.ff-name{font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.2;color:var(--paper)}
@media(max-width:1024px){
  .fitness--split{grid-template-columns:1fr}
  .fitness-media{min-height:44vh;order:-1}
  .fitness-panel{padding:clamp(40px,6vh,var(--section)) var(--pad)}
  .fitness-inner{max-width:760px}
}
/* Short desktop/laptop: the same compression the dining panels get, for the two other
   split sections. It has to live down here rather than in that rule up at the dining
   block — .meet-panel and .fitness-panel set `padding` shorthand further down the
   sheet, and at equal specificity the later declaration would win and undo it. */
@media (min-width:1025px) and (max-height:800px){
  .meet-panel,.fitness-panel{padding-top:clamp(24px,3.4vh,44px);padding-bottom:clamp(24px,3.4vh,44px)}
  .meet--split .display,.fitness-panel .display{font-size:clamp(2rem,3.4vw,3rem)}
  .meet--split .meet-logo{height:clamp(66px,8vh,88px);margin-bottom:9px}
  .meet--split .meet-lede,.fitness-intro{line-height:1.45}
  .meet--split .meet-stats{margin:12px 0 14px}
  .meet--split .mstat{padding:9px 18px 9px 0}
  .fitness-intro{margin-top:18px}
  .fitness-features{gap:16px 34px;margin-top:22px;padding-top:20px}
}
@media(max-width:520px){
  .fitness-features{grid-template-columns:1fr;gap:20px}
}

/* ---------- Fitness Centre — inner-page variant (banner + detail strip) ----------
   facilities/ and experiences/ carry the title over the photo instead of beside it,
   then drop the copy into the brand-green strip below. */
.fitness-banner{position:relative;min-height:clamp(380px,56vh,560px);
  display:flex;align-items:flex-end;overflow:hidden}
.fitness-banner .media{position:absolute;inset:0}
.fitness-banner .media img{width:100%;height:100%;object-fit:cover}
/* scrim so the overlaid title holds on any frame of the carousel */
.fitness-banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,15,11,.12) 0%,rgba(20,15,11,.28) 32%,rgba(20,15,11,.72) 70%,rgba(20,15,11,.94) 100%)}
.fitness-banner-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) clamp(34px,6vh,64px);
  text-shadow:0 1px 4px rgba(15,11,8,.4),0 2px 24px rgba(15,11,8,.45)}
.fitness-banner-inner .display{margin:0}
/* the eyebrow sits higher up the scrim than the title, where --ochre goes muddy */
.fitness-banner-inner .kicker--light{color:#D7A76B}
/* dots move clear of the overlaid title */
.fitness-banner .mcar-dots{top:20px;bottom:auto;left:auto;right:22px;justify-content:flex-end}
.fitness-strip{padding:clamp(44px,7vh,var(--section)) 0}
.fitness-strip .fitness-intro{margin-top:0;max-width:62ch}
@media(max-width:640px){
  .fitness-banner{min-height:clamp(320px,50vh,440px)}
}

/* ---------- Light panels ----------
   Baithak and Vyayam sit on the page's own cream rather than the identity sheet's
   green, so these blocks read as part of the same paper as the rest of the site.
   It is a light field, so everything the markup inherits from the earlier dark
   panels — the --light modifiers, the light hairlines, paper-on-dark body copy —
   flips back to ink. */
.meet-panel,.fitness-panel,.fitness-strip{background:var(--paper);color:var(--ink-2)}
.meet-panel .display--light,.fitness-panel .display--light{color:var(--ink)}
/* --brick-deep was picked to clear 3:1 on the green it used to sit on; the cream is
   lighter still, so it clears by more. Anything under ~19px stays ink for 4.5:1. */
.meet-panel .display--light em,.fitness-panel .display--light em{color:var(--brick-deep)}
.meet-panel .kicker--light,.fitness-panel .kicker--light{color:var(--ink)}
.meet-panel .meet-lede{color:var(--ink-2)}
.meet-panel .mnum{color:var(--brick-deep)}
.meet-panel .mlab{color:var(--ink-2)}
.meet-panel .meet-stats{border-top-color:rgba(27,23,20,.2);border-bottom-color:rgba(27,23,20,.2)}
.meet-panel .mstat + .mstat{border-left-color:rgba(27,23,20,.2)}
.meet-panel .btn-outline--light{border-color:rgba(27,23,20,.42);color:var(--ink)}
.meet-panel .btn-outline--light:hover{background:var(--ink);color:var(--paper)}
/* Tinted with ink rather than the old translucent cream — that fill was there to
   lighten the green behind it, and on the cream it would disappear entirely. */
.fitness-panel .fitness-hours,.fitness-strip .fitness-hours{
  color:var(--ink);background:rgba(27,23,20,.05);border-color:rgba(27,23,20,.24)}
.fitness-panel .fh-dot,.fitness-strip .fh-dot{background:var(--brick)}
.fitness-panel .fitness-intro,.fitness-strip .fitness-intro{color:rgba(27,23,20,.8)}
.fitness-panel .fitness-features,.fitness-strip .fitness-features{border-top-color:rgba(27,23,20,.2)}
.fitness-panel .ff-ic,.fitness-strip .ff-ic{color:var(--brick-deep)}
.fitness-panel .ff-name,.fitness-strip .ff-name{color:var(--ink)}

/* ---------- Spa image ---------- */

/* ---------- Events (layouts + occasions) ---------- */
.events{padding:var(--section) 0;background:var(--paper)}
.events-head{text-align:center;max-width:760px;margin:0 auto var(--head-gap)}
.events-head .kicker,.events-occ-head .kicker{justify-content:center;width:fit-content;margin-inline:auto}
.events-note{color:var(--muted);margin-top:20px}
.layouts{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-bottom:calc(var(--section) * .7)}
.layout{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:28px 12px;
  border:1px solid var(--line-soft);background:var(--paper-2);transition:transform .35s var(--e1),box-shadow .35s var(--e1)}
.layout:hover{transform:translateY(-4px);box-shadow:0 16px 32px -20px rgba(27,23,20,.55)}
.lay-ic{width:52px;height:44px;color:var(--brick)}
.lay-ic svg{width:100%;height:100%;display:block}
.lay-name{font-family:var(--serif);font-size:1.15rem;line-height:1}
.lay-pax{color:var(--muted)}
@media(min-width:1025px){.layout{height:196px;justify-content:center}}
.events-occ-head{text-align:center;margin-bottom:46px}
.events-occ-title{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:46px}
.ecard{position:relative;overflow:hidden;border-radius:2px}
.ecard-media{aspect-ratio:4/3}
.ecard-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(15,11,8,.66),rgba(15,11,8,0) 55%)}
.ecard-cap{position:absolute;left:16px;bottom:13px;z-index:2;font-family:var(--serif);font-size:1.2rem;color:var(--paper);text-shadow:0 1px 10px rgba(15,11,8,.7)}
.events-cta{display:flex;flex-direction:column;align-items:center;gap:18px}
.events-contact{color:var(--muted);text-align:center}
.events-contact a{color:var(--brick)}
.events-contact a:hover{text-decoration:underline}
.events-contact a[href^="mailto:"]{text-transform:none}

/* ---------- Auto-scroll marquees (sustainability · events · facilities) ---------- */
.marquee{position:relative;overflow:hidden;margin-block:6px}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:clamp(28px,6vw,90px);z-index:3;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--mq-fade,var(--paper)),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--mq-fade,var(--paper)),transparent)}
.marquee-track{display:flex;flex-wrap:nowrap;align-items:stretch;width:max-content;margin:0;padding:6px var(--gutter);list-style:none}
.marquee-track>*{flex:0 0 auto;margin-right:var(--mq-gap,26px)}
/* animation kicks in only once JS has cloned the set for a seamless -50% loop */
.marquee.is-ready .marquee-track{padding-inline:0;animation:mq-scroll var(--mq-dur,60s) linear infinite}
.marquee.is-ready:hover .marquee-track,.marquee.is-ready .marquee-track:focus-within{animation-play-state:paused}
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* reduced-motion / no-JS fallback: a quiet, swipeable strip instead of motion */
.marquee.is-static{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.marquee.is-static::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){
  .marquee.is-ready .marquee-track{animation:none}
  .marquee{overflow-x:auto}
}
/* section tints for the edge fades + per-section card sizing */
.susta .marquee,.facil .marquee{--mq-fade:var(--paper-2)}
.events .marquee{--mq-fade:var(--paper)}
.susta-marquee .eco-card{width:clamp(272px,80vw,344px)}
/* The homepage section is a teaser; this sends the reader to the full page. Centred
   under the marquee rather than beside the lede, so it reads as the end of the
   section instead of competing with the heading. */
.susta-act{display:flex;justify-content:center;margin-top:clamp(32px,4vw,52px)}
.events-marquee{--mq-gap:18px}
.events-marquee .ecard{width:clamp(232px,68vw,306px)}
@media(min-width:1025px){.events-marquee{--mq-gap:20px}}
.facil-marquee{--mq-gap:18px}
.facil-marquee .frow{width:clamp(210px,64vw,242px);flex-direction:column;align-items:flex-start;gap:14px;
  padding:26px 24px;background:var(--paper);border:1px solid var(--line-soft);border-radius:2px;
  transition:transform .35s var(--e1),box-shadow .35s var(--e1)}
.facil-marquee .frow:hover{padding-left:24px;transform:translateY(-4px);box-shadow:0 16px 32px -22px rgba(27,23,20,.5)}
.facil-marquee .frow:hover .ficon{transform:scale(1.08)}
.facil-marquee .fnote{margin-left:0}

/* ---------- Newsletter ---------- */
.news{background:var(--paper-2);padding:calc(var(--section) * .82) 0;border-top:1px solid var(--line-soft)}
/* photo variant — newsletter sits over a dimmed room photo (ex-final-CTA background) */
.news--photo{position:relative;overflow:hidden;color:var(--paper);background:none;border-top:none}
.news-bg{position:absolute;inset:0;z-index:0}
.news-bg img{width:100%;height:100%;object-fit:cover}
.news-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,11,.72),rgba(20,15,11,.86))}
.news--photo .news-inner{position:relative;z-index:1}
.news--photo .news-sub{color:rgba(236,229,215,.85)}
.news-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.news-text .display{margin-top:4px}
.news-sub{color:var(--muted);margin-top:18px;max-width:42ch}
.news-field{display:flex;gap:12px;flex-wrap:wrap}
.news-field input{flex:1;min-width:220px;background:var(--paper);border:1px solid var(--line);padding:16px 18px;font-family:var(--sans);font-size:1rem;color:var(--ink)}
.news-field input:focus{outline:none;border-color:var(--brick)}
.news-field .btn{flex:0 0 auto}
.news-msg{margin-top:14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--brick)}
.news-msg[hidden]{display:none}

/* ---------- Offers toaster (left) ----------
   Sits at the top-left, in the band under the fixed header and above the hero
   headline — clear of the whole right-hand overlay lane (chat launcher, back-to-top,
   contact rail) and of the hero copy below it. Slides in from the left edge.
   top:170px clears the header at its tallest (unscrolled: 17px pad + 118px wordmark
   + 17px pad); once scrolled the header shrinks to 82px and the gap simply opens up. */
.offer-toast{position:fixed;right:auto;left:24px;top:170px;bottom:auto;z-index:1150;width:284px;max-width:calc(100vw - 48px);
  background:var(--ink);color:var(--paper);border:1px solid rgba(236,229,215,.14);border-left:3px solid var(--brick);
  box-shadow:0 18px 44px -18px rgba(15,11,8,.7);transform:translateX(-120%);opacity:0;
  transition:transform .55s var(--e2),opacity .55s var(--e2)}
.offer-toast.show{transform:none;opacity:1}
.offer-toast[hidden]{display:none}
.ot-close{position:absolute;top:5px;right:8px;width:26px;height:26px;color:rgba(236,229,215,.55);font-size:1.35rem;line-height:1}
.ot-close:hover{color:var(--paper)}
.ot-inner{display:flex;flex-direction:column;gap:6px;padding:20px 22px}
.ot-tag{color:var(--ochre);letter-spacing:.14em}
.ot-title{font-family:var(--serif);font-weight:400;font-size:1.3rem}
.ot-sub{font-size:.9rem;color:rgba(236,229,215,.72)}
.ot-cta{color:var(--paper);margin-top:8px;letter-spacing:.1em;transition:color .3s}
.ot-inner:hover .ot-cta{color:var(--ochre)}

/* ---------- Floating contact rail (right) ---------- */
.floatbar{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:1150;display:flex;flex-direction:column;gap:12px}
.fbtn{width:48px;height:48px;flex:0 0 auto;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--paper);
  box-shadow:0 8px 20px -6px rgba(15,11,8,.5);transition:transform .3s var(--e1),box-shadow .3s var(--e1)}
.fbtn svg{width:24px;height:24px;flex:0 0 auto}
.fbtn-wa{background:#25D366;color:#fff}
.fbtn-call{background:var(--brick)}
.fbtn-mail{background:var(--pine)}
.fbtn:hover{transform:scale(1.1) translateY(-1px);box-shadow:0 12px 26px -6px rgba(15,11,8,.6)}

/* ---------- Chatbot ---------- */
.chat{position:fixed;right:16px;bottom:24px;z-index:1200}
.chat-launch{width:48px;height:48px;border-radius:50%;background:var(--brick);color:var(--paper);
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(15,11,8,.6);
  transition:transform .3s var(--e1),background .3s}
.chat-launch:hover{background:var(--brick-deep);transform:scale(1.06)}
.chat-launch svg{width:24px;height:24px}
.chat-ic-close{display:none}
.chat.open .chat-launch{background:var(--ink)}
.chat.open .chat-ic-open{display:none}
.chat.open .chat-ic-close{display:block}
.chat-panel{position:absolute;right:0;bottom:62px;width:min(360px,calc(100vw - 32px));height:min(524px,72vh);
  background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 26px 64px -18px rgba(15,11,8,.55);display:flex;flex-direction:column;
  transform-origin:bottom right;animation:chatIn .3s var(--e1)}
@keyframes chatIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:12px;padding:15px 14px;background:var(--ink);color:var(--paper)}
.chat-avatar{width:40px;height:40px;border-radius:50%;background:rgba(236,229,215,.1);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.chat-avatar img{height:28px;width:auto}
.chat-titles{display:flex;flex-direction:column;line-height:1.25}
.chat-titles strong{font-family:var(--serif);font-weight:400;font-size:1.06rem}
.chat-status{color:var(--ochre);font-size:.58rem;letter-spacing:.08em;margin-top:2px}
.chat-x{margin-left:auto;color:rgba(236,229,215,.7);font-size:1.6rem;width:32px;height:32px;line-height:1}
.chat-x:hover{color:var(--paper)}
.chat-log{flex:1;overflow-y:auto;padding:18px 15px;display:flex;flex-direction:column;gap:11px;background:var(--paper)}
.chat-msg{max-width:84%;padding:11px 14px;border-radius:14px;font-size:.9rem;line-height:1.5}
.chat-msg a{text-decoration:underline}
.chat-bot{align-self:flex-start;background:var(--paper-3);color:var(--ink);border-bottom-left-radius:4px}
.chat-bot a{color:var(--brick)}
.chat-user{align-self:flex-end;background:var(--brick);color:var(--paper);border-bottom-right-radius:4px}
.chat-user a{color:var(--paper)}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:2px 15px 12px;background:var(--paper)}
.chat-chip{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brick);
  border:1px solid var(--line);border-radius:20px;padding:7px 12px;transition:.25s var(--e1)}
.chat-chip:hover{background:var(--brick);color:var(--paper);border-color:var(--brick)}
.chat-form{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line);background:var(--paper)}
.chat-form input{flex:1;background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:11px 16px;font-family:var(--sans);font-size:.9rem;color:var(--ink)}
.chat-form input:focus{outline:none;border-color:var(--brick)}
.chat-form button{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--brick);color:var(--paper);display:flex;align-items:center;justify-content:center;transition:background .3s}
.chat-form button svg{width:20px;height:20px}
.chat-form button:hover{background:var(--brick-deep)}

/* keep back-to-top clear of the chatbot launcher (both bottom-right) */
.totop{bottom:100px;right:16px}

/* =====================================================================
   RESPONSIVE — additions
   ===================================================================== */
@media(max-width:1024px){
  .garden-grid,.fitness-grid,.news-inner{grid-template-columns:1fr;gap:44px}
  .garden-fig{order:-1}
  .susta-intro{grid-template-columns:1fr;gap:46px}
  .susta-hero{order:-1}
  .susta-grid{grid-template-columns:1fr 1fr}
  .layouts{grid-template-columns:repeat(3,1fr)}
  .totop{bottom:150px;width:44px;height:44px}
  .chat{right:16px;bottom:68px}
  .chat-launch{width:44px;height:44px}
  .chat-launch svg{width:22px;height:22px}
  .floatbar{right:12px;gap:10px}
  .fbtn{width:44px;height:44px}
  .fbtn svg{width:22px;height:22px}
  /* same band under the header, tighter to the edge with the narrower gutter */
  .offer-toast{left:16px}
}
@media(max-width:860px){
  .trustband-grid{grid-template-columns:1fr 1fr}
  .tbadge:nth-child(2){border-right:none}
  .tbadge:nth-child(1),.tbadge:nth-child(2){border-bottom:1px solid var(--line-soft)}
  .events-grid{grid-template-columns:1fr 1fr}
  .offer-toast{display:none}
  /* mobile: lay the contact rail as a horizontal row in the bottom-LEFT so it
     clears the back-to-top + chat launcher (both bottom-right) and the Book Now bar */
  .floatbar{flex-direction:row;top:auto;bottom:64px;right:auto;left:12px;transform:none;gap:10px}
  /* the rail has left the right edge, so the next arrow can sit symmetric with prev */
  .rooms{--rc-inset-r:var(--pad)}
  /* a card is 86vw down here, so 40px each side would leave the scroll viewport
     narrower than a single card and every card would sit part-cut */
  .room-track{margin:0 16px}
}
@media(max-width:520px){
  .layouts{grid-template-columns:1fr 1fr}
  .susta-grid{grid-template-columns:1fr}
  .susta-stats{gap:26px}
  .news-field .btn{width:100%}
  .chat-panel{width:calc(100vw - 24px);right:-4px}
}

/* =====================================================================
   Keep every editorial image within a single screen — on any device.
   These figures derive their height from their column width via aspect-ratio,
   so on single-column tablet / landscape layouts a portrait 4/5 frame can grow
   taller than the viewport and force a scroll to take in the whole image.
   Capping the media to a share of the SMALL viewport height (svh — holds even
   while a mobile URL bar is showing) keeps each image fully in view; the
   object-fit:cover already on .media img refills the frame with no distortion.
   The cap only engages when the natural height would exceed it, so the intended
   proportions are untouched on normal desktop screens.
   ===================================================================== */
.welcome-fig .media,
.exp-fig .media,
.garden-fig .media,
.spa-fig .media,
.susta-hero .media,
.fitness-visual,
.ocard-media,
.rcard-media{max-height:82svh}
/* When the cap engages, aspect-ratio recomputes the WIDTH down from the clamped
   height, so the frame ends up narrower than its column — margin-inline:auto below
   keeps that narrower frame centred instead of hanging flush left.
   The card media are deliberately NOT in this second list: .ocard-media is a flex
   item of .ocard (column flex), where an auto inline margin cancels the implicit
   align-self:stretch and collapses the frame to its content width — 76px for the
   glyph-only "Monsoon Special" card. A stretched item can never end up narrower
   than its column, so it has nothing to centre anyway. */
.welcome-fig .media,
.exp-fig .media,
.garden-fig .media,
.spa-fig .media,
.susta-hero .media,
.fitness-visual{margin-inline:auto}

/* =====================================================================
   Home page — no dark green.
   The identity sheet carries exactly one green (--sage #8CB78A), and it cannot
   carry text on the paper tints (1.8:1 — nowhere near the 4.5:1 small-text
   minimum). So the eyebrows move to the terracotta already in the palette
   rather than to a lighter green, and the remaining dark-green fills go neutral.
   Scoped to .home on purpose: the inner pages still use --seto / --pine.
   ===================================================================== */
.home .kicker{color:var(--brick-deep)}
/* .home .kicker above outranks the plain .kicker--light rule, so the light-field
   variant has to be restated here or the 3 eyebrows on dark sections would turn
   terracotta and lose their contrast. */
.home .kicker--light{color:var(--ochre)}
/* placeholder card fills: both greens are out, so these go back to the neutral
   dark gradient the design started from, with the ochre glyph that reads on it */
.home .ocard-media--noimg{background:linear-gradient(150deg,var(--ink-2),var(--ink))}
.home .eco-media{background:linear-gradient(135deg,var(--ink-2),var(--ink))}
.home .ocard-glyph,.home .eco-glyph{color:var(--ochre)}
/* mail float: ink keeps the rail's three buttons distinct (WhatsApp green,
   Call brick, Mail ink) instead of stacking two greens. The rail is fixed and
   travels over the dark dining/spa panels, where an unbordered ink circle is
   invisible (1.0:1 against --ink) — the ring is what keeps its edge readable
   there, and it disappears harmlessly over the paper sections. */
.home .fbtn-mail{background:var(--ink);box-shadow:0 8px 20px -6px rgba(15,11,8,.5),0 0 0 1px rgba(236,229,215,.45)}
.home .fbtn-mail:hover{box-shadow:0 12px 26px -6px rgba(15,11,8,.6),0 0 0 1px rgba(236,229,215,.6)}
/* =====================================================================
   Home page — Baithak + Vyayam panels on ink instead of the identity green.
   The "Brand-green panels" block further up flips these two panels to an
   ink-on-light treatment because --sage is a LIGHT field. On a dark field that
   inversion is wrong in every particular, so each of those overrides is put back
   to the paper-on-dark value the markup was originally written for (the base
   .display--light / .btn-outline--light / --line-light rules). Kept as explicit
   restatements rather than `revert` so the intent survives a future refactor.
   ===================================================================== */
.home .meet--split,.home .fitness,.home .fitness--split{background:var(--ink)}
.home .meet-panel,.home .fitness-panel{background:var(--ink);color:rgba(236,229,215,.85)}
/* headings + eyebrow */
.home .meet-panel .display--light,.home .fitness-panel .display--light{color:var(--paper)}
.home .meet-panel .display--light em,.home .fitness-panel .display--light em{color:var(--ochre)}
.home .fitness-panel .kicker,.home .meet-panel .kicker{color:var(--ochre)}
/* Baithak stat block + button */
.home .meet-panel .meet-lede{color:rgba(236,229,215,.85)}
.home .meet-panel .mnum{color:var(--ochre)}
.home .meet-panel .mlab{color:rgba(236,229,215,.8)}
.home .meet-panel .meet-stats{border-top-color:var(--line-light);border-bottom-color:var(--line-light)}
.home .meet-panel .mstat + .mstat{border-left-color:var(--line-light)}
.home .meet-panel .btn-outline--light{border-color:rgba(236,229,215,.5);color:var(--paper)}
.home .meet-panel .btn-outline--light:hover{background:var(--paper);color:var(--ink)}
/* Vyayam hours chip, copy and feature list */
.home .fitness-panel .fitness-hours{color:var(--paper);background:rgba(20,15,11,.34);border-color:rgba(236,229,215,.28)}
.home .fitness-panel .fh-dot{background:var(--ochre)}
.home .fitness-panel .fitness-intro{color:rgba(236,229,215,.85)}
.home .fitness-panel .fitness-features{border-top-color:var(--line-light)}
.home .fitness-panel .ff-ic{color:var(--ochre)}
.home .fitness-panel .ff-name{color:var(--paper)}