/* The Garud Forest, Tadoba - site stylesheet (built from build/src by build_assets.py) */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Mulish:wght@300;400;500;600;700&family=Cinzel:wght@600&family=Caveat:wght@400;500;600&display=swap');

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --beige:#cfcfc8;
  --beige-soft:#f4f4f1;
  --beige-line:#e4e4df;
  --brown:#003c32;
  --brown-deep:#002a23;
  --sage:#1d5a4d;
  --sage-soft:#efefeb;
  --ink:#003c32;
  --ink-soft:rgba(0,60,50,.64);
  --ink-faint:rgba(0,60,50,.42);
  --line:rgba(0,60,50,.14);
  --ease:cubic-bezier(.4,0,.2,1);
  --radius:3px;
  --serif:'Cormorant Garamond','Garamond','Times New Roman',serif;
  --sans:'Mulish','Helvetica Neue',Arial,sans-serif;
  --max:1280px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:400; color:var(--ink); margin:0;
  text-wrap:balance; letter-spacing:.01em;
}
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.container{ max-width:var(--max); margin:0 auto; padding:0 24px; position:relative; }
@media (max-width:1023px){ .container{ padding:0 20px; } }
@media (max-width:639px){ .container{ padding:0 16px; } }

.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--sage); display:block; margin-bottom:14px;
}

section{ position:relative; padding:80px 0; }
@media (max-width:1023px){ section{ padding:64px 0; } }
@media (max-width:639px){ section{ padding:48px 0; } }

.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem,3.8vw,2.8rem); margin-bottom:16px; }
.section-head p{ color:var(--ink-soft); font-size:1.02rem; }

a:focus-visible, button:focus-visible{ outline:2px solid var(--brown-deep); outline-offset:3px; border-radius:2px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- ridge divider (recurring terrain motif) ---------- */
.ridge{ display:block; width:100%; height:auto; position:relative; z-index:3; margin-bottom:-1px; }
.ridge-flip{ transform:scaleX(-1); }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  padding:16px 36px; border-radius:0; border:1px solid transparent; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn-primary{ background:var(--brown); color:#ffffff; }
.btn-sm{ padding:12px 26px; font-size:.7rem; }
.btn-primary:hover{ background:var(--brown-deep); }
.btn-secondary{ background:transparent; color:var(--brown-deep); border-color:var(--brown); }
.btn-secondary:hover{ background:var(--brown); color:#ffffff; }
.btn-on-dark{ border-color:rgba(255,255,255,.6); color:#ffffff; }
.btn-on-dark:hover{ background:#ffffff; color:var(--brown-deep); border-color:#ffffff; }
.link-cta{
  color:var(--brown-deep); text-decoration:none; font-size:.82rem; font-weight:600; letter-spacing:.04em;
  display:inline-block; border-bottom:1px solid var(--brown); padding-bottom:2px;
  transition:border-color .15s var(--ease), letter-spacing .15s var(--ease);
}
.link-cta:hover{ border-color:var(--brown-deep); letter-spacing:.08em; }

/* ---------- header / nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 0;
  transition:background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.brand img{ width:220px; height:auto; object-fit:contain; }
.brand span{ font-family:var(--serif); font-size:1.15rem; color:#ffffff; transition:color .3s var(--ease); }
.brand small{ display:block; font-family:var(--sans); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.65); transition:color .3s var(--ease); }
.brand .logo-dark{ display:none; }
.brand .logo-light{ height:50px; }

.main-nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; flex:1; }
.main-nav a{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); text-decoration:none;
  padding-bottom:4px; border-bottom:1px solid transparent; transition:border-color .15s var(--ease), color .15s var(--ease);
  white-space:nowrap;
}
.main-nav a:hover{ color:#ffffff; border-color:var(--beige); }
.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-actions .btn{ padding:12px 24px; flex-shrink:0; }
.hamburger-btn{ display:none; width:26px; height:18px; position:relative; background:none; border:none; cursor:pointer; padding:0; }
.hamburger-btn span{ position:absolute; left:0; right:0; height:2px; background:#ffffff; border-radius:2px; transition:background .3s var(--ease); }
.hamburger-btn span:nth-child(1){ top:0; } .hamburger-btn span:nth-child(2){ top:8px; } .hamburger-btn span:nth-child(3){ top:16px; }

.site-header.scrolled{ background:var(--bg); box-shadow:0 4px 24px -12px rgba(0,60,50,.18); padding:14px 0; }
.site-header.scrolled .brand span{ color:var(--ink); }
.site-header.scrolled .brand small{ color:var(--ink-faint); }
.site-header.scrolled .brand .logo-light{ display:none; }
.site-header.scrolled .brand .logo-dark{ display:block; }
.site-header.scrolled .main-nav a{ color:var(--ink-soft); }
.site-header.scrolled .main-nav a:hover{ color:var(--ink); border-color:var(--brown); }
.site-header.scrolled .hamburger-btn span{ background:var(--ink); }
.site-header.scrolled .btn-on-dark{ border-color:var(--brown); color:var(--brown-deep); }
.site-header.scrolled .btn-on-dark:hover{ background:var(--brown); color:#ffffff; }

@media (max-width:960px){
  .main-nav{ display:none; }
  .hamburger-btn{ display:block; }
}

.mobile-menu{
  position:fixed; inset:0; background:var(--bg); z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease);
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{ font-family:var(--serif); font-size:1.4rem; color:var(--ink); text-decoration:none; }
.mobile-menu .btn{ margin-top:10px; }
.mobile-menu-close{ position:absolute; top:26px; right:26px; width:40px; height:40px; border:none; background:none; cursor:pointer; font-size:1.6rem; color:var(--ink); line-height:1; }

/* ---------- header / nav v2 (brand-hub style; scoped with .nav-v2 so pages not yet migrated keep the nav above) ---------- */
.site-header.nav-v2 .container{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; }
.site-header.nav-v2 .brand{ justify-self:center; gap:0; height:36px; overflow:hidden; align-items:center; }
.site-header.nav-v2 .brand img{ width:auto; height:117.5px; object-fit:contain; }
.site-header.nav-v2 .header-actions{ justify-self:end; }
.site-header.nav-v2 .hamburger-btn{
  display:flex; align-items:center; gap:10px; justify-self:start; width:auto; height:auto;
}
.site-header.nav-v2 .hamburger-btn > .hamburger-icon{
  position:relative; top:auto; left:auto; right:auto; width:24px; height:16px; background:none; border-radius:0;
}
.site-header.nav-v2 .hamburger-btn > .hamburger-label{
  position:static; top:auto; left:auto; right:auto; height:auto; background:none; border-radius:0;
}
.site-header.nav-v2.scrolled .hamburger-icon span{ background:var(--ink); }
.site-header.nav-v2.scrolled .hamburger-label{ color:var(--ink); }
@media (max-width:800px){ .site-header.nav-v2 .header-actions{ display:none; } }
.nav-call-btn{
  display:none; grid-column:3; justify-self:end; width:38px; height:38px; align-items:center; justify-content:center;
  background:none; border:1px solid rgba(255,255,255,.6); color:#ffffff; flex-shrink:0;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.site-header.scrolled .nav-call-btn{ border-color:var(--brown); color:var(--brown-deep); }
.nav-call-btn:hover{ background:var(--brown); border-color:var(--brown); color:#ffffff; }
.nav-call-btn svg{ width:17px; height:17px; fill:currentColor; }
@media (max-width:800px){ .nav-call-btn{ display:flex; } }

.hamburger-icon{ width:24px; height:16px; position:relative; flex-shrink:0; }
.hamburger-icon span{ position:absolute; left:0; right:0; height:2px; background:#ffffff; border-radius:2px; transition:background .3s var(--ease); }
.hamburger-icon span:nth-child(1){ top:0; } .hamburger-icon span:nth-child(2){ top:7px; } .hamburger-icon span:nth-child(3){ top:14px; }
.hamburger-label{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#ffffff;
  transition:color .3s var(--ease); white-space:nowrap;
}
@media (max-width:640px){ .hamburger-label{ display:none; } }

.pick-retreat{ position:relative; }
.pick-retreat-chevron{ width:10px; height:10px; flex-shrink:0; }
.pick-retreat-trigger{ background:none; }
.pick-retreat-menu{
  position:absolute; top:100%; right:0; margin-top:10px; min-width:200px;
  background:var(--surface); border-radius:8px; box-shadow:0 20px 40px -16px rgba(0,60,50,.35);
  padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index:10;
}
.pick-retreat:hover .pick-retreat-menu,
.pick-retreat:focus-within .pick-retreat-menu,
.pick-retreat.open .pick-retreat-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.pick-retreat-menu a{
  display:block; padding:10px 14px; border-radius:6px; text-decoration:none;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.03em; color:var(--ink-soft);
  white-space:nowrap; transition:background .15s var(--ease), color .15s var(--ease);
}
.pick-retreat-menu a:hover{ background:var(--beige-soft); color:var(--ink); }

.mobile-menu.nav-v2{ display:block; background:none; align-items:initial; justify-content:initial; gap:0; }
.mobile-menu-overlay{ position:absolute; inset:0; background:rgba(0,26,21,.45); opacity:0; transition:opacity .3s var(--ease); }
.mobile-menu.open .mobile-menu-overlay{ opacity:1; }
.mobile-menu-panel{
  position:absolute; top:0; left:0; height:100%; width:86%; max-width:340px;
  background:var(--bg); box-shadow:0 0 44px rgba(0,26,21,.28);
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .3s var(--ease);
}
.mobile-menu.open .mobile-menu-panel{ transform:translateX(0); }
.mobile-menu-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px 18px; border-bottom:1px solid rgba(0,60,50,.1); flex-shrink:0;
}
.mobile-menu-home{ font-family:var(--serif); font-size:1.2rem; color:var(--ink); text-decoration:none; }
.mobile-menu-home:hover{ color:var(--brown); }
.mobile-menu.nav-v2 .mobile-menu-close{
  position:static; top:auto; right:auto; width:auto; height:auto; border:none; background:none; cursor:pointer;
  font-size:1.5rem; color:var(--ink); line-height:1;
}
.mobile-menu-links{
  flex:1; overflow-y:auto; padding:8px 24px; display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:var(--beige) transparent;
}
.mobile-menu-links::-webkit-scrollbar{ width:6px; }
.mobile-menu-links::-webkit-scrollbar-track{ background:transparent; }
.mobile-menu-links::-webkit-scrollbar-thumb{ background:var(--beige); border-radius:3px; }
.mobile-menu-links > a{
  display:block; padding:13px 0; font-family:var(--serif); font-size:1.1rem; color:var(--ink); text-decoration:none;
  border-bottom:1px solid rgba(0,60,50,.07); text-align:left;
}
.mobile-menu-links > a:hover{ color:var(--brown); }

.drawer-dropdown{ border-bottom:1px solid rgba(0,60,50,.07); }
.drawer-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:13px 0; background:none; border:none; cursor:pointer;
}
.drawer-toggle a, .drawer-toggle span{ font-family:var(--serif); font-size:1.1rem; color:var(--ink); text-decoration:none; }
.drawer-toggle a:hover{ color:var(--brown); }
.drawer-chevron{ width:14px; height:14px; color:var(--ink-faint); flex-shrink:0; transition:transform .3s var(--ease); }
.drawer-toggle[aria-expanded="true"] .drawer-chevron{ transform:rotate(180deg); }
.drawer-submenu{ padding:0 0 10px 16px; display:flex; flex-direction:column; }
.drawer-submenu.hidden{ display:none; }
.drawer-submenu a{
  display:block; padding:9px 0; font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); text-decoration:none; text-align:left;
}
.drawer-submenu a:hover{ color:var(--brown); }

.mobile-menu-foot{ padding:20px 24px; border-top:1px solid rgba(0,60,50,.1); flex-shrink:0; }
.mobile-menu-foot .btn{ display:block; text-align:center; width:100%; margin-top:0; font-family:var(--sans); font-size:.76rem; color:#ffffff; }

/* ---------- brand strip (site-wide, sits flush above the header) ---------- */
.brand-strip-wrap{ position:fixed; top:0; left:0; right:0; z-index:101; }
.brand-strip{
  display:block; text-align:center;
  background:var(--sage-soft); color:var(--brown-deep);
  font-family:var(--sans); font-size:.7rem; font-weight:600; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase;
  padding:6px 20px; text-decoration:none;
  transition:color .18s var(--ease);
}
.brand-strip:hover{ color:var(--brown); text-decoration:underline; text-underline-offset:3px; }
body.has-brand-strip .site-header{ position:static; }
@media (max-width:639px){
  .brand-strip{ font-size:.62rem; letter-spacing:.1em; padding:10px 16px; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; height:100svh; min-height:620px; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; z-index:0; }
video.hero-bg{ object-position:center center; transform:scale(1.5); transform-origin:center center; }
.hero-slider{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-slider .hero-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s var(--ease); }
.hero-slider .hero-slide.is-active{ opacity:1; }
.hero-dots{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3;
  display:flex; gap:10px;
}
.hero-dot{
  width:8px; height:8px; border-radius:0; background:rgba(255,255,255,.4); border:none; padding:0; cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.hero-dot.is-active{ background:#ffffff; transform:scale(1.3); }
.hero .hero-booking{ position:absolute; left:0; right:0; bottom:calc(6% + 84px); margin-top:0; padding:0 24px; }
.hero-scroll-hint{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,.85); text-decoration:none;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  transition:color .2s var(--ease);
}
.hero-scroll-hint:hover{ color:#fff; }
.hero-scroll-hint svg{ width:16px; height:16px; animation:heroScrollHintBounce 1.6s ease-in-out infinite; }
@keyframes heroScrollHintBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@media (prefers-reduced-motion:reduce){ .hero-scroll-hint svg{ animation:none; } }
@media (max-width:639px){ .hero-scroll-hint{ display:none; } }
.hero .booking-bar{
  background:rgba(0,26,21,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15); box-shadow:0 14px 30px -16px rgba(0,0,0,.45);
}
.hero .booking-field{ padding:11px 20px; }
.hero .booking-field label{ color:rgba(255,255,255,.65); margin-bottom:3px; }
.hero .booking-field input[type="date"]{ color:#ffffff; }
.hero .booking-field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.8; }
.hero .booking-field select{ color:#ffffff; }
.hero .booking-field select option{ color:var(--ink); }
.hero .guest-popover select{ color:var(--ink); }
.hero .guest-trigger{ color:#ffffff; }
.hero .booking-divider{ background:rgba(255,255,255,.2); margin:10px 0; }
.hero .booking-submit{ padding:0 32px; }
@media (max-width:1023px){ .hero{ height:82vh; min-height:520px; } }
@media (max-width:639px){ .hero{ height:64vh; min-height:420px; } }
.hero-booking{ position:relative; z-index:3; width:100%; display:flex; justify-content:center; }

/* ---------- hero video control bar ---------- */
.hero-video-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; gap:16px; height:52px; padding:0 20px;
  background:linear-gradient(to top, rgba(0,18,15,.62) 0%, rgba(0,18,15,.32) 70%, rgba(0,18,15,0) 100%);
}
.hvb-btn{
  flex:0 0 auto; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  padding:0; border:none; background:none; cursor:pointer; color:#ffffff; opacity:.9;
  transition:opacity .15s var(--ease);
}
.hvb-btn:hover{ opacity:1; }
.hvb-btn svg{ width:18px; height:18px; }

.hvb-progress{ flex:1 1 auto; display:flex; align-items:center; height:100%; cursor:pointer; touch-action:none; }
.hvb-progress-track{ position:relative; width:100%; height:3px; border-radius:2px; background:rgba(255,255,255,.3); }
.hvb-progress-fill{ position:absolute; left:0; top:0; height:100%; width:0%; border-radius:2px; background:var(--brown); }
.hvb-progress-thumb{
  position:absolute; top:50%; left:0%; width:11px; height:11px; border-radius:50%; background:#ffffff;
  transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,.4);
}

.hvb-time{ flex:0 0 auto; color:#ffffff; font-family:var(--sans); font-size:.7rem; letter-spacing:.02em; min-width:42px; text-align:right; }

.hvb-volume-wrap{ position:relative; flex:0 0 auto; }
.hvb-volume-popover{
  position:absolute; left:50%; bottom:calc(100% + 14px); transform:translateX(-50%);
  display:flex; justify-content:center;
}
.hvb-volume-popover[hidden]{ display:none; }
.hvb-volume-vtrack{ position:relative; width:4px; height:76px; border-radius:2px; background:rgba(255,255,255,.3); cursor:pointer; touch-action:none; }
.hvb-volume-vfill{ position:absolute; left:0; bottom:0; width:100%; height:100%; border-radius:2px; background:#ffffff; }
.hvb-volume-vthumb{
  position:absolute; left:50%; bottom:100%; width:10px; height:10px; border-radius:50%; background:#ffffff;
  transform:translate(-50%,50%); box-shadow:0 1px 4px rgba(0,0,0,.4);
}

@media (max-width:900px){
  .hero-video-bar{ gap:10px; padding:0 14px; height:46px; }
  .hvb-time{ min-width:36px; font-size:.65rem; }
}
@media (max-width:639px){
  .hero-video-bar{ display:none; }
}

/* rotating seal badge — recurring signature widget */
.seal{
  position:absolute; z-index:4; width:132px; height:132px;
  filter:drop-shadow(0 8px 20px rgba(0,26,21,.28));
}
.seal .ring{ animation:seal-spin 34s linear infinite; transform-origin:50% 50%; }
@media (prefers-reduced-motion:reduce){ .seal .ring{ animation:none; } }
@keyframes seal-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.hero .seal{ right:6%; bottom:14%; }
@media (max-width:768px){ .hero .seal{ display:none; } }

/* ---------- booking bar ---------- */
.booking-bar{
  position:relative; z-index:10; background:var(--surface); max-width:900px; width:100%;
  border-radius:0; box-shadow:0 24px 50px -18px rgba(0,26,21,.5);
  display:flex; align-items:stretch; flex-wrap:wrap; text-align:left;
}
.booking-field{ flex:1 1 160px; padding:16px 24px; position:relative; min-width:150px; }
/* this booking bar now carries five fields (city, hotel, dates, guests) instead of
   two, so it needs more room to lay out in a single row before it wraps to mobile */
#bookingForm{ max-width:1180px; }
#bookingForm .booking-field{ flex:1 1 130px; padding:16px 18px; min-width:120px; }
.booking-field label{ display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; font-weight:600; }
.booking-field input[type="date"]{
  width:100%; border:none; background:none; font-family:var(--sans); font-size:.92rem; color:var(--ink); padding:0; cursor:pointer;
}
.booking-field input[type="date"]:focus{ outline:none; }
.booking-field select{
  width:100%; border:none; background:none; font-family:var(--sans); font-size:.92rem; color:var(--ink); padding:0; cursor:pointer;
}
.booking-field select:focus{ outline:none; }
.booking-divider{ width:1px; background:var(--line); margin:14px 0; flex-shrink:0; }
.guest-trigger{ width:100%; text-align:left; background:none; border:none; padding:0; font-family:var(--sans); font-size:.92rem; color:var(--ink); cursor:pointer; }
.booking-submit{ border-radius:0; padding:0 44px; flex:0 0 auto; }

.guest-popover{
  display:none; position:absolute; bottom:calc(100% + 10px); top:auto; right:0; left:auto;
  width:max-content; max-width:min(760px, calc(100vw - 48px)); max-height:70vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:0; box-shadow:0 20px 40px -16px rgba(0,60,50,.3); padding:20px; z-index:20;
}
.rooms-list{ display:flex; flex-direction:row; gap:24px; }
.room-block{ flex:0 0 240px; width:240px; padding:0 24px 0 0; border-right:1px solid var(--line); }
.room-block:last-child{ padding-right:0; border-right:none; }
.room-block-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.room-label{ font-family:var(--serif); font-size:.98rem; font-weight:600; color:var(--brown-deep); }
.room-remove{
  background:none; border:none; color:var(--ink-faint); font-size:1.2rem; line-height:1; padding:2px 4px; cursor:pointer;
  transition:color .15s var(--ease);
}
.room-remove:hover{ color:var(--brown-deep); }
.add-room-btn{
  display:block; width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--line);
  margin-top:16px; padding:14px 0 0; font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--brown-deep); cursor:pointer;
  transition:color .15s var(--ease);
}
.add-room-btn:hover{ color:var(--brown); }
.add-room-btn:disabled{ color:var(--ink-faint); cursor:not-allowed; }
.guest-popover.open{ display:block; }
.guest-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); }
.guest-row:last-of-type{ border-bottom:none; }
.guest-row b{ display:block; font-family:var(--serif); font-size:1rem; color:var(--ink); }
.guest-row span{ font-size:.72rem; color:var(--ink-faint); }
.stepper{ display:flex; align-items:center; gap:14px; }
.step-btn{
  width:28px; height:28px; border-radius:0; border:1px solid var(--brown); background:none; color:var(--brown-deep);
  font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease), color .15s var(--ease);
}
.step-btn:hover{ background:var(--brown); color:#ffffff; }
.step-btn:disabled{ opacity:.35; cursor:not-allowed; border-color:var(--line); color:var(--ink-faint); background:none; }
.stepper span{ min-width:16px; text-align:center; font-weight:600; color:var(--ink); }
.child-ages{ display:flex; flex-direction:column; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.child-age-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.child-age-row > div{ display:flex; align-items:baseline; gap:6px; }
.child-age-row b{ font-family:var(--serif); font-size:1rem; color:var(--ink); white-space:nowrap; }
.child-age-row span{ font-size:.72rem; color:var(--ink-faint); }
.child-age-select{
  border:1px solid var(--line); background:var(--surface); border-radius:0; padding:8px 30px 8px 12px;
  font-family:var(--sans); font-size:.82rem; color:var(--ink); cursor:pointer; min-width:96px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M4 6l4 4 4-4%27 fill=%27none%27 stroke=%27%232d221e%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:11px;
}
.guest-done{
  width:100%; margin-top:14px; padding:11px; background:var(--brown); color:#ffffff; border:none; border-radius:0;
  font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.guest-done:hover{ background:var(--brown-deep); }

@media (max-width:1140px){
  #bookingForm{ flex-direction:column; }
  #bookingForm .booking-field{ flex:0 0 auto; }
  #bookingForm .booking-divider{ width:auto; height:1px; margin:0 18px; }
  #bookingForm .booking-submit{ border-radius:0; padding:18px; width:100%; justify-content:center; }
}
@media (max-width:900px){
  .booking-bar{ flex-direction:column; }
  .hero-booking{ padding-bottom:24px; }
  .booking-divider{ width:auto; height:1px; margin:0 24px; }
  .booking-submit{ border-radius:0; padding:18px; width:100%; justify-content:center; }
  .guest-popover{ left:24px; right:24px; width:auto; max-width:none; }
  .rooms-list{ flex-direction:column; gap:0; }
  .room-block{ flex:1 1 auto; width:100%; padding:14px 0; border-right:none; border-bottom:1px solid var(--line); }
  .room-block:first-child{ padding-top:0; }
  .room-block:last-child{ padding-bottom:0; border-bottom:none; }
}
@media (max-width:639px){
  .hero-booking{ display:none; }
}

/* ---------- about / introduction (editorial travel journal) ---------- */
.about-section{
  --aj-bg:#f6f6f3; --aj-cream:#fafaf8; --aj-green:#003c32; --aj-brown:#002a23; --aj-beige:#d6d6cf;
  background:var(--aj-bg);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
  padding-bottom:70px;
}
.about-grid{
  display:grid; grid-template-columns:auto minmax(0,.86fr) minmax(0,1.1fr);
  gap:0 56px; align-items:start;
}
.about-rail{
  display:flex; flex-direction:column; align-items:center; gap:16px; height:100%; padding-top:6px; color:var(--aj-brown);
}
.about-rail .sprig-rail{ width:16px; height:auto; stroke:var(--aj-green); fill:none; stroke-width:1; opacity:.8; }
.rail-line{ width:1px; flex:1; min-height:40px; background:rgba(0,60,50,.25); }
.rail-text{
  writing-mode:vertical-rl; transform:rotate(180deg); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  white-space:nowrap; color:var(--aj-brown); opacity:.75;
}

.about-eyebrow{ color:var(--aj-green); font-size:.7rem; letter-spacing:.2em; }
.about-copy h1{
  font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.22; color:var(--ink); font-weight:400; max-width:11.5ch;
  scroll-margin-top:144px;
}
.about-divider{ display:flex; align-items:center; gap:14px; margin:26px 0 22px; max-width:280px; }
.about-divider span{ flex:1; height:1px; background:rgba(0,60,50,.3); }
.pinecone{ width:13px; height:auto; flex-shrink:0; stroke:var(--aj-green); fill:none; stroke-width:1; opacity:.85; }
.about-location{
  display:flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--aj-brown); margin-bottom:26px;
}
.about-location .pin{ width:11px; height:auto; stroke:var(--aj-green); fill:none; flex-shrink:0; }
.about-p{ max-width:42ch; font-size:1rem; line-height:1.75; color:var(--ink-soft); }
.about-p + .about-p{ margin-top:16px; }

.about-stats{ display:flex; gap:0; margin-top:40px; padding-top:22px; border-top:1px solid rgba(0,60,50,.18); max-width:420px; }
.about-stats div{ flex:1; position:relative; padding-right:18px; }
.about-stats div + div{ padding-left:18px; }
.about-stats div + div::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:rgba(0,60,50,.22); }
.about-stats b{ display:block; font-family:var(--serif); font-size:2.1rem; color:var(--aj-brown); line-height:1; font-weight:400; }
.about-stats span{ display:block; margin-top:8px; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- polaroid collage ---------- */
.about-collage{ position:relative; aspect-ratio:1/1.12; }
.annotation{
  position:absolute; top:-30px; right:6%; font-family:'Caveat',cursive; font-size:1.15rem; color:var(--aj-brown);
  transform:rotate(-3deg); z-index:5;
}
.polaroid-slot{ position:absolute; }
.slot-main{ top:0; right:0; width:72%; }
.slot-views{ left:0; bottom:8%; width:38%; z-index:2; }
.slot-room{ right:4%; bottom:0; width:40%; z-index:3; }

.polaroid{
  background:var(--aj-cream); padding:10px 10px 34px; box-shadow:0 20px 44px -18px rgba(0,60,50,.4);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); display:block; margin:0;
}
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.polaroid-main{ transform:rotate(-2deg); }
.polaroid-main img{ aspect-ratio:4/4.7; }
.polaroid-main:hover{ transform:rotate(-2deg) translateY(-5px) scale(1.02); box-shadow:0 28px 54px -18px rgba(0,60,50,.46); }
.slot-views .polaroid{ transform:rotate(-4deg); }
.slot-views .polaroid:hover{ transform:rotate(-4deg) translateY(-5px) scale(1.02); }
.slot-room .polaroid{ transform:rotate(3deg); }
.slot-room .polaroid:hover{ transform:rotate(3deg) translateY(-5px) scale(1.02); }
.polaroid figcaption{
  font-family:'Caveat',cursive; font-size:1.15rem; color:var(--aj-brown); text-align:center; padding-top:8px;
}
.tape{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-2deg); width:70px; height:24px;
  background:rgba(214,214,207,.75); box-shadow:0 2px 4px rgba(0,60,50,.15); z-index:4;
}

.about-seal{ position:absolute; left:-30px; bottom:14%; width:100px; height:100px; z-index:5; filter:drop-shadow(0 4px 10px rgba(0,60,50,.18)); }

.about-closing{
  max-width:var(--max); margin:56px auto 0; padding:0 24px; display:flex; align-items:center; justify-content:center; gap:12px;
}
.about-closing .sprig-small{ width:13px; height:auto; stroke:#003c32; fill:none; stroke-width:1; opacity:.75; }
.about-closing span{ font-family:'Caveat',cursive; font-size:1.3rem; color:#002a23; }

.about-contour{
  display:block; width:180px; height:auto; margin:34px auto 0; stroke:#002a23; fill:none; stroke-width:1; opacity:.35;
}

@media (max-width:1100px){
  .about-grid{ grid-template-columns:auto 1fr; }
  .about-collage{ grid-column:1/-1; margin-top:48px; max-width:520px; margin-left:auto; margin-right:auto; }
}
@media (max-width:768px){
  .about-grid{ grid-template-columns:1fr; }
  .about-rail{ display:none; }
  .about-copy h1{ max-width:none; }
  .about-collage{ order:2; margin-top:36px; aspect-ratio:1/1.15; width:100%; }
  .about-p{ max-width:none; }
  .about-stats{ max-width:none; }
  .annotation{ display:none; }
  .about-seal{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .polaroid{ transition:none; }
}

/* ---------- rooms carousel (equal treatment, one at a time) ---------- */
.rooms{ background:var(--ink); color:#f2f2ef; overflow:hidden; }
.rooms .section-head h2, .rooms .section-head p{ color:#f2f2ef; }
.rooms .section-head p{ color:rgba(242,242,239,.7); }
.room-track-wrap{ position:relative; overflow:hidden; }
.room-track{ display:flex; gap:28px; will-change:transform; }
.room-slide{
  flex:0 0 auto; width:min(78vw,780px);
  display:grid; grid-template-columns:1fr 1fr; background:#0c4a3f; border-radius:0; overflow:hidden;
}
.room-slide .media{ position:relative; aspect-ratio:4/3.8; }
.room-slide .media img{ width:100%; height:100%; object-fit:cover; }
.room-slide .index{
  position:absolute; top:18px; left:18px; font-family:var(--serif); font-size:.85rem; color:#f2f2ef;
  background:rgba(0,26,21,.5); backdrop-filter:blur(3px); padding:6px 12px; border-radius:0;
}
.room-slide .body{ padding:38px 34px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.room-slide h3{ font-size:1.5rem; color:#f2f2ef; }
.room-slide .tags{ display:flex; flex-wrap:wrap; gap:8px; }
.room-slide .tag{ font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(242,242,239,.85); border:1px solid rgba(242,242,239,.25); padding:5px 12px; border-radius:0; }
.room-slide p.desc{ font-size:.9rem; color:rgba(242,242,239,.7); }
.room-slide .link-cta{ color:#a3d6c6; border-color:#a3d6c6; align-self:flex-start; }
.room-slide .link-cta:hover{ color:#fff; border-color:#fff; }

.room-controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:40px; }
.room-arrow{
  width:48px; height:48px; border-radius:0; border:1px solid rgba(242,242,239,.3); background:none; color:#f2f2ef;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.room-arrow:hover{ background:rgba(242,242,239,.1); border-color:#f2f2ef; }
.room-arrow svg{ width:18px; height:18px; }
.room-dots{ display:flex; gap:9px; }
.room-dots button{ width:8px; height:8px; border-radius:0; background:rgba(242,242,239,.3); border:none; padding:0; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease); }
.room-dots button.active{ background:#a3d6c6; transform:scale(1.3); }

@media (max-width:900px){
  .room-slide{ grid-template-columns:1fr; width:min(88vw,480px); }
  .room-slide .media{ aspect-ratio:4/3; }
}

/* ---------- facilities marquee ---------- */
.facilities{
  background:var(--surface); overflow:hidden;
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.marquee-row{ position:relative; overflow:hidden; }
.marquee-row::before, .marquee-row::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(28px,6vw,90px); z-index:2; pointer-events:none;
}
.marquee-row::before{ left:0; background:linear-gradient(90deg, var(--surface), transparent); }
.marquee-row::after{ right:0; background:linear-gradient(270deg, var(--surface), transparent); }
.marquee-row + .marquee-row{ margin-top:2px; }
.marquee-track{ display:flex; align-items:stretch; gap:20px; width:max-content; animation:marquee-scroll 56s linear infinite; }
.marquee-track.rev{ animation-name:marquee-scroll-rev; animation-duration:56s; }
.marquee-row:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marquee-scroll-rev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; flex-wrap:wrap; width:100%; justify-content:center; }
}
.facility-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; width:220px; flex:0 0 auto;
  background:var(--surface); border:1px solid var(--line); border-radius:0; padding:26px 24px;
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.facility-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -20px rgba(0,60,50,.3); }
.facility-card .ficon{ width:30px; height:30px; color:var(--brown); }
.facility-card .ficon svg{ width:100%; height:100%; display:block; stroke:currentColor; }
.facility-card .fname{ font-family:var(--serif); font-size:1.1rem; font-weight:400; color:var(--ink); }
.facility-card .fnote{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- dining (full-bleed photo + floating card) ---------- */
.dining{ background:var(--ink); padding:0; }
.dining-media{ position:absolute; inset:0; overflow:hidden; }
.dining-media img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.4); transform-origin:86% 50%; }
.dining-row{ position:relative; z-index:2; min-height:680px; display:flex; align-items:center; justify-content:flex-end; padding:56px 24px; }
.dining-card{
  position:relative; background:var(--beige-soft); border-radius:0; padding:60px 48px;
  max-width:620px; width:100%; text-align:center;
  box-shadow:0 40px 90px -32px rgba(0,26,21,.5);
}
.dining-card h2{ font-size:clamp(1.9rem,3vw,2.5rem); }
.dining-divider{ display:flex; align-items:center; justify-content:center; gap:10px; max-width:200px; margin:18px auto 30px; }
.dining-divider span{ flex:1; height:1px; background:var(--line); }
.dining-divider i{ width:6px; height:6px; border-radius:50%; border:1px solid var(--brown); flex-shrink:0; }
.dining-meta{ display:flex; align-items:flex-start; justify-content:center; margin-bottom:30px; }
.dining-meta div{ flex:0 0 auto; padding:0 20px; border-left:1px solid var(--line); white-space:nowrap; }
.dining-meta div:first-child{ border-left:none; padding-left:0; }
.dining-meta div:last-child{ padding-right:0; }
.dining-meta div span{ display:block; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); font-weight:700; margin-bottom:6px; }
.dining-meta div b{ font-weight:500; font-size:.86rem; color:var(--ink); display:block; }
.dining-card p.desc{ color:var(--ink-soft); font-size:.95rem; line-height:1.7; max-width:42ch; margin:0 auto 34px; }
@media (max-width:900px){
  .dining-media{ position:absolute; inset:0; }
  .dining-media img{ transform:none; }
  .dining-row{ min-height:560px; display:flex; align-items:center; justify-content:center; padding:48px 20px; }
  .dining-card{ margin:0 auto; max-width:100%; padding:44px 28px; }
}
@media (max-width:520px){
  .dining-row{ min-height:480px; padding:40px 16px; }
  .dining-card{ padding:36px 22px; }
  .dining-meta{ flex-wrap:wrap; row-gap:18px; }
  .dining-meta div{ flex:1 1 33%; padding:0 8px; white-space:normal; }
}

/* ---------- experiences (staggered rhythm) ---------- */
.experiences{
  background:var(--bg); position:relative;
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.contour-bg{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }
.exp-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:28px 24px; }
.exp-grid > *:nth-child(2){ transform:translateY(38px); }
.exp-grid > *:nth-child(5){ transform:translateY(38px); }
.exp-card{ border:1px solid var(--line); border-radius:0; padding:34px 28px; background:var(--surface); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.exp-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px -18px rgba(0,60,50,.28); }
.exp-grid > *:nth-child(2):hover, .exp-grid > *:nth-child(5):hover{ transform:translateY(32px); }
.exp-card .num{ font-family:var(--serif); font-size:.85rem; color:var(--beige); display:block; margin-bottom:16px; }
.exp-card svg{ width:28px; height:28px; stroke:var(--sage); margin-bottom:16px; }
.exp-card h3{ font-size:1.15rem; margin-bottom:10px; }
.exp-card p{ font-size:.88rem; color:var(--ink-soft); }
@media (max-width:960px){
  .exp-grid{ grid-template-columns:1fr 1fr; }
  .exp-grid > *:nth-child(2), .exp-grid > *:nth-child(5){ transform:none; }
}
@media (max-width:639px){ .exp-grid{ grid-template-columns:1fr; } }

/* ---------- gallery (asymmetric grid) ---------- */
.gallery{
  background:var(--beige-soft);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.gj-collage{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.78fr) minmax(0,.78fr);
  grid-template-rows:1fr 1fr; gap:12px; margin-top:12px;
}
.gj-track{ display:contents; }
.gj-dots{ display:none; }
.gj-photo{ margin:0; position:relative; overflow:hidden; border-radius:0; cursor:pointer; }
.gj-chalet{ grid-column:1; grid-row:1/3; }
.gj-jacuzzi{ grid-column:2; grid-row:1; aspect-ratio:4/3; }
.gj-reception{ grid-column:3; grid-row:1; aspect-ratio:4/3; }
.gj-room{ grid-column:2; grid-row:2; aspect-ratio:4/3; }
.gj-view{ grid-column:3; grid-row:2; aspect-ratio:4/3; }

.gj-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.gj-photo::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,26,21,.62), transparent 55%);
  opacity:0; transition:opacity .3s var(--ease);
}
.gj-photo:hover img, .gj-photo:focus-visible img{ transform:scale(1.05); }
.gj-photo:hover::after, .gj-photo:focus-visible::after{ opacity:1; }
.gj-photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px; z-index:1; color:#f2f2ef;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gj-photo:hover figcaption, .gj-photo:focus-visible figcaption{ opacity:1; transform:translateY(0); }

@media (max-width:900px){
  .gj-collage{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; }
  .gj-chalet{ grid-column:1/3; grid-row:1; aspect-ratio:16/10; }
  .gj-jacuzzi{ grid-column:1; grid-row:2; }
  .gj-reception{ grid-column:2; grid-row:2; }
  .gj-room{ grid-column:1; grid-row:3; }
  .gj-view{ grid-column:2; grid-row:3; }
}
@media (max-width:640px){
  .gj-collage{ display:block; }
  .gj-track{
    display:flex; flex-wrap:nowrap; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    overscroll-behavior-x:contain; touch-action:pan-x;
    padding:2px 2px 6px; -ms-overflow-style:none; scrollbar-width:none;
  }
  .gj-track::-webkit-scrollbar{ display:none; }
  .gj-chalet, .gj-jacuzzi, .gj-reception, .gj-room, .gj-view{
    grid-column:auto; grid-row:auto; flex:0 0 auto; width:82vw; max-width:340px; aspect-ratio:4/3.4; scroll-snap-align:center;
  }
  .gj-dots{ display:flex; justify-content:center; gap:9px; margin-top:14px; }
  .gj-dots button{
    width:8px; height:8px; border-radius:0; background:rgba(0,60,50,.25); border:none; padding:0;
    cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .gj-dots button.active{ background:var(--brown); transform:scale(1.3); }
}
.gallery-more{ text-align:center; margin-top:44px; }
.exp-more{ text-align:center; margin-top:44px; }

.lightbox{ position:fixed; inset:0; background:rgba(0,26,21,.95); z-index:300; display:none; align-items:center; justify-content:center; padding:40px; }
.lightbox.active{ display:flex; }
.lightbox img{ max-width:min(1100px,90vw); max-height:85vh; object-fit:contain; border-radius:0; }
.lightbox-close{
  position:absolute; top:26px; right:32px; width:44px; height:44px; border-radius:0;
  background:rgba(255,255,255,.12); color:#ffffff; border:1px solid rgba(255,255,255,.3);
  font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* ---------- location: distance dial ---------- */
.location{
  background:var(--surface);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.location-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:48px; align-items:center; }
.dial-wrap{ display:flex; justify-content:center; }
.dial-wrap svg{ width:100%; max-width:460px; height:auto; }
.dial-label{ font-family:var(--sans); font-size:.62rem; letter-spacing:.03em; fill:var(--ink-soft); }
.dial-label b{ font-weight:700; }
.dial-ring{ fill:none; stroke:var(--line); stroke-dasharray:3 5; }
.dial-spoke{ stroke:var(--beige-line); stroke-width:1; }
.dial-point{ fill:var(--sage); }
.dial-center{ fill:var(--brown-deep); }
.dial-center-label{ font-family:var(--serif); font-size:11px; fill:#ffffff; text-anchor:middle; }
@media (max-width:900px){ .location-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- testimonials ---------- */
.testimonial-section{ background:var(--bg); }
.testimonial-row{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; padding:4px 0 8px; }
.testimonial-rail{ display:contents; }
.tst-track{ display:contents; }
.tst-set{ display:contents; }
.tst-set[aria-hidden]{ display:none; }
.testimonial-card{
  flex:0 1 380px; width:clamp(280px,26vw,380px); display:flex; flex-direction:column;
  background:var(--ink); color:#f2f2ef; padding:38px 32px; border-radius:0;
}
.testimonial-card .mark{ width:34px; height:34px; opacity:.5; margin-bottom:18px; stroke:#f2f2ef; fill:none; stroke-width:1.4; }
.testimonial-card p{ font-family:var(--serif); font-size:1.02rem; line-height:1.62; color:#ffffff; }
.testimonial-card cite{ display:block; margin-top:auto; padding-top:24px; font-style:normal; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* mobile only: continuous auto-scrolling marquee, same technique as the parent site's
   "What Our Guests Carry Home" rail -- a duplicated card set animated with CSS only */
@media (max-width:640px){
  .testimonial-row{ display:block; padding:0; }
  .testimonial-rail{ display:block; overflow:hidden; padding:4px 0 8px; }
  .tst-track{ display:flex; align-items:stretch; width:max-content; animation:tstScroll 20s linear infinite; }
  .testimonial-rail:hover .tst-track{ animation-play-state:paused; }
  .tst-set{ display:flex; align-items:stretch; flex:0 0 auto; }
  .tst-set[aria-hidden]{ display:flex; }
  @keyframes tstScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .testimonial-card{ width:78vw; max-width:320px; margin-right:26px; }
}

/* ---------- offers ---------- */
.offers-band{ background:var(--beige-soft); }
.offer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.offer-card{
  position:relative; border-radius:0; overflow:hidden; aspect-ratio:16/10;
  box-shadow:0 20px 44px -22px rgba(0,60,50,.35);
}
.offer-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.offer-card:hover img{ transform:scale(1.06); }
.offer-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,26,21,.85) 0%, rgba(0,26,21,.4) 48%, rgba(0,26,21,0) 72%);
}
.offer-card-body{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding:36px; color:#ffffff;
}
.offer-card .offer-percent{
  font-family:var(--serif); font-size:2.8rem; line-height:1; color:#ffffff;
  display:flex; align-items:flex-start; margin-bottom:10px;
}
.offer-card .offer-percent i{ font-style:normal; font-size:1.2rem; margin-top:4px; }
.offer-card h3{ color:#ffffff; font-size:1.3rem; margin-bottom:8px; }
.offer-card p{ color:rgba(255,255,255,.82); font-size:.92rem; line-height:1.6; max-width:36ch; margin-bottom:18px; }
.offer-card .link-cta{ align-self:flex-start; color:#ffffff; border-color:rgba(255,255,255,.6); }
.offer-card .link-cta:hover{ border-color:#ffffff; }
@media (max-width:639px){
  .offer-grid{ grid-template-columns:1fr; gap:22px; }
  .offer-card{ aspect-ratio:4/3; }
  .offer-card-body{ padding:26px; }
}

/* ---------- final CTA ---------- */
.final-cta{ position:relative; text-align:center; color:#ffffff; overflow:hidden; }
.final-cta img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; z-index:0; }
.final-cta::after{ content:''; position:absolute; inset:0; background:rgba(0,26,21,.6); z-index:1; }
.final-cta .container{ position:relative; z-index:2; }
.final-cta h2{ color:#ffffff; font-size:clamp(1.9rem,3.8vw,2.8rem); max-width:20ch; margin:0 auto 28px; }
.final-cta .seal{ position:absolute; left:50%; top:-66px; transform:translateX(-50%); }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:0 0 50px; }
.site-footer .container{ max-width:1380px; }
.footer-top{ padding-top:72px; }
.footer-brand{ display:flex; align-items:flex-start; margin-bottom:-34px; overflow:hidden; }
.footer-brand img{ width:220px; height:auto; margin-left:-42px; transform:translateY(-12px); }
@media (max-width:560px){ .footer-brand img{ width:170px; margin-left:-32px; } .footer-brand{ margin-bottom:-26px; } }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:85px; border-bottom:1px solid rgba(255,255,255,.12); }
@media (min-width:901px){ .footer-brand-col{ margin-top:-32px; } }
.footer-col + .footer-col{ border-left:1px solid rgba(255,255,255,.12); padding-left:32px; }
.footer-col h4, .footer-col-heading{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#ffffff; margin-bottom:26px; font-family:var(--sans); font-weight:700; }
.footer-col-toggle{ all:unset; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; cursor:default; }
.footer-toggle-chevron{ display:none; flex:0 0 auto; width:14px; height:14px; color:rgba(255,255,255,.5); transition:transform .2s var(--ease); }
.footer-col a{ display:block; text-decoration:none; color:rgba(255,255,255,.68); font-size:.86rem; margin-bottom:15px; transition:color .15s var(--ease); }
.footer-col a:hover{ color:#ffffff; }
.footer-social-list{ display:flex; flex-direction:column; gap:15px; }
.footer-social-list a{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:rgba(255,255,255,.68); font-size:.86rem; margin-bottom:0; transition:color .15s var(--ease); }
.footer-social-list a:hover{ color:#ffffff; }
.footer-social-list svg{ width:16px; height:16px; flex:0 0 auto; color:rgba(255,255,255,.5); transition:color .15s var(--ease); }
.footer-social-list a:hover svg{ color:#ffffff; }
.footer-col address{ font-style:normal; display:flex; flex-direction:column; gap:17px; }
.fc-row{ display:flex; align-items:flex-start; gap:10px; }
.fc-row .fc-ic{ flex:0 0 auto; width:16px; height:16px; margin-top:2px; color:rgba(255,255,255,.5); }
.fc-row span, .fc-row a{ font-size:.86rem; color:rgba(255,255,255,.68); margin-bottom:0; }
.fc-row a:hover{ color:#ffffff; }
.footer-bottom{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding-top:32px; font-size:.76rem; color:rgba(255,255,255,.5); }
.footer-sitemap-link{ justify-self:center; }
.footer-bottom .powered{ justify-self:end; }
@media (max-width:560px){ .footer-bottom{ grid-template-columns:1fr; justify-items:center; text-align:center; } .footer-sitemap-link, .footer-bottom .powered{ justify-self:center; } }
.footer-bottom .powered{ margin:0; }
.footer-bottom a{ color:rgba(255,255,255,.5); text-decoration:none; }
.footer-bottom a:hover{ color:#ffffff; }
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; padding-bottom:64px; }
  .footer-col{ border-left:none; padding-left:0; }
  .footer-col:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.12); padding-top:28px; }
  .footer-col:nth-child(2n){ border-left:1px solid rgba(255,255,255,.12); padding-left:32px; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:0; padding-bottom:40px; }
  .footer-col{ border-left:none; padding-left:0; }
  .footer-col + .footer-col{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; border-left:none; padding-left:0; }
  .footer-brand-col{ margin-bottom:33px; }

  /* footer columns: accordion on mobile */
  .footer-col-heading{ margin-bottom:0; }
  .footer-col-toggle{ cursor:pointer; padding:4px 0; }
  .footer-toggle-chevron{ display:block; }
  .footer-col-toggle[aria-expanded="true"] .footer-toggle-chevron{ transform:rotate(180deg); }
  .footer-col-body{ display:none; overflow:hidden; }
  .footer-col-body.open{ display:block; margin-top:22px; }

  /* social links: horizontal icon row on mobile (label kept for screen readers) */
  .footer-social-list{ flex-direction:row; flex-wrap:wrap; gap:14px; }
  .footer-social-list a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.18); border-radius:50%; padding:0; }
  .footer-social-list svg{ width:18px; height:18px; }
  .footer-social-label{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}

/* ==========================================================================
   Inner pages (Rooms summary + detail)
   ========================================================================== */

/* ---------- page hero (compact banner) ---------- */
.page-hero{
  position:relative; min-height:68vh; display:flex; align-items:flex-end; color:#ffffff; overflow:hidden; margin-top:0;
  padding-bottom:56px;
}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,26,21,.72) 0%, rgba(0,26,21,.2) 60%, rgba(0,26,21,.35) 100%);
}
.page-hero .container{ position:relative; z-index:2; width:100%; }
.page-hero .crumb{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:16px; display:block; }
.page-hero .crumb a{ color:rgba(255,255,255,.75); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
.page-hero .crumb a:hover{ color:#ffffff; border-color:#ffffff; }
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.6rem); color:#ffffff; max-width:18ch; }
.page-hero p{ margin-top:16px; max-width:52ch; font-size:1rem; color:rgba(255,255,255,.88); }

/* ---------- room hero (single image, full-bleed) ---------- */
.room-hero{ min-height:82vh; }

/* ---------- page-level booking band (below hero, inner pages) ---------- */
.page-book-band{
  position:relative; z-index:5; background:var(--surface); padding-top:40px; padding-bottom:64px; display:flex; justify-content:center;
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.page-book-band .booking-bar{
  margin:0 24px; border-radius:0; padding:6px; border:1px solid var(--line);
  box-shadow:0 14px 40px -16px rgba(0,60,50,.28);
}
.page-book-band .booking-field{ padding:14px 26px; }
.page-book-band .booking-submit{ border-radius:0; margin:2px; }
@media (max-width:900px){
  .page-book-band .booking-bar{ border-radius:0; padding:4px; }
  .page-book-band .booking-submit{ border-radius:0; }
}

/* ---------- room overview (2-col: text + mini slider) ---------- */
.room-overview{
  background:var(--surface);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.overview-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:center; }
.overview-text{ grid-column:1/span 5; }
.overview-text p{ font-size:.98rem; color:var(--ink-soft); margin-bottom:18px; }
.overview-stats{ display:flex; flex-wrap:wrap; gap:0; margin-top:8px; padding-top:22px; border-top:1px solid var(--line); }
.overview-stats div{ flex:1 1 0; min-width:0; position:relative; padding-right:16px; }
.overview-stats div + div{ padding-left:16px; }
.overview-stats div + div::before{ content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--line); }
.overview-stats svg{ display:block; width:22px; height:22px; stroke:var(--brown); fill:none; margin-bottom:10px; }
.overview-stats b{ display:block; font-family:var(--serif); font-size:1.4rem; color:var(--brown-deep); font-weight:400; }
.overview-stats span{ display:block; margin-top:6px; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.overview-cta{ margin-top:32px; }
@media (max-width:560px){
  .overview-stats div{ padding-right:8px; }
  .overview-stats div + div{ padding-left:8px; }
  .overview-stats svg{ width:18px; height:18px; margin-bottom:6px; }
  .overview-stats b{ font-size:1.05rem; }
  .overview-stats span{ font-size:.56rem; letter-spacing:.04em; }
}
.overview-media{ grid-column:7/span 6; position:relative; }
.overview-media .slider-frame{ position:relative; aspect-ratio:4/5; border-radius:0; overflow:hidden; box-shadow:0 24px 48px -20px rgba(0,60,50,.35); }
#dining-overview .overview-media .slider-frame{ aspect-ratio:4/6; }
#dining-overview .overview-stats{ flex-direction:column; align-items:flex-start; gap:12px; }
#dining-overview .overview-stats div{ display:flex; align-items:center; gap:10px; flex:none; padding:0; width:100%; white-space:nowrap; }
#dining-overview .overview-stats div + div{ padding-left:0; }
#dining-overview .overview-stats div + div::before{ display:none; }
#dining-overview .overview-stats .stat-icon{ width:20px; height:20px; margin-top:4.8px; margin-bottom:0; stroke:var(--brown); flex-shrink:0; }
#dining-overview .overview-stats span{ display:inline; font-family:var(--sans); font-size:.82rem; line-height:1.2; color:var(--ink-soft); text-transform:none; letter-spacing:normal; }
#dining-overview .overview-stats b{ display:inline; font-family:var(--serif); font-size:1rem; line-height:1.2; color:var(--brown-deep); font-weight:400; margin-right:3px; }
#dining-overview{ padding-top:80px; }
@media (max-width:1023px){ #dining-overview{ padding-top:64px; } }
@media (max-width:639px){
  #dining-overview{ padding-top:48px; }
  #dining-overview .overview-media .slider-frame{ aspect-ratio:4/5; }
}
@media (max-width:560px){
  #dining-overview .overview-stats .stat-icon{ width:16px; height:16px; }
  #dining-overview .overview-stats span{ font-size:.7rem; }
  #dining-overview .overview-stats b{ font-size:.9rem; }
}
.overview-media .hero-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s var(--ease); }
.overview-media .hero-slide.is-active{ opacity:1; }
.overview-media .slide-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:38px; height:38px; border-radius:0;
  background:rgba(255,255,255,.92); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--brown-deep); transition:background .2s var(--ease);
}
.overview-media .slide-arrow:hover{ background:#fff; }
.overview-media .slide-prev{ left:16px; }
.overview-media .slide-next{ right:16px; }
.overview-media .slide-arrow svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.overview-media .blob{ position:absolute; z-index:0; width:200px; height:200px; border-radius:50%; background:var(--sage); opacity:.12; filter:blur(50px); bottom:-40px; left:-40px; }
@media (max-width:900px){
  .overview-grid{ grid-template-columns:1fr; }
  .overview-text, .overview-media{ grid-column:1; }
  .overview-media{ order:-1; }
}

/* ---------- intro strip (summary page) ---------- */
.page-intro{
  background:var(--bg); padding-bottom:0;
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.page-intro p{ max-width:70ch; font-size:1.05rem; color:var(--ink-soft); }
#day-intro{ background-color:var(--beige-soft); display:flow-root; }

/* ---------- wide editorial row (equal footing, alternating) ---------- */
.rooms-list{
  background:var(--surface);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
#day-rows{ background-color:var(--beige-soft); padding-top:40px; }
.rooms-list.offers-list{
  background:var(--bg);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.wide-row{
  display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:center;
  padding:56px 0; border-bottom:1px solid var(--line);
}
.rooms-list .wide-row:last-child{ border-bottom:none; padding-bottom:0; }
.rooms-list .wide-row:first-child{ padding-top:0; }
.wide-row .media{ grid-column:1/span 7; position:relative; overflow:hidden; border-radius:0; aspect-ratio:4/3; }
.wide-row .media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.wide-row .media:hover img{ transform:scale(1.05); }
.wide-row .content{ grid-column:9/span 4; display:flex; flex-direction:column; gap:14px; }
.wide-row.reverse .media{ grid-column:6/span 7; order:2; }
.wide-row.reverse .content{ grid-column:1/span 4; order:1; }
.wide-row .content h2{ font-size:1.7rem; }
.wide-row .content p{ font-size:.92rem; color:var(--ink-soft); }
.wide-row .content > .link-cta{ align-self:flex-start; }
.wide-row .pills{ display:flex; flex-wrap:wrap; gap:10px; }
.wide-row .pill{
  display:flex; align-items:center; gap:7px; background:var(--beige-soft); border:1px solid var(--line);
  padding:6px 14px; border-radius:0; font-size:.74rem; color:var(--ink);
}
.wide-row .pill svg{ width:20px; height:20px; stroke:var(--sage); fill:var(--sage); flex-shrink:0; }
.wide-row .cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:6px; }
.experiences .wide-row{ border-bottom:none; padding:0; }
.rooms-list .wide-row{ scroll-margin-top:110px; }
.rooms-list .wide-row .content p{ font-size:16px; }

/* ---------- experiences: quick nav ---------- */
.exp-quicknav{ padding-top:0; padding-bottom:40px; background:var(--beige-soft); }
.quicknav-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding-top:12px; padding-bottom:0; border-bottom:none; }
.quicknav-pill{
  display:inline-block; text-decoration:none; font-size:.8rem; font-weight:600; color:var(--brown-deep);
  background:var(--beige); border:1px solid var(--line); border-radius:0; padding:10px 20px;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.quicknav-pill:hover{ background:var(--brown); border-color:var(--brown); color:#ffffff; transform:translateY(-2px); }
@media (max-width:639px){ .quicknav-row{ gap:10px; padding-bottom:40px; } .quicknav-pill{ font-size:.74rem; padding:9px 16px; } }

/* ---------- experiences: single-slide image + card ---------- */
.exp-slider{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:center; }
.exp-slider-media{ grid-column:1/span 7; position:relative; overflow:hidden; border-radius:0; aspect-ratio:4/3; box-shadow:0 24px 48px -20px rgba(0,60,50,.35); }
.exp-slider-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.exp-slider-content{ grid-column:9/span 4; display:flex; flex-direction:column; gap:14px; min-height:460px; }
.exp-slider-content > h3{ font-size:1.7rem; }
.exp-slider-content .plan-items{ margin-top:6px; }
.exp-slider-content .plan-item p{ min-height:2.6em; }
.exp-slider-nav{ margin-top:auto; padding-top:20px; display:flex; align-items:center; gap:16px; }
.exp-slider-count{ font-size:.8rem; color:var(--ink-faint); }
.exp-slider-arrow{
  width:44px; height:44px; border-radius:0; border:1px solid var(--line); background:var(--surface); color:var(--brown-deep);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.exp-slider-arrow:hover{ background:var(--brown); color:#ffffff; border-color:var(--brown); }
.exp-slider-arrow svg{ width:18px; height:18px; }
@media (max-width:900px){
  .exp-slider{ grid-template-columns:1fr; }
  .exp-slider-media, .exp-slider-content{ grid-column:1; }
}

@media (max-width:900px){
  .wide-row{ grid-template-columns:1fr; gap:24px; }
  .wide-row .media, .wide-row .content, .wide-row.reverse .media, .wide-row.reverse .content{
    grid-column:1; order:0;
  }
  .wide-row.reverse .media{ order:0; }
}

/* ---------- amenity grid (detail page) ---------- */
.amenities{
  background:var(--bg);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.amenities--tight{ padding-top:64px; }
.amenity-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.amenity-tile{
  background:var(--surface); border-radius:14px; padding:22px 20px; display:flex; align-items:center; gap:16px;
  box-shadow:0 8px 22px -14px rgba(0,60,50,.3); border-bottom:3px solid transparent;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.amenity-tile:hover{ border-bottom-color:var(--brown); transform:translateY(-3px); box-shadow:0 14px 28px -14px rgba(0,60,50,.35); }
.amenity-tile svg{ width:24px; height:24px; stroke:var(--brown); flex-shrink:0; }
.amenity-tile span{ font-size:.82rem; color:var(--ink); font-weight:600; }
@media (max-width:900px){ .amenity-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .amenity-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .amenity-tile{ padding:16px; gap:12px; } }
.amenity-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:700px){
  .amenity-grid.cols-3{
    display:flex; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory; padding-bottom:8px;
    scrollbar-width:thin; scrollbar-color:var(--beige) transparent;
  }
  .amenity-grid.cols-3 .amenity-tile{ flex:0 0 78vw; scroll-snap-align:start; }
}

/* ---------- room detail gallery (masonry) ---------- */
.room-gallery{
  background:var(--beige-soft);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.room-gallery-masonry{ columns:2; column-fill:balance; column-gap:16px; }
.room-gallery-masonry figure{
  margin:0 0 16px; break-inside:avoid; overflow:hidden; border-radius:0; cursor:pointer;
  box-shadow:0 10px 24px -14px rgba(0,60,50,.3); transition:box-shadow .3s var(--ease);
}
.room-gallery-masonry figure:hover{ box-shadow:0 20px 38px -16px rgba(0,60,50,.4); }
.room-gallery-masonry img{ display:block; width:100%; height:auto; transition:transform .5s var(--ease); }
.room-gallery-masonry figure:hover img{ transform:scale(1.06); }
.room-gallery-masonry.cols-3{ columns:3; }
@media (max-width:768px){ .room-gallery-masonry.cols-3{ columns:2; } }
@media (max-width:560px){ .room-gallery-masonry{ columns:1; } }
.room-gallery-masonry.equal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.room-gallery-masonry.equal-grid figure{ margin:0; aspect-ratio:608/408; }
.room-gallery-masonry.equal-grid img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:560px){ .room-gallery-masonry.equal-grid{ grid-template-columns:1fr; } }
@media (max-width:700px){
  #dining-gallery .room-gallery-masonry.equal-grid{
    display:flex; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory; padding-bottom:8px;
    scrollbar-width:thin; scrollbar-color:var(--beige) transparent;
  }
  #dining-gallery .room-gallery-masonry.equal-grid figure{ flex:0 0 78vw; scroll-snap-align:start; aspect-ratio:608/408; }
}

/* ---------- room photo gallery: mobile-only auto-advancing slider with dots ---------- */
.rg-dots{ display:none; }
@media (max-width:640px){
  #room-photo-gallery .room-gallery-masonry{
    display:flex; flex-wrap:nowrap; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    overscroll-behavior-x:contain; touch-action:pan-x;
    padding:2px 2px 6px; -ms-overflow-style:none; scrollbar-width:none;
  }
  #room-photo-gallery .room-gallery-masonry::-webkit-scrollbar{ display:none; }
  #room-photo-gallery .room-gallery-masonry .gallery-row{ display:contents; }
  #room-photo-gallery .room-gallery-masonry figure{
    flex:0 0 auto; width:82vw; max-width:340px; height:auto; aspect-ratio:4/3; scroll-snap-align:center; margin:0;
  }
  #room-photo-gallery .rg-dots{
    display:flex; justify-content:center; gap:9px; margin-top:14px;
  }
  #room-photo-gallery .rg-dots button{
    width:8px; height:8px; border-radius:0; background:rgba(0,60,50,.25); border:none; padding:0;
    cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease);
  }
  #room-photo-gallery .rg-dots button.active{ background:var(--brown); transform:scale(1.3); }
}

/* ---------- room gallery: fixed 1232x832 block, 6 photos (3x2) ---------- */
.room-gallery-masonry.equal-grid-6{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.room-gallery-masonry.equal-grid-6 figure{ margin:0; aspect-ratio:400/408; }
.room-gallery-masonry.equal-grid-6 img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:768px){
  .room-gallery-masonry.equal-grid-6{ grid-template-columns:repeat(2,1fr); }
  .room-gallery-masonry.equal-grid-6 figure{ aspect-ratio:4/3; }
}
@media (max-width:560px){ .room-gallery-masonry.equal-grid-6{ grid-template-columns:1fr; } }

/* ---------- room gallery: fixed 1232x832 block, 5 photos (3-over-2 rows) ---------- */
.room-gallery-masonry.equal-grid-5{ display:flex; flex-direction:column; gap:16px; }
.room-gallery-masonry.equal-grid-5 .gallery-row{ display:flex; gap:16px; }
.room-gallery-masonry.equal-grid-5 figure{ margin:0; flex:1 1 0; min-width:0; height:408px; }
.room-gallery-masonry.equal-grid-5 img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:768px){
  .room-gallery-masonry.equal-grid-5 .gallery-row{ flex-wrap:wrap; }
  .room-gallery-masonry.equal-grid-5 figure{ height:auto; aspect-ratio:4/3; flex:1 1 45%; }
}
@media (max-width:560px){ .room-gallery-masonry.equal-grid-5 figure{ flex:1 1 100%; } }

/* ---------- other rooms teaser (horizontal scroll-snap) ---------- */
.other-rooms{ background:var(--surface); }
.other-rooms-scroll{
  display:flex; gap:28px; justify-content:safe center; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.other-rooms-scroll::-webkit-scrollbar{ display:none; }
.other-room-card{
  text-decoration:none; display:flex; flex-direction:column; flex:0 0 auto; width:390px; scroll-snap-align:start;
  border-radius:0; overflow:hidden; border:1px solid var(--line); box-shadow:0 10px 24px -16px rgba(0,60,50,.25);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.other-room-card:hover{ box-shadow:0 18px 34px -16px rgba(0,60,50,.35); transform:translateY(-3px); }
.other-room-card .media{ aspect-ratio:16/10; overflow:hidden; position:relative; flex-shrink:0; }
.other-room-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.other-room-card:hover .media img{ transform:scale(1.06); }
.other-room-card .chip{
  position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,.94); color:var(--brown-deep);
  padding:6px 15px; border-radius:0; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.other-room-card .body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.other-room-card h3{ font-size:1.25rem; color:var(--ink); }
.other-room-card span{ display:block; margin-top:8px; font-size:.85rem; color:var(--ink-soft); }
.other-room-card a.media{ display:block; text-decoration:none; }
.other-room-card .cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:auto; padding-top:16px; }
@media (max-width:1023px){ .other-rooms-scroll{ justify-content:flex-start; } }
@media (max-width:560px){ .other-room-card{ width:78vw; } }
.or-dots{ display:none; }
#other-rooms-slider .or-dots{
  display:flex; justify-content:center; gap:9px; margin-top:14px;
}
#other-rooms-slider .or-dots button{
  width:8px; height:8px; border-radius:0; background:rgba(0,60,50,.25); border:none; padding:0;
  cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease);
}
#other-rooms-slider .or-dots button.active{ background:var(--brown); transform:scale(1.3); }

/* ==========================================================================
   Inner pages — Gallery, Facilities, Experiences, Contact, Location
   ========================================================================== */

/* ---------- gallery ---------- */
.gallery-page{
  background:var(--bg);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.gallery-jump{ display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center; margin-bottom:60px; }
.gallery-jump a{
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.gallery-jump a:hover{ color:var(--brown-deep); border-color:var(--brown); }
.gallery-category{ margin-bottom:48px; }
.gallery-category:last-child{ margin-bottom:0; }
.gallery-category-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:22px; }
.gallery-category-head h2{ font-size:1.55rem; }
.gallery-category-head span{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-grid figure{ margin:0; position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:0; cursor:pointer; }
.gallery-grid figure.tall{ grid-column:span 2; grid-row:span 2; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.gallery-grid figure::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,26,21,.62), transparent 55%);
  opacity:0; transition:opacity .3s var(--ease);
}
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px; z-index:1; color:#f2f2ef;
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; opacity:0; transform:translateY(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery-grid figure:hover img, .gallery-grid figure:focus-visible img{ transform:scale(1.06); }
.gallery-grid figure:hover::after, .gallery-grid figure:focus-visible::after{ opacity:1; }
.gallery-grid figure:hover figcaption, .gallery-grid figure:focus-visible figcaption{ opacity:1; transform:translateY(0); }
@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid figure.tall{ grid-column:span 2; grid-row:span 1; aspect-ratio:16/10; }
}
@media (max-width:560px){
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-grid figure.tall{ grid-column:span 1; aspect-ratio:4/3; }
}

/* ---------- facilities: detailed amenity tiles ---------- */
.amenity-tile.detailed{ flex-direction:column; align-items:flex-start; gap:12px; padding:30px 26px; }
.amenity-tile.detailed svg{ width:28px; height:28px; }
#cuisine-menu .amenity-tile.detailed svg{ fill:var(--brown); color:var(--brown); }
.amenity-tile.detailed h3{ font-family:var(--serif); font-size:1.08rem; color:var(--ink); font-weight:400; }
.amenity-tile.detailed p{ font-size:.86rem; color:var(--ink-soft); }
.facilities-crosslink{ background:var(--beige-soft); }
.facilities-crosslink .wide-row{ border-bottom:none; }

/* ---------- experiences: day rows ---------- */
.plan-items{ display:flex; flex-direction:column; gap:24px; margin-top:8px; }
.plan-item{ display:flex; gap:16px; align-items:flex-start; }
.plan-item svg{ width:26px; height:26px; stroke:var(--sage); flex-shrink:0; margin-top:2px; }
.plan-item h3{ font-size:1.05rem; margin-bottom:4px; }
.plan-item p{ font-size:.86rem; color:var(--ink-soft); }

/* ---------- experiences: good-to-know notes ---------- */
.exp-notes{ background:var(--surface); }
.exp-notes-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.exp-note{
  display:flex; gap:20px; align-items:flex-start; background:var(--beige-soft); border:1px solid var(--line);
  border-radius:0; padding:30px 28px; box-shadow:0 16px 36px -22px rgba(0,60,50,.3);
}
.exp-note svg{ width:28px; height:28px; stroke:var(--brown); flex-shrink:0; margin-top:2px; }
.exp-note h3{ font-size:1.05rem; margin-bottom:6px; }
.exp-note p{ font-size:.88rem; color:var(--ink-soft); }
@media (max-width:768px){ .exp-notes-grid{ grid-template-columns:1fr; } }

/* ---------- location: getting-here timeline ---------- */
.getting-here-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.gh-timeline .timeline-item{ position:relative; padding-left:48px; padding-bottom:38px; }
.gh-timeline .timeline-item:last-child{ padding-bottom:0; }
.gh-timeline .timeline-item::before{ content:''; position:absolute; left:15px; top:38px; bottom:0; width:1px; background:var(--line); }
.gh-timeline .timeline-item:last-child::before{ display:none; }
.gh-timeline .timeline-dot{
  position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--brown);
  display:flex; align-items:center; justify-content:center;
}
.gh-timeline .timeline-dot svg{ width:20px; height:20px; stroke:#ffffff; }
.gh-timeline h3{ font-size:1.12rem; margin-bottom:8px; }
.gh-timeline p{ font-size:.92rem; color:var(--ink-soft); max-width:48ch; }
.gh-aside{ background:var(--surface); border-radius:0; overflow:hidden; box-shadow:0 20px 44px -22px rgba(0,60,50,.3); margin-bottom:28px; }
.gh-aside .media{ aspect-ratio:5/3; }
.gh-aside .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.gh-aside .body{ padding:26px 28px; }
.gh-aside h3{ font-size:1.1rem; margin-bottom:8px; }
.gh-aside p{ font-size:.9rem; color:var(--ink-soft); }
@media (max-width:900px){ .getting-here-grid{ grid-template-columns:1fr; } }

/* ---------- location: nearby attractions ---------- */
.attr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.attr-card{ background:var(--surface); border:1px solid var(--line); border-radius:0; padding:28px 24px; }
.attr-card .attr-icon-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.attr-card svg{ width:30px; height:30px; stroke:var(--sage); flex-shrink:0; }
.attr-card .badge{
  display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brown-deep); background:var(--beige-soft); padding:5px 12px; border-radius:0;
}
.attr-card h3{ font-size:1.05rem; margin-bottom:6px; }
.attr-card p{ font-size:.84rem; color:var(--ink-soft); }
@media (max-width:900px){ .attr-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .attr-grid{ grid-template-columns:1fr; } }

/* ---------- location: map + directions ---------- */
.map-section{
  background:var(--beige-soft);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.map-frame{ border-radius:0; overflow:hidden; box-shadow:0 20px 40px -20px rgba(0,60,50,.3); margin-bottom:28px; }
.map-frame iframe{ width:100%; height:420px; border:0; display:block; }
.directions-card{
  background:var(--surface); border-radius:10px; padding:32px; max-width:760px; margin:0 auto;
  box-shadow:0 20px 44px -22px rgba(0,60,50,.3);
}
.directions-row{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; }
.directions-row .form-field{ flex:1 1 220px; margin-bottom:0; }
@media (max-width:640px){ .directions-row{ flex-direction:column; align-items:stretch; } .directions-row .form-field{ flex:none; } .directions-card{ padding:24px 20px; } }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contact-info-media{ display:block; width:100%; aspect-ratio:16/10; border-radius:0; overflow:hidden; margin:0 0 32px; border:1px solid var(--line); box-shadow:0 20px 44px -22px rgba(0,60,50,.3); }
.contact-info-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.contact-block + .contact-block{ margin-top:26px; }
.contact-block h3{ font-family:var(--serif); font-size:1.1rem; margin-bottom:6px; font-weight:400; }
.contact-block p, .contact-block a{ font-size:.92rem; color:var(--ink-soft); text-decoration:none; display:block; }
.contact-block a:hover{ color:var(--brown-deep); }
.contact-block .link-cta{ display:inline-block; margin-top:18px; }
.contact-block p.icon-line, .contact-block a.icon-line{ display:flex; align-items:flex-start; gap:9px; }
.icon-line svg{ flex-shrink:0; margin-top:3px; stroke:var(--sage); }
.contact-widget-section{
  background:var(--surface);
  background-image:radial-gradient(rgba(0,60,50,.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.contact-widget{ max-width:900px; margin:0 auto; padding:0; }
.contact-widget-head{ margin-bottom:44px; text-align:center; }
.contact-widget-head .eyebrow{ margin-bottom:8px; color:var(--sage); }
.contact-widget-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:400; color:var(--ink); }
.widget-sections{ display:grid; grid-template-columns:repeat(2,1fr); gap:56px; }
.widget-section{ padding-left:40px; border-left:1px solid var(--line); }
.widget-section:first-child{ padding-left:0; border-left:none; }
.widget-section h4{ font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:20px; }
.widget-section p{ font-size:1.05rem; color:var(--ink-soft); margin-bottom:16px; }
.widget-row{ display:flex; align-items:center; gap:14px; font-size:1.05rem; color:var(--ink-soft); margin-bottom:16px; }
.widget-row:last-child{ margin-bottom:0; }
.widget-row a{ color:var(--ink-soft); text-decoration:none; }
.widget-row a:hover{ color:var(--brown-deep); }
.widget-ic{ width:20px; height:20px; color:var(--brown); flex-shrink:0; }
@media (max-width:800px){
  .widget-sections{ grid-template-columns:1fr; gap:32px; }
  .widget-section{ padding-left:0; border-left:none; padding-top:28px; border-top:1px solid var(--line); }
  .widget-section:first-child{ padding-top:0; border-top:none; }
}
.contact-widget .link-cta{ margin-top:18px; }
.contact-form{ background:var(--surface); border-radius:0; padding:40px; box-shadow:0 20px 44px -22px rgba(0,60,50,.3); }
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; border:1px solid var(--line); border-radius:4px; padding:13px 16px; font-family:var(--sans);
  font-size:.92rem; color:var(--ink); background:var(--bg);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--brown); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-consent{ display:flex; gap:10px; align-items:flex-start; font-size:.78rem; color:var(--ink-soft); margin-bottom:22px; }
.form-consent input{ margin-top:3px; accent-color:var(--brown); width:auto; }
.form-status{ font-size:.86rem; color:var(--sage); font-weight:600; margin-bottom:16px; display:none; }
.form-status.show{ display:block; }
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- sitemap ---------- */
.sitemap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; padding:64px 0 96px; }
.sitemap-col h4{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brown-deep); margin-bottom:18px; font-family:var(--sans); font-weight:700; }
.sitemap-col h4.sitemap-subhead{ margin-top:24px; }
.sitemap-col a{ display:block; text-decoration:none; color:var(--ink-soft); font-size:.92rem; margin-bottom:12px; transition:color .15s var(--ease); }
.sitemap-col a:hover{ color:var(--ink); }
@media (max-width:900px){ .sitemap-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .sitemap-grid{ grid-template-columns:1fr; } }

/* ---------- FAQs (accordion) ---------- */
.faq-section{ max-width:820px; margin:0 auto 48px; scroll-margin-top:110px; }
.faq-section:last-child{ margin-bottom:0; }
.faq-section-head{ margin-bottom:24px; }
.faq-section-head.center{ text-align:center; }
.faq-section-head h2{ font-size:clamp(1.4rem,2.6vw,1.8rem); margin:6px 0 0; color:var(--brown-deep); }
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:0;
  padding:0 26px; box-shadow:0 8px 22px -18px rgba(0,60,50,.3);
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--serif); font-size:1.08rem; color:var(--ink); font-weight:400;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; flex-shrink:0; width:26px; height:26px; border-radius:0; border:1px solid var(--brown);
  color:var(--brown-deep); display:flex; align-items:center; justify-content:center; font-size:1.1rem; line-height:1;
}
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ margin:0 0 24px; color:var(--ink-soft); font-size:.95rem; line-height:1.7; max-width:66ch; }
.faq-item ul{ list-style:disc; margin:0 0 16px; padding-left:1.3em; color:var(--ink-soft); font-size:.95rem; line-height:1.7; max-width:66ch; }
.faq-item ul li{ margin-bottom:4px; }
@media (max-width:560px){
  .faq-item{ padding:0 18px; }
  .faq-item summary{ font-size:1rem; gap:12px; }
}

/* ---------- Call floating button (desktop only; mobile uses nav-call-btn) ---------- */
.call-float{
  position:fixed; right:22px; bottom:144px; z-index:200;
  width:48px; height:48px; border-radius:50%;
  background:var(--brown); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.call-float:hover{ transform:scale(1.08); box-shadow:0 14px 30px -8px rgba(0,0,0,.45); background:var(--brown-deep); }
.call-float svg{ width:22px; height:22px; fill:#fff; }
.call-tooltip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-family:var(--sans); font-size:.78rem; font-weight:600;
  white-space:nowrap; padding:8px 14px; border-radius:0; opacity:0; pointer-events:none;
  transition:opacity .18s var(--ease);
}
.call-float:hover .call-tooltip{ opacity:1; }
@media (max-width:800px){ .call-float{ display:none; } }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed; right:22px; bottom:94px; z-index:200;
  width:48px; height:48px; border-radius:50%;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 14px 30px -8px rgba(0,0,0,.45); }
.whatsapp-float svg{ width:24px; height:24px; fill:#fff; }
.whatsapp-tooltip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-family:var(--sans); font-size:.78rem; font-weight:600;
  white-space:nowrap; padding:8px 14px; border-radius:6px; opacity:0; pointer-events:none;
  transition:opacity .18s var(--ease);
}
.whatsapp-float:hover .whatsapp-tooltip{ opacity:1; }
@media (max-width:639px){
  .whatsapp-float{ right:16px; bottom:80px; width:42px; height:42px; }
  .whatsapp-float svg{ width:20px; height:20px; }
  .whatsapp-tooltip{ display:none; }
}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:200;
  width:48px; height:48px; border-radius:50%;
  background:var(--brown); color:#ffffff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .18s var(--ease), box-shadow .2s var(--ease);
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--brown-deep); box-shadow:0 14px 30px -8px rgba(0,0,0,.45); }
.back-to-top svg{ width:20px; height:20px; }
@media (max-width:639px){ .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; } .back-to-top svg{ width:18px; height:18px; } }

/* ---------- sticky mobile book bar ---------- */
.sticky-book-bar{ display:none; }
@media (max-width:639px){
  .sticky-book-bar{
    display:flex; align-items:center; justify-content:center;
    position:fixed; left:0; right:0; bottom:0; z-index:190; height:48px;
    background:var(--brown); color:#ffffff; text-decoration:none;
    font-family:var(--sans); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
    box-shadow:0 -10px 26px -12px rgba(0,26,21,.4);
  }
  .sticky-book-bar:hover{ background:var(--brown-deep); }
  .sticky-book-note{ margin-left:6px; font-size:.66rem; font-weight:500; letter-spacing:.06em;
    text-transform:none; opacity:.85; }
  body.has-sticky-book{ padding-bottom:48px; }
  body.has-sticky-book .whatsapp-float{ bottom:136px; }
  body.has-sticky-book .back-to-top{ bottom:72px; }
}

/* ---------- offer tab (left edge, expandable) ---------- */
.offer-tab{
  position:fixed; left:0; top:50%; z-index:150;
  display:flex; align-items:stretch;
  opacity:0; pointer-events:none;
  transform:translateY(-50%) translateX(-18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  will-change:opacity, transform;
}
.offer-tab.visible{ opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0); }
@media (prefers-reduced-motion:reduce){ .offer-tab{ transition:none; } }
.offer-tab-handle{
  width:40px; min-height:54px; flex-shrink:0; border:none; cursor:pointer; padding:8px 0;
  background:var(--brown-deep); color:#ffffff; border-radius:0;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  transition:background .2s var(--ease);
}
.offer-tab-handle:hover{ background:var(--brown); }
.offer-tab.expanded .offer-tab-handle{ border-radius:0; }
.offer-tab-icon{ width:13px; height:13px; flex-shrink:0; }
.offer-tab-label{
  writing-mode:vertical-rl; transform:rotate(180deg); font-size:.66rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.offer-tab-chevron{ width:13px; height:13px; flex-shrink:0; transition:transform .25s var(--ease); }
.offer-tab.expanded .offer-tab-chevron{ transform:rotate(180deg); }

.offer-panel{
  position:relative; width:0; height:215px; overflow:hidden; background:var(--ink); color:#ffffff;
  border-radius:0 10px 10px 0; box-shadow:0 20px 44px -18px rgba(0,26,21,.5);
  transition:width .35s var(--ease), padding .35s var(--ease);
}
.offer-tab.expanded .offer-panel{ width:300px; padding:22px 24px; }
.offer-panel-pill{
  display:inline-block; background:var(--beige); color:var(--brown-deep); font-weight:700; font-size:.7rem;
  letter-spacing:.04em; padding:5px 12px; border-radius:0; white-space:nowrap; flex-shrink:0;
}
#offerTab.no-pill .offer-panel-pill{
  background:none; color:var(--beige); font-size:.82rem; letter-spacing:.06em; padding:0; border-radius:0;
}
.offer-panel-title{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  font-family:var(--serif); font-weight:400; font-size:.95rem; color:#ffffff; margin:14px 0 10px;
}
.offer-panel-note{ font-size:.84rem; line-height:1.6; color:rgba(242,242,239,.72); white-space:normal; min-height:3.2em; }
.offer-panel-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px; color:#ffffff; text-decoration:none;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid rgba(242,242,239,.4); padding-bottom:3px; white-space:nowrap;
  transition:border-color .18s var(--ease), letter-spacing .18s var(--ease);
}
.offer-panel-link svg{ width:14px; height:14px; }
.offer-panel-link:hover{ border-color:#ffffff; letter-spacing:.18em; }
.offer-panel-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; white-space:nowrap; }
.offer-panel-count{ font-size:.76rem; color:rgba(242,242,239,.55); letter-spacing:.04em; }
.offer-panel-arrows{ display:flex; gap:8px; }
.offer-panel-arrow{
  width:26px; height:26px; border-radius:0; border:1px solid rgba(242,242,239,.3); background:none; color:#f2f2ef;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.offer-panel-arrow:hover{ background:rgba(242,242,239,.1); border-color:#f2f2ef; }
.offer-panel-arrow svg{ width:14px; height:14px; }
@media (max-width:639px){
  .offer-tab-handle{ width:34px; min-height:48px; padding:6px 0; }
  .offer-tab.expanded .offer-panel{ width:250px; padding:18px; }
  .offer-panel-title{ font-size:.82rem; gap:6px; }
}

/* ================= BOOKING MODAL (Book Now popup) ================= */
.booking-modal{
  position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:24px;
  visibility:hidden; opacity:0; transition:visibility .3s, opacity .3s;
}
.booking-modal.open{ visibility:visible; opacity:1; }
.booking-modal-overlay{
  position:absolute; inset:0; background:rgba(0,26,21,.55);
}
.booking-modal-panel{
  position:relative; z-index:1; width:100%; max-width:1180px;
  background:rgba(0,26,21,.4); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -20px rgba(0,26,21,.5);
  padding:20px 22px 36px;
  transform:translateY(16px) scale(.98); transition:transform .3s var(--ease);
}
.booking-modal.open .booking-modal-panel{ transform:translateY(0) scale(1); }
.booking-modal-close{
  position:absolute; top:12px; right:12px; width:auto; height:auto; border:none; background:none; cursor:pointer;
  font-size:1.5rem; line-height:1; color:rgba(255,255,255,.7);
}
.booking-modal-close:hover{ color:#ffffff; }
.booking-modal-head{ margin:0 0 14px; font-family:var(--serif); font-size:1.1rem; color:#ffffff; text-align:center; }

/* continuous-bar fields matching the hero booking bar: one translucent bar per row,
   thin dividers between fields, light text sitting directly on the dark panel */
#bookingModal .booking-bar{
  background:none; box-shadow:none; max-width:none; flex-direction:column; align-items:stretch; gap:12px;
}
#bookingModal #brandBookingForm{ max-width:none; }
#bookingModal .booking-row{
  display:flex; flex-wrap:wrap; align-items:stretch;
  background:rgba(0,26,21,.3); border:1px solid rgba(255,255,255,.18);
}
#bookingModal #brandBookingForm .booking-field{
  flex:1 1 130px; width:auto; min-width:120px; min-height:64px; padding:10px 18px;
  background:none; box-shadow:none; border-radius:0; border-right:1px solid rgba(255,255,255,.18);
  display:flex; flex-direction:column; justify-content:center; position:relative;
}
#bookingModal #brandBookingForm .booking-field:last-child{ border-right:none; }
#bookingModal #brandBookingForm .booking-cta-field{
  flex:0 0 auto; min-width:150px; background:none; box-shadow:none; padding:10px 14px; border-right:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
#bookingModal #brandBookingForm .booking-submit{ width:100%; justify-content:center; padding:10px 18px; }
#bookingModal #brandBookingForm .booking-field label{ font-size:.6rem; margin-bottom:4px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
#bookingModal #brandBookingForm .booking-field select,
#bookingModal #brandBookingForm .booking-field input[type="date"]{ font-size:.86rem; color:#ffffff; }
#bookingModal #brandBookingForm .booking-field select option{ color:var(--ink); }
#bookingModal #brandBookingForm .booking-field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.8; }
#bookingModal #brandBookingForm .guest-trigger{ font-size:.86rem; color:#ffffff; }
#bookingModal #brandBookingForm .field-icon{ display:none; }
#bookingModal #brandBookingForm .field-input{ gap:0; display:flex; align-items:center; }
#bookingModal #brandBookingForm .field-input input[type="text"]{
  width:100%; border:none; background:none; font-family:var(--sans); font-size:.82rem; color:#ffffff; padding:0;
}
#bookingModal #brandBookingForm .field-input input[type="text"]::placeholder{ color:rgba(255,255,255,.5); }
#bookingModal #brandBookingForm .field-input input[type="text"]:focus{ outline:none; }
#bookingModal .field-hint{
  position:absolute; top:100%; left:0; right:0; margin-top:6px; text-align:left;
  font-size:.6rem; letter-spacing:.03em; text-decoration:underline;
  text-underline-offset:3px; color:rgba(255,255,255,.75); cursor:default;
}
#bookingModal .field-hint:hover{ color:#ffffff; }
#bookingModal .field-hint-manage{ text-align:right; }
#bookingModal .cta-hint-row{ display:contents; }
#bookingModal .field-hint-mobile-only{ display:none; }
#bookingModal .field-tooltip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  width:230px; background:var(--ink); color:rgba(255,255,255,.9); font-size:.74rem; line-height:1.55;
  letter-spacing:normal; text-decoration:none; padding:14px 16px; box-shadow:0 14px 30px -12px rgba(0,26,21,.5);
  opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:5;
}
#bookingModal .field-tooltip a{ color:#a3d6c6; text-decoration:underline; }
#bookingModal .field-hint:hover .field-tooltip,
#bookingModal .field-hint:focus .field-tooltip,
#bookingModal .field-hint:focus-within .field-tooltip{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

@media (max-width:760px){
  #bookingModal .booking-row{ flex-direction:column; }
  #bookingModal #brandBookingForm .booking-field{
    flex:0 0 auto; width:100%; border-right:none; border-bottom:1px solid rgba(255,255,255,.18);
  }
  #bookingModal #brandBookingForm .booking-field:last-child{ border-bottom:none; }
  #bookingModal #brandBookingForm .booking-field.has-hint{ margin-bottom:0; }
  #bookingModal #brandBookingForm .booking-field.has-hint > .field-hint{ display:none; }
  #bookingModal #brandBookingForm .booking-cta-field{ align-items:stretch; padding-top:12px; }
  #bookingModal .cta-hint-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin-top:8px;
  }
  #bookingModal .cta-hint-row .field-hint{ position:static; margin-top:0; }
  #bookingModal .field-hint-mobile-only{ display:inline-block; }
  #bookingModal .field-tooltip{ left:auto; right:0; transform:translateY(4px); }
  #bookingModal .field-hint:hover .field-tooltip,
  #bookingModal .field-hint:focus .field-tooltip,
  #bookingModal .field-hint:focus-within .field-tooltip{ transform:translateY(0); }
}

/* the modal's own Rooms & Guests popover -- dark theme, distinct from the hero form's
   light-themed guest popover (same class names, scoped under #bookingModal only) */
#bookingModal .guest-popover{
  display:none; position:absolute; bottom:calc(100% + 10px); top:auto; right:0; left:auto;
  width:max-content; max-width:min(760px, calc(100vw - 48px)); max-height:70vh; overflow:auto;
  background:rgba(0,26,21,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18); border-radius:0; box-shadow:0 20px 40px -16px rgba(0,0,0,.5); padding:20px; z-index:20;
  -ms-overflow-style:none; scrollbar-width:none;
}
#bookingModal .guest-popover::-webkit-scrollbar{ display:none; }
#bookingModal .guest-popover.open{ display:block; }
#bookingModal .guest-popover .rooms-list{ display:flex; flex-direction:row; gap:24px; background:none; }
#bookingModal .room-block{ flex:0 0 240px; width:240px; padding:0 24px 0 0; border-right:1px solid rgba(255,255,255,.18); }
#bookingModal .room-block:last-child{ padding-right:0; border-right:none; }
#bookingModal .room-block-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
#bookingModal .room-label{ font-family:var(--serif); font-size:.98rem; font-weight:600; color:#a3d6c6; }
#bookingModal .room-remove{
  background:none; border:none; color:rgba(255,255,255,.5); font-size:1.2rem; line-height:1; padding:2px 4px; cursor:pointer;
  transition:color .15s var(--ease);
}
#bookingModal .room-remove:hover{ color:#ffffff; }
#bookingModal .add-room-btn{
  display:block; width:100%; text-align:left; background:none; border:none; border-top:1px solid rgba(255,255,255,.18);
  margin-top:16px; padding:14px 0 0; font-family:var(--sans); font-weight:600; font-size:.82rem; color:#a3d6c6; cursor:pointer;
  transition:color .15s var(--ease);
}
#bookingModal .add-room-btn:hover{ color:#ffffff; }
#bookingModal .add-room-btn:disabled{ color:rgba(255,255,255,.3); cursor:not-allowed; }
#bookingModal .guest-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.18); }
#bookingModal .guest-row:last-of-type{ border-bottom:none; }
#bookingModal .guest-row b{ display:block; font-family:var(--serif); font-size:1rem; color:#ffffff; }
#bookingModal .guest-row span{ font-size:.72rem; color:rgba(255,255,255,.5); }
#bookingModal .stepper{ display:flex; align-items:center; gap:14px; }
#bookingModal .step-btn{
  width:28px; height:28px; border-radius:0; border:1px solid rgba(255,255,255,.4); background:none; color:#ffffff;
  font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease), color .15s var(--ease);
}
#bookingModal .step-btn:hover{ background:var(--brown); color:#ffffff; border-color:var(--brown); }
#bookingModal .step-btn:disabled{ opacity:.35; cursor:not-allowed; border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.3); background:none; }
#bookingModal .stepper span{ min-width:16px; text-align:center; font-weight:600; color:#ffffff; }
#bookingModal .child-ages{ display:flex; flex-direction:column; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); }
#bookingModal .child-age-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#bookingModal .child-age-row > div{ display:flex; align-items:baseline; gap:6px; }
#bookingModal .child-age-row b{ font-family:var(--serif); font-size:1rem; color:#ffffff; white-space:nowrap; }
#bookingModal .child-age-row span{ font-size:.72rem; color:rgba(255,255,255,.5); }
#bookingModal .child-age-select{
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); border-radius:0; padding:8px 30px 8px 12px;
  font-family:var(--sans); font-size:.82rem; color:#ffffff; cursor:pointer; min-width:96px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M4 6l4 4 4-4%27 fill=%27none%27 stroke=%27%23faf6ef%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:11px;
}
#bookingModal .child-age-select option{ color:var(--ink); }
#bookingModal .guest-done{
  width:100%; margin-top:14px; padding:11px; background:var(--brown); color:#ffffff; border:none; border-radius:0;
  font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
#bookingModal .guest-done:hover{ background:var(--brown-deep); }

@media (max-width:1140px){
  #bookingModal #brandBookingForm{ flex-direction:column; }
}

@media (max-width:900px){
  #bookingModal .guest-popover{
    position:fixed; left:16px; right:16px; top:5vh; bottom:5vh;
    width:auto; max-width:none; max-height:none;
  }
  #bookingModal .guest-popover .rooms-list{ flex-direction:column; gap:0; }
  #bookingModal .room-block{ flex:1 1 auto; width:100%; padding:14px 0; border-right:none; border-bottom:1px solid rgba(255,255,255,.18); }
  #bookingModal .room-block:first-child{ padding-top:0; }
  #bookingModal .room-block:last-child{ padding-bottom:0; border-bottom:none; }
}

/* ---------- mobile: frosted slider arrows on room pages ---------- */
@media (max-width:639px){
  .overview-media .slide-arrow{
    background:rgba(255,255,255,.38);
    -webkit-backdrop-filter:blur(8px) saturate(140%);
    backdrop-filter:blur(8px) saturate(140%);
    border:1px solid rgba(255,255,255,.45);
    color:#fff;
    box-shadow:0 2px 10px rgba(0,26,21,.22);
  }
  .overview-media .slide-arrow:hover,
  .overview-media .slide-arrow:active{ background:rgba(255,255,255,.55); }
}

/* Cormorant Garamond x-height match (generated) */
h1,h2,h3,h4,
.brand span,
.mobile-menu a,
.mobile-menu-home,
.mobile-menu-links > a,
.drawer-toggle a, .drawer-toggle span,
.room-label,
.guest-row b,
.child-age-row b,
.about-stats b,
.room-slide .index,
.facility-card .fname,
.exp-card .num,
.dial-center-label,
.testimonial-card p,
.offer-card .offer-percent,
.overview-stats b,
#dining-overview .overview-stats b,
.amenity-tile.detailed h3,
.contact-block h3,
.faq-item summary,
.offer-panel-title,
.booking-modal-head,
#bookingModal .room-label,
#bookingModal .guest-row b,
#bookingModal .child-age-row b{ font-size-adjust:0.47; }
h1,h2,h3,h4,h5,h6{ font-weight:500; }


/* ================= GARUD OVERRIDES ================= */
/* Client brief: teal and white. Only "Book Now" is filled (teal, white type,
   white outline); every other CTA is hollow: teal outline on light grounds,
   white outline with white type on photographic and dark grounds. */
.btn-primary{
  background:transparent; color:var(--brown-deep); border:1px solid var(--brown); box-shadow:none;
}
.btn-primary:hover{ background:var(--brown); color:#fff; border-color:var(--brown); }
.btn-primary:focus-visible, .btn-book:focus-visible{ outline:2px solid var(--brown-deep); outline-offset:3px; }

.hero .btn-primary,
.final-cta .btn-primary,
.page-hero .btn-primary,
.site-header:not(.scrolled) .btn-primary,
.booking-modal .btn-primary,
.rooms .btn-primary{
  background:transparent; border:1px solid #fff; color:#fff; box-shadow:none;
}
.hero .btn-primary:hover,
.final-cta .btn-primary:hover,
.page-hero .btn-primary:hover,
.site-header:not(.scrolled) .btn-primary:hover,
.booking-modal .btn-primary:hover,
.rooms .btn-primary:hover{ background:rgba(255,255,255,.16); color:#fff; }
.final-cta .btn-primary:focus-visible,
.hero .btn-primary:focus-visible,
.site-header:not(.scrolled) .btn-primary:focus-visible{ outline-color:#fff; }

/* Book Now: the one filled CTA, in every context. Solid client gold #E6B45A,
   no outline; type is the dark teal (7.4:1) because white on this gold is only 1.9:1. */
.btn-book, .btn.btn-book{
  background:#e6b45a !important; color:#003c32 !important; border:1px solid #e6b45a !important;
  box-shadow:none !important;
}
.btn-book:hover, .btn.btn-book:hover{ background:#d39e3f !important; border-color:#d39e3f !important; color:#003c32 !important; box-shadow:none !important; }
.btn-book:focus-visible{ outline:2px solid #003c32 !important; outline-offset:3px; }
.sticky-book-bar.btn-book{ box-shadow:none !important; border-width:1px 0 0 !important; }

/* Client icon set: single-colour glyphs that take the context's teal. */
svg.cicon{ fill:currentColor !important; stroke:none !important; color:var(--brown); }
.final-cta svg.cicon, .rooms svg.cicon, .site-footer svg.cicon{ color:inherit; }

/* Header "Plan a Safari" is a link, not the chain's dropdown trigger. */
.header-actions a.btn{ text-decoration:none; }

/* Logo: the template crops its padded wordmark inside a 36px box; Garud's
   stacked lockup has no padding, so the crop is released and sized directly. */
.site-header.nav-v2 .brand{ height:auto; overflow:visible; }
.site-header.nav-v2 .brand img{ height:84px; width:auto; }
.site-header.nav-v2.scrolled .brand img{ height:56px; }
.footer-brand{ margin-bottom:24px; overflow:visible; }
.footer-brand img{ width:150px; margin-left:0; transform:none; }
@media (min-width:901px){ .footer-brand-col{ margin-top:0; } }
@media (max-width:767px){
  .site-header.nav-v2 .brand img{ height:52px; }
  .site-header.nav-v2.scrolled .brand img{ height:44px; }
}
@media (max-width:560px){ .footer-brand img{ width:130px; margin-left:0; } .footer-brand{ margin-bottom:20px; } }

/* Reduced motion: the marquee stops and wraps, so its duplicate loop set must not show. */
@media (prefers-reduced-motion:reduce){ .marquee-track .facility-card[aria-hidden="true"]{ display:none; } }

/* ---------- Safari & nearest gate (offer-band grammar) ---------- */
.safari-band .section-head p{ max-width:60ch; margin-left:auto; margin-right:auto; }
.offer-kicker{
  display:inline-block; align-self:flex-start; width:max-content; font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.7); padding:6px 12px; margin-bottom:14px;
}
.safari-points{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.safari-points li{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--beige-line); padding:8px 14px;
}
.safari-points svg{ width:16px; height:16px; stroke:var(--brown); }

/* ---------- Homepage location: map in place of the distance dial ---------- */
.location .map-frame{ margin:0; }
.location .map-frame iframe{ display:block; width:100%; height:420px; border:0; }
.location .directions-card{ margin-top:28px; padding:0; background:none; box-shadow:none; }
.location .directions-row{ grid-template-columns:1fr auto; }
@media (max-width:767px){
  .location .map-frame iframe{ height:320px; }
  .location .directions-row{ grid-template-columns:1fr; }
}

/* ---------- Homepage FAQs ---------- */
.home-faqs{ background:var(--bg); padding:100px 0; }
.home-faqs .faq-list{ max-width:820px; margin:0 auto; }
.home-faqs .faq-more{ text-align:center; margin-top:40px; }
@media (max-width:767px){ .home-faqs{ padding:64px 0; } }

/* ---------- Homepage contact strip ---------- */
.home-contact{ /* top padding follows the site section rhythm (80 / 64 / 48) */ }

/* ---------- Policies ---------- */
.policy-list{ margin:0; border-top:1px solid var(--line); }
.policy-list > div{ display:grid; grid-template-columns:minmax(160px,1fr) 2fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.policy-list dt{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); }
.policy-list dd{ margin:0; color:var(--ink-soft); line-height:1.7; }
@media (max-width:640px){ .policy-list > div{ grid-template-columns:1fr; gap:6px; } }

/* ---------- Gate cards reuse the attraction card; badge reads as a label ---------- */
.attr-card .badge{ white-space:nowrap; }

/* ---------- Sitemap ---------- */
.sitemap-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; }
.sitemap-col a{ display:block; padding:6px 0; color:var(--ink-soft); text-decoration:none; }
.sitemap-col a:hover{ color:var(--brown-deep); text-decoration:underline; }

/* Widget and sitemap headings are real h2/h3s (no skipped levels) styled as the template's h4 labels. */
.widget-section .widget-heading, .sitemap-col .widget-heading{
  font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:20px;
}
.sitemap-col .widget-heading{ color:var(--brown-deep); }
.plan-item svg, .exp-slider .plan-item svg{ color:var(--brown); }
/* slider arrows follow their button colour: teal idle, white on the teal hover fill */
.exp-slider-arrow svg, .room-arrow svg, .slide-arrow svg{ color:inherit !important; stroke:currentColor !important; }

/* Country-code picker (js/country-code.js is a frozen component, so its
   brown hover/selected tints are re-pointed at the palette from here). */
.ccp-box:hover,.ccp-box:focus,.ccp-box[aria-expanded=true]{ border-color:rgba(0,60,50,.55) !important; }
.ccp-opt:hover,.ccp-opt.ccp-active{ background:var(--beige-soft) !important; }
.ccp-opt[aria-selected=true]{ background:rgba(0,60,50,.1) !important; }
.ccp-opt-dial,.ccp-empty{ color:var(--ink-soft) !important; }
.ccp-search::placeholder{ color:var(--ink-faint) !important; }

/* Footer: client charcoal #1A1A1A */
.site-footer{ background:#1a1a1a !important; }
.site-footer .footer-bottom, .site-footer .footer-col{ border-color:rgba(255,255,255,.12) !important; }

/* Eyebrows on the dark teal band need the light tint to stay legible. */
.rooms .eyebrow{ color:#a3d6c6 !important; }


/* Top strip: solid charcoal band (#1A1A1A, same as the footer), no padding;
   fixed height with the text centred by line-height. */
.brand-strip{ background:#1a1a1a !important; color:#ffffff !important; padding:0 !important;
  height:30px; line-height:30px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-decoration:none !important; }
.brand-strip:hover{ color:#e6b45a !important; text-decoration:none !important; }

/* Homepage "Around the Estate / Facilities": dark green band, white cards. */
section.facilities{ background:#003c32 !important; }
section.facilities .section-head h2{ color:#ffffff; }
section.facilities .eyebrow{ color:#a3d6c6 !important; }
section.facilities .marquee-row::before{ background:linear-gradient(90deg, #003c32, transparent); }
section.facilities .marquee-row::after{ background:linear-gradient(270deg, #003c32, transparent); }
section.facilities .btn-secondary{ background:transparent; color:#ffffff; border-color:#ffffff; }
section.facilities .btn-secondary:hover{ background:rgba(255,255,255,.16); color:#ffffff; border-color:#ffffff; }

/* Floating WhatsApp and back-to-top: solid Book Now gold with dark teal glyphs. */
.call-float{ background:#e6b45a !important; color:#003c32 !important; box-shadow:0 8px 20px -8px rgba(0,0,0,.35) !important; }
.call-float svg{ fill:#003c32 !important; }
.call-float:hover{ background:#d39e3f !important; }
.back-to-top{ background:#e6b45a !important; color:#003c32 !important; }
.back-to-top:hover{ background:#d39e3f !important; color:#003c32 !important; }

/* Homepage "Before You Travel / Frequently Asked Questions": dark green band, white question cards. */
.home-faqs{ background:#003c32 !important; }
.home-faqs .section-head h2{ color:#ffffff; }
.home-faqs .eyebrow{ color:#a3d6c6 !important; }
.home-faqs .faq-item{ background:#ffffff; border-color:transparent; }
.home-faqs .btn-secondary{ background:transparent; color:#ffffff; border-color:#ffffff; }
.home-faqs .btn-secondary:hover{ background:rgba(255,255,255,.16); color:#ffffff; border-color:#ffffff; }

/* Floating WhatsApp: the number bubble opens to the LEFT of the button, so it
   can never run off the right edge; shown on mobile above the sticky Book Now bar. */
.call-float .call-tooltip{ left:auto !important; right:calc(100% + 12px) !important; bottom:auto !important; top:50% !important; transform:translateY(-50%) !important; }
.wa-float svg{ width:24px; height:24px; }
@media (max-width:800px){
  .call-float.wa-float{ display:flex !important; right:16px; bottom:76px; width:46px; height:46px; }
  .call-float.wa-float .call-tooltip{ display:none; }
}

/* Homepage "Ready for the Forest?": template band size unchanged; only the
   crop moves, centring the tiger's eyes and nose (portrait photo, eyes ~28%). */
.final-cta.cta-tiger img{ object-position:center 25% !important; }
@media (max-width:767px){ .final-cta.cta-tiger img{ object-position:center 8% !important; } }

/* Floating WhatsApp sits directly above back-to-top, 12px apart, same column. */
.call-float.wa-float{ right:22px !important; bottom:82px !important; }
@media (max-width:800px){
  .back-to-top{ right:16px !important; bottom:72px !important; width:42px !important; height:42px !important; }
  .call-float.wa-float{ right:16px !important; bottom:126px !important; width:42px !important; height:42px !important; }
}

/* Type: Option 1 "Garud Brand" (client choice, 2026-09-29).
   Cormorant Garamond runs small, so serif text is x-height-matched (font-size-adjust)
   to the sizes the layout was built for; Cinzel carries the uppercase labels. */
.eyebrow, .btn, .brand-strip, .footer-col h4, .footer-col-heading, .footer-col-toggle,
.sticky-book-bar, .offer-kicker, .booking-field label, .quicknav-pill, .gallery-jump a{
  font-family:'Cinzel', 'Times New Roman', serif !important; font-weight:600 !important; letter-spacing:.14em !important;
}
.sticky-book-bar .sticky-book-note{ font-family:var(--sans) !important; letter-spacing:.02em !important; }

/* Footer bottom row: copyright, Sitemap, and Simplotel credit on ONE line
   wherever they fit (900px+); centred stack below that. */
@media (min-width:900px){
  .footer-bottom{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:24px !important; }
  .footer-bottom > *{ white-space:nowrap; margin:0 !important; }
}
@media (max-width:899px){
  .footer-bottom{ display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center; gap:10px !important; }
  .footer-bottom > *{ margin:0 !important; justify-self:auto !important; }
}

/* ================= BODY TYPE SCALE: 3 standard sizes, all widths =================
   Body 16px · Small 14px · Caption 12px. Headings, buttons, and uppercase labels are not part of this scale. */
/* Body - 16px: paragraphs, descriptions, answers */
.page-hero p, .room-overview p, .overview-text p, .about-p, .about-p a, .location p,
.rooms-list p, .rooms-list .content p, .dining-card p.desc, .section-head p, .page-intro p, .page-intro a,
.faq-item p, .faq-item li, .facilities-crosslink p.desc, .contact-block p, .timeline-item p,
.gh-aside .body p, .policy-list dd, .rooms .section-head p, .home-faqs p, .map-section p{
  font-size:16px !important; line-height:1.75 !important;
}
/* Small - 14px: card and tile text, contact rows, footer links, cookie banner */
.amenity-tile p, .amenity-tile p a, .other-room-card .body > span, .plan-item p, .room-slide .desc,
.attr-card p, .offer-card-body p, .widget-row a, .widget-row span,
.footer-col-body a, .footer-col address, .footer-col address a, .footer-col address span,
.footer-social-label, .cookie-consent-text, .cookie-consent-text a{
  font-size:14px !important; line-height:1.65 !important;
}
/* Caption - 12px: stat labels, counters, chips, footer legal row, form hints */
.overview-stats span, .about-location, .footer-bottom, .footer-bottom *, .exp-slider-count,
.safari-points li, .form-field span[id$="-hint"], .rg-dots, .or-dots{
  font-size:12px !important; line-height:1.5 !important;
}
.overview-stats span b{ font-size:16px !important; }

/* ================= APPROVED TYPE SPEC (client, Option 1 "Garud Brand") =================
   Font families and weights only; sizes stay as built.
   H1 / H2 / H3 / FAQ: Cormorant Garamond 500 · Body: Mulish 400
   Eyebrow + Button: Cinzel 600 · Accent: Caveat 400 */
h1, h2, h3, .faq-item summary{ font-family:var(--serif) !important; font-weight:500 !important; }
p, .about-p, .desc{ font-family:var(--sans); font-weight:400; }
.eyebrow, .btn{ font-family:'Cinzel', serif !important; font-weight:600 !important; }
.polaroid figcaption, .annotation{ font-family:'Caveat', cursive !important; font-weight:400 !important; }

/* Every CTA takes the approved Button style (Cinzel 600, uppercase), not only .btn:
   text-link CTAs, booking popover actions, the continue-booking CTA, and the sticky bar. Sizes unchanged. */
.link-cta, .guest-done, .add-room-btn, .bn-cta, .sticky-book-bar{
  font-family:'Cinzel', serif !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.14em !important;
}
.sticky-book-bar .sticky-book-note{ text-transform:none !important; }

/* Contact page: grey band behind the "Garud Forest Contact Details" widget. */
.contact-details-grey{ background:#f4f4f1 !important; }
.contact-details-grey .contact-widget{ background:transparent; }

/* ================= EYEBROW + BUTTON LABEL SIZE (client: option B "Readable") =================
   Eyebrows 14px desktop / 13px mobile, 0.12em tracking, dark teal on light grounds,
   light teal kept on the dark bands. Button labels move to 13px to sit with them. */
.eyebrow{ font-size:14px !important; letter-spacing:.12em !important; color:#003c32 !important; }
.rooms .eyebrow, section.facilities .eyebrow, .home-faqs .eyebrow, .final-cta .eyebrow,
.page-hero .eyebrow, .site-footer .eyebrow{ color:#a3d6c6 !important; }
.btn{ font-size:13px !important; letter-spacing:.12em !important; }
@media (max-width:767px){ .eyebrow{ font-size:13px !important; } }

/* Contact details widget (contact page + homepage): solid colours, the
   template's translucent teal was 2.3:1 (labels) and 4.1:1 (rows) on the grey. */
.contact-widget .widget-heading{ color:#003c32 !important; }
.contact-widget .widget-row, .contact-widget .widget-row a, .contact-widget .widget-row span{ color:#1a1a1a !important; }
.contact-widget .widget-row a:hover{ color:#003c32 !important; }
.contact-widget .widget-ic{ color:#003c32 !important; }
.contact-widget .widget-row .link-cta{ color:#003c32 !important; }

/* Contact widget phone + email: the site's anchor style (as in the homepage intro links):
   underlined, in the site teal, solid so it stays readable on the grey band. */
.contact-widget .widget-row a[href^="tel:"], .contact-widget .widget-row a[href^="mailto:"]{
  color:#003c32 !important; text-decoration:underline !important; text-decoration-color:#003c32 !important;
  font-weight:400 !important;
}
.contact-widget .widget-row a[href^="tel:"]:hover, .contact-widget .widget-row a[href^="mailto:"]:hover{ color:#002a23 !important; }

/* Contact details rows (contact page + homepage): 16px, client request. */
.contact-widget .widget-row, .contact-widget .widget-row a, .contact-widget .widget-row span{ font-size:16px !important; }
.contact-widget .widget-row .link-cta{ font-size:13px !important; }

/* Homepage section CTAs ("Explore the Spa", "Explore All Facilities", ...): one rhythm.
   Content -> button gap = 56px (matches heading -> content), 40px on mobile. */
#amenities .exp-more, #facilities > .container:last-child, #safari .offer-grid + div,
#gallery .gallery-more, #faqs .faq-more{ margin-top:56px !important; padding-top:0 !important; }
@media (max-width:767px){
  #amenities .exp-more, #facilities > .container:last-child, #safari .offer-grid + div,
  #gallery .gallery-more, #faqs .faq-more{ margin-top:40px !important; }
}
/* offsets measured in the render: these four blocks sit 20px lower, gallery does not */
#amenities .exp-more, #facilities > .container:last-child, #safari .offer-grid + div, #faqs .faq-more{ margin-top:48px !important; }
@media (max-width:767px){ #amenities .exp-more, #facilities > .container:last-child, #safari .offer-grid + div, #faqs .faq-more{ margin-top:40px !important; } }
/* section bottom: button -> section edge = 110px desktop / 60px mobile everywhere */
#gallery{ padding-bottom:80px !important; }
.home-faqs{ padding-top:80px !important; padding-bottom:80px !important; }
@media (max-width:767px){ #gallery{ padding-bottom:48px !important; } .home-faqs{ padding-top:48px !important; padding-bottom:48px !important; } }

/* =====================================================================================
   TYPE SCALE (client-approved, 2026-09-29) — 13 styles. See TYPE-AUDIT.md.
   Desktop values first; mobile (<=767px) in the block below. Rows 7-11 (body, small,
   caption, eyebrow, button) are defined earlier in this file and are unchanged.
   ===================================================================================== */
/* 1 Page title — H1 */
h1, .page-hero h1, .about-copy h1{ font-size:56px !important; line-height:1.15 !important; }
/* 2 H2 - ONE style everywhere (client, 2026-09-29): 36px desktop / 28px mobile */
h2:not(.widget-heading):not(.booking-modal-head), .section-head h2, .final-cta h2, .dining-card h2, .contact-widget-head h2,
.overview-text h2, .wide-row .content h2, .faq-section-head h2, .gallery-category-head h2,
.getting-here-grid h2, .contact-form h2, .location-grid h2, .facilities-crosslink h2{
  font-size:36px !important; line-height:1.2 !important; }
/* 3 H3 - ONE style everywhere: 20px desktop / 18px mobile. Also FAQ questions, facility names,
   policy terms, and the booking pop-up title. */
h3:not(.widget-heading), .room-slide h3, .other-room-card h3, .offer-card-body h3, #expSliderTitle, .contact-block h3,
.gh-aside h3, .amenity-tile h3, .plan-item h3, .attr-card h3, .timeline-item h3,
.faq-item summary, .facility-card .fname, .policy-list dt, .booking-modal-head{
  font-size:20px !important; line-height:1.35 !important; }
/* 6 Stat number */
.overview-stats b, .overview-stats span b{ font-family:var(--serif) !important; font-weight:500 !important; font-size:22px !important; line-height:1.2 !important; }
/* 12 Label — Cinzel 600 12px capitals: chips, tags, badges, pills, breadcrumbs, form labels,
   top strip, "Menu", widget / footer / sitemap headings, counters */
.tag, .chip, .badge, .pill, .offer-kicker, .quicknav-pill, .gallery-jump a, .room-slide .index,
.safari-points li, .fnote, .rail-text, .hero-scroll-hint span, .hero-scroll-hint, .gallery-category-head span,
.exp-slider-count, .crumb, .crumb a, .form-field label, .booking-field label, .hamburger-label,
.brand-strip, .widget-heading, .footer-col-heading, .footer-col h4, .footer-col-toggle, .sitemap-col .widget-heading{
  font-family:'Cinzel', serif !important; font-weight:600 !important; font-size:12px !important;
  text-transform:uppercase !important; letter-spacing:.12em !important; line-height:1.4 !important; }
.form-field label{ text-transform:none !important; letter-spacing:.06em !important; }
.form-consent{ font-size:12px !important; }
/* 9 Caption — gallery image captions in Mulish 12, sentence case */
.gallery-grid figcaption, .gj-photo figcaption, .gj-title{ font-family:var(--sans) !important; font-weight:400 !important;
  font-size:12px !important; text-transform:none !important; letter-spacing:.02em !important; }
/* 13 Accent — Caveat */
.polaroid figcaption, .annotation{ font-size:20px !important; }

@media (max-width:767px){
  h1, .page-hero h1, .about-copy h1{ font-size:36px !important; }
  h2:not(.widget-heading):not(.booking-modal-head), .section-head h2, .final-cta h2, .dining-card h2, .contact-widget-head h2,
  .overview-text h2, .wide-row .content h2, .faq-section-head h2, .gallery-category-head h2,
  .getting-here-grid h2, .contact-form h2, .location-grid h2, .facilities-crosslink h2{ font-size:28px !important; }
  h3:not(.widget-heading), .room-slide h3, .other-room-card h3, .offer-card-body h3, #expSliderTitle, .contact-block h3,
  .gh-aside h3, .amenity-tile h3, .plan-item h3, .attr-card h3, .timeline-item h3,
  .faq-item summary, .facility-card .fname, .policy-list dt, .booking-modal-head{ font-size:18px !important; }
  .overview-stats b, .overview-stats span b{ font-size:20px !important; }
  .polaroid figcaption, .annotation{ font-size:18px !important; }
}
/* strays found by the type audit, snapped onto the scale */
.link-cta, .link-cta *{ font-size:13px !important; }                       /* Button 13 */
.btn, .btn-book, .sticky-book-bar, .bn-cta, .guest-done{ font-size:13px !important; }
.cookie-consent button, .cookie-consent .btn, .cookie-consent a.btn{ font-family:'Cinzel', serif !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.12em !important; text-transform:uppercase !important; }
.call-tooltip, .field-tooltip{ font-size:12px !important; }                /* Caption 12 */
.ccp-box, .ccp-box *, .ccp-dial, .guest-trigger, .booking-bar input, .booking-bar select{ font-size:14px !important; }  /* Small 14 */
.facility-card .fname{ font-weight:500 !important; }

/* Top strip on phones: the Cinzel line is 382px wide, so it is set a touch smaller with
   tighter tracking and a 16px side gutter; it wraps to 2 lines instead of truncating below 340px. */
@media (max-width:480px){
  .brand-strip{ font-size:11px !important; letter-spacing:.06em !important; padding:0 16px !important; text-overflow:clip !important; }
}
@media (max-width:340px){
  .brand-strip{ white-space:normal !important; height:auto !important; line-height:1.4 !important; padding:6px 16px !important; }
}
/* remaining strays from the type audit */
.cookie-consent-btn, .cookie-consent-actions button{ font-family:'Cinzel', serif !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.12em !important; text-transform:uppercase !important; }
.call-tooltip{ font-weight:400 !important; }
.overview-stats span{ font-family:'Cinzel', serif !important; font-weight:600 !important; font-size:12px !important; letter-spacing:.12em !important; }
.overview-stats span b{ letter-spacing:0 !important; text-transform:none !important; }
.policy-list dt, .widget-row b{ font-weight:500 !important; }
#dirGo, .map-section .btn, a.link-cta[href="location.html"]{ font-size:13px !important; }
.about-location{ font-family:'Cinzel', serif !important; font-weight:600 !important; font-size:12px !important; letter-spacing:.12em !important; text-transform:uppercase !important; }

/* Top strip: text vertically centred in the 30px band (the Label line-height had pulled it to the top). */
.brand-strip{ display:flex !important; align-items:center !important; justify-content:center !important;
  height:30px !important; line-height:1 !important; }
@media (max-width:340px){ .brand-strip{ height:auto !important; min-height:30px; line-height:1.4 !important; padding:6px 16px !important; text-align:center; } }

/* Homepage H1: "The Garud Forest," and "Tadoba" never break internally -> 1 line where it fits, 2 lines max. */
.about-copy h1 .nw{ white-space:nowrap; }
/* ...and the desktop text column is given enough width for "The Garud Forest," at 56px;
   between 1101 and 1440px the title scales with the viewport so it never overflows. */
@media (min-width:1101px){
  .about-grid{ grid-template-columns:auto minmax(0,.9fr) minmax(0,1.06fr) !important; }
  .about-copy h1{ font-size:clamp(40px, 4vw, 56px) !important; }
}
/* very small phones: "The Garud Forest," at 36px is 1px wider than a 320px screen */
@media (max-width:340px){ .about-copy h1{ font-size:32px !important; } }

/* Footer Connect: phone, email, Google Maps as one labelled list (desktop and mobile).
   The long email is allowed to wrap inside the narrow column. */
.footer-social-list a{ align-items:flex-start !important; }
.footer-social-list svg{ margin-top:2px; }
.footer-phone{ white-space:nowrap; }
@media (max-width:900px){
  .footer-social-list{ flex-direction:column !important; gap:14px !important; }
  .footer-social-list a{ width:auto !important; height:auto !important; border:0 !important; border-radius:0 !important; justify-content:flex-start !important; gap:10px !important; }
  .footer-social-label{ position:static !important; width:auto !important; height:auto !important; margin:0 !important; overflow:visible !important; clip:auto !important; white-space:normal !important; }
}

/* Footer desktop columns: Help (3 short links) gives width to Connect (phone + email). */
@media (min-width:901px){
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr .7fr 1.4fr !important; }
  .footer-social-list{ gap:12px !important; }   /* one-line Connect rows step 38px, same as the link columns */
}
/* Footer icons: optically centred on the first line of text (Mulish's glyphs sit ~2px below the line-box middle). */
.footer-social-list svg{ margin-top:4px !important; }
.fc-row .fc-ic{ margin-top:4px !important; }

/* Room pages: "Included with Your Stay / Room Amenities" on the grey band, white cards;
   the marquee edge fades match the grey. */
.room-amenities-grey{ background:#f4f4f1 !important; }
.room-amenities-grey .marquee-row::before{ background:linear-gradient(90deg, #f4f4f1, transparent) !important; }
.room-amenities-grey .marquee-row::after{ background:linear-gradient(270deg, #f4f4f1, transparent) !important; }
.room-amenities-grey .facility-card{ background:#ffffff; }

/* Dining page: "Where You Sit" on the grey band (white tiles), "At the Table" gallery on white. */
section#cuisine-menu{ background:#f4f4f1 !important; }
section#cuisine-menu .amenity-tile{ background:#ffffff; }
section#dining-gallery{ background:#ffffff !important; }

/* Spa page: "On the Table / Treatments" on the grey band (white tiles), "Inside the Spa" gallery on white. */
section#spa-treatments{ background:#f4f4f1 !important; }
section#spa-treatments .amenity-tile{ background:#ffffff; }
section#spa-gallery{ background:#ffffff !important; }

/* Dining overview stats sit icon-beside-text: the stacked-stat margins (10px under the icon,
   6px above the text) are cleared so each icon centres on its line. */
#dining-overview .overview-stats svg{ margin:0 !important; flex-shrink:0; }
#dining-overview .overview-stats span{ margin-top:0 !important; display:inline-flex !important; align-items:center; gap:6px; }

/* Heading -> paragraph spacing, site standard (as .section-head): H2 + paragraph = 16px.
   The overview widget (room pages, dining, spa, about, meetings) had 0px. */
.overview-text h2, .wide-row .content h2, .location-grid h2, .facilities-crosslink h2{ margin-bottom:0 !important; }
.overview-text h2 + p, .wide-row .content h2 + p, .location-grid h2 + p, .facilities-crosslink h2 + p{ margin-top:16px !important; }
/* .wide-row .content is a flex column with a 14px gap, so the paragraph only adds 2px. */
.wide-row .content h2 + p, .facilities-crosslink h2 + p{ margin-top:2px !important; }
/* Dining stats may wrap on narrow screens (the longer "Timings: ..." line overflowed a 390px phone). */
@media (max-width:767px){
  #dining-overview .overview-stats div{ white-space:normal !important; }
  #dining-overview .overview-stats span{ flex-wrap:wrap; row-gap:2px; }
}

/* Meetings & Events: "Setups / Shape the Room to the Day" on the grey band, white tiles. */
.setups-grey{ background:#f4f4f1 !important; }
.setups-grey .amenity-tile{ background:#ffffff; }

/* Meetings & Events hall stats: icons at 28px (client). */
#hall-overview .overview-stats svg{ width:28px !important; height:28px !important; }

/* Outline versions of client glyphs (tribal dance, dargah) */
svg.cicon-outline{ fill:none !important; stroke:currentColor !important; color:var(--brown); }
svg.cicon-outline *{ fill:none !important; }
/* Experiences page: intro on white, "5 Safari Gates" on the grey band with white cards */
#day-intro{ background:#ffffff !important; }
.gates-grey{ background:#f4f4f1 !important; }
.gates-grey .attr-card{ background:#ffffff; }

/* Experiences page: quick-nav pills + the Safari row ("Navegaon and Beyond") on white. */
.exp-quicknav, #day-rows{ background:#ffffff !important; }

/* Location "Getting Here": client icons at 28px in white, in 48px teal circles;
   the connecting line and the text indent follow the larger circle. */
.gh-timeline .timeline-item{ padding-left:68px !important; }
.gh-timeline .timeline-dot{ width:48px !important; height:48px !important; }
.gh-timeline .timeline-dot svg{ width:28px !important; height:28px !important; color:#ffffff !important; fill:#ffffff !important; stroke:none !important; }
.gh-timeline .timeline-item::before{ left:23.5px !important; top:56px !important; }
.gh-timeline .timeline-item h3{ min-height:48px; display:flex; align-items:center; margin-bottom:4px !important; }

/* FAQs page (quick-nav directly under the hero): hero -> pills 56px, pills -> first group
   56px, last group -> CTA 110px (site rhythm; 40 / 40 / 60 on mobile). */
.page-hero + .exp-quicknav{ padding-top:56px !important; padding-bottom:0 !important; }
.exp-quicknav + .page-intro{ padding-top:48px !important; padding-bottom:80px !important; }
@media (max-width:767px){
  .page-hero + .exp-quicknav{ padding-top:40px !important; }
  .exp-quicknav + .page-intro{ padding-top:32px !important; padding-bottom:48px !important; }
}

/* ================= CLIENT SHEET 2026-09-30 ================= */
/* Header logo: larger, and more white space around it once the header turns white on scroll. */
.site-header.nav-v2 .brand img{ height:120px !important; }
.site-header.nav-v2.scrolled{ padding:20px 0 !important; }
.site-header.nav-v2.scrolled .brand img{ height:84px !important; }
@media (max-width:767px){
  .site-header.nav-v2 .brand img{ height:80px !important; }
  .site-header.nav-v2.scrolled{ padding:14px 0 !important; }
  .site-header.nav-v2.scrolled .brand img{ height:60px !important; }
}
/* Footer: logo (with the resort name) centred in its column. */
.footer-brand{ justify-content:center !important; }
.footer-brand img{ margin-left:auto !important; margin-right:auto !important; display:block; }
/* Marquee rows (homepage facilities, room amenities): swipe / drag-scrollable; JS drives the slow
   auto-scroll and pauses it while touched or hovered. Edge fades become a mask so they stay put. */
.marquee-row{ overflow-x:auto !important; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.marquee-row::-webkit-scrollbar{ display:none; }
.marquee-row.is-dragging{ cursor:grabbing; }
.marquee-row::before, .marquee-row::after{ display:none !important; }
.marquee-track{ animation:none !important; transform:none !important; }
.marquee-row .facility-card{ user-select:none; }
/* Carousel forward / back controls centred under the slider. */
.exp-slider-nav{ justify-content:center !important; width:100%; }
@media (prefers-reduced-motion:reduce){ .marquee-row{ -webkit-mask-image:none !important; mask-image:none !important; overflow-x:visible !important; cursor:default; } }

/* ---------- marquee controls: arrows + dots under Facilities (homepage) and Room Amenities ---------- */
.mq-controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:32px; }
.mq-arrow{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent;
  border:1px solid rgba(0,60,50,.35); color:#003c32; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.mq-arrow:hover{ background:#003c32; color:#ffffff; border-color:#003c32; }
.mq-arrow:focus-visible{ outline:2px solid #003c32; outline-offset:3px; }
.mq-arrow svg{ width:18px; height:18px; }
.mq-dots{ display:flex; gap:9px; }
.mq-dots button{ width:8px; height:8px; border:none; padding:0; background:rgba(0,60,50,.25); cursor:pointer; transition:background .2s, transform .2s; }
.mq-dots button.active{ background:#003c32; transform:scale(1.3); }
/* on the dark green facilities band */
section.facilities .mq-arrow{ border-color:rgba(255,255,255,.55); color:#ffffff; }
section.facilities .mq-arrow:hover{ background:rgba(255,255,255,.16); border-color:#ffffff; color:#ffffff; }
section.facilities .mq-arrow:focus-visible{ outline-color:#ffffff; }
section.facilities .mq-dots button{ background:rgba(255,255,255,.3); }
section.facilities .mq-dots button.active{ background:#a3d6c6; }
@media (prefers-reduced-motion:reduce){ .mq-controls{ display:none; } }

/* ---------- homepage hero: previous / next arrows, vertically centred on the photo ---------- */
.hero-slider .hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.7);
  color:#ffffff; cursor:pointer; transition:background .2s; }
.hero-slider .hero-arrow:hover{ background:rgba(255,255,255,.18); }
.hero-slider .hero-arrow:focus-visible{ outline:2px solid #ffffff; outline-offset:3px; }
.hero-slider .hero-arrow svg{ width:20px; height:20px; }
.hero-slider .slide-prev.hero-arrow{ left:24px; }
.hero-slider .slide-next.hero-arrow{ right:24px; }
@media (max-width:767px){ .hero-slider .hero-arrow{ width:40px; height:40px; } .hero-slider .slide-prev.hero-arrow{ left:12px; } .hero-slider .slide-next.hero-arrow{ right:12px; } }

/* ===== Facilities (homepage) + Room Amenities: contained card carousel (replaces the marquee look) =====
   Whole cards, aligned to the page container, snap-scrolling; 6 / 4 / 3 / 2 per view. */
.marquee-row{ max-width:var(--max); margin:0 auto !important; padding:0 32px !important; box-sizing:border-box;
  overflow-x:auto !important; scroll-snap-type:x mandatory; scroll-padding-left:32px; scroll-behavior:auto;
  -webkit-mask-image:none !important; mask-image:none !important; }
.marquee-row.is-dragging{ scroll-snap-type:none; }
.marquee-track{ width:auto !important; gap:20px !important; flex-wrap:nowrap !important; justify-content:flex-start !important; }
.marquee-track .facility-card[aria-hidden="true"]{ display:none !important; }
.marquee-track .facility-card{ flex:0 0 calc((100% - 5 * 20px) / 6) !important; min-width:0 !important; width:auto !important;
  scroll-snap-align:start; box-sizing:border-box; }
@media (max-width:1199px){ .marquee-track .facility-card{ flex-basis:calc((100% - 3 * 20px) / 4) !important; } }
@media (max-width:899px){ .marquee-track .facility-card{ flex-basis:calc((100% - 2 * 20px) / 3) !important; } }
@media (max-width:599px){
  .marquee-row{ padding:0 16px !important; scroll-padding-left:16px; }
  .marquee-track{ gap:12px !important; }
  .marquee-track .facility-card{ flex-basis:calc((100% - 12px) / 2) !important; }
}
@media (prefers-reduced-motion:reduce){ .marquee-row{ overflow-x:auto !important; } .mq-controls{ display:flex !important; } }
/* the gutter sits outside the scroll box, so no neighbouring card peeks into it */
.marquee-row{ max-width:calc(var(--max) - 64px) !important; width:calc(100% - 64px) !important; padding:0 !important; scroll-padding-left:0 !important; }
@media (max-width:599px){ .marquee-row{ width:calc(100% - 32px) !important; } }

/* Footer: logo + resort name centred on the page, above the columns (client). */
.footer-brand-centre{ display:flex !important; justify-content:center !important; margin:0 0 48px !important; padding-top:8px; overflow:visible !important; }
.footer-brand-centre img{ width:170px !important; margin:0 !important; transform:none !important; }
.footer-brand-col{ margin-top:0 !important; }
@media (max-width:767px){ .footer-brand-centre{ margin-bottom:32px !important; } .footer-brand-centre img{ width:140px !important; } }

/* ================= FOOTER: logo centred, links on either side =================
   Desktop: The Resort | Explore | [logo + address] | Help | Connect. The centre column is the
   widest and every column shares one top line; mobile stacks logo first, then the accordions. */
.footer-grid.footer-grid-3{ grid-template-columns:1fr 1fr 1.5fr .8fr 1.3fr !important; align-items:start; }
.footer-grid-3 .footer-col + .footer-col{ border-left:none !important; padding-left:0 !important; }
.footer-grid-3 .footer-centre{ text-align:center; padding:0 16px !important; border-left:1px solid rgba(255,255,255,.12) !important;
  border-right:1px solid rgba(255,255,255,.12) !important; margin-top:0 !important; }
.footer-grid-3 .footer-centre .footer-brand-centre{ margin:0 0 20px !important; padding-top:0; }
.footer-grid-3 .footer-centre .footer-brand-centre img{ width:170px !important; }
.footer-grid-3 .footer-centre .fc-row{ justify-content:center; text-align:center; }
.footer-grid-3 .footer-centre .fc-row .fc-ic{ display:none; }
.footer-grid-3 .footer-centre address span{ max-width:30ch; }
.footer-grid-3 .footer-col:nth-child(4), .footer-grid-3 .footer-connect{ padding-left:8px !important; }
@media (max-width:1100px) and (min-width:901px){
  .footer-grid.footer-grid-3{ grid-template-columns:1fr 1fr 1.4fr 1fr 1.3fr !important; gap:24px !important; }
}
@media (max-width:900px){
  .footer-grid.footer-grid-3{ grid-template-columns:1fr !important; gap:0 !important; }
  .footer-grid-3 .footer-centre{ order:-1; border:none !important; padding:0 0 28px !important; }
  .footer-grid-3 .footer-col{ border-top:none; padding-top:0; }
  .footer-grid-3 .footer-col:not(.footer-centre){ border-top:1px solid rgba(255,255,255,.12) !important; padding:20px 0 !important; }
  .footer-grid-3 .footer-centre .footer-brand-centre img{ width:140px !important; }
}
/* symmetric sides so the centre column (logo) sits exactly on the page centre (desktop only) */
@media (min-width:901px){ .footer-grid.footer-grid-3{ grid-template-columns:1fr 1.1fr 1.4fr 1fr 1.1fr !important; } }
.footer-grid-3 .footer-col:nth-child(4), .footer-grid-3 .footer-connect{ padding-left:0 !important; }
@media (max-width:1100px) and (min-width:901px){ .footer-grid.footer-grid-3{ grid-template-columns:1fr 1.1fr 1.4fr 1fr 1.1fr !important; } }
@media (min-width:901px){ .footer-grid-3 .footer-col.footer-centre{ padding-left:16px !important; padding-right:16px !important; } }
@media (min-width:901px){ .footer-grid-3 .footer-col.footer-centre{ border-left:1px solid rgba(255,255,255,.12) !important; border-right:1px solid rgba(255,255,255,.12) !important; } }
/* continuous loop: the duplicate card set is shown again (JS keeps the view inside the first set) */
.marquee-track .facility-card[aria-hidden="true"]{ display:flex !important; }

/* About page: "Hours on the Estate / The Shape of the Day" on the grey band, white tiles. */
.about-hours-grey{ background:#f4f4f1 !important; }
.about-hours-grey .amenity-tile{ background:#ffffff; }

/* ================= "Coming Soon in November 2026" pop-up ================= */
html.cs-pop-lock, html.cs-pop-lock body{ overflow:hidden; }
.cs-pop{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; transition:opacity .3s ease; }
.cs-pop.open{ opacity:1; }
.cs-pop-overlay{ position:absolute; inset:0; background:rgba(0,26,21,.72); }
.cs-pop-card{ position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(760px,100%); background:#ffffff;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5); transform:translateY(12px); transition:transform .3s ease; }
.cs-pop.open .cs-pop-card{ transform:none; }
.cs-pop-media{ min-height:320px; }
.cs-pop-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.cs-pop-body{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:14px; padding:48px 40px; }
.cs-pop-body h2{ font-size:36px !important; line-height:1.2 !important; color:#003c32; margin:0; }
.cs-pop-cta{ margin-top:12px; }
.cs-pop-close{ position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border:0; background:rgba(255,255,255,.92);
  color:#003c32; font-size:26px; line-height:1; cursor:pointer; }
.cs-pop-close:hover{ background:#003c32; color:#ffffff; }
.cs-pop-close:focus-visible, .cs-pop-cta:focus-visible{ outline:2px solid #003c32; outline-offset:3px; }
@media (max-width:640px){
  .cs-pop-card{ grid-template-columns:1fr; }
  .cs-pop-media{ min-height:0; height:220px; }
  .cs-pop-body{ padding:28px 24px 32px; align-items:center; text-align:center; }
  .cs-pop-body h2{ font-size:28px !important; }
}
@media (prefers-reduced-motion:reduce){ .cs-pop, .cs-pop-card{ transition:none; } }
.cs-pop{ z-index:2147483000 !important; }

/* Pop-up entrance: gentle, layered easing instead of an abrupt appear.
   Backdrop fades over 0.9s; the card follows 0.15s later, rising 24px and settling from 96% scale. */
.cs-pop{ opacity:1 !important; transition:none !important; }
.cs-pop-overlay{ opacity:0; transition:opacity .9s cubic-bezier(.22,.61,.36,1); }
.cs-pop-card{ opacity:0; transform:translateY(24px) scale(.96) !important;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1) .15s, transform .9s cubic-bezier(.22,.61,.36,1) .15s !important; }
.cs-pop.open .cs-pop-overlay{ opacity:1; }
.cs-pop.open .cs-pop-card{ opacity:1; transform:none !important; }
.cs-pop.closing .cs-pop-overlay{ opacity:0; transition:opacity .5s ease .1s; }
.cs-pop.closing .cs-pop-card{ opacity:0; transform:translateY(12px) scale(.98) !important; transition:opacity .4s ease, transform .5s ease !important; }
@media (prefers-reduced-motion:reduce){ .cs-pop-overlay, .cs-pop-card{ transition:opacity .3s linear !important; transform:none !important; } }

/* Experiences: "The Gates Within Reach" as 2 columns. Gate list on the left (compact rows), image on the right */
.gates-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:stretch; }
.gates-list{ display:flex; flex-direction:column; gap:12px; }
.gates-list .gate-row{ display:flex; align-items:flex-start; gap:18px; padding:18px 22px; margin:0; }
.gates-list .gate-ic{ flex:0 0 auto; padding-top:2px; }
.gates-list .gate-head{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-bottom:4px; }
.gates-list .gate-head h3{ margin:0; }
.gates-list .gate-row p{ margin:0; }
.gates-media{ position:relative; min-height:100%; overflow:hidden; }
.gates-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){
  .gates-split{ grid-template-columns:1fr; gap:24px; }
  .gates-media{ order:-1; aspect-ratio:4/3; min-height:0; }
}
.gates-list .gate-dir{ display:inline-block; margin-top:10px; }

/* Location: "Close to the Navegaon Safari Gate" card. Taller crop so the gate's name board shows */
.gh-aside .media{ aspect-ratio:1/1; }
.gh-aside .media img{ object-position:50% 14%; }
/* Experiences gates: the illustrated safari map is shown whole (never cropped), at its own 2:3 shape */
.gates-split{ align-items:start; }
.gates-media.gates-map{ min-height:0; aspect-ratio:auto; background:#faf6ee; }
.gates-media.gates-map img{ position:static; width:100%; height:auto; object-fit:contain; }
@media (max-width:900px){ .gates-media.gates-map{ aspect-ratio:auto; } }
.gates-map-col{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.gates-map-col .gates-media{ width:100%; }
@media (max-width:900px){ .gates-map-col{ order:-1; } }
.gates-map-cta{ display:flex; justify-content:center; margin-top:40px; }
/* Gates: list and map end level. The map (never cropped) sets the height; tighter rows spread evenly to fill it */
@media (min-width:1200px){
  .gates-split{ align-items:stretch; }
  .gates-list{ justify-content:space-between; gap:8px; }
  .gates-list .gate-row{ padding:13px 22px; }
  .gates-list .gate-dir{ margin-top:6px; }
  .gates-map-col{ align-self:start; }
}
/* below 1200px a half-width map is far shorter than the list, so stack: map first, capped width */
@media (max-width:1199px){
  .gates-split{ grid-template-columns:1fr; gap:28px; }
  .gates-map-col{ order:-1; width:100%; max-width:520px; margin:0 auto; }
}
@media (min-width:1200px) and (max-width:1279px){ .gates-list{ gap:6px; } .gates-list .gate-row{ padding:10px 20px; } }

/* Experiences: band rhythm. White intro + pills / grey safari band (heading, prose, photo row) / white gates / grey trail rows */
.exp-quicknav{ padding-bottom:72px !important; }
#day-rows, #exp-rows{ background:#F4F4F1 !important; }
.safari-prose{ text-align:left; }
.safari-prose p{ font-size:16px; line-height:1.75; color:var(--ink-soft); margin:0; }
.safari-prose p + p{ margin-top:16px; }
.safari-prose a{ color:#003C32; text-decoration:underline; text-underline-offset:3px; }
.safari-prose a:hover{ text-decoration-thickness:2px; }
#day-rows{ padding-top:80px !important; padding-bottom:80px !important; }   /* same band padding as #gates / #exp-rows */
.gates-white{ background:#ffffff !important; }
.gates-white .gate-row{ background:#ffffff; }
.gates-list .gate-row{ scroll-margin-top:var(--gate-offset,170px); }
@media (max-width:900px){
  .exp-quicknav{ padding-bottom:48px !important; }
  #day-rows{ padding-top:48px !important; padding-bottom:48px !important; }
}
/* Safari permits: 3 white cards under the safari photo row, inside the grey safari band */
.safari-permits{ margin-top:56px; }
#safari .media img{ object-position:50% 18%; }   /* keep the NAVEGAON SAFARI GATE board in frame */
.safari-permits .amenity-tile{ background:#ffffff; }
.gates-list .gate-row{ scroll-margin-top:190px; }
@media (max-width:900px){ .safari-permits{ margin-top:56px; } .gates-list .gate-row{ scroll-margin-top:150px; } }
/* the band is a flex column: let its container shrink to the viewport so the permits swipe row scrolls inside itself */
#day-rows > .container, .safari-permits{ min-width:0; width:100%; }
#day-intro .section-head{ max-width:760px; }   /* match the safari prose width */
/* safari photo row is no longer last in its band: drop its divider and bottom padding so the 56px gap is the only space before the permit cards */
/* divider under the safari points row, same as between rows (56px, line, 56px) */
#safari-notes{ border-bottom:1px solid var(--line) !important; padding-bottom:56px !important; }
/* permit cards: static, no hover lift/shadow/underline */
.safari-permits .amenity-tile, .safari-permits .amenity-tile:hover{ transform:none !important; box-shadow:none !important; transition:none !important; }
.safari-permits .amenity-tile:hover{ border-bottom-color:transparent !important; }

/* Meetings & Events: The Hall photo shorter (4:3, level with its text); new Corporate Offsites row; enquiry band grey */
#hall-overview .slider-frame{ aspect-ratio:4/3 !important; }
#offsites, #hall-overview{ background:#ffffff !important; padding:80px 0 !important; }
#offsites .wide-row, #hall-overview .wide-row{ border-bottom:none !important; padding:0 !important; }
.enquiry-grey{ background:#F4F4F1 !important; }
@media (max-width:900px){ #offsites, #hall-overview{ padding:48px 0 !important; } }
#event-enquiry{ padding-bottom:80px !important; }
@media (max-width:900px){ #event-enquiry{ padding-bottom:48px !important; } }
.text-row-cta{ align-self:flex-start; margin-top:28px; }
#event-enquiry{ scroll-margin-top:60px; }   /* Enquire Now lands with the form clear of the fixed header */
#enquiry-form{ scroll-margin-top:170px; }   /* Enquire Now lands on the form card, clear of the fixed header */
@media (max-width:900px){ #enquiry-form{ scroll-margin-top:130px; } }
.nowrap{ white-space:nowrap; }
/* Meetings hero: "Corporate Gatherings," held on one line. The box widens to fit; on narrow phones the size scales down just enough to fit */
h1:has(> .nowrap){ max-width:none; }
@media (max-width:480px){ h1:has(> .nowrap){ font-size:min(36px, calc((100vw - 32px) / 11.2)) !important; } }
/* Homepage safari: Navegaon gate photo is portrait; frame the top so the full name board fills the card */
.offer-card-whole img{ object-position:50% 18%; }
/* phones: the 4:3 card is too short for the board and the text together, so this one card is square */
@media (max-width:639px){ .offer-card-whole{ aspect-ratio:1/1; } .offer-card-whole img{ object-position:50% 30%; } }

/* == remarketing-nudge == "Get these prices emailed to you!" (namespaced .pi-)
   THE TOKEN BLOCK IS THE ONLY PART YOU EDIT PER SITE. Derive every value from the
   target site's own CSS (SKILL.md STEP 3); the structure below is proven on The Hans
   Hotels (Sep 2026) and stays as-is. Scoped to .pi-modal — no :root pollution.

   This is the only true modal on most sites: it takes the whole screen and locks body
   scroll, so nothing else may paint above it except a skip link. Set --rmn-z above the
   site's drawer/cookie notice and below its skip link. */
.pi-modal {
  /* ---- design tokens: fill from the target site ---- */
  --rmn-z: 10050;                                  /* above header 100, booking modal 210, lightbox 300, cookie banner 9999 */
  --rmn-backdrop: rgba(0, 26, 21, .62);            /* the booking modal's own forest scrim, a touch denser */
  --rmn-surface: #002a23;                          /* --brown-deep, the booking modal's dark tone */
  --rmn-shadow: 0 24px 60px rgba(0, 26, 21, .28);
  --rmn-ink: #ffffff;                              /* 15.49:1 on surface */
  --rmn-muted: #c9d6d2;                            /* 10.35:1 on surface */
  --rmn-accent: #e6b45a;                           /* garud gold, 8.15:1 on surface */
  --rmn-field-bg: #ffffff;
  --rmn-field-ink: #003c32;                        /* --ink */
  --rmn-field-placeholder: #5a6b67;                /* 5.62:1 on white */
  --rmn-cta-bg: #e6b45a;                           /* garud gold, same as the booking modal's Book Now */
  --rmn-cta-ink: #003c32;                          /* 6.52:1 on gold */
  --rmn-cta-hover: #d39e3f;                        /* the sitewide Book Now hover, 5.16:1 */
  --rmn-close-bg: rgba(255, 255, 255, .10);
  --rmn-close-hover: rgba(255, 255, 255, .22);
  --rmn-font-display: var(--serif, 'Cormorant Garamond', Garamond, serif);
  --rmn-font-body: var(--sans, 'Mulish', 'Helvetica Neue', Arial, sans-serif);
  --rmn-font-cta: 'Cinzel', serif;                 /* the site's .btn face */
  --rmn-display-weight: 500;                       /* the site sets h1-h3 to 500 */
  --rmn-cta-transform: uppercase;
  --rmn-cta-tracking: .12em;
  --rmn-radius: 0;                                 /* the booking modal panel and buttons are square */
  --rmn-field-radius: 0;
  --rmn-t: .4s var(--ease, cubic-bezier(.4, 0, .2, 1));
  /* ---- end tokens ---- */

  position: fixed; inset: 0; z-index: var(--rmn-z); display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.pi-modal.show { display: flex; }
.pi-backdrop { position: absolute; inset: 0; background: var(--rmn-backdrop);
  opacity: 0; transition: opacity var(--rmn-t); }
.pi-modal.in .pi-backdrop { opacity: 1; }

/* A dark card reads as an offer rather than an error, and the CTA carries all the
   contrast it needs against it. */
.pi-panel { position: relative; z-index: 1; width: min(460px, 100%);
  background: var(--rmn-surface); box-shadow: var(--rmn-shadow); border-radius: var(--rmn-radius);
  padding: 44px 44px 34px; text-align: center;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity var(--rmn-t), transform var(--rmn-t); }
.pi-modal.in .pi-panel { opacity: 1; transform: none; }

.pi-view { display: flex; flex-direction: column; align-items: stretch; }

.pi-title { font-family: var(--rmn-font-display); font-size: 1.95rem; font-weight: var(--rmn-display-weight); line-height: 1.18;
  color: var(--rmn-ink); margin: 0 0 26px; }

.pi-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
/* 17px keeps iOS from zooming the viewport when the field takes focus. */
.pi-field { width: 100%; min-height: 52px; padding: 14px 18px; box-sizing: border-box;
  background: var(--rmn-field-bg); color: var(--rmn-field-ink); border: 1px solid transparent;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-body); font-size: 17px; line-height: 1.4; }
.pi-field::placeholder { color: var(--rmn-field-placeholder); }
.pi-field:focus-visible { outline: 2px solid var(--rmn-accent); outline-offset: 2px; }

.pi-error[hidden] { display: none; }
/* Muted accent, not red: it has to clear 4.5:1 on the dark surface, which a warning
   red does not. The role="alert" is what carries the urgency. */
.pi-error { font-family: var(--rmn-font-body); font-size: .78rem; line-height: 1.4;
  color: var(--rmn-muted); text-align: left; margin: -4px 0 0; }

.pi-submit { width: 100%; min-height: 52px; padding: 14px 22px;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); border: none; cursor: pointer;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-cta); font-weight: 600; font-size: .95rem;
  text-transform: var(--rmn-cta-transform); letter-spacing: var(--rmn-cta-tracking);
  transition: background var(--rmn-t); }
.pi-submit:hover, .pi-submit:focus-visible { background: var(--rmn-cta-hover); }

.pi-note { font-family: var(--rmn-font-body); font-size: .8rem; line-height: 1.4;
  color: var(--rmn-muted); margin: 16px 0 0; }

/* 44px hit area, small glyph. */
.pi-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--rmn-close-bg); border: none; border-radius: 50%;
  color: var(--rmn-ink); cursor: pointer; transition: background var(--rmn-t); }
.pi-close:hover, .pi-close:focus-visible { background: var(--rmn-close-hover); }
.pi-close svg { width: 14px; height: 14px; }

/* ---- success view ---- */
.pi-success { align-items: center; gap: 0; }
.pi-success-icon { display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin: 0 0 18px; border-radius: 50%;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); }
.pi-success-icon svg { width: 22px; height: 22px; }
.pi-success-title { font-family: var(--rmn-font-display); font-size: 1.7rem; font-weight: var(--rmn-display-weight);
  line-height: 1.2; color: var(--rmn-ink); margin: 0 0 10px; }
.pi-success-sub { font-family: var(--rmn-font-body); font-size: .82rem; line-height: 1.5;
  color: var(--rmn-muted); margin: 0 0 6px; }
.pi-success-prop { font-family: var(--rmn-font-display); font-size: 1.22rem; font-weight: var(--rmn-display-weight);
  line-height: 1.25; color: var(--rmn-accent); margin: 0 0 24px; }
.pi-success-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 12px 22px; box-sizing: border-box;
  background: var(--rmn-cta-bg); color: var(--rmn-cta-ink); text-decoration: none;
  border-radius: var(--rmn-field-radius);
  font-family: var(--rmn-font-cta); font-weight: 600; font-size: .72rem; letter-spacing: 1.6px;
  text-transform: uppercase; transition: background var(--rmn-t); }
.pi-success-cta:hover, .pi-success-cta:focus-visible { background: var(--rmn-cta-hover); color: var(--rmn-cta-ink); }
.pi-success-cta svg { width: 14px; height: 14px; transition: transform var(--rmn-t); }
.pi-success-cta:hover svg { transform: translateX(4px); }

@media (max-width: 600px) {
  .pi-modal { padding: 16px; }
  .pi-panel { padding: 38px 24px 28px; }
  .pi-title { font-size: 1.6rem; }
  .pi-success-title { font-size: 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pi-panel { transform: none; transition: opacity .3s; }
  .pi-backdrop { transition: opacity .3s; }
  .pi-submit, .pi-close, .pi-success-cta, .pi-success-cta svg { transition: none; }
  .pi-success-cta:hover svg { transform: none; }
}
/* == /remarketing-nudge == */

/* Room overview stats: a 4-item row (Luxury Bungalow) wraps to 2 x 2 on phones instead of
   squeezing 4 columns; rows of 2-3 items are untouched. */
@media (max-width:560px){
  .overview-stats div:first-child:nth-last-child(4),
  .overview-stats div:first-child:nth-last-child(4) ~ div{ flex:1 1 50%; }
  .overview-stats div:first-child:nth-last-child(4) ~ div:nth-child(n+3){ margin-top:18px; }
  .overview-stats div:first-child:nth-last-child(4) ~ div:nth-child(3){ padding-left:0; }
  .overview-stats div:first-child:nth-last-child(4) ~ div:nth-child(3)::before{ display:none; }
}

/* ---------- Homepage Amenities slider (client feedback, Oct 2026) ----------
   Wider, shorter image (3:2) beside vertically centred text; an Enquire button and the
   arrows share one row directly under the text instead of the arrows sitting at the
   bottom of a tall empty column. main.js gives every slide the tallest slide's text
   height so that row never jumps. Enquire opens the Contact Us page at its phone + email section. */
#amenities .exp-slider{ align-items:center; }
#amenities .exp-slider-media{ grid-column:1/span 7; aspect-ratio:3/2; }
#amenities .exp-slider-content{ grid-column:9/span 4; min-height:0; justify-content:center; gap:12px; }
#amenities .exp-slider-content .plan-item p{ min-height:0; }
#amenities .exp-slider-actions{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; flex-wrap:wrap; }
#amenities .exp-slider-actions .exp-slider-nav{ margin-top:0; padding-top:0; width:auto; justify-content:flex-end !important; gap:12px; }
#contact-details{ scroll-margin-top:120px; }
@media (max-width:900px){
  #amenities .exp-slider-media{ grid-column:1; aspect-ratio:3/2; }
  #amenities .exp-slider-content{ grid-column:1; }
}

/* ---------- Spacing rhythm (client: "keep the website flowing, reduce the gaps", Oct 2026) ----------
   Sections now sit on 80px desktop / 64px tablet / 48px phone (was 110 / 80 / 60); the rules above that
   pinned 110px / 60px were brought onto the same scale. Two one-off fixes: */
/* Facilities: the single "Beyond the Estate" row doesn't need list-row padding inside its band. */
.facilities-crosslink .wide-row{ padding-top:0 !important; padding-bottom:0 !important; }
/* Location: two white sections back to back - the second doesn't need a full top band. */
.page-intro + .experiences{ padding-top:32px !important; }