/* ═══════════════════════════════════════════════════════════════
   LAKURI VIEWPOINT RESORT — style.css
   ═══════════════════════════════════════════════════════════════ */

/* ── ANEK DEVANAGARI FONT ──────────────────────────────────── */
@font-face { font-family:"AnekDevanagari"; src:url("assets/fonts/AnekDevanagari/AnekDevanagari-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"AnekDevanagari"; src:url("assets/fonts/AnekDevanagari/AnekDevanagari-Medium.ttf")  format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"AnekDevanagari"; src:url("assets/fonts/AnekDevanagari/AnekDevanagari-SemiBold.ttf")format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"AnekDevanagari"; src:url("assets/fonts/AnekDevanagari/AnekDevanagari-Bold.ttf")    format("truetype"); font-weight:700; font-display:swap; }

/* ── ALGA ITALIC — section headings (English) ──────────────── */
@font-face { font-family:"Alga"; src:url("assets/fonts/Alga/Alga-RegularItalic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }

/* ── TIRO DEVANAGARI ITALIC — section headings (Nepali) ──── */
@font-face { font-family:"TiroDevanagariHindi"; src:url("assets/fonts/TiroDevanagari/TiroDevanagariHindi-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }

/* ── GALLERY GRID — animated track custom properties ─────────
   @property registers row tracks as <percentage> so CSS can
   transition grid-template-rows smoothly. Column tracks use
   inline-style custom properties set by JS (1fr default,
   percentage on expand) — no @property needed for columns. ── */
@property --gr1 { syntax: "<percentage>"; inherits: true; initial-value: 20%; }
@property --gr2 { syntax: "<percentage>"; inherits: true; initial-value: 20%; }
@property --gr3 { syntax: "<percentage>"; inherits: true; initial-value: 20%; }
@property --gr4 { syntax: "<percentage>"; inherits: true; initial-value: 20%; }
@property --gr5 { syntax: "<percentage>"; inherits: true; initial-value: 20%; }
@property --gr6 { syntax: "<percentage>"; inherits: true; initial-value: 16.667%; }

/* ── SECTION HEADINGS — Alga italic (eng) / Tiro italic (nep) */
h2[data-reveal][data-eng],
h3[data-reveal][data-eng],
h3.room-detail-name[data-eng],
.coming-soon-headline[data-eng],
div[data-reveal][data-eng] > h2,
div[data-eng] > h2[data-reveal] {
  font-family: "Alga", serif;
  font-style: italic;
  font-weight: 400;
}
h2[data-reveal][data-nep],
h3[data-reveal][data-nep],
h3.room-detail-name[data-nep],
.coming-soon-headline[data-nep],
div[data-reveal][data-nep] > h2,
div[data-nep] > h2[data-reveal] {
  font-family: "TiroDevanagariHindi", serif;
  font-style: italic;
  font-weight: 400;
}

/* ── RESET & BASE ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Lists: strip browser-default indent/markers/margins; per-list opt-in */
ul, ol { margin: 0; padding: 0; list-style: none; }
html { overscroll-behavior-y: contain; }
body {
  margin: 0; padding: 0;
  font-family: "AnekDevanagari", sans-serif;
  font-size: 16px; min-height: 100vh;
  isolation: isolate; /* keeps the page-level mountain backdrop (z-index:-1) inside body */
}

/* focus-visible: keyboard focus indicator */
:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; }

/* ── PAGE FADE-IN ──────────────────────────────────────────── */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.page-fadein { animation: fadeIn 0.4s ease-out both; }

/* ── TEXT ENTRY REVEAL (GLOBAL) ─────────────────────────────
   Scroll-triggered fade-up for text tagged [data-reveal].
   script.js §22 adds .revealed once per element and staggers
   same-parent siblings ~100ms apart. The html.js gate keeps
   content visible when JS is unavailable; reduced motion
   renders everything statically. ────────────────────────── */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
html.js [data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  /* Hero page-wrapper renders statically too (entrance, not in the keep-list) */
  .page-fadein { animation: none; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   TOP-LEFT NAV — plain text, top-aligned with toggle
   ══════════════════════════════════════════════════════════════ */
#vert-nav {
  position: fixed;
  top: 14px;           /* same vertical band as lang-toggle */
  left: 22px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 0px;            /* tight stacking like the screenshot */
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#vert-nav.nav-hidden { opacity:0; visibility:hidden; pointer-events:none; }

.nav-item {
  background: none; border: none; padding: 4px 0;
  cursor: pointer; outline: none;
  display: flex; align-items: center;
  text-align: left;
  text-decoration: none;
}
/* No dots — hide them */
.nav-dot { display: none; }

.nav-label {
  font-family: "AnekDevanagari", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  white-space: nowrap;
  transition: color 0.25s ease, transform 0.25s ease, letter-spacing 0.25s ease;
  display: inline-block;
}
.nav-item:hover .nav-label,
.nav-item.active .nav-label {
  color: rgba(255,255,255,1);
  transform: scale(1.06);
  letter-spacing: 0.20em;
}
/* Nepali nav: +2px optical compensation, NO letter-spacing */
body.nep .nav-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}
body.nep .nav-item:hover .nav-label,
body.nep .nav-item.active .nav-label,
body.nep .nav-item.current .nav-label {
  letter-spacing: 0;
}

/* Current-page indicator — same visual as active */
.nav-item.current .nav-label {
  color: rgba(255,255,255,1);
  transform: scale(1.06);
  letter-spacing: 0.20em;
}

/* ── HAMBURGER (mobile) ────────────────────────────────────── */
#hamburger {
  display: none;
  position: fixed; top: 18px; left: 18px;
  z-index: 1100;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15,40,20,0.55);
  border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: background 0.3s, transform 0.2s;
}
#hamburger span { display:block; width:18px; height:1.5px; background:#fff; border-radius:2px; transition:transform 0.3s ease,opacity 0.3s ease; }
#hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity:0; }
#hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

#mobile-nav-drawer {
  display: none; position:fixed; inset:0; z-index:1050;
  background: rgba(17,71,40,0.93);
  flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  opacity:0; transition:opacity 0.3s ease;
}
#mobile-nav-drawer.open { opacity:1; }
.mob-nav-item {
  font-family:"AnekDevanagari",sans-serif; font-size:1.1rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.75);
  cursor:pointer; background:none; border:none; text-align:center; line-height:1.5;
  transition:color 0.2s;
}
.mob-nav-item:hover { color:#fff; }
.mob-nav-item.current { color:#fff; pointer-events: none; }

body.nep .mob-nav-item { letter-spacing: 0; font-size: 1.1rem; }

/* ══════════════════════════════════════════════════════════════
   LANGUAGE TOGGLE
   ══════════════════════════════════════════════════════════════ */
.lang-toggle {
  position:fixed; top:18px; right:18px; z-index:1000;
  background:rgba(15,40,20,0.55);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.32);
  box-shadow:0 4px 18px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.18);
  border-radius:999px; display:flex; align-items:center; padding:4px;
  cursor:pointer; user-select:none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.lang-toggle.nav-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.lang-toggle span {
  font-size:12px; font-weight:700; letter-spacing:0.1em;
  padding:6px 14px; border-radius:999px;
  color:rgba(255,255,255,0.55); transition:color 0.3s ease;
  position:relative; z-index:2; line-height:1;
}
.lang-toggle::before {
  content:''; position:absolute; top:4px; left:4px;
  width:calc(50% - 4px); height:calc(100% - 8px); border-radius:999px;
  background:linear-gradient(175deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.04) 40%,rgba(0,0,0,0.10) 100%),rgba(22,101,52,0.92);
  box-shadow:0 2px 8px rgba(0,0,0,0.30),inset 0 1px 0 rgba(255,255,255,0.30);
  transition:left 0.35s cubic-bezier(0.34,1.2,0.64,1); z-index:1;
}
.lang-toggle.nep-active::before  { left:calc(50%); }
.lang-toggle .lbl-eng            { color:rgba(255,255,255,0.95); }
.lang-toggle.nep-active .lbl-eng { color:rgba(255,255,255,0.40); }
.lang-toggle .lbl-nep            { color:rgba(255,255,255,0.40); }
.lang-toggle.nep-active .lbl-nep { color:rgba(255,255,255,0.95); }

/* ══════════════════════════════════════════════════════════════
   GLASS PILL & LINK BUTTONS
   ══════════════════════════════════════════════════════════════ */
.glass-pill {
  isolation: isolate;
  background:linear-gradient(160deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.08) 100%);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.30);
  box-shadow:0 8px 32px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.45),inset 0 -1px 0 rgba(0,0,0,0.10);
}
.quick-links-label-eng { font-size:0.78rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.96);text-shadow:0 2px 4px rgba(0,50,0,0.4);margin-bottom:1.1rem; }
.quick-links-label-nep { font-size:0.78rem;font-weight:700;letter-spacing:0;color:rgba(255,255,255,0.96);text-shadow:0 2px 4px rgba(0,50,0,0.4);margin-bottom:1.1rem; }

/* ── Shared entrance animation (fade + slide-up) ───────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideUpStagger {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── Per-pill stagger (default) ──────────────────────────── */
.animate-fade-slide .cta-glass-btn,
.animate-fade-slide .link-btn,
.animate-fade-slide .rooms-dynamic-view-more {
  opacity: 0;
  transform: translateY(30px);
}

/* ── Container-level (opt-in via .animate-container) ──────── */
.animate-fade-slide.animate-container {
  transform: translateY(30px);
  will-change: transform;
}
.animate-fade-slide.animate-container .cta-glass-btn,
.animate-fade-slide.animate-container .link-btn,
.animate-fade-slide.animate-container .rooms-dynamic-view-more {
  opacity: 1;
  transform: none;
}

/* ── Pill entrance (fade + slide-up) — plays regardless of motion
   preference. Design policy: CTA pill / link-btn / footer-pill rooms
   and arrows keep their entrance under prefers-reduced-motion. ──── */
.animate-fade-slide:not(.animate-container).animating .cta-glass-btn,
.animate-fade-slide:not(.animate-container).animating .link-btn,
.animate-fade-slide:not(.animate-container).animating .rooms-dynamic-view-more {
  animation: fadeSlideUp 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) both;
  animation-delay: calc(0.4s + var(--stagger, 0s));
}

.animate-fade-slide.animate-container.animating {
  animation: fadeSlideUp 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) 0.4s both;
}

/* Hover overrides (beat animation fill + normal transform) */
.animate-fade-slide .cta-glass-btn:hover {
  transform: scale(1.05) translateY(-2px) !important;
}
.animate-fade-slide .link-btn:hover {
  transform: scale(1.12) translateY(-3px) !important;
}
/* ── End shared entrance animation ─────────────────────────── */

/* ── Slide-from-left entrance (CTA links) ──────────────────── */
@keyframes fadeSlideFromLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Hidden until triggered — overridden by animation fill when .animating is added.
   Entrances play regardless of motion preference: arrow links keep their
   slide-in under prefers-reduced-motion (design policy). */
.animate-fade-left .rooms-dynamic-view-more {
  opacity: 0;
  transform: translateX(-28px);
}

.animate-fade-left.animating .rooms-dynamic-view-more {
  animation:
    fadeSlideFromLeft 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) 0.4s both,
    viewMoreBob 2.5s ease-in-out 1.8s infinite;
}
/* ── End slide-from-left entrance ──────────────────────────── */

/* ── Fade-up entrance (centered CTA links) ──────────────────
   Alignment rule: centered links fade up from the centre instead
   of sliding from the left. Used where a view-more row sits
   inside a centered block (e.g. what-we-offer). ─────────────── */
.animate-fade-up .rooms-dynamic-view-more {
  opacity: 0;
  transform: translateY(30px);
}

.animate-fade-up.animating .rooms-dynamic-view-more {
  animation:
    fadeSlideUp 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) 0.4s both,
    viewMoreBob 2.5s ease-in-out 1.8s infinite;
}
/* ── End fade-up entrance ──────────────────────────────────── */

/* ── Quick Links staggered child animation ────────────────── */
.quick-links-wrapper.animate-fade-slide.animate-container .glass-pill > .link-btn {
  opacity: 0;
  transform: translateY(12px);
}
.quick-links-wrapper.animate-fade-slide.animate-container.animating .glass-pill > .link-btn:nth-child(1) { animation: fadeSlideUpStagger 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) both; animation-delay: 0.48s; }
.quick-links-wrapper.animate-fade-slide.animate-container.animating .glass-pill > .link-btn:nth-child(2) { animation: fadeSlideUpStagger 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) both; animation-delay: 0.60s; }
.quick-links-wrapper.animate-fade-slide.animate-container.animating .glass-pill > .link-btn:nth-child(3) { animation: fadeSlideUpStagger 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) both; animation-delay: 0.72s; }
.quick-links-wrapper.animate-fade-slide.animate-container.animating .glass-pill > .link-btn:nth-child(4) { animation: fadeSlideUpStagger 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) both; animation-delay: 0.84s; }
.quick-links-wrapper.animate-fade-slide.animate-container.animating .glass-pill > .link-btn:nth-child(5) { animation: fadeSlideUpStagger 1.4s cubic-bezier(0.22, 0.85, 0.35, 1) both; animation-delay: 0.96s; }
@media (prefers-reduced-motion: reduce) {
  .quick-links-wrapper.animate-fade-slide.animate-container .glass-pill > .link-btn {
    opacity: 1;
    transform: none;
  }
}
/* ── End quick links stagger ───────────────────────────────── */

.link-btn {
  background:linear-gradient(175deg,rgba(255,255,255,0.20) 0%,rgba(255,255,255,0.06) 40%,rgba(0,0,0,0.08) 100%),rgba(255,255,255,0.10);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:0 4px 12px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.40),inset 0 -1px 2px rgba(0,0,0,0.10);
  transition:transform 0.3s cubic-bezier(0.25,1,0.5,1),background 0.3s ease,box-shadow 0.3s ease;
  will-change:transform; text-decoration:none; display:flex; align-items:center; justify-content:center;
}
.link-btn:hover {
  transform:scale(1.12) translateY(-3px);
  background:linear-gradient(175deg,rgba(255,255,255,0.28) 0%,rgba(255,255,255,0.06) 40%,rgba(0,0,0,0.12) 100%),rgba(22,101,52,0.92);
  border-color:rgba(255,255,255,0.38);
  box-shadow:0 10px 28px rgba(0,0,0,0.32),inset 0 1px 0 rgba(255,255,255,0.55),inset 0 -2px 4px rgba(0,0,0,0.20);
}
.link-btn:active { transform:scale(0.96) translateY(1px); }

/* ── SCROLL ARROWS ─────────────────────────────────────────── */
.scroll-arrow {
  margin-top:3rem; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.30);
  color:rgba(255,255,255,0.8); cursor:pointer;
  transition:background 0.3s ease,color 0.3s ease;
  animation:arrowBounce 2.4s ease-in-out infinite; will-change:transform;
}
.scroll-arrow:hover { background:rgba(255,255,255,0.22); color:#fff; }

.hero-scroll-label {
  margin: 1rem 0 0;
  font-family: "AnekDevanagari", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  user-select: none;
  transition: color 0.25s ease;
  /* Static label to prevent overlap with bobbing arrow */
}
.hero-scroll-label:hover { color: rgba(255,255,255,0.95); }
body.nep .hero-scroll-label { letter-spacing: 0; }

.scroll-arrow-up {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.28);
  color:rgba(255,255,255,0.75); cursor:pointer;
  transition:background 0.3s ease,color 0.3s ease;
  animation:arrowBounceUp 2.4s ease-in-out infinite; will-change:transform;
}
.scroll-arrow-up:hover { background:rgba(255,255,255,0.22); color:#fff; }

@keyframes arrowBounce   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(8px)}  }
@keyframes arrowBounceUp { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-8px)} }

/* ── CTA BUTTONS ───────────────────────────────────────────── */
.cta-glass-btn {
  background:linear-gradient(160deg,rgba(22,101,52,0.55) 0%,rgba(22,101,52,0.35) 100%);
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:0 6px 24px rgba(0,0,0,0.20),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(0,0,0,0.10);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform 0.3s ease-out,background 0.3s ease-out,box-shadow 0.3s ease-out;
  will-change:transform; text-decoration:none; color:white;
}
.cta-glass-btn:hover {
  background:linear-gradient(160deg,rgba(22,101,52,0.85) 0%,rgba(22,101,52,0.65) 100%);
  box-shadow:0 10px 32px rgba(0,0,0,0.30),inset 0 1px 0 rgba(255,255,255,0.55),inset 0 -2px 4px rgba(0,0,0,0.20);
  transform:scale(1.05) translateY(-2px);
}
.cta-glass-btn:active { transform:scale(0.98) translateY(1px); }
.cta-row { display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem;margin-top:3.5rem; }

/* ══════════════════════════════════════════════════════════════
   POLAROID CARDS (About section)
   ══════════════════════════════════════════════════════════════ */
.polaroid { will-change:transform,opacity; }
.polaroid-inner {
  background:#fff; padding:13px; border-radius:4px;
  box-shadow:0 6px 20px rgba(0,0,0,0.18),0 2px 6px rgba(0,0,0,0.10),inset 0 0 0 1px rgba(0,0,0,0.04);
  width:270px; cursor:pointer;
}
.polaroid-photo { width:100%;height:270px;object-fit:cover;display:block;border-radius:2px; }

/* ── About section polaroid-stack wrapper — needs position:relative so bg sits inside ── */
.polaroid-stack {
  position: relative;
  /* Allow the bg image to overflow the stack's clipping box */
  overflow: visible !important;
}

/* Background framing image: centered behind the polaroid cluster, always slightly larger.
   The stack is ~260px wide at desktop. We want the bg to be ~40% wider so its
   edges are always visible around the foreground photos.
   Using vw-clamped sizing so it shrinks proportionally as the screen narrows. */
.about-bg-img {
  position: absolute;
  top: 50%;
  left: 50%;

  /* ~1.4× the stack width, responsive. At 260px stack: bg ≈ 364px.
     clamp(min, preferred, max) keeps it proportional at every breakpoint. */
  width: clamp(340px, 60vw, 580px);
  height: auto;
  max-width: none !important;

  transform: translate(-50%, -50%);

  /* Strictly behind the polaroid cards (z-index 11–13) */
  z-index: 1;

  /* Fade-in on scroll */
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s cubic-bezier(0.23,1,0.32,1);
  will-change: opacity;
}
.about-bg-img.bg-visible { opacity: 0.6; }

.about-img { opacity:0;filter:blur(3px);margin-top:30px; transition:opacity 0.7s ease-out,filter 0.7s ease-out,margin-top 0.7s ease-out; }
.about-img.img-visible { opacity:1;filter:blur(0);margin-top:0; }
.delay-0 { transition-delay:0s; }
.delay-1 { transition-delay:0.25s; }
.delay-2 { transition-delay:0.5s; }

@keyframes bob1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes bob2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes bob3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.do-bob-1 .polaroid-inner { animation:bob1 5.0s ease-in-out infinite; }
.do-bob-2 .polaroid-inner { animation:bob2 6.5s ease-in-out infinite; }
.do-bob-3 .polaroid-inner { animation:bob3 4.2s ease-in-out infinite; }

/* ── Card-Pick Hover Interaction ────────────────────────────── */
.polaroid-inner {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.polaroid-stack:hover .polaroid-inner {
  animation: none;
}

.polaroid-stack:hover .about-img:hover .polaroid-inner {
  transform: translateY(-14px) scale(1.06);
}

.polaroid-stack:hover:has(.about-img:hover) .about-img:not(:hover) .polaroid-inner {
  transform: translateY(6px);
}

/* ── About text paragraph entrance animation ────────────────────
   Alignment rule: left-aligned content slides in from the LEFT;
   centered content fades up from the centre. The centered
   .about-text-content variants (e.g. what-we-offer) are excluded
   here and use the global [data-reveal] fade-up instead. ─────── */
@media (prefers-reduced-motion: no-preference) {
  .about-text-content:not(.text-center) p {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  }
  .about-text-content:not(.text-center) p.about-revealed {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ══════════════════════════════════════════════════════════════
   OUR ROOMS — SECTION (between hero and about)
   ══════════════════════════════════════════════════════════════ */
/* Smooth edge opacity transition using a mask to let the top section blend in */
#rooms::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  /* Opacity mask: fully transparent at the very top, smoothing into full opacity */
  mask-image: linear-gradient(to bottom, transparent 0%, black 150px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 150px);
  z-index: 1;
  pointer-events: none;
}

/* Ensure content stays above the mask */
#rooms > * {
  position: relative;
  z-index: 5;
}

/* Lighter CTA style specifically for the Rooms section */
#rooms .cta-glass-btn {
  background: linear-gradient(160deg, rgba(74, 222, 128, 0.65) 0%, rgba(34, 197, 94, 0.45) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
#rooms .cta-glass-btn:hover {
  background: linear-gradient(160deg, rgba(74,222,128,0.85) 0%, rgba(34,197,94,0.65) 100%);
  box-shadow: 0 10px 32px rgba(34, 197, 94, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

/* CTAs inside the static booking overlay — base dark-surface styling (matches About Us)
   Desktop only: on mobile the pills sit on the dark section background and use #rooms .cta-glass-btn */
@media (min-width: 1024px) {
  #rooms .rooms-booking-card-section .cta-glass-btn {
    background: linear-gradient(160deg, rgba(22,101,52,0.55) 0%, rgba(22,101,52,0.35) 100%);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 6px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.10);
  }
  #rooms .rooms-booking-card-section .cta-glass-btn:hover {
    background: linear-gradient(160deg, rgba(22,101,52,0.85) 0%, rgba(22,101,52,0.65) 100%);
    box-shadow: 0 10px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.20);
  }
}

#rooms {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 7rem 1.5rem 8rem;
  background: #1c4a2c;
  background: linear-gradient(180deg, #0F4728 0%, #1c4a2c 55%, #225a35 100%);
}

/* Ambient gallery background — low-opacity cross-fade on hover */
#rooms > .rooms-ambient-bg {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 1 !important;
  transition: opacity 0.45s ease;
  will-change: opacity;
}
#rooms > .rooms-ambient-bg.active {
  opacity: 0.65;
}
/* Second layer sits on top for crossfade */
#rooms > .rooms-ambient-bg2 {
  z-index: 2 !important;
}
@media (min-width: 640px) {
  #rooms { padding: 8rem 3rem 9rem; }
  #rooms .rooms-title { font-size: 2.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   WHAT WE OFFER — Ambient Slideshow Layer
   ══════════════════════════════════════════════════════════════ */
/* Dual-layer crossfade: two overlapping elements, one fades in while the other fades out */
#offers > .offers-ambient-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.8s ease;
  will-change: opacity;
}
#offers > .offers-ambient-bg.active {
  opacity: 0.65;
}

/* ── eyebrow / title / divider: centered above the layout ── */
#rooms .rooms-eyebrow {
  color: rgba(134,239,172,0.85);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; text-align: center; margin-bottom: 0.5rem;
  position: relative; z-index: 5;
}
body.nep #rooms .rooms-eyebrow { letter-spacing: 0; }
#rooms .rooms-title {
  color: #fff; text-align: center; font-weight: 400; line-height: 1.1;
  font-size: 1.875rem; margin-bottom: 0.9rem;
  position: relative; z-index: 5;
}
@media (min-width: 768px) { #rooms .rooms-title { font-size: 3rem; } }

#rooms .rooms-divider {
  width: 3rem; height: 2px; margin: 0 auto 2.5rem;
  background: rgba(255,255,255,0.40); border-radius: 999px;
  position: relative; z-index: 5;
}

/* ── Unified Component (image + card) ───────────────────────── */
.rooms-unified {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}
@media (max-width: 1023px) {
  .rooms-unified {
    gap: 0;
  }
}
@media (min-width: 1024px) {
  .rooms-unified {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
}

/* ── Layout: wraps unified component + see-more ────────────── */
.rooms-layout {
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* ── Left Column: Image Carousel ──────────────────────────── */
.rooms-carousel-column {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
@media (max-width: 1023px) {
  .rooms-carousel-column { width: 100%; }
}
@media (min-width: 1024px) {
  .rooms-carousel-column {
    flex: 0 0 58%;
  }
}

.rooms-image-viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  height: 100%;
}
@media (min-width: 1024px) {
  .rooms-image-viewport {
    aspect-ratio: auto;
    border-radius: 4px 0 0 4px;
  }
}

.rooms-image-viewport:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}

/* The sliding track that holds all room-image-slide items.
   This rule was missing, which is why the carousel never displayed:
   without display:flex here, the slides (each flex: 0 0 100%) stacked
   vertically instead of forming a horizontal row, so the JS's
   translateX(-N * 100%) had no flex row to actually slide. */
.rooms-image-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.room-image-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* ── Room labels on homepage room slides ────────────────── */
.room-image-slide[data-new]::after,
.room-image-slide[data-label]::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  background: no-repeat center / contain;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.18));
}
.room-image-slide[data-new]::after {
  background-image: url('assets/images/new_label.webp');
}
.room-image-slide[data-label="new"]::after {
  background-image: url('assets/images/new_label.webp');
}
.room-image-slide[data-label="30_off"]::after {
  background-image: url('assets/images/grey_bg.webp');
}
.room-image-slide[data-label="50_off"]::after {
  background-image: url('assets/images/grey_bg.webp');
}

.rooms-nav-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  position: relative;
  z-index: 25;
}

.rooms-dashes {
  display: flex;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.rooms-dash {
  width: 30px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.rooms-dash.active {
  background: #ffffff;
  width: 50px;
}

/* ── Right Column: Room Details ────────────────────────────── */
.rooms-details-column {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}
@media (max-width: 1023px) {
  .rooms-details-column { width: 100%; }
}
@media (min-width: 1024px) {
  .rooms-details-column {
    flex: 0 0 42%;
  }
}

.rooms-details-viewport {
  width: 100%;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.rooms-details-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  height: 100%;
}

.room-details-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}
@media (min-width: 1024px) {
  .room-details-slide {
    align-items: flex-start;
    text-align: left;
  }
}

.room-detail-name {
  color: #ffffff;
  font-weight: 800;
  font-size: 2.25rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}
.room-detail-name[data-eng] {
  font-family: "Alga", serif;
  font-weight: 400;
  font-style: italic;
}
.room-detail-name[data-nep] {
  font-family: "TiroDevanagariHindi", serif;
  font-weight: 400;
  font-style: italic;
}
@media (max-width: 640px) {
  .room-detail-name {
    font-size: 1.85rem;
  }
}

.room-detail-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0 0 2rem 0;
  line-height: 1.5;
}

.room-detail-amenities-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 1024px) {
  .room-detail-amenities-wrap {
    align-items: flex-start;
  }
}

.room-detail-amenities-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: inline-block;
}
body.nep .room-detail-amenities-label {
  letter-spacing: 0;
}

.room-detail-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 440px;
}
@media (max-width: 480px) {
  .room-detail-amenities-grid {
    gap: 0.75rem;
  }
}

.room-detail-amenity {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 0.95rem;
  text-align: left;
}

.room-detail-amenity span {
  line-height: 1;
}

.room-detail-amenity svg {
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ── Static Booking Panel ─────────────────────────────────── */
.rooms-booking-panel {
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 4rem;
  width: 100%;
}
@media (max-width: 1024px) {
  .rooms-booking-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.rooms-view-more-container {
  position: absolute;
  right: 2rem;
  display: flex;
  align-items: center;
  margin: 0;
  z-index: 5;
}

.rooms-booking-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  width: 100%;
  max-width: 440px;
}
@media (max-width: 1024px) {
  .rooms-booking-header-row {
    justify-content: space-between;
  }
}

.rooms-booking-title-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body.nep .rooms-booking-title-label {
  letter-spacing: 0;
}

@keyframes viewMoreBob {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-8px); }
}

.rooms-dynamic-view-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
  animation: viewMoreBob 2.5s ease-in-out infinite;
}
.rooms-dynamic-view-more:hover {
  color: #ffffff;
}
body.nep .rooms-dynamic-view-more {
  letter-spacing: 0;
}

.rooms-booking-buttons-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: center;
  width: 100%;
  padding-top: 2rem;
}
@media (max-width: 480px) {
  .rooms-booking-buttons-row {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  .rooms-booking-buttons-row .cta-glass-btn {
    width: fit-content;
    justify-content: center;
  }
}

/* ── White Info Card ────────────────────────────────────────── */
.room-info-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  background-image: url('assets/images/white_card_bg.webp');
  background-size: cover;
  background-position: center;
  border-radius: 0 4px 4px 0;
  padding: 2.25rem 2.25rem 10.5rem;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.06);
  width: 100%;
  flex: 1;
}
@media (max-width: 1023px) {
  .room-info-card {
    border-radius: 0 0 4px 4px;
    padding-bottom: 2.25rem;
  }
}

.room-info-card .room-detail-name {
  color: #14532d;
  margin-bottom: 0.35rem;
  font-size: 2.5rem;
}
@media (max-width: 640px) {
  .room-info-card .room-detail-name { font-size: 2rem; }
}
.room-info-card .room-detail-subtitle {
  color: rgba(0,0,0,0.55);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
.room-info-card .room-detail-amenities-label {
  color: rgba(0,0,0,0.45);
  margin-bottom: 1.75rem;
}
.room-info-card .room-detail-amenity {
  color: #333;
  font-size: 1.025rem;
  gap: 14px;
}
.room-info-card .room-detail-amenity span {
  line-height: 1;
}
.room-info-card .room-detail-amenity svg {
  color: rgba(0,0,0,0.6);
  width: 20px;
  height: 20px;
}
.room-info-card .room-detail-amenities-wrap {
  align-items: flex-start;
}
.room-info-card .room-detail-amenities-grid {
  max-width: 500px;
  gap: 1.25rem 1.75rem;
  margin-bottom: 1.5rem;
}

/* ── Coming Soon card — centred announcement layout ────────── */
.room-info-card--coming-soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem;
}
@media (max-width: 640px) {
  .room-info-card--coming-soon { padding: 1.5rem; }
}
.room-info-card--coming-soon .coming-soon-headline {
  font-size: 1.5rem;
  font-weight: 700;
  color: #14532d;
  margin: 0 0 0.6rem;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .room-info-card--coming-soon .coming-soon-headline { font-size: 1.25rem; }
}
.room-info-card--coming-soon .coming-soon-headline:last-child {
  margin-bottom: 0;
}
.room-info-card--coming-soon .coming-soon-sub {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(0,0,0,0.45);
  margin: 0.2rem 0 0;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

/* ── Rooms details entrance animation (fade + slide from left) ── */
@keyframes roomDetailsReveal {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  #rooms.rooms-revealed .room-details-slide:first-child .room-detail-name {
    animation: roomDetailsReveal 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0s both;
  }
  #rooms.rooms-revealed .room-details-slide:first-child .room-detail-subtitle {
    animation: roomDetailsReveal 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.12s both;
  }
  #rooms.rooms-revealed .room-details-slide:first-child .room-detail-amenities-wrap {
    animation: roomDetailsReveal 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.24s both;
  }
}

/* ── Booking section — static overlay above card ─────────── */
.rooms-booking-card-section {
  margin-top: auto;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 1.5rem 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}
.rooms-details-column > .rooms-booking-card-section {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  margin-top: 0;
  pointer-events: auto;
}
.rooms-booking-card-section .rooms-booking-title-label {
  color: rgba(0,0,0,0.6);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
body.nep .rooms-booking-card-section .rooms-booking-title-label {
  letter-spacing: 0;
}
.rooms-booking-card-section .rooms-booking-buttons-row {
  padding-top: 0;
  justify-content: flex-end;
}
/* Homepage Featured Rooms booking buttons — fluid width so they scale
   with the window; they disappear in mobile view via .desktop-only
   (mobile uses the .rooms-mobile-cta-group buttons instead). */
.rooms-details-column > .rooms-booking-card-section .rooms-booking-buttons-row .cta-glass-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
@media (max-width: 480px) {
  .rooms-booking-card-section .rooms-booking-buttons-row {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* CTA fade-out when the coming-soon card is active */
.rooms-booking-card-section.rooms-cta-hidden {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.rooms-booking-card-section {
  transition: opacity 0.4s ease;
}

/* ── Show/hide helpers ─────────────────────────────────── */
@media (max-width: 1023px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 1024px) {
  .mobile-only { display: none !important; }
}

/* ── Mobile CTA group (booking + see more below dashes) ── */
.rooms-mobile-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.5rem;
  width: 100%;
}
.rooms-mobile-cta-group .rooms-booking-card-section {
  margin-top: 0;
  border-top: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.rooms-mobile-cta-group .rooms-booking-card-section .rooms-booking-title-label {
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin-bottom: 1.25rem;
}
.rooms-mobile-cta-group .rooms-booking-buttons-row {
  flex-direction: column;
  align-items: center;
  padding-top: 0;
}
.rooms-mobile-cta-group .rooms-booking-buttons-row .cta-glass-btn {
  width: 280px;
  justify-content: center;
}
.rooms-mobile-view-more {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  width: 100%;
}
/* Preserve flex centering for the animate-fade-left wrapper inside mobile CTA */
.rooms-mobile-view-more .animate-fade-left {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ── About Us CTA ──────────────────────────────────── */
.about-view-more {
  margin-top: 1.75rem;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.about-view-more .rooms-dynamic-view-more {
  color: #15803d;
  text-decoration-color: rgba(21, 128, 61, 0.45);
}
.about-view-more .rooms-dynamic-view-more:hover {
  color: #166534;
}

/* ── Gallery Navigation Arrows ─────────────────────────────── */
.room-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 42px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #fff;
  background: rgba(74, 222, 128, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transition:
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  will-change: transform;
}
.room-gallery-nav svg {
  width: 32px;
  height: 32px;
}
.room-gallery-nav svg path {
  stroke-width: 2.5;
}
.room-gallery-prev {
  left: -42px;
  border-radius: 8px 0 0 8px;
}
.room-gallery-next {
  right: -42px;
  border-radius: 0 8px 8px 0;
}
.room-gallery-prev:hover {
  transform: translateY(-50%) translateX(-4px);
  background: rgba(74, 222, 128, 0.45);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.10);
}
.room-gallery-next:hover {
  transform: translateY(-50%) translateX(4px);
  background: rgba(74, 222, 128, 0.45);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.10);
}
.room-gallery-nav:active {
  transform: translateY(-50%) scale(0.94);
}

/* Offers gallery: compensate for #offersDashes margin-top (1.5rem) + dash height (4px)
   below the image viewport, so the arrows center on the visible image area. */
.offers-gallery-column .room-gallery-nav {
  top: calc(50% - 0.75rem - 2px);
}

@media (max-width: 640px) {
  .room-gallery-nav { display: none !important; }
  .room-image-slide[data-new]::after,
  .room-image-slide[data-label]::after { width: 38px; height: 38px; }
}

@media (max-width: 768px) {
  .room-image-slide[data-new]::after,
  .room-image-slide[data-label]::after { width: 45px; height: 45px; }
}

/* ── Layout & spacing refinements ──────────────────────────── */
.rooms-details-viewport {
  padding: 0;
}
.room-details-slide {
  padding: 0;
}

/* Booking panel — cleaner separator */
.rooms-booking-panel {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
}
.rooms-booking-buttons-row {
  padding-top: 0;
}

@media (max-width: 640px) {
  .room-info-card {
    padding: 1.5rem;
    border-radius: 0 0 4px 4px;
  }
}



/* ── Gallery with polaroid frame ───────────────────────────── */
/* ── Offers Gallery — Rooms-style frameless presentation ──── */
.offers-gallery-column {
  position: relative;
}

.offers-image-viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.offers-image-viewport:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}

.offers-image-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
  will-change: transform, opacity;
}

.offers-gallery-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.offers-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Restore original spacing for What We Offer dashes (uses shared .rooms-dashes class) */
#offersDashes { margin-top: 1.5rem; min-height: 4px; }

/* Dots */
.offers-dots { display:flex;justify-content:center;gap:7px;margin-top:10px; }
.offers-dot {
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.28);cursor:pointer;
  transition:background 0.3s ease,transform 0.3s ease;
}
.offers-dot.active { background:rgba(255,255,255,0.85);transform:scale(1.35); }

/* --- Language Visibility Optimization --- */
.offers-list {
  display: none !important;
  flex-direction: column;
  width: 100%;
}
.offers-list[data-eng] { display: flex !important; }
body.nep .offers-list[data-eng] { display: none !important; }
body.nep .offers-list[data-nep] { display: flex !important; }

.offer-item {
  display: flex;
  flex-direction: row;          /* text … line-col */
  align-items: stretch;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  cursor: pointer;              /* indicate interactivity */
  position: relative;           /* tooltip positioning anchor */
}
.offer-item.offer-visible { opacity:1; transform:translateX(0); }

/* ── Text scale on hover ─────────────────────────────────── */
.offer-text-wrap {
  flex: 1;
  text-align: right;
  padding: 14px 16px 14px 0;
  display: flex; align-items: center; justify-content: flex-end;
  cursor: pointer; /* inherit tappability from parent */
}
.offer-text {
  color: rgba(255,255,255,0.92);
  font-size: 1.25rem; font-weight: 500; line-height: 1.25;
  letter-spacing: 0.01em; white-space: nowrap;
  display: inline-block;
  transition: transform 0.28s cubic-bezier(0.25,1,0.5,1), color 0.28s ease;
  transform-origin: right center;
  /* No pointer-events:none — touch events must reach children on mobile */
}
.offer-item:hover .offer-text,
.offer-item.tooltip-active .offer-text,
.offer-item.experience-active .offer-text {
  transform: scale(1.10);
  color: #ffffff;
}

/* ── Dot scale on hover ──────────────────────────────────── */
.offer-node {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.88); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
  transition: transform 0.28s cubic-bezier(0.25,1,0.5,1), box-shadow 0.28s ease;
}
.offer-item:hover .offer-node,
.offer-item.tooltip-active .offer-node,
.offer-item.experience-active .offer-node {
  transform: scale(1.75);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.18);
}

/* Nepali offer text: no tracking, slight size boost */
body.nep .offer-text {
  letter-spacing: 0;
  font-size: 1.25rem;
}
.offer-text small {
  display: block; font-size: 0.78rem; font-weight: 400;
  color: rgba(255,255,255,0.45); letter-spacing: 0; margin-top: 2px;
}

/* The vertical line + dot column on the far RIGHT */
.offer-line-col {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 18px;
  cursor: pointer;
  /* No pointer-events:none — touch must bubble to .offer-item */
}
.offer-seg-top {
  width: 1.5px; flex: 1; min-height: 12px;
  background: rgba(255,255,255,0.25);
}
.offer-seg-bot {
  width: 1.5px; flex: 1; min-height: 12px;
  background: rgba(255,255,255,0.25);
}
.offer-item:first-child .offer-seg-top { background: transparent; }
.offer-item:last-child  .offer-seg-bot { background: transparent; }

/* --- Mobile Alignment & Timeline Continuity --- */
@media (max-width: 768px) {
  .offers-list {
    width: fit-content; /* Centers the whole block */
    max-width: 90vw;
    margin: 0 auto;
    align-items: stretch; /* Ensures all items have same width for line alignment */
  }
  .offer-item {
    width: 100%;
    align-items: stretch; /* Critical for line continuity */
    justify-content: flex-end;
  }
  .offer-text-wrap {
    flex: 1;
    text-align: right; /* Text on left of the dot */
    padding: 12px 20px 12px 0;
  }
  .offer-line-col {
    width: 24px; /* Fixed width for line column */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .offer-seg-top, .offer-seg-bot {
    width: 1.5px;
    background: rgba(255,255,255,0.25);
    flex: 1; /* Stretches line to meet the next dot */
  }
}

/* Desktop: distribute offer items evenly to match gallery height */
@media (min-width: 769px) {
  .offers-list {
    height: 100%;
  }
  .offer-item {
    flex: 1;
  }
}

/* ══════════════════════════════════════════════════════════════ — glassmorphism dark rectangle
   Desktop: fixed, follows mouse with easing
   Mobile:  fixed, centered, with close button
   ══════════════════════════════════════════════════════════════ */
#offer-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 8000;

  /* Richer, more opaque dark green background */
  background: rgba(8, 35, 18, 0.92);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.20);

  width: 300px;
  padding: 0;
  color: rgba(255,255,255,0.92);
  font-family: "AnekDevanagari", sans-serif;
  font-size: 0rem;
  font-weight: 400;
  line-height: 1;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform, left, top;
}
#offer-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.offer-tooltip-body {
  display: flex;
  align-items: stretch;
  padding: 22px 20px;
  gap: 0;
  min-height: 90px;
}

.offer-tooltip-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding-right: 18px;
  gap: 6px;
}

#offer-tooltip-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.01em;
}
#offer-tooltip-heading small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0;
  margin-top: 2px;
  line-height: 1.3;
}

#offer-tooltip-text {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.80);
}

.offer-tooltip-divider {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
}

.offer-tooltip-icon {
  padding-left: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.offer-tooltip-icon svg {
  width: 28px;
  height: 28px;
  color: #4ade80;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.35));
}

/* Close button — mobile only (hidden on desktop) */
#offer-tooltip-close {
  display: none;
}

/* ── Mobile tooltip overrides ────────────────────────────── */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  #offer-tooltip {
    pointer-events: all;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) translateY(12px);
    width: min(88vw, 280px);
  }
  #offer-tooltip.visible {
    transform: translate(-50%, -50%) translateY(0);
  }
  .offer-tooltip-body {
    padding: 20px 16px;
    min-height: 80px;
  }
  .offer-tooltip-text {
    padding-right: 14px;
    gap: 5px;
  }
  #offer-tooltip-heading {
    font-size: 0.92rem;
  }
  #offer-tooltip-text {
    font-size: 0.8rem;
  }
  .offer-tooltip-divider {
    align-self: stretch;
  }
  .offer-tooltip-icon {
    padding-left: 14px;
  }
  .offer-tooltip-icon svg {
    width: 24px;
    height: 24px;
  }
  /* Show close button on mobile */
  #offer-tooltip-close {
    display: flex;
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.80);
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
  }
  #offer-tooltip-close:hover {
    background: rgba(255,255,255,0.20);
    color: #fff;
  }
}

/* --- Overlay Grey-out effect --- */
#offer-tooltip-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 7999;
  background: rgba(0,0,0,0.55); /* Greyed out background */
  backdrop-filter: blur(5px);   /* Subtle blur */
  -webkit-backdrop-filter: blur(5px);
}
#offer-tooltip-overlay.active {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   WHERE TO FIND US — SECTION 4
   ══════════════════════════════════════════════════════════════ */
.map-placeholder {
  width:100%; max-width:780px; margin:0 auto; height:380px; border-radius:16px;
  background:linear-gradient(135deg,#e7eee8 0%,#d5e0d6 100%);
  border:2px dashed rgba(22,101,52,0.25);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px;
  color:rgba(22,101,52,0.5);
}
.map-placeholder svg { opacity:0.4; }
.map-placeholder p { font-size:0.85rem;font-weight:600;text-transform:uppercase; }

/* ── PAGE-LEVEL MOUNTAIN BACKDROP (full-page parallax) ─────── */
/* A fixed, full-viewport mountain layer behind the whole page. As the
   page scrolls it stays glued to the viewport (native parallax), so the
   silhouette is felt between/behind the sections, not just inside the
   Where-to-Find-Us box. The light sections below are made slightly
   translucent so the backdrop shows through them; the image-backed
   (offers/hero), dark, and footer sections stay opaque and cover it.
   Scoped to the light-background pages only — the rooms page body is
   dark (#0f2814) and must stay opaque. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('assets/images/mountains_green.webp');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  opacity: 0.12;
}
body.about-page::before {
  background-image: url('assets/images/mountains_blue.webp');
}

/* Light content sections: slightly translucent so the fixed mountain
   backdrop is visible behind them (text stays readable — the tint is
   still very light). */
body.home-page #about,
body.home-page #location,
body.about-page #about,
body.about-page #our-story,
body.about-page #testimonials,
body.about-page #location,
body.rooms-page #room-categories,
body.rooms-page #location,
body.menu-page #location {
  background-color: rgba(250, 250, 249, 0.55);
}
body.privacy-page #privacy {
  background-color: rgba(250, 250, 249, 0.55);
}

/* Our Rooms joins the shared body::before parallax like every other page.
   The page body previously painted dark (#0f2814) for the old full-dark
   design; that would tint the translucent light sections muddy grey, so
   the base is now stone-white — the hero, amenities and footer all carry
   their own opaque backgrounds and are unaffected. */
body.rooms-page {
  background-color: #fafaf9;
}

/* ── GOOGLE MAP IFRAME ─────────────────────────────────────── */
.map-container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  height: 450px;
  border-radius: 20px;
  overflow: hidden;
  background: #e7eee8;
  border: 1px solid rgba(22, 101, 52, 0.15);
  box-shadow: 
    0 12px 32px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.6);
  position: relative;
}
.map-iframe {
  border-radius: 20px;
  filter: grayscale(0.2) contrast(1.05); /* Slight stylistic blend */
  transition: filter 0.4s ease;
}
.map-iframe:hover {
  filter: grayscale(0);
}

@media (max-width: 768px) {
  .map-container {
    height: 320px;
    border-radius: 16px;
  }
}

/* Overlay inside lightbox for room details */
.lightbox-room-details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 20px 100px;
  color: white;
  z-index: 10001;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.40) 55%, rgba(0,0,0,0.12) 80%, transparent 100%);
}

.lightbox-room-details .lbr-name {
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1.2;
  margin-bottom: 14px;
}

.lightbox-room-details .lbr-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin-bottom: 14px;
}

.lightbox-room-details .lbr-amenities-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}

.lightbox-room-details .lbr-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
}

.lightbox-room-details .lbr-amenity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
}

.lightbox-room-details .lbr-amenity svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
}
/* Overlay inside lightbox for offer experience details (mobile) */
.lightbox-offer-details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 20px 100px;
  color: white;
  z-index: 10001;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.40) 55%, rgba(0,0,0,0.12) 80%, transparent 100%);
}
.lightbox-offer-details .lbo-icon {
  width: 31px;
  height: 31px;
  margin-bottom: 10px;
  opacity: 0.85;
}
.lightbox-offer-details .lbo-icon svg {
  width: 100%;
  height: 100%;
}
.lightbox-offer-details .lbo-name {
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1.2;
  margin-bottom: 14px;
}
.lightbox-offer-details .lbo-description {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin-top: 5px;
}


#lightbox {
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,14,10,0.88); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity 0.3s ease;
}
#lightbox.open { opacity:1;pointer-events:all; }
#lightbox-frame {
  position:relative;
  z-index:2;
  background:#111; padding:0; border-radius:4px;
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
  max-width:min(92vw,1200px); max-height:92vh;
  transform:scale(0.95);
  transition:transform 0.3s cubic-bezier(0.34,1.2,0.64,1);
}
#lightbox.open #lightbox-frame { transform:scale(1); }
#lightbox-img { display:block;max-width:100%;max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:3px; }



/* Position counter ("2 / 4") — only shown for galleries that opt in,
   so it gives a clear visual cue that the chevrons moved even when
   neighboring slides use the same placeholder image. */
#lightbox-counter {
  display: none;
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  z-index: 10003;
  pointer-events: none;
}

/* ── Lightbox navigation — same glass component, positioned at frame edges ── */
#lightbox-frame .room-gallery-nav {
  z-index: 10001;
}

/* ── LANGUAGE SWITCHING ────────────────────────────────────── */
[data-nep] { display:none; }
[data-nep], [data-nep] * { letter-spacing: 0 !important; }
body.nep [data-eng] { display:none; }
body.nep [data-nep] { display:revert; }

/* ── GLOBAL NEPALI OPTICAL SIZE BASELINE ─────────────────────
   Devanagari glyphs render optically smaller than Latin at the
   same px size, so in Nepali mode every body-scale [data-nep]
   element is bumped +1px over its parent's computed size to
   visually match its English pair (frontend-design.md §3 —
   Nepali Specifics). Headings (decorative TiroDevanagari) and
   label components below already carry per-component body.nep
   sizes and keep those values. The language banner sits on
   single-level wrappers/leaves, so [data-nep] rarely nests —
   do NOT place [data-nep] inside another [data-nep], or the
   bump compounds. ─────────────────────────────────────────── */
body.nep [data-nep]:not(h1):not(h2):not(h3):not(h4)
  :not(.nav-label):not(.mob-nav-item):not(.quick-links-label-nep)
  :not(.hero-scroll-label):not(.back-to-top-label):not(.back-home-text)
  :not(.rooms-eyebrow):not(.rooms-booking-title-label)
  :not(.room-detail-amenities-label):not(.coming-soon-headline)
  :not(.footer-nav-link):not(.footer-contact-text):not(.footer-copyright)
  :not(.about-hero-title):not(.about-hero-subtitle):not(.about-hero-desc)
  :not(.offer-text)
  :not(.text-sm):not(.text-xs):not(.text-\[10px\]):not(.sm\:text-lg)
  :not(.amenity-label):not(.soon-badge):not(.soon-note) {
  font-size: calc(1em + 1px);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  #vert-nav  { display:none; }
  #hamburger { display:flex; }

  #lightbox-img { max-height:80vh; }

  .polaroid-inner { width:240px; } .polaroid-photo { height:240px; }
  .polaroid-stack { width:260px !important;height:320px !important; }
  .cta-row { gap:0.6rem; flex-direction: column; width: 100%; align-items: center; }
  .cta-glass-btn { font-size:0.875rem; padding:0.75rem 1.5rem; width: 100%; max-width: 300px; justify-content: center; }
  .about-view-more { justify-content: center; }
  .offer-text { white-space:normal; }
  :root { --final-image-scale:1.15; }
  /* bg image: still 1.4× the ~200px stack = ~280px, but clamp keeps it proportional */
  .about-bg-img { width: clamp(320px, 100vw, 480px); }
  .map-placeholder { height:260px; }

  .offers-dots { margin-top: 14px; }
  .offers-dot { width: 8px; height: 8px; }
  .rooms-nav-row { margin-top: 1.5rem; }
}
@media (max-width:480px) {
  .polaroid-inner { width:195px; } .polaroid-photo { height:195px; }
  .polaroid-stack { width:210px !important;height:260px !important; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */

/* ── Texture overlay & divider (replaces inline styles) ─────── */
.footer-texture {
  background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 60%),
              radial-gradient(ellipse at 15% 85%, rgba(0,0,0,0.18) 0%, transparent 55%);
}
.footer-divider {
  background: rgba(255,255,255,0.12);
}

/* ── Neon tagline glow ─────────────────────────────────────── */
/* White fluorescent neon — slow, barely-there turbulence */
@keyframes neonFlicker {
  0%,100% {
    text-shadow:
      0 0 4px  rgba(255,255,255,0.30),
      0 0 12px rgba(255,255,255,0.14),
      0 0 28px rgba(255,255,255,0.06);
  }
  20% {
    text-shadow:
      0 0 3px  rgba(255,255,255,0.22),
      0 0 9px  rgba(255,255,255,0.10),
      0 0 20px rgba(255,255,255,0.04);
  }
  42% {
    text-shadow:
      0 0 6px  rgba(255,255,255,0.40),
      0 0 18px rgba(255,255,255,0.20),
      0 0 40px rgba(255,255,255,0.09);
  }
  65% {
    text-shadow:
      0 0 3px  rgba(255,255,255,0.20),
      0 0 8px  rgba(255,255,255,0.09),
      0 0 18px rgba(255,255,255,0.04);
  }
  83% {
    text-shadow:
      0 0 5px  rgba(255,255,255,0.35),
      0 0 15px rgba(255,255,255,0.16),
      0 0 34px rgba(255,255,255,0.07);
  }
}
  body.nep #site-footer h4 {
  font-size: 1.03rem; /* Adjust as needed */
  }


.footer-neon {
  font-family: "AnekDevanagari", sans-serif;
  font-size: 1.55rem !important;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  animation: neonFlicker 9s ease-in-out infinite;
}

/* ── Explore nav links ─────────────────────────────────────── */
.footer-nav-link {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: "AnekDevanagari", sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  padding: 0;
  transition: color 0.25s ease, transform 0.25s ease;
  width: fit-content;
}
.footer-nav-link:hover {
  color: rgba(255,255,255,0.95);
  transform: translateX(4px);
}
.footer-nav-link.current {
  color: rgba(255,255,255,0.95);
  cursor: default;
  pointer-events: none;
}
body.nep .footer-nav-link { font-size: 0.88rem; font-weight: 400; line-height: 1.5; }

/* ── Explore nav two-column split (desktop) ────────────────── */
.footer-explore-columns { display: flex; gap: 2rem; }

/* ── Contact list ──────────────────────────────────────────── */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,0.55);
}
/* Icons: white-tinted, slightly transparent */
.footer-contact-item svg { margin-top: 2px; color: rgba(255,255,255,0.50); }
/* Static text — no hover, no cursor change */
.footer-contact-text {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  cursor: default;
  user-select: text;
}
body.nep .footer-contact-text { font-size: 0.88rem; font-weight: 400; line-height: 1.5; }
.footer-phone-num { white-space: nowrap; }

/* ── Footer action pills (glassmorphism, dark→light green hover) */
.footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: "AnekDevanagari", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  /* Light green glassmorphism base */
  background: linear-gradient(160deg, rgba(74, 222, 128, 0.35) 0%, rgba(34, 197, 94, 0.20) 100%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background 0.35s cubic-bezier(0.25,1,0.5,1),
    box-shadow 0.35s ease,
    transform 0.25s cubic-bezier(0.25,1,0.5,1),
    border-color 0.35s ease;
  will-change: transform;
}
.footer-pill:hover {
  /* Shift to brighter light green */
  background: linear-gradient(160deg, rgba(74,222,128,0.55) 0%, rgba(34,197,94,0.40) 100%);
  border-color: rgba(134,239,172,0.45);
  box-shadow:
    0 8px 28px rgba(34,197,94,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  transform: translateY(-2px) scale(1.04);
}
.footer-pill:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.20), inset 0 2px 5px rgba(0,0,0,0.18);
}
body.nep .footer-pill { letter-spacing: 0; font-weight: 600; }

/* ── Footer social row (brand icon links below the neon tagline) ─── */
.footer-social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1.5rem;
  margin-top: 1.75rem;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.45);
  transition: color 0.25s ease;
}
.footer-social-link:hover { color: rgba(255,255,255,1); }
.footer-social-icon {
  display: block;
  width: 22px;
  height: 22px;
}
@media (max-width: 768px) {
  .footer-social-row { justify-content: center; margin-top: 1.25rem; }
}

body.nep .footer-copyright { font-size: 0.75rem; font-weight: 400; }
.footer-bottom-bar {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1.5rem;
  color: rgba(255,255,255,0.40);
  font-size: 0.75rem;
  width: 100%;
}
@media (min-width: 768px) {
  .footer-bottom-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .footer-bottom-left {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
  .footer-resort-name {
    grid-column: 3;
    display: flex;
    justify-content: flex-start;
  }
}

.footer-resort-name,
.footer-copyright-wrap {
  font-family: "AnekDevanagari", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  text-decoration: none;
  transition: color 0.25s ease;
  text-align: left;
}


@media (max-width: 768px) {
  .footer-bottom-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
    align-items: baseline;
  }
  .footer-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
  }
  .footer-copyright-wrap {
    text-align: left;
  }
  .footer-resort-name {
    flex: 0 0 auto;
    text-align: right;
    margin-top: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   BACK-TO-TOP BUTTON — centered static, at location/footer junction
   ══════════════════════════════════════════════════════════════ */
.back-to-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(22,101,52,0.10);
  border: 1.5px solid rgba(22,101,52,0.30);
  color: rgba(22,101,52,0.70);
  cursor: pointer;
  transition: background 0.28s ease, color 0.28s ease, transform 0.28s cubic-bezier(0.25,1,0.5,1), border-color 0.28s ease;
  animation: arrowBounceUp 2.4s ease-in-out infinite;
  will-change: transform;
}
.back-to-top-btn:hover {
  background: rgba(22,101,52,0.18);
  color: rgb(22,101,52);
  border-color: rgba(22,101,52,0.55);
}
.back-to-top-btn:active {
  transform: scale(0.92);
  animation: none;
}

.back-to-top-label {
  margin: 6px 0 0;
  font-family: "AnekDevanagari", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(22, 101, 52, 0.55);
  transition: color 0.25s ease;
  cursor: pointer;
  user-select: none;
}
#scrollUp:hover ~ .back-to-top-label,
.back-to-top-label:hover {
  color: rgba(22, 101, 52, 0.85);
}
body.nep .back-to-top-label { letter-spacing: 0; font-size: 0.75rem; font-weight: 600; }

/* ── FOOTER — MOBILE RESTRUCTURE (≤768px, green & blue themes share it) ──
   Top→bottom: neon tagline (centred, unchanged) → Explore links left-aligned
   in a left sidebar + Contact info left-aligned in a right sidebar → action
   pills side-by-side on a full-width row → thin divider → © left | legal
   links right → resort name centred. Built with grid placement on the
   existing markup: both sidebar columns are promoted via display:contents so
   their headings share row 2, their lists share row 3 (top-aligned), and the
   pills escape col 3 onto a full-width row 4. >768px desktop is untouched. */
@media (max-width: 768px) {
  .footer-neon { font-size: 1.25rem; text-align: center; }

  /* Balanced vertical padding for the whole footer */
  #site-footer .relative.z-10 {
    padding-top: 3rem;
    padding-bottom: 2.75rem;
  }

  /* Tagline | sidebar pair | pills row */
  #site-footer .grid.mb-14 {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  /* Col 1: tagline spans both columns, centred as-is */
  #site-footer .grid > div:nth-child(1) { grid-column: 1 / -1; }

  /* Promote both sidebar columns so their children become grid items */
  #site-footer .grid > div:nth-child(2),
  #site-footer .grid > div:nth-child(3) { display: contents; }

  /* Row 2 — sidebar headings side by side */
  #site-footer .grid > div:nth-child(2) > h4,
  #site-footer .grid > div:nth-child(3) > h4 { grid-row: 2; }
  #site-footer .grid > div:nth-child(2) > h4 { grid-column: 1; }
  #site-footer .grid > div:nth-child(3) > h4 { grid-column: 2; }

  /* Row 3 — link list left, contact list right (top-aligned) */
  #site-footer .grid > div:nth-child(2) > .footer-explore-columns { grid-column: 1; grid-row: 3; align-self: start; }
  .footer-explore-columns { flex-direction: column; gap: 1rem; }
  #site-footer .grid > div:nth-child(3) > ul  { grid-column: 2; grid-row: 3; align-self: start; }

  /* Uniform vertical rhythm: h4 mb-6 / ul mb-8 would otherwise stack onto
     the 2rem grid gap (heading→list became 3.5rem, lists→pills 4rem) */
  #site-footer .grid.mb-14 h4,
  #site-footer .grid.mb-14 ul { margin-bottom: 0 !important; }
  /* Headings sit closer to their own list than rows sit apart */
  #site-footer .grid.mb-14 nav,
  #site-footer .grid.mb-14 ul { margin-top: -0.5rem; }

  /* Left-align text inside both sidebars */
  #site-footer h4 { text-align: left; }
  #site-footer .footer-nav-link { text-align: left; width: fit-content; }
  #site-footer .footer-contact-item { justify-content: flex-start; }
  #site-footer .footer-contact-text { text-align: left; }

  /* Contact sidebar (col 3) reads right-aligned on mobile — mirrors the
     Explore sidebar for opposing-edge balance; icons flip to the right
     edge so they stack in a clean vertical line */
  #site-footer .grid > div:nth-child(3) > h4 { text-align: right; }
  #site-footer .grid > div:nth-child(3) .footer-contact-item {
    justify-content: flex-start; /* row-reverse: main-start = right edge */
    flex-direction: row-reverse;
  }
  #site-footer .grid > div:nth-child(3) .footer-contact-text { text-align: right; }

  /* Action pills: same grid row as contact list, pinned to bottom of that cell */
  #site-footer .flex.flex-wrap.gap-3 {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
  }
  #site-footer .footer-pill {
    padding: 10px 14px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }
}

/* ── CONSTRAINED CONTENT WRAPPER ──────────────────────────── */
.constrained-content {
  padding-left: 100px;
  padding-right: 100px;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box; /* Crucial for padding calculation */
}
@media (max-width: 1024px) {
  .constrained-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 1025px) {
  /* Offset left nav items to align with constrained-content padding (100px) */
  #vert-nav {
    left: calc(max(100px, (100vw - 1400px) / 2 + 100px));
  }
  .lang-toggle {
    right: calc(max(100px, (100vw - 1400px) / 2 + 100px));
  }
}
@media (max-width: 1024px) {
  #vert-nav { left: 20px; }
  .lang-toggle { right: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   HERO PARALLAX LAYERS
   ══════════════════════════════════════════════════════════════ */
/* The hero logo must keep its intrinsic aspect ratio (3590×771).
   width: 100% with a filter context can drop the auto height in flex
   layouts across browsers, which stretches it — pin the height so
   every browser renders the logo at its true proportions. Scope to
   #home so no other page's .constrained-content layout is affected. */
#home .constrained-content > img {
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 40, 15, 0.60))
          drop-shadow(0 4px 10px rgba(0, 40, 15, 0.45));
}
.hero-parallax-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
  pointer-events: none;
}
.hero-parallax-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-bg-layer           { z-index: 0; opacity: 1; }
.hero-birds-layer        { z-index: 1; }
.hero-slideshow-layer    { z-index: 2; }
.hero-mountain-layer     { z-index: 3; background-image: url('assets/images/mountains_green.webp'); background-position: bottom center; background-repeat: no-repeat; background-size: cover; }
.hero-slideshow-layer img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════
   AMENITIES GRID — 2‑row layout with dynamically balanced columns
   ═══════════════════════════════════════════════════════════════ */
#amenities {
  overflow-x: hidden;
}

.amenities-grid {
  display: grid;
  gap: var(--amenity-gap, 3rem);
  max-width: var(--amenity-max-width, 900px);
  margin: 0 auto;
}

.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.amenity-icon-wrap {
  width: var(--amenity-wrap-size, 5rem);
  height: var(--amenity-wrap-size, 5rem);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.12);
}

.amenity-icon-wrap svg {
  width: var(--amenity-icon-size, 2.75rem);
  height: var(--amenity-icon-size, 2.75rem);
}

.amenity-icon-wrap .amenity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.amenity-label {
  font-size: var(--amenity-label-size, 1.125rem);
  font-weight: 500;
  text-align: center;
}

.amenity-label + .amenity-label {
  margin-top: 0;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .amenities-grid {
    gap: var(--amenity-gap, 1.5rem);
    max-width: var(--amenity-max-width, 540px);
  }
  .amenity-icon-wrap {
    width: var(--amenity-wrap-size, 4.5rem);
    height: var(--amenity-wrap-size, 4.5rem);
  }
  .amenity-icon-wrap svg {
    width: var(--amenity-icon-size, 2.5rem);
    height: var(--amenity-icon-size, 2.5rem);
  }
  .amenity-label {
    font-size: var(--amenity-label-size, 1rem);
  }
}

@media (max-width: 480px) {
  .amenities-grid {
    gap: var(--amenity-gap, 1rem);
    max-width: var(--amenity-max-width, 320px);
  }
  .amenity-icon-wrap {
    width: var(--amenity-wrap-size, 3.5rem);
    height: var(--amenity-wrap-size, 3.5rem);
  }
  .amenity-icon-wrap svg {
    width: var(--amenity-icon-size, 2rem);
    height: var(--amenity-icon-size, 2rem);
  }
  .amenity-label {
    font-size: var(--amenity-label-size, 0.875rem);
  }
}

/* Optical alignment: shift Lucide icons up so their visible glyph centre
   matches the visual centre of adjacent text (2–3px empirical correction).
   Applied via .icon-optical-align on elements where the icon sits inline
   with text. Standalone icons (buttons, circles) do NOT get this class. */
.icon-optical-align {
  transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT US — HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.about-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #0E5264;
}

/* Compact variant — shared by About Us and What-We-Offer heroes */
.about-hero--compact {
  min-height: 52vh;
}

.about-hero-slideshow-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.about-hero-slideshow-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero-birds-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.about-hero-birds-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(15%);
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(14, 82, 100, 0.50) 0%,
    rgba(14, 82, 100, 0.35) 50%,
    rgba(14, 82, 100, 0.50) 100%
  );
}

.about-hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 48rem;
}

.about-hero-title {
  font-size: 3.5rem;
  color: #fff;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.about-hero-title[data-eng] {
  font-family: "Alga", serif;
  font-style: italic;
  font-weight: 400;
}
.about-hero-title[data-nep] {
  font-family: "TiroDevanagariHindi", serif;
  font-style: italic;
  font-weight: 400;
}

.about-hero-divider {
  width: 3rem;
  height: 2px;
  margin: 1.25rem auto 1.5rem;
  background: rgba(255, 255, 255, 0.40);
  border-radius: 999px;
}

.about-hero-subtitle {
  font-family: "AnekDevanagari", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.30);
}

body.nep .about-hero-title {
  letter-spacing: 0;
  font-size: 3rem;
}

body.nep .about-hero-subtitle {
  letter-spacing: 0;
  font-size: 1.05rem;
}

.about-hero-desc {
  font-family: "AnekDevanagari", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  max-width: 32rem;
  margin: 1.5rem auto 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

body.nep .about-hero-desc {
  letter-spacing: 0;
  font-size: 0.95rem;
}

/* ── Entry stagger animations (reuses existing fadeIn keyframe) ── */
.entry-stagger {
  animation: fadeIn 0.5s ease-out both;
}
.entry-stagger-d1 { animation-delay: 0.12s; }
.entry-stagger-d2 { animation-delay: 0.24s; }
.entry-stagger-d3 { animation-delay: 0.36s; }
.entry-stagger-d4 { animation-delay: 0.48s; }
.entry-stagger-d5 { animation-delay: 0.60s; }

/* ── Hero scroll arrow: keep the infinite bob after the entry fade-in ──
   Higher specificity than .entry-stagger (0,2,0 > 0,1,0) so the
   composed animation survives the cascade; entry-stagger-d5's delay
   applies to both animations (list-repeat), so fade-in and bob start
   together. Reduced-motion strips the fade-in but keeps the bounce
   (see the reduced-motion exemptions below). ── */
.scroll-arrow.entry-stagger {
  animation: fadeIn 0.5s ease-out both, arrowBounce 2.4s ease-in-out infinite;
}

/* ── Section heading stagger (scroll-triggered entry) ────────
   [data-stagger] heading groups (eyebrow → title → divider)
   play the same fadeIn keyframe as .entry-stagger, but as an
   animation triggered when script.js §22 adds .revealed — so
   below-fold groups stagger in when scrolled into view while
   above-fold groups play on load, matching hero pacing.
   Reduced-motion renders everything statically. ───────────── */
html.js [data-reveal][data-stagger] {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}
html.js [data-reveal][data-stagger].revealed {
  opacity: 1;
  transform: none;
  animation: fadeIn 0.5s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  /* Keep-list loop element (.scroll-arrow) is excluded from this clobber:
     the important transform/opacity/animation overrides would otherwise
     freeze its infinite bob (important declarations beat CSS animations).
     Excluding it here is the global preserve-list — no per-element hack.
     The "Scroll Below" label (.hero-scroll-label) is intentionally NOT
     excluded: it is static by design, so it renders statically. */
  .entry-stagger:not(.scroll-arrow),
  [data-reveal][data-stagger] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* Chevron / arrow button keeps looping under reduced motion:
     only its fade-in entry is stripped, the infinite bounce survives. */
  .entry-stagger.scroll-arrow {
    animation: arrowBounce 2.4s ease-in-out infinite !important;
  }
}

@media (max-width: 768px) {
  .about-hero-title {
    font-size: 2.25rem;
  }
  body.nep .about-hero-title {
    font-size: 2rem;
  }
  .about-hero-subtitle {
    font-size: 0.85rem;
  }
  .about-hero-divider {
    margin: 1rem auto 1.25rem;
  }
  .about-hero-desc {
    font-size: 0.9rem;
    max-width: 24rem;
    margin-top: 1.25rem;
  }
  body.nep .about-hero-desc {
    font-size: 0.88rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT US + WHAT WE OFFER PAGES — BLUE-TONED COLOR OVERRIDES
   Scoped to the blue-theme pages (body.about-page: about-us.html and
   what-we-offer.html). Maps the shared green hierarchy onto a
   slightly-dark sky blue hierarchy while preserving the original
   lightness order (deepest → lightest).
   ═══════════════════════════════════════════════════════════════ */

/* Focus indicator */
.about-page :focus-visible { outline-color: #4FA7BD; }

/* Hamburger (mobile) */
.about-page #hamburger { background: rgba(14, 82, 100, 0.55); }

/* Mobile nav drawer */
.about-page #mobile-nav-drawer { background: rgba(14, 82, 100, 0.93); }

/* Language toggle */
.about-page .lang-toggle { background: rgba(14, 82, 100, 0.55); }
.about-page .lang-toggle::before {
  background: linear-gradient(175deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 40%, rgba(0,0,0,0.10) 100%), rgba(15, 98, 120, 0.92);
}

/* CTA glass button */
.about-page .cta-glass-btn {
  background: linear-gradient(160deg, rgba(15, 98, 120, 0.55) 0%, rgba(15, 98, 120, 0.35) 100%);
}
.about-page .cta-glass-btn:hover {
  background: linear-gradient(160deg, rgba(15, 98, 120, 0.85) 0%, rgba(15, 98, 120, 0.65) 100%);
}

/* Footer action pills (glassmorphism, dark→light sky blue hover) */
.about-page .footer-pill {
  background: linear-gradient(160deg, rgba(79, 167, 189, 0.35) 0%, rgba(42, 143, 168, 0.20) 100%);
}
.about-page .footer-pill:hover {
  background: linear-gradient(160deg, rgba(79, 167, 189, 0.55) 0%, rgba(42, 143, 168, 0.40) 100%);
  border-color: rgba(140, 199, 216, 0.45);
  box-shadow:
    0 8px 28px rgba(42, 143, 168, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Back-to-top button + label */
.about-page .back-to-top-btn {
  background: rgba(15, 98, 120, 0.10);
  border-color: rgba(15, 98, 120, 0.30);
  color: rgba(15, 98, 120, 0.70);
}
.about-page .back-to-top-btn:hover {
  background: rgba(15, 98, 120, 0.18);
  color: rgb(15, 98, 120);
  border-color: rgba(15, 98, 120, 0.55);
}
.about-page .back-to-top-label { color: rgba(15, 98, 120, 0.55); }
.about-page #scrollUp:hover ~ .back-to-top-label,
.about-page .back-to-top-label:hover { color: rgba(15, 98, 120, 0.85); }

/* View Gallery link (Our Story) */
.about-page .about-view-more .rooms-dynamic-view-more {
  color: #10768F;
  text-decoration-color: rgba(16, 118, 143, 0.45);
}
.about-page .about-view-more .rooms-dynamic-view-more:hover {
  color: #0E5264;
}

/* Google Reviews link (Testimonials) */
.about-page .google-reviews-link {
  color: #10768F;
  text-decoration-color: rgba(16, 118, 143, 0.45);
}
.about-page .google-reviews-link:hover {
  color: #0E5264;
}

/* Map container + placeholder */
.about-page .map-container {
  background: #e9eff3;
  border-color: rgba(15, 98, 120, 0.15);
}
.about-page .map-placeholder {
  background: linear-gradient(135deg, #e9eff3 0%, #d4e3eb 100%);
  border-color: rgba(15, 98, 120, 0.25);
  color: rgba(15, 98, 120, 0.5);
}

/* Food & Hospitality (offers) — blue tooltip panel */
.about-page #offer-tooltip {
  background: rgba(12, 74, 110, 0.92);
}
.about-page .offer-tooltip-icon svg {
  color: #4FA7BD;
  filter: drop-shadow(0 0 6px rgba(79, 167, 189, 0.35));
}

/* Food & Hospitality (offers) — blue gallery arrows */
.about-page .room-gallery-nav {
  background: rgba(79, 167, 189, 0.28);
}
.about-page .room-gallery-prev:hover,
.about-page .room-gallery-next:hover {
  background: rgba(79, 167, 189, 0.45);
}

/* Food & Hospitality (offers) — white gallery dashes */
.about-page .rooms-dash {
  background: rgba(255, 255, 255, 0.3);
}
.about-page .rooms-dash.active {
  background: #ffffff;
}

/* Food & Hospitality (offers) — more transparent ambient gallery (localized) */
.about-page #offers > .offers-ambient-bg.active {
  opacity: 0.5;
}

/* Reduce vertical gap between testimonials and location (localized to About) */
.about-page #testimonials {
  padding-bottom: 2.5rem;
}
.about-page #location {
  padding-top: 2.5rem;
}
@media (min-width: 768px) {
  .about-page #testimonials {
    padding-bottom: 4rem;
  }
  .about-page #location {
    padding-top: 4rem;
  }
}

/* ── Floating Book Now CTA (blue variants, bottom-right anchored) ──
   Mirrors the Our Rooms sticky CTAs; scoped to the About page only.
   Light blue against dark backgrounds, dark blue against white/light ones. */
.about-page .sticky-cta-label { transition: color 0.4s ease; }
.about-page .sticky-ctas .cta-glass-btn {
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease-out;
}

/* Dark-blue variant (default — over light/white sections) */
.about-page .sticky-ctas .cta-glass-btn {
  background: linear-gradient(160deg, rgba(16,118,143,0.55) 0%, rgba(14,82,100,0.35) 100%);
  border: 1px solid rgba(14,82,100,0.28);
  box-shadow: 0 6px 24px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.10);
}
.about-page .sticky-ctas .cta-glass-btn:hover {
  background: linear-gradient(160deg, rgba(16,118,143,0.85) 0%, rgba(14,82,100,0.65) 100%);
  box-shadow: 0 10px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.20);
}

/* Light-blue variant (over dark sections) */
.about-page .sticky-ctas.sticky-cta--light .cta-glass-btn {
  background: linear-gradient(160deg, rgba(79,167,189,0.65) 0%, rgba(16,118,143,0.45) 100%);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.05);
}
.about-page .sticky-ctas.sticky-cta--light .cta-glass-btn:hover {
  background: linear-gradient(160deg, rgba(79,167,189,0.85) 0%, rgba(16,118,143,0.65) 100%);
  box-shadow: 0 10px 32px rgba(79,167,189,0.25), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.15);
}
.about-page .sticky-ctas.sticky-cta--light .sticky-cta-label { color: rgba(255,255,255,0.9); }

/* Fixed bottom-right anchor (aligned with constrained-content) */
.about-page .sticky-ctas {
  position: fixed; bottom: 4rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem;
  z-index: 40;
  right: calc((100vw - 1400px) / 2 + 100px);
}
@media (max-width: 1600px) {
  .about-page .sticky-ctas { right: 100px; }
}
@media (max-width: 1024px) {
  .about-page .sticky-ctas { right: 20px; }
}
.about-page .sticky-cta-label {
  font-family: "AnekDevanagari", sans-serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: #0E5264;
  margin-bottom: 2px; margin-right: 4px;
  text-align: right;
}
body.nep .about-page .sticky-cta-label { letter-spacing: 0; }
.about-page .sticky-cta-buttons { display: flex; gap: 0.75rem; }

/* Hide/fade once the footer is in view */
.about-page .sticky-ctas {
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 1; transform: translateY(0);
}
.about-page .sticky-ctas.cta-hidden {
  opacity: 0; transform: translateY(12px);
  pointer-events: none;
}
@media (max-width: 640px) {
  .about-page .sticky-ctas { justify-content: center; flex-wrap: wrap; }
  .about-page .sticky-ctas .cta-glass-btn { width: auto; max-width: none; }
}

/* ══════════════════════════════════════════════════════════════
   WHAT WE OFFER — "EVERY MOMENT" EXPERIENCE STRIP
   Horizontal equivalent of the Our Rooms hero accordion:
   flex row of photo panels, active panel springs wider via
   flex-grow. Unique class names — no effect on other pages.
   ══════════════════════════════════════════════════════════════ */
.strip-accordion {
  position: relative;
  display: flex;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  margin-top: 3.5rem;
}
.strip-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background-color: #0E2A38;
  /* Smooth grow/shrink on select & deselect — same curve + cadence as the
     photo zoom on ::after so the two animations read as one motion. */
  transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
/* Photo layer — carries the panel image so it can slowly zoom in while
   the panel is active and zoom back out identically on deselect. */
.strip-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--panel-photo);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}
/* Muted green veil over inactive panels; lifts off when active.
   About-page (blue theme) overrides to the muted sky-blue veil below. */
.strip-accordion .strip-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,35,18,0.42), rgba(8,35,18,0.30));
  opacity: 1;
  transition: opacity 0.35s ease;
  z-index: 1;
  pointer-events: none;
}
.about-page .strip-panel::before {
  background: linear-gradient(to bottom, rgba(12,45,64,0.42), rgba(12,45,64,0.30));
}
/* Stacked strip rows (Food & Hospitality) sit flush — no vertical gap */
.about-page .strip-accordion--flush { margin-top: 0; }
.strip-accordion .strip-panel:not(.active):hover::before { opacity: 0.68; }
.strip-panel.active { flex-grow: 2.2; cursor: default; }
.strip-accordion .strip-panel.active::before { opacity: 0.08; }
@media (prefers-reduced-motion: no-preference) {
  .strip-panel.active::after { transform: scale(1.08); }
}
.strip-panel:focus-visible {
  outline: 2px solid #4FA7BD;
  outline-offset: -4px;
  z-index: 2;
}
@media (max-width: 768px) {
  .strip-accordion {
    flex-direction: column;
    height: 70vh;
    min-height: 480px;
    margin-top: 2.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .strip-panel,
  .strip-panel::before,
  .strip-panel::after { transition: none; }
  .scroll-hint-icon { animation: none; }
}

/* ── Scroll-hint icon ──────────────────────────────────────── */
.scroll-hint-icon {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 10;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
  animation: hint-blink 1.8s ease-in-out infinite;
  transition: opacity 2s ease-in;
  display: flex;
  align-items: center;
}
.scroll-hint-icon svg {
  width: 11px;
  height: auto;
  flex-shrink: 0;
  transform: translateY(-4px);
}
.scroll-hint-icon.hint-stop {
  animation: none;
}
.scroll-hint-icon.hint-dismissed {
  animation: none;
  opacity: 0;
}
.scroll-hint-label {
  display: inline;
  margin-left: 6px;
  font-family: 'AnekDevanagari', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  vertical-align: middle;
}
@keyframes hint-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@media (max-width: 768px) {
  .scroll-hint-icon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* ── GALLERY GRID — CSS Grid mosaic with animated tracks
   Scoped to #gallery only. CSS Grid with @property-driven custom
   properties for smooth grid-template-columns/rows transitions.
   Fixed container height — never changes on selection. All
   non-selected panels shrink uniformly when one is selected. ── */
.gallery-grid {
  display: grid;
  gap: 0;
  width: 100%;
  height: 110vh;
  min-height: 800px;
  background-color: #0E2A38;
  grid-template-columns: var(--gc1) var(--gc2) var(--gc3) var(--gc4) var(--gc5);
  grid-template-rows: var(--gr1) var(--gr2) var(--gr3) var(--gr4) var(--gr5);
  transition:
    grid-template-columns 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#gallery .strip-panel {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
/* ── GALLERY SECTION — image background, blue overlay, breathing room ── */
#gallery {
  padding-bottom: 6rem;
  background-image: url('assets/images/pool_bg.webp');
  background-size: cover;
  background-position: center;
}
#gallery::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14, 82, 100, 0.52) 0%,
    rgba(14, 82, 100, 0.42) 50%,
    rgba(14, 82, 100, 0.52) 100%
  );
  pointer-events: none;
  z-index: 0;
}
#gallery .constrained-content {
  position: relative;
  z-index: 1;
}
#gallery .gallery-grid {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  #gallery { padding-bottom: 8rem; }
}
/* Veil & photo zoom transitions inherited from base .strip-panel */
@media (prefers-reduced-motion: reduce) {
  .gallery-grid { transition: none; }
}
/* ── Mobile: 4 columns × 6 rows ── */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: var(--gc1) var(--gc2) var(--gc3) var(--gc4);
    grid-template-rows: var(--gr1) var(--gr2) var(--gr3) var(--gr4) var(--gr5) var(--gr6);
    height: auto;
    min-height: 0;
    aspect-ratio: 2 / 3;
  }
  .gallery-grid .strip-panel:last-child { display: none; }
}

/* ── HOMEPAGE DRONE VIDEO BAND — full-width looping video directly under the
   #offers strip-accordion. Matches the strip's height on desktop (60vh/400px);
   on mobile (≤768px) it runs much shorter (35vh/240px) so the wide drone
   footage is barely cropped vertically. Unique class names — no effect on
   other pages. ── */
.drone-video-band {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
  background-image: url('assets/images/green_bg2.webp');
  background-size: cover;
  background-position: center;
}
.drone-video-band .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px);
  transform: scale(1.1);
}
.drone-video-band video:not(.bg-video) {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
@media (min-width: 769px) {
  .drone-video-band video:not(.bg-video) {
    width: 75%;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .drone-video-band {
    height: 35vh;
    min-height: 240px;
  }
  .drone-video-band .bg-video { display: none; }
}

/* ── DESKTOP-ONLY PARALLAX — `fixed` background-attachment ──
   `fixed` was removed from the inline backgrounds (it can't be overridden by a
   stylesheet rule, so on mobile it pinned the image to the viewport and
   over-stretched the `cover` up past native resolution, showing pixels).
   Attachment now lives here and is re-enabled only above the mobile breakpoint;
   below 769px it stays the browser default `scroll`, so every backdrop sizes to
   its own section and never zooms. Add any future fixed-backdrop section to
   this selector — never hardcode `background-attachment: fixed` inline. */
@media (min-width: 769px) {
  #offers,
  body.menu-page #rooms,
  #amenities { background-attachment: fixed; }
}

/* ── MOBILE TEXT ALIGNMENT — centre all text ≤768px ──
   One rule on body: text-align inherits, so every heading, paragraph and
   list without its own alignment centres on phones. Explicit rules still
   win (top-left nav keeps its `text-align: left`; `.text-center` etc.
   unaffected). Desktop (>768px) is untouched. */
@media (max-width: 768px) {
  body { text-align: center; }
}

/* ── ABOUT-THEME HEROES — static faded photo backdrop (.about-page scoped) ──
   A single photo sits at lowered opacity over the deep-blue #0E5264 hero
   base (What-We-Offer: hills.webp, About Us: reception.webp). Pure CSS —
   no cycling, no JS. Scoped here; green-page heroes are unaffected. */
.about-page .hero-photo-cycle img { opacity: 0.35; }

/* ═══════════════════════════════════════════════════════════════
   COMPILED UTILITY CLASSES (Replaces Tailwind Play CDN)
   ═══════════════════════════════════════════════════════════════ */
.pointer-events-none {
  pointer-events: none
}

.static {
  position: static
}

.fixed {
  position: fixed
}

.absolute {
  position: absolute
}

.relative {
  position: relative
}

.sticky {
  position: sticky
}

.inset-0 {
  inset: 0px
}

.-top-5 {
  top: -1.25rem
}

.right-0 {
  right: 0px
}

.isolate {
  isolation: isolate
}

.z-10 {
  z-index: 10
}

.mx-auto {
  margin-left: auto;
  margin-right: auto
}

.mb-10 {
  margin-bottom: 2.5rem
}

.mb-12 {
  margin-bottom: 3rem
}

.mb-14 {
  margin-bottom: 3.5rem
}

.mb-16 {
  margin-bottom: 4rem
}

.mb-2 {
  margin-bottom: 0.5rem
}

.mb-3 {
  margin-bottom: 0.75rem
}

.mb-4 {
  margin-bottom: 1rem
}

.mb-5 {
  margin-bottom: 1.25rem
}

.mb-6 {
  margin-bottom: 1.5rem
}

.mb-8 {
  margin-bottom: 2rem
}

.mt-1 {
  margin-top: 0.25rem
}

.mt-10 {
  margin-top: 2.5rem
}

.mt-14 {
  margin-top: 3.5rem
}

.mt-16 {
  margin-top: 4rem
}

.mt-2 {
  margin-top: 0.5rem
}

.mt-6 {
  margin-top: 1.5rem
}

.mt-8 {
  margin-top: 2rem
}

.block {
  display: block
}

.flex {
  display: flex
}

.inline-flex {
  display: inline-flex
}

.\!grid {
  display: grid !important
}

.grid {
  display: grid
}

.hidden {
  display: none
}

.h-0\.5 {
  height: 0.125rem
}

.h-12 {
  height: 3rem
}

.h-4 {
  height: 1rem
}

.h-5 {
  height: 1.25rem
}

.h-8 {
  height: 2rem
}

.h-full {
  height: 100%
}

.h-px {
  height: 1px
}

.min-h-\[52vh\] {
  min-height: 52vh
}

.min-h-screen {
  min-height: 100vh
}

.w-12 {
  width: 3rem
}

.w-4 {
  width: 1rem
}

.w-5 {
  width: 1.25rem
}

.w-8 {
  width: 2rem
}

.w-full {
  width: 100%
}

.max-w-2xl {
  max-width: 42rem
}

.max-w-3xl {
  max-width: 48rem
}

.max-w-4xl {
  max-width: 56rem
}

.max-w-\[680px\] {
  max-width: 680px
}

.max-w-full {
  max-width: 100%
}

.max-w-md {
  max-width: 28rem
}

.max-w-xl {
  max-width: 36rem
}

.max-w-xs {
  max-width: 20rem
}

.flex-1 {
  flex: 1 1 0%
}

.flex-shrink {
  flex-shrink: 1
}

.shrink {
  flex-shrink: 1
}

.shrink-0 {
  flex-shrink: 0
}

.flex-grow {
  flex-grow: 1
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.resize {
  resize: both
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}

.flex-col {
  flex-direction: column
}

.flex-wrap {
  flex-wrap: wrap
}

.items-center {
  align-items: center
}

.items-stretch {
  align-items: stretch
}

.justify-center {
  justify-content: center
}

.justify-between {
  justify-content: space-between
}

.gap-0\.5 {
  gap: 0.125rem
}

.gap-12 {
  gap: 3rem
}

.gap-2 {
  gap: 0.5rem
}

.gap-2\.5 {
  gap: 0.625rem
}

.gap-3 {
  gap: 0.75rem
}

.gap-4 {
  gap: 1rem
}

.gap-8 {
  gap: 2rem
}

.overflow-hidden {
  overflow: hidden
}

.rounded-2xl {
  border-radius: 1rem
}

.rounded-full {
  border-radius: 9999px
}

.rounded-xl {
  border-radius: 0.75rem
}

.border {
  border-width: 1px
}

.border-t {
  border-top-width: 1px
}

.border-stone-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 244 / var(--tw-border-opacity, 1))
}

.border-stone-200\/70 {
  border-color: rgb(231 229 228 / 0.7)
}

.bg-\[\#2A8FA8\]\/40 {
  background-color: rgb(42 143 168 / 0.4)
}

.bg-\[\#4FA7BD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(79 167 189 / var(--tw-bg-opacity, 1))
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2)
}

.bg-green-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1))
}

.bg-green-400\/40 {
  background-color: rgb(74 222 128 / 0.4)
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1))
}

.bg-green-500\/40 {
  background-color: rgb(34 197 94 / 0.4)
}

.bg-stone-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 249 / var(--tw-bg-opacity, 1))
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4)
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.from-green-950\/50 {
  --tw-gradient-from: rgb(5 46 22 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 46 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.via-green-900\/35 {
  --tw-gradient-to: rgb(20 83 45 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(20 83 45 / 0.35) var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.to-green-950\/55 {
  --tw-gradient-to: rgb(5 46 22 / 0.55) var(--tw-gradient-to-position)
}

.bg-cover {
  background-size: cover
}

.bg-center {
  background-position: center
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain
}

.p-8 {
  padding: 2rem
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem
}

.pb-0 {
  padding-bottom: 0px
}

.pb-14 {
  padding-bottom: 3.5rem
}

.pb-2 {
  padding-bottom: 0.5rem
}

.pb-8 {
  padding-bottom: 2rem
}

.pt-16 {
  padding-top: 4rem
}

.pt-20 {
  padding-top: 5rem
}

.pt-6 {
  padding-top: 1.5rem
}

.pt-8 {
  padding-top: 2rem
}

.text-left {
  text-align: left
}

.text-center {
  text-align: center
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem
}

.text-\[10px\] {
  font-size: 10px
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem
}

.font-bold {
  font-weight: 700
}

.font-semibold {
  font-weight: 600
}

.uppercase {
  text-transform: uppercase
}

.italic {
  font-style: italic
}

.leading-none {
  line-height: 1
}

.leading-relaxed {
  line-height: 1.625
}

.leading-tight {
  line-height: 1.25
}

.tracking-wide {
  letter-spacing: 0.025em
}

.tracking-widest {
  letter-spacing: 0.1em
}

.text-\[\#0E5264\] {
  --tw-text-opacity: 1;
  color: rgb(14 82 100 / var(--tw-text-opacity, 1))
}

.text-\[\#10768F\] {
  --tw-text-opacity: 1;
  color: rgb(16 118 143 / var(--tw-text-opacity, 1))
}

.text-\[\#2A8FA8\] {
  --tw-text-opacity: 1;
  color: rgb(42 143 168 / var(--tw-text-opacity, 1))
}

.text-\[\#4FA7BD\] {
  --tw-text-opacity: 1;
  color: rgb(79 167 189 / var(--tw-text-opacity, 1))
}

.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity, 1))
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1))
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1))
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1))
}

.text-stone-300 {
  --tw-text-opacity: 1;
  color: rgb(214 211 209 / var(--tw-text-opacity, 1))
}

.text-stone-400 {
  --tw-text-opacity: 1;
  color: rgb(168 162 158 / var(--tw-text-opacity, 1))
}

.text-stone-500 {
  --tw-text-opacity: 1;
  color: rgb(120 113 108 / var(--tw-text-opacity, 1))
}

.text-stone-600 {
  --tw-text-opacity: 1;
  color: rgb(87 83 78 / var(--tw-text-opacity, 1))
}

.text-stone-700 {
  --tw-text-opacity: 1;
  color: rgb(68 64 60 / var(--tw-text-opacity, 1))
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8)
}

.text-white\/95 {
  color: rgb(255 255 255 / 0.95)
}

.underline {
  text-decoration-line: underline
}

.opacity-60 {
  opacity: 0.6
}

.opacity-70 {
  opacity: 0.7
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline {
  outline-style: solid
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.delay-0 {
  transition-delay: 0s
}

@media (min-width: 640px) {
  .sm\:h-14 {
    height: 3.5rem
  }

  .sm\:h-6 {
    height: 1.5rem
  }

  .sm\:w-14 {
    width: 3.5rem
  }

  .sm\:w-6 {
    width: 1.5rem
  }

  .sm\:max-w-sm {
    max-width: 24rem
  }

  .sm\:gap-4 {
    gap: 1rem
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
  }
}

@media (min-width: 768px) {
  .md\:col-span-1 {
    grid-column: span 1 / span 1
  }

  .md\:mb-12 {
    margin-bottom: 3rem
  }

  .md\:mt-20 {
    margin-top: 5rem
  }

  .md\:mt-24 {
    margin-top: 6rem
  }

  .md\:max-w-lg {
    max-width: 32rem
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .md\:flex-row {
    flex-direction: row
  }

  .md\:gap-16 {
    gap: 4rem
  }

  .md\:gap-6 {
    gap: 1.5rem
  }

  .md\:gap-8 {
    gap: 2rem
  }

  .md\:p-10 {
    padding: 2.5rem
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem
  }

  .md\:pb-0 {
    padding-bottom: 0px
  }

  .md\:pt-24 {
    padding-top: 6rem
  }

  .md\:pt-28 {
    padding-top: 7rem
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1
  }
}

@media (min-width: 1024px) {
  .lg\:max-w-xl {
    max-width: 36rem
  }
}