/* ══════════════════════════════════════════════════════════════════════════
   Hospitality Luxe — Mobile Polish Layer (v4.0)
   Loaded LAST after main.css, premium.css, theme-fixes.css and
   theme-fixes-v2.css. Its only job is to consolidate mobile-only fixes
   and refinements — no redesign, no desktop change.

   Sections
   ──────────
   1. Mobile header: hamburger LEFT, logo CENTER, account icon RIGHT.
   2. Mobile drawer: compact spacing, luxury feel, scroll-lock backdrop.
   3. Room-card footer overflow guards.
   4. Section rhythm.
   5. Sticky mobile CTA (○ Call — BOOK NOW pill — ○ WhatsApp), with
      per-page + per-overlay visibility rules.
   6. Calm, GPU-only mobile animations.
   7. Font-swap stability.
   8. Touch targets + safe areas.
═══════════════════════════════════════════════════════════════════════════ */

/* ── screen-reader-only helper (used by sticky CTA circle labels) ── */
.hl-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── 1. HEADER (mobile) ─────────────────────────────────────────────────── */
.hl-header__inner { min-height: 64px; }
.hl-logo {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hl-logo__img {
  display: block !important;
  height: auto !important;
  max-height: 44px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* Account icon — desktop hidden, mobile visible */
.hl-header__account {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hl-header__account:hover,
.hl-header__account:focus-visible {
  background: rgba(255,255,255,0.06);
  color: var(--hl-gold-light, #c9a96e);
}
.hl-header__account:active { transform: scale(0.94); }

@media (max-width: 900px) {
  /* Three-column mobile header: hamburger | logo | account
     hl-header__actions uses display:contents so its children
     participate directly as grid items.                              */
  .hl-header__inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    gap: 0.5rem !important;
    height: 64px !important;
    padding-inline: clamp(0.9rem, 3.5vw, 1.15rem) !important;
    padding-left: max(clamp(0.9rem, 3.5vw, 1.15rem), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(0.9rem, 3.5vw, 1.15rem), env(safe-area-inset-right)) !important;
  }
  .hl-header__actions { display: contents !important; }

  .hl-logo {
    grid-column: 2;
    justify-self: center !important;
  }
  /* Logo ~18% larger on mobile per spec, header height unchanged. */
  .hl-logo__img { max-height: 48px !important; }
  .hl-logo__text { font-size: 1.35rem !important; }

  .hl-hamburger {
    grid-column: 1;
    justify-self: start;
    order: -1;
    margin: 0 !important;
  }
  .hl-header__account {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
  }

  .hl-main { padding-top: 64px !important; }
}

/* ── 2. MOBILE DRAWER ───────────────────────────────────────────────────── */
/* Reset any conflicting main.css blocks. Left-side drawer that slides in
   from the LEFT (matches the hamburger's position) and stays above
   everything.                                                             */
.hl-mobile-menu {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  width: min(340px, 88vw) !important;
  max-height: none !important;
  height: 100svh !important;
  background: rgba(15, 12, 10, 0.98) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid rgba(201, 169, 110, 0.14);
  border-left: none;
  box-shadow: 24px 0 60px -20px rgba(0, 0, 0, 0.5);
  z-index: 1200 !important;
  transform: translate3d(-100%, 0, 0);
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: visible;
}
.hl-mobile-menu.is-open { transform: translate3d(0, 0, 0) !important; }

.hl-mobile-menu__inner {
  padding: calc(64px + 1rem) 1.5rem calc(1.5rem + env(safe-area-inset-bottom)) !important;
  padding-left: max(1.5rem, env(safe-area-inset-left)) !important;
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
  gap: 0;
}

.hl-mobile-nav {
  list-style: none;
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
}
.hl-mobile-nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hl-mobile-nav li:last-child { border-bottom: none; }

/* Reduce vertical spacing ~35–40% vs previous 1rem 0 → 0.6rem 0 */
.hl-mobile-nav a {
  display: block;
  padding: 0.6rem 0 !important;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none;
  transition: color 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 44px;
  line-height: 1.35;
}
.hl-mobile-nav a:hover,
.hl-mobile-nav a:focus-visible,
.hl-mobile-nav .current-menu-item > a {
  color: var(--hl-gold-light, #c9a96e) !important;
  transform: translateX(4px);
  padding-left: 0 !important;
}

.hl-mobile-menu__actions {
  margin-top: auto !important;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.hl-mobile-menu__actions .hl-btn { min-height: 48px; }
.hl-mobile-menu__phone {
  justify-content: center;
  margin-top: 0.25rem !important;
}

/* Overlay — above page, below drawer */
.hl-mobile-overlay {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 8, 6, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1100 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 320ms;
}
.hl-mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Hamburger sits above overlay/drawer */
.hl-header { z-index: 1300 !important; }
.hl-hamburger { position: relative; z-index: 1301; min-width: 44px; min-height: 44px; }

/* Lock body scroll when drawer is open */
body.hl-menu-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ── 3. ACCOMMODATION CARD: never clip "View Room" ──────────────────────── */
.hl-room-card { overflow: hidden; }
.hl-room-card__body { overflow: visible !important; }
.hl-room-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  flex-wrap: nowrap !important;
}
.hl-room-card__footer .hl-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding-inline: 1rem !important;
  min-height: 40px;
}
@media (max-width: 640px) {
  .hl-room-card__body { padding: 1.25rem !important; }
  .hl-room-card__footer { padding-top: 1rem !important; gap: 0.5rem !important; }
  .hl-room-card__footer .hl-btn { font-size: 0.72rem !important; padding: 0.55rem 0.9rem !important; }
  .hl-room-card__price { min-width: 0; }
  .hl-room-card__price-amount { font-size: 1.3rem !important; }
}
@media (max-width: 380px) {
  .hl-room-card__footer { flex-wrap: wrap !important; justify-content: flex-start !important; }
  .hl-room-card__footer .hl-btn { width: 100%; justify-content: center; }
}
.hl-rooms-grid--slider .hl-room-card { overflow: hidden; scroll-snap-align: start; }
.hl-rooms-grid { scroll-padding-inline: var(--hl-pad, 1.25rem); }

/* ── 4. Section rhythm ──────────────────────────────────────────────────── */
.hl-rooms-section__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem) !important;
  display: flex;
  justify-content: center;
}
@media (max-width: 900px) { .hl-rooms-section__cta { margin-top: 3rem !important; } }
@media (max-width: 640px) { .hl-rooms-section__cta { margin-top: 2.5rem !important; } }
.hl-gallery-teaser__cta,
.hl-blog-preview .hl-section-header + * { margin-top: clamp(2rem, 4vw, 3rem); }

/* ══════════════════════════════════════════════════════════════════════════
   5. STICKY MOBILE CTA  (Call ○  BOOK NOW  ○ WhatsApp)
   Rendered by template-parts/floating-buttons.php.
   Premium floating glass dock — no solid pill, only a soft blurred
   backdrop behind the three buttons.
═══════════════════════════════════════════════════════════════════════════ */
.hl-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  padding: 14px
           clamp(0.85rem, 4vw, 1.25rem)
           calc(16px + env(safe-area-inset-bottom))
           clamp(0.85rem, 4vw, 1.25rem);
  padding-left: max(clamp(0.85rem, 4vw, 1.25rem), env(safe-area-inset-left));
  padding-right: max(clamp(0.85rem, 4vw, 1.25rem), env(safe-area-inset-right));
  background: transparent;
  pointer-events: none;
  transform: translate3d(0, 120%, 0);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  isolation: isolate;
}
/* Frosted-glass WALL as a pseudo-element so its fade mask doesn't
   bleed into the buttons above. White translucent wall that lets
   the blurred page visuals show through (no dark tint). */
.hl-sticky-cta::before {
  content: "";
  position: absolute;
  /* Extend the wall well above the button row so the soft blur fade
     lives high above the CTAs — buttons stay perfectly centered on a
     clean glass panel instead of touching the blurred edge. */
  inset: -40px 0 0 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.60) 45%,
    rgba(255, 255, 255, 0.30) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-mask-image: linear-gradient(to top, #000 72%, rgba(0,0,0,0.55) 90%, transparent 100%);
  mask-image: linear-gradient(to top, #000 72%, rgba(0,0,0,0.55) 90%, transparent 100%);
  box-shadow: none;
  pointer-events: none;
}
.hl-sticky-cta.is-visible {
  transform: translate3d(0, 0, 0);
}
.hl-sticky-cta.is-visible .hl-sticky-cta__row { pointer-events: auto; }
.hl-sticky-cta__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 560px;
  margin-inline: auto;
  padding: 0;
  /* No pill: buttons hang directly on the frosted wall behind them. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Circular side buttons */
.hl-sticky-cta__circle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 260ms ease,
              box-shadow 260ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hl-sticky-cta__circle svg { display: block; }
.hl-sticky-cta__circle--call {
  background: linear-gradient(135deg, #2b221b 0%, #3a2d24 100%);
}
.hl-sticky-cta__circle--wa {
  background: linear-gradient(135deg, #1fa855 0%, #128c46 100%);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.hl-sticky-cta__circle:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .hl-sticky-cta__circle--call:hover { background: rgba(255,255,255,0.12); }
  .hl-sticky-cta__circle--wa:hover   { filter: brightness(1.05); }
}

/* Centered dominant pill */
.hl-sticky-cta__book {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg,
              var(--hl-gold, #c9a96e) 0%,
              var(--hl-gold-dark, #a58252) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: none;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 260ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hl-sticky-cta__book:active {
  transform: scale(0.98);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .hl-sticky-cta__book:hover {
    transform: translateY(-1px);
    box-shadow: none;
    filter: brightness(1.03);
  }
}

/* Show sticky CTA only on mobile + standard pages */
@media (max-width: 900px) {
  .hl-sticky-cta { display: block; }

  /* Standard pages: floating Call + WhatsApp move INTO the sticky bar,
     so hide the floating cluster. On the Room Booking page below, we
     invert this rule so the floating buttons stay visible.            */
  body:not(.hl-page-booking) .hl-floating-btns { display: none !important; }

  /* Push page bottom above the sticky bar */
  body:not(.hl-page-booking) {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* Duplicate desktop CTA-banner "Call Us" — hide on phones */
  .hl-cta-banner__actions .hl-btn--ghost-light { display: none; }
}
@media (max-width: 900px) and (display-mode: standalone) {
  body:not(.hl-page-booking) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ══ Room Booking page: hide sticky, keep floating Call + WhatsApp ══════ */
body.hl-page-booking .hl-sticky-cta { display: none !important; }

@media (max-width: 900px) {
  body.hl-page-booking .hl-floating-btns {
    display: flex !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 14px !important;
    flex-direction: column;
  }
  /* Booking page order per spec: Call on top, WhatsApp below */
  body.hl-page-booking .hl-float-btn--call { order: 1; }
  body.hl-page-booking .hl-float-btn--wa   { order: 2; }
}

/* ══ Hide sticky + floating buttons during full-screen / modal states ══ */
body.hl-menu-open .hl-sticky-cta,
body.hl-menu-open .hl-floating-btns,
body.glightbox-open .hl-sticky-cta,
body.glightbox-open .hl-floating-btns,
body.hl-modal-open .hl-sticky-cta,
body.hl-modal-open .hl-floating-btns,
body.hl-lightbox-open .hl-sticky-cta,
body.hl-lightbox-open .hl-floating-btns {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0, 120%, 0) !important;
  pointer-events: none !important;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms;
}

/* ── 6. Calm, GPU-only mobile animations ────────────────────────────────── */
@media (max-width: 900px) {
  .reveal-up, .reveal-left, .reveal-right {
    transform: translate3d(0, 14px, 0) !important;
    transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 760ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, transform;
  }
  .reveal-left  { transform: translate3d(-14px, 0, 0) !important; }
  .reveal-right { transform: translate3d(14px, 0, 0) !important; }
  .reveal-up.revealed,
  .reveal-left.revealed,
  .reveal-right.revealed { transform: translate3d(0, 0, 0) !important; }

  .hl-room-card, .hl-exp-card, .hl-offer-card, .hl-blog-card {
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 520ms ease !important;
  }
  .hl-room-card:hover, .hl-exp-card:hover { transform: none !important; }
  .hl-room-card:active { transform: scale(0.995) !important; }

  img[loading="lazy"] {
    opacity: 0;
    transition: opacity 520ms ease;
  }
  img[loading="lazy"].is-loaded,
  img[loading="lazy"].hl-loaded { opacity: 1; }

  .hl-btn {
    transition: background-color 260ms ease,
                color 260ms ease,
                transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 260ms ease !important;
  }
  .hl-btn:active { transform: scale(0.98) !important; }

  .hl-gallery-slider,
  .hl-gallery-track,
  .hl-rooms-grid {
    -webkit-overflow-scrolling: touch;
    /* No scroll-snap on the whole horizontal rail — snap was fighting
       the user's finger when they tried to stop mid-scroll, producing
       the up/down jerk. Keep momentum scrolling, drop the snap. */
    scroll-snap-type: none;
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
  }

  /* Native touch scrolling only — CSS smooth scroll on <html> made the
     page briefly overshoot & correct when the user lifted their finger.
     Kill it on touch devices. JS anchor scrolls handle their own easing. */
  html { scroll-behavior: auto !important; }
  html, body { overflow-x: hidden; }

  /* Promote body to its own compositor layer while scrolling so paints
     stay on the GPU and the page tracks the finger 1:1. */
  body { -webkit-overflow-scrolling: touch; }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hl-mobile-menu,
  .hl-sticky-cta,
  .hl-sticky-cta__book,
  .hl-sticky-cta__circle,
  .reveal-up, .reveal-left, .reveal-right {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. TESTIMONIAL CAROUSEL INDICATORS — refined minimal dots
   Small circular dots with lower opacity; active dot fades to full gold.
   GPU-only transitions (transform + opacity), no width morph.
   High-specificity overrides beat legacy main.css "line" style.
═══════════════════════════════════════════════════════════════════════════ */
.hl-testimonials .hl-testi-dots,
.hl-testi-dots {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px !important;
  padding: 0;
}
.hl-testimonials .hl-testi-dot,
.hl-testi-dot,
button.hl-testi-dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  opacity: 0.28;
  transform: scale(1);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 320ms ease,
              background-color 320ms ease !important;
  will-change: transform, opacity;
}
.hl-testimonials .hl-testi-dot:hover,
.hl-testi-dot:hover,
.hl-testi-dot:focus-visible {
  opacity: 0.6;
  outline: none;
}
#testi-dots .hl-testi-dot.active,
.hl-testimonials .hl-testi-dot.active,
.hl-testi-dot.active,
button.hl-testi-dot.active {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  transform: none !important;
  background: var(--hl-gold, #c9a96e) !important;
}
@media (max-width: 640px) {
  .hl-testimonials__nav { gap: 1rem !important; margin-top: 1.25rem !important; }
  #testi-dots.hl-testi-dots { gap: 10px !important; }
  #testi-dots .hl-testi-dot,
  #testi-dots .hl-testi-dot.active,
  .hl-testimonials .hl-testi-dot,
  .hl-testi-dot,
  .hl-testimonials .hl-testi-dot.active,
  .hl-testi-dot.active {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-testi-dot { transition: opacity 200ms ease !important; }
  .hl-testi-dot.active { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. STATS BAR (intro strip) — no reveal animation on mobile.
   Scrolling back and forth near the hero was triggering an in/out
   transform on these tiles, causing a perceptible "snap". Skip the
   reveal on this row only; the rest of the page keeps its reveals.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hl-intro-strip .reveal-up,
  .hl-intro-strip .reveal-left,
  .hl-intro-strip .reveal-right,
  .hl-intro-strip__item.reveal-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .hl-intro-strip,
  .hl-intro-strip__grid {
    /* Isolate paint so the row cannot cause layout thrash while the
       hero image above is still settling on first scroll. */
    contain: layout paint;
    transform: translateZ(0);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. HERO BOOKING WIDGET — mobile polish
   Softer card, tighter type, more breathable padding, subtle gold accent
   on the search button. Keeps the existing 2-col + full-width button grid.

   This is the single, canonical booking-widget implementation for mobile —
   previously 8 separate override passes (v3.13 through v3.13.8) redefined
   this same widget further down the file, fighting each other via cascade
   order. Those have been consolidated/removed; see the NOTE comments left
   at each old version header for where they used to live.

   Revision log vs. the original design:
     1. Card opacity: 0.72 → 0.92 → now 0.77. 0.92 read too opaque/solid for
        a "frosted glass" card; 0.77 lets more of the hero photo show
        through while blur(20px) + saturate(160%) keep it frosted. Label
        and value text were made bolder + darker (below) to compensate, so
        legibility doesn't suffer at the lower opacity.
     2. Check-in / Check-out are equal-width and now stretch across the
        FULL row — grid-template-columns simplified from `1fr 1fr 46px` to
        `1fr 1fr`. The old 3rd column reserved space for the submit button
        in row 1 even though nothing sat there, leaving a dead gap to the
        right of Check-out. The submit button now lives in its own cell in
        row 2 only, pinned to the right edge (justify-self: end), so it
        lands flush under Check-out's right edge — every edge in the
        widget now lines up on the same two columns, with no empty space.
     3. Both fields get an identical accent border tracing the bottom +
        right edges only (top/left stay bare) — the "mirrored L" look,
        in a warm gold pulled from the search button's gradient tone.
        Root cause of why only Check-in ever got this before: the two
        `.hl-search-bar__divider` <div>s sitting between the fields in
        the markup still count towards :nth-of-type, even though
        `display:none` hides them — so Check-in/Check-out/Guests are
        actually DOM div-positions 1 / 3 / 5, not 1 / 2 / 3. The old
        `:nth-of-type(2)` rule here matched nothing (position 2 is a
        divider, not a field), and meanwhile theme-fixes.css /
        theme-fixes-v2.css's `div:nth-of-type(3)` rule (higher
        specificity, never removed) WAS correctly hitting Check-out —
        but with only a border-bottom and no border-right, and a stray
        border-bottom on Guests too. Fixed at the source below by using
        the correct 1 / 3 / 5 positions with !important, so this file is
        the true single source of truth regardless of what those older
        rules still say.
     4. Check-in / Check-out values now use the site's display serif
        (Cormorant Garamond) for a more premium date treatment.

   Revision log — round 2 (client polish pass):
     5. Date values switched from the Cormorant Garamond serif back to
        var(--font-sans) (same family as the CHECK IN / CHECK OUT labels)
        at a smaller size, so label + value match.
     6. Card padding 6px → 10px so fields no longer sit flush against the
        widget's outer edge; column-gap between Check-in/Check-out
        tightened to 5px (row-gap 6px) so the two date fields sit closer
        to each other than they do to the card edge.
     7. Opacity dropped again: card 0.77 → 0.42, fields 0.55 → 0.5 (fields
        intentionally kept a little higher than the card).
     8. Field vertical padding + input min-height trimmed, submit button
        40px → 36px, to de-bulk the widget's overall height.
     9. Guests box: explicit width:100%/border-box so it stretches to the
        same column as Check-in (right edges line up); label + select
        content centered inside the box instead of left-hugging it.

   Revision log — round 3 (opacity + alignment correction):
     10. Card and Check-in/Check-out fields no longer have separate
         opacity values — both now use the exact same rgba(255,255,255,0.80).
         Fields still read slightly denser than the plain card area, but
         that's just two 0.80-alpha layers stacking, not a different number.
     11. Check-in/Check-out: text-align:center added on the field (covers
         the label) plus a WebKit ::-webkit-date-and-time-value override
         so the native date value centers too — that inner part ignores
         plain text-align on the input in Chrome/Safari.
     12. Guests box now gets the same bottom+right "mirrored L" gold
         border as Check-in/Check-out, instead of no border.

   Revision log — round 4 (opacity, date centering, Guests width):
     13. Check-in/Check-out fields are now fully transparent (no fill of
         their own) instead of matching the card's 0.80 — two stacked
         0.80-alpha layers actually compose to ~0.96, which read as
         higher opacity than the card even though the declared number was
         identical. Removing the field's own fill means only the card's
         single 0.80 layer is ever visible, anywhere in the widget.
     14. Date-centering fix from round 3 was incomplete: the WebKit
         ::-webkit-date-and-time-value part shrink-wraps its own content
         by default, so text-align:center had no extra space to center
         within. Added width:100% on that part so text-align now has
         somewhere to actually move the text to.
     15. Guests box widened: overrides its grid-area's column placement
         to span the full row (grid-column: 1 / -1), sized to
         calc(100% - 36px - 5px) — full row minus the search button's
         36px and a 5px gap (same 5px as the Check-in/Check-out
         column-gap) — so it now reaches almost to the search button with
         a precise, matching gap instead of stopping at the halfway mark.

   Revision log — round 5 (client polish pass 2):
     16. Guests select was unclickable in practice: the <select> itself
         only sized to its own text ("2 Guests"), width:auto + margin:0
         auto, sitting centered inside a box that visually spans almost
         the full row. Tapping anywhere in that box outside the narrow
         text did nothing, because that surrounding space belonged to the
         wrapper <div>, not the <select>. Select is now width:100%, so
         the whole visible Guests row is the actual tap target.
     17. Search button was a flat 36px square while every other box
         (Check-in/Check-out/Guests) renders at ~46px tall — the button
         read as visibly smaller/misaligned against the row. Button is
         now sized to match the fields' own height exactly (46px, same
         figure the fields already resolve to from their padding + type
         scale) instead of an unrelated hardcoded 36px, still a rounded
         square, just matched.
     18. Guests box width formula updated to reserve space for the new
         46px button (was reserving 36px), so the 5px gap between Guests
         and the button stays exact instead of shrinking to nothing.
     19. Card opacity: 0.80 → 0.75 per client request, softening the
         glass further.
     20. Check-in/Check-out still weren't optically centered under their
         labels despite text-align:center + the WebKit value-part width
         fix: Chromium/Safari still reserve internal space for the
         calendar-picker-indicator icon inside the input's shadow layout,
         which skews the centered value off-axis even though the CSS
         claims full width. Hiding that icon (display:none) removes the
         skew entirely — tapping the date field still opens the native
         picker with no icon needed, and the value now centers precisely
         under CHECK IN / CHECK OUT.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Compact 2-row hero booking widget — a slim dark-glass card that
     sits under the tagline without overwhelming the hero image.       */
  .hl-search-bar {
    padding-inline: 0 !important;
    margin-top: 1.25rem !important;
    max-width: 340px;
    margin-inline: auto;
  }
  .hl-search-bar__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "checkin  checkout"
      "guests   submit";
    row-gap: 6px;
    column-gap: 5px;
    flex-direction: initial !important;
    /* Opacity: 0.72 → 0.92 → 0.77 → 0.42 → 0.80 → now 0.75 (client ask),
       unified with the fields below (same rgba alpha everywhere — no
       separate value for the card vs. the fields anymore). */
    background: rgba(255, 255, 255, 0.80) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-radius: 16px !important;
    overflow: hidden;
    /* 6px → 10px: fields were sitting flush against the card's outer
       edge; this gives every field breathing room from the frame on
       all four sides. */
    padding: 10px !important;
    box-shadow:
      0 12px 30px -14px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
  }
  .hl-search-bar__divider { display: none !important; }
  .hl-search-bar__field {
    /* 0.55rem → 0.42rem vertical: shrinks each field's own height so the
       whole widget reads less bulky. */
    padding: 0.42rem 0.75rem !important;
    background: transparent !important;
    min-width: 0;
    border-radius: 10px;
  }
  /* Check-in / Check-out: identical fill on both, each fully stretched to
     its own equal-width column. Border is deliberately bottom+right only
     (the "mirrored L" accent) in a warm gold pulled from the search
     button's gradient — top/left are left bare on purpose. Targets DOM
     div-positions 1 and 3 (see note above on why it's not 1 and 2), with
     !important so it beats the older border rules in theme-fixes.css /
     theme-fixes-v2.css. */
  .hl-search-bar__field:nth-of-type(1),
  .hl-search-bar__field:nth-of-type(3) {
    /* No fill of their own anymore — previously these had their own
       rgba(255,255,255,0.80) on top of the card's rgba(255,255,255,0.80),
       and two stacked 0.80-alpha layers compose to ~0.96, visibly denser
       than the plain card. Making them transparent means only the
       card's single 0.80 layer shows through everywhere — genuinely one
       opacity for the whole widget, border is what marks the field now. */
    background: transparent !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1.5px solid rgba(165, 130, 82, 0.6) !important;
    border-bottom: 1.5px solid rgba(165, 130, 82, 0.6) !important;
  }
  /* grid-area assigned with !important: theme-fixes.css / theme-fixes-v2.css
     set grid-column/grid-row on these same div positions (for an older
     3-row layout) with higher selector specificity than a plain class +
     nth-of-type match, so without !important they'd win and misplace
     Check-out and Guests. */
  .hl-search-bar__field:nth-of-type(1) { grid-area: checkin  !important; }
  .hl-search-bar__field:nth-of-type(3) { grid-area: checkout !important; }
  .hl-search-bar__field:nth-of-type(5) { grid-area: guests   !important; }
  .hl-search-bar__field label {
    font-size: 0.52rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    color: rgba(36, 24, 12, 0.92) !important;
    margin-bottom: 0.1rem !important;
    display: block;
  }
  .hl-search-bar__field input,
  .hl-search-bar__field select {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #16100a !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 17px;
    width: 100%;
    color-scheme: light;
  }
  /* Check-in / Check-out values: previously a larger Cormorant Garamond
     serif treatment. Switched to the same sans (var(--font-sans)) used by
     the CHECK IN / CHECK OUT labels above them, at a smaller size, so
     label and value read as one unified type family instead of two. */
  .hl-search-bar__field:nth-of-type(1) input,
  .hl-search-bar__field:nth-of-type(3) input {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
  }
  /* Plain text-align:center on the input isn't enough for native date
     pickers — WebKit's date-and-time-value part is only as wide as its
     own content by default, so text-align has no extra room to center
     within until it's explicitly given the full input width first. */
  .hl-search-bar__field:nth-of-type(1) input::-webkit-date-and-time-value,
  .hl-search-bar__field:nth-of-type(3) input::-webkit-date-and-time-value {
    width: 100%;
    text-align: center;
  }
  .hl-search-bar__field input::-webkit-calendar-picker-indicator {
    /* Hidden rather than faded: even at low opacity this icon still
       reserves layout space inside the input's internal shadow tree,
       which is what was pushing the centered date value off-axis (see
       round 5, #20). Tapping the field still opens the native date
       picker with no icon shown. */
    display: none !important;
  }
  .hl-search-bar__btn {
    grid-area: submit;
    align-self: center;
    justify-self: end;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    /* 36px → 46px: matches the Check-in/Check-out/Guests fields' own
       rendered height exactly, so the search button reads as the same
       size as the other 3 boxes instead of visibly smaller. */
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px;
    /* Icon-only: hide the "Search Rooms" label text without touching PHP. */
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    gap: 0 !important;
    background: linear-gradient(135deg,
                var(--hl-gold, #c9a96e) 0%,
                var(--hl-gold-dark, #a58252) 100%) !important;
    color: #fff !important;
    border-radius: 16px !important;
    border: 0 !important;
    box-shadow: none;
    transition: filter 240ms ease, transform 240ms cubic-bezier(0.22,1,0.36,1);
  }
  .hl-search-bar__btn svg {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 auto;
    text-indent: 0;
    display: block;
    margin: auto;
  }
  .hl-search-bar__btn:active { transform: scale(0.97); filter: brightness(0.95); }

  /* Guests label — keep it single-line, subdued, no awkward wrap.
     Correct DOM position is nth-of-type(5) (see note above); also strips
     the stray border-bottom that theme-fixes.css / theme-fixes-v2.css's
     div:nth-of-type(5) rule left on this field (replaced below with the
     intentional matching border, not left bare anymore). */
  /* Guests box: now spans the full row (both columns) instead of just
     the "checkin" column — see the grid-column override below for how
     it's sized to leave an exact 5px gap before the search button.
     Content inside is centered (previous-version look), rather than
     left/right-hugging the box. */
  .hl-search-bar__field:nth-of-type(5) {
    /* Spans the FULL row (both grid columns, overriding the "guests"
       area's single-column placement) instead of stopping at the
       checkin column. Width is that full span minus the submit button
       (46px, matched to field height — see round 5, #17) and a 5px gap
       — same 5px used for the column-gap between Check-in/Check-out —
       so Guests now reaches almost to the search button with a
       matching, exact 5px gap between them. */
    grid-column: 1 / -1 !important;
    justify-self: start;
    width: calc(100% - 46px - 5px);
    padding: 0.42rem 0.5rem !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Same "mirrored L" accent as Check-in/Check-out: bottom + right
       only, top/left bare. */
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1.5px solid rgba(165, 130, 82, 0.6) !important;
    border-bottom: 1.5px solid rgba(165, 130, 82, 0.6) !important;
  }
  .hl-search-bar__field:nth-of-type(5) label {
    white-space: nowrap;
    font-size: 0.52rem !important;
    letter-spacing: 0.18em !important;
    text-align: center;
    width: 100%;
  }
  .hl-search-bar__field:nth-of-type(5) select {
    font-size: 0.8rem !important;
    padding-right: 0 !important;
    background-image: none !important;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    text-align-last: center;
    /* width:auto + margin:0 auto (previous) shrank the <select> to just
       its own text, leaving most of the visible Guests row as dead
       space belonging to the wrapper div, not the select — that's why
       it couldn't be tapped. Full width makes the entire row the real
       hit target, per round 5, #16. */
    width: 100%;
    margin: 0;
    cursor: pointer;
  }
}



/* ── 7. Font-swap stability ─────────────────────────────────────────────── */
@supports (font-size-adjust: from-font) {
  :root {
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  }
  h1, h2, h3, .hl-heading, .hl-hero__title {
    font-synthesis: none;
    font-size-adjust: 0.5;
  }
}
.hl-hero__title {
  line-height: 1.08;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 8. GENERAL MOBILE POLISH ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hl-container {
    padding-inline: max(1rem, env(safe-area-inset-left))
                    max(1rem, env(safe-area-inset-right)) !important;
  }
  a, button, .hl-btn, .hl-float-btn, .hl-sticky-cta__circle, .hl-sticky-cta__book {
    -webkit-tap-highlight-color: transparent;
  }
  .hl-btn, button, [role="button"] { min-height: 44px; }

  .section-pad { padding-block: clamp(3rem, 8vw, 5rem) !important; }
  .hl-section-header { margin-bottom: clamp(1.75rem, 5vw, 2.5rem) !important; }
  .hl-hero__title { font-size: clamp(2.4rem, 8vw, 3.6rem) !important; }
  .hl-search-bar { width: 100%; padding-inline: 0.5rem; }
  .hl-announce p { font-size: 0.78rem; line-height: 1.4; }
  .hl-footer__bottom {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   12. ACCOMMODATION CARDS — mobile spacing rhythm
   Uniform vertical spacing between room name, meta, amenities and the
   footer (price + "View" link), so every card breathes the same way.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .hl-rooms-grid {
    gap: 1.25rem !important;
  }
  .hl-room-card__body {
    padding: 1.1rem 1.1rem 1.15rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .hl-room-card__name {
    font-size: 1.1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  .hl-room-card__title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  .hl-room-card__meta,
  .hl-room-card__amenities {
    margin: 0 !important;
    gap: 0.55rem 0.9rem !important;
    font-size: 0.78rem !important;
  }
  .hl-room-card__amenities {
    padding-inline-start: 0 !important;
    list-style: none;
  }
  .hl-room-card__footer {
    margin-top: 0.35rem !important;
    padding-top: 0.6rem !important;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem !important;
  }
  .hl-room-card__body { gap: 0.5rem !important; padding: 1rem 1.05rem 1.05rem !important; }
  .hl-rooms-grid + .hl-btn,
  .hl-rooms__cta,
  .hl-rooms__footer {
    margin-top: 1.5rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   13. GALLERY MOBILE NAV BUTTONS — perfect circles, no sticky hover state
   The double-tap-to-slide bug was caused by :hover styles staying active
   after the first tap on a touch device — the browser only cleared them
   on the next tap. Gate all hover styles behind (hover: hover) so touch
   devices never enter the sticky "white" hover state. Also fix the shape
   so the buttons render as clean circles at all times.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .hl-gallery-slider__nav {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 9999px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0.85;
    background: rgba(255, 255, 255, 0.6) !important;
    color: var(--hl-text-primary, #241c16) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    transition: opacity 200ms ease, background-color 200ms ease;
  }
  .hl-gallery-slider__nav svg {
    width: 18px !important;
    height: 18px !important;
    display: block;
    pointer-events: none;
  }
  /* Only real pointer devices get the hover/focus fill; touchscreens
     do NOT trigger it, so the very first tap fires the click. */
  @media (hover: hover) and (pointer: fine) {
    .hl-gallery-slider__nav:hover:not(.is-disabled),
    .hl-gallery-slider__nav:focus-visible {
      opacity: 1;
      background: rgba(255, 255, 255, 0.9) !important;
    }
  }
  /* Instantly release the tap highlight after finger-up. */
  .hl-gallery-slider__nav:focus:not(:focus-visible) {
    outline: none;
    background: rgba(255, 255, 255, 0.55) !important;
    opacity: 0.72;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   14. SITE-WIDE SCROLL REVEAL — smooth fade-up when new sections enter
   Adds a subtle relaxed fade + rise to every major section, on top of the
   existing .reveal-* classes. Applies to desktop AND mobile. Compositor-
   only (opacity + transform) so it never causes layout thrash.
═══════════════════════════════════════════════════════════════════════════ */
.hl-section,
section[class*="hl-"],
.hl-rooms-grid > *,
.hl-exp-grid > *,
.hl-offer-grid > *,
.hl-blog-grid > *,
.hl-testimonials__card,
.hl-section-header {
  /* Base state is fully visible so nothing is ever missing if JS is off. */
}
.hl-fade-in-up {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.hl-fade-in-up.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .hl-fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   15. GALLERY SLIDE — end-of-transition polish
   Keep the slots on their own compositor layer permanently so the browser
   doesn't drop the layer at transitionend (that layer collapse was the
   micro "jerk" the user reported — the runner-stopping-suddenly feel).
═══════════════════════════════════════════════════════════════════════════ */
.hl-gallery-slot,
.hl-gallery-slot--prev,
.hl-gallery-slot--featured,
.hl-gallery-slot--next {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hl-gallery-slot__frame,
.hl-gallery-slot__frame img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   15. GALLERY COUNTER — mobile parity with desktop's sleek numeric badge
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .hl-gallery-nav-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.9rem !important;
    margin-top: 0.9rem !important;
    flex-wrap: nowrap !important;
  }
  .hl-gallery-counter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-family: var(--hl-font-serif, Georgia, serif);
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    color: var(--hl-text-primary, #241c16) !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  .hl-gallery-counter #gallery-current { color: var(--hl-gold, #b16a4c); font-weight: 600; }
  .hl-gallery-counter__sep { opacity: 0.4; margin: 0 0.15rem; }
  .hl-gallery-counter #gallery-total { opacity: 0.55; }
  .hl-gallery-slider__dots { gap: 0.4rem !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.13 — MOBILE REFINEMENTS (overrides everything above)
   1. Hero booking widget layout / frost / date visibility
   2. Stats bar single row
   3. Kill sticky :hover/:focus color on touch devices
   4. About "Est." badge kept fully inside frame on mobile
   5. Scroll performance (buttery 60fps target)
   6. Gallery pagination — identical style to desktop, scaled down
═══════════════════════════════════════════════════════════════════════════ */


/* ── 2. STATS BAR — single row on mobile ─────────────────────────────── */
@media (max-width: 640px) {
  .hl-intro-strip { padding-block: 1.35rem !important; }
  .hl-intro-strip__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.5rem !important;
    padding-inline: 0.25rem;
  }
  .hl-intro-strip__item {
    gap: 0.15rem !important;
    padding: 0.15rem 0.1rem !important;
    min-width: 0;
  }
  .hl-intro-strip__value {
    font-size: clamp(0.95rem, 4vw, 1.3rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
  }
  .hl-intro-strip__label {
    font-size: 0.5rem !important;
    letter-spacing: 0.06em !important;
    line-height: 1.25 !important;
    text-align: center;
    hyphens: auto;
  }
  .hl-intro-strip__item + .hl-intro-strip__item::before { display: none !important; }
}

/* ── 3. BUTTONS — no sticky hover/focus color on touch devices ───────── */
@media (hover: none) and (pointer: coarse) {
  .hl-btn { -webkit-tap-highlight-color: transparent; }

  /* Neutralize :hover (mobile browsers keep it after tap) */
  .hl-btn--primary:hover      { background: var(--hl-dark);       border-color: var(--hl-dark);       color: var(--hl-white); }
  .hl-btn--gold:hover         { background: var(--hl-gold);       border-color: var(--hl-gold);       color: var(--hl-dark);  }
  .hl-btn--ghost:hover        { background: transparent;          color: var(--hl-dark); }
  .hl-btn--ghost-light:hover  { background: transparent;          color: var(--hl-white); border-color: rgba(255,255,255,0.6); }
  .hl-btn--outline:hover      { background: transparent;          color: var(--hl-dark);              border-color: var(--hl-dark); }

  /* Reset lingering :focus (mobile keeps focus after nav-back) */
  .hl-btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
  .hl-btn--primary:focus:not(:focus-visible)     { background: var(--hl-dark);       border-color: var(--hl-dark);       color: var(--hl-white); }
  .hl-btn--gold:focus:not(:focus-visible)        { background: var(--hl-gold);       border-color: var(--hl-gold);       color: var(--hl-dark);  }
  .hl-btn--ghost:focus:not(:focus-visible)       { background: transparent;          color: var(--hl-dark); }
  .hl-btn--ghost-light:focus:not(:focus-visible) { background: transparent;          color: var(--hl-white); border-color: rgba(255,255,255,0.6); }
  .hl-btn--outline:focus:not(:focus-visible)     { background: transparent;          color: var(--hl-dark);              border-color: var(--hl-dark); }
}

/* ── 4. ABOUT "Est." BADGE — keep inside frame on mobile ─────────────── */
@media (max-width: 768px) {
  .hl-about-section__media {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  .hl-about-section__badge {
    bottom: 0.85rem !important;
    right: 0.85rem !important;
    top: auto !important;
    left: auto !important;
    width: 74px !important;
    height: 74px !important;
    box-shadow: 0 8px 24px rgba(201,169,110,0.45);
  }
  .hl-about-section__badge-num   { font-size: 1.05rem !important; }
  .hl-about-section__badge-label { font-size: 0.52rem !important; }
}

/* ── 5. MOBILE SCROLL PERFORMANCE ─────────────────────────────────────
   Transform/opacity only, no continuous animations, no heavy filters on
   scroll. Adds content-visibility for off-screen paint cost.           */
@media (max-width: 900px) {
  /* Stop the always-running Ken Burns on mobile — a big compositor win */
  .hl-hero__bg,
  .hl-hero__video {
    animation: none !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
  }

  /* Turn off reveal animations globally on mobile — they cause paints
     right at the moment the user tries to stop scrolling. */
  .reveal-up, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* NOTE: content-visibility:auto with contain-intrinsic-size was the
     primary cause of the "scroll jerk" near image sections. When a
     section entered the viewport its estimated 640px height was
     replaced by the real (larger/smaller) rendered height, shoving the
     scroll position by that delta. Removed entirely. */


  /* Kill hover transforms on touch (also removes GPU work while scrolling
     if a finger accidentally hovers a card) */
  .hl-room-card:hover,
  .hl-experience-card:hover,
  .hl-blog-card:hover,
  .hl-gallery-item:hover,
  .hl-gallery-slot--featured:hover {
    transform: none !important;
  }

  /* Drop scroll-blocking backdrop filters outside the booking widget */
  .hl-hero__overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Smooth momentum + contain overscroll */
  html { -webkit-text-size-adjust: 100%; }
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

/* ── 6. GALLERY PAGINATION — exact desktop design, scaled ────────────── */
@media (max-width: 639px) {
  .hl-gallery-nav-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.85rem !important;
    margin-top: 1.15rem !important;
    flex-wrap: nowrap !important;
  }
  .hl-gallery-slider__dots { gap: 0.4rem !important; }
  .hl-gallery-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--hl-border) !important;
    padding: 0 !important;
  }
  .hl-gallery-dot.active {
    width: 18px !important;
    border-radius: 4px !important;
    background: var(--hl-gold) !important;
  }
  .hl-gallery-counter {
    font-family: var(--font-serif) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
    color: var(--hl-text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    font-variant-numeric: tabular-nums;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  .hl-gallery-counter #gallery-current { color: var(--hl-gold-dark) !important; font-weight: 600 !important; }
  .hl-gallery-counter__sep             { opacity: 0.5 !important; margin: 0 0.1rem !important; }
  .hl-gallery-counter #gallery-total   { color: var(--hl-text-muted) !important; opacity: 1 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.13.3 — FINAL FIX LAYER (Aurelia Luxe)
   (NOTE: the booking-widget bullets that used to live here have been
   consolidated into the single canonical `.hl-search-bar` block — see
   "11. HERO BOOKING WIDGET" earlier in this file.)
   - Mobile: eliminate the residual scroll "jerk" around image sections
     caused by lazy-image layout shifts + reveal transforms + URL-bar
     viewport resizes.
═══════════════════════════════════════════════════════════════════════════ */

/* ══ MOBILE SCROLLING — ELIMINATE JERK NEAR IMAGE SECTIONS ═════════════
   Symptom: a small "grab and release" as the user scrolls past sections
   with images/animations (home hero, experiences, rooms, gallery). Root
   causes and fixes:

   1. Lazy-loaded images fade in from opacity 0 → 1 as they enter the
      viewport. If the image also has no reserved height, the browser
      reflows the whole document when each image decodes, shoving the
      scroll position and producing the "jerk". Fix: keep the fade but
      pre-reserve space via aspect-ratio inheritance and, if the image
      lacks intrinsic size, mark it content-visibility:auto so the
      reflow is scoped to the card, not the page.

   2. Reveal-up/left/right transforms on cards fire as sections enter
      view. Each transform promotes a new compositor layer mid-scroll,
      which on iOS Safari competes with the touch scroller for a frame
      and reads as a stutter. Downgrade to opacity-only reveals on
      mobile — no translate — so no layout/compositor work happens
      while the finger is moving.

   3. URL-bar collapse resizes any element sized with `dvh` mid-scroll.
      Force `svh` semantics on the known offenders so the viewport
      height the layout uses is stable.

   4. Ken Burns / hover scale on room + experience images uses
      `will-change: transform` which the browser keeps hot forever.
      Restrict it to :hover / :active only on touch, so the compositor
      layer isn't allocated for every card up front. */
@media (max-width: 900px) {
  html {
    overflow-x: clip !important;
    overflow-y: visible !important;
    scroll-behavior: auto !important;
    height: auto !important;
    min-height: 100% !important;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
  }
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100% !important;
    overscroll-behavior-y: auto !important;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body:not(.hl-menu-open) { position: static !important; }

  /* (3) Stabilise viewport-height-sized boxes against URL-bar resize */
  .hl-hero {
    height: auto !important;
    min-height: 88svh !important;
    overflow: visible !important;
  }
  .hl-page-hero,
  .hl-mobile-menu {
    min-height: 100svh !important;
  }
  .hl-main { overflow: visible !important; }

  /* Kill scroll-linked backdrop-filters outside the widget */
  .hl-header,
  .hl-announce {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Header stays a fixed height on mobile — no shrink-on-scroll thrash */
  .hl-header,
  .hl-header.scrolled {
    height: 64px !important;
    min-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: background-color 200ms ease, box-shadow 200ms ease !important;
  }

  /* (1) Prevent lazy-image reveal from shifting layout on decode.
     Reserve space with content-visibility so the fade stays local. */
  img[loading="lazy"] {
    opacity: 1 !important;         /* stop the page-wide fade cascade */
    transition: none !important;
  }
  .hl-room-card__img,
  .hl-room-card__image,
  .hl-exp-card__media img,
  .hl-exp-card__image,
  .hl-offer-card img,
  .hl-blog-card__img,
  .hl-blog-card__image-wrap img,
  .hl-gallery-item__media img {
    background-color: rgba(20, 15, 10, 0.06);
  }

  /* (2) Opacity-only reveals on mobile — no translate = no jerk */
  .reveal-up,
  .reveal-left,
  .reveal-right {
    transform: none !important;
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity !important;
  }
  .reveal-up.revealed,
  .reveal-left.revealed,
  .reveal-right.revealed {
    transform: none !important;
  }

  /* (4) Don't keep image cards on their own compositor layer forever */
  .hl-room-card__img,
  .hl-room-card__image,
  .hl-exp-card__media img,
  .hl-exp-card__image,
  .hl-offer-card img,
  .hl-blog-card__img,
  .hl-blog-card__image-wrap img,
  .hl-gallery-item__media img,
  .hl-hero__bg,
  .hl-hero__video {
    will-change: auto !important;
    backface-visibility: hidden;
  }

  /* Scope repaints inside sectioned rails to their own container */
  .hl-rooms,
  .hl-experiences,
  .hl-offers,
  .hl-blog,
  .hl-gallery,
  .hl-testimonials {
    contain: layout paint;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.13.4 — MOBILE-ONLY FINAL LAYER (Aurelia Luxe)
   Applies AFTER every earlier rule; desktop is untouched (all rules are
   inside @media (max-width: 640/900px)).

   (NOTE: the booking-widget bullet that used to live here has been
   consolidated into the single canonical `.hl-search-bar` block — see
   "11. HERO BOOKING WIDGET" earlier in this file.)

   (b) SCROLL JERK — remove all remaining triggers on mobile:
        - `contain: layout paint` on tall sections (browser was recomp-
          uting section boxes as they entered the viewport)
        - `will-change: transform` sticking on gallery slots
        - unset intrinsic image sizes so lazy-loads never reflow doc
═══════════════════════════════════════════════════════════════════════════ */



/* ── (b) SCROLL JERK — remove remaining causes on mobile ───────────── */
@media (max-width: 900px) {
  /* `contain: layout paint` on tall sections created new containing
     blocks whose recalculated size shifted the doc as they entered the
     viewport. Undo it. */
  .hl-rooms,
  .hl-experiences,
  .hl-offers,
  .hl-blog,
  .hl-gallery,
  .hl-testimonials,
  .hl-intro-strip,
  .hl-intro-strip__grid {
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  /* Permanent will-change:transform on gallery slots holds a compositor
     layer indefinitely; the browser eventually collapses it mid-scroll
     which reads as a "grab and release". Only promote during actual
     transitions (main.js toggles a class if needed). */
  .hl-gallery-slot,
  .hl-gallery-slot--prev,
  .hl-gallery-slot--featured,
  .hl-gallery-slot--next,
  .hl-gallery-slot__frame,
  .hl-gallery-slot__frame img {
    will-change: auto !important;
  }

  /* Reserve intrinsic space for every image so lazy-decode never
     reflows the document. Uses each <img>'s width/height attrs when
     present; falls back to a sensible ratio for the card media so a
     missing attribute doesn't collapse the box to 0px on first paint. */
  img { height: auto; }
  .hl-room-card__img,
  .hl-room-card__image,
  .hl-exp-card__media,
  .hl-exp-card__media img,
  .hl-exp-card__image,
  .hl-offer-card img,
  .hl-blog-card__img,
  .hl-blog-card__image-wrap,
  .hl-blog-card__image-wrap img,
  .hl-gallery-item__media,
  .hl-gallery-item__media img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  .hl-hero__bg,
  .hl-hero__bg--default,
  .hl-hero__video {
    will-change: auto !important;
    animation: none !important;
    transform: none !important;
  }

  /* Instant, native scroll — no smooth easing anywhere on mobile */
  html, body {
    scroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.13.5 — REAL SCROLL-JERK FIX
   (NOTE: the "MOBILE BOOKING WIDGET" portion of this pass was consolidated
   into the single canonical `.hl-search-bar` block earlier in this file —
   see "11. HERO BOOKING WIDGET".)
   Root cause found after v3.13.4: the remaining mobile jerk was not only
   content-visibility. Two reveal systems were still animating image/card
   sections on intersection (.reveal-* and .hl-fade-in-up), plus the image-
   first card reveal kept media at opacity:0 until JS marked the parent.
   On phones this created the exact late "grab/release" feeling near hero,
   experiences, rooms and gallery. Mobile now renders those sections steady:
   no scroll-triggered transforms, no delayed media opacity, no permanent
   compositor promotion. Desktop remains unchanged.
═══════════════════════════════════════════════════════════════════════════ */



@media (max-width: 900px) {
  .hl-fade-in-up,
  .hl-fade-in-up.is-in,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-up.revealed,
  .reveal-left.revealed,
  .reveal-right.revealed,
  .hl-room-card__image-wrap,
  .hl-exp-card__image,
  .hl-room-card__body,
  .hl-exp-card__content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .hl-rooms,
  .hl-rooms-section,
  .hl-experiences,
  .hl-experiences-section,
  .hl-gallery,
  .hl-gallery-teaser,
  .hl-testimonials,
  .hl-offers,
  .hl-blog,
  .hl-blog-preview,
  .hl-intro-strip,
  .hl-intro-strip__grid {
    contain: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    overflow-anchor: none;
  }

  .hl-hero,
  .hl-page-hero,
  .hl-cta-banner,
  .hl-gallery-stage,
  .hl-room-card__image-wrap,
  .hl-blog-card__image-wrap,
  .hl-exp-card,
  .hl-exp-card__media {
    overflow-anchor: none;
  }

  .hl-room-card__image-wrap {
    aspect-ratio: 5 / 4 !important;
  }
  .hl-blog-card__image-wrap {
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }
  .hl-exp-card,
  body .hl-exp-card,
  #experiences .hl-exp-card {
    aspect-ratio: 4 / 5 !important;
    min-height: 380px !important;
  }
  .hl-exp-card__media {
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }

  .hl-room-card__image,
  .hl-room-card__img,
  .hl-blog-card__img,
  .hl-blog-card__image-wrap img,
  .hl-exp-card__media img,
  .hl-offer-card img,
  .hl-gallery-item__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  body .hl-exp-card__image,
  #experiences .hl-exp-card__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .hl-gallery-slot,
  .hl-gallery-slot__frame,
  .hl-gallery-slot__frame img,
  .hl-hero__bg,
  .hl-hero__video,
  .hl-cta-banner__bg {
    will-change: auto !important;
    animation: none !important;
  }

  img[loading="lazy"] {
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.13.6 — REAL SCROLL-JERK ROOT-CAUSE FIX + SITE-WIDE ANIMATION REVAMP
   ------------------------------------------------------------------------
   (NOTE: the booking-widget grid-area fix that used to live here has been
   consolidated into the single canonical `.hl-search-bar` block earlier in
   this file — see "11. HERO BOOKING WIDGET" — instead of being layered as
   its own patch. Numbering below kept as FIX 2 / FIX 3 to match history.)

   FIX 2 (scroll "jerks" every 4–5 px near hero / experiences / image
     sections): Chrome and Safari's scroll-anchoring algorithm adjusts the
     scroll offset whenever above-viewport layout changes — most commonly
     when a lazy image finishes decoding and its intrinsic size differs
     from what CSS reserved. That's the "grab and release" the user
     described. Cure: kill scroll-anchoring globally on mobile AND reserve
     an aspect ratio for every <img> so decode causes zero reflow.

   FIX 3 (animation revamp): softer scales, shorter durations, honour
     prefers-reduced-motion, and never animate on scroll on mobile.
═══════════════════════════════════════════════════════════════════════════ */


/* ── FIX 2: KILL SCROLL-ANCHORING JERK ON MOBILE ─────────────────────── */
@media (max-width: 900px) {
  /* Global disable so late image decodes / font swaps NEVER shift the
     scroll position mid-swipe. This is the single biggest source of the
     "I swipe 4 px and the page snaps somewhere else" feeling. */
  html, body, .hl-main, .hl-hero, section, .hl-section,
  .hl-rooms, .hl-experiences, .hl-gallery, .hl-gallery-teaser,
  .hl-offers, .hl-blog, .hl-testimonials, .hl-cta-banner {
    overflow-anchor: none !important;
  }

  /* Reserve space for every raster image so decode is a no-op reflow.
     Uses HTML width/height attrs when the theme set them; the aspect-ratio
     fallback keeps generic <img> from collapsing to 0 on first paint. */
  img {
    height: auto;
    max-width: 100%;
  }
  img:not([width]):not([height]) {
    aspect-ratio: 16 / 10;
  }

  /* No scroll-linked repaints anywhere. Any lingering scroll-behavior:
     smooth on nested scrollers turns finger inertia into "surprise
     animations". Force native/instant on mobile. */
  * {
    scroll-behavior: auto !important;
  }

  /* touch-action conflicts: html was 'manipulation' and body was 'pan-y'
     in v3.13.5. On iOS Safari the nested pan-y wins for touches inside
     body and disables horizontal swipe recovery (back-gesture, carousels).
     Neutralise to auto everywhere so the browser owns gesture routing. */
  html, body { touch-action: auto !important; }

  /* Body was fixed-positioned only while menu is open; guarantee no
     residual transform on body — a lingering transform makes position:
     fixed children (header, sticky CTA) jitter as the URL bar collapses. */
  body:not(.hl-menu-open) {
    transform: none !important;
    will-change: auto !important;
  }
}

/* ── FIX 3: ANIMATION REVAMP — softer, GPU-only, motion-safe ─────────── */

/* Desktop: gentler hover scales; the old 1.07–1.14 was heavy on integrated
   GPUs and read as "twitchy" on lower-end laptops. */
@media (min-width: 901px) {
  .hl-room-card img,
  .hl-exp-card__image,
  .hl-gallery-item__media img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .hl-room-card:hover img { transform: scale(1.04) !important; }
  .hl-exp-card:hover .hl-exp-card__image { transform: scale(1.05) !important; }
  .hl-gallery-item:hover .hl-gallery-item__media img { transform: scale(1.04) !important; }

  /* Slower, subtler Ken Burns so it isn't the dominant motion on the page */
  .hl-hero__bg, .hl-hero__video {
    animation: hlKenBurnsSoft 34s ease-in-out infinite alternate !important;
  }
  @keyframes hlKenBurnsSoft {
    from { transform: scale(1.02) translate(0, 0); }
    to   { transform: scale(1.08) translate(-1%, -0.6%); }
  }

  /* Reveal transitions: cap duration + only animate opacity+transform */
  .reveal-up, .reveal-left, .reveal-right, .hl-fade-in-up {
    transition-duration: 0.6s !important;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
}

/* Honor OS motion preference everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hl-hero__bg, .hl-hero__video { animation: none !important; transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.13.7 — MOBILE GALLERY COUNTER = DESKTOP COUNTER
             + KILL "SHORT-SWIPE" JERK (reveal transitions + URL-bar reflow)
   ------------------------------------------------------------------------
   (NOTE: the "EXACT REFERENCE LAYOUT FOR MOBILE BOOKING WIDGET" portion of
   this pass was consolidated into the single canonical `.hl-search-bar`
   block earlier in this file — see "11. HERO BOOKING WIDGET".)

   Root cause of the short-swipe jerk: on iOS/Android, a swipe that barely
   moves the page still fires scroll events. Two things then happen mid-
   inertia and read as a "grab":
     (a) IntersectionObserver flips a .reveal-* element to .revealed and
         the browser runs a 0.9s transform+opacity transition on an element
         near the viewport edge. During inertia scroll, that transform
         promotes a new compositor layer and briefly repaints — the finger
         "sticks".
     (b) The mobile URL bar toggles at low scroll velocities. Any element
         sized with 100vh (hero, full-bleed sections) reflows because vh
         is anchored to the *largest* viewport. That reflow = jerk.
   Fixes below neutralise both without touching desktop behavior.
═══════════════════════════════════════════════════════════════════════════ */


/* ── MOBILE GALLERY COUNTER — identical to desktop ─────────────────── */
@media (max-width: 900px) {
  .hl-gallery-counter {
    font-family: var(--font-serif, Georgia, serif) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.04em !important;
    color: var(--hl-text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-variant-numeric: tabular-nums !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    font-weight: 400 !important;
  }
  .hl-gallery-counter #gallery-current {
    color: var(--hl-gold-dark) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }
  .hl-gallery-counter__sep {
    opacity: 0.5 !important;
    margin: 0 !important;
    color: var(--hl-text-muted) !important;
  }
  .hl-gallery-counter #gallery-total {
    color: var(--hl-text-muted) !important;
    opacity: 1 !important;
    font-weight: 400 !important;
  }
}

/* ── 3. SHORT-SWIPE JERK — real root cause fixes ─────────────────────── */
@media (max-width: 900px) {
  /* (a) On mobile, do NOT animate reveals with transform/opacity while the
         user is scrolling. Show elements immediately — the fade was the
         source of the mid-swipe "stick". Content still fades on desktop. */
  .reveal-up, .reveal-left, .reveal-right, .hl-fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .reveal-up.revealed, .reveal-left.revealed, .reveal-right.revealed {
    opacity: 1 !important;
    transform: none !important;
  }

  /* (b) URL-bar reflow: swap every 100vh for 100svh (dynamic viewport)
         so a 4-5 px scroll that briefly reveals/hides the URL bar does
         NOT resize the hero and shove the page. */
  .hl-hero,
  .hl-hero__bg,
  .hl-hero__video {
    min-height: 100svh !important;
    height: auto !important;
  }

  /* (c) Prevent inertia-scroll "layer promotion" jitter: strip any
         will-change on non-animating elements. will-change: transform
         permanently forces a compositor layer which iOS repaints
         aggressively on every scroll tick. */
  section, .hl-section, .hl-rooms, .hl-experiences,
  .hl-gallery, .hl-gallery-teaser, .hl-offers, .hl-blog,
  .hl-testimonials, .hl-cta-banner,
  .reveal-up, .reveal-left, .reveal-right,
  .hl-room-card, .hl-exp-card, .hl-gallery-item {
    will-change: auto !important;
    transform: none;
    backface-visibility: visible !important;
  }

  /* (d) Contain overscroll so a short swipe doesn't tug the whole document
         via rubber-band chaining (a common source of "stops with a jerk"). */
  html, body {
    overscroll-behavior-y: contain !important;
  }

  /* (e) Kill hover-triggered transforms on touch devices — a tap-swipe
         briefly fires :hover on iOS which then reverts, producing a visible
         shake on cards under the finger. */
  @media (hover: none) {
    .hl-room-card:hover,
    .hl-room-card:hover img,
    .hl-exp-card:hover,
    .hl-exp-card:hover .hl-exp-card__image,
    .hl-gallery-item:hover,
    .hl-gallery-item:hover .hl-gallery-item__media img {
      transform: none !important;
      transition: none !important;
    }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.13.8 — GALLERY DOTS RESTORED TO EXACT DESKTOP SPEC
   Applies AFTER every earlier rule; desktop is completely untouched — every
   rule below lives inside a max-width media query.

   (NOTE: this pass originally also included a booking-widget density/icon
   pass and a search-button color fix. Both were superseded and consolidated
   into the single canonical `.hl-search-bar` block earlier in this file —
   see "11. HERO BOOKING WIDGET" — so only the gallery-dots fix remains here.)

   Gallery pagination dots — the mobile-only 6px/18px size introduced
   in an earlier layer never got reconciled with desktop; restoring
   the exact desktop values (7px / 22px active pill) here.
═══════════════════════════════════════════════════════════════════════════ */



/* ── GALLERY PAGINATION DOTS — exact desktop size/behavior ────────── */
@media (max-width: 900px) {
  /* The dots are real <button> elements (see main.js), so the site-wide
     touch-target rule ".hl-btn, button, [role='button'] { min-height:
     44px }" (section 8, GENERAL MOBILE POLISH) was also catching them —
     stretching a 7px/22px dot into a 44px-tall sliver. That's the
     "distorted" look. Reset min-height/min-width here so only the
     explicit width/height below apply. */
  .hl-gallery-dot {
    min-height: 0 !important;
    min-width: 0 !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--hl-border) !important;
  }
  .hl-gallery-dot.active {
    width: 22px !important;
    height: 7px !important;
    border-radius: 4px !important;
    background: var(--hl-gold) !important;
  }
  .hl-gallery-nav-row {
    gap: 1.1rem !important;
    margin-top: 1.75rem !important;
  }
}
@media (hover: hover) and (pointer: fine) and (max-width: 900px) {
  .hl-gallery-dot:hover:not(.active) { background: var(--hl-gold-light) !important; }
}