/* ============================================================
   HIMTATTVA — The Essence of the Himalayas
   Boutique Homestay, Hartola, Uttarakhand
   ============================================================ */

:root{
  /* palette re-based on a deep read of tajhotels.com — its actual computed
     styles, not a guess: dominant text/dark tone rgb(69,68,63), signature
     gold rgb(173,139,58), ivory background rgb(246,245,245), near-black
     rgb(19,19,15). The old variable names stay (so every existing usage
     site inherits this automatically) but the hue shifts from Himtattva's
     original forest-green register to Taj's warm charcoal-and-gold one. */
  --forest-deepest:#13130f;
  --forest-deep:#2b2b26;
  --forest:#45443f;
  --forest-light:#6b6a63;
  --gold-deep:#8f7228;
  --gold:#ad8b3a;
  --gold-light:#c9ac6a;
  --gold-pale:#e8dcc0;
  --cream:#f6f5f5;
  --cream-warm:#eae8e2;
  --cream-soft:#fcfcfb;
  --ink:#1a1814;
  --ink-soft:#45443f;
  --white:#ffffff;

  /* Cinzel is Taj's actual hero/heading face — a Roman-inscription serif
     that reads as "palace," not just "elegant." Cormorant Garamond stays
     for italic/romantic accent lines (Cinzel has no italic cut, so it's
     wrong for those), and now sits alongside --font-royal rather than
     covering every display use on its own. */
  --font-display:'Cormorant Garamond', 'Times New Roman', serif;
  --font-royal:'Cinzel', 'Times New Roman', serif;
  --font-body:'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* one shared lift for the emblem everywhere it appears (nav, hero,
     footer) so the brand mark reads as the same consistently-highlighted
     object rather than a different treatment per section. contrast/
     saturate sharpen the distinction between the artwork's cool-grey
     mountains and its warm-gold sun/swirl — a tighter glow than before,
     since a big soft blur was flattening that detail rather than
     highlighting it. */
  --emblem-glow: contrast(1.18) saturate(1.15) drop-shadow(0 2px 10px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(232,208,158,.7)) drop-shadow(0 0 22px rgba(201,172,106,.35));

  --container:1240px;
  --nav-h:88px;
  --ease-silk: cubic-bezier(.22,.61,.36,1);
  --ease-fog: cubic-bezier(.16,.84,.44,1);
  /* --ease-fog dumps ~84% of its motion into the first 16% of its duration —
     fine for a quick reveal, but on the preloader's multi-second exit it
     read as an instant vanish followed by a long, imperceptible tail. This
     curve spreads the motion evenly across the full duration instead. */
  --ease-dissolve: cubic-bezier(.45,0,.55,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream-soft);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* a small snow-capped twin peak stands in for the default arrow
     everywhere on the site — hotspot sits at the peak's tip (16,4) so
     it still points precisely, the way a normal cursor would */
  cursor:url('../img/cursor-peak.png?v=2') 16 4, auto;
}
body.no-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer; }
button{ font-family:inherit; cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer; }
input,textarea,select{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

h1,h2,h3,h4{
  font-family:var(--font-royal);
  font-weight:600;
  margin:0;
  color:var(--forest-deep);
  letter-spacing:.02em;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-body);
  font-size:12.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:500;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  width:34px; height:1px;
  background:var(--gold-deep);
  display:inline-block;
}

.section-title{
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.12;
}
.section-sub{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  color:var(--ink-soft);
  max-width:560px;
  margin-top:18px;
}

section{ position:relative; }

/* ============ scroll reveal (fog-veil handled separately) ============ */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity 1s var(--ease-silk), transform 1s var(--ease-silk);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger > *{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-silk), transform .9s var(--ease-silk);
}
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.16s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.27s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.38s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.49s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.6s; }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--cream);
  overflow:hidden;
  /* background clears well before the curtain finishes so the site is
     never hidden behind a solid color; visibility only flips once every
     visible element (curtain, text, atmosphere) has fully dissolved away —
     the whole exit reads as one slow, unified fade, not a hard cut */
  transition:background-color 1s ease-out, visibility 0s 3.8s;
}
#preloader.opening{
  background-color:rgba(248,243,230,0);
  visibility:hidden;
  pointer-events:none;
}

.curtain-half{
  position:absolute; top:0; bottom:0; width:50%;
  overflow:hidden;
  /* slowed down further still for an even more languid, drifting-fog
     feel — the curtain and text now get a good few extra seconds to
     properly linger post-click before anything starts to fade */
  transition:transform 3.8s var(--ease-dissolve), opacity 3.4s var(--ease-dissolve);
}
.curtain-left{ left:0; }
.curtain-right{ right:0; }
/* two layers of the same photo solve what neither "cover" nor "contain"
   could alone: "cover" cropped away the sun/trees on tall screens, plain
   "contain" left large empty cream bars. This backdrop is the same image
   blurred and scaled to fully cover the frame with no dead space, and the
   crisp image on top shows the complete, uncropped photo sized to fit —
   reads as one seamless picture, not a postage stamp on empty margins. */
.curtain-backdrop{
  position:absolute; top:0; height:100%; width:200%; max-width:none;
  /* a wash of the exact page cream sits on top of the blurred photo —
     on wide desktop screens this backdrop shows mostly pale sky from
     the image's edges, which blurs down to a slightly different white
     than the page background and reads as a visible seam. The wash
     pulls it firmly toward the real --cream value so it actually
     disappears into the surrounding background instead of bordering it. */
  background:
    linear-gradient(rgba(248,243,230,.62), rgba(248,243,230,.62)),
    url('../img/preloader-mountains-v4.jpg');
  background-size:cover, cover;
  background-position:center 35%, center 35%;
  filter:blur(34px);
  transform:scale(1.15);
  opacity:0;
  animation:curtainBgIn 1.3s var(--ease-fog) forwards .1s;
}
.curtain-left .curtain-backdrop{ left:0; }
.curtain-right .curtain-backdrop{ right:0; }
@keyframes curtainBgIn{ to{ opacity:1; } }
.curtain-img{
  position:absolute; top:0; height:100%; width:200%; max-width:none;
  /* contain keeps the whole photo intact (nothing cropped off); scaling
     it up afterward lets it fill noticeably more of the frame — clipped
     cleanly by curtain-half's overflow:hidden — while the blurred
     backdrop behind it (above) softly fills whatever sliver remains */
  object-fit:contain; object-position:center center;
  opacity:0;
  /* no filter — shown exactly as the original hand-sketched artwork
     looks, not recolored/regraded into something photo-filter-ish */
  animation:curtainImgIn 1.1s var(--ease-fog) forwards .1s;
}
.curtain-left .curtain-img{ left:0; }
.curtain-right .curtain-img{ right:0; }
#preloader.opening .curtain-half{ opacity:0; }
#preloader.opening .curtain-left{ transform:translateX(-104%); }
#preloader.opening .curtain-right{ transform:translateX(104%); }
@keyframes curtainImgIn{ from{ opacity:0; transform:scale(1.14);} to{ opacity:1; transform:scale(1.2);} }

/* soft billow of mist right at the seam as the mountains tear apart — rides
   along with its parent curtain-half as it slides and fades away, so it
   never needs its own exit animation */
.curtain-mist{
  position:absolute; top:0; bottom:0; width:55%;
  pointer-events:none;
  opacity:0;
  filter:blur(24px);
  background:
    radial-gradient(ellipse 65% 55% at 30% 30%, rgba(248,243,230,.95), transparent 62%),
    radial-gradient(ellipse 58% 48% at 62% 68%, rgba(248,243,230,.9), transparent 64%),
    radial-gradient(ellipse 50% 42% at 45% 50%, rgba(248,243,230,.75), transparent 60%);
  transition:opacity 1.4s var(--ease-dissolve), transform 4s var(--ease-dissolve);
}
.curtain-left .curtain-mist{ right:-8%; }
.curtain-right .curtain-mist{ left:-8%; }
#preloader.opening .curtain-mist{ opacity:.8; transform:scale(1.35); }

/* the new artwork already has its own sun + birds baked in, so this
   synthetic overlay is switched off to avoid a second, mismatched pair */
.preloader-atmosphere{ display:none; }

.preloader-sun{
  position:absolute; top:13%; right:16%; width:130px; height:130px;
  border-radius:50%; filter:blur(2px);
  background:radial-gradient(circle, rgba(232,208,158,.6) 0%, rgba(232,208,158,.32) 38%, rgba(232,208,158,0) 70%);
}

.preloader-birds{ position:absolute; inset:0; width:100%; height:100%; }
.p-bird{
  fill:rgba(48,43,34,.6); stroke:none; opacity:0;
}
.p-bird-1{ animation:birdFadeIn .6s ease-out forwards .5s, birdDrift 11s ease-in-out infinite .5s; }
.p-bird-2{ animation:birdFadeIn .6s ease-out forwards .65s, birdDrift 14s ease-in-out infinite reverse .65s; }
.p-bird-3{ animation:birdFadeIn .6s ease-out forwards .8s, birdDrift 9.5s ease-in-out infinite .8s; }
@keyframes birdFadeIn{ to{ opacity:.55; } }
@keyframes birdDrift{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(34px,-8px);} }

.preloader-center{
  /* back to dead center of the page — this is the only thing left once
     the logo + button have both dismissed themselves */
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; width:92%; text-align:center;
  /* purely decorative text, never needs to catch clicks — also stops it
     (even while invisible pre-reveal) from intercepting taps meant for
     the welcome button sitting at the same center point */
  pointer-events:none;
  /* exit is now quick and separate from the curtain's own slow dissolve —
     the text disappears right as the curtain starts opening rather than
     lingering through the whole multi-second parting */
  transition:opacity .4s ease-out, transform .4s ease-out;
}
#preloader.opening .preloader-center{ opacity:0; transform:translate(-50%,-50%) translateY(12px) scale(.97); }
.preloader-breath{
  /* a genuine calligraphic script, not just an italic serif — the
     classic pairing for "relaxing" (flowing hand-lettered curves) and
     "royal" (formal invitation-style calligraphy) at once. Script
     faces render optically smaller than serif ones, so this needs a
     noticeably larger size and zero manual tracking to read clearly
     and keep its connected letterforms intact. */
  font-family:'Tangerine', var(--font-display), serif; font-weight:700;
  font-size:clamp(38px,6.8vw,82px); color:#6f4e37; letter-spacing:0;
  margin:0; opacity:0; transform:translateY(18px);
  text-shadow:0 0 22px rgba(248,243,230,.95), 0 0 46px rgba(248,243,230,.75), 0 3px 14px rgba(90,64,20,.45);
  /* stays hidden until "Embark on the journey" is actually clicked —
     before that, the button is the only thing on screen. JS adds
     "text-revealed" to #preloader the instant it's clicked, below.
     Slowed right down (was 1.1s, felt abrupt) — main.js's post-click
     grace timer is deliberately kept in sync with this exact duration,
     see the comment there. */
  transition:opacity 2.6s var(--ease-silk) .2s, transform 2.6s var(--ease-silk) .2s;
}
#preloader.text-revealed .preloader-breath{
  opacity:.96; transform:translateY(0);
  animation:breathePulse 4.6s ease-in-out infinite 2.8s;
}
#preloader.opening .preloader-breath{ animation:none; }
@keyframes breathePulse{ 0%,100%{ opacity:.88; transform:scale(1);} 50%{ opacity:1; transform:scale(1.03);} }

/* the "enter" gate — appears first, before the breath text, so the tap
   every browser requires before audio can play reads as a deliberate,
   branded welcome rather than an incidental first click somewhere on
   the page. Purely additive: it doesn't gate or delay the curtain, the
   text, or anything else, which all keep running on their own timers
   underneath it exactly as before. */
.preloader-welcome{
  /* NOT position:relative — that was the previous (wrong) fix for the
     click-interception bug below, and it silently broke .welcome-ring's
     centering: absolutely-positioned children resolve top:50% against
     their nearest POSITIONED ancestor, so making this wrapper positioned
     turned it into that ancestor instead of #preloader, collapsing the
     "50%" down to roughly half of this wrapper's own near-zero height.
     Left unpositioned, children still correctly position against
     #preloader as intended.
     The real fix for the stacking issue is below: no "forwards" fill on
     the animation, so it stops being a "current" animation (and thus
     stops force-creating a stacking context) the instant it finishes,
     instead of holding that effect forever the way forwards fill does. */
  opacity:1;
  animation:welcomeIn .9s var(--ease-silk) .15s backwards;
}
@keyframes welcomeIn{ from{ opacity:0; } to{ opacity:1; } }
.welcome-ring{
  /* back to a static decorative mark, sitting above the real button now */
  position:absolute; left:50%; top:calc(50% - 96px); transform:translate(-50%,-50%);
  z-index:3;
  width:150px; height:150px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, rgba(70,68,62,.4), rgba(15,15,14,.45) 75%);
  border:1.5px solid var(--gold);
  box-shadow:0 8px 26px -8px rgba(0,0,0,.6);
}
.welcome-emblem{
  width:140px; height:auto;
  filter:drop-shadow(0 0 20px rgba(232,208,158,.6)) drop-shadow(0 4px 16px rgba(0,0,0,.35));
}
.welcome-banner-btn{
  /* ornate scalloped plaque, sitting centered below the logo mark —
     the frame (gold border + damask-filled lobes) is a single image
     asset with its own transparent silhouette, so the glow below uses
     filter:drop-shadow (which follows real alpha shape) rather than
     box-shadow (which would just draw a rectangle behind it). */
  position:absolute; left:50%; top:calc(50% + 58px); transform:translate(-50%,-50%);
  z-index:3;
  width:min(56vw, 300px); aspect-ratio:1036/314;
  background-color:transparent;
  background-image:url('../img/welcome-banner-frame.png');
  background-size:100% 100%; background-repeat:no-repeat;
  padding:0; border:none;
  display:flex; align-items:center; justify-content:center;
  color:#4a3418;
  font-family:var(--font-royal); font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
  cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
  transition:transform .4s var(--ease-silk);
  animation:welcomeBannerGlow 2.4s ease-in-out infinite .6s;
}
.welcome-banner-btn:hover{
  transform:translate(-50%,-50%) scale(1.04);
}
@keyframes welcomeBannerGlow{
  0%,100%{ filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)) drop-shadow(0 0 0 rgba(201,172,106,.55)); }
  50%{ filter:drop-shadow(0 8px 22px rgba(0,0,0,.5)) drop-shadow(0 0 9px rgba(201,172,106,.5)); }
}
/* dismissed the instant sound is confirmed on — whether from a direct
   tap here or any other qualifying gesture elsewhere on the page — and
   also as a safety net once the curtain itself starts opening. */
.preloader-welcome.dismissed,
#preloader.opening .preloader-welcome{
  opacity:0;
  pointer-events:none;
  /* animation:none releases opacity back to the transition below — a
     forwards-filled animation otherwise keeps winning the cascade and
     the dismiss fade silently never happens */
  animation:none;
  transition:opacity .5s var(--ease-silk);
}
.preloader-welcome.dismissed .welcome-ring,
#preloader.opening .welcome-ring{
  transform:translate(-50%,-50%) scale(.92);
  transition:transform .5s var(--ease-silk);
}
.preloader-welcome.dismissed .welcome-banner-btn,
#preloader.opening .welcome-banner-btn{
  transform:translate(-50%,-50%) scale(.92);
  animation:none;
  transition:transform .5s var(--ease-silk);
}

/* ============================================================
   SECTION VEIL (per-section reveal — plain fade, no cloud imagery)
   ============================================================ */
.fog-host{ position:relative; overflow:hidden; }
.fog-veil{
  position:absolute; inset:-10% -10%;
  z-index:6;
  pointer-events:none;
  opacity:1;
  transition:opacity 1.6s var(--ease-fog);
}
.fog-veil{ background:var(--cream-soft); }
.fog-veil.dark{ background:var(--forest-deepest); }
.fog-host.in-view .fog-veil{ opacity:0; }

/* ============================================================
   NAV
   ============================================================ */
#site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease-silk), box-shadow .5s var(--ease-silk), height .4s var(--ease-silk);
  background:linear-gradient(to bottom, rgba(10,23,16,.55), transparent);
}
#site-nav.solid{
  height:76px;
  /* solid color, not backdrop-filter — a full-width fixed blur has to
     resample everything scrolling beneath it every frame, which was
     the single biggest cause of scroll jank; already-opaque background
     reads almost identically without that cost */
  background:rgba(10,23,16,.96);
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.nav-inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.nav-brand{ display:flex; align-items:center; gap:16px; }
.nav-brand img{
  height:68px; width:auto;
  transition:height .4s var(--ease-silk), transform .4s var(--ease-silk);
  /* a warm gold glow under the usual drop-shadow so the emblem reads
     clearly against both the transparent nav and the solid dark one,
     instead of just a flat dark outline */
  filter:var(--emblem-glow);
}
#site-nav.solid .nav-brand img{ height:56px; }
.nav-brand:hover img{ transform:scale(1.1) rotate(-3deg); }
.nav-brand .word{
  font-family:var(--font-royal);
  font-size:21px; letter-spacing:.17em; color:var(--cream);
  font-weight:600;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  display:inline-block;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); opacity:.88; position:relative; padding:6px 0;
  white-space:nowrap; font-weight:700;
  transition:opacity .3s, transform .35s var(--ease-silk);
}
.nav-cta .btn{ font-weight:700; }
.nav-links .btn{ display:none; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-light); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-silk);
}
.nav-links a:hover{ opacity:1; }
.nav-link:hover{ transform:scale(1.08); }
.nav-links a:hover::after{ transform:scaleX(1); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px;
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  /* Taj's own buttons are perfectly square-cornered and flat-filled, not
     rounded/gradiented — a small but telling formality difference */
  border-radius:0; border:1px solid transparent;
  transition:transform .45s var(--ease-silk), box-shadow .45s var(--ease-silk), background .35s, color .35s, border-color .35s;
  white-space:nowrap;
}
.btn-gold{
  background:var(--gold);
  color:var(--white);
  box-shadow:0 10px 26px -8px rgba(173,139,58,.65);
}
.btn-gold:hover{ background:var(--gold-deep); transform:translateY(-2px) scale(1.045); box-shadow:0 16px 34px -10px rgba(173,139,58,.8); }
.btn-outline{
  border-color:rgba(248,243,230,.55); color:var(--cream); background:transparent;
}
.btn-outline:hover{ background:rgba(248,243,230,.12); border-color:var(--cream); transform:translateY(-2px) scale(1.045); }
.btn-outline-dark{
  border-color:rgba(19,32,24,.35); color:var(--forest-deep); background:transparent;
}
.btn-outline-dark:hover{ background:rgba(19,32,24,.06); transform:translateY(-2px) scale(1.045); }

.nav-cta{ display:flex; align-items:center; gap:18px; }
#nav-toggle{
  display:none; background:none; border:0; width:30px; height:22px; position:relative; z-index:1200;
  transition:transform .35s var(--ease-silk);
}
#nav-toggle:hover{ transform:scale(1.12); }
#nav-toggle span, #nav-toggle::before, #nav-toggle::after{
  content:''; display:block; position:absolute; left:0; right:0; height:2px; background:var(--cream);
  transition:transform .35s var(--ease-silk), opacity .35s;
}
#nav-toggle::before{ top:0; }
#nav-toggle span{ top:10px; }
#nav-toggle::after{ top:20px; }
#nav-toggle.open::before{ transform:translateY(10px) rotate(45deg); }
#nav-toggle.open::after{ transform:translateY(-10px) rotate(-45deg); }
#nav-toggle.open span{ opacity:0; }

/* sound toggle */
#sound-toggle{
  position:relative;
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(248,243,230,.4);
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream);
  transition:background .3s, border-color .3s, transform .3s;
  flex-shrink:0;
}
#sound-toggle:hover{ background:rgba(255,255,255,.14); transform:scale(1.06); }
#sound-toggle svg{ width:18px; height:18px; }
#sound-toggle .icon-off{ display:none; }
#sound-toggle.muted .icon-on{ display:none; }
#sound-toggle.muted .icon-off{ display:block; }
#sound-toggle .bars rect{ transform-origin:bottom; animation:soundBars 1.1s ease-in-out infinite; }
#sound-toggle.muted .bars rect{ animation:none; }
#sound-toggle .bars rect:nth-child(1){ animation-delay:0s; }
#sound-toggle .bars rect:nth-child(2){ animation-delay:.15s; }
#sound-toggle .bars rect:nth-child(3){ animation-delay:.3s; }
@keyframes soundBars{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }

/* shown only for browsers that block the automatic unmute (Safari, most
   notably — it never allows audible sound before a real tap, no matter
   what) — a pulsing ring alone was too easy to miss on a small icon, so
   a small labeled tooltip backs it up. Both clear the instant real sound
   is confirmed on, whether that's from this tap or any other gesture. */
.sound-hint{
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(-4px);
  white-space:nowrap;
  background:rgba(15,26,20,.94); color:var(--cream);
  font-family:var(--font-body); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:8px 13px; border-radius:4px;
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease-silk), transform .4s var(--ease-silk);
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.sound-hint::before{
  content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-bottom-color:rgba(15,26,20,.94);
}
#sound-toggle.needs-tap .sound-hint{ opacity:1; transform:translateX(-50%) translateY(0); }
#sound-toggle.needs-tap{ animation:soundNeedsTap 1.8s ease-in-out infinite; }
@keyframes soundNeedsTap{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,208,158,.55); }
  50%{ box-shadow:0 0 0 8px rgba(232,208,158,0); }
}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative;
  height:100vh; min-height:640px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:var(--forest-deepest);
}
.hero-media{
  position:absolute; inset:0;
  transform:scale(1.12);
  /* the raw footage reads dark/flat under the overlay below, so lift it
     directly rather than just relying on removing overlay darkness */
  filter:brightness(1.18) contrast(1.08) saturate(1.15);
  will-change:transform;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  background:var(--forest-deepest);
  /* two stacked copies of the same clip crossfade into each other just
     before the loop point (see initHeroVideoLoop in main.js) — dissolves
     the hard cut at the end of the footage into a smooth transition
     instead of a visible jump */
  opacity:0;
  transition:opacity 1.4s linear;
}
.hero-video.is-visible{ opacity:1; }
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  /* noticeably lighter than before, but never drops so low that the sky
     can outshine the title/tagline sitting on top of it — the previous
     pass dipped to near-transparent right where "Himtattva" sits */
  background:
    linear-gradient(to bottom, rgba(8,18,13,.32) 0%, rgba(8,18,13,.15) 18%, rgba(6,14,10,.22) 40%, rgba(6,14,10,.3) 62%, rgba(6,14,10,.6) 100%),
    linear-gradient(to right, rgba(6,14,10,.18), transparent 40%, transparent 60%, rgba(6,14,10,.18));
}
.hero-content{
  position:relative; z-index:20;
  text-align:center; color:var(--cream);
  padding:0 24px;
  max-width:900px;
  margin-top:20px;
}
.hero-content::before{
  /* dark neutral backdrop behind the emblem, not a gold wash — the
     artwork itself is gold-on-grey (a golden sun/swirl behind cool-grey
     mountains), so a warm gold halo here was blending into the logo's
     own tones and flattening exactly the detail it was meant to lift.
     A dark wash gives both the grey peaks and the gold sun real
     contrast to sit against, the same principle as the preloader's
     dark ring behind this same mark. */
  content:'';
  position:absolute; z-index:-1;
  left:50%; top:10px;
  width:280px; height:280px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(10,16,12,.55), rgba(10,16,12,.24) 45%, transparent 72%);
  pointer-events:none;
  opacity:0;
  transition:opacity 2s var(--ease-silk) .1s;
}
html.site-revealed .hero-content::before{ opacity:1; }
.hero-emblem{
  width:190px; height:auto; margin:0 auto 24px;
  /* dark shadow for lift off the photo behind it, plus a warm gold glow
     so the emblem itself reads as bright and clear rather than blending
     into a busy background */
  filter:var(--emblem-glow);
  opacity:0; transform:translateY(22px);
  /* held at rest until the preloader curtain actually starts parting —
     see html.site-revealed below — so the hero doesn't finish its own
     entrance long before there's anything visible to reveal it onto */
  transition:opacity 1.8s var(--ease-silk) .1s, transform 1.8s var(--ease-silk) .1s;
}
.hero-content h1{
  font-family:var(--font-royal); color:var(--cream);
  font-size:clamp(40px,6.8vw,82px);
  line-height:1.08;
  letter-spacing:.04em;
  font-weight:600;
  text-shadow:0 2px 24px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
  opacity:0; transform:translateY(26px);
  transition:opacity 1.8s var(--ease-silk) .3s, transform 1.8s var(--ease-silk) .3s;
}
.hero-content .tagline{
  font-family:var(--font-body);
  font-size:13px; letter-spacing:.38em; text-transform:uppercase;
  color:var(--gold-light);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  margin-top:18px;
  opacity:0; transform:translateY(20px);
  transition:opacity 1.8s var(--ease-silk) .5s, transform 1.8s var(--ease-silk) .5s;
}
.hero-content .desc{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(18px,2vw,23px);
  color:rgba(248,243,230,.92);
  text-shadow:0 1px 14px rgba(0,0,0,.5);
  margin-top:22px;
  opacity:0; transform:translateY(20px);
  transition:opacity 1.8s var(--ease-silk) .7s, transform 1.8s var(--ease-silk) .7s;
}
.hero-actions{
  margin-top:40px;
  display:flex; align-items:center; justify-content:center; gap:20px;
  flex-wrap:wrap;
  opacity:0; transform:translateY(20px);
  transition:opacity 1.8s var(--ease-silk) .9s, transform 1.8s var(--ease-silk) .9s;
}
html.site-revealed .hero-emblem,
html.site-revealed .hero-content h1,
html.site-revealed .hero-content .tagline,
html.site-revealed .hero-content .desc,
html.site-revealed .hero-actions{
  opacity:1; transform:translateY(0);
}

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:20; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--cream);
  opacity:0;
  transition:opacity 1.6s var(--ease-silk) 1.2s;
}
html.site-revealed .scroll-cue{ opacity:.85; }
.scroll-cue .line{ width:1px; height:44px; background:linear-gradient(to bottom, rgba(248,243,230,.9), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:linear-gradient(to bottom, transparent, var(--gold-light), transparent);
  animation:scrollDrip 2.1s ease-in-out infinite;
}
.scroll-cue span{ font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; }
@keyframes scrollDrip{ 0%{ top:-100%;} 100%{ top:100%;} }

/* ============================================================
   ABOUT / STORY
   ============================================================ */
#story{
  padding:140px 0 130px;
  background:var(--cream-soft);
}
.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.story-media{
  position:relative;
  border-radius:4px;
  overflow:hidden;
}
.story-media img{
  width:100%; height:560px; object-fit:cover; border-radius:4px;
  transition:transform 1.1s var(--ease-silk);
}
.story-media:hover img{ transform:scale(1.06); }
.story-media-frame{
  position:absolute; inset:20px;
  border:1px solid rgba(230,205,143,.7);
  pointer-events:none;
  border-radius:2px;
}
.story-media-badge{
  position:absolute; left:-30px; bottom:-30px;
  background:var(--forest-deep); color:var(--cream);
  padding:26px 30px; border-radius:3px;
  box-shadow:0 20px 46px -12px rgba(10,23,16,.5);
  max-width:230px;
}
.story-media-badge .num{ font-family:var(--font-display); font-size:36px; color:var(--gold-light); line-height:1; }
.story-media-badge p{ font-size:12px; letter-spacing:.04em; margin-top:8px; color:rgba(248,243,230,.82); line-height:1.6; }

.story-text p{ font-size:16.5px; line-height:1.95; color:var(--ink-soft); margin-top:20px; }
.story-list{ margin-top:34px; display:flex; flex-direction:column; gap:16px; }
.story-list li{ display:flex; align-items:baseline; gap:14px; font-size:15px; color:var(--ink-soft); }
.story-list li::before{ content:'—'; color:var(--gold-deep); font-weight:600; }
.story-cta{ margin-top:40px; }

/* ============================================================
   EXPERIENCE / AMENITIES
   ============================================================ */
#experience{
  padding:130px 0;
  background:var(--forest-deep);
  color:var(--cream);
}
#experience .section-head{ text-align:center; max-width:640px; margin:0 auto 70px; }
#experience .section-sub{ margin-left:auto; margin-right:auto; color:rgba(248,243,230,.72); }
#experience .eyebrow{ justify-content:center; }
#experience h2{ color:var(--cream); }

.exp-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:rgba(230,205,143,.14);
}
.exp-card{
  position:relative;
  background:var(--forest-deep);
  padding:48px 38px;
  transition:background .5s var(--ease-silk), transform .45s var(--ease-silk), box-shadow .45s var(--ease-silk);
}
.exp-card:hover{
  background:var(--forest);
  transform:scale(1.035);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.5);
  z-index:2;
}
.exp-card .ic{
  width:52px; height:52px; margin-bottom:26px;
  color:var(--gold-light);
}
.exp-card .ic svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.1; }
.exp-card h3{ color:var(--cream); font-size:22px; margin-bottom:12px; }
.exp-card p{ font-size:14.5px; line-height:1.85; color:rgba(248,243,230,.68); }

.exp-feature{
  margin-top:2px;
  display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--forest-deep);
}
.exp-feature-media{ height:100%; min-height:420px; overflow:hidden; }
.exp-feature-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-silk); }
.exp-feature-media:hover img{ transform:scale(1.06); }
.exp-feature-text{ padding:60px; display:flex; flex-direction:column; justify-content:center; }
.exp-feature-text h3{ color:var(--cream); font-size:30px; margin-bottom:16px; }
.exp-feature-text p{ color:rgba(248,243,230,.72); line-height:1.9; font-size:15.5px; }

/* ============================================================
   ETHOS — full-bleed labelled tile grid, each tile linking out to
   its own page. Deliberately edge-to-edge (no .container) so the
   images read as a single continuous band, distinct from every
   other section on the page.
   ============================================================ */
#ethos{ padding:120px 0 0; background:var(--cream-soft); }
.ethos-head{ text-align:center; padding:0 32px 56px; }
.ethos-head .eyebrow::before{ display:none; }
.ethos-head .section-title{ font-family:var(--font-royal); letter-spacing:.06em; }
.ethos-tagline{
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:14px;
}
.ethos-divider{
  width:1px; height:34px; background:var(--gold);
  margin:28px auto 0;
}
.ethos-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:280px;
}
.ethos-tile{
  position:relative; overflow:hidden;
  display:block;
  background:var(--forest-deep);
  transition:transform .5s var(--ease-silk), box-shadow .5s var(--ease-silk);
}
.ethos-tile:hover{
  transform:scale(1.025);
  box-shadow:0 28px 56px -16px rgba(0,0,0,.55);
  z-index:3;
}
.ethos-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-silk), filter .6s;
  filter:saturate(1.02) brightness(.82);
}
.ethos-tile:hover img{ transform:scale(1.08); filter:saturate(1.05) brightness(.7); }
.ethos-tile::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,10,8,.55) 0%, rgba(6,10,8,.15) 55%, rgba(6,10,8,.35) 100%);
}
.ethos-tile-label{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  font-family:var(--font-royal); font-weight:600;
  font-size:15px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cream);
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.ethos-tile-label::after{
  content:'';
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%) scaleX(0);
  width:28px; height:1px; background:var(--gold-light);
  transition:transform .5s var(--ease-silk);
}
.ethos-tile:hover .ethos-tile-label::after{ transform:translateX(-50%) scaleX(1); }

/* ============================================================
   GALLERY
   ============================================================ */
#gallery{ padding:130px 0; background:var(--cream-soft); }
.gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:56px; flex-wrap:wrap; }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:205px;
  grid-auto-flow:dense;
  gap:0;
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:0;
  cursor:url('../img/cursor-peak.png?v=2') 16 4, pointer;
  background:var(--forest-deep);
  transition:transform .5s var(--ease-silk), box-shadow .5s var(--ease-silk);
}
.gallery-item:hover{
  transform:scale(1.03);
  box-shadow:0 26px 54px -14px rgba(0,0,0,.5);
  z-index:3;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-silk), filter .6s;
  filter:saturate(1.02);
}
.gallery-item:hover img{ transform:scale(1.09); }
.gallery-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,20,14,.65), transparent 46%);
  opacity:0; transition:opacity .5s;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item .gtag{
  position:absolute; left:18px; bottom:16px; z-index:2;
  color:var(--cream); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:all .5s var(--ease-silk);
}
.gallery-item:hover .gtag{ opacity:1; transform:translateY(0); }
.gallery-item .expand-ic{
  position:absolute; top:16px; right:16px; z-index:2; width:30px; height:30px;
  border:1px solid rgba(248,243,230,.55); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--cream); opacity:0; transform:scale(.7); transition:all .4s var(--ease-silk);
}
.gallery-item:hover .expand-ic{ opacity:1; transform:scale(1); }
.gallery-item .expand-ic svg{ width:13px; height:13px; }

.g-feature{ grid-column:span 2; grid-row:span 2; }
.g-wide{ grid-column:span 2; }
.g-tall{ grid-row:span 2; }

/* lightbox */
#lightbox{
  position:fixed; inset:0; z-index:3000;
  background:rgba(6,12,9,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease-silk), visibility .5s;
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img{ max-width:88vw; max-height:82vh; border-radius:3px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
#lightbox .lb-close, #lightbox .lb-prev, #lightbox .lb-next{
  position:absolute; color:var(--cream); background:rgba(255,255,255,.08);
  border:1px solid rgba(248,243,230,.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; transition:background .3s, transform .3s;
}
#lightbox .lb-close:hover{ background:rgba(255,255,255,.18); transform:scale(1.14); }
#lightbox .lb-prev:hover, #lightbox .lb-next:hover{ background:rgba(255,255,255,.18); transform:translateY(-50%) scale(1.14); }
#lightbox .lb-close{ top:28px; right:32px; }
#lightbox .lb-prev{ left:24px; top:50%; transform:translateY(-50%); }
#lightbox .lb-next{ right:24px; top:50%; transform:translateY(-50%); }
#lightbox .lb-close svg, #lightbox .lb-prev svg, #lightbox .lb-next svg{ width:18px; height:18px; }
#lightbox .lb-caption{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  color:rgba(248,243,230,.8); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}

/* ============================================================
   REVIEWS
   ============================================================ */
#reviews{
  padding:130px 0;
  background:var(--forest-deep);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
#reviews::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 15% 15%, rgba(201,162,78,.1), transparent 55%),
             radial-gradient(ellipse at 88% 85%, rgba(201,162,78,.09), transparent 50%);
  pointer-events:none;
}
.reviews-head{ position:relative; z-index:2; text-align:center; max-width:600px; margin:0 auto 56px; }
#reviews .section-title{ color:var(--cream); }
#reviews .section-sub{ color:rgba(248,243,230,.68); margin-left:auto; margin-right:auto; }

.reviews-slideshow{ position:relative; z-index:2; }
.reviews-viewport{
  overflow:hidden;
  max-width:760px;
  margin:0 auto;
  border:1px solid rgba(230,205,143,.14);
}
.reviews-track{
  display:flex;
  transition:transform .7s var(--ease-silk);
}
.review-card{
  position:relative;
  flex:0 0 100%;
  width:100%;
  background:var(--forest-deep);
  padding:56px 48px 44px;
  margin:0;
  box-sizing:border-box;
}
/* static "view all" grid — the slideshow track becomes a plain grid, the
   two clones (needed only for the seamless loop) drop out, and the
   controls/toggle-only-visible-in-slideshow-mode hide */
.reviews-slideshow.static-view .reviews-viewport{ overflow:visible; border:none; max-width:none; }
.reviews-slideshow.static-view .reviews-track{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(230,205,143,.14);
}
.reviews-slideshow.static-view .review-card{ flex:none; width:auto; }
.reviews-slideshow.static-view .review-card.is-clone{ display:none; }
.reviews-slideshow.static-view .reviews-controls{ display:none; }

.quote-mark{
  position:absolute; top:10px; left:44px;
  font-family:var(--font-display); font-size:80px; line-height:1;
  color:var(--gold-deep); opacity:.55;
}
.stars{ display:flex; gap:4px; color:var(--gold-light); margin-bottom:20px; }
.stars svg{ width:14px; height:14px; }
.review-card blockquote{
  margin:0; font-family:var(--font-display); font-style:italic;
  font-size:19px; line-height:1.75; color:var(--cream);
}
.review-card figcaption{ margin-top:26px; display:flex; flex-direction:column; gap:4px; }
.review-card .name{ font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:.04em; color:var(--gold-light); }
.review-card .trip{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(248,243,230,.5); }

.reviews-controls{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:32px;
}
.review-arrow{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(230,205,143,.35);
  background:transparent; color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, transform .35s var(--ease-silk);
}
.review-arrow svg{ width:16px; height:16px; }
.review-arrow:hover{ background:rgba(230,205,143,.12); border-color:var(--gold-light); transform:scale(1.12); }
.reviews-dots{ display:flex; align-items:center; gap:9px; }
.reviews-dot{
  width:8px; height:8px; border-radius:50%; padding:0;
  background:rgba(248,243,230,.28); border:none;
  transition:background .3s, transform .3s var(--ease-silk);
}
.reviews-dot:hover{ background:rgba(248,243,230,.5); }
.reviews-dot.active{ background:var(--gold-light); transform:scale(1.3); }

.reviews-toggle{ display:flex; margin:40px auto 0; }

/* ============================================================
   LOCATION
   ============================================================ */
#location{ padding:130px 0; background:var(--cream-warm); }
.loc-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; align-items:stretch; }
.loc-info p{ font-size:16px; line-height:1.95; color:var(--ink-soft); margin-top:18px; }
.loc-points{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.loc-point .label{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); font-weight:500; }
.loc-point .value{ font-family:var(--font-display); font-size:21px; color:var(--forest-deep); margin-top:8px; }
.loc-map{ border-radius:4px; overflow:hidden; min-height:420px; box-shadow:0 30px 70px -20px rgba(19,32,24,.25); position:relative; }
.loc-map iframe{ width:100%; height:100%; min-height:420px; border:0; filter:saturate(.85) contrast(1.02); }

/* ============================================================
   ENQUIRY / CONTACT
   ============================================================ */
#enquire{
  padding:140px 0 130px;
  background:var(--forest-deepest);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
#enquire::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 20%, rgba(201,162,78,.09), transparent 55%),
             radial-gradient(ellipse at 85% 80%, rgba(201,162,78,.08), transparent 50%);
  pointer-events:none;
}
.enquire-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; position:relative; z-index:2; }
#enquire .section-title{ color:var(--cream); }
#enquire .section-sub{ color:rgba(248,243,230,.68); }
.enquire-contacts{ margin-top:44px; display:flex; flex-direction:column; gap:26px; }
.contact-row{ display:flex; align-items:center; gap:18px; }
.contact-row .ic{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(230,205,143,.4);
  display:flex; align-items:center; justify-content:center; color:var(--gold-light);
  transition:transform .35s var(--ease-silk), border-color .35s;
}
.contact-row:hover .ic{ transform:scale(1.12); border-color:var(--gold-light); }
.contact-row .ic svg{ width:19px; height:19px; }
.contact-row .label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(248,243,230,.55); }
.contact-row .value{ font-size:17px; margin-top:3px; color:var(--cream); }
.contact-row a.value:hover{ color:var(--gold-light); }

.weather-badge{
  /* hidden by default; JS reveals it only once live data has actually
     loaded, so a failed/offline fetch just means the widget never
     appears rather than sitting stuck on placeholder dashes */
  display:none;
  width:fit-content;
  align-items:center; gap:16px;
  padding:11px 28px;
  margin-bottom:26px;
  border:1px solid rgba(201,172,106,.4);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.weather-badge.hw-ready{ display:inline-flex; }
.hw-item{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light);
  text-shadow:0 0 14px rgba(232,208,158,.5), 0 1px 6px rgba(0,0,0,.5);
}
.hw-icon{ width:15px; height:15px; flex-shrink:0; opacity:.9; }
.hw-sep{ width:1px; height:14px; background:rgba(201,172,106,.4); }
.hw-aqi-label{
  font-family:var(--font-body); font-weight:500; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-pale); opacity:.85;
}
.hw-place{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:13px; letter-spacing:.02em;
  color:rgba(248,243,230,.75);
  padding-left:14px; border-left:1px solid rgba(201,172,106,.4);
}
@media (max-width:560px){
  .weather-badge{ gap:10px; padding:10px 18px; flex-wrap:wrap; }
  .hw-place{ display:none; }
}

.enquire-form{
  background:rgba(248,243,230,.04);
  border:1px solid rgba(230,205,143,.18);
  border-radius:6px;
  padding:48px;
  backdrop-filter:blur(6px);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ margin-bottom:22px; position:relative; }
.field label{
  display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(248,243,230,.55); margin-bottom:10px;
}
.field input, .field textarea, .field select{
  width:100%; background:rgba(255,255,255,.03);
  border:1px solid rgba(230,205,143,.28);
  color:var(--cream); padding:14px 16px; font-size:15px; border-radius:3px;
  transition:border-color .35s, background .35s;
}
.field select option{ color:#111; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(248,243,230,.34); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--gold-light); background:rgba(255,255,255,.06);
}
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:12.5px; color:rgba(248,243,230,.45); margin-top:18px; line-height:1.7; }
.form-status{ margin-top:16px; font-size:14px; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ color:var(--gold-light); }
.form-status.err{ color:#e2a5a5; }

/* honeypot */
.hp-field{ position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; }

/* ============================================================
   FLOATING WHATSAPP BUTTON — present on every page (landing +
   subpages), always visible from load rather than scroll-gated
   like the two buttons below, since it's the lowest-friction way
   to reach us and shouldn't need any scrolling to appear. Back to
   the stock WhatsApp brand mark (recognisable at a glance) rather
   than a site-themed badge, just sized down a little; sits in the
   middle of the floating stack, between Enquire (bottom) and back-
   to-top (top).
   ============================================================ */
#whatsapp-float{
  position:fixed; right:28px; bottom:92px; z-index:920;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.85);
  animation:whatsappIn .6s var(--ease-silk) 1.2s forwards;
  transition:transform .4s var(--ease-silk);
}
@keyframes whatsappIn{ to{ opacity:1; transform:scale(1); } }
#whatsapp-float:hover{ transform:scale(1.12); }
#whatsapp-float svg{
  width:46px; height:46px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));
}

/* ============================================================
   FLOATING ENQUIRE BUTTON — bottom of the floating stack
   ============================================================ */
#float-enquire{
  position:fixed; right:28px; bottom:28px; z-index:900;
  display:flex; align-items:center; gap:10px;
  padding:16px 22px;
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color:var(--forest-deepest);
  border-radius:40px;
  box-shadow:0 14px 34px -8px rgba(0,0,0,.42);
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  transition:transform .4s var(--ease-silk), box-shadow .4s var(--ease-silk), opacity .5s;
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
}
#float-enquire.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#float-enquire:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 20px 42px -8px rgba(0,0,0,.5); }
#float-enquire svg{ width:16px; height:16px; }

/* ============================================================
   MODAL
   ============================================================ */
#modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(6,12,9,.72);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease-silk), visibility .45s;
  padding:24px;
}
#modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{
  width:100%; max-width:520px;
  background:var(--cream-soft);
  border-radius:6px;
  padding:46px 44px 40px;
  position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  transform:translateY(24px) scale(.97); transition:transform .5s var(--ease-fog);
}
#modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:20px; right:20px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--forest-deep); border:1px solid rgba(19,32,24,.18);
  transition:background .3s, transform .3s var(--ease-silk);
}
.modal-close:hover{ background:rgba(19,32,24,.06); transform:scale(1.14); }
.modal-close svg{ width:14px; height:14px; }
.modal-box h3{ font-size:28px; color:var(--forest-deep); margin-bottom:8px; }
.modal-box .modal-sub{ font-size:14px; color:var(--ink-soft); margin-bottom:26px; }
.modal-box .field label{ color:var(--ink-soft); }
.modal-box .field input, .modal-box .field textarea{
  background:rgba(19,32,24,.03); border:1px solid rgba(19,32,24,.15); color:var(--ink);
}
.modal-box .field input::placeholder, .modal-box .field textarea::placeholder{ color:rgba(19,32,24,.35); }
.modal-box .field input:focus, .modal-box .field textarea:focus{ border-color:var(--gold-deep); background:#fff; }
.modal-box .btn{ width:100%; }

/* ============================================================
   SECONDARY PAGES (pages/*.html) — banner + body used by every
   Our Ethos tile's destination page.
   ============================================================ */
.page-hero{
  position:relative;
  height:46vh; min-height:380px; max-height:520px;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
  background:var(--forest-deepest);
}
.page-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.68) saturate(1.05);
}
.page-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,10,8,.8) 0%, rgba(6,10,8,.2) 55%, rgba(6,10,8,.4) 100%);
}
.page-hero-content{
  position:relative; z-index:2; text-align:center; color:var(--cream);
  padding:0 24px 56px; max-width:780px;
}
.page-hero .eyebrow{ justify-content:center; color:var(--gold-light); }
.page-hero .eyebrow::before{ background:var(--gold-light); }
.page-hero h1{
  font-family:var(--font-royal); font-weight:600;
  font-size:clamp(34px,5vw,58px); color:var(--cream);
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.breadcrumb{
  font-family:var(--font-body); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(248,243,230,.65); margin-top:16px;
}
.breadcrumb a{ color:var(--gold-light); }
.breadcrumb a:hover{ text-decoration:underline; }

.page-body{ padding:110px 0; background:var(--cream-soft); }
.page-body .container{ max-width:800px; }
.page-body p{
  font-family:var(--font-body); font-size:17px; line-height:1.95;
  color:var(--ink-soft); margin-top:22px;
}
.page-body p:first-of-type{ margin-top:24px; }
.page-cta{ margin-top:48px; display:flex; gap:18px; flex-wrap:wrap; }

/* wider variant for pages carrying a card grid (e.g. Bird Species)
   rather than a single column of prose */
.page-body.wide .container{ max-width:var(--container); }
.species-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:56px;
}
.species-card{
  position:relative;
  background:var(--white);
  border:1px solid rgba(19,32,24,.08);
  border-radius:4px;
  overflow:hidden;
  transition:transform .45s var(--ease-silk), box-shadow .45s var(--ease-silk);
}
.species-card:hover{
  transform:scale(1.035);
  box-shadow:0 24px 50px -16px rgba(19,32,24,.28);
  z-index:2;
}
.species-card img{ width:100%; height:220px; object-fit:cover; display:block; transition:transform 1.1s var(--ease-silk); }
.species-card:hover img{ transform:scale(1.08); }
.species-card-body{ padding:22px 22px 26px; }
.species-card h3{ font-size:18px; color:var(--forest-deep); margin-bottom:2px; }
.species-card .sci{
  display:block; margin-bottom:12px;
  font-family:var(--font-display); font-style:italic; font-size:13px;
  color:var(--gold-deep);
}
.species-card p{ font-size:14px; line-height:1.75; color:var(--ink-soft); margin-top:0; }
.page-body .species-credit{
  margin-top:36px;
  font-size:12.5px; line-height:1.7;
  color:rgba(69,68,63,.55);
}

@media (max-width:560px){
  .page-hero{ height:52vh; }
  .page-body{ padding:80px 0; }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--forest-deepest);
  color:rgba(248,243,230,.66);
  padding:80px 0 30px;
  position:relative;
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:50px;
  padding-bottom:56px; border-bottom:1px solid rgba(230,205,143,.14);
}
.footer-brand-mark{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.footer-brand-mark img{ height:60px; width:auto; filter:var(--emblem-glow); transition:transform .4s var(--ease-silk); }
.footer-brand-mark:hover img{ transform:scale(1.1) rotate(-3deg); }
.footer-brand-mark .word{
  font-family:var(--font-royal); font-weight:600;
  font-size:22px; letter-spacing:.16em; color:var(--cream);
}
.footer-brand p{ font-size:14px; line-height:1.85; max-width:280px; color:rgba(248,243,230,.55); }
.footer-social{ display:flex; gap:12px; margin-top:22px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(230,205,143,.25);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, transform .35s var(--ease-silk);
}
.footer-social a:hover{ background:rgba(230,205,143,.12); border-color:var(--gold-light); transform:scale(1.15); }
.footer-social svg{ width:15px; height:15px; color:var(--gold-light); }
.footer-col h4{ color:var(--cream); font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; margin-bottom:22px; font-family:var(--font-body); }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a, .footer-col span{ font-size:14.5px; color:rgba(248,243,230,.6); transition:color .3s; }
.footer-col a:hover{ color:var(--gold-light); }
.footer-bottom{
  padding-top:28px; display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; color:rgba(248,243,230,.4); flex-wrap:wrap; gap:12px;
}

#back-to-top{
  position:fixed; right:28px; bottom:152px; z-index:890;
  width:44px; height:44px; border-radius:50%;
  /* solid instead of backdrop-filter — same reasoning as the nav, this
     one's fixed and visible for most of the scroll too */
  background:rgba(15,26,20,.82); border:1px solid rgba(230,205,143,.3);
  color:var(--cream); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .4s var(--ease-silk);
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:hover{ transform:translateY(-3px) scale(1.1); background:rgba(15,26,20,.95); border-color:var(--gold-light); }
#back-to-top svg{ width:16px; height:16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .story-grid, .loc-grid, .enquire-grid{ grid-template-columns:1fr; gap:56px; }
  .exp-feature{ grid-template-columns:1fr; }
  .exp-feature-media{ min-height:320px; }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .g-feature{ grid-column:span 2; }
  .ethos-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; }
  .species-grid{ grid-template-columns:repeat(3,1fr); }
  .reviews-slideshow.static-view .reviews-track{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 860px){
  :root{ --nav-h:76px; }
  .nav-brand img{ height:46px; }
  #site-nav.solid .nav-brand img{ height:42px; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background:var(--forest-deepest);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:0 44px; gap:26px;
    transform:translateX(100%); transition:transform .5s var(--ease-fog);
    z-index:1100;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:15px; }
  .nav-links .btn{ display:inline-flex; margin-top:10px; }
  #nav-toggle{ display:block; }
  .nav-cta .enquire-nav-btn{ display:none; }
  .exp-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; gap:0; }
  .g-feature{ grid-column:span 2; grid-row:span 2; }
  .g-wide{ grid-column:span 2; }
  .ethos-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:210px; }
  .reviews-slideshow.static-view .reviews-track{ grid-template-columns:1fr 1fr; }
  .species-grid{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px 30px; }
  .loc-points{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px){
  .container{ padding:0 22px; }
  #story{ padding:100px 0 90px; }
  #experience, #gallery, #location, #enquire, #reviews{ padding:90px 0; }
  #ethos{ padding:90px 0 0; }
  .exp-grid{ grid-template-columns:1fr; }
  .exp-card{ padding:40px 30px; }
  .review-card{ padding:44px 28px 32px; }
  .quote-mark{ left:28px; }
  .reviews-slideshow.static-view .reviews-track{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:0; }
  .ethos-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:170px; }
  .ethos-tile-label{ font-size:12.5px; letter-spacing:.16em; }
  .species-grid{ grid-template-columns:1fr; }
  .story-media img{ height:380px; }
  .story-media-badge{ left:12px; bottom:-24px; padding:20px 22px; }
  .enquire-form{ padding:32px 26px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  #float-enquire span{ display:none; }
  #float-enquire{ padding:16px; }
  #whatsapp-float{ right:20px; bottom:78px; width:40px; height:40px; }
  #whatsapp-float svg{ width:40px; height:40px; }
  #back-to-top{ right:20px; bottom:130px; }
  #float-enquire{ right:20px; bottom:20px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}