/* ===== RESET & VARIABLES ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

:root {
  --color-navy: #0f1d3a;
  --color-navy-light: #1a2d52;
  --color-navy-dark: #0a1428;
  --color-gold: #c9a227;
  --color-gold-light: #e4c65a;
  --color-gold-dark: #a68520;
  --color-cream: #faf8f2;
  --color-cream-dark: #f0ece0;
  --color-text: #1a1a2e;
  --color-text-muted: #5a5a72;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f6f1;
  --color-border: #e0ddd4;
  --color-success: #2d8a56;
  --color-error: #c0392b;
  --color-primary: var(--color-navy);
  --color-accent: var(--color-gold);
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem;
  --space-12: 6rem; --space-16: 8rem;
  --max-width: 1200px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(15,29,58,0.08);
  --shadow-md: 0 4px 12px rgba(15,29,58,0.1);
  --shadow-lg: 0 12px 32px rgba(15,29,58,0.14);
  --shadow-xl: 0 20px 50px rgba(15,29,58,0.18);
  --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== UTILITIES ===== */
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }
.section { padding-block: var(--space-10); }
@media (min-width: 768px) { .section { padding-block: var(--space-12); } }
@media (min-width: 1024px) { .section { padding-block: var(--space-16); } }
.section-alt { background: var(--color-bg-alt); }
.section-navy { background: var(--color-navy); color: #fff; }
.section-navy .text-muted { color: rgba(255,255,255,0.65); }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-gold { color: var(--color-gold); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ===== TYPOGRAPHY ===== */
.heading-xl { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.heading-lg { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1.15; }
.heading-md { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; }
.heading-sm { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; }
@media (min-width: 768px) {
  .heading-xl { font-size: var(--text-5xl); }
  .heading-lg { font-size: var(--text-4xl); }
  .heading-md { font-size: var(--text-3xl); }
}
@media (min-width: 1024px) { .heading-xl { font-size: var(--text-6xl); } }
.overline { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gold); margin-bottom: var(--space-2); }
.section-navy .overline { color: var(--color-gold-light); }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.75rem 1.75rem; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-base); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.btn-primary { background: var(--color-gold); color: var(--color-navy-dark); border-color: var(--color-gold); }
.btn-primary:hover { background: var(--color-gold-light); border-color: var(--color-gold-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.btn-secondary:hover { background: var(--color-navy); color: #fff; transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--color-navy); border-color: #fff; }
.btn-white:hover { background: var(--color-cream); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--color-gold-light); border-color: rgba(255,255,255,0.3); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--color-gold-light); }
.btn-sm { padding: 0.5rem 1.25rem; font-size: var(--text-sm); }
.btn-lg { padding: 1rem 2.25rem; font-size: var(--text-lg); }

/* ===== HEADER ===== */
.header { position: sticky; top: 0; z-index: 100; background: var(--color-navy); border-bottom: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(12px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); }
.logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.logo-icon { height: 48px; width: auto; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-icon img { height: 100%; width: auto; object-fit: contain; display: block; }
.logo-text { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: #fff; line-height: 1.1; }
.logo-text small { display: block; font-size: var(--text-xs); font-family: var(--font-body); font-weight: 500; color: var(--color-gold); letter-spacing: 0.08em; text-transform: uppercase; }
.nav-desktop { display: none; align-items: center; gap: var(--space-5); }
@media (min-width: 768px) { .nav-desktop { display: flex; } }
.nav-link { color: rgba(255,255,255,0.8); font-size: var(--text-sm); font-weight: 500; transition: color var(--transition-fast); padding: var(--space-2) 0; }
.nav-link:hover, .nav-link.active { color: var(--color-gold-light); }
.nav-cta { margin-left: var(--space-2); }
.nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: var(--space-2); background: none; border: none; cursor: pointer; }
@media (min-width: 768px) { .nav-toggle { display: none; } }
.nav-toggle span { width: 22px; height: 2px; background: #fff; transition: all var(--transition-base); border-radius: 2px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-navy); border-bottom: 1px solid rgba(255,255,255,0.08); padding: var(--space-4); }
.nav-mobile.active { display: block; }
.nav-mobile .nav-link { display: block; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: var(--text-base); }
.nav-mobile .btn { width: 100%; margin-top: var(--space-3); }

/* ===== HERO V4 (editorial + glass booking card) ===== */
.hero { position: relative; background: var(--color-navy-dark); color: #fff; overflow: hidden; min-height: 100vh; max-height: 980px; height: clamp(640px, 100vh, 980px); display: flex; flex-direction: column; }
@media (max-width: 880px) { .hero { height: auto; min-height: auto; padding-block: var(--space-10); } }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,20,40,0.78) 0%, rgba(10,20,40,0.55) 50%, rgba(10,20,40,0.3) 100%); z-index: 1; pointer-events: none; }
.hero .container { position: relative; z-index: 2; max-width: 1280px; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-8); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr 460px; gap: 60px; } }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--color-gold-light); }
.hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--color-gold); }
.hero-headline { font-family: var(--font-heading); font-weight: 600; line-height: 0.96; letter-spacing: -0.015em; color: #fff; margin: 18px 0 0; font-size: clamp(46px, 7vw, 96px); }
.hero-headline em { font-style: italic; color: var(--color-gold-light); font-weight: 500; }
.hero-sub { color: rgba(255,255,255,0.78); font-size: 18px; line-height: 1.6; max-width: 46ch; margin: 24px 0 0; }
@media (min-width: 1024px) { .hero-sub { font-size: 19px; } }
.hero-actions { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-tour-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); color: #fff; padding: 13px 22px; border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.18s; text-decoration: none; font-family: var(--font-body); }
.hero-tour-btn:hover { background: rgba(255,255,255,0.12); }
.hero-tour-btn svg { width: 16px; height: 16px; }
.hero-rating { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.85); font-size: 14px; }
.hero-rating strong { color: #fff; }
.hero-stars { position: relative; display: inline-block; font-size: 16px; line-height: 1; color: rgba(255,255,255,0.22); letter-spacing: 2px; }
.hero-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--color-gold); white-space: nowrap; letter-spacing: 2px; transition: width 0.4s ease; }

/* Glass booking card */
.glass-card { position: relative; background: rgba(15,29,58,0.55); border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; padding: 30px 28px 26px; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 40px 80px -24px rgba(0,0,0,0.55); }
.lps-stamp { position: absolute; top: -32px; right: 18px; width: 92px; height: 92px; border-radius: 50%; background: var(--color-gold); color: var(--color-navy-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(8deg); box-shadow: 0 18px 30px -12px rgba(201,162,39,0.6); font-family: var(--font-heading); text-align: center; border: 2px solid var(--color-navy-dark); outline: 1px solid var(--color-gold); outline-offset: -6px; }
.lps-stamp .l1, .lps-stamp .l3 { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-body); }
.lps-stamp .l2 { font-size: 24px; font-weight: 700; line-height: 0.9; margin: 2px 0; }
.bcard-title { font-family: var(--font-heading); font-size: 26px; font-weight: 600; color: #fff; letter-spacing: -0.01em; padding-right: 90px; }
.bcard-sub { margin-top: 4px; font-size: 13px; color: rgba(255,255,255,0.6); }
.bcard-fields { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.bcard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bcard-field { all: unset; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; }
.bcard-field-icon { width: 32px; height: 32px; border-radius: 6px; background: rgba(201,162,39,0.15); color: var(--color-gold-light); display: inline-flex; align-items: center; justify-content: center; }
.bcard-field-icon svg { width: 16px; height: 16px; }
.bcard-field-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bcard-field-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,0.55); }
.bcard-field-value { font-family: var(--font-heading); font-size: 19px; font-weight: 600; color: #fff; line-height: 1.1; }
.bcard-field-sub { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.bcard-field-chev { width: 14px; height: 14px; color: rgba(255,255,255,0.5); }
.bcard-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 22px; padding: 16px 24px; background: var(--color-gold); color: var(--color-navy-dark); border: none; border-radius: 4px; font-weight: 600; font-size: 15px; font-family: var(--font-body); text-decoration: none; cursor: pointer; box-shadow: 0 12px 28px -10px rgba(201,162,39,0.55); transition: background 0.18s, transform 0.18s; }
.bcard-cta:hover { background: var(--color-gold-light); transform: translateY(-1px); }
.bcard-cta svg { width: 16px; height: 16px; }
.bcard-meta { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 14px; color: rgba(255,255,255,0.55); font-size: 11.5px; flex-wrap: wrap; }
.bcard-meta svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

/* Hero + booking card mobile compaction — keeps the CTA above the fold on phones */
@media (max-width: 880px) {
  .hero .container { padding-block: var(--space-6); }
  .hero-grid { gap: 28px; }
  .hero-headline { font-size: 38px; line-height: 1.02; margin-top: 14px; }
  .hero-sub { font-size: 15px; line-height: 1.55; max-width: 100%; margin-top: 16px; }
  .hero-actions { margin-top: 22px; gap: 14px; }
  .hero-tour-btn { padding: 11px 18px; font-size: 13px; }
  .hero-rating { font-size: 13px; gap: 10px; }

  .glass-card { padding: 22px 18px 18px; border-radius: 14px; }
  .bcard-title { font-size: 22px; padding-right: 78px; }
  .bcard-sub { font-size: 12px; }
  .bcard-fields { margin-top: 16px; gap: 8px; }
  .bcard-row { gap: 8px; }
  .bcard-field { padding: 10px 12px; gap: 10px; }
  .bcard-field-icon { width: 28px; height: 28px; }
  .bcard-field-icon svg { width: 13px; height: 13px; }
  .bcard-field-label { font-size: 9.5px; letter-spacing: 0.12em; }
  .bcard-field-value { font-size: 15px; line-height: 1.1; }
  .bcard-field-sub { font-size: 10.5px; }
  .bcard-cta { padding: 13px 18px; font-size: 14px; margin-top: 16px; }
  .bcard-meta { font-size: 10.5px; gap: 10px; margin-top: 10px; }

  .lps-stamp { width: 72px; height: 72px; top: -24px; right: 12px; outline-offset: -5px; }
  .lps-stamp .l1, .lps-stamp .l3 { font-size: 8px; letter-spacing: 0.14em; }
  .lps-stamp .l2 { font-size: 18px; }
}

@media (max-width: 420px) {
  .hero-headline { font-size: 34px; }
  .bcard-field-value { font-size: 14px; }
}

/* ===== IMAGE PLACEHOLDERS ===== */
.img-placeholder { background: linear-gradient(135deg, var(--color-cream-dark) 0%, var(--color-cream) 100%); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: var(--text-sm); border-radius: var(--radius-lg); overflow: hidden; position: relative; min-height: 200px; }
.img-placeholder svg { width: 48px; height: 48px; opacity: 0.3; }
.img-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== CARDS ===== */
.card { background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: all var(--transition-base); border: 1px solid var(--color-border); }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.card-img { width: 100%; height: 220px; object-fit: cover; background: var(--color-cream-dark); }
.card-body { padding: var(--space-5); }
.card-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-2); }
.card-text { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-4); }
.card-price { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-navy); }
.card-price span { font-size: var(--text-sm); font-family: var(--font-body); font-weight: 400; color: var(--color-text-muted); }

/* ===== GRID LAYOUTS ===== */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ===== AMENITY ICONS ===== */
.amenity-item { text-align: center; padding: var(--space-6); background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: all var(--transition-base); }
.amenity-item:hover { border-color: var(--color-gold); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.amenity-icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); background: var(--color-cream); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-navy); }
.amenity-icon svg { width: 28px; height: 28px; }
.amenity-name { font-weight: 600; font-size: var(--text-base); margin-bottom: var(--space-1); }
.amenity-desc { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ===== FORMS ===== */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; font-weight: 500; margin-bottom: var(--space-2); font-size: var(--text-sm); }
.form-input, .form-select { width: 100%; padding: 0.75rem 1rem; font-size: var(--text-base); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); background: #fff; }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.15); }
textarea.form-input { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* ===== MAP EMBED ===== */
.map-wrapper { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.map-wrapper iframe { width: 100%; height: 350px; border: 0; }
@media (min-width: 768px) { .map-wrapper iframe { height: 450px; } }

/* ===== FOOTER ===== */
.footer { background: var(--color-navy-dark); color: rgba(255,255,255,0.7); padding-block: var(--space-12); }
.footer-grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand { max-width: 320px; }
.footer-brand .logo { margin-bottom: var(--space-4); }
.footer-heading { color: #fff; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-4); }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a { color: rgba(255,255,255,0.6); transition: color var(--transition-fast); font-size: var(--text-sm); }
.footer-links a:hover { color: var(--color-gold-light); }
.footer-bottom { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.08); text-align: center; font-size: var(--text-sm); color: rgba(255,255,255,0.4); }
.footer-bottom a { color: var(--color-gold); }

/* ===== PAGE MANAGEMENT ===== */
.page { display: none; }
.page.active { display: block; }

/* ===== SCROLL ANIMATIONS ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }

/* ===== DIVIDER ===== */
.gold-divider { width: 60px; height: 3px; background: var(--color-gold); margin: var(--space-4) auto; border-radius: 2px; }
.gold-divider.left { margin-left: 0; }

/* ===== INFO BOX ===== */
.info-box { background: var(--color-cream); border-left: 4px solid var(--color-gold); padding: var(--space-5); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: var(--space-6); }
.info-box h4 { font-family: var(--font-heading); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.info-box p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ===== ANIMATED STATS STRIP ===== */
.stats-strip { background: var(--color-navy); color: #fff; padding: 76px 24px; position: relative; overflow: hidden; }
.stats-inner { max-width: 1200px; margin: 0 auto; }
.stats-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; padding-inline: 4px; gap: 24px; flex-wrap: wrap; opacity: 0; transform: translateY(16px); transition: opacity 0.6s 0.05s ease-out, transform 0.6s 0.05s cubic-bezier(0.2,0.7,0.2,1); }
.stats-strip.visible .stats-head { opacity: 1; transform: translateY(0); }
.stats-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-light); font-weight: 600; }
.stats-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--color-gold); }
.stats-title { font-family: var(--font-heading); font-weight: 600; font-size: 32px; color: #fff; margin: 8px 0 0; letter-spacing: -0.005em; }
.stats-live { font-size: 12.5px; color: rgba(255,255,255,0.5); display: inline-flex; align-items: center; gap: 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 26px 24px 24px; position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden; opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1), border-color 0.25s, background 0.25s, box-shadow 0.25s; }
.stat-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.07); border-color: rgba(201,162,39,0.4); box-shadow: 0 24px 50px -22px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,162,39,0.18) inset; }
.stats-strip.visible .stat-card { opacity: 1; transform: translateY(0); }
.stats-strip.visible .stat-card:nth-child(1) { transition-delay: 0s; }
.stats-strip.visible .stat-card:nth-child(2) { transition-delay: 0.09s; }
.stats-strip.visible .stat-card:nth-child(3) { transition-delay: 0.18s; }
.stats-strip.visible .stat-card:nth-child(4) { transition-delay: 0.27s; }
.stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(201,162,39,0.5) 30%, var(--color-gold) 50%, rgba(201,162,39,0.5) 70%, transparent 100%); }
.stat-card::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 30%; background: linear-gradient(90deg, transparent, #fff7d6 50%, transparent); opacity: 0; mix-blend-mode: screen; }
.stats-strip.visible .stat-card::after { opacity: 0.9; animation: statSweep 3.6s ease-in-out infinite; }
.stats-strip.visible .stat-card:nth-child(1)::after { animation-delay: 1.2s; }
.stats-strip.visible .stat-card:nth-child(2)::after { animation-delay: 1.45s; }
.stats-strip.visible .stat-card:nth-child(3)::after { animation-delay: 1.7s; }
.stats-strip.visible .stat-card:nth-child(4)::after { animation-delay: 1.95s; }
@keyframes statSweep {
  0%   { transform: translateX(-30%); opacity: 0; }
  15%  { opacity: 0.9; }
  50%  { transform: translateX(350%); opacity: 0.9; }
  65%  { opacity: 0; }
  100% { transform: translateX(350%); opacity: 0; }
}
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(201,162,39,0.14); color: var(--color-gold-light); display: inline-flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 20px; height: 20px; }
.stat-eyebrow { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 600; text-align: right; }
.stat-number { font-family: var(--font-heading); font-weight: 700; font-size: 68px; line-height: 1; letter-spacing: -0.02em; color: #fff; margin-top: 6px; display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.stat-number-suffix { font-size: 28px; color: var(--color-gold-light); margin-left: 2px; font-weight: 600; letter-spacing: 0; }
.stat-label { font-family: var(--font-heading); font-style: italic; font-size: 17px; color: rgba(255,255,255,0.78); letter-spacing: 0.01em; }
.live-pulse { position: relative; display: inline-block; width: 8px; height: 8px; }
.live-pulse::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #5ad287; }
.live-pulse::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: #5ad287; opacity: 0.5; animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { transform: scale(1); opacity: 0.6 } 70% { transform: scale(2.4); opacity: 0 } 100% { transform: scale(2.4); opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .stats-strip.visible .stat-card::after { animation: none; opacity: 0; }
  .live-pulse::after { animation: none; }
  .stats-strip.visible .stat-card { transition-delay: 0s !important; }
}

/* ===== AROUND THE MOTEL (Amenities page) ===== */
.nearby-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) { .nearby-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .nearby-grid { grid-template-columns: repeat(3, 1fr); } }
.nearby-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.3s, border-color 0.3s; box-shadow: 0 8px 24px -16px rgba(15,29,58,0.18); display: flex; flex-direction: column; }
.nearby-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -22px rgba(15,29,58,0.28); border-color: rgba(201,162,39,0.4); }
.nearby-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-cream-dark); }
.nearby-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.nearby-card:hover .nearby-media img { transform: scale(1.05); }
.nearby-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,29,58,0.18) 0%, transparent 35%); pointer-events: none; }
.nearby-tag { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(15,29,58,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--color-gold-light); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(201,162,39,0.3); }
.nearby-body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.nearby-name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 600; color: var(--color-navy); line-height: 1.15; margin: 0; }
.nearby-desc { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; flex: 1; margin: 0; }
.nearby-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--color-gold-dark); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.nearby-meta svg { width: 13px; height: 13px; }

/* ===== TOUR VIDEO MODAL ===== */
.yt-modal { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(8,14,28,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 32px; animation: ytFade 0.22s ease-out both; }
.yt-modal.open { display: flex; }
.yt-modal-inner { position: relative; width: min(1100px, 100%); background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 60px 120px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08); animation: ytIn 0.28s cubic-bezier(0.2,0.7,0.2,1) both; display: flex; flex-direction: column; }
.yt-modal-video { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.yt-modal-video video, .yt-modal-video iframe { width: 100%; height: 100%; display: block; border: 0; }
.yt-modal-unmute { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(10,20,40,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: background 0.18s, opacity 0.25s ease, transform 0.18s; box-shadow: 0 10px 28px -10px rgba(0,0,0,0.5); animation: unmutePulse 2s ease-in-out 0.6s 2; }
.yt-modal-unmute:hover { background: rgba(10,20,40,0.92); transform: translateY(-1px); }
.yt-modal-unmute svg { width: 16px; height: 16px; color: var(--color-gold-light); }
.yt-modal-unmute.hidden { opacity: 0; pointer-events: none; transform: translateY(-4px); }
@keyframes unmutePulse {
  0%, 100% { box-shadow: 0 10px 28px -10px rgba(0,0,0,0.5), 0 0 0 0 rgba(201,162,39,0.5); }
  50%      { box-shadow: 0 10px 28px -10px rgba(0,0,0,0.5), 0 0 0 8px rgba(201,162,39,0); }
}
@media (prefers-reduced-motion: reduce) {
  .yt-modal-unmute { animation: none; }
}
.yt-modal-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 26px; background: var(--color-navy); border-top: 1px solid rgba(201,162,39,0.3); flex-wrap: wrap; }
.yt-modal-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.yt-modal-cta-title { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: #fff; line-height: 1.15; }
.yt-modal-cta-title em { font-style: italic; color: var(--color-gold-light); font-weight: 500; }
.yt-modal-cta-sub { font-size: 12.5px; color: rgba(255,255,255,0.65); letter-spacing: 0.02em; }
.yt-modal-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; background: var(--color-gold); color: var(--color-navy-dark); border: none; border-radius: 4px; font-weight: 600; font-size: 14px; font-family: var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 12px 28px -10px rgba(201,162,39,0.55); transition: background 0.18s, transform 0.18s; flex-shrink: 0; }
.yt-modal-cta-btn:hover { background: var(--color-gold-light); transform: translateY(-1px); }
.yt-modal-cta-btn svg { width: 14px; height: 14px; }
.yt-modal-close { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.18s; z-index: 2; }
.yt-modal-close:hover { background: rgba(255,255,255,0.2); }
.yt-modal-close svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .yt-modal { padding: 20px; }
  .yt-modal-cta { padding: 14px 18px; gap: 12px; }
  .yt-modal-cta-title { font-size: 18px; }
  .yt-modal-cta-btn { width: 100%; }
}
@keyframes ytFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ytIn { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }

/* ===== ADMIN PANEL ===== */
.admin-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-navy-dark); color: #fff; padding: var(--space-3) var(--space-4); z-index: 200; border-top: 2px solid var(--color-gold); }
.admin-bar.active { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.admin-bar-text { font-size: var(--text-sm); font-weight: 500; }
.admin-bar-text span { color: var(--color-gold); }
.admin-bar-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
body.admin-mode { padding-bottom: 60px; }

/* Editable highlights in admin mode */
body.admin-mode [data-editable] { outline: 2px dashed rgba(201,162,39,0.4); outline-offset: 2px; cursor: pointer; position: relative; transition: outline-color var(--transition-fast); }
body.admin-mode [data-editable]:hover { outline-color: var(--color-gold); }
body.admin-mode [data-editable]:focus { outline: 2px solid var(--color-gold); background: rgba(201,162,39,0.06); }
body.admin-mode .img-upload-zone { position: relative; cursor: pointer; }
body.admin-mode .img-upload-zone::after { content: '📷 Click to upload'; position: absolute; bottom: 8px; right: 8px; background: var(--color-navy); color: var(--color-gold); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); opacity: 0; transition: opacity var(--transition-fast); pointer-events: none; }
body.admin-mode .img-upload-zone:hover::after { opacity: 1; }

/* Admin login modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,29,58,0.6); backdrop-filter: blur(4px); z-index: 300; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal { background: #fff; border-radius: var(--radius-lg); padding: var(--space-8); max-width: 400px; width: 90%; box-shadow: var(--shadow-xl); }
.modal h3 { font-family: var(--font-heading); font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.modal p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }

/* Toast notification */
.toast { position: fixed; bottom: 80px; right: 20px; background: var(--color-navy); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; box-shadow: var(--shadow-lg); z-index: 250; transform: translateY(20px); opacity: 0; transition: all var(--transition-base); pointer-events: none; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-left: 4px solid var(--color-success); }
.toast.error { border-left: 4px solid var(--color-error); }

/* ===== SUCCESS MESSAGE ===== */
.form-success { display: none; text-align: center; padding: var(--space-8); }
.form-success.show { display: block; }
.form-success svg { width: 64px; height: 64px; color: var(--color-success); margin: 0 auto var(--space-4); }
.form-success h3 { font-family: var(--font-heading); font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.form-success p { color: var(--color-text-muted); }

/* ===== TOUR VIDEO ===== */
.tour-video-wrap { max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--color-navy-dark); }
.tour-video-wrap video { width: 100%; height: auto; display: block; }

/* ===== REVIEW TICKER ===== */
.review-ticker { background: var(--color-bg-alt); padding-block: var(--space-12) var(--space-12); overflow: hidden; position: relative; }
@media (min-width: 768px) { .review-ticker { padding-block: var(--space-16); } }
/* Decorative gold corner brackets */
.review-ticker::before, .review-ticker::after { content: ""; position: absolute; width: 120px; height: 120px; border: 1px solid rgba(201, 162, 39, 0.25); pointer-events: none; }
.review-ticker::before { top: 28px; left: 28px; border-right: 0; border-bottom: 0; }
.review-ticker::after { bottom: 28px; right: 28px; border-left: 0; border-top: 0; }

/* Trust badge row */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-bottom: var(--space-10); }
@media (max-width: 960px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 26px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 14px 32px -16px rgba(15,30,61,0.18); }
.trust-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand, var(--color-gold)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.trust-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -22px rgba(15,30,61,0.25); border-color: transparent; }
.trust-card:hover::before { transform: scaleX(1); }
.trust-card[data-brand="booking"]    { --brand: #003B95; }
.trust-card[data-brand="tripadvisor"]{ --brand: #00AA6C; }
.trust-card[data-brand="priceline"]  { --brand: #0068EF; }
.trust-card[data-brand="expedia"]    { --brand: #FFC72C; }
.verified-pill { position: absolute; top: 14px; right: 14px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #2e7d3f; background: #eaf6ec; padding: 4px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.verified-pill svg { width: 10px; height: 10px; }
.trust-logo { height: 38px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.trust-logo svg, .trust-logo img { height: 100%; width: auto; }
.trust-score { font-family: var(--font-heading); font-size: 60px; line-height: 1; color: var(--color-navy); font-weight: 700; letter-spacing: -1px; display: flex; align-items: baseline; gap: 2px; }
.trust-score .scale { font-size: 18px; color: var(--color-text-muted); font-weight: 500; font-family: var(--font-body); }
.trust-stars-bar { display: inline-flex; gap: 3px; margin: 12px 0 10px; position: relative; }
.trust-stars-bar .s-track { position: relative; display: inline-block; font-size: 20px; line-height: 1; color: #e0d8c5; letter-spacing: 2px; }
.trust-stars-bar .s-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--color-gold); white-space: nowrap; }
.trust-count { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }
.trust-count strong { color: var(--color-text); font-weight: 600; }
.trust-link { margin-top: 16px; font-size: 12px; font-weight: 600; color: var(--brand, var(--color-navy)); text-transform: uppercase; letter-spacing: 1.2px; display: inline-flex; align-items: center; gap: 6px; border-top: 1px solid var(--color-border); padding-top: 16px; width: 100%; justify-content: center; transition: color .2s; }
.trust-link .arrow { transition: transform .25s; }
.trust-card:hover .trust-link .arrow { transform: translateX(3px); }

/* Ticker intro stamp */
.ticker-intro { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0 0 36px; flex-wrap: wrap; }
.ticker-intro .stamp { font-family: var(--font-heading); font-size: 22px; color: var(--color-navy); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.ticker-intro .stamp::before, .ticker-intro .stamp::after { content: ""; display: inline-block; width: 42px; height: 1px; background: var(--color-gold); }

/* Ticker tracks (dual row) */
.review-ticker-track-wrap { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); }
.review-ticker-track { display: flex; gap: 26px; width: max-content; animation: review-scroll var(--ticker-duration, 280s) linear infinite; will-change: transform; }
.review-ticker-track-wrap:hover .review-ticker-track { animation-play-state: paused; }
.review-ticker-track.reverse { animation-direction: reverse; animation-duration: calc(var(--ticker-duration, 280s) * 1.15); margin-top: 26px; }
@keyframes review-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Review card — elevated, watermark quote */
.review-card { flex: 0 0 380px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px 28px 24px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; box-shadow: 0 18px 36px -24px rgba(15,30,61,0.2); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; min-height: 320px; }
@media (max-width: 640px) { .review-card { flex: 0 0 300px; min-height: 280px; padding: 22px 22px 18px; } }
.review-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -18px rgba(15,30,61,0.3); }
.review-card::before { content: "\201C"; position: absolute; top: -54px; left: 14px; font-family: var(--font-heading); font-size: 220px; line-height: 1; color: rgba(201, 162, 39, 0.14); font-weight: 700; pointer-events: none; }
.review-card::after { content: ""; position: absolute; top: 0; left: 30px; width: 40px; height: 3px; background: var(--color-gold); border-radius: 0 0 3px 3px; }
.review-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; position: relative; z-index: 1; }
.reviewer-info { min-width: 0; flex: 1; }
.reviewer-name { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--color-navy); margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.stay-type { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.45; letter-spacing: 0.1px; }
.review-source { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.review-source img { width: 100%; height: 100%; object-fit: contain; display: block; }
.review-source.text-fallback { width: auto; height: auto; font-size: var(--text-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--color-cream-dark); color: var(--color-text); white-space: nowrap; letter-spacing: 0.02em; }
.review-stars { display: inline-flex; gap: 3px; font-size: 17px; line-height: 1; color: #e0d8c5; position: relative; z-index: 1; letter-spacing: 1px; }
.review-stars .star { color: #e0d8c5; }
.review-stars .star.filled { color: var(--color-gold); }
.review-quote { font-family: var(--font-heading); font-size: 22px; line-height: 1.25; color: var(--color-navy); font-weight: 600; margin: 4px 0 0; letter-spacing: -0.3px; position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.review-body { font-size: 13.5px; line-height: 1.6; color: var(--color-text); margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; position: relative; z-index: 1; }
.review-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--color-border); display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; position: relative; z-index: 1; gap: 8px; }
.review-foot .verified { color: #2e7d3f; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.review-foot .verified svg { width: 11px; height: 11px; }
.review-link { color: var(--color-navy); text-decoration: none; font-weight: 600; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 4px; transition: color .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-link:hover { color: var(--color-gold-dark); }

@media (prefers-reduced-motion: reduce) {
  .review-ticker-track { animation: none; width: auto; }
  .review-ticker-track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ===== ROOMS PAGE V2 ===== */
.page-hero { background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 60%, var(--color-navy-light) 100%); color: #fff; padding: 64px 24px 80px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border: 1px solid rgba(201,162,39,0.15); border-radius: 50%; }
.page-hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border: 1px solid rgba(201,162,39,0.1); border-radius: 50%; }
.page-hero-inner { max-width: 1280px; margin: 0 auto; position: relative; }
.crumbs { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.crumbs a { color: rgba(255,255,255,0.7); cursor: pointer; }
.crumbs a:hover { color: var(--color-gold-light); }
.crumbs .sep { margin: 0 10px; color: var(--color-gold); }
.page-overline { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-light); font-weight: 600; margin-bottom: 12px; }
.page-title { font-family: var(--font-heading); font-size: clamp(40px, 5.5vw, 64px); font-weight: 600; line-height: 1.05; max-width: 16ch; letter-spacing: -0.01em; color: #fff; }
.page-title em { font-style: italic; color: var(--color-gold-light); font-weight: 500; }
.page-sub { color: rgba(255,255,255,0.72); max-width: 56ch; margin-top: 18px; font-size: 16px; line-height: 1.6; }

.rooms-section { padding: 80px 24px 40px; background: #fff; position: relative; }
.rooms-wrap { max-width: 1280px; margin: 0 auto; }
.rooms-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); }
.rooms-toolbar h2 { font-family: var(--font-heading); font-size: 30px; font-weight: 600; color: var(--color-navy); }
.rooms-toolbar h2 span { color: var(--color-text-muted); font-weight: 400; font-size: 22px; font-style: italic; margin-left: 8px; }
.toolbar-meta { display: flex; gap: 18px; align-items: center; color: var(--color-text-muted); font-size: 13px; flex-wrap: wrap; }
.toolbar-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-gold); }

.rooms-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 880px) { .rooms-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }

.room-card { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; transition: all 0.3s cubic-bezier(0.2,0.7,0.2,1); position: relative; box-shadow: 0 8px 24px -16px rgba(15,29,58,0.18); display: flex; flex-direction: column; }
.room-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(15,29,58,0.32); border-color: rgba(201,162,39,0.4); }
.room-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-cream-dark); cursor: pointer; }
.room-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
.room-card:hover .room-media img { transform: scale(1.04); }
.badge-row { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; z-index: 2; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.badge-popular { background: rgba(201,162,39,0.95); color: var(--color-navy-dark); }
.badge-price { background: rgba(255,255,255,0.95); color: var(--color-navy); padding: 8px 14px; font-family: var(--font-heading); font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1; display: inline-flex; align-items: baseline; gap: 4px; }
.badge-price small { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--color-text-muted); }
.photo-count { position: absolute; bottom: 14px; right: 14px; background: rgba(15,29,58,0.7); backdrop-filter: blur(8px); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; z-index: 2; }
.photo-count svg { width: 14px; height: 14px; }

.room-body { padding: 28px 28px 24px; display: flex; flex-direction: column; flex: 1; }
.room-name { font-family: var(--font-heading); font-size: 30px; font-weight: 600; color: var(--color-navy); line-height: 1.15; margin-bottom: 4px; }
.room-tagline { font-size: 13px; color: var(--color-gold-dark); font-weight: 500; letter-spacing: 0.04em; margin-bottom: 14px; text-transform: uppercase; }
.room-desc { color: var(--color-text-muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 20px; }

.room-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 24px; padding: 16px 0; border-top: 1px dashed var(--color-border); border-bottom: 1px dashed var(--color-border); }
.spec { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 4px; border-right: 1px solid var(--color-border); }
.spec:last-child { border-right: none; }
.spec-icon { width: 22px; height: 22px; color: var(--color-navy); opacity: 0.7; }
.spec-icon svg { width: 100%; height: 100%; }
.spec-label { font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.spec-value { font-size: 14px; color: var(--color-navy); font-weight: 600; }

.room-amenities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--color-cream); color: var(--color-navy); border: 1px solid var(--color-border); font-weight: 500; }

.room-actions { display: flex; gap: 12px; margin-top: auto; padding-top: 4px; }
.rd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 6px; font-size: 14px; font-weight: 600; transition: all 0.2s; border: 2px solid transparent; cursor: pointer; text-decoration: none; }
.rd-btn-gold { background: var(--color-gold); color: var(--color-navy-dark); flex: 1; }
.rd-btn-gold:hover { background: var(--color-gold-light); transform: translateY(-1px); }
.rd-btn-outline { background: transparent; color: var(--color-navy); border-color: var(--color-navy); flex: 1; }
.rd-btn-outline:hover { background: var(--color-navy); color: #fff; transform: translateY(-1px); }

/* All rooms include strip */
.includes-strip { max-width: 1280px; margin: 60px auto 0; padding: 0 24px; }
.includes-card { background: var(--color-navy); color: #fff; border-radius: 16px; padding: 40px 36px; position: relative; overflow: hidden; }
.includes-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-gold); }
.includes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.includes-head h3 { font-family: var(--font-heading); font-size: 26px; font-weight: 600; }
.includes-head h3 em { font-style: italic; color: var(--color-gold-light); }
.includes-head .meta { font-size: 13px; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; text-transform: uppercase; }
.includes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
@media (min-width: 720px) { .includes-grid { grid-template-columns: repeat(4, 1fr); } }
.include-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.85); }
.include-item svg { width: 18px; height: 18px; color: var(--color-gold-light); flex-shrink: 0; }

/* Drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(10,20,40,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 290; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 920px; background: #fff; z-index: 295; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); display: flex; flex-direction: column; box-shadow: -20px 0 80px -20px rgba(0,0,0,0.4); }
.drawer.open { transform: translateX(0); }
.drawer-header { flex-shrink: 0; position: relative; height: clamp(280px, 38vh, 460px); overflow: hidden; background: var(--color-navy-dark); }
.drawer-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.drawer-hero-img.active { opacity: 1; }
.drawer-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,20,40,0.85) 0%, rgba(10,20,40,0.2) 35%, rgba(10,20,40,0) 60%); pointer-events: none; }
.drawer-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.95); color: var(--color-navy); display: flex; align-items: center; justify-content: center; z-index: 5; transition: all 0.2s; backdrop-filter: blur(8px); border: none; cursor: pointer; }
.drawer-close:hover { background: #fff; transform: rotate(90deg); }
.drawer-close svg { width: 20px; height: 20px; }
.hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 4; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.25); transition: all 0.2s; cursor: pointer; }
.hero-nav:hover { background: rgba(255,255,255,0.95); color: var(--color-navy); }
.hero-nav.prev { left: 20px; }
.hero-nav.next { right: 20px; }
.hero-nav svg { width: 20px; height: 20px; }
.drawer-hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 36px 26px; z-index: 3; color: #fff; }
.dh-badges { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.dh-badge { background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.25); padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.dh-badge.gold { background: var(--color-gold); color: var(--color-navy-dark); border-color: var(--color-gold); }
.drawer-title { font-family: var(--font-heading); font-size: clamp(32px, 4.2vw, 46px); font-weight: 600; line-height: 1.05; color: #fff; }
.drawer-subtitle { color: rgba(255,255,255,0.85); font-size: 15px; margin-top: 6px; }
.hero-dots { position: absolute; bottom: 10px; right: 36px; display: flex; gap: 6px; z-index: 4; }
.hero-dot { width: 28px; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; cursor: pointer; transition: background 0.2s; }
.hero-dot.active { background: var(--color-gold); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
.drawer-body::-webkit-scrollbar { width: 8px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.rd-tabs { position: sticky; top: 0; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 5; border-bottom: 1px solid var(--color-border); display: flex; padding: 0 36px; gap: 28px; }
.rd-tab { padding: 18px 0; font-size: 14px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; position: relative; transition: color 0.2s; background: none; border: none; cursor: pointer; }
.rd-tab.active { color: var(--color-navy); }
.rd-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-gold); }
.rd-tab:hover { color: var(--color-navy); }

.drawer-section { padding: 32px 36px; border-bottom: 1px solid var(--color-border); }
.drawer-section:last-child { border-bottom: none; }
.section-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-dark); font-weight: 600; margin-bottom: 10px; }
.section-h { font-family: var(--font-heading); font-size: 26px; font-weight: 600; color: var(--color-navy); margin-bottom: 14px; line-height: 1.2; }
.section-p { color: var(--color-text); font-size: 15px; line-height: 1.7; }
.section-p + .section-p { margin-top: 14px; }

.facts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
@media (min-width: 640px) { .facts-row { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--color-cream); border-radius: 10px; padding: 16px 14px; text-align: center; }
.fact-icon { width: 28px; height: 28px; margin: 0 auto 8px; color: var(--color-navy); opacity: 0.85; }
.fact-icon svg { width: 100%; height: 100%; }
.fact-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.fact-value { font-size: 14px; font-weight: 600; color: var(--color-navy); }

.amen-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 8px 22px; margin-top: 18px; }
@media (min-width: 560px) { .amen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .amen-grid { grid-template-columns: repeat(3, 1fr); } }
.amen { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--color-text); }
.amen svg { width: 16px; height: 16px; color: var(--color-gold-dark); flex-shrink: 0; }

.rd-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
@media (min-width: 720px) { .rd-gallery { grid-template-columns: repeat(3, 1fr); } }
.gal-img { aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--color-cream-dark); cursor: pointer; position: relative; }
.gal-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gal-img:hover img { transform: scale(1.06); }
.gal-img.featured { grid-column: span 2; aspect-ratio: 16/10; }
@media (min-width: 720px) { .gal-img.featured { grid-row: span 2; aspect-ratio: auto; } }

.video-block { background: var(--color-navy-dark); border-radius: 12px; aspect-ratio: 16/9; position: relative; overflow: hidden; margin-top: 14px; cursor: pointer; }
.video-block img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.video-block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,20,40,0.4), rgba(10,20,40,0.6)); }
.video-block .v-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 14px; padding: 24px; text-align: center; }
.video-block .v-play { width: 72px; height: 72px; border-radius: 50%; background: var(--color-gold); color: var(--color-navy-dark); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.video-block:hover .v-play { transform: scale(1.08); }
.video-block .v-play svg { width: 28px; height: 28px; margin-left: 4px; }
.video-block .v-title { font-family: var(--font-heading); font-size: 22px; font-weight: 600; }
.video-block .v-sub { font-size: 13px; color: rgba(255,255,255,0.75); letter-spacing: 0.05em; text-transform: uppercase; }

.policy-list { margin-top: 12px; }
.policy { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.policy:last-child { border-bottom: none; }
.policy-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--color-cream); color: var(--color-navy); display: flex; align-items: center; justify-content: center; }
.policy-icon svg { width: 16px; height: 16px; }
.policy-name { font-size: 14px; font-weight: 600; color: var(--color-navy); }
.policy-detail { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }

.drawer-foot { flex-shrink: 0; padding: 18px 36px; border-top: 1px solid var(--color-border); background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-price { display: flex; align-items: baseline; gap: 4px; }
.foot-price .num { font-family: var(--font-heading); font-size: 34px; font-weight: 700; color: var(--color-navy); line-height: 1; }
.foot-price .per { font-size: 13px; color: var(--color-text-muted); }
.foot-price .from { display: block; font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; }
.foot-actions { display: flex; gap: 10px; }
.foot-actions .rd-btn { padding: 14px 22px; }

@media (max-width: 720px) {
  .drawer-section { padding: 24px 22px; }
  .rd-tabs { padding: 0 22px; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rd-tab { white-space: nowrap; }
  .drawer-hero-content { padding: 22px 22px 20px; }
  .hero-dots { right: 22px; }
  .drawer-foot { padding: 16px 22px; }
  .foot-actions { flex: 1; }
  .foot-actions .rd-btn { padding: 12px 16px; font-size: 13px; }
}

/* Lightbox */
.rd-lightbox { position: fixed; inset: 0; background: rgba(10,15,30,0.95); z-index: 350; display: none; align-items: center; justify-content: center; padding: 40px; }
.rd-lightbox.open { display: flex; }
.rd-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.rd-lightbox-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
.rd-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.rd-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }
.rd-lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.rd-lightbox-nav.prev { left: 24px; }
.rd-lightbox-nav.next { right: 24px; }
.rd-lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 14px; letter-spacing: 0.05em; }