/* =========================================================================
   VIVIDUS — vividus.css
   Component and layout styles specific to the Vividus micro-site.
   Depends on base.css (tokens + primitives).
   ========================================================================= */

/* ── FLOATING BOOK NOW ───────────────────────────────────────────────────── */
.float-book-now {
  position: fixed;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: block;
  text-decoration: none;
  filter: drop-shadow(0 4px 16px rgba(255,255,255,0.6)) drop-shadow(0 0 8px rgba(255,255,255,0.4));
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1), filter 280ms ease;
}
.float-book-now-img { display: block; width: 108px; height: auto; }
.float-book-now:hover,
.float-book-now:focus-visible {
  transform: translateY(calc(-50% - 4px)) scale(1.06);
  filter: drop-shadow(0 6px 28px rgba(255,255,255,1)) drop-shadow(0 0 24px rgba(255,255,255,0.9));
  outline: none;
}
@media (max-width: 600px) {
  .float-book-now { right: 10px; }
  .float-book-now-img { width: 64px; }
}
@media (max-width: 480px) {
  .float-book-now-img { width: 56px; }
}
body.menu-open .float-book-now { opacity: 0; pointer-events: none; }

/* ---- Section spacing overrides — tighter than base.css defaults ---- */
:root {
  --section-y: 80px;
  /* ---- Sitewide button tokens ---- */
  --btn-py: 13px;
  --btn-px: 28px;
  --btn-fs: 11px;
}
@media (max-width: 860px) { :root { --section-y: 60px; } }
@media (max-width: 768px) { :root { --section-y: 50px; } }
@media (max-width: 640px) { :root { --section-y: 50px; } }

/* ---- Global p + li normalisation ---- */
/* Single source of truth for all body-copy text across every section.
   Exceptions: nav, footer, labels, and captions keep their own sizing. */
.body-stack p,
.body-stack li {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.75;
  color: var(--vv-ink-soft);
  margin: 0;
}
.body-stack ul,
.body-stack ol {
  padding-left: 1.2em;
  margin: 0;
}

/* ---- Inline GDH nav / overlay rules (no external stylesheet import) ---- */

body { overflow-x: hidden; }
body.menu-open { overflow: hidden; }
body.has-reveal-footer { background: var(--vv-ink); }

/* ── Global button hover: lift + shadow (filled, never transparent) ── */
.vv-btn, .ms-btn, .btn-link, .rc-cta, button[type="submit"] {
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.vv-btn:hover, .ms-btn:hover, .btn-link:hover, .rc-cta:hover, button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46,40,24,.22);
}
.vv-btn:active, .ms-btn:active, .btn-link:active, .rc-cta:active, button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(46,40,24,.18);
}

.body-stack {
  position: relative;
  z-index: 2;
  background: var(--vv-paper);
  margin-bottom: var(--footer-height, 0px);
}

/* .reveal animation */
.reveal { opacity: 1; transform: none; transition: opacity 900ms ease, transform 900ms ease; }
body.js-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(18px); }
body.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, body.js-ready .reveal, body.js-ready .reveal:not(.is-visible) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Nav */
/* neutral, minimal nav (Aman-style) */
.nav {
  position: relative; z-index: 60;
  background: transparent;
  border-top: 1px solid rgba(46,40,24,.10);
  border-bottom: 1px solid rgba(46,40,24,.10);
  margin: 0; padding: 0; display: block;
  transition: border-color 240ms ease, background 240ms ease;
  overflow: visible;
}
.nav.is-scrolled { background: #ffffff; border-bottom-color: rgba(200,169,104,.35); }
.nav-inner {
  padding: 0 clamp(24px,5vw,64px);
  height: 52px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.nav-links {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(22px,2.6vw,44px);
  list-style: none; margin: 0; padding: 0;
}
.nav-links > li { position: relative; }
.nav-links a {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-size: 14px;
  letter-spacing: .04em;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(42,40,35,.75);
  transition: color 160ms ease;
  padding: 6px 0;
  display: inline-flex; align-items: center;
}
.nav-links a:hover,
.nav-links a.is-active,
.nav-links a.is-current,
.nav-links a[aria-current] { color: var(--vv-gold-deep) !important; }

/* Split nav item: label links directly, caret opens dropdown */
.mega-label {
  font-family: var(--fb);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(46,40,24,.75);
  transition: color 160ms ease;
  padding: 6px 0;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.mega-label:hover { color: var(--vv-ink); }
.mega-label.is-current { color: var(--vv-ink); font-weight: 600; }
.mega-caret {
  background: none; border: none; cursor: pointer;
  font-size: 14px; line-height: 1;
  color: rgba(46,40,24,.75);
  padding: 6px 2px 6px 4px;
  display: inline-flex; align-items: center;
  transition: color 160ms ease, transform 240ms ease;
}
.mega-caret:hover { color: var(--vv-ink); }
.nav-drop.is-open .mega-caret,
.nav-drop:focus-within .mega-caret { transform: rotate(180deg); color: var(--vv-ink); }

/* Nav dropdown */
.nav-drop { position: relative; }
.nav-drop .caret {
  display: inline-flex; align-items: center;
  margin-left: 5px; font-size: 16px; line-height: 1;
  vertical-align: middle; position: relative; top: -1px;
  transition: transform 240ms ease;
}
.nav-drop:hover .caret,
.nav-drop:focus-within .caret,
.nav-drop.is-open .caret { transform: rotate(180deg); top: 1px; }

/* Mega-menu */
.nav-mega { position: relative; }
.mega-menu {
  position: absolute; top: 100%;
  background: var(--vv-paper);
  border-top: 2px solid var(--vv-gold);
  box-shadow: 0 16px 48px rgba(46,40,24,.12);
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 280ms ease, transform 280ms ease;
  z-index: 65;
}
.nav-mega:hover .mega-menu,
.nav-mega:focus-within .mega-menu,
.nav-mega.is-open .mega-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mega-menu--brands { left: 0; right: auto; width: 220px; min-width: 220px; padding: 8px 0 8px 16px; }
.mega-brand-list { display: flex; flex-direction: column; }
.mega-brand-link {
  display: block; padding: 12px 20px;
  font-family: var(--fb); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--vv-ink); text-decoration: none;
  transition: color 180ms ease;
}
.mega-brand-link:hover,
.mega-brand-link:focus-visible { color: #C06B40; outline: none; }

/* ── Destinations mega-dropdown — grid layout ── */
.mega-menu--dest {
  left: 0;
  width: 760px;
  min-width: 760px;
  padding: 0;
}
/* Brand section header — clear, grouped, with a colour accent bar */
.mega-dest-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C06B40;
  padding: 16px 24px 12px;
  margin: 0;
}
/* coloured accent bar before each brand label */
.mega-dest-brand::before {
  content: "";
  width: 22px; height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.mega-dest-brand--vv { color: var(--vv-gold-deep); }

/* VIVIDUS group — its hotel sits in the same 3-col grid (no wasted space) */
.mega-dest-vv-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 16px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(46,40,24,.1);
}

/* MySpace group — white block to match the VIVIDUS section */
.mega-dest-ms-section {
  padding: 0 16px 16px;
  background: #ffffff;
}
a.mega-dest-brand--ms-link { background: #ffffff; }
.mega-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* Each property link — a clear hoverable card */
.nav-links .mega-dest-link,
.mega-dest-link {
  display: block !important;
  padding: 10px 12px;
  text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
  border-radius: 6px;
  letter-spacing: 0;
  text-transform: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  border: 1px solid transparent;
}
.nav-links .mega-dest-link:hover,
.mega-dest-link:hover {
  background: var(--vv-paper-ivory);
  border-color: rgba(46,40,24,.1);
  color: inherit;
}
.mega-dest-link--vv:hover {
  background: rgba(157,131,69,.1);
  border-color: rgba(157,131,69,.25);
}
.mega-dest-name {
  display: block;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  color: var(--vv-ink);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.mega-dest-loc {
  display: block;
  font-family: var(--fb);
  font-size: 12px;
  color: rgba(46,40,24,.55);
  margin-top: 3px;
  letter-spacing: 0;
  text-transform: none;
}
.mega-dest-link--vv .mega-dest-name { color: var(--vv-gold-deep); }

/* Rooms dropdown — mirrors .mega-menu--brands exactly */
.mega-menu--rooms { left: 0; right: auto; width: 220px; min-width: 220px; padding: 8px 0 8px 16px; }
.mega-rooms-list { display: flex; flex-direction: column; }
.mega-room-link {
  display: block;
  padding: 12px 20px;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vv-ink-soft);
  text-decoration: none;
  transition: color 160ms ease;
}
.mega-room-link:hover,
.mega-room-link:focus-visible { color: var(--vv-gold-deep); outline: none; }

/* Nav actions */
.nav-actions { display: inline-flex; align-items: center; gap: clamp(12px,1.4vw,22px); justify-self: end; }
/* nav-book-now — matches the MySpace button shape/size/weight, on Vividus gold */
.nav-book-now,
.nav-book-now:link,
.nav-book-now:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--vv-gold-deep, #8A6D3B) !important;
  color: #fff !important;
  border: 1px solid var(--vv-gold-deep, #8A6D3B) !important;
  border-radius: 8px;
  font-family: var(--fb, 'Manrope', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 180ms ease;
}
.nav-book-now .nav-btn-icon { display: inline-flex; }
.nav-book-now:hover {
  background: var(--vv-gold-pale, #EBDDBF) !important;
  color: var(--vv-gold-deep, #8A6D3B) !important;
  border-color: var(--vv-gold-pale, #EBDDBF) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Menu overlay */
.menu-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: var(--vv-paper);
  opacity: 0; pointer-events: none;
  transform: translateY(-12px); will-change: opacity, transform; backface-visibility: hidden;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: 100%; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.menu-overlay::-webkit-scrollbar { width: 6px; }
.menu-overlay::-webkit-scrollbar-track { background: transparent; }
.menu-overlay::-webkit-scrollbar-thumb { background: rgba(42,40,35,.15); border-radius: 3px; }
body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; transform: translateY(0); }
.menu-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.4'/></svg>");
  
  opacity: .05;
  pointer-events: none;
}

/* Menu topbar */
.menu-overlay .nav-logo {
  filter: brightness(0);
  height: 36px;
  width: auto;
}
.menu-topbar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 14px clamp(20px,4vw,60px);
  border-bottom: 1px solid var(--vv-line);
  font-family: var(--fb); font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--vv-ink-mute);
  position: sticky; top: 0; z-index: 3;
  background: var(--vv-paper);
}
.menu-topbar .tb-left,
.menu-topbar .tb-cent,
.menu-topbar .tb-right { display: flex; align-items: center; }
.menu-topbar .tb-cent { justify-content: center; }
.menu-topbar .tb-cent a { display: block; line-height: 0; }
.menu-topbar .tb-right { justify-content: flex-end; }

/* Close button */
.menu-close-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--vv-line);
  border-radius: var(--r-sm); color: var(--vv-ink);
  font-family: var(--fb); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer;
  transition: background var(--m-fast) var(--ease), color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.menu-close-btn:hover,
.menu-close-btn:focus-visible { background: var(--vv-ink); color: var(--vv-paper); border-color: var(--vv-ink); outline: none; }

/* Menu body idx */
.menu-body.idx-body {
  display: grid; grid-template-columns: 340px 1fr;
  gap: 0; padding: 0; align-items: stretch;
  overflow: hidden; min-height: 0; height: 100%;
}
.idx-links {
  display: flex; flex-direction: column;
  padding: clamp(20px,3.5vh,40px) clamp(24px, 5vw, 64px);
  border-right: 1px solid rgba(46,40,24,.1);
  gap: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
.idx-links::-webkit-scrollbar { display: none; }
.idx-link {
  display: grid; grid-template-columns: 32px 1fr 20px;
  align-items: center; gap: 12px;
  padding: clamp(8px,1.2vh,14px) 0;
  color: var(--vv-ink); text-decoration: none;
  border-bottom: 1px solid rgba(46,40,24,.1);
  opacity: 0; transform: translateX(-12px);
  transition: opacity 420ms ease, transform 420ms ease, color 240ms ease;
}
.idx-link:last-child { border-bottom: none; }
body.menu-open .idx-link { opacity: 1; transform: translateX(0); }
body.menu-open .idx-link:nth-child(2) { transition-delay: 100ms; }
body.menu-open .idx-link:nth-child(3) { transition-delay: 150ms; }
body.menu-open .idx-link:nth-child(4) { transition-delay: 200ms; }
body.menu-open .idx-link:nth-child(5) { transition-delay: 250ms; }
body.menu-open .idx-link:nth-child(6) { transition-delay: 130ms; }
body.menu-open .idx-link:nth-child(7) { transition-delay: 350ms; }
body.menu-open .idx-link:nth-child(8) { transition-delay: 400ms; }
body.menu-open .idx-link:nth-child(9) { transition-delay: 450ms; }
.idx-num { font-family: var(--fd); font-size: 12px; color: rgba(46,40,24,.4); letter-spacing: .04em; transition: color 240ms ease; }
.idx-title { font-family: var(--fd); font-size: clamp(18px,1.6vw,24px); font-weight: 400; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; transition: color 240ms ease, transform 240ms ease; }
.idx-caret { font-size: 16px; color: rgba(46,40,24,.4); opacity: 0; transform: translateX(-4px); transition: opacity 240ms ease, transform 240ms ease, color 240ms ease; }
.idx-link:hover, .idx-link:focus-visible { outline: none; color: var(--vv-gold-deep); }
.idx-link:hover .idx-num, .idx-link:focus-visible .idx-num { color: var(--vv-gold-deep); }
.idx-link:hover .idx-title, .idx-link:focus-visible .idx-title { transform: translateX(5px); color: var(--vv-gold-deep); }
.idx-link:hover .idx-caret, .idx-link:focus-visible .idx-caret { opacity: 1; transform: translateX(0); color: var(--vv-gold-deep); }
.idx-link.is-active .idx-title, .idx-link.is-active .idx-num { color: var(--vv-gold-deep); }
.idx-link.is-active .idx-caret { opacity: 1; transform: translateX(0); color: var(--vv-gold-deep); }

/* Back to Great Destination Hotels — overlay menu text link (not a button) */
.idx-link.idx-back-gdh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  align-self: flex-start;
  grid-template-columns: none !important;
  padding: 2px 0;
  margin-bottom: clamp(16px,2.4vh,26px);
  border: none;
  background: none;
  color: var(--vv-gold-deep, #7A6130);
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
  transition: color 200ms ease, opacity 200ms ease, transform 200ms ease;
}
.idx-link.idx-back-gdh .idx-back-arrow {
  display: inline-flex;
  width: 14px; height: 14px;
  transition: transform 200ms ease;
}
.idx-link.idx-back-gdh .idx-back-arrow svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.idx-link.idx-back-gdh .idx-back-text { color: inherit; border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color 200ms ease; }
.idx-link.idx-back-gdh:hover,
.idx-link.idx-back-gdh:focus-visible {
  background: none;
  box-shadow: none;
  outline: none;
  opacity: 1;
}
.idx-link.idx-back-gdh:hover .idx-back-arrow,
.idx-link.idx-back-gdh:focus-visible .idx-back-arrow { transform: translateX(-3px); }
.idx-link.idx-back-gdh:hover .idx-back-text,
.idx-link.idx-back-gdh:focus-visible .idx-back-text { border-bottom-color: currentColor; }

/* Right: destination cards panel */
.idx-dest-cards {
  padding: clamp(32px, 5vh, 56px) clamp(28px, 4vw, 56px);
  overflow-y: auto;
}

.idx-dest-eyebrow {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  margin: 0 0 clamp(24px, 3vh, 36px);
  max-width: none;
}

.idx-dest-group {
  margin-bottom: clamp(28px, 4vh, 44px);
}

.idx-dest-state {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vv-ink-soft);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vv-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.idx-dest-state span {
  font-weight: 400;
  color: var(--vv-ink-mute);
  letter-spacing: .06em;
  font-size: 12px;
}

.idx-dest-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Hotel card */
.idx-hotel-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--vv-ink);
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--vv-line-soft);
  background: var(--vv-paper-ivory);
  transition: box-shadow var(--m-base) var(--ease), transform var(--m-base) var(--ease), border-color var(--m-base) var(--ease);
}
.idx-hotel-card:hover,
.idx-hotel-card:focus-visible {
  outline: none;
  box-shadow: 0 6px 24px rgba(46,40,24,.12);
  transform: translateY(-2px);
  border-color: var(--vv-gold);
}

.idx-hotel-img {
  width: 100%;
  aspect-ratio: 3/2;
  background-size: cover;
  background-position: center;
  background-color: var(--vv-paper-sepia);
  flex-shrink: 0;
  transition: transform 500ms var(--ease);
  overflow: hidden;
}
.idx-hotel-card:hover .idx-hotel-img { transform: scale(1.04); }

.idx-hotel-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 18px;
}

.idx-hotel-brand {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.idx-hotel-card--vv .idx-hotel-brand { color: var(--vv-gold-deep); }

.idx-hotel-name {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--vv-ink);
}

.idx-hotel-loc {
  font-family: var(--fb);
  font-size: 12px;
  color: var(--vv-ink-mute);
  line-height: 1.4;
  margin-top: 2px;
}

/* Menu bottombar */
.menu-bottombar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 20px clamp(20px,4vw,60px);
  border-top: 1px solid var(--vv-line);
  font-family: var(--fb); font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--vv-ink); background: var(--vv-paper);
  position: relative; z-index: 1;
  gap: var(--s5);
}
.menu-bottombar .mb-left { display: flex; align-items: center; gap: 16px; }
.menu-bottombar .mb-left a,
.menu-bottombar .mb-right a {
  font-family: var(--fd); font-style: italic;
  font-size: 17px; letter-spacing: .02em; text-transform: none;
  color: var(--vv-ink); transition: color 160ms ease;
}
.menu-bottombar .mb-left a:hover,
.menu-bottombar .mb-right a:hover { color: var(--vv-gold-deep); }
.menu-bottombar .mb-center { font-family: var(--fd); font-style: italic; font-size: 14px; letter-spacing: .01em; text-transform: none; color: var(--vv-ink-mute); text-align: center; }
.menu-bottombar .mb-center em { color: var(--vv-gold-deep); }
.menu-bottombar .mb-right { text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
@media (max-width: 720px) {
  .menu-bottombar { grid-template-columns: 1fr; justify-items: center; gap: var(--s3); text-align: center; }
  .menu-bottombar .mb-left, .menu-bottombar .mb-right { text-align: center; justify-content: center; }
}

/* Footer base rules */
.v-footer h4 { color: #FFFFFF; font-family: var(--fb); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; margin: 0 0 16px; opacity: .5; }
.v-footer p, .v-footer a, .v-footer li { color: rgba(250,246,238,.72); font-size: 13px; margin: 0; }
.v-footer a:hover { color: var(--vv-gold); }
.v-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-address { font-style: normal; color: rgba(250,246,238,.55); font-family: var(--fb); font-size: 13px; line-height: 1.8; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; }
.fc-icon { display: flex; align-items: center; color: var(--vv-gold); flex-shrink: 0; }
.footer-social { display: grid; gap: 12px; }
.fs-link { display: flex; align-items: center; gap: 10px; color: rgba(250,246,238,.55); font-family: var(--fb); font-size: 13px; transition: color 200ms; }
.fs-link:hover { color: var(--vv-gold); }
.footer-bottom { max-width: var(--container); margin: 0 auto; padding: 16px clamp(20px,4vw,60px) 0; border-top: 1px solid rgba(250,246,238,.12); text-align: center; display: flex; justify-content: center; gap: 16px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,246,238,.45); }

@media (max-width: 960px) {
  .menu-body.idx-body { grid-template-columns: 1fr; overflow-y: auto; }
  .idx-links { border-right: none; overflow-y: visible; }
  .idx-dest-cards { padding: 24px var(--container-pad) 40px; }
  .idx-dest-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── idx-prop-list: hidden on desktop, shown on mobile inside drop panel ── */
.idx-prop-list { display: none; }

/* ── Mobile: compact list rows inline under nav drop ── */
@media (max-width: 768px) {
  .menu-body.idx-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
  }
  .idx-links { flex-shrink: 0; padding: 16px 20px 8px; }

  /* Hide standalone right-panel */
  .idx-dest-cards { display: none; }

  /* Inline property list inside drop panel */
  .idx-prop-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(46,40,24,.1);
  }

  /* Hotel card: horizontal row */
  .idx-prop-list .idx-hotel-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgba(46,40,24,.06);
    background: transparent;
    padding: 8px 4px;
    box-shadow: none;
    color: var(--vv-ink);
  }
  .idx-prop-list .idx-hotel-card:hover,
  .idx-prop-list .idx-hotel-card:focus-visible {
    transform: none;
    box-shadow: none;
    background: rgba(111,78,42,.06);
    border-color: rgba(46,40,24,.06);
    outline: none;
  }
  .idx-prop-list .idx-hotel-img {
    width: 44px;
    height: 44px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    transition: none;
  }
  .idx-prop-list .idx-hotel-card:hover .idx-hotel-img { transform: none; }
  .idx-prop-list .idx-hotel-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
    gap: 1px;
    min-width: 0;
  }
  .idx-prop-list .idx-hotel-brand {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vv-gold-deep);
  }
  .idx-prop-list .idx-hotel-card--vv .idx-hotel-brand { color: var(--vv-gold-deep); }
  .idx-prop-list .idx-hotel-name {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--vv-ink);
  }
  .idx-prop-list .idx-hotel-loc {
    font-size: 12px;
    color: var(--vv-ink-mute);
    margin-top: 0;
  }
}

@media (max-width: 900px) { .nav-links { display: none; } .nav-inner { grid-template-columns: auto 1fr auto; } }
@media (max-width: 600px) { .nav-inner { gap: 0; } }
@media (max-width: 768px) {
  .menu-overlay { transform: none !important; transition: none !important; opacity: 0; }
  body.menu-open .menu-overlay { transform: none !important; opacity: 1 !important; }
}
@media (max-width: 640px) { .menu-bottombar { grid-template-columns: 1fr; justify-items: center; gap: 8px; text-align: center; } }


/* ---------- Site header: fixed chrome (masthead + nav) ---------- */
.site-header {
  position: fixed;
  top: calc(-1 * var(--topbar-h, 0px)); left: 0; right: 0;
  z-index: 60;
  background: #ffffff;
  transition: top 380ms cubic-bezier(.4,0,.2,1);
  will-change: top;
}
.site-header.topbar-visible { top: 0; }
/* slim neutral topbar (Aman-style) */
.masthead-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px var(--container-pad);
  background: #ffffff;
  border-bottom: 1px solid rgba(46,40,24,.07);
}
.back-to-gdh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fb, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(46,40,24,.92);
  text-decoration: none;
  transition: color 180ms ease;
}
.back-to-gdh svg { width: 8px; height: 8px; }
.back-to-gdh:hover,
.back-to-gdh:focus-visible {
  color: var(--vv-gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--container-pad);
  height: 66px;
  border-bottom: none;
  position: relative;
}
.masthead .nav-logo, .masthead img { height: 42px; width: auto; }
/* back-to-GDH pinned far-left of logo strip */
.masthead .back-to-gdh {
  position: absolute; left: clamp(20px,5vw,64px); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fd); font-style: italic; font-size: 16px; font-weight: 400; letter-spacing: .01em;
  text-transform: none; color: rgba(46,40,24,.82); text-decoration: none; transition: color 200ms ease, gap 200ms ease;
}
.masthead .back-to-gdh svg { width: 9px; height: 9px; transition: transform 200ms ease; }
.masthead .back-to-gdh:hover { color: var(--vv-gold-deep); text-decoration: none; gap: 11px; }
.masthead .back-to-gdh:hover svg { transform: translateX(-3px); }
@media (max-width: 860px) { .masthead .back-to-gdh .gdh-full { display: none; } }
/* keep ONLY the GDH back-link italic (overrides sitewide italic-removal rule) */
html body .masthead .back-to-gdh { font-style: italic !important; }

/* ── Mobile: move "Great Destination Hospitality" to its own top strip ── */
@media (max-width: 768px) {
  .masthead {
    flex-direction: column;
    height: auto;
    padding: 0;
  }
  .masthead .back-to-gdh {
    position: static;
    transform: none;
    width: 100%;
    justify-content: center;
    padding: 10px var(--container-pad);
    font-size: 14px;
    border-bottom: 1px solid var(--vv-line);
    background: var(--vv-paper-ivory);
  }
  .masthead .wordmark {
    padding: 12px var(--container-pad);
  }
}
.nav-logo {
  display: block;
  height: 44px;
  width: auto;
}

.footer-logo {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 auto 12px;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fb); font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--vv-ink); text-decoration: none;
}
.wordmark .v-mark { width: 28px; height: 28px; color: var(--vv-gold-deep); flex-shrink: 0; }
.wordmark .v-mark svg { width: 100%; height: 100%; display: block; }
.wordmark .c-wm { font-family: var(--fb); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--vv-ink); }
.wordmark .c-wm em { font-family: var(--fd); font-style: italic; letter-spacing: .02em; text-transform: none; color: var(--vv-gold-deep); margin: 0 .18em; }

/* Push body-stack below fixed header (JS sets --header-h to the live nav height) */
.body-stack { padding-top: 98px; }
@media (max-width: 640px) { .body-stack { padding-top: 98px; } }

/* ---------- 1. Fixed chrome (top bar, legacy) ---------- */

.chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--container-pad);
  background: linear-gradient(180deg, rgba(248, 243, 230, .82) 0%, rgba(248, 243, 230, .0) 100%);
  backdrop-filter: blur(0);
  pointer-events: none;
  transition: background var(--m-base) var(--ease);
}
body.menu-open .chrome { background: transparent; }
body.menu-open .chrome .c-left,
body.menu-open .chrome .c-center,
body.menu-open .chrome .c-right > a.btn-link {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.chrome > * { pointer-events: auto; }
.chrome .c-left  { justify-self: start; display: inline-flex; align-items: center; gap: 10px; }
.chrome .c-center { justify-self: center; }
.chrome .c-right { justify-self: end; display: inline-flex; align-items: center; gap: var(--s5); }

.chrome .c-wm {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vv-ink);
}
.chrome .c-wm em {
  font-family: var(--fd);
  font-style: italic;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--vv-gold-deep);
  margin: 0 .18em;
}

/* Menu trigger — matches mySpace-kadison-hotel homepage exactly */
.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fd);
  font-style: italic;
  font-size: 18px;
  color: rgba(42,40,35,.75);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 0;
  justify-self: start;
  position: relative;
  transition: color var(--m-base) var(--ease);
}
.menu-trigger:hover { color: #2C1810; }
.menu-trigger .t-word {
  display: inline-block;
  min-width: auto;
  text-align: left;
  transition: opacity var(--m-base) var(--ease), transform var(--m-base) var(--ease);
}
.menu-trigger .t-word.t-close {
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateY(6px);
}
.menu-trigger { position: relative; }
.menu-trigger .t-mark {
  position: relative;
  width: 22px; height: 14px;
  flex-shrink: 0;
}
.menu-trigger .t-mark .ln {
  position: absolute;
  left: 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--m-base) var(--ease),
              width var(--m-base) var(--ease),
              top var(--m-base) var(--ease),
              opacity var(--m-base) var(--ease);
}
.menu-trigger .t-mark .ln:nth-child(1) { top: 2px;  width: 100%; }
.menu-trigger .t-mark .ln:nth-child(2) { top: 7px;  width: 72%; }
.menu-trigger .t-mark .ln:nth-child(3) { top: 12px; width: 88%; }

body.menu-open .menu-trigger .t-word.t-open  { opacity: 0; transform: translateY(-6px); }
body.menu-open .menu-trigger .t-word.t-close { opacity: 1; transform: translateY(0); }
body.menu-open .menu-trigger .t-mark .ln:nth-child(1) { top: 7px; width: 100%; transform: rotate(45deg); }
body.menu-open .menu-trigger .t-mark .ln:nth-child(2) { opacity: 0; width: 0; }
body.menu-open .menu-trigger .t-mark .ln:nth-child(3) { top: 7px; width: 100%; transform: rotate(-45deg); }


/* ---------- 2. Cover (section 1) ---------- */

.cover {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-top: 150px;
  background: var(--vv-paper);
  overflow: hidden;
}

.cover-copy {
  text-align: center;
  padding: clamp(48px, 9vh, 120px) var(--container-pad) clamp(48px, 6vh, 72px);
  max-width: 1080px;
  margin: 0 auto;
}
.cover-copy .label { display: inline-block; margin-bottom: var(--s6); color: var(--vv-gold-deep); }
.cover-copy h1 {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.cover-copy h1 em { color: var(--vv-gold-deep); }
.cover-copy .sub {
  margin-top: var(--s5);
  font-family: var(--fd);
  font-size: var(--t-hero-sub);
  font-style: normal;
  color: var(--vv-ink-soft);
  line-height: 1.3;
  max-width: none;
}

/* Ken-burns plate — very slow, breathing zoom */
.cover-plate {
  position: relative;
  width: 100%;
  height: clamp(380px, 72vh, 720px);
  overflow: hidden;
  border-top: 1px solid var(--vv-line);
}
.cover-plate::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(46,40,24,0) 50%, rgba(46,40,24,.14) 100%),
    var(--cover-img, url('https://assets.simplotel.com/simplotel/image/upload/w_5000,h_3331/x_0,y_0,w_5000,h_3331,c_crop,q_60,fl_progressive/w_2000,h_1332,c_pad,b_rgb:000000/vividus-hotel-bangalore/zang-room-bedroom-1_cb42f74c.jpg'));
  background-size: cover;
  background-position: center;
  transform: scale(1.0);
  transition: transform var(--m-breath) linear;
}
.cover-plate.is-breathing::before { transform: scale(1.04); }

.cover-plate .plate-caption {
  position: absolute;
  left: var(--container-pad);
  bottom: var(--s6);
  color: var(--vv-paper);
  font-family: var(--fb);
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .86;
}


/* ---------- 3. Anchor (section 2) ---------- */

.anchor {
  background: var(--vv-paper-vellum);
  padding: var(--section-y) var(--container-pad);
  text-align: center;
}
.anchor .word {
  font-family: var(--fk);
  font-size: var(--t-kannada);
  line-height: 1;
  color: var(--vv-gold-deep);
  letter-spacing: 0;
  display: inline-block;
}
.anchor .english {
  margin-top: var(--s6);
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(20px, 1.6vw, 26px);
  color: var(--vv-ink);
  line-height: 1.45;
  max-width: 44ch;
  margin-left: auto; margin-right: auto;
}
.anchor .english em { color: var(--vv-gold-deep); }
.anchor .v-mark { margin-top: var(--s7); color: var(--vv-gold-deep); }
.anchor .gold-rule { margin-top: var(--s5); }

.anchor-cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.anchor-cta .vv-btn { margin-top: 0; }
.anchor-cta p {
  max-width: 48ch;
  text-align: center;
  margin: 0;
}


/* ---------- 4. Pillars (section 3) ---------- */

.pillars {
  padding: var(--section-y) 0;
  background: var(--vv-paper);
}
.pillars .p-head {
  text-align: center;
  margin-bottom: var(--s7);
  padding: 0 var(--container-pad);
}
.pillars .p-head h2 {
  font-style: italic;
  font-weight: 500;
  max-width: 18ch;
  margin: var(--s4) auto 0;
}
.pillars .p-head h2 em { color: var(--vv-gold-deep); }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  padding: 0 var(--container-pad);
  max-width: 1480px;
  margin: 0 auto;
}
.pillar-card {
  display: block;
  color: inherit;
}
.pillar-card .p-img {
  aspect-ratio: 3 / 4;
  background-color: var(--vv-paper-vellum);
  overflow: hidden;
  position: relative;
}
.pillar-card .p-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--m-slow) var(--ease-out);
}
.pillar-card .p-img::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(46, 40, 24, 0);
  transition: background var(--m-slow) var(--ease-out);
  pointer-events: none;
}
.pillar-card:hover .p-img img { transform: scale(1.02); }
.pillar-card:hover .p-img::after { background: rgba(46, 40, 24, .12); }

.pillar-card .p-word {
  margin-top: var(--s5);
  font-family: var(--fd);
  font-style: italic;
  font-size: var(--t-pillar);
  line-height: 1;
  color: var(--vv-ink);
  letter-spacing: -0.015em;
}
.pillar-card .p-tag {
  margin-top: var(--s3);
  font-family: var(--fd);
  font-style: normal;
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--vv-ink-soft);
  line-height: 1.4;
  max-width: 22ch;
}

@media (max-width: 1180px) {
  .pillar-grid { grid-template-columns: repeat(3, 1fr); }
  .pillar-card:nth-child(n+4) .p-img { aspect-ratio: 4 / 3; }
}
@media (max-width: 860px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-card .p-img { aspect-ratio: 4 / 3; }
}


/* ---------- 5. Rooms (section 4) ---------- */

.rooms {
  background: var(--vv-paper-ivory);
  padding: var(--section-y) 0;
}
.rooms .r-head {
  text-align: left;
  padding: 0 var(--container-pad);
  max-width: var(--container);
  margin: 0 auto var(--s5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--s6);
}
.rooms .r-head h2 { margin: 0; }
.rooms .r-head h2 em { color: var(--vv-gold-deep); font-style: italic; }
.rooms .r-head .lede { color: var(--vv-ink-soft); max-width: 68ch; }

.room-row {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
  padding: clamp(48px, 5vh, 80px) var(--container-pad);
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid var(--vv-line);
}
.room-row:first-of-type { border-top: 0; }
.room-row:nth-child(even) { grid-template-columns: 0.58fr 0.42fr; }
.room-row:nth-child(even) .r-img { order: 2; }
.room-row:nth-child(even) .r-copy { order: 1; }

.room-row .r-img {
  aspect-ratio: 4 / 5;
  background-color: var(--vv-paper-vellum);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  position: relative;
}
.room-row .r-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--m-slow) var(--ease-out);
}
.room-row:hover .r-img img { transform: scale(1.02); }
.room-row .r-copy h3 {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.01em;
  color: var(--vv-ink);
}
.room-row .r-copy h3 em { color: var(--vv-gold-deep); font-style: normal; }
.room-row .r-copy p {
  max-width: 48ch;
}
.room-row .r-facts {
  margin-top: var(--s5);
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s5);
}
.room-row .r-facts li { position: relative; padding-left: 14px; }
.room-row .r-facts li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px;
  background: var(--vv-gold);
  border-radius: 50%;
  transform: translateY(-50%);
}

@media (max-width: 860px) {
  .rooms .r-head { grid-template-columns: 1fr; gap: var(--s5); }
  .room-row,
  .room-row:nth-child(even) { grid-template-columns: 1fr; }
  .room-row:nth-child(even) .r-img { order: 0; }
  .room-row:nth-child(even) .r-copy { order: 0; }
}


/* ---------- 6. Plates (section 5 — signature spaces) ---------- */

.plates {
  padding: var(--section-y) 0;
  background: var(--vv-paper);
}
.plates .p-head {
  text-align: center;
  padding: 0 var(--container-pad);
  margin-bottom: var(--s6);
}
.plates .p-head h2 {
  font-style: italic;
  font-weight: 500;
  max-width: 20ch;
  margin: var(--s4) auto 0;
}
.plates-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s6);
  padding: 0 var(--container-pad);
  max-width: 1440px;
  margin: 0 auto;
}
.plate {
  display: block;
  color: inherit;
}
.plate-img {
  aspect-ratio: 4 / 3;
  background-color: var(--vv-paper-vellum);
  overflow: hidden;
  position: relative;
}
.plate-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--m-slow) var(--ease-out);
}
.plate-img::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(46, 40, 24, 0);
  transition: background var(--m-slow) var(--ease-out);
  pointer-events: none;
}
.plate:hover .plate-img img { transform: scale(1.02); }
.plate:hover .plate-img::after { background: rgba(46, 40, 24, .12); }

.plate .plate-cap {
  margin-top: var(--s4);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
}
.plate .plate-cap .name {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 26px);
  color: var(--vv-ink);
}
.plate .plate-cap .role {
  font-family: var(--fb);
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}

.plate.span-7 { grid-column: span 7; }
.plate.span-5 { grid-column: span 5; }
.plate.span-6 { grid-column: span 6; }
.plate.span-4 { grid-column: span 4; }
.plate.span-8 { grid-column: span 8; }
.plate.span-12 { grid-column: span 12; }

@media (max-width: 860px) {
  .plates-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .plate.span-7, .plate.span-5, .plate.span-6, .plate.span-4, .plate.span-8, .plate.span-12 {
    grid-column: span 1;
  }
}


/* ---------- 7. Place (section 6) ---------- */

.place {
  padding: var(--section-y) 0;
  background: var(--vv-paper-ivory);
}
.place .p-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  align-items: center;
}
.place .p-copy h2 {
  font-style: italic;
  font-weight: 500;
  margin-top: var(--s4);
}
.place .p-copy h2 em { color: var(--vv-gold-deep); }
.place .p-copy p {
  margin-top: var(--s5);
  max-width: 48ch;
}
.place .neighbours {
  margin-top: 20px;
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--s3) var(--s6);
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(18px, 1.25vw, 22px);
  color: var(--vv-ink);
}
.place .neighbours li::before {
  content: "· ";
  color: var(--vv-gold-deep);
  font-style: normal;
}

.map-plate {
  position: relative;
  display: block;
  background: var(--vv-paper-vellum);
  border: 1px solid var(--vv-line);
  padding: var(--s3) var(--s3) 0;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color var(--m-base) var(--ease),
    box-shadow var(--m-base) var(--ease),
    transform var(--m-base) var(--ease-out);
}
.map-plate svg {
  width: 100%; height: auto;
  color: var(--vv-gold-deep);
  display: block;
  margin: 0;
  max-height: calc(100% - 36px);
}
.map-plate:hover {
  border-color: var(--vv-gold);
  box-shadow: var(--shadow-plate);
  transform: translateY(-2px);
}

.map-cta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  font-family: var(--fb);
  font-size: var(--t-label);
  color: var(--vv-ink-mute);
  background: var(--vv-paper-vellum);
  border-top: 1px solid var(--vv-line);
  transition: color var(--m-fast) var(--ease);
}
.map-cta-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--vv-ink-mute);
  text-transform: none;
}
.map-cta-pin { display: flex; align-items: center; flex-shrink: 0; }
.map-cta-addr { font-family: var(--fb); font-size: 12px; letter-spacing: 0.05em; color: var(--vv-ink-mute); }
.map-cta-right { display: flex; align-items: center; gap: 6px; }
.map-cta-text { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.map-cta-arrow {
  font-family: var(--fd);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vv-gold-deep);
  transition: transform var(--m-base) var(--ease-out);
  display: inline-block;
}
.map-plate:hover .map-cta { color: var(--vv-ink); }
.map-plate:hover .map-cta-addr { color: var(--vv-ink); }
.map-plate:hover .map-cta-arrow {
  color: var(--vv-gold-deep);
  transform: translate(3px, -3px);
}

@media (max-width: 768px) {
  .map-plate {
    aspect-ratio: unset;
    padding-bottom: var(--s3);
  }
  .map-plate svg {
    width: 100%;
    height: auto;
    max-height: none;
  }
}
@media (max-width: 860px) {
  .place .p-inner { grid-template-columns: 1fr; }
}


/* ---------- 8. Accolades (section 7) ---------- */

.accolades {
  padding: var(--section-y) 0;
  background: var(--vv-paper);
  text-align: center;
}
.accolades .a-head { margin-bottom: var(--s8); }
.accolades .a-head h2 {
  font-style: italic;
  font-weight: 500;
  max-width: 22ch;
  margin: var(--s4) auto 0;
}
.accolades ul {
  list-style: none; padding: 0;
  max-width: 820px;
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.accolades li {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.4;
  color: var(--vv-ink);
  padding: var(--s6) 0 var(--s6) var(--s6);
  border-top: 1px solid var(--vv-line);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s5);
  text-align: left;
  position: relative;
}
.accolades li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--s6) + 0.65em);
  width: 5px; height: 5px;
  background: var(--vv-gold);
  border-radius: 50%;
  transform: translateY(-50%);
}
.accolades li:first-child { border-top: 0; }
.accolades li .year {
  font-family: var(--fb);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  flex-shrink: 0;
  align-self: center;
}
.accolades li em { color: var(--vv-gold-deep); }


/* ---------- 9. Reserve (section 8) ---------- */

.reserve {
  background: var(--vv-paper-vellum);
  padding: var(--section-y) 0;
  text-align: center;
}
.reserve h2 {
  font-style: italic;
  font-weight: 500;
  max-width: 14ch;
  margin: var(--s4) auto 0;
}
.reserve h2 em { color: var(--vv-gold-deep); }
.reserve .r-meta {
  margin-top: var(--s7);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s5) var(--s8);
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(18px, 1.3vw, 24px);
  color: var(--vv-ink);
}
.reserve .r-meta span { color: var(--vv-ink-soft); }
.reserve .r-meta a { color: var(--vv-ink); }
.reserve .r-meta a:hover { color: var(--vv-gold-deep); }
.reserve .r-cta {
  margin-top: var(--s7);
}


/* =========================================================================
   RESERVE CARD — the business conversion engine
   A printed-reservation-slip CTA. Double-hairline engraved border +
   a small brass concierge bell SVG that rings on hover. The whole card
   is a tel: link.
   ========================================================================= */

.reserve-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  padding: clamp(28px, 3.4vw, 44px) clamp(32px, 3.6vw, 56px);
  margin: clamp(32px, 4vh, 56px) auto 0;
  max-width: 720px;
  background: var(--vv-paper-ivory);
  color: var(--vv-ink);
  text-decoration: none;
  border: 1px solid var(--vv-line);
  box-shadow:
    inset 0 0 0 8px var(--vv-paper-ivory),
    inset 0 0 0 9px var(--vv-gold-pale),
    0 1px 2px rgba(46,40,24,.04),
    0 8px 24px rgba(46,40,24,.08);
  transition:
    transform var(--m-base) var(--ease-out),
    box-shadow var(--m-base) var(--ease-out),
    border-color var(--m-base) var(--ease);
}

/* Faint V watermark on the card's right side — extra editorial stamp */
.reserve-card::after {
  content: "";
  position: absolute;
  top: 50%; right: 6%;
  transform: translateY(-50%);
  width: 96px; height: 96px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%239D8345' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round'><path d='M 5 7 L 16 26 L 27 7'/><path d='M 11 7 L 16 18 L 21 7' opacity='.55'/><circle cx='16' cy='5' r='.9' fill='%239D8345' stroke='none'/></svg>") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.reserve-card > * { position: relative; z-index: 1; }

.reserve-card:hover,
.reserve-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--vv-gold);
  box-shadow:
    inset 0 0 0 8px var(--vv-paper-ivory),
    inset 0 0 0 9px var(--vv-gold),
    0 2px 6px rgba(46,40,24,.06),
    0 18px 44px rgba(46,40,24,.14);
  outline: none;
}

.reserve-card .rc-stamp {
  width: clamp(56px, 5vw, 72px);
  color: var(--vv-gold-deep);
  flex-shrink: 0;
  align-self: center;
}
.reserve-card .rc-stamp svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.reserve-card .rc-body { display: grid; gap: 4px; }
.reserve-card .rc-label {
  font-family: var(--fb);
  font-size: var(--t-label);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
}
.reserve-card .rc-title {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--vv-ink);
  margin-top: 4px;
}
.reserve-card .rc-title em {
  color: var(--vv-gold-deep);
  font-style: italic;
}
.reserve-card .rc-sub {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--vv-ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}

.reserve-card .rc-action {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  flex-shrink: 0;
}
.reserve-card .rc-phone {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 19px);
  color: var(--vv-ink);
  white-space: nowrap;
}
.reserve-card .rc-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.6vw, 48px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--vv-ink);
  color: var(--vv-paper-ivory);
  font-family: var(--fb);
  font-size: 16px;
  transition:
    transform var(--m-base) var(--ease-out),
    background var(--m-base) var(--ease);
}
.reserve-card:hover .rc-cta-arrow,
.reserve-card:focus-visible .rc-cta-arrow {
  background: var(--vv-gold-deep);
  transform: translateX(4px);
}

/* Bell ring animation — tilts around the knob, fires on hover/focus */
.reserve-card .bell {
  transform-origin: 28px 7px;
  transition: transform var(--m-base) var(--ease);
}
.reserve-card .bell-wave {
  opacity: 0;
  transition: opacity var(--m-fast) var(--ease);
}
.reserve-card:hover .bell,
.reserve-card:focus-visible .bell {
  animation: vv-bell-ring 720ms ease-out;
}
.reserve-card:hover .bell-wave,
.reserve-card:focus-visible .bell-wave {
  animation: vv-bell-wave 720ms ease-out;
}

@keyframes vv-bell-ring {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(7deg); }
  40%  { transform: rotate(-5deg); }
  60%  { transform: rotate(3deg); }
  80%  { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}
@keyframes vv-bell-wave {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reserve-card,
  .reserve-card:hover,
  .reserve-card:focus-visible,
  .reserve-card .bell,
  .reserve-card .bell-wave,
  .reserve-card .rc-cta-arrow { animation: none; transform: none; transition: background var(--m-base) var(--ease), border-color var(--m-base) var(--ease); }
}

/* Stack vertically on narrow viewports */
@media (max-width: 760px) {
  .reserve-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: clamp(28px, 6vw, 40px) clamp(24px, 5vw, 36px);
    gap: 14px;
  }
  .reserve-card .rc-action {
    margin-top: 8px;
  }
  .reserve-card::after { display: none; }
}


/* ---------- 10. Footer (section 9) ---------- */

.v-footer {
  background: var(--vv-paper-sepia);
  padding: var(--s9) var(--container-pad) var(--s6);
  color: var(--vv-ink);
  border-top: 1px solid var(--vv-line);
}

/* GDH footer-grid classes inside v-footer */
.v-footer .footer-brand {
  text-align: center;
  margin-bottom: var(--s6);
}
.v-footer .footer-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s7);
  margin-bottom: var(--s5);
}
@media (max-width: 860px) { .v-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .v-footer .footer-grid { grid-template-columns: 1fr; } }
.v-footer h4 {
  font-family: var(--fb);
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  font-weight: 600;
  margin-bottom: var(--s4);
  opacity: 1;
}
.v-footer .footer-address,
.v-footer p,
.v-footer a,
.v-footer li {
  color: var(--vv-ink-soft);
  font-size: 13px;
  font-family: var(--fb);
  line-height: 1.7;
}
.v-footer a:hover { color: var(--vv-gold-deep); }
.v-footer .footer-address { font-style: normal; }
.v-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.v-footer .footer-contact { display: grid; gap: var(--s3); }
.v-footer .footer-contact li { display: flex; align-items: center; gap: 10px; }
.v-footer .fc-icon { display: flex; align-items: center; color: var(--vv-gold-deep); flex-shrink: 0; }
.v-footer .footer-social { display: grid; gap: var(--s3); }
.v-footer .fs-link { display: flex; align-items: center; gap: 10px; color: var(--vv-ink-soft); text-decoration: none; }
.v-footer .fs-link:hover { color: var(--vv-gold-deep); }
.v-footer .footer-bottom {
  max-width: var(--container);
  margin: var(--s6) auto 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--vv-line);
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  text-align: center;
}
.v-footer .wm {
  font-family: var(--fd);
  font-size: clamp(26px, 2vw, 34px);
  font-style: italic;
  color: var(--vv-ink);
  line-height: 1;
}
.v-footer .tag {
  margin-top: var(--s3);
  font-family: var(--fb);
  font-size: var(--t-sm);
  color: var(--vv-ink-soft);
  letter-spacing: .04em;
}
.v-footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s7);
}
.v-footer h4 {
  font-family: var(--fb);
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  font-weight: 600;
  margin-bottom: var(--s4);
}
.v-footer .f-brand .wm {
  font-family: var(--fd);
  font-size: clamp(26px, 2vw, 34px);
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--vv-ink);
  line-height: 1;
}
.v-footer .f-brand .tag {
  margin-top: var(--s3);
  font-family: var(--fb);
  font-size: var(--t-sm);
  color: var(--vv-ink-soft);
  letter-spacing: .04em;
}
.v-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.v-footer a { color: var(--vv-ink-soft); transition: color var(--m-fast) var(--ease); }
.v-footer a:hover { color: var(--vv-gold-deep); }
.v-footer-bottom {
  max-width: var(--container);
  margin: var(--s8) auto 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--vv-line);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4);
  font-family: var(--fb);
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}
.v-footer-bottom .v-mark { color: var(--vv-gold-deep); }

@media (max-width: 860px) {
  .v-footer-inner { grid-template-columns: 1fr 1fr; }
  .v-footer-bottom { flex-direction: column; gap: var(--s3); text-align: center; }
}
@media (max-width: 560px) {
  .v-footer-inner { grid-template-columns: 1fr; }
}


/* ---------- 11. Right-rail editorial margin note (optional, used sparingly) ---------- */

.marginalia {
  position: absolute;
  right: clamp(16px, 2vw, 32px);
  top: var(--section-y);
  font-family: var(--fb);
  font-size: var(--t-label);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  pointer-events: none;
  z-index: 1;
}
.marginalia .num { color: var(--vv-gold-deep); margin-right: .7em; }

.rooms, .plates, .place, .pillars, .accolades, .reserve, .anchor { position: relative; }

@media (max-width: 1180px) {
  .marginalia { display: none; }
}




/* =========================================================================
   PHASE C · Chapter numerals + art-deco corner flourishes
   ========================================================================= */

/* A large faded Roman numeral anchored at the top of each section,
   setting up a book-chapter rhythm. One numeral per section. */
.chapter-num {
  position: absolute;
  top: clamp(28px, 5vh, 72px);
  left: clamp(16px, 3vw, 48px);
  font-family: var(--fd);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(68px, 8.4vw, 136px);
  line-height: 1;
  color: var(--vv-gold-deep);
  opacity: .22;
  letter-spacing: -0.02em;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}
/* On the cover, shift down to live in the left margin next to the centered
   hero copy without colliding with the chrome. */
.cover .chapter-num {
  top: clamp(140px, 20vh, 220px);
}

/* Art-deco corner flourish — an L-bracket + inner accent + corner dot.
   Rotated via transform to serve all four corners from one SVG. */
.corner-flourish {
  position: absolute;
  width: clamp(36px, 3.8vw, 54px);
  height: clamp(36px, 3.8vw, 54px);
  color: var(--vv-gold-deep);
  pointer-events: none;
  opacity: .78;
  z-index: 1;
}
.corner-flourish--tl { top: clamp(24px, 3.2vh, 48px); left:  clamp(24px, 3vw, 56px); }
.corner-flourish--tr { top: clamp(24px, 3.2vh, 48px); right: clamp(24px, 3vw, 56px); transform: scaleX(-1); }
.corner-flourish--bl { bottom: clamp(24px, 3.2vh, 48px); left:  clamp(24px, 3vw, 56px); transform: scaleY(-1); }
.corner-flourish--br { bottom: clamp(24px, 3.2vh, 48px); right: clamp(24px, 3vw, 56px); transform: scale(-1, -1); }


/* =========================================================================
   PHASE D · Line illustrations (arch, façade, frangipani)
   ========================================================================= */

/* Arched doorway silhouette behind the anchor copy — an architectural echo
   of the V mark's upward thrust. Non-interactive, low-opacity, centered. */
.arch-bg {
  position: absolute;
  left: 50%;
  top: clamp(60px, 8vh, 120px);
  transform: translateX(-50%);
  width: clamp(280px, 42vw, 520px);
  height: auto;
  color: var(--vv-gold-deep);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.anchor { overflow: hidden; }
/* Raise the anchor content above the background arch */
.anchor > *:not(.arch-bg) { position: relative; z-index: 1; }

/* A schematic hotel façade SVG, placed in the bottom-left of the Place
   section as a small editorial mark. */
.facade {
  position: absolute;
  bottom: clamp(40px, 6vh, 80px);
  left: clamp(24px, 4vw, 64px);
  width: clamp(180px, 18vw, 240px);
  height: auto;
  color: var(--vv-gold-deep);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Stylized frangipani / jasmine branch — Bengaluru flora, bottom-right of
   the Reserve band. Hairline only, gold-deep. */
.botanical {
  position: absolute;
  bottom: clamp(-16px, 0vh, 24px);
  right: clamp(-24px, -1vw, 24px);
  width: clamp(120px, 16vw, 220px);
  height: auto;
  color: var(--vv-gold-deep);
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 860px) {
  .facade, .botanical { display: none; }
}


/* =========================================================================
   PHASE E · Cinematic photography bands (rhythm dividers)
   ========================================================================= */

.photo-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--vv-paper-vellum);
  border-top: 1px solid var(--vv-line);
  border-bottom: 1px solid var(--vv-line);
}
.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-band--single {
  height: clamp(200px, 26vh, 320px);
}

/* A small editorial caption anchored bottom-left inside the cinematic band */
.photo-band .band-caption {
  position: absolute;
  left: var(--container-pad);
  bottom: clamp(16px, 2vh, 28px);
  font-family: var(--fb);
  font-size: var(--t-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-paper);
  opacity: .9;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  z-index: 2;
}

/* ── Full-bleed parallax breaker ─────────────────────────────── */
.vv-parallax-break {
  position: relative;
  height: clamp(320px, 48vh, 580px);
  overflow: hidden;
}
.vv-parallax-img {
  position: absolute;
  inset: -25% 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  /* fixed attachment doesn't work on iOS; fall back to plain cover */
  .vv-parallax-img {
    background-attachment: scroll;
    inset: 0;
  }
}


/* ---------- 13. Body-stack & reveal footer ---------- */

/* The body-stack wraps all scrolling content and sits above the fixed footer.
   Its bottom margin is set in JS to the footer's measured height. */
.body-stack {
  position: relative;
  z-index: 2;
  background: var(--vv-paper);
  margin-bottom: var(--footer-height, 0px);
}

/* When the footer is revealed as a peel, it is fixed at viewport bottom,
   and the body-stack scrolls off above it. */
.v-footer.is-reveal,
.dls-footer.is-reveal {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  max-height: 100vh;
  overflow: hidden;
}

/* ── dls-footer pull-off positioning ── */

/* Prime dls-footer children — fade up once revealed */
.dls-footer.is-reveal > .dls-footer-inner,
.dls-footer.is-reveal > .dls-footer-rule,
.dls-footer.is-reveal > .dls-footer-nav,
.dls-footer.is-reveal > .dls-footer-bottom,
.dls-footer.is-reveal > .dls-footer-inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out);
}
.dls-footer.is-reveal > .dls-footer-inner > *:nth-child(1) { transition-delay: 0ms; }
.dls-footer.is-reveal > .dls-footer-inner > *:nth-child(2) { transition-delay: 120ms; }
.dls-footer.is-reveal > .dls-footer-inner > *:nth-child(3) { transition-delay: 200ms; }
.dls-footer.is-reveal > .dls-footer-rule  { transition-delay: 260ms; }
.dls-footer.is-reveal > .dls-footer-nav   { transition-delay: 130ms; }
.dls-footer.is-reveal > .dls-footer-bottom { transition-delay: 360ms; }

/* Reveal state */
.dls-footer.is-reveal.is-revealing > .dls-footer-inner,
.dls-footer.is-reveal.is-revealing > .dls-footer-rule,
.dls-footer.is-reveal.is-revealing > .dls-footer-nav,
.dls-footer.is-reveal.is-revealing > .dls-footer-bottom,
.dls-footer.is-reveal.is-revealing > .dls-footer-inner > * {
  opacity: 1;
  transform: translateY(0);
}

/* v-footer pull-off children */
.v-footer.is-reveal > .v-footer-inner,
.v-footer.is-reveal > .v-footer-bottom,
.v-footer.is-reveal > .v-footer-inner > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out);
}

/* Staggered delays on footer children */
.v-footer.is-reveal > .v-footer-inner > *:nth-child(1) { transition-delay: 0ms; }
.v-footer.is-reveal > .v-footer-inner > *:nth-child(2) { transition-delay: 120ms; }
.v-footer.is-reveal > .v-footer-inner > *:nth-child(3) { transition-delay: 200ms; }
.v-footer.is-reveal > .v-footer-inner > *:nth-child(4) { transition-delay: 280ms; }
.v-footer.is-reveal > .v-footer-bottom { transition-delay: 360ms; }

/* Reveal state — set by IntersectionObserver in main.js when the body-stack end enters view */
.v-footer.is-reveal.is-revealing > .v-footer-inner,
.v-footer.is-reveal.is-revealing > .v-footer-bottom,
.v-footer.is-reveal.is-revealing > .v-footer-inner > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .v-footer.is-reveal > .v-footer-inner,
  .v-footer.is-reveal > .v-footer-bottom,
  .v-footer.is-reveal > .v-footer-inner > *,
  .dls-footer.is-reveal > .dls-footer-inner,
  .dls-footer.is-reveal > .dls-footer-rule,
  .dls-footer.is-reveal > .dls-footer-nav,
  .dls-footer.is-reveal > .dls-footer-bottom,
  .dls-footer.is-reveal > .dls-footer-inner > * {
    transform: none;
    transition: opacity var(--m-fast) var(--ease-out);
  }
}


/* =========================================================================
   NEW SECTIONS — Hero Slider, USP, Room Cards, Dining, Meetings,
   Facilities, Nearby Attractions
   ========================================================================= */

/* ---------- Shared buttons ---------- */
.vv-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), .18);
  border-radius: 0;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.vv-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vv-btn--solid,
.vv-btn--gold,
.vv-btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .18); }
.vv-btn--solid:hover,
.vv-btn--gold:hover,
.vv-btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── btn-link override — match brand-card-cta reference ── */
.btn-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), .18);
  border-radius: 0;
  padding: 14px 24px;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.btn-link::after { display: none; }
.btn-link .arrow { display: none; }
.btn-link:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* ---------- Shared section head ---------- */
.section-head {
  max-width: var(--container);
  margin: 0 auto var(--s6);
  padding: 0 var(--container-pad);
}
.section-head h2 { margin-top: 10px; }

/* ---------- Hero Slider ---------- */
/* inset 50px top/left/right (Aman-style); body-stack already offsets below the fixed nav */
.hero-slider {
  position: relative;
  height: calc(100dvh - 118px - 50px);
  min-height: unset;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  padding-top: 0;
  margin: 50px 50px 0;
}
@media (max-width: 768px) { .hero-slider { margin: 24px 24px 0; height: calc(100dvh - var(--header-h, 104px) - 24px); } }
@media (max-width: 480px) { .hero-slider { margin: 16px 16px 0; height: calc(100dvh - var(--header-h, 100px) - 16px); } }
.slider-track {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.slide {
  position: absolute;
  inset: 0;
  background-image: var(--slide-img);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease;
}
.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(46,40,24,.45) 0%, rgba(46,40,24,.2) 50%, rgba(46,40,24,.6) 100%);
}
.slide.is-active { opacity: 1; }
.slide-caption {
  position: absolute;
  bottom: 80px;
  right: var(--container-pad);
  z-index: 2;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(248,243,230,.7);
}
.slider-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  text-align: center;
  padding: clamp(100px,18vh,180px) var(--container-pad) clamp(48px,8vh,80px);
  color: var(--vv-paper);
}
.slider-copy .label { color: var(--vv-gold-leaf); margin-bottom: var(--s5); display: inline-block; }
.slider-copy h1 { color: #fff; font-style: italic; font-size: clamp(40px,6vw,88px); }
.slider-copy h1 em { color: var(--vv-gold-leaf); }
.slider-copy .sub { color: rgba(248,243,230,.82); margin-top: var(--s5); font-size: clamp(16px,1.4vw,22px); }
.slider-ctas { display: flex; gap: 16px; justify-content: center; margin-top: var(--s7); flex-wrap: wrap; }
.slider-ctas .vv-btn--solid { background: var(--vv-gold-deep); border-color: var(--vv-gold-deep); color: #fff; }
.slider-ctas .vv-btn--solid:hover { background: var(--vv-gold); border-color: var(--vv-gold); }
.slider-ctas .vv-btn--ghost { border-color: rgba(248,243,230,.6); color: var(--vv-paper); }
.slider-ctas .vv-btn--ghost:hover { background: rgba(248,243,230,.15); }

/* hc-nav for Vividus — hover accent uses gold */
.hero-slider .hc-prev:hover,
.hero-slider .hc-next:hover { background: rgba(157,131,69,.7); border-color: var(--vv-gold-leaf); }
.hero-slider .hc-dot.is-active { background: var(--vv-gold-leaf); }

/* ---------- USP Bar ---------- */
.vv-usp {
  background: var(--vv-paper);
  border-top: 1px solid var(--vv-line);
  border-bottom: 1px solid var(--vv-line);
  padding: 36px var(--container-pad);
}
.usp-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.usp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s4) var(--s7);
  text-align: center;
}
.usp-num {
  font-family: var(--fd);
  font-size: clamp(40px,4.5vw,60px);
  font-style: italic;
  color: var(--vv-gold-deep);
  line-height: 1;
}
.usp-label {
  font-family: var(--fb);
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  margin-top: 10px;
}
.usp-divider {
  width: 1px;
  height: 48px;
  background: var(--vv-line);
}
.usp-tagline {
  max-width: var(--container);
  margin: var(--s5) auto 0;
  text-align: center;
  padding: 0 var(--container-pad);
}
.usp-tagline .label { display: block; margin-bottom: 10px; }
.usp-tagline p { max-width: 60ch; margin: 0 auto; }
@media (max-width: 700px) { .usp-divider { display: none; } .usp-stat { padding: var(--s3) var(--s5); } }
@media (max-width: 600px) { .usp-stat { width: 50%; } }
@media (max-width: 600px) {
  .place .neighbours {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    font-size: 14px !important;
  }
  .place .neighbours li {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--vv-line-soft);
  }
  .place .neighbours li:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
  h1 { font-size: clamp(40px, 10vw, 50px) !important; }
}
@media (max-width: 600px) {
  .nav-book-now,
  [class*="vv-btn"],
  .vv-btn-dir,
  .vv-btn-ghost,
  .fac-intro-cta,
  .btn-link,
  .rc-cta,
  .slider-ctas .vv-btn--solid,
  .slider-ctas .vv-btn--ghost,
  .vv-dining .dining-cta-row .vv-btn,
  .vv-meetings .vv-btn,
  .pull-band .vv-btn--solid,
  .enq-submit {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
  }
}

/* ---------- Room Cards ---------- */
/* ── Rooms — tab selector + crossfade canvas ── */
.rooms { padding: var(--section-y) 0; background: var(--vv-paper); }

/* header two-col */
.rooms .r-head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--s6);
  margin-bottom: clamp(40px,5vw,64px);
}
.rooms .r-head h2 { margin-top: 10px; }
.rooms .r-head h2 em { color: var(--vv-gold-deep); font-style:italic; }
.r-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
}
.r-head-right p { text-align:left; max-width:38ch; font-size:15px; color:var(--vv-ink-soft); line-height:1.75; margin:0; }
.r-head-cta { display:flex; align-items:center; gap:var(--s5); justify-content:flex-start; }

/* tab row */
.room-tabs {
  max-width: var(--container);
  margin: 0 auto clamp(28px,4vw,48px);
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(5,1fr);
  border-bottom: 1px solid var(--vv-line);
}
.room-tab {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s5) var(--s5) var(--s5) 0;
  cursor: pointer;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: border-color 260ms ease;
}
.room-tab.is-active { border-bottom-color: var(--vv-gold-deep); }
.room-tab-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(28px,3vw,44px);
  color: var(--vv-line);
  line-height: 1;
  transition: color 260ms ease;
}
.room-tab.is-active .room-tab-num { color: var(--vv-gold-deep); }
.room-tab-label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
  transition: color 260ms ease;
}
.room-tab.is-active .room-tab-label { color: var(--vv-ink); }
.room-tab-name {
  font-family: var(--fd);
  font-size: clamp(18px,1.8vw,26px);
  color: var(--vv-ink);
  line-height: 1.1;
}

/* canvas: left image, right copy */
.room-canvas {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px,5vw,80px);
  align-items: center;
  position: relative;
}

/* crossfade image stack */
.room-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.rc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.rc-slide.is-active { opacity: 1; z-index: 1; }
.rc-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 6s ease-out;
}
.rc-slide.is-active img { transform: scale(1); }
.rc-badge {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--vv-gold-deep);
  color: #fff;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 12px;
  z-index: 3;
}

/* copy panels */
.room-copy-wrap { position: relative; }
.rc-panel {
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
  transform: translateY(10px);
  width: 100%;
}
.rc-panel.is-active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
  transform: translateY(0);
}
.rc-panel .label { color: var(--vv-gold-deep); }
.rc-panel :is(h2, h3) {
  font-size: clamp(32px,3.5vw,54px);
  color: var(--vv-ink);
  margin-top: 10px;
  line-height: 1.05;
}
.rc-panel :is(h2, h3) em { color: var(--vv-gold-deep); font-style:italic; }
.rc-panel > p { margin-top:20px; font-size:15px; color:var(--vv-ink-soft); line-height:1.8; max-width:40ch; }

/* facts */
.r-facts {
  list-style: none;
  padding: 0; margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.r-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--vv-ink-soft);
  padding: 10px 0;
  border-bottom: none;
}
.r-facts li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--vv-gold);
  flex-shrink: 0;
}

/* "View Room" CTA button per panel */
.rc-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  align-self: flex-start;
  margin-top: var(--s3);
  padding: 14px 24px;
  border: 1px solid rgba(var(--ink-rgb), .18);
  border-radius: 0;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.rc-cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* shared Book Now row */
.room-book-row {
  max-width: var(--container);
  margin: clamp(36px,5vw,64px) auto 0;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  border-top: 1px solid var(--vv-line);
  padding-top: clamp(24px,3vw,40px);
}
.room-book-row p { font-size:14px; color:var(--vv-ink-mute); margin:0; }

@media (max-width:900px) {
  .rooms .r-head { grid-template-columns:1fr; }
  .room-canvas { grid-template-columns:1fr; }
  .rc-panel { position:relative; opacity:1; transform:none; pointer-events:auto; }
  .rc-panel:not(.is-active) { display:none; }
  .room-book-row { flex-direction:column; align-items:flex-start; }
}
/* 5 tabs can't fit in a fixed grid on phones — make the row scroll horizontally */
@media (max-width:720px) {
  .room-tabs {
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:22px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .room-tabs::-webkit-scrollbar { display:none; }
  .room-tab {
    flex:0 0 auto;
    min-width:128px;
    scroll-snap-align:start;
    padding-right:0;
  }
}

/* ---------- Dining ---------- */
/* ── Dining — luxury editorial layout ── */
.vv-dining {
  background: var(--vv-paper);
  padding: var(--section-y) 0;
}

.dining-subhead {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.75;
  color: var(--vv-ink-soft);
  max-width: 44ch;
  margin: 0;
  padding-bottom: 30px;
}

/* main canvas: image left, interactive right */
.dining-canvas {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: stretch;
}

/* image with floating stat chips */
.dining-img-wrap {
  position: relative;
  height: 100%;
}
.dining-img-main {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}
/* floating stat chips */
.dining-chip {
  position: absolute;
  background: var(--vv-paper);
  border: 1px solid var(--vv-line);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 4px 24px rgba(46,40,24,.08);
}
.dining-chip--tl { top: 24px; left: -28px; }
.dining-chip--br { bottom: 36px; right: -28px; }
.dining-chip-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--vv-ink);
  line-height: 1;
}
.dining-chip-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}

/* right column */
.dining-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0;
}
.dining-right h3 {
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.05;
  margin-top: 14px;
}
.dining-right h3 em { color: var(--vv-gold-deep); font-style: italic; }
.dining-right > p {
  margin-top: 20px;
  max-width: 40ch;
  color: var(--vv-ink-soft);
  font-size: 15px;
  line-height: 1.8;
}

/* gold hairline rule */
.dining-rule {
  width: 48px;
  height: 1px;
  background: var(--vv-gold);
  margin: clamp(24px, 3vw, 40px) 0;
}

/* infographic stats — compact horizontal strip */
.dining-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--vv-line-soft);
  border: 1px solid var(--vv-line-soft);
  margin-top: 4px;
}
.dining-stat {
  background: var(--vv-paper);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 12px;
  transition: background 240ms ease;
}
.dining-stat:hover { background: var(--vv-gold-pale); }
.ds-icon {
  width: 16px;
  height: 16px;
  color: var(--vv-gold-deep);
  stroke: currentColor;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.ds-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: 22px;
  color: var(--vv-ink);
  line-height: 1;
}
.ds-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vv-ink-mute);
}

/* CTA row */
.dining-cta-row {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-top: clamp(28px, 3vw, 44px);
}
.dining-cta-row .btn-link { font-size: 15px; }

/* ── vv-dining & vv-meetings CTAs — match GDH ch-dev-cta style ── */
.vv-dining .dining-cta-row .vv-btn.vv-btn--solid,
.vv-dining .dining-cta-row .btn-link,
.vv-meetings .vv-btn.vv-btn--solid {
  display: inline-flex;
  align-items: center;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 24px;
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), .18);
  border-radius: 0;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.vv-dining .dining-cta-row .vv-btn.vv-btn--solid:hover,
.vv-dining .dining-cta-row .btn-link:hover,
.vv-meetings .vv-btn.vv-btn--solid:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* second image — small portrait offset */
.dining-img-secondary {
  margin-top: clamp(20px, 4vw, 60px);
  margin-left: auto;
  width: 55%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  position: relative;
}

@media (max-width: 900px) {
  .dining-canvas { grid-template-columns: 1fr; }
  .dining-chip--tl { left: 0; }
  .dining-chip--br { right: 0; }
  .dining-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Meetings ---------- */
.vv-meetings {
  padding: var(--section-y) 0;
  background: var(--vv-paper-sepia, #EDE8D6);
  border-top: 1px solid var(--vv-line);
}
.meetings-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.meeting-card {
  background: var(--vv-paper);
  border: 1px solid var(--vv-line);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.meeting-card:hover { box-shadow: 0 8px 32px rgba(46,40,24,.1); transform: translateY(-3px); }
.mc-img { overflow: hidden; aspect-ratio: 3/2; }
.mc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; }
.meeting-card:hover .mc-img img { transform: scale(1.04); }
.mc-body { padding: var(--s5); }
.mc-body h3 { font-family: var(--fd); font-style: italic; font-size: clamp(20px,1.8vw,26px); color: var(--vv-gold-deep); margin: 0; }
.mc-body p { margin-top: 24px; }
@media (max-width: 1000px) { .meetings-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .meetings-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Facilities — luxury dark editorial ticker
   ========================================================================= */
.vv-facilities {
  background: #ffffff;
  padding: clamp(60px, 8vh, 100px) 0 clamp(60px, 8vh, 100px);
  overflow: hidden;
  border-top: 1px solid rgba(200,169,104,.18);
  border-bottom: 1px solid rgba(200,169,104,.18);
}

/* Header */
.fac-intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(44px, 6vh, 72px);
}
.fac-intro-left .label-bi {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.fac-intro-left .label {
  font-family: var(--fb); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--vv-gold);
}
.fac-intro-left .kn {
  font-family: var(--fd); font-style: italic; font-size: 14px;
  color: var(--vv-ink-soft);
}
.fac-intro-left h2 {
  font-family: var(--fd); font-size: clamp(30px, 3.4vw, 50px);
  color: var(--vv-ink); margin: 0; line-height: 1.05; font-weight: 400;
}
.fac-intro-left h2 em { color: var(--vv-gold); font-style: italic; }

/* Gold ornament divider under heading */
.fac-ornament {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
}
.fac-ornament-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--vv-gold) 0%, transparent 100%);
  max-width: 80px;
}
.fac-ornament-diamond {
  width: 6px; height: 6px;
  background: var(--vv-gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Remove old nav/dots */
.fac-nav { display: none; }
.fac-dots { display: none; }

/* ---- Infinite scroll ticker ---- */
@keyframes fac-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.fac-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.fac-track {
  display: flex;
  gap: 2px;
  width: max-content;
  animation: fac-scroll 36s linear infinite;
  will-change: transform;
}
.fac-track:hover { animation-play-state: paused; }

/* ---- Each card: tall portrait, image fills entire card ---- */
.fac-card {
  flex: 0 0 clamp(220px, 22vw, 290px);
  height: clamp(320px, 42vh, 460px);
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* Image fills card */
.fac-card-img-wrap {
  position: absolute;
  inset: 0;
}
.fac-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.4,0,.2,1);
  filter: brightness(.78) saturate(.9);
}
.fac-card:hover .fac-card-img {
  transform: scale(1.07);
  filter: brightness(.65) saturate(1.1);
}

/* Gradient overlay — bottom-up */
.fac-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20,17,14,.88) 0%,
    rgba(20,17,14,.45) 45%,
    transparent 75%
  );
  transition: opacity 400ms;
}

/* Gold top border that reveals on hover */
.fac-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--vv-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(.4,0,.2,1);
  z-index: 4;
}
.fac-card:hover::before { transform: scaleX(1); }

/* Number badge — top right */
.fac-card-num {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250,246,238,.55);
  border: 1px solid rgba(200,169,104,.3);
  padding: 3px 8px;
  backdrop-filter: blur(6px);
  background: rgba(20,17,14,.35);
}

/* Text content pinned to bottom */
.fac-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Gold rule */
.fac-card-line {
  width: 24px;
  height: 1px;
  background: var(--vv-gold);
  margin-bottom: 10px;
  transition: width 350ms ease;
}
.fac-card:hover .fac-card-line { width: 40px; }

.fac-card-name {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  color: var(--vv-paper);
  line-height: 1.2;
  margin: 0 0 6px;
}

.fac-card-desc {
  font-family: var(--fb);
  font-size: 12px;
  line-height: 1.65;
  color: rgba(250,246,238,.0);
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: color 350ms, max-height 450ms cubic-bezier(.4,0,.2,1);
}
.fac-card:hover .fac-card-desc {
  color: rgba(250,246,238,.65);
  max-height: 80px;
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .fac-intro { flex-direction: column; align-items: flex-start; }
  .fac-card  { flex: 0 0 68vw; height: 56vw; }
  .fac-track { animation-duration: 26s; gap: 2px; }
}

/* ---------- Nearby Attractions ---------- */
.nearby-attractions {
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--vv-line);
}
.nearby-attractions h4 {
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vv-gold-deep);
  margin: 0 0 var(--s5);
}
.attraction-list { display: flex; flex-direction: column; gap: var(--s4); }
.attraction-item {
  display: flex;
  gap: var(--s5);
  align-items: flex-start;
}
.att-dist {
  font-family: var(--fd);
  font-style: italic;
  font-size: 14px;
  color: var(--vv-gold-deep);
  white-space: nowrap;
  min-width: 44px;
  padding-top: 2px;
}
.att-info { display: flex; flex-direction: column; gap: 2px; }
.att-info strong { font-family: var(--fb); font-size: 13px; font-weight: 600; color: var(--vv-ink); }
.att-info span { font-size: 12px; color: var(--vv-ink-mute); line-height: 1.5; }



/* ---- Index overlay Destinations dropdown ---- */
.idx-drop { display: flex; flex-direction: column; }

.idx-drop-trigger {
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--vv-line, rgba(46,40,24,.1));
  color: var(--vv-ink);
  font-family: inherit;
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity 480ms var(--ease-out),
    transform 420ms var(--ease-out),
    color var(--m-base) var(--ease);
}
body.menu-open .idx-drop-trigger { opacity: 1; transform: translateX(0); transition-delay: 60ms; }

.idx-drop-trigger:hover,
.idx-drop-trigger:focus-visible { outline: none; color: var(--vv-gold-deep); }
.idx-drop-trigger:hover .idx-num { color: var(--vv-gold-deep); }
.idx-drop-trigger:hover .idx-title { transform: translateX(5px); color: var(--vv-gold-deep); }
.idx-drop-trigger:hover .idx-drop-caret { opacity: 1; color: var(--vv-gold-deep); }

.idx-drop-caret,
.idx-sub-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.idx-drop-caret svg,
.idx-sub-caret svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms ease;
}
/* Rotate the Destinations caret when the dropdown is open */
.idx-drop-trigger[aria-expanded="true"] .idx-drop-caret svg { transform: rotate(180deg); }

.idx-drop-panel {
  display: flex;
  flex-direction: column;
  padding: 8px 0 8px 32px;
  border-bottom: 1px solid var(--vv-line, rgba(46,40,24,.1));
  gap: 2px;
}
.idx-drop-panel[hidden] { display: none; }

.idx-sub-link {
  font-family: var(--fb, 'Inter', sans-serif);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vv-ink-soft, rgba(46,40,24,.72));
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 2px;
  transition: color var(--m-base) var(--ease), background var(--m-base) var(--ease);
}
.idx-sub-link:hover,
.idx-sub-link:focus-visible {
  color: var(--vv-gold-deep, #9D8345);
  background: rgba(157,131,69,.07);
  outline: none;
}
.idx-sub-link--vv { color: var(--vv-gold-deep, #9D8345); }


/* =========================================================================
   BOOKING BAR — Child (Vividus-site.html)
   Compact single-row: Check-in · Check-out · Rooms & Guests · Book Now
   ========================================================================= */

.vv-bk-bar {
  position: relative;
  z-index: 10;
  background: rgba(26,23,20,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(200,169,104,.25);
}

.vv-bk-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  align-items: stretch;
  min-height: 64px;
}

.vv-bk-field {
  padding: 10px 20px;
  border-right: 1px solid rgba(250,246,238,.12);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vv-bk-field:last-of-type { border-right: none; }

.vv-bk-label {
  display: block;
  font-family: var(--fb);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(200,169,104,.8);
  margin-bottom: 3px;
}

.vv-bk-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vv-bk-row svg { color: rgba(250,246,238,.4); flex-shrink: 0; }
.vv-bk-val {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--vv-paper);
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
}
.vv-bk-val:focus { outline: none; }
.vv-bk-val::placeholder { color: rgba(250,246,238,.35); }

/* Promo field */
.vv-bk-promo {
  font-family: var(--fb);
  font-size: 13px;
  color: var(--vv-paper);
  background: none;
  border: none;
  padding: 0;
  width: 100%;
}
.vv-bk-promo::placeholder { color: rgba(250,246,238,.3); }
.vv-bk-promo:focus { outline: none; }

/* Guest mini-panel */
.vv-bk-guests-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--vv-ink);
  border: 1px solid rgba(200,169,104,.25);
  box-shadow: 0 -8px 32px rgba(0,0,0,.3);
  padding: 18px 22px;
  min-width: 220px;
  z-index: 60;
  display: none;
}
.vv-bk-guests-panel.is-open { display: block; }
.vv-bk-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(250,246,238,.08);
}
.vv-bk-counter-row:last-child { border-bottom: none; }
.vv-bk-counter-label { font-family: var(--fb); font-size: 12px; color: var(--vv-paper); }
.vv-bk-counter-sub { font-size: 12px; color: rgba(250,246,238,.4); display: block; }
.vv-bk-counter-btns { display: flex; align-items: center; gap: 10px; }
.vv-bk-counter-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(200,169,104,.4);
  background: none;
  color: var(--vv-paper);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 150ms, background 150ms;
}
.vv-bk-counter-btn:hover { border-color: var(--vv-gold); background: rgba(200,169,104,.1); }
.vv-bk-counter-num { font-family: var(--fb); font-size: 13px; color: var(--vv-paper); min-width: 18px; text-align: center; }

/* Reserve button */
.vv-bk-submit {
  padding: 0 28px;
  background: var(--vv-gold);
  color: var(--vv-ink);
  border: none;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vv-bk-submit:hover { background: var(--vv-gold-deep); }

/* Footer strip */
.vv-bk-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--container-pad);
  border-top: 1px solid rgba(250,246,238,.07);
  font-family: var(--fb);
  font-size: 12px;
  color: rgba(250,246,238,.4);
}
.vv-bk-footer a { color: var(--vv-gold); text-decoration: none; }
.vv-bk-footer a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .vv-bk-inner { grid-template-columns: 1fr 1fr; min-height: auto; }
  .vv-bk-field { border-bottom: 1px solid rgba(250,246,238,.1); }
  .vv-bk-submit { grid-column: 1 / -1; padding: 14px; justify-content: center; }
}
@media (max-width: 560px) {
  .vv-bk-inner { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE ENHANCEMENTS ─────────────────────────────────────────────── */

/* 1024px — tablet landscape */
@media (max-width: 1024px) {
  .pillar-grid { grid-template-columns: repeat(3, 1fr); }
  .meetings-grid { grid-template-columns: repeat(2, 1fr); }
  .rooms .r-head { gap: var(--s5); }
}

/* 768px — tablet portrait: 24px horizontal gutter + cap section paddings */
@media (max-width: 768px) {

  /* ── Inner containers: 24px horizontal gutter ── */
  .container,
  .nav-inner,
  .vv-footer-inner,
  .hero-inner,
  .rooms-inner,
  .pillars-inner,
  .plates-inner,
  .place-inner,
  .accolades-inner,
  .usp-inner,
  .vv-bk-inner,
  .fac-inner,
  .gallery-inner,
  .meetings-inner,
  .dining-inner,
  .location-inner  { padding-left: 24px; padding-right: 24px; }

  /* ── Section vertical padding (use --section-y token, now 50px) ── */
  .rooms,
  .pillars,
  .plates,
  .place,
  .accolades,
  .usp,
  .dining,
  .fac,
  .gallery,
  .meetings       { padding-top: var(--section-y); padding-bottom: var(--section-y); }

  /* ── Hero ── */
  .vv-hero-content { padding: 0 24px 40px; }
  .vv-usp-strip    { padding: 16px 24px; }

  /* ── Cards inside padded containers: NO extra side padding ── */
  .pillar          { padding: 20px; }
  .plate-body      { padding: 16px 20px; }
  .accolade        { padding: 20px; }
  .reserve-card    { padding: 24px; }
  .usp-stat        { padding: var(--s3) var(--s4); }

  /* ── Booking widget ── */
  .vv-bk-inner     { gap: 0; }
  .vv-bk-fields    { padding: 0 24px; }

  /* ── Gallery / dining / rooms section heads: header → cards = 20px ── */
  .rooms .r-head,
  .section-intro   { padding: 0 24px; margin-bottom: 20px; }
  .section-head    { padding: 0 24px; margin-bottom: 20px; }

  /* ── Ensure 24px side gutter on all homepage section content wrappers ── */
  .dining-canvas,
  .room-tabs,
  .room-canvas,
  .fac-intro,
  .usp-tagline,
  .meetings-grid  { padding-left: 24px !important; padding-right: 24px !important; }

  /* ── Place strip ── */
  .p-inner         { padding-left: 24px !important; padding-right: 24px !important; }

  /* ── Anchor ("The root word") section ── */
  .anchor          { padding-left: 24px !important; padding-right: 24px !important; }

  /* ── Newsletter section ── */
  .newsletter-section .inner-section { padding-left: 24px !important; padding-right: 24px !important; }
}

/* 480px — mobile */
@media (max-width: 480px) {
  :root { --container-pad: 24px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .rooms .r-head { grid-template-columns: 1fr; }
  .plates-grid { gap: var(--s5); }
  .fac-intro { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .meetings-grid { grid-template-columns: 1fr; }
  .place .p-inner { gap: var(--s5); }
  .vv-bk-inner { grid-template-columns: 1fr; }
}

/* Safe area insets */
@supports (padding: env(safe-area-inset-right)) {
  .nav-inner { padding-right: max(clamp(24px, 5vw, 64px), env(safe-area-inset-right)); padding-left: max(clamp(24px, 5vw, 64px), env(safe-area-inset-left)); }
  .float-book-now { right: max(10px, calc(80px + env(safe-area-inset-right))); }
  @media (max-width: 600px) {
    .float-book-now { right: max(10px, env(safe-area-inset-right)); }
  }
}

/* ── Reveal-footer: cancel peel on mobile — prevents black gap ────────── */
@media (max-width: 768px) {
  .vv-meetings .section-head { padding-left: 24px !important; padding-right: 24px !important; }
  body.has-reveal-footer { background: var(--vv-paper); }
  .body-stack { margin-bottom: 0 !important; }
  .v-footer.is-reveal,
  .dls-footer.is-reveal { position: static !important; }
  .v-footer.is-reveal .footer-brand,
  .v-footer.is-reveal .footer-grid > *,
  .v-footer.is-reveal .footer-bottom { opacity: 1 !important; transform: none !important; }
  .dls-footer.is-reveal > .dls-footer-inner,
  .dls-footer.is-reveal > .dls-footer-rule,
  .dls-footer.is-reveal > .dls-footer-nav,
  .dls-footer.is-reveal > .dls-footer-bottom,
  .dls-footer.is-reveal > .dls-footer-inner > * { opacity: 1 !important; transform: none !important; }

  /* Hide "Reserve a Table" link on mobile */
  .dining-cta-row .btn-link { display: none; }

  /* Nav: tighten gap between Index text and hamburger lines */
  .menu-trigger { gap: 4px; font-size: 15px; }

  /* Masthead: reduce padding on mobile */
  .masthead { padding-top: 6px; padding-bottom: 4px; }
  .nav-logo { height: 36px; }

  /* Meeting/venue cards: tighten internal spacing */
  .mc-body { padding: 16px 24px 20px; }
  .mc-body p { margin-top: 8px; }
  .mc-body .r-facts { margin-top: 10px; gap: 4px; }

  /* Room CTA: tighten spacing on mobile */
  .rc-cta { padding: 10px 24px; margin-top: 16px; }

  /* Footer bottom: stack cleanly on mobile */
  .v-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: center !important;
  }
}

/* MySpace Hotels heading link — matches the new grouped header style */
a.mega-dest-brand--ms-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 12px !important;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms;
}
a.mega-dest-brand--ms-link:hover { color: #C06B40; }

/* Flattened MySpace group in overlay — static heading, no toggle/caret */
.idx-sub-flat { display: flex; flex-direction: column; }
.idx-sub-heading { display: block; cursor: default; pointer-events: none; }
.idx-sub-heading:hover { background: none; }

/* Footer link rows: same as the Great Destinations footer (preview.simplotel.com/100F743F71D60987):
   one centred row of title-case links with a hairline before Sitemap, then a bottom bar with the
   copyright on the left and the Simplotel credit on the right (stacked and centred below 1100px). */
html body footer.dls-footer .dls-footer-nav { gap: 4px 20px !important; padding: 20px var(--ds-gutter, 24px) !important; }
html body footer.dls-footer .dls-footer-nav a {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}
html body footer.dls-footer .dls-footer-nav li:has(> a[href="sitemap.html"]) { position: relative; padding-left: 20px; }
html body footer.dls-footer .dls-footer-nav li:has(> a[href="sitemap.html"])::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 14px;
  transform: translateY(-50%);
  background: rgba(250, 246, 238, .45);
}
html body footer.dls-footer .dls-footer-bottom {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between !important;
  align-items: center;
  gap: 6px 24px;
  padding: 14px var(--ds-gutter, 32px) 20px !important;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px !important;
  letter-spacing: .08em;
}
html body footer.dls-footer .dls-footer-copy { order: -1; text-align: left; color: var(--ft-mute, rgba(250, 246, 238, .8)); }
html body footer.dls-footer .dls-footer-credit { text-align: right; }
/* Hover: the deep ochre (#9D8345) read as the link dimming on the dark footer (4:1);
   the light VIVIDUS gold stands out clearly (about 9:1) */
html body footer.dls-footer :is(.dls-footer-nav, .dls-footer-bottom, .dls-footer-contact) a:is(:hover, :focus-visible) {
  color: var(--vv-gold-leaf, #E0C07A) !important;
}
@media (max-width: 1100px) {
  html body footer.dls-footer .dls-footer-bottom { display: block !important; text-align: center; line-height: 1.8; }
  html body footer.dls-footer .dls-footer-copy { display: block; margin-top: 10px; text-align: center; font-size: 11px; opacity: .75; }
}
@media (max-width: 600px) {
  html body footer.dls-footer .dls-footer-nav { gap: 4px 14px !important; }
  /* the links wrap here, so the hairline before Sitemap would dangle at a line start */
  html body footer.dls-footer .dls-footer-nav li:has(> a[href="sitemap.html"]) { padding-left: 0; }
  html body footer.dls-footer .dls-footer-nav li:has(> a[href="sitemap.html"])::before { display: none; }
  /* room under the floating chat / back-to-top buttons */
  html body footer.dls-footer .dls-footer-bottom { padding: 12px var(--ds-gutter, 20px) 136px !important; }
}

/* "Skip to content" (keyboard users): the inline top:-40px left its bottom 2-3px showing as a
   dark line at the top of every page. Keep it fully off-screen until it is focused with Tab. */
.skip-link:not(:focus) { top: -100px !important; }

/* =========================================================================
   Side menu: Destinations (same layout and behaviour as the GDH parent, in this site's colours)
   ========================================================================= */

/* Destinations row: the arrow points right when the brand list is closed and down when it is
   open. It sits on the visual middle of the word (the serif lowercase reads low, so it is
   nudged down 2px). */
.idx-link.idx-drop-trigger .idx-drop-caret { transform: translateY(2px); }
.idx-drop-trigger[aria-expanded="false"] .idx-drop-caret svg { transform: rotate(-90deg); }
.idx-drop-trigger[aria-expanded="true"] .idx-drop-caret svg { transform: none; }

/* Brand filters: VIVIDUS / VIVIDUS Sleek / MySpace. Each one shows only its hotels; the
   pressed one takes the accent colour. */
.idx-brand-filter {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.idx-brand-filter.is-active,
.idx-brand-filter[aria-pressed="true"] { color: var(--vv-gold-deep); background: rgba(157,131,69,.07); }
.menu-overlay .idx-sub-flat.is-filtered-out .idx-prop-list,
.menu-overlay .idx-dest-group.is-filtered-out { display: none; }

/* Logo tile: brand logo centred on a warm paper ground (hotels without their own photo) */
.idx-hotel-img.idx-hotel-img--logo {
  background-color: #F4EFE4;
  background-size: 62% auto;
  background-repeat: no-repeat;
  background-position: center;
}

/* "Our Destinations": VIVIDUS (1) and VIVIDUS Sleek (2) side by side, MySpace (3 x 3) below,
   all on one 3-column grid. Groups and cards are subgrids, so within every row the brand label,
   the name and the location each start on the same line (even when a name wraps) and the cards
   are the same height. */
.idx-dest-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 0;
}
.idx-dest-groups .idx-dest-group {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 0;
}
.idx-dest-groups .idx-dest-group[data-brand="vividus"]       { grid-column: span 1; grid-row: span 5; }
.idx-dest-groups .idx-dest-group[data-brand="vividus-sleek"] { grid-column: span 2; grid-row: span 5; }
.idx-dest-groups .idx-dest-group[data-brand="myspace"]       { grid-column: 1 / -1; grid-row: span 13; }
.idx-dest-groups .idx-dest-state { grid-column: 1 / -1; }
.idx-dest-groups .idx-dest-group[data-brand="myspace"] .idx-dest-state { margin-top: 16px; }
.idx-dest-groups .idx-dest-group:first-child .idx-dest-state,
.idx-dest-groups .idx-dest-group.is-filtered-out + .idx-dest-group .idx-dest-state { margin-top: 0; }
.idx-dest-groups .idx-dest-row { display: contents; }
.idx-dest-groups .idx-hotel-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  margin-bottom: 20px;
}
.idx-dest-groups .idx-hotel-info {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 4px;
  align-content: start;
}
.idx-dest-groups .idx-hotel-info > * { align-self: start; margin-top: 0; }

/* Mobile list: logo tiles keep the whole logo inside the small thumbnail */
@media (max-width: 768px) {
  .idx-prop-list .idx-hotel-img.idx-hotel-img--logo { background-size: 84% auto; }
  .idx-brand-filter { padding-left: 4px; padding-right: 4px; }
}