/* ═══════════════════════════════════════════════════════════════════
   MIRAYA HOTEL & RESORTS — main.css
   Shared styles loaded by every page.
   Page-specific styles live in /assets/css/pages/<page>.css

   Architecture:
     1. Brand tokens (CSS custom properties)
     2. Reset + base
     3. Top strip (fixed bar above nav)
     4. Main nav (desktop)
     5. Hamburger drawer (mobile)
     6. Page hero
     7. Breadcrumb
     8. Section helpers (eyebrow, title, line, desc, buttons)
     9. Footer
     10. Responsive (mobile nav, tap targets, polish)
═══════════════════════════════════════════════════════════════════ */


/* ═══ 1. BRAND TOKENS ═══ */
:root {
  --m-espresso:  #2C1A0E;
  --m-walnut:    #7B4A1E;
  --m-chestnut:  #9B5E2A;
  --m-caramel:   #B8772F;
  --m-bronze:    #C9964A;
  --m-honey:     #DDB96A;
  --m-parchment: #F5EFE6;
  --m-linen:     #EDE4D5;
  --m-stone:     #8A7060;
  --m-charcoal:  #1E1410;
  --m-white:     #FFFAF5;

  /* ── Light surfaces ──────────────────────────────────────────────
     Panels that used to be solid espresso are now light. Text sitting
     on them uses the --m-on-* inks below instead of white.
     NOTE: espresso/charcoal remain valid as TEXT colours and as the
     scrim gradients painted over photos — only solid panels changed. */
  --m-surface:      #FFFFFF;              /* raised cards, modals        */
  --m-surface-alt:  #F5EFE6;              /* parchment band             */
  --m-surface-deep: #E4D8C4;              /* deepest band (ex-espresso) */
  --m-on-strong:    #2C1A0E;              /* headings on light surfaces */
  --m-on-body:      rgba(44,26,14,.78);   /* body copy                  */
  --m-on-mute:      rgba(44,26,14,.55);   /* captions, meta             */
  --m-on-faint:     rgba(44,26,14,.55);   /* legal, copyright           */
  --m-hairline:     rgba(44,26,14,.12);   /* dividers on light surfaces */
  --m-gold-ink:     #9B5E2A;              /* gold accent readable on light */

  --strip-h:  0px;   /* top strip removed site-wide — was 36px */
  --nav-h:    80px;
  --header-h: 80px;  /* = nav-h only (strip removed); was 116px */
}


/* ═══ 2. RESET + BASE ═══ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: 'Montserrat', sans-serif;
  background: var(--m-linen);
  color: var(--m-charcoal);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: 'Montserrat', sans-serif; }


/* ═══ 3. TOP STRIP — removed site-wide (set display:flex to restore) ═══ */
.top-strip {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  background: var(--m-espresso); height: var(--strip-h); padding: 0 40px;
  align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 1.4px; color: rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(201,150,74,.12);
}
.strip-left { display: flex; align-items: center; gap: 8px; }
.strip-left i { color: var(--m-bronze); font-size: 9px; }
.strip-right { display: flex; align-items: center; }
.strip-right a {
  color: var(--m-honey); font-weight: 500; letter-spacing: 1.4px; font-size: 10px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 14px; border-left: 1px solid rgba(201,150,74,.12);
  transition: color .2s;
}
.strip-right a:first-child { border-left: none; }
.strip-right a:hover { color: var(--m-white); }


/* ═══ 4. MAIN NAV ═══ */
nav.main-nav {
  position: fixed; top: var(--strip-h); left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); overflow: visible; padding: 0 32px;
  display: flex; align-items: center;
  background: rgba(26,15,8,.04);
  transition: background .5s ease, backdrop-filter .5s ease, box-shadow .5s ease;
}
nav.main-nav.scrolled {
  background: rgba(255,252,247,.97);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 4px 24px rgba(44,26,14,.10);
}
nav.main-nav::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(185,119,47,.6) 25%,
    rgba(201,150,74,.7) 50%, rgba(185,119,47,.6) 75%, transparent 100%);
  opacity: 0; transition: opacity .5s;
}
nav.main-nav.scrolled::after { opacity: 1; }

.nav-left, .nav-right-links {
  list-style: none; display: flex; align-items: center;
}
.nav-left { justify-content: flex-end; order: 1; }
.nav-right-links { padding-left: 4px; }
.nav-left li, .nav-right-links li { display: flex; align-items: center; position: relative; }
.nav-left li + li::before,
.nav-right-links li + li::before {
  content: '◆'; font-size: 4px; color: rgba(201,150,74,.38);
  margin: 0 14px; flex-shrink: 0;
}
.nav-left a, .nav-right-links a {
  color: rgba(255,255,255,.75);
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
  font-size: 14px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; white-space: nowrap;
  position: relative; transition: color .25s;
}
.nav-left a::after, .nav-right-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px;
  background: var(--m-bronze);
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease;
}
.nav-left a:hover, .nav-right-links a:hover { color: var(--m-honey); }
.nav-left a:hover::after, .nav-right-links a:hover::after { transform: scaleX(1); }
.nav-left a.active, .nav-right-links a.active { color: var(--m-gold-ink); }
.nav-left a.active::after, .nav-right-links a.active::after { transform: scaleX(1); }

/* Scrolled = solid light bar, so the links flip from white-on-photo to
   ink-on-parchment. Unscrolled the nav is transparent over the hero and
   keeps its white text + shadow. */
nav.main-nav.scrolled .nav-left a,
nav.main-nav.scrolled .nav-right-links a {
  color: var(--m-on-body); text-shadow: none;
}
nav.main-nav.scrolled .nav-left a:hover,
nav.main-nav.scrolled .nav-right-links a:hover,
nav.main-nav.scrolled .nav-left a.active,
nav.main-nav.scrolled .nav-right-links a.active { color: var(--m-gold-ink); }
nav.main-nav.scrolled .nav-left li + li::before,
nav.main-nav.scrolled .nav-right-links li + li::before { color: rgba(155,94,42,.45); }
nav.main-nav.scrolled .nav-has-drop > a i { color: rgba(155,94,42,.75); }
nav.main-nav.scrolled .nav-hamburger { border-color: rgba(44,26,14,.28); }
nav.main-nav.scrolled .nav-hamburger span { background: var(--m-on-strong); }


/* Dropdown (Our Hotel → Skyline) */
.nav-has-drop { position: relative; }
.nav-has-drop > a { display: flex; align-items: center; gap: 6px; }
.nav-has-drop > a i {
  font-size: 7px; color: rgba(201,150,74,.7);
  transition: transform .3s;
}
.nav-has-drop:hover > a i { transform: rotate(180deg); }
.nav-has-drop::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 24px;
}
.nav-dropdown {
  position: absolute; top: calc(100% + 18px); left: 0;
  background: rgba(255,252,247,.99);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--m-hairline);
  border-top: 2px solid var(--m-caramel);
  box-shadow: 0 18px 44px rgba(44,26,14,.14);
  min-width: 300px; padding: 8px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s, visibility .3s;
  z-index: 2000;
}
.nav-has-drop:hover .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);
}
.nav-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 11px 20px;
  font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  color: var(--m-on-body);
  border-bottom: 1px solid var(--m-hairline);
  transition: color .2s, background .2s, padding-left .2s;
  text-shadow: none; white-space: nowrap;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a i {
  font-size: 9px; color: var(--m-caramel);
  width: 14px; text-align: center; flex-shrink: 0;
}
.nav-dropdown a:hover {
  color: var(--m-gold-ink); background: rgba(201,150,74,.10); padding-left: 26px;
}
.nav-dropdown a small { color: var(--m-on-mute); }
.nav-dropdown a:last-child { border-bottom: none; }


/* Brand logo (left of nav) */
.nav-brand {
  display: flex; align-items: center; padding: 0;
  text-decoration: none; flex-shrink: 0;
  position: relative; z-index: 1002;
  order: -1; margin-right: auto;   /* push logo to far left */
}
.nav-brand-line {
  display: none;                   /* decorative flanking lines — hidden in left layout */
  width: 48px; height: 1px; flex-shrink: 0;
  background: linear-gradient(90deg, transparent, rgba(201,150,74,.5));
}
.nav-brand-line-r {
  background: linear-gradient(90deg, rgba(201,150,74,.5), transparent);
}
/* Circle must stay inside --nav-h (80px) or it spills onto the hero below. */
.nav-brand-center {
  display: flex; align-items: center; justify-content: center;
  padding: 0; width: 58px; height: 58px;
  overflow: hidden; border-radius: 50%;
}
.nav-brand-center img {
  /* The medallion sits dead-centre in the 307x384 artwork and spans ~50% of its
     width, so rendering the art at 2x the circle makes the mark fill the circle.
     max-width:none overrides the global img{max-width:100%} reset. */
  width: 116px; height: auto; max-width: none;
  flex-shrink: 0; display: block; opacity: 1;
  transition: opacity .3s, transform .3s;
}
.nav-brand:hover .nav-brand-center img { transform: scale(1.06); }


/* Right side: hamburger + Book Now */
.nav-right {
  display: flex; align-items: center; justify-content: flex-end;
  order: 2; gap: 24px; margin-left: 36px;   /* grouped right, spaced from nav-left links */
}
.nav-hamburger {
  flex-shrink: 0; margin-left: 12px;
  background: none; border: 1px solid rgba(201,150,74,.3);
  padding: 7px 9px;
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; transition: border-color .2s;
}
.nav-hamburger:hover { border-color: rgba(201,150,74,.7); }
.nav-hamburger span {
  display: block; width: 20px; height: 1.5px;
  background: rgba(255,255,255,.85);
  transition: all .35s cubic-bezier(.23,1,.32,1);
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-book {
  flex-shrink: 0; margin-left: 16px; padding: 14px 34px;
  background: linear-gradient(135deg, var(--m-walnut) 0%, var(--m-caramel) 100%);
  border: 1px solid var(--m-caramel); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
  transition: opacity .25s, transform .25s;
  position: relative; overflow: hidden;
}
.nav-book span { position: relative; z-index: 1; }
.nav-book:hover { opacity: .88; transform: translateY(-1px); }


/* Brochure download — ghost button so it doesn't compete with Book Now.
   Hidden below 1024px, where the drawer carries it instead. */
.nav-brochure {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
  font-size: 10px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.nav-brochure i { font-size: 11px; }
.nav-brochure:hover {
  background: rgba(201,150,74,.18);
  border-color: var(--m-honey); color: var(--m-honey);
}
nav.main-nav.scrolled .nav-brochure {
  color: var(--m-on-body); border-color: rgba(155,94,42,.45); text-shadow: none;
}
nav.main-nav.scrolled .nav-brochure:hover {
  background: rgba(155,94,42,.10);
  border-color: var(--m-gold-ink); color: var(--m-gold-ink);
}

/* Drawer variant — outlined block at the foot of the mobile menu */
.drawer-brochure {
  margin-top: 18px;
  justify-content: center;
  border: 1px solid rgba(155,94,42,.45) !important;
  color: var(--m-gold-ink) !important;
  padding: 14px 12px !important;
  letter-spacing: 2px !important;
}
.drawer-brochure:hover { background: rgba(155,94,42,.10); padding-left: 12px !important; }


/* ═══ 5. HAMBURGER DRAWER ═══ */
.nav-drawer {
  position: fixed; top: var(--header-h); right: 0;
  width: min(300px, 88vw); height: calc(100vh - var(--header-h));
  background: rgba(255,252,247,.99);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border-left: 1px solid var(--m-hairline);
  border-top: 2px solid var(--m-caramel);
  box-shadow: -18px 0 44px rgba(44,26,14,.12);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
  z-index: 999; overflow-y: auto; padding: 28px 24px;
  display: flex; flex-direction: column;
}
.nav-drawer.open { transform: translateX(0); }

.drawer-label {
  font-size: 7px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
  color: var(--m-gold-ink);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--m-hairline);
  display: block;
}
.nav-drawer .drawer-label:first-of-type { margin-top: 0; }
.nav-drawer .drawer-label + .drawer-label {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--m-hairline);
}

.nav-drawer a {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  font-size: 9px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--m-on-body);
  border-bottom: 1px solid var(--m-hairline);
  transition: color .2s, padding-left .2s;
}
.nav-drawer a i {
  font-size: 11px; color: var(--m-caramel);
  width: 16px; text-align: center; flex-shrink: 0;
}
.nav-drawer a:hover, .nav-drawer a.active {
  color: var(--m-gold-ink); padding-left: 8px;
}
.nav-drawer a:last-of-type { border-bottom: none; }

/* Drawer child item — indented sub-link (e.g. "Skyline by Miraya · Indore" under "Our Hotel") */
.nav-drawer a.drawer-child {
  padding-left: 36px; font-size: 8px; opacity: .85; letter-spacing: 2px;
}
.nav-drawer a.drawer-child i { font-size: 9px; color: var(--m-caramel); }
.nav-drawer a.drawer-child:hover { opacity: 1; padding-left: 44px; }

.drawer-overlay {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,.4);
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }


/* ═══ 6. PAGE HERO ═══ */
main { padding-top: var(--header-h); }

.page-hero {
  position: relative; height: 70vh; min-height: 460px;
  display: flex; align-items: flex-end;
  overflow: hidden; margin-top: calc(-1 * var(--header-h));
}
.page-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  animation: heroZoom 12s ease-out forwards;
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Cinematic background video (child-property hero). Fills the hero exactly
   like .page-hero-img and sits behind the overlay + content. */
.page-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  z-index: 0; background: var(--m-espresso, #1a0f08);
}

/* ─── Hero slider variant ─────────────────────────────────────────────────
   Used on parent.html + index.html home heroes. Markup: a .page-hero
   section containing a .hero-slider element wrapping multiple
   .hero-slide nodes (each with one .page-hero-img inside). The first
   slide is .is-active by default; main.js Module 6 cross-fades them. */
.hero-slider {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;   /* clip the Ken-Burns zoom here, so .page-hero
                          can stay overflow:visible for the booking bar */
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-slide .page-hero-img {
  /* Re-trigger the heroZoom on each active slide for a Ken-Burns feel */
  animation: heroZoom 9s ease-out forwards;
}
.hero-slide:not(.is-active) .page-hero-img {
  animation: none;
  transform: scale(1.04);
}

/* Slider prev / next arrows — vertically centred at the hero edges */
.hero-nav { position: static; }
.hero-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.85);
  font-size: 15px;
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hero-arrow-prev { left: 28px; }
.hero-arrow-next { right: 28px; }
.hero-arrow:hover,
.hero-arrow:focus-visible {
  background: var(--m-honey, #c9964a);
  border-color: var(--m-honey, #c9964a);
  color: #fff;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide .page-hero-img { animation: none; transform: none; }
}
@media (max-width: 600px) {
  .hero-arrow { width: 38px; height: 38px; font-size: 13px; }
  .hero-arrow-prev { left: 14px; }
  .hero-arrow-next { right: 14px; }
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(26,15,8,.55) 0%, rgba(26,15,8,.12) 55%, transparent 100%);
}
.page-hero-content {
  position: relative; z-index: 2; text-align: left;
  padding: 0 60px 30px 80px; width: 100%;
  opacity: 0; animation: fadeUp .7s .4s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero-eyebrow,
.hero-eyebrow {
  font-size: 8px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  color: var(--m-honey); display: block; margin-bottom: 14px;
}
.page-hero-title,
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3.5vw, 42px); font-weight: 600;
  color: var(--m-honey); letter-spacing: 6px; text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,.4); line-height: 1.05;
  margin-bottom: 8px;
}
.page-hero-title em,
.hero-title em {
  font-style: italic; font-weight: 600; color: var(--m-honey);
}
.page-hero-sub {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-top: 14px;
}
.page-hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px 28px; margin-top: 22px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.page-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.page-hero-meta i { color: var(--m-bronze); font-size: 11px; }

/* Hero scroll hint (used on parent.html, index.html) */
.hero-scroll-hint {
  position: absolute; bottom: 28px; right: 64px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: .55;
  animation: bounce 2s ease infinite;
}
.hero-scroll-hint span {
  font-size: 7.5px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  writing-mode: vertical-rl;
}
.hero-scroll-hint i { color: var(--m-honey); font-size: 12px; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.hero-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  opacity: 0; animation: fadeUp .7s .7s ease forwards;
}
.hero-meta span {
  font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(201,150,74,.2);
  padding: 5px 10px;
}
.hero-meta i { color: var(--m-bronze); }


/* ═══ 7. BREADCRUMB ═══ */
.breadcrumb {
  background: var(--m-surface-alt); padding: 13px 60px;
  display: flex; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--m-on-mute);
  border-bottom: 1px solid var(--m-hairline);
}
.breadcrumb a { color: var(--m-on-body); transition: color .2s; }
.breadcrumb a:hover { color: var(--m-gold-ink); }
.breadcrumb i { font-size: 6px; color: rgba(155,94,42,.5); }


/* ═══ 7b. CHECK-IN / CHECK-OUT STRIP ═══
   Slim band under the breadcrumb so the times are visible without digging
   into the policy pages. Times are also repeated in the footer, in each
   room's booking card, and in full on stay.html / terms.html. */
.cico-strip {
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-hairline);
  padding: 15px 60px;
  display: flex; align-items: center; justify-content: center;
  gap: 26px; flex-wrap: wrap;
}
.cico-item {
  display: inline-flex; align-items: center; gap: 9px;
}
.cico-item > i {
  font-size: 13px; color: var(--m-gold-ink);
  width: 16px; text-align: center; flex-shrink: 0;
}
.cico-label {
  font-size: 9px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--m-gold-ink);
}
.cico-time {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--m-on-strong);
}
.cico-sep { width: 1px; height: 22px; background: rgba(155,94,42,.28); }
.cico-note {
  font-size: 10.5px; letter-spacing: .4px;
  color: var(--m-on-mute);
}
.cico-note a { color: var(--m-gold-ink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 700px) {
  .cico-strip { padding: 13px 20px; gap: 8px 18px; }
  .cico-sep   { display: none; }
  .cico-note  { flex: 1 0 100%; text-align: center; }
}


/* ═══ 8. SECTION HELPERS ═══ */
.sec-eyebrow {
  display: block; font-size: 9.5px; font-weight: 600;
  letter-spacing: 6px; text-transform: uppercase;
  color: var(--m-chestnut); margin-bottom: 10px; text-align: center;
}
/* .lt = "light text", the old on-dark variant. Those panels are light now,
   so .lt resolves to ink. Kept as a class so page markup needs no changes. */
.sec-eyebrow.lt   { color: var(--m-gold-ink); }
.sec-eyebrow.left { text-align: left; }

.sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 50px); font-weight: 300;
  line-height: 1.1; margin-bottom: 14px;
  color: var(--m-charcoal); text-align: center;
}
.sec-title.lt   { color: var(--m-on-strong); }
.sec-title.left { text-align: left; }
.sec-title em {
  font-style: italic; font-weight: 600;
  background: linear-gradient(90deg, #9B5E2A, #DDB96A 40%, #C9964A 60%, #9B5E2A);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s linear infinite;
}
@keyframes goldShimmer { to { background-position: 250% center; } }

.sec-line {
  width: 52px; height: 1px;
  background: linear-gradient(90deg, var(--m-caramel), transparent);
  margin: 0 auto 24px;
}
.sec-line.lt   { background: linear-gradient(90deg, var(--m-caramel), transparent); }
.sec-line.left { margin: 0 0 28px; }

.sec-desc, .sec-sub {
  font-size: 13px; color: var(--m-stone);
  max-width: 640px; margin: 0 auto 52px;
  text-align: center; line-height: 1.9;
}
.sec-desc.lt, .sec-sub.lt { color: var(--m-on-mute); }


/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--m-walnut) 0%, var(--m-caramel) 100%);
  color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; padding: 13px 30px;
  text-decoration: none;
  transition: opacity .25s, transform .25s;
}
.btn-primary:hover { opacity: .88; transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--m-walnut);
  border: 1px solid rgba(123,74,30,.35);
  padding: 12px 26px; text-decoration: none;
  transition: all .25s;
}
.btn-ghost:hover { background: var(--m-walnut); color: #fff; }

.btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; padding: 14px 30px;
  transition: all .25s; text-decoration: none;
}
.btn-cta-gold {
  background: linear-gradient(135deg, var(--m-walnut) 0%, var(--m-caramel) 100%);
  color: #fff;
}
.btn-cta-gold:hover { opacity: .88; transform: translateY(-2px); }
.btn-cta-outline {
  border: 1px solid rgba(155,94,42,.45); color: var(--m-gold-ink);
}
.btn-cta-outline:hover { background: rgba(221,185,106,.1); border-color: var(--m-honey); }

.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--m-walnut) 0%, var(--m-caramel) 100%);
  color: #fff;
  padding: 14px 40px;
  font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  text-decoration: none;
  transition: all .3s;
}
.btn-gold:hover { background: var(--m-caramel); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(168,120,42,.4); color: #fff; }

.btn-outline-white {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: var(--m-on-strong);
  padding: 13px 36px;
  font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  text-decoration: none;
  transition: all .3s;
}
.btn-outline-white:hover { border-color: var(--m-gold-ink); color: var(--m-gold-ink); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--m-gold-ink);
  border: 1px solid rgba(201,150,74,.5);
  padding: 12px 32px; text-decoration: none;
  font-size: 8.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  cursor: pointer; transition: all .25s;
}
.btn-outline:hover { background: rgba(201,150,74,.1); border-color: var(--m-gold-ink); }
/* Light variant — same outline, used on dark backgrounds */
.btn-outline-lt { color: var(--m-honey); border-color: rgba(201,150,74,.35); }
.btn-outline-lt:hover { background: var(--m-walnut); border-color: var(--m-walnut); color: #fff; }


/* Mobile bottom-bar (shown ≤900px on child-property pages) */
.mobile-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: rgba(8,15,9,.97);
  border-top: 1px solid rgba(168,120,42,.18);
  grid-template-columns: 1fr 1fr 1fr;
}
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px;
  font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .2s;
}
.mobile-bar a.primary { color: var(--m-honey); }
.mobile-bar a:hover   { color: var(--m-honey); }
.mobile-bar i         { font-size: 16px; }
@media (max-width: 900px) {
  .mobile-bar { display: grid; }
}


/* ═══ Sitewide WhatsApp chat FAB ═══
   Floating round button, bottom-right on every page. Opens wa.me chat
   pre-filled with a Miraya enquiry message in a new tab. Stacks above
   the mobile-bar on phones; sits above .spa-fab on the wellness page. */
.whatsapp-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 950;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(37,211,102,.4), 0 2px 6px rgba(0,0,0,.22);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  /* Subtle pulse so the button reads as "live" */
  animation: whatsappPulse 2.4s ease-out infinite;
}
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 22px rgba(37,211,102,.5), 0 3px 9px rgba(0,0,0,.28);
  color: #fff;
  animation-play-state: paused;
}
.whatsapp-fab i { line-height: 1; }
.whatsapp-fab .whatsapp-fab-label {
  /* Visible label only on wider screens — purely additive, doesn't break the round shape */
  display: none;
}
@keyframes whatsappPulse {
  0%   { box-shadow: 0 4px 14px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.5); }
  60%  { box-shadow: 0 4px 14px rgba(37,211,102,.4), 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 14px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { animation: none; }
}
/* Lift the FAB above the fixed .mobile-bar on phones (mobile-bar ≈ 64px tall) */
@media (max-width: 900px) {
  .whatsapp-fab { bottom: 84px; }
}
/* Wellness has its own .spa-fab at bottom:24px — stack WhatsApp above it */
body:has(.spa-fab) .whatsapp-fab { bottom: 92px; }
@media (max-width: 600px) {
  body:has(.spa-fab) .whatsapp-fab { bottom: 76px; right: 16px; }
  .whatsapp-fab { width: 40px; height: 40px; font-size: 18px; }
}


/* ═══ Sitewide Back-to-Top button ═══
   Injected by main.js, stacks above the WhatsApp FAB. Only shown after
   the user has scrolled >300px down (set via .is-visible class). */
.back-to-top {
  position: fixed; right: 24px; bottom: 80px; z-index: 945;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-surface);
  color: var(--m-gold-ink);
  border: 1px solid rgba(155,94,42,.35);
  border-radius: 50%;
  font-size: 14px;
  text-decoration: none; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s, border-color .2s;
  box-shadow: 0 4px 16px rgba(44,26,14,.18);
}
.back-to-top.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--m-walnut);
  border-color: var(--m-walnut);
  color: #fff;
  transform: translateY(-2px);
}
/* On phones the WhatsApp FAB sits at bottom:84px (above mobile-bar). Stack
   the back-to-top above it. */
@media (max-width: 900px) {
  .back-to-top { bottom: 136px; }
}
/* Wellness page (.spa-fab present): WhatsApp moves to bottom:92, so push
   back-to-top higher still. Mobile-only refinement handled by the @max-600 below. */
body:has(.spa-fab) .back-to-top { bottom: 144px; }
@media (max-width: 600px) {
  .back-to-top { width: 40px; height: 40px; right: 16px; bottom: 132px; font-size: 13px; }
  body:has(.spa-fab) .back-to-top { bottom: 128px; right: 16px; }
}


/* ═══ Cookie consent (GDPR + India DPDP 2023) ═══
   Banner injected by main.js on first visit, dismissible to localStorage.
   - First view: bottom banner with Accept all / Necessary only / Customise
   - Customise opens a modal with per-category toggles
   - "Cookie preferences" link auto-injected into footer to re-open later
   - Hidden after consent stored; respects prefers-reduced-motion */

/* Hide all by default — JS adds .is-open to the relevant element. */
/* Consent layer sits ABOVE the fixed header (nav 1000, top-strip 1001).
   It is a blocking gate, so it must not be painted over; kept under
   .bb-modal-overlay (3000) so an open booking dialog still wins. */
.cc-banner, .cc-modal, .cc-modal-overlay { display: none; }

/* ── First-visit banner ── */
.cc-banner.is-open {
  display: block;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--m-surface);
  border-top: 2px solid var(--m-caramel);
  box-shadow: 0 -8px 32px rgba(44,26,14,.16);
  color: var(--m-on-body);
  animation: ccSlideUp .35s ease-out;
}
@keyframes ccSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-banner.is-open { animation: none; }
}
.cc-banner-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 22px 28px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.cc-banner-text {
  flex: 1; min-width: 280px;
  font-size: 12.5px; line-height: 1.7;
  color: var(--m-on-body);
}
.cc-banner-text strong {
  display: block; margin-bottom: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500;
  color: var(--m-on-strong);
  letter-spacing: .5px;
}
.cc-banner-text a {
  color: var(--m-gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-banner-text a:hover { color: var(--m-walnut); }
.cc-banner-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  flex-shrink: 0;
}
.cc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .25s, transform .25s, background .25s, border-color .25s, color .25s;
  text-decoration: none;
}
.cc-btn-primary {
  background: linear-gradient(135deg, var(--m-walnut) 0%, var(--m-caramel) 100%);
  color: #fff;
}
.cc-btn-primary:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
.cc-btn-ghost {
  background: transparent; color: var(--m-on-body);
  border-color: rgba(155,94,42,.45);
}
.cc-btn-ghost:hover {
  background: rgba(201,150,74,.14);
  border-color: var(--m-caramel);
  color: var(--m-gold-ink);
}
.cc-btn-link {
  background: none; border: none; padding: 11px 4px;
  color: var(--m-on-mute);
  text-decoration: underline; text-underline-offset: 3px;
  font-size: 8.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.cc-btn-link:hover { color: var(--m-gold-ink); }

/* ── Modal (customise preferences) ── */
.cc-modal-overlay.is-open {
  display: block;
  position: fixed; inset: 0; z-index: 1210;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: ccFadeIn .2s ease-out;
}
.cc-modal.is-open {
  display: flex; flex-direction: column;
  position: fixed; z-index: 1220;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: #fff;
  border: 1px solid rgba(201,150,74,.22);
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  overflow: hidden;
  animation: ccPopIn .25s ease-out;
}
@keyframes ccFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccPopIn  { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); }
                       to   { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cc-modal-overlay.is-open, .cc-modal.is-open { animation: none; }
}
.cc-modal-head {
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(123,74,30,.12);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.cc-modal-head h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 500;
  color: var(--m-espresso); line-height: 1.2;
}
.cc-modal-head p {
  margin-top: 6px;
  font-size: 12px; line-height: 1.65;
  color: var(--m-stone);
}
.cc-modal-close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid rgba(123,74,30,.2);
  color: var(--m-stone); font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
.cc-modal-close:hover {
  background: var(--m-walnut); border-color: var(--m-walnut);
  color: #fff;
}
.cc-modal-body {
  padding: 8px 28px;
  overflow-y: auto;
  flex: 1;
}
.cc-cat {
  padding: 16px 0;
  border-bottom: 1px solid rgba(123,74,30,.08);
}
.cc-cat:last-of-type { border-bottom: none; }
.cc-cat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 6px;
}
.cc-cat-name {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--m-charcoal);
}
.cc-cat-required {
  margin-left: 8px;
  font-size: 8.5px; letter-spacing: 1.5px;
  color: var(--m-bronze); font-weight: 600;
}
.cc-cat-desc {
  font-size: 12px; line-height: 1.65;
  color: var(--m-stone);
}

/* Switch toggle */
.cc-switch {
  position: relative; flex-shrink: 0;
  width: 42px; height: 24px;
  display: inline-block;
}
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-switch-track {
  position: absolute; inset: 0;
  background: rgba(123,74,30,.25);
  border-radius: 24px;
  transition: background .2s;
  cursor: pointer;
}
.cc-switch-track::before {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.cc-switch input:checked + .cc-switch-track {
  background: linear-gradient(135deg, var(--m-walnut), var(--m-caramel));
}
.cc-switch input:checked + .cc-switch-track::before { transform: translateX(18px); }
.cc-switch input:disabled + .cc-switch-track {
  opacity: .5; cursor: not-allowed;
}
.cc-switch input:focus-visible + .cc-switch-track {
  box-shadow: 0 0 0 3px rgba(221,185,106,.45);
}

.cc-modal-foot {
  padding: 18px 28px 22px;
  border-top: 1px solid rgba(123,74,30,.12);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  background: var(--m-parchment);
}
.cc-modal-foot .cc-btn-primary,
.cc-modal-foot .cc-btn-ghost {
  color: inherit;
}
.cc-modal-foot .cc-btn-primary { color: #fff; }
.cc-modal-foot .cc-btn-ghost {
  color: var(--m-walnut);
  border-color: rgba(123,74,30,.35);
}
.cc-modal-foot .cc-btn-ghost:hover {
  background: var(--m-walnut); color: #fff;
  border-color: var(--m-walnut);
}

@media (max-width: 600px) {
  .cc-banner-inner { padding: 18px 20px; gap: 18px; }
  .cc-banner-text { font-size: 12px; }
  .cc-banner-actions { width: 100%; }
  .cc-banner-actions .cc-btn { flex: 1; justify-content: center; min-height: 42px; }
  .cc-banner-actions .cc-btn-link { flex: 1 0 100%; text-align: center; }
  .cc-modal-head { padding: 20px 22px 16px; }
  .cc-modal-body { padding: 4px 22px; }
  .cc-modal-foot { padding: 16px 22px 18px; }
  .cc-modal-foot .cc-btn { flex: 1; justify-content: center; }
}


/* ═══ 9. FOOTER ═══ */
footer {
  background: var(--m-surface-alt); color: var(--m-on-body);
  border-top: 2px solid var(--m-caramel);
}
.footer-top {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px;
  padding: 60px 60px 48px; max-width: 1200px; margin: 0 auto;
}

.footer-brand-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-logo-wrap {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; margin-bottom: 20px;
}
.footer-logo {
  overflow: hidden; width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 50%;
}
.footer-logo img {
  width: 320px; height: 320px; object-fit: contain;
  flex-shrink: 0; opacity: 1;
}
.footer-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600; color: var(--m-gold-ink);
  letter-spacing: 6px; text-transform: uppercase; text-align: left;
}
.footer-sub {
  font-size: 7.5px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--m-on-mute); margin-top: 1px; text-align: left;
}
.footer-tagline {
  font-size: 11.5px; color: var(--m-on-body);
  line-height: 1.85; margin-bottom: 22px; text-align: left;
}
.footer-social { display: flex; gap: 10px; margin-top: auto; }
.footer-social a {
  width: 34px; height: 34px;
  border: 1px solid rgba(155,94,42,.30);
  display: flex; align-items: center; justify-content: center;
  color: var(--m-gold-ink); font-size: 12px;
  transition: all .25s;
}
.footer-social a:hover {
  background: var(--m-walnut); border-color: var(--m-walnut); color: var(--m-white);
}

.footer-col-title {
  font-size: 8px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
  color: var(--m-gold-ink);
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(155,94,42,.28);
}

.footer-nav { list-style: none; display: flex; flex-direction: column; }
.footer-nav li { border-bottom: 1px solid var(--m-hairline); }
.footer-nav a {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--m-on-body);
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  transition: color .2s, padding-left .2s;
}
.footer-nav a::before {
  content: ''; width: 4px; height: 1px; background: var(--m-caramel);
  display: inline-block; transition: width .2s; flex-shrink: 0;
}
.footer-nav a:hover, .footer-nav a.active {
  color: var(--m-gold-ink); padding-left: 4px;
}
.footer-nav a:hover::before, .footer-nav a.active::before { width: 8px; }

.footer-contact-list { display: flex; flex-direction: column; }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--m-hairline);
}
.footer-contact-item:first-child { padding-top: 0; }
.footer-contact-item:last-child  { border-bottom: none; }
.footer-contact-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1px solid rgba(155,94,42,.28);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.footer-contact-icon i { font-size: 11px; color: var(--m-gold-ink); }
.footer-contact-label {
  font-size: 7px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--m-gold-ink); display: block; margin-bottom: 4px;
}
.footer-contact-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: var(--m-on-body); line-height: 1.55;
  letter-spacing: 1.4px;
}
.footer-contact-value a { color: var(--m-on-body); transition: color .2s; }
.footer-contact-value a:hover { color: var(--m-gold-ink); }

/* ═══ SITEWIDE PHONE-NUMBER FONT STYLE ═══ */
/* Match the top-strip font everywhere the number appears.
   Plain-text contexts also take the strip's lighter colour;
   gold CTA buttons keep their own colour for contrast. */
.strip-left span,
.quick-value, .quick-value a {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,.55);
}
.btn-cta-gold, .btn-gold, .btn-policy-gold {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1.4px;
}
/* Inline phone links inside detailed contact / spa blocks
   (.contact-info-value, .ci-value also hold address/email —
   class the phone only so siblings keep their serif design). */
.tel-num {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1.4px;
}

.footer-bottom {
  border-top: 1px solid var(--m-hairline);
  padding: 18px 60px;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto;
  flex-wrap: wrap; gap: 10px;
}
.footer-copy { font-size: 9.5px; letter-spacing: 1px; color: var(--m-on-faint); }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a {
  font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--m-on-mute); transition: color .2s;
}
.footer-bottom-links a:hover { color: var(--m-gold-ink); }


/* ═══ 10. RESPONSIVE ═══ */

/* Footer responsive */
@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    padding: 44px 28px 36px;
  }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bottom { padding: 16px 28px; }
}
@media (max-width: 600px) {
  .footer-top {
    grid-template-columns: 1fr;
    padding: 36px 20px 28px; gap: 36px;
  }
  .footer-bottom {
    padding: 14px 20px;
    flex-direction: column; align-items: flex-start;
  }
}

/* Mobile nav layout: hamburger LEFT · logo CENTER · Book Now RIGHT */
@media (max-width: 1024px) {
  /* Force-hide desktop nav links */
  nav.main-nav .nav-left,
  nav.main-nav .nav-right-links,
  nav.main-nav .nav-brochure,
  .nav-brand-line,
  .nav-brand-line-r { display: none !important; }
  /* Reserve room for absolute hamburger left + Book Now right */
  nav.main-nav { padding-left: 64px; padding-right: 16px; }
  /* Hamburger absolute-left, vertically centered */
  .nav-hamburger {
    position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%);
    margin-left: 0; z-index: 1003;
  }
  /* Logo center — reset desktop left-align overrides */
  .nav-brand {
    flex: 1; justify-content: center;
    padding-left: 0; padding-right: 0;
    order: 0; margin-right: 0;
  }
  /* Book Now right — reset desktop grouping overrides */
  .nav-right { flex: 0 0 auto; margin-left: auto; padding-left: 0; order: 0; gap: 0; }
  .nav-book { margin-left: 0; flex-shrink: 0; }
  /* Top strip removed site-wide — responsive rules disabled.
  .top-strip { flex-wrap: nowrap; min-height: 36px; }
  .strip-left, .strip-right { white-space: nowrap; }
  .strip-right a { padding: 0 10px; }
  */
}

/* Tap target minimums (WCAG / Apple HIG) — 44px on phones */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  iframe, embed, object, video { max-width: 100%; }
  .nav-drawer a,
  .btn-primary, .btn-ghost, .btn-cta, .btn-outline,
  .btn-promo-gold, .btn-promo-outline, .btn-submit,
  .btn-book-now, .btn-dining-reserve, .btn-gold,
  .nav-book, .filter-tab, .gal-tab, .room-tab, .dining-tab,
  .tc-book, .rc-btn, .rc-btn-outline, .offer-btn { min-height: 44px; }
  .footer-contact-value, .ci-value { word-break: break-word; }
  /* iOS Safari auto-zooms inputs with font-size <16px */
  input, select, textarea,
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
  /* Hero min-height bump (avoids cramped text on phones) */
  .page-hero { min-height: 390px; }
  .page-hero-content { padding-bottom: 36px; padding-left: 24px; padding-right: 24px; }
  .breadcrumb { padding: 12px 24px; }
}

/* Hide top strip social link on tiny phones */
@media (max-width: 600px) {
  .strip-right a:nth-child(2),
  .strip-right a:nth-child(3) { display: none; }
}

/* Tablet middle-step: 3-col grids drop to 2-col instead of jumping to 1-col */
@media (min-width: 768px) and (max-width: 960px) {
  .intro-stats, .quick-grid, .sec-gallery-strip, .amenity-grid,
  .offers-grid, .policies, .services-grid, .treatments-grid,
  .values-grid, .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Landscape phone: cap hero so it doesn't fill the whole viewport */
@media (max-height: 500px) and (orientation: landscape) {
  .page-hero, .hero, .sec-hero { max-height: 90vh; min-height: 280px; }
}

/* Very narrow phones: tighten section CTA padding */
@media (max-width: 480px) {
  .sec-cta, .sec-intro { padding-left: 18px; padding-right: 18px; }
}


/* ═══ Sitewide Weather Crystal (attached to hero banner, right-middle) ════
   Small frosted-glass crystal showing current Indore weather. Injected by
   main.js INSIDE the .page-hero / .hero / .sec-hero element so it scrolls
   away with the banner instead of floating sitewide. Anchored to the
   right edge of the hero, vertically centred. Click to expand into a
   wider card with humidity + wind + "feels like". Respects
   prefers-reduced-motion and hides on very narrow phones. */
.weather-crystal {
  position: absolute;
  right: 18px;
  top: 64%;
  transform: translateY(-50%);
  z-index: 5;
  /* Crystal facet — multi-layer gradient for the gemstone feel */
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 45%, rgba(201,150,74,.18) 100%),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.65), transparent 55%),
    rgba(46, 30, 18, 0.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(46,30,18,.22),
    0 2px 8px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(46,30,18,.18);
  color: #fff;
  padding: 10px 8px;
  width: 64px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  font-family: var(--font-sans, 'Montserrat', sans-serif);
  transition: width .35s cubic-bezier(.2,.7,.2,1), padding .35s ease, transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
  /* Slow shimmer so the crystal feels alive (purely cosmetic) */
  animation: crystalShimmer 6s ease-in-out infinite;
}
.weather-crystal:hover,
.weather-crystal:focus-visible {
  outline: none;
  /* Right-anchored: nudge inward (to the left) on hover */
  transform: translateY(-50%) translateX(-2px) scale(1.03);
  box-shadow:
    0 14px 38px rgba(46,30,18,.28),
    0 4px 12px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.weather-crystal[hidden] { display: none; }

/* Compact (default) layout — icon over temp over city */
.weather-crystal .wc-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.weather-crystal .wc-row > div {
  display: flex; flex-direction: column; align-items: center;
}
.weather-crystal .wc-icon {
  font-size: 20px;
  line-height: 1;
  color: #ffd98a;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.weather-crystal .wc-temp {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* City label: shown in BOTH compact and expanded states */
.weather-crystal .wc-city {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  opacity: .9;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* Condition + meta only render when expanded */
.weather-crystal .wc-cond,
.weather-crystal .wc-meta { display: none; }

/* Expanded state — wider card with full details */
.weather-crystal.is-expanded {
  width: 200px;
  padding: 14px 16px;
  text-align: left;
  cursor: default;
}
.weather-crystal.is-expanded .wc-row {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
}
.weather-crystal.is-expanded .wc-row > div {
  display: block; align-items: initial;
}
.weather-crystal.is-expanded .wc-icon { font-size: 32px; }
.weather-crystal.is-expanded .wc-temp {
  margin-top: 0;
  font-size: 26px;
  font-weight: 600;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  letter-spacing: .01em;
}
.weather-crystal.is-expanded .wc-city {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 2px;
}
.weather-crystal.is-expanded .wc-cond {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  opacity: .92;
  text-transform: capitalize;
}
.weather-crystal.is-expanded .wc-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: 11px;
  opacity: .9;
}
.weather-crystal.is-expanded .wc-meta span { display: block; }
.weather-crystal.is-expanded .wc-meta b {
  display: block; font-weight: 600; font-size: 12px; margin-top: 1px;
}
.weather-crystal .wc-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: 0; color: #fff;
  font-size: 14px; line-height: 1; padding: 4px;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.weather-crystal.is-expanded .wc-close { opacity: .85; pointer-events: auto; }
.weather-crystal .wc-close:hover { opacity: 1; }

@keyframes crystalShimmer {
  0%,100% { box-shadow: 0 10px 30px rgba(46,30,18,.22), 0 2px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(46,30,18,.18); }
  50%     { box-shadow: 0 12px 34px rgba(46,30,18,.26), 0 3px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7),  inset 0 -1px 0 rgba(46,30,18,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .weather-crystal { animation: none; transition: none; }
}

/* On tablets, sit slightly closer to the edge */
@media (max-width: 1024px) {
  .weather-crystal { right: 12px; }
  .weather-crystal.is-expanded { width: 180px; }
}
/* On phones, hide entirely — the bottom mobile-bar + WhatsApp FAB already
   crowd the viewport and a left-side widget would conflict with side-swipe
   gestures and the hamburger drawer's left edge. */
@media (max-width: 720px) {
  .weather-crystal { display: none; }
}

/* ═══ BOOKING BAR (hero overlay — index.html + skyline.html) ═══ */
/* On booking-bar heroes, lift the title clear of the form. The bar is
   pinned to the hero's base and grows taller when Fold 2 opens, so reserve
   extra room in that state and glide the title up in step with the bar so
   the "MIRAYA" heading is never covered. Desktop fold-2 bar ≈ 237px. */
.page-hero:has(.booking-bar) .page-hero-content {
  padding-bottom: 210px;
  transition: padding-bottom .5s cubic-bezier(.22,1,.36,1);
}
.page-hero:has(.booking-bar:not(.bb-fold1)) .page-hero-content { padding-bottom: 285px; }
@media (prefers-reduced-motion: reduce) {
  .booking-bar, .booking-bar .bb-field, .bb-fold2 { animation: none !important; }
  .bb-grid, .bb-fold2 { transition: none !important; }
}

.booking-bar {
  position: absolute; left: 50%; bottom: 0;
  /* Attached flush to the hero banner's bottom edge. */
  transform: translateX(-50%);
  z-index: 6; width: min(1180px, calc(100% - 48px));
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 26px;
  background: rgba(18, 11, 5, .01);
  border: 1px solid rgba(255,255,255,.18);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.30);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  animation: bbRise .7s cubic-bezier(.22,1,.36,1) .5s both;
  will-change: transform, opacity;
}
@keyframes bbRise {
  from { opacity: 0; transform: translate(-50%, 26px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Let the bar overhang the hero instead of being clipped, and reserve
   space — form now sits inside the hero (no overhang). */
.page-hero:has(.booking-bar) { overflow: hidden; }

/* ── Fold layout via CSS grid ─────────────────────────────────────
   Fold 1: Place | Hotel | CTA  (3 columns)
   Fold 2: + Check-in/out/Rooms/Promo wrap onto a second row.    */
.bb-grid {
  display: grid;
  grid-template-columns:
    minmax(170px, 1fr) minmax(170px, 1fr)
    minmax(150px, .9fr) minmax(150px, .9fr) minmax(155px, 1fr)
    auto;
  gap: 16px 16px;
  align-items: start;   /* labels/inputs align at the top → consistent rows */
}
.bb-field {
  display: flex; flex-direction: column; min-width: 0;
  grid-column: span 1;
}
/* All field labels share a fixed height so every input starts level */
.bb-field label { min-height: 13px; }
/* Fold-1 placement: Place + Hotel left, CTA far right */
.bb-f-place { grid-column: 1 / 3; }
.bb-f-hotel { grid-column: 3 / 6; }
.bb-f-cta   {
  grid-column: 6 / 7; grid-row: 1 / 3;
  align-self: stretch;          /* fill the 2-row span */
  justify-content: flex-end;    /* keep Book Now bottom-aligned */
}
/* Fold-2 detail fields take the lower row */
.bb-f-ci     { grid-column: 1 / 2; grid-row: 2; }
.bb-f-co     { grid-column: 2 / 3; grid-row: 2; }
.bb-f-guests { grid-column: 3 / 5; grid-row: 2; }
.bb-f-promo  { grid-column: 5 / 6; grid-row: 2; }

/* Fold-2 elements: hidden + collapsed until both Place & Hotel chosen */
.bb-fold2 {
  opacity: 1; max-height: 120px; overflow: visible;
  transform: translateY(0);
  transition: opacity .45s ease .05s,
              max-height .5s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.22,1,.36,1),
              margin .45s cubic-bezier(.22,1,.36,1);
}
.booking-bar.bb-fold1 .bb-fold2 {
  opacity: 0; max-height: 0; overflow: hidden;
  transform: translateY(14px);
  margin: 0; pointer-events: none;
}
/* Collapse the empty 2nd grid row in fold-1 so there's no dead gap */
.bb-grid { transition: row-gap .5s cubic-bezier(.22,1,.36,1); }
.booking-bar.bb-fold1 .bb-grid { row-gap: 0; }
.booking-bar.bb-fold1 .bb-f-cta { grid-row: 1; }

.bb-field label {
  font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; margin-bottom: 7px; padding-left: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.bb-input {
  display: flex; align-items: center; gap: 9px;
  /* Fixed height (not padding) so selects, text inputs, the date fields
     and the guests button all render exactly the same box. */
  height: 44px;
  padding: 0 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px;
  position: relative;
  transition: border-color .2s, background .2s;
}
.bb-input:focus-within {
  border-color: rgba(201,150,74,.85);
  background: rgba(0,0,0,.32);
}
.bb-input i { font-size: 12px; color: var(--m-honey); flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.bb-input input,
.bb-input select {
  flex: 1; width: 100%; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-size: 13px; letter-spacing: .5px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* Only the <select> gets appearance:none (custom caret).
   Date inputs MUST keep their native picker — do NOT strip it. */
.bb-input select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.bb-input input[type="date"] {
  cursor: pointer; min-height: 0;
}
.bb-input select:disabled { color: rgba(255,255,255,.7); cursor: not-allowed; }
.bb-input input::placeholder { color: rgba(255,255,255,.75); }
/* Make the whole date field clickable to open the picker, not just the icon */
.bb-input input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.75);
  cursor: pointer;
  position: absolute; right: 0; left: 0; top: 0; bottom: 0;
  width: auto; height: auto; margin: 0;
  opacity: 0;
}
.bb-input select option { background: var(--m-espresso); color: #fff; }
.bb-input select option[disabled] { color: rgba(255,255,255,.4); }
.bb-caret {
  position: absolute; right: 12px; pointer-events: none;
  font-size: 10px !important;
}

/* CTA column — Book Now persists in both folds */
.bb-f-cta { display: flex; flex-direction: column; justify-content: flex-end; }
.bb-rate {
  font-size: 11px; letter-spacing: 1px;
  color: #fff; margin-bottom: 7px; white-space: nowrap; text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
/* Price acts as a link to the booking engine (live rates) */
.bb-rate-link {
  background: none; border: 0; padding: 0; width: 100%;
  font-family: 'Montserrat', sans-serif; cursor: pointer;
  transition: color .2s;
}
.bb-rate-link:hover { color: var(--m-honey); text-decoration: underline; }
.bb-book {
  width: 100%; height: 44px; padding: 0 34px;
  background: linear-gradient(135deg, var(--m-walnut) 0%, var(--m-caramel) 100%);
  border: 1px solid var(--m-caramel); color: #fff;
  border-radius: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; transition: opacity .25s, transform .15s, box-shadow .25s;
}
.bb-book:hover {
  opacity: .94; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(184,119,47,.4);
}
.bb-book:active { transform: translateY(0); }
.bb-cta-links {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 8px;
}
.bb-sublink {
  font-size: 10px; letter-spacing: .6px;
  color: #fff; text-decoration: none;
  transition: color .2s; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
.bb-sublink:hover { color: var(--m-honey); text-decoration: underline; }
/* Manage Booking → brand caramel */
.bb-cta-links .bb-sublink {
  color: var(--m-caramel); font-weight: 600;
}
.bb-cta-links .bb-sublink:hover { color: var(--m-honey); }

/* "Why Book Direct?" sits in-flow directly below the Hotel field */
.bb-f-hotel { position: relative; }
.bb-why {
  align-self: flex-start;
  margin-top: 7px;
  font-size: 10px; letter-spacing: .6px;
}

/* ── Book Now alignment ───────────────────────────────────────────
   The CTA column spans both grid rows and bottom-aligns, so the
   "Manage Booking" line underneath was pushing the button 18px above
   the bottom row of inputs. Take that line out of flow and the button
   bottom lands exactly on the row-2 input bottom.
   Desktop only — at <=1024px the CTA becomes its own full-width row. */
@media (min-width: 1025px) {
  .bb-f-cta { position: relative; }
  .bb-cta-links {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 12px;              /* matches .booking-bar's 12px row gap,
                                      so it sits level with "Show Less" */
  }
  /* Fold 1: row 1 is taller than its inputs (the "Why Book Direct?"
     link hangs below), so bottom-aligning would drop the button too low.
     Top-align instead and stand in for the field label band. */
  .booking-bar.bb-fold1 .bb-f-cta {
    align-self: start;
    justify-content: flex-start;
    padding-top: 20px;             /* label 13px + its 7px margin */
  }
}

.bb-toggle {
  align-self: flex-start;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; letter-spacing: .8px; font-weight: 600;
  color: var(--m-caramel); display: inline-flex; align-items: center; gap: 6px;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  transition: color .2s, opacity .3s ease, max-height .35s ease;
}
.bb-toggle.bb-fold2 { max-height: 22px; }
.booking-bar.bb-fold1 .bb-toggle { max-height: 0; opacity: 0; pointer-events: none; }
.bb-toggle:hover { color: var(--m-honey); }
.bb-toggle i { font-size: 11px; }

/* ── Rooms & Guests trigger + popup modal ───────────────────────── */
.bb-guests-trigger {
  width: 100%; cursor: pointer; text-align: left;
  font-family: 'Montserrat', sans-serif;
}
.bb-guests-trigger span {
  flex: 1; color: #fff; font-size: 13px; letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.bb-modal-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 9, 4, .6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 20px;
  animation: bbModalFade .25s ease both;
}
.bb-modal-overlay[hidden] { display: none; }
@keyframes bbModalFade { from { opacity: 0; } to { opacity: 1; } }
.bb-modal {
  width: min(420px, 100%);
  max-height: min(85vh, 620px);
  display: flex; flex-direction: column;
  background: #fff; color: var(--m-charcoal);
  border: 2px solid var(--m-bronze);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  overflow: hidden;
  animation: bbModalPop .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes bbModalPop {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bb-modal-head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.bb-modal-head h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600; color: var(--m-charcoal); margin: 0;
}
.bb-modal-close {
  background: none; border: 0; cursor: pointer;
  font-size: 16px; color: var(--m-stone); padding: 4px;
  transition: color .2s;
}
.bb-modal-close:hover { color: var(--m-walnut); }
.bb-modal-body {
  flex: 1 1 auto; min-height: 0;
  padding: 18px 24px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bb-modal-rooms-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
}
.bb-modal-rooms-top > span {
  font-size: 14px; font-weight: 500; color: var(--m-charcoal);
}
.bb-room-block {
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 16px 0;
}
.bb-room-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--m-walnut);
  margin-bottom: 14px;
}
.bb-room-remove {
  background: none; border: 0; cursor: pointer;
  font-size: 11px; color: var(--m-stone); letter-spacing: .5px;
  transition: color .2s;
}
.bb-room-remove:hover { color: #b3402f; }
.bb-room-controls { display: flex; gap: 20px; flex-wrap: wrap; }
.bb-room-controls > div { flex: 1 1 130px; min-width: 0; }
.bb-room-controls label {
  display: block; font-size: 12px; color: var(--m-stone); margin-bottom: 8px;
}
.bb-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(0,0,0,.18); border-radius: 3px;
  overflow: hidden;
}
.bb-stepper button {
  width: 32px; height: 32px; border: 0; cursor: pointer;
  background: #f4f1ec; color: var(--m-walnut);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.bb-stepper button:hover:not(:disabled) { background: var(--m-bronze); color: #fff; }
.bb-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.bb-step-val {
  min-width: 38px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--m-charcoal);
}
.bb-add-room {
  background: none; border: 0; cursor: pointer;
  color: var(--m-bronze); font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  padding: 14px 0 4px; transition: color .2s;
}
.bb-add-room:hover { color: var(--m-walnut); }
.bb-add-room:disabled { opacity: .4; cursor: not-allowed; }
.bb-modal-foot {
  flex-shrink: 0;
  display: flex; justify-content: flex-end;
  padding: 16px 24px; border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
.bb-modal-done {
  padding: 11px 30px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--m-walnut) 0%, var(--m-caramel) 100%);
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  border-radius: 3px; transition: opacity .2s, transform .15s;
}
.bb-modal-done:hover { opacity: .92; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .bb-modal-overlay, .bb-modal { animation: none !important; }
}
@media (max-width: 480px) {
  .bb-room-controls { gap: 14px; }
  .bb-modal-body { max-height: 60vh; }
}

/* Booking bar occupies the hero base — retire the scroll hint there */
.page-hero:has(.booking-bar) .hero-scroll-hint { display: none; }

/* Tablet — collapse to a flexible 2-col grid */
@media (max-width: 1024px) {
  .booking-bar { bottom: 0; width: calc(100% - 24px); padding: 20px 18px; }
  .bb-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
  }
  .bb-f-place  { grid-column: 1; grid-row: 1; }
  .bb-f-hotel  { grid-column: 2; grid-row: 1; }
  .bb-f-ci     { grid-column: 1; grid-row: 2; }
  .bb-f-co     { grid-column: 2; grid-row: 2; }
  .bb-f-guests { grid-column: 1; grid-row: 3; }
  .bb-f-promo  { grid-column: 2; grid-row: 3; }
  .bb-f-cta    { grid-column: 1 / 3; grid-row: 4; }
  .booking-bar.bb-fold1 .bb-f-cta { grid-row: 2; }
  /* Stacked 2-col fold-2 bar is much taller (≈ 403px) — reserve for it */
  .page-hero:has(.booking-bar:not(.bb-fold1)) .page-hero-content { padding-bottom: 448px; }
}
/* Phone — booking form hidden on mobile */
@media (max-width: 680px) {
  .booking-bar,
  .bb-modal-overlay { display: none !important; }
  /* No form on the hero now — restore normal title spacing (both fold states) */
  .page-hero:has(.booking-bar) .page-hero-content,
  .page-hero:has(.booking-bar:not(.bb-fold1)) .page-hero-content { padding-bottom: 30px; }
}