/* ══════════════════════════════════════════
   SOULSETTERS PUBLIC — Dark Luxury Theme
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0a;
  --bg-card: #111;
  --bg-section: #0e0e0e;
  --gold: #c4a882;
  --gold-light: #d4bc9a;
  --gold-dim: #8a7560;
  --gold-rgb: 196, 168, 130;
  --text: #f5f0eb;
  --text-dim: #a09890;
  --text-muted: #6a6260;
  --border: #1e1c1a;
  --green: #5a6b4a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;

  /* ── Typography Scale ── */
  --fs-xs: 11px;       /* badges, labels, meta */
  --fs-sm: 13px;       /* captions, small details */
  --fs-base: 15px;     /* body text, descriptions */
  --fs-md: 17px;       /* paragraphs, section desc */
  --fs-lg: 19px;       /* intro text, editorial */
  --fs-xl: 22px;       /* featured text, editorial desc */

  /* ── Light-theme text colors ── */
  --cream: #faf8f5;
  --text-body: #4a3f35;
  --text-body-dim: #666;
  --text-body-muted: #888;

  /* ── Mobile floating action bar (brand menu + book now) ──
     Single source of truth for the two pill buttons shown on every brand
     page on mobile. Change these values and ALL brand pages update at once.
     Values below were reduced from the original chunky design. */
  --mbar-bottom: 10px;              /* distance from viewport bottom */
  --mbar-side: 14px;                /* distance from left/right */
  --mbar-gap: 8px;                  /* gap between the two buttons */
  --mbar-pad-y: 10px;               /* button vertical padding */
  --mbar-pad-x: 11px;               /* button horizontal padding (narrower) */
  --mbar-font-size: 9px;            /* button label size */
  --mbar-letter-spacing: 1.8px;     /* button label tracking */
  --mbar-menu-max-width: 240px;     /* centered menu button max width */
  --mbar-font-weight: 600;
  --mbar-radius: 22px;              /* button corner radius (pill) */
  --mbar-icon-size: 14px;           /* menu hamburger icon size */
  --mbar-icon-gap: 6px;             /* gap between icon and label */
  --mbar-shadow: 0 4px 16px rgba(0,0,0,0.35);
  --mbar-blur: 14px;                /* backdrop blur strength (slightly stronger for translucency) */
  --mbar-menu-bg: rgba(15,13,10,0.55);
  --mbar-menu-color: #c4a882;
  --mbar-menu-border: 1px solid rgba(196,168,130,0.45);
  --mbar-book-bg: linear-gradient(135deg, rgba(196,168,130,0.78), rgba(168,138,94,0.78));
  --mbar-book-color: #14110a;
  --mbar-book-border: 1px solid rgba(196,168,130,0.7);
}

/* ── Per-Brand Accent Tokens ── */
/* Each brand overrides --gold / --gold-light / --gold-dim so every
   component already using var(--gold) automatically re-themes.
   Perdue keeps the :root default champagne gold. */
body[data-brand="Nautical"] {
  --gold: #7ea7c9;
  --gold-light: #a8c6e0;
  --gold-dim: #5a7a95;
  --gold-rgb: 126, 167, 201;
}
body[data-brand="Rups"] {
  --gold: #c89373;
  --gold-light: #dcac8e;
  --gold-dim: #8e6550;
  --gold-rgb: 200, 147, 115;
}
body[data-brand="BlueVoyage"] {
  --gold: #6fa5b5;
  --gold-light: #92c0ce;
  --gold-dim: #4f7784;
  --gold-rgb: 111, 165, 181;
}
body[data-brand="Cleo"] {
  --gold: #c99f5c;
  --gold-light: #dcb97a;
  --gold-dim: #8f6e3c;
  --gold-rgb: 201, 159, 92;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Navbar ── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.08);
}
.navbar-inner {
  display: flex; align-items: center;
  padding: 20px 48px;
  max-width: 1400px; margin: 0 auto;
  gap: 0;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); transition: color 0.3s;
}
.nav-links a:hover { color: var(--gold); }

/* ── Brands Dropdown ── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); cursor: pointer; transition: color 0.3s;
  display: flex; align-items: center; gap: 4px;
}
.nav-dropdown-toggle:hover { color: var(--gold); }
.nav-dropdown-toggle::after {
  content: ''; display: inline-block; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; margin-left: 2px;
}
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 10px; min-width: 200px;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 10px 24px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); transition: all 0.2s; white-space: nowrap;
  background: rgba(15,15,15,0.97);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.nav-dropdown-menu a:first-child {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.nav-dropdown-menu a:last-child {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.nav-dropdown-menu a:hover { color: var(--gold); background: rgba(15,15,15,0.97); }
.nav-book {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 24px; border: 1px solid var(--gold-dim);
  border-radius: 24px;
  color: var(--gold); transition: all 0.3s;
  margin-left: 8px;
}
.nav-book:hover { background: var(--gold); color: var(--bg); }
.book-mobile { display: none; }
.book-desktop { display: inline; }
.nav-currency {
  background: none;
  font-family: var(--sans);
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 10px;
  margin-left: 20px;
  border: 1px solid rgba(var(--gold-rgb),0.2);
  border-radius: 16px;
  color: var(--gold-light);
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
}
.nav-currency:hover { border-color: var(--gold); color: var(--gold); }

/* ── Nav Language Selector ── */
.nav-lang-wrap {
  position: relative;
  margin-left: 10px;
}
.nav-lang {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans);
  font-size: 9px; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.5);
  padding: 4px 6px;
  display: flex; align-items: center; gap: 3px;
  transition: color 0.3s;
}
.nav-lang:hover { color: var(--gold); }
.nav-lang-caret { font-size: 7px; opacity: 0.6; }
.nav-lang-menu {
  display: none;
  position: absolute; top: 100%; right: 0;
  margin-top: 6px; padding: 6px 0;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 110px;
  z-index: 200;
  list-style: none;
}
.nav-lang-wrap.open .nav-lang-menu { display: block; }
.nav-lang-menu button {
  display: block; width: 100%;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 1px;
  color: var(--text-muted);
  padding: 8px 16px;
  text-align: left;
  transition: color 0.2s;
}
.nav-lang-menu button:hover { color: var(--gold); }
.nav-lang-menu button.active { color: var(--gold); font-weight: 500; }
.nav-lang-menu .nav-lang-option {
  display: block;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-lang-menu .nav-lang-option:hover { color: var(--gold); }
.nav-lang-menu .nav-lang-option.active { color: var(--gold); font-weight: 500; }
.nav-lang-menu .nav-lang-option.disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
}
.nav-lang-menu .nav-lang-option.disabled:hover { color: rgba(255, 255, 255, 0.25); }

/* ── Hamburger ── */
.nav-hamburger {
  display: none; cursor: pointer; flex-direction: column;
  gap: 5px; padding: 14px; z-index: 101;
  -webkit-tap-highlight-color: transparent;
}
.nav-hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--gold); transition: all 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile Menu ── */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: rgba(10,10,10,0.97); backdrop-filter: blur(20px);
  flex-direction: column; align-items: center; justify-content: center; gap: 0;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--serif); font-size: 20px; font-weight: 300;
  color: var(--text-dim); padding: 12px 0;
  transition: color 0.3s; letter-spacing: 2px;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu .mobile-book {
  margin-top: 32px; font-family: var(--sans);
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  padding: 14px 40px; border: 1px solid var(--gold-dim);
  color: var(--gold); font-weight: 400;
}

/* ── Mobile Hero & Brand Picker ── */
.mobile-hero {
  display: none; /* shown via media query */
  position: relative; height: 100vh; height: 100dvh;
  overflow: hidden;
}
/* Slider slides */
.hero-slide-bg {
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide-bg.active { opacity: 1; }
.hero-text-slide, .mobile-hero-brand-text {
  display: none;
}
.hero-text-slide.active, .mobile-hero-brand-text.active {
  display: block;
  animation: fadeSlideText 0.8s ease;
}
@keyframes fadeSlideText {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero Arrows */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; background: rgba(0,0,0,0.52); border: 1px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 36px; width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%; transition: all 0.3s;
  backdrop-filter: blur(6px); line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.hero-arrow:hover { background: rgba(var(--gold-rgb),0.55); border-color: var(--gold); color: #fff; }
.hero-arrow-left { left: 24px; }
.hero-arrow-right { right: 24px; }

/* Hero Dots */
.hero-dots {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 10;
  padding: 8px 14px;
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.95);
  cursor: pointer;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  transition: width 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hero-dot.active {
  background: var(--gold); border-color: var(--gold);
  width: 22px;
  border-radius: 5px;
}
.hero-dot:hover { background: rgba(255,255,255,0.6); }
/* Mobile keeps tap-target generous WITHOUT visual overlap — wrap target in
   pseudo via larger background-clip, but keep visual size compact. */
@media (max-width: 768px) {
  .hero-dots { gap: 12px; padding: 9px 16px; }
  .hero-dot {
    width: 8px; height: 8px;
    /* Generous touch zone via positioning, not via padding (which broke
       layout previously). */
    position: relative;
  }
  .hero-dot::before {
    content: '';
    position: absolute;
    inset: -10px;
  }
  .hero-dot.active { width: 22px; }
}

/* ── Desktop Hero Brand Nav ── */
/* Hero dibinde, slider dots uzerinde — ilk acilista markalari dogrudan secme */
.hero-brand-nav {
  position: absolute;
  bottom: 82px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 10;
  padding: 11px 26px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.hero-brand-nav-item {
  font-size: 11px;
  letter-spacing: 2.6px;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.28s ease, letter-spacing 0.28s ease;
  font-weight: 500;
}
.hero-brand-nav-item:hover {
  color: var(--gold);
  letter-spacing: 3.2px;
}
.hero-brand-nav-item.active {
  color: var(--gold);
}
.hero-brand-nav-sep {
  color: rgba(var(--gold-rgb), 0.4);
  font-size: 10px;
  line-height: 1;
  user-select: none;
}
@media (max-width: 768px) {
  /* Mobile'da zaten .brand-picker var — duplicate gostermiyoruz */
  .desktop-hero .hero-brand-nav { display: none; }
}
/* Desktop hero brand nav'i kullanici istegiyle tamamen gizlendi (2026-04-15).
   Markup ve goToSlide'daki .active sync JS'i yerinde, re-enable istendiginde
   sadece bu kural silinecek. */
.hero-brand-nav { display: none !important; }

.mobile-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.mobile-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.85) 100%);
}
.mobile-hero-dark {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, var(--ovr-m, 0));
  pointer-events: none;
  transition: background 0.5s ease;
}

/* Brand Picker */
.brand-picker {
  position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 48px); max-width: 360px;
  z-index: 10;
}

/* Closed state: pill button with text + chevron below */
.brand-picker-toggle {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 32px 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
  transition: all 0.3s;
}
.brand-picker-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: 3px;
  color: #fff; text-transform: uppercase;
}
.brand-picker-chevron {
  color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1;
  margin-top: 6px;
  transition: transform 0.3s;
}

/* Open state: single unified panel */
.brand-picker.open .brand-picker-toggle {
  border-radius: 16px 16px 0 0;
  border-bottom-color: rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
}
.brand-picker-list {
  display: none; flex-direction: column; align-items: center;
  padding: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
  border-top: none;
  border-radius: 0 0 16px 16px;
}
.brand-picker.open .brand-picker-list { display: flex; }

.brand-picker-item {
  display: block; width: 100%; text-align: center;
  font-family: var(--sans); font-size: 13px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
  padding: 15px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
}
.brand-picker-item:last-child { border-bottom: none; }
.brand-picker-item:hover { color: var(--gold-light); }
.brand-picker-item.active { color: var(--gold); font-weight: 500; }

/* Chevron at the bottom of the open panel */
.brand-picker-bottom {
  display: none; padding: 10px 0 14px; text-align: center;
  cursor: pointer;
}
.brand-picker.open .brand-picker-bottom { display: block; }
.brand-picker-bottom-chevron {
  color: rgba(255,255,255,0.5); font-size: 14px;
}

/* Bottom Brand Display — lifted up a touch on mobile */
.mobile-hero-brand {
  position: absolute; bottom: 120px; left: 0; right: 0;
  text-align: center; z-index: 10;
}
.mobile-hero-brand-logo {
  display: block; margin: 0 auto 10px; width: 240px; max-width: 70vw; height: auto;
}
.mobile-hero-brand-name {
  font-family: var(--serif); font-size: 32px; font-weight: 200;
  color: #fff; line-height: 1.2; margin-bottom: 8px;
}
.mobile-hero-brand-name em {
  font-style: italic; color: var(--gold-light);
}
.mobile-hero-brand-tagline {
  font-family: var(--sans); font-size: 12px; letter-spacing: 2px;
  color: rgba(255,255,255,0.7); text-transform: uppercase;
}

/* ── Hero Section ── */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  z-index: 0;
}
/* Hero video slide — video fills container like a bg-image (full-bleed, muted loop) */
.hero-slide-video {
  background: #0a0a0a;
}
.hero-slide-video > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.85) 100%);
}
.hero-dark {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, var(--ovr-d, 0));
  pointer-events: none;
  transition: background 0.5s ease;
}
.hero-content { position: relative; z-index: 2; max-width: 700px; padding: 0 20px; }
.hero-badge {
  display: inline-block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); padding: 8px 20px; border: 1px solid rgba(var(--gold-rgb),0.3);
  margin-bottom: 24px;
}
.hero-brand {
  font-size: 12px; letter-spacing: 8px; text-transform: uppercase;
  color: rgba(var(--gold-rgb),0.5); margin-bottom: 16px;
}
.hero h1 {
  font-family: var(--serif); font-size: 72px; font-weight: 200;
  line-height: 1.1; margin-bottom: 12px;
}
.hero h1 em { font-style: italic; color: var(--gold); }
/* Desktop brand logo — shown on first slide in place of h1 (matches mobile pattern) */
.desktop-hero-brand-logo {
  display: block;
  margin: 0 auto 22px;
  width: 420px;
  max-width: 52vw;
  height: auto;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.35));
}
@media (max-width: 1100px) {
  .desktop-hero-brand-logo { width: 360px; }
}

/* ── Hero logo overlay (per-slide) + elegant gold scroll cue ──
   Logo overlay sits above the slide background, fades in when its slide
   is active. Scroll cue is a refined gold button anchored bottom-center. */
.hero-logo-overlay,
.mobile-hero-logo-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.2s;
  width: var(--hero-logo-size, 280px);
  max-width: 88vw;
}
.hero-logo-overlay.is-active,
.mobile-hero-logo-overlay.is-active {
  opacity: 1;
}
.hero-logo-overlay img,
.mobile-hero-logo-overlay img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
.hero-logo-overlay--top { top: 16%; }
.hero-logo-overlay--middle { top: 50%; transform: translate(-50%, -50%); }
.hero-logo-overlay--bottom { bottom: 20%; }

@media (max-width: 768px) {
  .mobile-hero-logo-overlay {
    max-width: 75vw;
  }
  .hero-logo-overlay--top { top: 20%; }
  .hero-logo-overlay--bottom { bottom: 26%; }
}

/* Desktop scroll cue — text label + gold-bordered chevron circle */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(245, 240, 235, 0.92);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease 0.3s;
}
.hero-scroll-cue.is-active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.hero-scroll-cue-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  font-weight: 500;
  color: inherit;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transition: letter-spacing 0.35s ease, color 0.35s ease;
}
.hero-scroll-cue-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(196, 168, 130, 0.55);
  background: rgba(10, 10, 10, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #c4a882);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  animation: heroCueBounce 2.6s ease-in-out infinite;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
@keyframes heroCueBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.hero-scroll-cue:hover .hero-scroll-cue-arrow {
  border-color: rgba(196, 168, 130, 0.95);
  background: rgba(196, 168, 130, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(196, 168, 130, 0.35);
}
.hero-scroll-cue:hover .hero-scroll-cue-label {
  letter-spacing: 5.5px;
  color: var(--gold, #c4a882);
}
.hero-scroll-cue:focus-visible .hero-scroll-cue-arrow {
  outline: 2px solid var(--gold, #c4a882);
  outline-offset: 3px;
}

/* Mobile scroll cue — simpler, just the gold circle.
   Positioned above the slider dots (dots sit at bottom: 56px, ~22px high on mobile,
   so the cue needs at least ~92px clearance). Bumped to 118px for a calm visual gap. */
.mobile-hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  z-index: 4;
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(196, 168, 130, 0.6);
  background: rgba(10, 10, 10, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold, #c4a882);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  animation: heroCueBounce 2.6s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
}
.mobile-hero-scroll-cue.is-active {
  display: flex;
  opacity: 1;
}
/* SVG inside inline <span> was sitting on text baseline → arrow appeared
   slightly above the circle's center. Force flex centering on the span. */
.mobile-hero-scroll-cue .mobile-hero-scroll-cue-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.mobile-hero-scroll-cue .mobile-hero-scroll-cue-arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .hero-scroll-cue { display: none !important; }
}
@media (min-width: 769px) {
  .mobile-hero-scroll-cue { display: none !important; }
}

.hero-sub {
  font-size: 12px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 24px;
}
.hero-desc {
  font-size: var(--fs-lg); color: var(--text-dim); font-weight: 300;
  line-height: 1.85; margin-bottom: 36px;
}
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── Hero text contrast — WCAG AA text-shadow safety net ── */
.hero h1, .hero-sub, .hero-desc, .hero-badge, .hero-brand,
.mobile-hero-brand-name, .mobile-hero-brand-tagline,
.hero-text-slide, .mobile-hero-brand-text,
.page-hero-title, .page-hero-label,
.brand-hero-tagline,
.concept-hero-title, .concept-hero-kicker, .concept-hero-sub,
.bxp-hero-title, .bxp-hero-kicker,
.pxp-hero-title, .pxp-hero-kicker, .pxp-hero-sub,
.room-detail-hero-sub {
  text-shadow: 2px 2px 8px rgba(0,0,0,0.65), 0 0 32px rgba(0,0,0,0.35);
}

/* ── Buttons ── */
.btn-gold {
  display: inline-block; font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase; padding: 14px 32px;
  background: var(--gold); color: var(--bg); transition: all 0.3s;
}
.btn-gold:hover { background: var(--gold-light); }
.btn-outline {
  display: inline-block; font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase; padding: 14px 32px;
  border: 1px solid var(--gold-dim); color: var(--gold); transition: all 0.3s;
}
.btn-outline:hover { background: var(--gold); color: var(--bg); }

/* ── Section ── */
.section {
  padding: 100px 40px;
  max-width: 1200px; margin: 0 auto;
}
.section-label {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.section-title {
  font-family: var(--serif); font-size: 48px; font-weight: 300;
  color: var(--text); margin-bottom: 20px;
}
.section-desc {
  font-size: var(--fs-md); color: var(--text-dim); line-height: 1.9;
  max-width: 600px; margin-bottom: 40px;
}

/* ── Brand Cards ── */
.brands-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.brand-card {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  border: 1px solid var(--border); transition: all 0.4s;
}
.brand-card:hover { border-color: var(--gold-dim); transform: translateY(-4px); }
.brand-card-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: brightness(0.35); transition: all 0.6s;
}
.brand-card:hover .brand-card-bg { filter: brightness(0.45); transform: scale(1.05); }
.brand-card-content {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px;
}
.brand-card-type {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.brand-card-name {
  font-family: var(--serif); font-size: 28px; font-weight: 300;
  color: var(--text); margin-bottom: 8px;
}
.brand-card-tagline {
  font-size: 13px; color: var(--text-dim); font-style: italic;
  margin-bottom: 16px;
}
.brand-card-link {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 8px;
}

/* ── Room Cards ── */
.rooms-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}
.room-card {
  border: 1px solid var(--border); overflow: hidden;
  transition: all 0.4s;
}
.room-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.room-card-img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  background: linear-gradient(135deg, #1a1510 0%, #0e0e0e 100%);
  background-size: cover; background-position: center;
}
.room-card-body { padding: 24px; }
.room-card-brand {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.room-card-name {
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  color: var(--text); margin-bottom: 6px;
}
.room-card-sub {
  font-size: 12px; color: var(--text-muted); font-style: italic;
  margin-bottom: 12px;
}
.room-card-meta {
  display: flex; gap: 16px; font-size: 11px; color: var(--text-dim);
  margin-bottom: 16px;
}
.room-card-meta span { display: flex; align-items: center; gap: 4px; }
.room-card-price {
  font-family: var(--serif); font-size: 20px; color: var(--gold);
  font-weight: 300;
}
.room-card-price small { font-size: 11px; color: var(--text-muted); font-family: var(--sans); }

/* ── Room Detail ── */
.room-hero {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 85vh; margin-top: 70px;
}
.room-hero-img {
  background-size: cover; background-position: center;
  min-height: 500px;
}
.room-hero-info {
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px;
}
.room-hero-brand {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.room-hero-name {
  font-family: var(--serif); font-size: 48px; font-weight: 300;
  color: var(--text); margin-bottom: 8px;
}
.room-hero-subtitle {
  font-size: 15px; color: var(--text-dim); font-style: italic;
  margin-bottom: 24px;
}
.room-hero-price {
  font-family: var(--serif); font-size: 28px; color: var(--gold);
  font-weight: 300; margin-bottom: 24px;
}
.room-hero-price small { font-size: 12px; color: var(--text-muted); font-family: var(--sans); }
.room-hero-desc {
  font-size: var(--fs-md); color: var(--text-dim); line-height: 1.9;
  margin-bottom: 32px;
}
.room-hero-desc p { margin-bottom: 16px; }
.room-hero-meta {
  display: flex; gap: 32px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.room-meta-item { text-align: center; }
.room-meta-num {
  font-family: var(--serif); font-size: 24px; color: var(--gold); font-weight: 300;
}
.room-meta-label {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); margin-top: 4px;
}

/* ── Features/Amenities Grid ── */
.features-section { padding: 80px 40px; max-width: 1200px; margin: 0 auto; }
.features-title {
  font-family: var(--serif); font-size: 32px; font-weight: 300;
  margin-bottom: 32px; color: var(--text);
}
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.feature-item {
  padding: 14px 18px; border: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
  display: flex; align-items: center; gap: 10px;
  transition: border-color 0.3s;
}
.feature-item:hover { border-color: var(--gold-dim); }
.feature-icon { color: var(--gold); font-size: 14px; }

/* ── Gallery ── */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px; margin-top: 32px;
}
.gallery-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: filter 0.3s; cursor: pointer;
}
.gallery-img:hover { filter: brightness(1.1); }

/* ── Brand Gallery Slider ── */
.brand-gallery-section {
  padding: 80px 0;
  background: var(--bg);
  overflow: hidden;
}
.brand-gallery-header {
  text-align: center;
  margin-bottom: 40px;
}
.brand-gallery-slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.brand-gallery-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.brand-gallery-track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 10px 0;
}
.brand-gallery-slide {
  flex: 0 0 60%;
  border-radius: 12px;
  overflow: hidden;
}
.brand-gallery-slide img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
/* Arrows */
.brand-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  color: rgba(196,168,130,0.45);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}
.brand-gallery-arrow:hover {
  color: var(--gold);
  transform: translateY(-50%) scale(1.15);
}
.brand-gallery-arrow--left { left: 16px; }
.brand-gallery-arrow--right { right: 16px; }
/* Dots */
.brand-gallery-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.brand-gallery-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(160,134,96,0.35);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
}
@media (max-width: 768px) {
  .brand-gallery-dot { padding: 8px; margin: -8px; }
}
.brand-gallery-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.3);
}
.brand-gallery-dot:hover:not(.active) {
  border-color: var(--gold);
  background: rgba(160,134,96,0.25);
}
@media (max-width: 768px) {
  .brand-gallery-dot { width: 12px; height: 12px; padding: 8px; margin: -8px; }
  .brand-gallery-dots { gap: 12px; }
  .brand-gallery-slide { flex: 0 0 85%; }
  .brand-gallery-arrow--left { left: 4px; }
  .brand-gallery-arrow--right { right: 4px; }
}

/* ══════════════════════════════════════════
   BRAND — Gallery Mosaic + Lightbox
   ══════════════════════════════════════════ */
/* ── Gallery Preview (brand home compact thumbnails) ── legacy, kept for
     any pages still using the tight thumb strip. New brand homes use
     .gallery-mosaic (below). */
.gallery-preview {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.gallery-preview-thumb {
  width: 120px; height: 120px;
  overflow: hidden; border-radius: 3px;
  line-height: 0;
  transition: transform 0.3s ease, opacity 0.3s;
}
.gallery-preview-thumb:hover { transform: scale(1.05); opacity: 0.85; }
.gallery-preview-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ── Gallery Mosaic (brand home — mobile-safe 3×2 grid) ── #6/#11
   Six-tile masonry-style cluster. Equal-sized tiles for visual rhythm.
   Mobile collapses to a 2-column grid that stacks cleanly without
   horizontal scroll or overlap. */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}
.gallery-mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  line-height: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.45s;
}
.gallery-mosaic-tile:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 14px 36px rgba(0,0,0,0.36);
}
.gallery-mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}
.gallery-mosaic-tile:hover img { transform: scale(1.06); }

/* Mosaic accent: second tile spans two columns for editorial rhythm */
.gallery-mosaic--home .gmt--b { grid-column: span 2; }

/* Tablet — drop to 2 columns, reset spans */
@media (max-width: 960px) and (min-width: 769px) {
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
    padding: 0 16px;
  }
  .gallery-mosaic--home .gmt--b { grid-column: auto; }
}

/* Phone — horizontal swipe carousel (parmakla kaydır) */
@media (max-width: 768px) {
  .gallery-mosaic--home {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 16px;
    gap: 12px;
    padding: 4px 16px 12px;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* old IE/Edge */
  }
  .gallery-mosaic--home::-webkit-scrollbar { display: none; }
  .gallery-mosaic--home .gallery-mosaic-tile,
  .gallery-mosaic--home .gmt--a,
  .gallery-mosaic--home .gmt--b,
  .gallery-mosaic--home .gmt--c,
  .gallery-mosaic--home .gmt--d,
  .gallery-mosaic--home .gmt--e,
  .gallery-mosaic--home .gmt--f {
    flex: 0 0 86%;                /* sıradaki tile %14 görünür → swipe ipucu */
    grid-column: auto;
    grid-row: auto;
    height: 360px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 10px;
  }
  /* İlk ve son tile'a kenar boşluğu — center-snap görsel olarak ortalansin */
  .gallery-mosaic--home .gallery-mosaic-tile:first-child { margin-left: 4px; }
  .gallery-mosaic--home .gallery-mosaic-tile:last-child  { margin-right: 4px; }
}

/* Küçük telefonlarda biraz daha kısa */
@media (max-width: 420px) {
  .gallery-mosaic--home .gallery-mosaic-tile { height: 300px; flex-basis: 88%; }
}

/* Swipe dots — disabled per user feedback (cluttered + clashed with hero
   scroll cue on mobile). Carousel still works via touch swipe + mouse drag;
   the indicator is just removed for visual cleanliness. */
.gallery-mosaic-dots { display: none !important; }
.gallery-preview-cta {
  text-align: center; margin-top: 28px;
}

/* ══════════════════════════════════════════
   BRAND HOME — Interactive Editorial Gallery (.bhgx)
   Desktop: 12-col asymmetric mosaic w/ parallax hover
   Mobile : scroll-snap swipe carousel + dots + counter + lightbox
   ══════════════════════════════════════════ */
.bhgx-section { padding: 80px 0; background: var(--bg); overflow: hidden; }

/* Desktop grid */
.bhgx-stage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.bhgx-tile {
  position: relative;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  background: #111;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: box-shadow 0.4s cubic-bezier(.22,.61,.36,1);
  -webkit-tap-highlight-color: transparent;
}
.bhgx-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bhgx-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.bhgx-tile:hover { box-shadow: 0 20px 44px rgba(0,0,0,0.45); }
.bhgx-tile:hover img { transform: scale(1.06); }

/* Editorial 7-tile asymmetric layout (12 cols × 3 rows) */
.bhgx-t1 { grid-column: 1 / 7;  grid-row: 1 / 3; }  /* hero big-left (2×2) */
.bhgx-t2 { grid-column: 7 / 10; grid-row: 1 / 2; }
.bhgx-t3 { grid-column: 10 / 13; grid-row: 1 / 2; }
.bhgx-t4 { grid-column: 7 / 13; grid-row: 2 / 3; }  /* wide-right */
.bhgx-t5 { grid-column: 1 / 5;  grid-row: 3 / 4; }
.bhgx-t6 { grid-column: 5 / 9;  grid-row: 3 / 4; }
.bhgx-t7 { grid-column: 9 / 13; grid-row: 3 / 4; }

/* Layout fallbacks for fewer tiles (keep editorial rhythm, no gaps) */
.bhgx-stage[data-bhgx-count="6"] .bhgx-t5 { grid-column: 1 / 7;  grid-row: 3 / 4; }
.bhgx-stage[data-bhgx-count="6"] .bhgx-t6 { grid-column: 7 / 13; grid-row: 3 / 4; }

.bhgx-stage[data-bhgx-count="5"] .bhgx-t5 { grid-column: 1 / 13; grid-row: 3 / 4; }

.bhgx-stage[data-bhgx-count="4"] .bhgx-t1 { grid-column: 1 / 7;  grid-row: 1 / 3; }
.bhgx-stage[data-bhgx-count="4"] .bhgx-t2 { grid-column: 7 / 13; grid-row: 1 / 2; }
.bhgx-stage[data-bhgx-count="4"] .bhgx-t3 { grid-column: 7 / 13; grid-row: 2 / 3; }
.bhgx-stage[data-bhgx-count="4"] .bhgx-t4 { display: none; }

.bhgx-stage[data-bhgx-count="3"] .bhgx-t1 { grid-column: 1 / 7;  grid-row: 1 / 3; }
.bhgx-stage[data-bhgx-count="3"] .bhgx-t2 { grid-column: 7 / 13; grid-row: 1 / 2; }
.bhgx-stage[data-bhgx-count="3"] .bhgx-t3 { grid-column: 7 / 13; grid-row: 2 / 3; }

/* Chrome overlay (number + cue) */
.bhgx-chrome {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px 18px;
  pointer-events: none;
  color: rgba(255,255,255,0.95);
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 48%);
  opacity: 0;
  transition: opacity 0.35s;
}
.bhgx-tile:hover .bhgx-chrome,
.bhgx-tile:focus-visible .bhgx-chrome { opacity: 1; }
.bhgx-num {
  font-family: 'Playfair Display', serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
}
.bhgx-cue {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  transform: translateY(6px);
  transition: transform 0.35s, background 0.35s;
}
.bhgx-tile:hover .bhgx-cue {
  transform: translateY(0);
  background: rgba(255,255,255,0.16);
}

/* Mobile bar hidden by default */
.bhgx-mobilebar { display: none; }

/* Tablet — simplified 6-col editorial */
@media (max-width: 1024px) and (min-width: 769px) {
  .bhgx-stage {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 160px;
    gap: 10px;
    padding: 0 16px;
  }
  .bhgx-t1 { grid-column: 1 / 5; grid-row: 1 / 3; }
  .bhgx-t2 { grid-column: 5 / 7; grid-row: 1 / 2; }
  .bhgx-t3 { grid-column: 5 / 7; grid-row: 2 / 3; }
  .bhgx-t4 { grid-column: 1 / 4; grid-row: 3 / 4; }
  .bhgx-t5 { grid-column: 4 / 7; grid-row: 3 / 4; }
  .bhgx-t6 { grid-column: 1 / 4; grid-row: 4 / 5; }
  .bhgx-t7 { grid-column: 4 / 7; grid-row: 4 / 5; }
}

/* Mobile — swipe carousel */
@media (max-width: 768px) {
  .bhgx-stage {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 16px 8px;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .bhgx-stage::-webkit-scrollbar { display: none; }
  .bhgx-tile,
  .bhgx-t1, .bhgx-t2, .bhgx-t3, .bhgx-t4,
  .bhgx-t5, .bhgx-t6, .bhgx-t7 {
    flex: 0 0 82%;
    grid-column: auto;
    grid-row: auto;
    height: 280px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 12px;
  }
  .bhgx-tile:first-child { margin-left: 4px; }
  .bhgx-tile:last-child  { margin-right: 4px; }
  /* Chrome subtly visible on mobile so tap cue is read */
  .bhgx-chrome {
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.38) 0%, transparent 55%);
    padding: 14px;
  }
  .bhgx-cue { width: 30px; height: 30px; transform: none; }
  .bhgx-num { font-size: 11px; }

  .bhgx-mobilebar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 0 16px;
  }
  /* Dotlar: gercek gorsel 6px, tap target 24px (12px padding her yana). gap
     12px ki tap target'lar uzgun-aralikli kalsin (ust-uste binme yok). */
  .bhgx-dots {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .bhgx-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(160,134,96,0.35);
    cursor: pointer;
    padding: 9px;                 /* tap area 24px without overlap */
    margin: 0;
    box-sizing: content-box;
    background-clip: content-box;
    transition: background 0.3s, width 0.3s, border-radius 0.3s;
    flex-shrink: 0;
  }
  .bhgx-dot.is-active {
    background: var(--gold);
    width: 16px;
    border-radius: 3px;
    background-clip: content-box;
  }
  .bhgx-counter {
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    color: var(--gold);
    opacity: 0.75;
    letter-spacing: 0.12em;
  }
  .bhgx-sep { margin: 0 5px; opacity: 0.5; }
}
@media (max-width: 420px) {
  .bhgx-stage .bhgx-tile { height: 240px; flex-basis: 86%; }
}

/* BV variant — dark section + rope accent */
.bhgx-section--bv {
  background: var(--bv-night, #061420);
  padding: 80px 24px;
}
.bhgx-section--bv .bvh-gallery-eyebrow { margin-bottom: 36px; }
.bhgx-section--bv .bhgx-tile { box-shadow: 0 12px 32px rgba(0,0,0,0.55); }
.bhgx-section--bv .bhgx-tile:hover { box-shadow: 0 24px 54px rgba(0,0,0,0.72); }
.bhgx-section--bv .bhgx-tile:focus-visible { outline-color: var(--bv-rope, #bc946c); }
@media (max-width: 768px) {
  .bhgx-section--bv .bhgx-dot { background: rgba(188,148,108,0.35); }
  .bhgx-section--bv .bhgx-dot.is-active { background: var(--bv-rope, #bc946c); }
  .bhgx-section--bv .bhgx-counter { color: var(--bv-rope, #bc946c); }
}

/* ── Gallery Mosaic (full gallery page) ── */
.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.gallery-mosaic-item {
  position: relative; overflow: hidden; border-radius: 4px;
  cursor: pointer; line-height: 0;
}
.gallery-mosaic-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}
.gallery-mosaic-item:hover img { transform: scale(1.08); }
.gallery-mosaic-hover {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.gallery-mosaic-item:hover .gallery-mosaic-hover { opacity: 1; }
.gallery-mosaic-icon {
  width: 44px; height: 44px; border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: 300;
  transform: scale(0.8); transition: transform 0.3s ease;
}
.gallery-mosaic-item:hover .gallery-mosaic-icon { transform: scale(1); }

/* Uniform item height */
.gallery-mosaic-item { height: 240px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.92);
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px; z-index: 3;
  background: none; border: none; color: #fff;
  font-size: 36px; cursor: pointer; opacity: 0.7;
  transition: opacity 0.2s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; background: none; border: none;
  color: #fff; font-size: 56px; cursor: pointer;
  opacity: 0.5; transition: opacity 0.2s;
  padding: 10px;
}
.lightbox-arrow:hover { opacity: 1; }
.lightbox-arrow--left { left: 16px; }
.lightbox-arrow--right { right: 16px; }
.lightbox-img-wrap {
  position: relative; z-index: 2;
  max-width: 90vw; max-height: 85vh;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; user-select: none;
}
.lightbox-img-wrap img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain; border-radius: 4px;
  user-select: none; -webkit-user-drag: none;
}
.lightbox-counter {
  position: absolute; bottom: 24px; left: 50%;
  transform: translateX(-50%); z-index: 3;
  font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,0.5);
}

/* Gallery responsive */
@media (max-width: 768px) {
  .gallery-preview-thumb { width: 100px; height: 100px; }
  .gallery-mosaic {
    grid-template-columns: 1fr 1fr; gap: 3px; padding: 0 16px;
  }
  .gallery-mosaic-item { height: 180px; }
  .lightbox-arrow { font-size: 40px; }
  .lightbox-arrow--left { left: 8px; }
  .lightbox-arrow--right { right: 8px; }
}
@media (max-width: 480px) {
  .gallery-preview-thumb { width: 80px; height: 80px; }
  .gallery-mosaic { grid-template-columns: 1fr 1fr; gap: 3px; }
  .gallery-mosaic-item { height: 160px; }
}

/* ── Related Rooms ── */
.related { padding: 80px 40px; max-width: 1200px; margin: 0 auto; }

/* ══════════════════════════════════════════
   BRAND PAGES — Light/Airy Sub-Site
   ══════════════════════════════════════════ */

/* ── Brand Hero (slim) ── */
.brand-hero {
  position: relative; height: 50vh; min-height: 320px; max-height: 500px;
  overflow: hidden; margin-top: 68px; /* navbar height */
}
.brand-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  /* Center vertically so tall source images don't clip their subject at the
     bottom edge on wide screens. Horizontal remains centered. */
  background-position: center center;
}
/* Multi-slide manual slideshow (no autoplay). Only one slide active at a time. */
.brand-hero-media {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.brand-hero-media.active {
  opacity: 1;
  pointer-events: auto;
}
video.brand-hero-bg {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
.brand-hero-dots {
  position: absolute;
  /* .brand-subnav overlaps the hero bottom by -52px (margin-top: -52px) and
     sits at z-index 90, so dots MUST clear that zone or they get hidden
     behind the sub-nav pill. 120px desktop leaves ~68px breathing room above
     the subnav top edge. */
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 14px;
  z-index: 6;
  padding: 10px 16px;
  background: rgba(0,0,0,0.25);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.brand-hero-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.95);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.brand-hero-dot.active {
  background: #fff;
  width: 32px;
  border-radius: 6px;
}
.brand-hero-dot:hover {
  background: rgba(255,255,255,0.6);
}
@media (max-width: 680px) {
  /* Mobile subnav uses margin-top: -42px, so clear it with ~80px bottom. */
  .brand-hero-dots { bottom: 96px; gap: 8px; padding: 6px 10px; }
  .brand-hero-dot { width: 12px; height: 12px; padding: 8px; margin: -8px; }
  .brand-hero-dot.active { width: 28px; }
}
.brand-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.85) 100%);
}
.brand-hero-dark {
  position: absolute; inset: 0;
  background: #000;
  pointer-events: none;
  opacity: var(--ovr-d, 0);
  transition: opacity 0.6s ease;
}
@media (max-width: 768px) {
  .brand-hero-dark { opacity: var(--ovr-m, 0); }
}

/* Scroll indicator at bottom of brand hero. Sits above the sticky sub-nav
   (z-index 90) so it never gets hidden by the brand's own navigation. */
.brand-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 180px;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 13px;
  z-index: 95;
  display: block;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.brand-hero-scroll:hover {
  border-color: var(--gold-light, #c4a882);
  transform: translateX(-50%) translateY(2px);
}
.brand-hero-scroll-dot {
  position: absolute;
  left: 50%; top: 8px;
  width: 2px; height: 8px;
  background: var(--gold-light, #c4a882);
  border-radius: 1px;
  transform: translateX(-50%);
  animation: brandHeroScrollDot 1.8s ease-in-out infinite;
}
@keyframes brandHeroScrollDot {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  35%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(-50%, 16px); }
  100% { opacity: 0; transform: translate(-50%, 16px); }
}
@media (max-width: 768px) {
  .brand-hero-scroll { bottom: 155px; }
}
.brand-hero-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 2; text-align: center;
}
.brand-hero-logo {
  font-family: var(--serif); font-size: 56px; font-weight: 300;
  color: #fff; letter-spacing: 6px; text-transform: uppercase;
}
.brand-hero-logo-img {
  max-width: 280px; max-height: 80px; object-fit: contain;
  filter: brightness(0) invert(1);
}
.brand-hero-full .brand-hero-logo-img {
  max-width: 340px; max-height: 100px;
}
.brand-hero-byline {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-top: 4px;
}
.brand-hero-tagline {
  font-family: var(--serif); font-size: 28px; font-weight: 300;
  font-style: italic; color: rgba(255,255,255,0.85);
  margin-top: 20px; letter-spacing: 1px;
}
.brand-hero-full {
  /* Ilk acilista .brand-subnav'i viewport icinde tut:
     navbar (68px fixed) + subnav overlap payi (~32px) = 100px cikarildi
     boylece subnav hero'nun altinda fold'un ~20px ustunde kaliyor */
  height: calc(100vh - 100px);
  height: calc(100dvh - 100px);
  min-height: 560px;
  max-height: none;
}
.brand-hero-full .brand-hero-logo {
  font-size: 64px;
}

/* Section label inside brand hero (e.g. "Rooms & Suites" on listing page) */
.brand-hero-section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
}
.brand-hero-section-label-line {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: rgba(196, 168, 130, 0.55);
}

/* ── Brand Sub-Nav (sticky) ── */
/* Sits below the FIXED main navbar. Navbar has 20px padding + 26px logo
   = ~66px tall on desktop, ~52px on mobile (smaller padding). The
   subnav's `top` matches so it pins right under the main bar instead of
   disappearing behind it. */
.brand-subnav {
  z-index: 90;
  position: sticky;
  top: 66px;
  margin-top: -52px;
  transition: background 0.3s, box-shadow 0.3s;
  padding: 0 40px;
  will-change: transform;
}
.brand-subnav.is-stuck .brand-subnav-inner {
  background: rgba(22, 20, 17, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}
@media (max-width: 768px) {
  .brand-subnav { top: 52px; }
}
.brand-subnav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 36px;
  background: rgba(30,28,25,0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
}
/* Sticky removed — subnav scrolls with content */
.brand-subnav-left {
  display: flex; align-items: center; gap: 22px;
}
.brand-subnav-logo {
  display: inline-flex; align-items: center;
  height: 19px; flex-shrink: 0;
  opacity: 0.9; transition: opacity 0.3s;
}
.brand-subnav-logo:hover { opacity: 1; }
.brand-subnav-logo img {
  height: 100%; width: auto; max-width: 78px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.brand-subnav.stuck .brand-subnav-logo { height: 17px; }
.brand-subnav-links {
  display: flex; gap: 28px;
}
.brand-subnav-links a {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.6); padding: 16px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.3s; font-weight: 400;
}
.brand-subnav-links a:hover { color: #fff; }
.brand-subnav-links a.active {
  color: #fff; border-bottom-color: var(--gold); font-weight: 500;
}
.brand-subnav-actions {
  display: flex; align-items: center; gap: 12px;
}
.brand-subnav-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: none;
  border-radius: 0;
  color: rgba(255,255,255,0.65);
  transition: all 0.3s;
}
.brand-subnav-icon:hover {
  color: #fff;
}
.brand-subnav-book {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 0; background: none; color: rgba(255,255,255,0.8);
  border-radius: 0; transition: all 0.3s; font-weight: 500;
}
.brand-subnav-book:hover { color: #fff; background: none; }
.brand-subnav-lang {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  transition: all 0.3s; cursor: pointer;
  background: transparent;
}
.brand-subnav-lang { background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.brand-subnav-lang:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.brand-subnav-lang-wrap { position: relative; }
.brand-subnav-lang-caret { font-size: 9px; opacity: 0.7; }
.brand-subnav-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: rgba(15,12,8,0.96);
  border: 1px solid rgba(196,168,130,0.25);
  list-style: none; margin: 0; padding: 6px 0;
  min-width: 140px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 50;
}
.brand-subnav-lang-wrap.open .brand-subnav-lang-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.brand-subnav-lang-menu li { margin: 0; }
.brand-subnav-lang-menu button {
  display: block; width: 100%;
  padding: 9px 16px;
  background: none; border: none;
  text-align: left;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.brand-subnav-lang-menu button:hover { color: var(--gold-light); background: rgba(196,168,130,0.08); }
.brand-subnav-lang-menu button.active { color: var(--gold); }

.brand-mobile-sheet-langs {
  display: flex; gap: 8px; padding: 18px 24px 4px;
  border-top: 1px solid rgba(196,168,130,0.18);
  margin-top: 12px;
}
.brand-mobile-sheet-langs button {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: 1px solid rgba(196,168,130,0.3);
  color: rgba(255,255,255,0.7);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
}
.brand-mobile-sheet-langs button.active { color: var(--gold); border-color: var(--gold); }
.brand-mobile-sheet-langs button.disabled,
.brand-mobile-sheet-langs button:disabled {
  color: rgba(255, 255, 255, 0.25);
  border-color: rgba(196, 168, 130, 0.12);
  cursor: not-allowed;
  opacity: 0.55;
}

/* ── Rups Route Grid (reusable "The Rhythm / A Day at Rups" destinations) ── */
.rups-route {
  background: #0e1419;
  padding: 110px 40px 130px;
  color: #f5f2ec;
}
.rups-route-head {
  max-width: 920px;
  margin: 0 auto 74px;
  text-align: center;
}
.rups-route-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.rups-route-rule {
  width: 40px;
  height: 1px;
  background: rgba(196, 168, 130, 0.55);
  display: inline-block;
}
.rups-route-title {
  font-family: var(--serif);
  font-size: 54px;
  font-weight: 300;
  color: #f5f2ec;
  line-height: 1.1;
  letter-spacing: 0.5px;
  margin: 0 0 24px;
}
.rups-route-title em {
  font-style: italic;
  color: #f5f2ec;
  opacity: 0.95;
}
.rups-route-gold {
  color: var(--gold);
  font-style: italic;
}
.rups-route-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(245, 242, 236, 0.65);
  margin: 0 auto;
  max-width: 640px;
}
.rups-route-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(196, 168, 130, 0.14);
}
.rups-route-card {
  display: flex;
  flex-direction: column;
  background: #0e1419;
  border-right: 1px solid rgba(196, 168, 130, 0.14);
  border-bottom: 1px solid rgba(196, 168, 130, 0.14);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}
.rups-route-card:nth-child(3n) { border-right: none; }
.rups-route-grid > .rups-route-card:nth-last-child(-n+3) { border-bottom: none; }
.rups-route-card:hover {
  background: #121924;
}
.rups-route-card-img {
  position: relative;
  width: 100%;
  padding-bottom: 72%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.rups-route-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 20, 25, 0) 40%, rgba(14, 20, 25, 0.55) 100%);
  pointer-events: none;
}
.rups-route-card-num {
  position: absolute;
  right: 22px;
  bottom: 16px;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 44px;
  font-weight: 300;
  color: rgba(245, 242, 236, 0.7);
  letter-spacing: 1px;
  line-height: 1;
}
.rups-route-card-body {
  padding: 36px 38px 44px;
  flex: 1;
}
.rups-route-card-kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.rups-route-card-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  color: #f5f2ec;
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: 0.3px;
}
.rups-route-card-text {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 242, 236, 0.65);
  font-style: italic;
  margin: 0;
}

/* ── Brand Contact Modal (popup form, brand-scoped) ── */
body.bcm-no-scroll { overflow: hidden; }
.brand-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.brand-contact-modal.is-open {
  display: flex;
  pointer-events: auto;
  opacity: 1;
}
.brand-contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 26, 20, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.brand-contact-modal-card {
  position: relative;
  max-width: 600px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%);
  border: 1px solid rgba(196, 168, 130, 0.25);
  border-radius: 6px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(196, 168, 130, 0.08) inset;
  padding: 44px 48px 40px;
  animation: bcmSlideIn 0.45s cubic-bezier(.22,.61,.36,1);
}
@keyframes bcmSlideIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brand-contact-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 242, 236, 0.8);
  border: 1px solid rgba(196, 168, 130, 0.22);
  color: #6b5e4e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.brand-contact-modal-close:hover {
  color: #3a3228;
  border-color: var(--gold);
  background: rgba(196, 168, 130, 0.12);
}

.brand-contact-modal-header {
  text-align: center;
  margin-bottom: 28px;
}
.brand-contact-modal-kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #9a8060;
  margin-bottom: 12px;
}
.brand-contact-modal-title {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 300;
  color: #2a2520;
  line-height: 1.15;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}
.brand-contact-modal-title em {
  font-style: italic;
  color: #9a8060;
}
.brand-contact-modal-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(90, 78, 62, 0.7);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 440px;
}

/* ── Inquiry context card (thumbnail + title + meta of the source page/card) ── */
.bcm-context-card {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin: 22px auto 0;
  padding: 12px;
  max-width: 540px;
  background: rgba(196, 168, 130, 0.06);
  border: 1px solid rgba(196, 168, 130, 0.28);
  border-left: 3px solid #c4a882;
  border-radius: 4px;
  text-align: left;
}
.bcm-context-card[hidden] { display: none !important; }
/* Form fields override default [hidden] via display:flex; force respect */
.brand-contact-modal-form .bcm-field[hidden],
.brand-contact-modal-form [data-subject-field][hidden] { display: none !important; }
.bcm-context-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 3px;
  background: #1a1a1a;
}
.bcm-context-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bcm-context-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.bcm-context-eyebrow {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c4a882;
  margin-bottom: 6px;
}
.bcm-context-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: #2a2520;
  line-height: 1.2;
  margin-bottom: 4px;
  word-wrap: break-word;
}
.bcm-context-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(90, 78, 62, 0.75);
  line-height: 1.4;
}
@media (max-width: 540px) {
  .bcm-context-card {
    gap: 12px;
    padding: 10px;
    margin: 18px 0 0;
  }
  .bcm-context-thumb { width: 78px; height: 78px; }
  .bcm-context-title { font-size: 16.5px; }
  .bcm-context-meta { font-size: 12.5px; }
  .bcm-context-eyebrow { font-size: 9px; letter-spacing: 1.6px; }
}

/* ── Form ── */
.brand-contact-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bcm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bcm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bcm-label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9a8b78;
  font-weight: 500;
}
.bcm-field input[type="text"],
.bcm-field input[type="email"],
.bcm-field input[type="tel"],
.bcm-field textarea,
.bcm-field select {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(196, 168, 130, 0.3);
  color: #2a2520;
  font-family: var(--serif);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 3px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.bcm-field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--serif);
  line-height: 1.55;
}
.bcm-field input:focus,
.bcm-field textarea:focus,
.bcm-field select:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196, 168, 130, 0.12);
}
.bcm-field input::placeholder,
.bcm-field textarea::placeholder {
  color: rgba(160, 145, 125, 0.5);
  font-style: italic;
}
.bcm-select-wrap {
  position: relative;
}
.bcm-select-wrap select {
  padding-right: 36px;
  cursor: pointer;
}
.bcm-select-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 12px;
  pointer-events: none;
}
.bcm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(90, 78, 62, 0.65);
  cursor: pointer;
  padding: 4px 0 2px;
}
.bcm-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #c4a882;
  cursor: pointer;
}
.bcm-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 8px;
}
.bcm-error {
  display: none;
  padding: 10px 14px;
  background: rgba(200, 60, 60, 0.06);
  border: 1px solid rgba(200, 90, 90, 0.3);
  color: #b33a3a;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
}
.bcm-error.is-visible { display: block; }
.bcm-submit {
  position: relative;
  background: var(--gold);
  color: #0c0a08;
  border: none;
  padding: 16px 34px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.3s, transform 0.35s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s;
  box-shadow: 0 4px 20px rgba(196, 168, 130, 0.18);
}
.bcm-submit:hover:not(:disabled) {
  background: #d6b892;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(196, 168, 130, 0.32);
}
.bcm-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}
.bcm-submit-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(12, 10, 8, 0.3);
  border-top-color: #0c0a08;
  border-radius: 50%;
  animation: bcmSpin 0.7s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
.bcm-submit.is-loading .bcm-submit-spinner { display: inline-block; }
.bcm-submit.is-loading .bcm-submit-label { opacity: 0.6; }
@keyframes bcmSpin { to { transform: rotate(360deg); } }

/* ── Shared extras: section divider, date input, confirm code ── */
.bcm-section-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 2px;
}
.bcm-section-divider::before,
.bcm-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(196, 168, 130, 0.25);
}
.bcm-section-divider span {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #9a8b78;
  white-space: nowrap;
}
.bcm-field input[type="date"] {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(196, 168, 130, 0.3);
  color: #2a2520;
  font-family: var(--serif);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 3px;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  box-sizing: border-box;
  -webkit-appearance: none;
  color-scheme: light;
}
.bcm-field input[type="date"]:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196, 168, 130, 0.12);
}
.bcm-confirm-code {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 3px;
  color: #7a6a54;
  background: rgba(196, 168, 130, 0.1);
  border: 1px solid rgba(196, 168, 130, 0.25);
  border-radius: 4px;
  display: inline-block;
  padding: 10px 22px;
  margin-bottom: 20px;
}

/* ── Success view ── */
.brand-contact-modal-view--success {
  text-align: center;
  padding: 14px 0 6px;
  animation: bcmFadeIn 0.5s cubic-bezier(.22,.61,.36,1);
}
@keyframes bcmFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bcm-success-icon {
  display: inline-flex;
  width: 84px;
  height: 84px;
  align-items: center;
  justify-content: center;
  margin: 18px auto 22px;
  border-radius: 50%;
  background: rgba(196, 168, 130, 0.08);
  border: 1px solid rgba(196, 168, 130, 0.25);
  color: #7a6a54;
}
.bcm-success-kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #9a8060;
  margin-bottom: 12px;
}
.bcm-success-title {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 300;
  color: #2a2520;
  line-height: 1.15;
  margin: 0 0 18px;
}
.bcm-success-title em {
  font-style: italic;
  color: #9a8060;
}
.bcm-success-text {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.7;
  color: rgba(90, 78, 62, 0.7);
  margin: 0 auto 28px;
  max-width: 440px;
}
.bcm-success-text strong {
  color: #7a6a54;
  font-style: normal;
  font-weight: 500;
}
.bcm-success-close {
  display: inline-block;
  background: transparent;
  color: #7a6a54;
  border: 1px solid rgba(196, 168, 130, 0.45);
  padding: 14px 36px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}
.bcm-success-close:hover {
  background: rgba(196, 168, 130, 0.1);
  border-color: #9a8060;
  color: #3a3228;
}

/* ── Homepage Booking Widget (Brand → Dates → Listing redirect) ── */
.home-booking-section {
  position: relative;
  padding: 110px 40px 104px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(196, 168, 130, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0c0a08 0%, #110e0b 100%);
}
/* Gold tail line dropping from the scroll cue into the section */
.home-booking-section::before {
  content: '';
  position: absolute;
  top: 34px; left: 50%;
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, rgba(196, 168, 130, 0.45), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
/* Scroll-to-book interactive cue sitting on the brands/booking boundary */
.home-booking-scroll-cue {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
  background: rgba(18, 15, 11, 0.88);
  border: 1px solid rgba(196, 168, 130, 0.4);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(196, 168, 130, 0.08) inset;
  transition:
    transform 0.45s cubic-bezier(.22,.61,.36,1),
    border-color 0.35s ease,
    box-shadow 0.45s ease,
    background 0.35s ease;
  animation: scrollCueFloat 3.2s ease-in-out infinite;
}
.home-booking-scroll-cue-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(196, 168, 130, 0.22);
  pointer-events: none;
  animation: scrollCuePulse 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.home-booking-scroll-cue-icon {
  position: relative;
  z-index: 1;
  animation: scrollCueArrow 2.2s ease-in-out infinite;
}
.home-booking-scroll-cue:hover {
  transform: translateX(-50%) translateY(-3px) scale(1.08);
  border-color: var(--gold);
  background: rgba(28, 22, 14, 0.95);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(196, 168, 130, 0.25) inset,
    0 0 32px rgba(196, 168, 130, 0.22);
  animation-play-state: paused;
}
.home-booking-scroll-cue:hover .home-booking-scroll-cue-icon {
  animation-duration: 0.9s;
}
.home-booking-scroll-cue:active {
  transform: translateX(-50%) translateY(-1px) scale(1.02);
}
.home-booking-scroll-cue:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(196, 168, 130, 0.35);
}
@keyframes scrollCueFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}
@keyframes scrollCuePulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes scrollCueArrow {
  0%, 100% { transform: translateY(0);   opacity: 0.9; }
  50%      { transform: translateY(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-booking-scroll-cue,
  .home-booking-scroll-cue-ring,
  .home-booking-scroll-cue-icon {
    animation: none !important;
  }
}
.home-booking-inner {
  max-width: 1060px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.home-booking-header {
  margin-bottom: 44px;
}
.home-booking-header .section-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.home-booking-title {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 300;
  color: #f5f2ec;
  line-height: 1.15;
  letter-spacing: 1px;
  margin: 0 0 14px;
}
.home-booking-title em {
  font-style: italic;
  color: var(--gold);
}
.home-booking-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(245, 242, 236, 0.6);
  margin: 0 auto;
  max-width: 520px;
  line-height: 1.5;
}

/* The outer .booking-widget on the homepage gets its own theming — override
   the absolute-positioned variant used on brand-rooms. */
.booking-widget.home-booking-widget {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  max-width: 960px !important;
  width: 100%;
  margin: 0 auto;
  background: rgba(18, 15, 11, 0.72) !important;
  border: 1px solid rgba(196, 168, 130, 0.24) !important;
  border-radius: 4px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(196, 168, 130, 0.06) inset !important;
}

/* Brand pill row (step 1) */
.home-booking-brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(196, 168, 130, 0.12);
}
.home-booking-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  min-height: 56px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition:
    border-color 0.35s cubic-bezier(.22,.61,.36,1),
    background 0.35s cubic-bezier(.22,.61,.36,1),
    transform 0.35s cubic-bezier(.22,.61,.36,1);
  position: relative;
  font-family: inherit;
}
.home-booking-brand img {
  height: 28px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.home-booking-brand:hover img {
  opacity: 0.85;
}
.home-booking-brand.active img {
  opacity: 1;
}
.home-booking-brand.active {
  background: rgba(196, 168, 130, 0.08);
  border-color: rgba(196, 168, 130, 0.4);
}
.home-booking-brand.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 32px;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
}
.home-booking-brand-name {
  display: none; /* logos speak for themselves — names reveal via aria */
}

/* Date / guests / CTA row (step 2) — flex horizontal on desktop */
.home-booking-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 8px 8px 8px 8px;
}
.booking-widget.home-booking-widget .booking-widget-field {
  flex: 1;
  padding: 18px 26px;
  border-right: 1px solid rgba(196, 168, 130, 0.1);
  cursor: pointer;
  position: relative;
  text-align: left;
}
.booking-widget.home-booking-widget .booking-widget-field:last-of-type {
  border-right: 1px solid rgba(196, 168, 130, 0.1);
}
.booking-widget.home-booking-widget .booking-widget-field label {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(196, 168, 130, 0.7);
  margin-bottom: 8px;
}
.booking-widget.home-booking-widget .booking-date-day {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 300;
  color: #f5f2ec;
  line-height: 1;
}
.booking-widget.home-booking-widget .booking-date-sep {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  color: rgba(245, 242, 236, 0.35);
  margin: 0 4px;
}
.booking-widget.home-booking-widget .booking-date-month {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 300;
  color: rgba(245, 242, 236, 0.7);
}
.booking-widget.home-booking-widget .booking-widget-cta {
  display: flex;
  align-items: center;
  padding: 8px;
  background: transparent;
}
.booking-widget.home-booking-widget .booking-widget-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 38px;
  background: var(--gold);
  color: #0c0a08;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 2px;
  text-decoration: none;
  transition:
    background 0.3s ease,
    transform 0.35s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.35s ease;
  box-shadow: 0 4px 20px rgba(196, 168, 130, 0.18);
}
.booking-widget.home-booking-widget .booking-widget-btn:hover {
  background: #d6b892;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(196, 168, 130, 0.32);
}

/* ── Rooms Booking Section ── */
.rooms-booking-section {
  background: #faf8f5;
  padding: 32px 32px 36px;
}
.rooms-booking-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* ── Brand Intro ── */
.brand-intro {
  background: #faf8f5; padding: 80px 48px;
}
.brand-intro-inner {
  max-width: 800px; margin: 0 auto; text-align: center;
}
.brand-intro-tagline {
  font-family: var(--serif); font-size: 32px; font-weight: 300;
  font-style: italic; color: #2a2520; line-height: 1.4;
  margin-bottom: 24px;
}
.brand-intro-desc {
  font-size: var(--fs-md); line-height: 1.9; color: var(--text-body); margin-bottom: 16px;
}
.brand-intro-location {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-top: 16px;
}

/* ── Rooms Zigzag ── */
.brand-rooms {
  background: #fff; padding: 32px 48px 64px;
}
.brand-rooms-inner {
  max-width: 1200px; margin: 0 auto;
}
.brand-rooms-header {
  text-align: center; margin-bottom: 60px;
}
.brand-rooms-label {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.brand-rooms-title {
  font-family: var(--serif); font-size: 42px; font-weight: 300;
  color: #1a1a1a;
}
.brand-rooms-empty {
  text-align: center;
  max-width: 680px;
  margin: 48px auto 72px;
  padding: 0 24px;
}
.brand-rooms-empty .page-intro-label { margin-bottom: 12px; }
.brand-rooms-empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  line-height: 1.05;
  color: #2a2218;
  margin: 0 0 16px;
  font-weight: 400;
}
.brand-rooms-empty .page-intro-line {
  margin: 0 auto 22px;
}
.brand-rooms-empty-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.7;
  color: #6b5a3e;
  font-style: italic;
  margin: 0 0 32px;
}
.brand-rooms-empty-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .brand-rooms-empty-title { font-size: 42px; }
  .brand-rooms-empty-desc { font-size: 16px; }
  .brand-rooms-empty-cta { flex-direction: column; }
  .brand-rooms-empty-cta .btn-gold,
  .brand-rooms-empty-cta .btn-outline { width: 100%; text-align: center; }
}

.room-zigzag {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
  padding: 56px 56px;
  margin: 0 0 40px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(20, 16, 8, 0.04), 0 18px 48px rgba(20, 16, 8, 0.08);
}
.room-zigzag.reverse { direction: rtl; }
.room-zigzag.reverse > * { direction: ltr; }

.room-zigzag-img img {
  width: 100%; height: 400px; object-fit: cover; border-radius: 4px;
}
.room-zigzag-placeholder {
  width: 100%; height: 400px;
  background: linear-gradient(135deg, #f0ece6, #e8e4de);
  border-radius: 4px;
}

.room-zigzag-price {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 18px;
  color: #5a5249;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.room-zigzag-price .price-label {
  font-size: 15px; color: #998874; margin-right: 0;
  font-style: italic; letter-spacing: 0.5px;
}
.room-zigzag-price .price-amount {
  font-size: 28px; color: #1a1a1a; font-weight: 500;
  font-family: var(--serif);
  letter-spacing: 0.5px;
}
.room-zigzag-price .price-unit {
  font-size: 16px; color: #7a6a54; margin-left: 2px;
  font-style: italic; letter-spacing: 0.3px;
}

.room-zigzag-name {
  font-family: var(--serif); font-size: 42px; font-weight: 300;
  color: #1a1a1a; margin-bottom: 12px; line-height: 1.1;
}
.room-zigzag-subtitle {
  font-size: 13px; font-style: italic; color: #999;
  margin-bottom: 16px;
}
.room-zigzag-desc {
  font-size: var(--fs-md); line-height: 1.9; color: var(--text-body); margin-bottom: 22px;
}
.room-zigzag-features {
  margin-bottom: 24px;
}
.room-zigzag-features-label {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: #999; margin-bottom: 8px;
}
.room-zigzag-features-list {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.room-zigzag-features-list span {
  font-size: 13px; color: #555;
}

.room-zigzag-actions {
  display: flex; gap: 12px;
}
.btn-brand-primary {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 12px 28px; background: var(--gold); color: #fff;
  border-radius: 4px; transition: all 0.3s; font-weight: 500;
}
.btn-brand-primary:hover { background: #b89a74; }
.btn-brand-outline {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 12px 28px; border: 1px solid #ccc; color: #555;
  border-radius: 4px; transition: all 0.3s; font-weight: 400;
}
.btn-brand-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Brand Sections & Containers ── */
.brand-section { padding: 80px 48px; }
.brand-container { max-width: 1200px; margin: 0 auto; }
.brand-container-narrow { max-width: 800px; margin: 0 auto; text-align: center; }
.brand-bg-dark { background: #0e0c0a; }
.brand-bg-cream { background: #faf8f5; }
.brand-bg-white { background: #fff; }

/* ── Experience Cards Carousel ── */
/* ── Experience Cards — Infinite Carousel ── */
.exp-cards-section {
  position: relative;
  background: #0e0c0a;
  padding: 56px 0;
  overflow: hidden;
}
/* ── Background marquee text (scrolls opposite to cards) ── */
.exp-marquee {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 8%, #000 25%, #000 75%, rgba(0,0,0,0.15) 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 8%, #000 25%, #000 75%, rgba(0,0,0,0.15) 92%, transparent 100%);
  filter: blur(0px);
}
.exp-marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
}
.exp-marquee-track span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.5px;
  padding-right: 60px;
  line-height: 1;
}
/* Top line — slow, left, faded */
.exp-marquee--top {
  animation: marquee-left 180s linear infinite;
}
.exp-marquee--top span {
  font-size: 13px;
  color: rgba(196, 168, 130, 0.18);
}
/* Middle line — medium speed, right, vivid */
.exp-marquee--mid {
  animation: marquee-right 140s linear infinite;
}
.exp-marquee--mid span {
  font-size: 17px;
  color: rgba(196, 168, 130, 0.4);
}
/* Bottom line — fast, left, faded */
.exp-marquee--bot {
  animation: marquee-left 160s linear infinite;
}
.exp-marquee--bot span {
  font-size: 12px;
  color: rgba(196, 168, 130, 0.15);
  letter-spacing: 0.5px;
  font-style: italic;
  font-family: var(--sans);
}
@keyframes marquee-left {
  0%   { transform: translateX(-12.5%); }
  100% { transform: translateX(-37.5%); }
}
@keyframes marquee-right {
  0%   { transform: translateX(-37.5%); }
  100% { transform: translateX(-12.5%); }
}
.exp-cards-viewport {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.exp-cards-viewport::before,
.exp-cards-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 5;
  pointer-events: none;
}
.exp-cards-viewport::before {
  left: 0;
  background: linear-gradient(to right, #0e0c0a 0%, transparent 100%);
}
.exp-cards-viewport::after {
  right: 0;
  background: linear-gradient(to left, #0e0c0a 0%, transparent 100%);
}
.exp-cards-track {
  display: flex;
  gap: 28px;
  width: max-content;
  will-change: transform;
  padding: 20px 0;
}
.exp-card {
  flex: 0 0 340px;
  height: 520px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
/* Belt-and-suspenders: make sure nothing inside the card swallows the click
   (#10). All inner elements pass pointer events up to the <a>. */
.exp-card > *,
.exp-card .exp-card-bg,
.exp-card .exp-card-overlay,
.exp-card .exp-card-content,
.exp-card .exp-card-label,
.exp-card .exp-card-title,
.exp-card .exp-card-divider,
.exp-card .exp-card-desc { pointer-events: none; }
.exp-card { pointer-events: auto; }
.exp-card:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(196,168,130,0.15);
  z-index: 10;
}
.exp-card-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}
.exp-card:hover .exp-card-bg { transform: scale(1.08); }
.exp-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.12) 55%, transparent 100%);
  transition: background 0.4s;
}
.exp-card:hover .exp-card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.05) 55%, transparent 100%);
}
.exp-card-content {
  position: relative; z-index: 2;
  padding: 32px 28px;
  text-align: center;
  width: 100%;
}
.exp-card-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.exp-card-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  font-style: italic;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 12px;
}
.exp-card-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 8px;
}
.exp-card-divider::before,
.exp-card-divider::after {
  content: '';
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.25);
}
.exp-card-desc {
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  font-style: italic;
}

/* ── Room Carousel ── */
.room-carousel {
  position: relative; padding: 0 48px;
}
.room-carousel-track {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; -ms-overflow-style: none;
  scrollbar-width: none; padding: 16px 0;
}
.room-carousel-track::-webkit-scrollbar { display: none; }
.room-carousel-card {
  flex: 0 0 calc(33.333% - 16px); scroll-snap-align: start;
  text-decoration: none; transition: transform 0.3s;
}
.room-carousel-card:hover { transform: translateY(-4px); }
.room-carousel-img {
  width: 100%; height: 280px; overflow: hidden; border-radius: 4px;
  margin-bottom: 16px;
}
.room-carousel-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.room-carousel-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2a2520, #1a1a1a);
}
.room-carousel-name {
  font-family: var(--serif); font-size: 22px; font-weight: 300;
  color: #fff; margin-bottom: 8px;
}
.room-carousel-desc {
  font-size: var(--fs-base); line-height: 1.8; color: rgba(255,255,255,0.55);
}
.room-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 32px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%; transition: all 0.3s;
  line-height: 1;
}
.room-carousel-arrow:hover { background: rgba(var(--gold-rgb),0.3); border-color: var(--gold); }
.room-carousel-arrow.left { left: 0; }
.room-carousel-arrow.right { right: 0; }

/* ── 3. Editorial Title Section (centered, cream bg) ── */
.brand-editorial {
  background: #faf8f5;
  padding: 80px 32px;
  text-align: center;
}
.brand-editorial-inner {
  max-width: 900px;
  margin: 0 auto;
}
.brand-editorial-title {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 300;
  color: #2a2520;
  line-height: 1.2;
  margin-bottom: 32px;
}
.brand-editorial-title em {
  font-style: italic;
  font-weight: 300;
}
.editorial-gold {
  color: var(--gold);
  font-style: italic;
}
.editorial-small {
  font-size: 0.55em;
  font-weight: 300;
}
.brand-editorial-line {
  width: 60px;
  height: 2px;
  background: var(--gold-dim);
  margin: 0 auto 32px;
}
.brand-editorial-desc {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 2;
  color: var(--text-body);
  font-style: italic;
  max-width: 800px;
  margin: 0 auto;
}

/* ── 4. Contained Banner ("Rooted, Rising" style) ── */
.brand-contained-banner {
  background: #faf8f5;
  padding: 0 32px 80px;
}
.brand-contained-banner-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
}
.brand-cb-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.brand-cb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
}
.brand-cb-content {
  position: relative; z-index: 2;
  padding: 60px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.brand-cb-title {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 300;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 20px;
}
.brand-cb-title em {
  font-style: italic;
  display: block;
}
.brand-cb-title span {
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 4px;
}
.brand-cb-desc {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.8);
  font-style: italic;
}

/* ── 6. Panorama + Floating Booking Widget ── */
.brand-panorama {
  background: #faf8f5;
  padding: 80px 32px 80px;
  position: relative;
}
.brand-panorama-img {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 4px;
  overflow: visible;
  position: relative;
  height: 550px;
  min-height: 320px;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Defensive: any leftover <img> children from old templates render hidden — the
   panorama is now fully driven by the parent's background-image. */
.brand-panorama-img > img { display: none !important; }
.booking-widget {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(245,242,238,0.95);
  max-width: 900px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}
.booking-widget-field {
  flex: 1;
  padding: 24px 32px;
  border-right: 1px solid #ddd8d2;
  cursor: pointer;
  position: relative;
}
.booking-widget-field label {
  display: block;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
  font-family: var(--sans);
}
.booking-date-display {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.booking-date-day {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  color: #2a2520;
  line-height: 1;
}
.booking-date-sep {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  color: #999;
  margin: 0 2px;
}
.booking-date-month {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  color: #666;
}
.booking-date-arrow {
  font-size: 10px;
  color: #999;
  margin-left: 8px;
  align-self: center;
}
.booking-input-hidden {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.booking-widget-cta {
  display: flex;
  align-items: center;
  padding: 24px 32px;
  background: transparent;
}
.booking-widget-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background: #2a5c5a;
  color: #fff;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s;
  border-radius: 2px;
  font-family: var(--sans);
}
.booking-widget-btn:hover {
  background: #1e4a48;
}

/* ── Full-Width Banner ── */
.brand-banner {
  position: relative; height: 70vh; min-height: 480px;
  overflow: hidden; display: flex; align-items: center;
  justify-content: center;
}
.brand-banner-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.brand-banner-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
}
.brand-banner-content {
  position: relative; z-index: 2;
  text-align: center; max-width: 700px; padding: 0 32px;
}
.brand-banner-title {
  font-family: var(--serif); font-size: 52px; font-weight: 300;
  color: #fff; line-height: 1.15; margin-bottom: 28px;
}
.brand-banner-title em { font-style: italic; color: var(--gold-light); }
.brand-banner-title span { font-weight: 200; font-size: 0.7em; }
.brand-banner-desc {
  font-family: var(--serif); font-style: italic;
  font-size: var(--fs-md); line-height: 1.95; color: rgba(255,255,255,0.85);
  margin-bottom: 36px;
}
.brand-banner-btn {
  display: inline-block; padding: 14px 40px;
  border: 1px solid rgba(255,255,255,0.5); color: #fff;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  transition: all 0.3s;
}
.brand-banner-btn:hover {
  background: rgba(255,255,255,0.12); border-color: #fff;
}

/* ── In-place banner video mode ── */
.brand-banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(.22,.61,.36,1);
  background: #000;
}
.brand-banner.has-video .brand-banner-bg,
.brand-banner.has-video .brand-banner-overlay,
.brand-banner.has-video .brand-banner-content {
  transition: opacity 0.55s cubic-bezier(.22,.61,.36,1);
}
.brand-banner.is-playing .brand-banner-video {
  opacity: 1;
  pointer-events: auto;
}
.brand-banner.is-playing .brand-banner-bg,
.brand-banner.is-playing .brand-banner-overlay {
  opacity: 0;
}
.brand-banner.is-playing .brand-banner-content {
  opacity: 0;
  pointer-events: none;
}
.brand-banner-btn--play {
  cursor: pointer;
  position: relative;
}
.brand-banner-btn--play::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 10px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  vertical-align: middle;
  transform: translateY(-1px);
  transition: transform 0.3s;
}
.brand-banner-btn--play:hover::after {
  transform: translate(2px, -1px);
}
.brand-banner-video-exit {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 8, 6, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.35s ease, background 0.3s, transform 0.3s;
  pointer-events: none;
}
.brand-banner.is-playing .brand-banner-video-exit {
  opacity: 1;
  pointer-events: auto;
}
.brand-banner-video-exit:hover {
  background: rgba(30, 22, 14, 0.9);
  transform: scale(1.06);
}

/* ── Features Showcase ── */
.brand-features-showcase {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.feature-showcase-card {
  text-align: center; padding: 40px 20px;
  border: 1px solid #eee; border-radius: 4px;
  transition: all 0.3s;
}
.feature-showcase-card:hover {
  border-color: var(--gold); transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
.feature-showcase-number {
  font-family: var(--serif); font-size: 36px; color: var(--gold);
  font-weight: 300; margin-bottom: 12px;
}
.feature-showcase-name {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  color: #333;
}

/* ── Booking Bar ── */
.booking-bar {
  display: flex; align-items: flex-end; gap: 24px;
  justify-content: center; padding: 16px 0;
}
.booking-bar-field { display: flex; flex-direction: column; gap: 6px; }
.booking-bar-field label {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.booking-input {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; padding: 12px 16px; font-family: var(--sans);
  font-size: 14px; border-radius: 4px; min-width: 140px;
}
.booking-input:focus { outline: none; border-color: var(--gold); }
.booking-bar-btn {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 28px; background: var(--gold); color: #fff;
  border-radius: 4px; font-weight: 500; transition: all 0.3s;
  white-space: nowrap;
}
.booking-bar-btn:hover { background: #b89a74; }

/* ── Brand About ── */
.brand-about {
  background: #faf8f5; padding: 80px 48px;
}
.brand-about-inner {
  max-width: 1000px; margin: 0 auto; text-align: center;
}
.brand-about-label {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.brand-about-title {
  font-family: var(--serif); font-size: 38px; font-weight: 300;
  color: #1a1a1a; margin-bottom: 40px;
}
.brand-features-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
}
.brand-feature-item {
  font-size: 14px; color: #555; display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: 1px solid #e0dcd6; border-radius: 4px;
}
.brand-feature-dot { color: var(--gold); }

/* ── Tablet Responsive ── */
@media (max-width: 1024px) {
  .exp-card { flex: 0 0 320px; height: 480px; }
}

/* ── Mobile brand bottom bar + upward sheet (hidden on desktop) ── */
.brand-mobile-bar { display: none; }
.brand-mobile-sheet { display: none; }
.brand-mobile-sheet-backdrop { display: none; }

/* ── Brand Page Responsive ── */
@media (max-width: 768px) {
  /* Full-photo hero on mobile (matches Soulsetters main mobile-hero feel).
     Logo is reasonably sized (not the desktop max-width) and the tagline
     appears directly underneath. The bottom-bar replaces the old subnav. */
  .brand-hero,
  .brand-hero-full {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    margin-top: 0; /* hero pushes under fixed navbar; overlay covers */
  }
  .brand-hero-overlay {
    background: linear-gradient(to bottom, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.85) 100%);
  }
  .brand-hero-content { padding: 0 24px; }
  .brand-hero-logo { font-size: 32px; letter-spacing: 3px; }
  .brand-hero-full .brand-hero-logo { font-size: 36px; }
  .brand-hero-logo-img,
  .brand-hero-full .brand-hero-logo-img {
    max-width: 180px;
    max-height: 64px;
  }
  .brand-hero-tagline {
    font-size: 18px;
    margin-top: 14px;
    color: rgba(255,255,255,0.92);
  }
  .brand-hero-tagline-fancy {
    margin-top: 12px;
    color: #fff;
    font-family: var(--serif);
    line-height: 1.2;
    text-align: center;
  }
  .brand-hero-tagline-fancy .bht-small { font-size: 13px; letter-spacing: 2px; opacity: 0.85; font-style: italic; }
  .brand-hero-tagline-fancy .bht-serif { font-size: 26px; font-style: italic; }
  .brand-hero-tagline-fancy .bht-big { font-size: 28px; letter-spacing: 4px; text-transform: uppercase; font-weight: 300; }

  /* Hide the desktop subnav on mobile entirely — replaced by bottom bar. */
  .brand-subnav { display: none !important; }
  /* Dots slide up away from the bottom bar zone. */
  .brand-hero-dots { bottom: 110px; }

  /* Floating bottom action bar (always visible while scrolling).
     All geometry + look comes from --mbar-* tokens at :root — change once,
     every brand updates. Do NOT hardcode sizes here. */
  .brand-mobile-bar {
    display: flex;
    position: fixed;
    left: var(--mbar-side); right: var(--mbar-side); bottom: var(--mbar-bottom);
    z-index: 95;
    gap: var(--mbar-gap);
    align-items: stretch;
    justify-content: center;
  }
  /* Sticky: when user scrolls past threshold, pill just flips to the top of
     the viewport. Same look, different anchor — no strip, no fade. */
  .brand-mobile-bar.is-stuck {
    bottom: auto;
    top: var(--mbar-stick-top, 76px);
  }
  /* Book Now button hidden globally — menu-only bar. Flip to flex to restore. */
  .brand-mobile-bar-book { display: none !important; }
  .brand-mobile-bar-menu {
    flex: 0 1 var(--mbar-menu-max-width);
  }
  .brand-mobile-bar-menu,
  .brand-mobile-bar-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mbar-icon-gap);
    padding: var(--mbar-pad-y) var(--mbar-pad-x);
    font-family: var(--sans);
    font-size: var(--mbar-font-size);
    letter-spacing: var(--mbar-letter-spacing);
    text-transform: uppercase;
    font-weight: var(--mbar-font-weight);
    border-radius: var(--mbar-radius);
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(var(--mbar-blur));
    -webkit-backdrop-filter: blur(var(--mbar-blur));
    box-shadow: var(--mbar-shadow);
    text-decoration: none;
  }
  .brand-mobile-bar-menu {
    background: var(--mbar-menu-bg);
    color: var(--mbar-menu-color);
    border: var(--mbar-menu-border);
  }
  .brand-mobile-bar-menu .bmm-icon { font-size: var(--mbar-icon-size); line-height: 1; }
  .brand-mobile-bar-book {
    background: var(--mbar-book-bg);
    color: var(--mbar-book-color);
    border: var(--mbar-book-border);
  }
  .brand-mobile-bar-book:active { transform: scale(0.97); }

  /* Upward-opening sheet — anchored bottom, fades + slides into view.
     Visibility toggled via inline style by JS (toggleBrandMobileSheet) so the
     cascade can't lose this fight. The CSS just sets the look. */
  .brand-mobile-sheet {
    display: none;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 96;
    background: rgba(15,13,10,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(196,168,130,0.35);
    border-radius: 24px 24px 0 0;
    padding: 14px 20px 90px;
    box-shadow: 0 -16px 50px rgba(0,0,0,0.55);
    max-height: 75vh;
    overflow-y: auto;
    animation: brandSheetIn 0.32s cubic-bezier(.16,.84,.44,1) both;
  }
  @keyframes brandSheetIn {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .brand-mobile-sheet-handle {
    width: 44px; height: 4px;
    background: rgba(196,168,130,0.55);
    border-radius: 2px;
    margin: 4px auto 14px;
  }
  .brand-mobile-sheet a {
    display: block;
    padding: 14px 4px;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.88);
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
  }
  .brand-mobile-sheet a:last-child { border-bottom: none; }
  .brand-mobile-sheet a:active { color: #c4a882; }
  .brand-mobile-sheet-backdrop {
    display: block;
    position: fixed; inset: 0;
    z-index: 94;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .brand-mobile-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  body.brand-sheet-open { overflow: hidden; }

  /* Old subnav rules below kept for desktop, but not used on mobile now. */
  .brand-section { padding: 48px 20px; }
  .brand-intro { padding: 48px 20px; }
  .brand-intro-tagline { font-size: 24px; }
  .brand-rooms { padding: 48px 20px; }
  .room-zigzag { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; margin: 0 0 28px; box-shadow: 0 2px 6px rgba(20,16,8,0.05), 0 12px 30px rgba(20,16,8,0.08); }
  .room-zigzag.reverse { direction: ltr; }
  .room-zigzag-img img { height: 260px; }
  .room-zigzag-name { font-size: 30px; }
  .room-zigzag-price .price-amount { font-size: 24px; }
  .room-zigzag-desc { font-size: 15px; }
  .brand-rooms-title { font-size: 30px; }
  .brand-about { padding: 48px 20px; }
  .room-carousel { padding: 0; }
  .room-carousel-card { flex: 0 0 80%; }
  .room-carousel-arrow { display: none; }
  /* Editorial */
  .brand-editorial { padding: 48px 20px; }
  .brand-editorial-title { font-size: 34px; }
  .editorial-small { font-size: 0.5em; }
  .brand-editorial-desc { font-size: 16px; line-height: 1.8; }

  /* Contained Banner */
  .brand-contained-banner { padding: 0 16px 48px; }
  .brand-contained-banner-inner { height: 350px; }
  .brand-cb-content { padding: 32px 24px; }
  .brand-cb-title { font-size: 32px; }
  .brand-cb-desc { font-size: 13px; }

  /* Panorama + Booking Widget */
  .brand-panorama { padding: 48px 16px 48px; }
  .brand-panorama-img { height: 420px; }
  .brand-panorama-img .booking-widget { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 260px; flex-direction: column; }
  .brand-panorama-img .booking-widget .booking-widget-field { flex: none; border-right: none; border-bottom: 1px solid #ddd8d2; padding: 12px 18px; }
  .brand-panorama-img .booking-widget .booking-widget-field label { font-size: 8px; letter-spacing: 2px; margin-bottom: 4px; }
  .brand-panorama-img .booking-widget .booking-date-day { font-size: 28px; }
  .brand-panorama-img .booking-widget .booking-date-sep { font-size: 18px; }
  .brand-panorama-img .booking-widget .booking-date-month { font-size: 15px; }
  .brand-panorama-img .booking-widget .booking-widget-cta { padding: 12px 18px; border-top: none; }
  .brand-panorama-img .booking-widget .booking-widget-btn { padding: 10px 18px; font-size: 9px; letter-spacing: 2px; }
  .booking-widget {
    position: relative; bottom: auto; left: auto; transform: none;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0 auto;
    width: 100%;
    max-width: 360px;
  }
  .booking-widget-field {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd8d2;
    padding: 14px 22px;
    text-align: center;
  }
  .booking-widget-field .booking-date-display { justify-content: center; }
  .booking-widget-field:last-of-type { border-right: none; }
  .booking-date-day { font-size: 28px; }
  .booking-date-sep { font-size: 20px; }
  .booking-date-month { font-size: 16px; }
  .booking-widget-field label { font-size: 8px; letter-spacing: 2px; margin-bottom: 6px; }
  .booking-widget-cta {
    flex: none;
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    border-top: none;
  }
  .booking-widget-btn { width: 100%; justify-content: center; padding: 14px 24px; font-size: 10px; }

  /* Experience Cards */
  .exp-cards-track { gap: 18px; }
  .exp-card { flex: 0 0 280px; min-width: 260px; height: 440px; }
  .exp-card-title { font-size: 22px; }

  /* Full-width Banner */
  .brand-banner { height: 60vh; min-height: 350px; }
  .brand-banner-title { font-size: 32px; }
  .brand-banner-content { padding: 0 20px; }
  .brand-banner-desc { font-size: 13px; line-height: 1.7; }
  .brand-banner-btn { padding: 12px 32px; font-size: 11px; }
  .brand-features-showcase { grid-template-columns: 1fr 1fr; gap: 16px; }
  .booking-bar { flex-direction: column; align-items: stretch; gap: 16px; }
  .booking-input { min-width: auto; }
}

/* ── Footer ── */
.footer {
  padding: 60px 40px; text-align: center;
  border-top: 1px solid var(--border);
}
.footer-logo-img { height: 32px; width: auto; margin: 0 auto 8px; }
.footer-tagline {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 24px;
}
.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 24px; }
.footer-links a {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); transition: color 0.3s;
}
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 10px; color: var(--text-muted); }
.footer-credit { font-size: 10px; color: var(--text-muted); margin-top: 8px; letter-spacing: 0.5px; }
.footer-credit a { color: var(--gold-dim, #b89a6a); text-decoration: none; transition: color 0.3s; }
.footer-credit a:hover { color: var(--gold, #c9a96e); }

/* ── Footer brand logo row (replaces the old text brand links) ── */
.footer-brands {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1);
}
.footer-brand-logo img {
  height: 24px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.footer-brand-logo:hover img {
  opacity: 1;
}
.footer-brand-logo:hover {
  transform: translateY(-1px);
}

/* ── Footer brand social row ── */
.footer-social {
  margin-top: 40px;
  margin-bottom: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.footer-social-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
  font-family: var(--sans);
}
.footer-social-grid {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}
.footer-social-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  border: 1px solid rgba(196, 168, 130, 0.22);
  border-radius: 999px;
  background: rgba(20, 18, 15, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
              border-color 0.3s ease,
              background 0.3s ease,
              color 0.3s ease,
              box-shadow 0.35s ease;
  min-width: 218px;
}
.footer-social-card:hover {
  color: var(--gold);
  border-color: rgba(196, 168, 130, 0.6);
  background: rgba(35, 28, 18, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(196, 168, 130, 0.12);
}
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(196, 168, 130, 0.1);
  color: inherit;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.footer-social-card:hover .footer-social-icon {
  background: rgba(196, 168, 130, 0.22);
}
.footer-social-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  gap: 3px;
  text-align: left;
}
.footer-social-brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.4px;
  color: inherit;
}
.footer-social-handle {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: lowercase;
  opacity: 0.55;
  color: inherit;
}

/* ── Filter Buttons ── */
.rooms-filter {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px;
}
.filter-btn {
  font-family: var(--sans); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; padding: 10px 20px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; transition: all 0.3s;
}
.filter-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
.filter-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb),0.08); }

/* ── Responsive: Tablet (switch to hamburger) ──
   On tablet and below we drop the navbar currency button entirely.
   The mobile currency chip (currency.js) handles toggling on price pages,
   keeping the top bar a simple 3-column grid that never wraps:
   [hamburger] | [logo centered] | [login] */
@media (max-width: 1100px) {
  .navbar-inner {
    padding: 16px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto;
    grid-auto-flow: dense;
    column-gap: 8px;
    align-items: center;
  }
  .navbar-inner .nav-hamburger { grid-row: 1; grid-column: 1; justify-self: start; display: flex; margin: 0; padding: 14px; }
  .navbar-inner .nav-logo      { grid-row: 1; grid-column: 2; justify-self: center; }
  .navbar-inner .nav-links     { display: none; }
  .navbar-inner .nav-currency  { display: none; }
  .navbar-inner .nav-lang-wrap { grid-row: 1; grid-column: 3; justify-self: end; margin: 0; }
  .navbar-inner .nav-book      { grid-row: 1; grid-column: 4; justify-self: end; margin: 0; }
  .nav-links { display: none; }
  .book-mobile { display: inline; }
  .book-desktop { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 768px) {
  .navbar { background: #000; }
  .navbar-inner {
    padding: 0 16px;
    min-height: 56px;
    column-gap: 12px;
  }
  .nav-hamburger { padding: 16px 12px; }
  .nav-book {
    font-size: 9px; letter-spacing: 1px; padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.35); color: #fff;
    border-radius: 20px; min-height: 36px; display: flex; align-items: center;
  }
  .nav-book:hover { background: #fff; color: var(--bg); }
  .nav-logo-img { height: 22px; }
  .mobile-hero { display: block; }
  .desktop-hero { display: none; }
  .mobile-hero .hero-dots { bottom: 56px; }
  .hero-arrow { display: none; }
  .hero { min-height: 90vh; }
  .hero h1 { font-size: 38px; }
  .hero-desc { font-size: 14px; }
  .hero-badge { font-size: 9px; padding: 6px 16px; }
  .hero-btns { flex-direction: column; align-items: center; }
  .btn-gold, .btn-outline { width: 100%; max-width: 280px; text-align: center; }
  .section { padding: 60px 20px; }
  .section-title { font-size: 30px; }
  .section-desc { font-size: 14px; }
  .room-hero { grid-template-columns: 1fr; min-height: auto; }
  .room-hero-img { min-height: 260px; }
  .room-hero-info { padding: 28px 20px; }
  .room-hero-name { font-size: 30px; }
  .room-hero-subtitle { font-size: 13px; }
  .room-hero-price { font-size: 24px; }
  .room-hero-desc { font-size: 14px; }
  .room-hero-meta { gap: 20px; flex-wrap: wrap; }
  .brands-grid { grid-template-columns: 1fr; }
  .brand-card { aspect-ratio: 4/3; }
  .rooms-grid { grid-template-columns: 1fr; }
  .room-card-img { aspect-ratio: 16/9; }
  .features-section { padding: 50px 20px; }
  .features-title { font-size: 26px; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .related { padding: 50px 20px; }
  .footer { padding: 40px 20px; }
  .footer-logo { font-size: 18px; letter-spacing: 6px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
  .footer-brands { gap: 26px; }
  .footer-brand-logo img { height: 20px; max-width: 110px; }
  .rups-route { padding: 72px 20px 80px; }
  .rups-route-head { margin-bottom: 44px; }
  .rups-route-title { font-size: 34px; }
  .rups-route-lede { font-size: 14px; }
  .rups-route-grid { grid-template-columns: 1fr; }
  .rups-route-card { border-right: none; border-bottom: 1px solid rgba(196, 168, 130, 0.14); }
  .rups-route-grid > .rups-route-card:last-child { border-bottom: none; }
  .rups-route-card-body { padding: 28px 24px 34px; }
  .rups-route-card-title { font-size: 22px; }
  .rups-route-card-text { font-size: 14px; }
  .rups-route-card-num { font-size: 34px; right: 18px; bottom: 14px; }
  /* Brand contact modal on mobile */
  .brand-contact-modal { padding: 14px; }
  .brand-contact-modal-card { padding: 38px 24px 30px; border-radius: 4px; }
  .brand-contact-modal-title { font-size: 26px; }
  .brand-contact-modal-sub { font-size: 13px; }
  .brand-contact-modal-header { margin-bottom: 22px; }
  .bcm-row { grid-template-columns: 1fr; gap: 14px; }
  .bcm-success-title { font-size: 26px; }
  .bcm-success-icon { width: 72px; height: 72px; margin: 8px auto 18px; }
  .bcm-success-text { font-size: 14px; }
  .home-booking-section { padding: 80px 20px 72px; }
  .home-booking-scroll-cue { width: 54px; height: 54px; top: -27px; }
  .home-booking-scroll-cue-icon { width: 16px; height: 16px; }
  .home-booking-section::before { top: 27px; height: 38px; }
  .home-booking-header { margin-bottom: 28px; }
  .home-booking-title { font-size: 32px; }
  .home-booking-sub { font-size: 14px; }
  .home-booking-widget {
    max-width: 360px;
    border-radius: 6px;
  }
  .home-booking-brands {
    gap: 6px;
    padding: 14px 10px 2px;
    justify-content: space-between;
  }
  .home-booking-brand {
    flex: 1;
    min-height: 48px;
    padding: 10px 6px;
  }
  .home-booking-brand img {
    height: 18px;
    max-width: 80px;
  }
  .home-booking-row {
    flex-direction: column;
    padding: 6px;
    gap: 0;
  }
  .booking-widget.home-booking-widget .booking-widget-field {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(196, 168, 130, 0.1);
    padding: 14px 22px;
    text-align: center;
  }
  .booking-widget.home-booking-widget .booking-widget-field:last-of-type {
    border-bottom: none;
  }
  .booking-widget.home-booking-widget .booking-date-day { font-size: 26px; }
  .booking-widget.home-booking-widget .booking-date-sep { font-size: 18px; }
  .booking-widget.home-booking-widget .booking-date-month { font-size: 15px; }
  .booking-widget.home-booking-widget .booking-widget-field label {
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 5px;
  }
  .booking-widget.home-booking-widget .booking-date-display { justify-content: center; }
  .booking-widget.home-booking-widget .booking-widget-cta { padding: 6px; width: 100%; }
  .booking-widget.home-booking-widget .booking-widget-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 10px;
  }
  .footer-social { margin-top: 32px; margin-bottom: 24px; padding-top: 24px; }
  .footer-social-grid { flex-direction: column; gap: 10px; max-width: 320px; }
  .footer-social-card { width: 100%; min-width: 0; padding: 10px 16px 10px 14px; }
  .footer-social-brand { font-size: 14px; }
  .rooms-filter { gap: 8px; }
  .filter-btn { padding: 8px 14px; font-size: 9px; }
}

/* ══════════════════════════════════════════
   STATIC PAGES — Philosophy, PR, Royalty, About, Contact
   ══════════════════════════════════════════ */

/* ── Page Hero ── */
.page-hero {
  position: relative; height: 55vh; min-height: 400px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  margin-top: 68px;
}
.page-hero--compact { height: 40vh; min-height: 300px; }
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.85) 100%);
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero-label {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.page-hero-title {
  font-family: var(--serif); font-size: 56px; font-weight: 300;
  color: #fff; line-height: 1.1;
}
.page-hero-title em { font-style: italic; color: var(--gold-light); }
.page-hero-line {
  width: 48px; height: 1px; background: var(--gold);
  margin: 24px auto 0;
}

/* ── Page Sections ── */
.page-section {
  padding: 80px 32px;
}
.page-section--cream {
  background: #faf8f5; color: #1a1a1a;
}
.page-narrow {
  max-width: 720px; margin: 0 auto; text-align: center;
}
.page-container {
  max-width: 1100px; margin: 0 auto;
}
.page-intro-label {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.page-section--cream .page-intro-label { color: var(--gold-dim); }
.page-intro-title {
  font-family: var(--serif); font-size: 40px; font-weight: 300;
  line-height: 1.2; margin-bottom: 0;
}
.page-intro-title em { font-style: italic; }
.page-intro-title .gold { color: var(--gold); }
.page-section--cream .page-intro-title { color: #1a1a1a; }
.page-intro-line {
  width: 40px; height: 1px; background: var(--gold);
  margin: 20px auto 24px;
}
.page-section--cream .page-intro-line { background: var(--gold-dim); }
.page-intro-desc {
  font-family: var(--serif); font-size: var(--fs-md); font-style: italic;
  line-height: 1.95; color: var(--text-body-dim); max-width: 640px; margin: 0 auto;
}
.page-section-title {
  font-family: var(--serif); font-size: 36px; font-weight: 300;
  text-align: center; margin-bottom: 0;
}
.page-section-title em { font-style: italic; color: var(--gold-light); }
.page-section--cream .page-section-title { color: #1a1a1a; }
.page-section--cream .page-section-title em { color: var(--gold-dim); }

/* ── Quote Banner ── */
.page-quote-banner {
  position: relative; padding: 100px 32px;
  text-align: center; overflow: hidden;
}
.page-quote-banner-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-quote-banner-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.7);
}
.page-quote-banner-content {
  position: relative; z-index: 2; max-width: 700px; margin: 0 auto;
}
.page-quote-icon {
  font-size: 40px; color: var(--gold); margin-bottom: 16px;
}
.page-quote-text {
  font-family: var(--serif); font-size: 24px; font-style: italic;
  font-weight: 300; color: #fff; line-height: 1.7;
  margin: 0 0 24px;
}
.page-quote-author {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
}
.page-cta-btn {
  display: inline-block;
  padding: 14px 40px;
  background: var(--gold); color: #0a0a0a;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 500; border-radius: 2px;
  transition: all 0.3s;
}
.page-cta-btn:hover { background: var(--gold-light); }

/* ── Pillars (Philosophy) ── */
.pillars-grid {
  max-width: 900px; margin: 40px auto 0;
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.pillar-card {
  padding: 32px 40px;
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 60px 1fr; gap: 4px 24px;
  align-items: start;
}
.pillar-card:last-child { border-bottom: none; }
.pillar-num {
  /* Now carries an aesthetic Unicode symbol (not a number) tied to each
     principle's meaning. Gold accent, larger size for visual weight. */
  font-family: "Apple Symbols", "Segoe UI Symbol", var(--serif);
  font-size: 40px;
  font-weight: 400;
  color: var(--gold-dim);
  grid-row: span 2;
  line-height: 1;
  width: 60px;
  text-align: center;
  opacity: 0.9;
}
.pillar-title {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  margin-bottom: 4px;
}
.pillar-desc {
  font-size: var(--fs-base); line-height: 1.85; color: var(--text-dim);
}

/* ── Sustainability Stats ── */
.sustain-grid {
  max-width: 900px; margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  text-align: center;
}
.sustain-icon { font-size: 20px; color: var(--gold-dim); margin-bottom: 8px; }
.sustain-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #999; margin-bottom: 8px;
}
.sustain-stat {
  font-family: var(--serif); font-size: 42px; font-weight: 300;
  color: #1a1a1a; line-height: 1;
}
.sustain-detail {
  font-size: var(--fs-sm); color: var(--text-body-muted); margin-top: 4px; line-height: 1.6;
}

/* ── PR Cards ── */
.pr-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}
.pr-card {
  background: var(--bg-card); border-radius: 8px; overflow: hidden;
  transition: transform 0.3s;
}
.pr-card:hover { transform: translateY(-4px); }
.pr-card-img {
  position: relative; height: 240px; overflow: hidden;
}
.pr-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s;
}
.pr-card:hover .pr-card-img img { transform: scale(1.05); }
.pr-card-badge {
  position: absolute; top: 16px; left: 16px;
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 14px; background: var(--gold); color: #0a0a0a;
  border-radius: 2px; font-weight: 500;
}
.pr-card-body { padding: 24px; }
.pr-card-source {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.pr-card-title {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  line-height: 1.3; margin-bottom: 12px;
}
.pr-card-excerpt {
  font-size: var(--fs-base); line-height: 1.8; color: var(--text-dim);
  margin-bottom: 16px;
}
.pr-card-date {
  font-size: 11px; color: var(--text-muted);
}

/* ── Awards ── */
.awards-grid {
  max-width: 800px; margin: 40px auto 0;
}
.award-item {
  display: grid; grid-template-columns: 80px 1fr; gap: 4px 24px;
  padding: 24px 0; border-bottom: 1px solid #e8e4de;
  align-items: start;
}
.award-item:last-child { border-bottom: none; }
.award-year {
  font-family: var(--serif); font-size: 28px; font-weight: 300;
  color: var(--gold-dim); grid-row: span 2;
}
.award-title {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  color: #1a1a1a;
}
.award-detail {
  font-size: 13px; color: #888; font-style: italic;
}

/* ── Royalty Tiers ── */
.tiers-grid {
  max-width: 1000px; margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.tier-card {
  background: var(--bg-card); border-radius: 8px;
  padding: 40px 28px; text-align: center;
  border: 1px solid var(--border);
  position: relative; transition: transform 0.3s;
}
.tier-card:hover { transform: translateY(-4px); }
.tier-card--voyager {
  border-color: var(--gold-dim);
  background: linear-gradient(135deg, #151310, #1a1714);
}
.tier-card--sovereign {
  border-color: var(--gold);
  background: linear-gradient(135deg, #1a1714, #201c16);
}
.tier-icon {
  font-size: 24px; color: var(--gold); margin-bottom: 16px;
}
.tier-name {
  font-family: var(--serif); font-size: 28px; font-weight: 300;
  margin-bottom: 4px;
}
.tier-range {
  font-size: 11px; letter-spacing: 1px; color: var(--text-muted);
  margin-bottom: 24px;
}
.tier-perks {
  list-style: none; text-align: left; margin-bottom: 24px;
}
.tier-perks li {
  font-size: 13px; color: var(--text-dim); padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tier-perks li::before {
  content: '✓ '; color: var(--gold-dim); font-weight: 600;
}
.tier-tag {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); padding: 6px 16px;
  border: 1px solid var(--gold-dim); border-radius: 20px;
  display: inline-block;
}

/* ── How It Works ── */
.how-grid {
  max-width: 900px; margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  text-align: center;
}
.how-num {
  font-family: var(--serif); font-size: 36px; font-weight: 300;
  color: var(--gold-dim); margin-bottom: 12px;
}
.how-title {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  color: #1a1a1a; margin-bottom: 8px;
}
.how-desc {
  font-size: var(--fs-base); line-height: 1.8; color: var(--text-body-muted);
}

/* ── Portal Features ── */
.portal-features {
  max-width: 900px; margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.portal-feature {
  text-align: center; padding: 24px;
}
.portal-feature-icon {
  font-size: 28px; color: var(--gold); margin-bottom: 12px;
}
.portal-feature h4 {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  margin-bottom: 8px;
}
.portal-feature p {
  font-size: var(--fs-base); line-height: 1.8; color: var(--text-dim);
}

/* ── Timeline (About) ── */
.timeline {
  max-width: 700px; margin: 40px auto 0;
  position: relative;
  padding-left: 100px;
}
.timeline::before {
  content: ''; position: absolute;
  left: 80px; top: 0; bottom: 0;
  width: 1px; background: var(--border);
}
.timeline-item {
  position: relative; padding: 0 0 48px 32px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ''; position: absolute;
  left: -5px; top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%; background: var(--gold);
  border: 2px solid var(--bg);
}
.timeline-year {
  position: absolute; left: -132px; top: 0;
  font-family: var(--serif); font-size: 24px; font-weight: 300;
  color: var(--gold-dim); width: 80px; text-align: right;
}
.timeline-content h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  margin-bottom: 6px;
}
.timeline-content p {
  font-size: var(--fs-base); line-height: 1.85; color: var(--text-dim);
}

/* ── Stats (About) ── */
.stats-grid {
  max-width: 920px; margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
  text-align: center;
}
.stat-item {
  padding: 10px 6px;
}
/* Formerly numeric — now renders an aesthetic Unicode symbol tied to each
   brand "essence" line. Poetic label beneath reads as a micro-statement. */
.stat-number {
  font-family: "Apple Symbols", "Segoe UI Symbol", var(--serif);
  font-size: 52px;
  font-weight: 400;
  color: var(--gold-dim, #c4a882);
  line-height: 1;
  opacity: 0.95;
}
.stat-label {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.1px;
  text-transform: none;
  color: #2a1f10;
  margin-top: 18px;
  line-height: 1.55;
  font-style: normal;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.stat-label em, .stat-label i { font-style: italic; }

/* ── Brands Showcase (About) ── */
.brands-showcase {
  max-width: 1100px; margin: 40px auto 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px;
}
.brand-showcase-card {
  border-radius: 8px; overflow: hidden;
  background: var(--bg-card); transition: transform 0.3s;
}
.brand-showcase-card:hover { transform: translateY(-4px); }
.brand-showcase-img {
  position: relative; height: 180px; overflow: hidden;
}
.brand-showcase-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s;
}
.brand-showcase-card:hover .brand-showcase-img img { transform: scale(1.05); }
.brand-showcase-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.brand-showcase-info { padding: 20px; }
.brand-showcase-type {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.brand-showcase-info h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  margin-bottom: 4px;
}
.brand-showcase-info p {
  font-size: 12px; color: var(--text-dim);
}

/* ── Contact Page ── */
.contact-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px;
}
.contact-form-title {
  font-family: var(--serif); font-size: 30px; font-weight: 300;
  color: #1a1a1a; margin-bottom: 32px;
}
.contact-form-title em { font-style: italic; color: var(--gold-dim); }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #888;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 16px; border: 1px solid #ddd8d2;
  border-radius: 4px; font-size: 14px; font-family: var(--sans);
  background: #fff; color: #1a1a1a; transition: border-color 0.3s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--gold);
}
.form-field textarea { resize: vertical; }
.contact-submit-btn {
  padding: 14px 40px;
  background: #1a1a1a; color: #fff;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  border: none; border-radius: 2px; cursor: pointer;
  transition: all 0.3s; font-family: var(--sans);
  align-self: flex-start;
}
.contact-submit-btn:hover { background: #333; }

.contact-info-side { padding-top: 48px; }
.contact-info-card {
  padding: 24px 0; border-bottom: 1px solid #e8e4de;
}
.contact-info-card:first-child { padding-top: 0; }
.contact-info-card:last-of-type { border-bottom: none; }
.contact-info-card h3 {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  color: #1a1a1a; margin-bottom: 8px;
}
.contact-info-card p {
  font-size: var(--fs-base); line-height: 1.8; color: var(--text-body);
}
.contact-social { margin-top: 32px; }
.contact-social h3 {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  color: #1a1a1a; margin-bottom: 12px;
}
.contact-social-links {
  display: flex; gap: 16px;
}
.contact-social-links a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd; border-radius: 50%;
  color: #666; transition: all 0.3s;
}
.contact-social-links a:hover {
  border-color: var(--gold); color: var(--gold-dim);
}

/* Contact Map */
.contact-map {
  height: 300px; background: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
}
.contact-map-placeholder { text-align: center; }
.contact-map-pin {
  font-size: 24px; color: var(--gold); margin-bottom: 8px;
}
.contact-map-text {
  font-family: var(--serif); font-size: 18px; font-style: italic;
  color: var(--text-dim); margin-bottom: 16px;
}
.contact-map-link {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 2px; transition: all 0.3s;
}
.contact-map-link:hover { color: var(--gold-light); }

/* ── Static Pages Responsive ── */
@media (max-width: 768px) {
  .page-hero { height: 40vh; min-height: 280px; }
  .page-hero-title { font-size: 36px; }
  .page-section { padding: 48px 20px; }
  .page-intro-title { font-size: 28px; }
  .page-section-title { font-size: 28px; }
  .page-quote-banner { padding: 64px 20px; }
  .page-quote-text { font-size: 18px; }

  .pillars-grid { margin: 24px auto 0; }
  .pillar-card { grid-template-columns: 1fr; padding: 24px 20px; text-align: center; justify-items: center; }
  .pillar-num { grid-row: auto; font-size: 24px; margin-bottom: 4px; }
  .pillar-title { max-width: 340px; }
  .pillar-desc { max-width: 340px; }

  .sustain-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .sustain-stat { font-size: 32px; }

  .pr-grid { grid-template-columns: 1fr; }
  .pr-card-img { height: 200px; }

  .awards-grid { margin: 24px auto 0; }
  .award-item { grid-template-columns: 60px 1fr; gap: 4px 16px; }
  .award-year { font-size: 22px; }

  .tiers-grid { grid-template-columns: 1fr; gap: 16px; }
  .how-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .portal-features { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .timeline { padding-left: 80px; }
  .timeline::before { left: 60px; }
  .timeline-year { left: -100px; font-size: 20px; width: 60px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .stat-number { font-size: 42px; }
  .stat-label  { font-size: 16px; max-width: 220px; }

  .brands-showcase { grid-template-columns: 1fr 1fr; gap: 16px; }

  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-map { height: 200px; }
}

/* ═══════════════════════════════════════
   AUTH PAGES (Login / Register)
═══════════════════════════════════════ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 100px 24px 60px;
}
.auth-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(2px);
}
.auth-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,26,26,0.85), rgba(26,26,26,0.65));
}
.auth-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  max-width: 480px;
  width: 100%;
  padding: 48px 40px;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.auth-label {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: #c9a96e; font-weight: 500;
  text-align: center;
}
.auth-title {
  font-family: Georgia, serif;
  font-size: 38px;
  text-align: center;
  margin: 12px 0 0;
  color: #1a1a1a;
  font-weight: 400;
}
.auth-title em { font-style: italic; color: #c9a96e; }
.auth-line {
  width: 50px; height: 1px; background: #c9a96e;
  margin: 20px auto;
}
.auth-subtitle {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin-bottom: 32px;
  line-height: 1.6;
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form .form-field { display: flex; flex-direction: column; }
.auth-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-form label {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #888; margin-bottom: 6px;
}
.auth-form input, .auth-form select, .auth-form textarea {
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  font-size: 14px;
  font-family: inherit;
  background: #fafafa;
  transition: border-color 0.2s;
}
.auth-form input:focus {
  outline: none;
  border-color: #c9a96e;
  background: #fff;
}
.auth-error {
  background: #fef2f2;
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 2px;
  font-size: 13px;
  border-left: 3px solid #b91c1c;
}
.auth-success {
  background: #f0fdf4;
  color: #166534;
  padding: 10px 14px;
  border-radius: 2px;
  font-size: 13px;
  border-left: 3px solid #166534;
}
.auth-submit {
  background: #1a1a1a;
  color: #c9a96e;
  border: none;
  padding: 14px 24px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  font-family: inherit;
  transition: all 0.3s;
}
.auth-submit:hover { background: #c9a96e; color: #1a1a1a; }
.auth-submit:disabled { opacity: 0.6; cursor: wait; }
.auth-meta {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: #666;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-meta a { color: #c9a96e; text-decoration: none; }
.auth-meta a:hover { text-decoration: underline; }
.auth-demo-hint {
  margin-top: 24px;
  padding: 14px;
  background: #fefcf7;
  border: 1px dashed #c9a96e;
  font-size: 11px;
  color: #666;
  text-align: center;
  border-radius: 2px;
  line-height: 1.7;
}
.auth-demo-hint code {
  background: #f5f0eb;
  padding: 2px 6px;
  border-radius: 2px;
  color: #1a1a1a;
}

/* ═══════════════════════════════════════
   PORTAL SHELL (Member Portal)
═══════════════════════════════════════ */
.portal-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  background: #f5f0eb;
}
.portal-sidebar {
  background: #1a1a1a;
  color: #fff;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.portal-logo {
  display: block;
  margin-bottom: 32px;
  text-align: center;
}
.portal-logo img { max-height: 36px; filter: brightness(0) invert(1); }
.portal-tier-card {
  background: linear-gradient(135deg, #2a2520, #1a1a1a);
  border: 1px solid rgba(201,169,110,0.2);
  padding: 20px 18px;
  border-radius: 3px;
  margin-bottom: 28px;
}
.portal-tier-name { font-size: 13px; color: #c9a96e; margin-bottom: 6px; font-weight: 500; }
.portal-tier-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 14px;
  font-weight: 600;
}
.portal-tier-badge.tier-explorer { background: #4a5d3a; color: #fff; }
.portal-tier-badge.tier-voyager { background: #5a4a3a; color: #fff; }
.portal-tier-badge.tier-sovereign { background: linear-gradient(135deg, #c9a96e, #b8860b); color: #1a1a1a; }
.portal-tier-points {
  font-family: Georgia, serif;
  font-size: 28px;
  color: #fff;
  font-weight: 400;
}
.portal-tier-points span { font-size: 11px; color: #888; letter-spacing: 1px; text-transform: uppercase; }
.portal-tier-progress {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-top: 14px;
  overflow: hidden;
}
.portal-tier-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #c9a96e, #b8860b);
  transition: width 0.5s;
}
.portal-tier-next {
  font-size: 10px;
  color: #888;
  margin-top: 8px;
  text-align: center;
  letter-spacing: 0.5px;
}
.portal-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-nav-link {
  color: #888;
  text-decoration: none;
  padding: 12px 14px;
  font-size: 13px;
  letter-spacing: 0.5px;
  border-radius: 2px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}
.portal-nav-link:hover { background: rgba(255,255,255,0.04); color: #fff; }
.portal-nav-link.active { background: rgba(201,169,110,0.1); color: #c9a96e; border-left: 2px solid #c9a96e; padding-left: 12px; }
.pn-icon { font-size: 14px; opacity: 0.8; width: 20px; text-align: center; }
.pn-badge {
  display: none;
  background: #c9a96e;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: auto;
}
.portal-logout {
  margin-top: auto;
  background: transparent;
  color: #888;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 12px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.portal-logout:hover { color: #fff; border-color: #c9a96e; }
.portal-main {
  padding: 48px 56px;
  background: #f5f0eb;
}
.portal-page { max-width: 1100px; }
.portal-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
  flex-wrap: wrap;
}
.portal-page-label {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: #c9a96e; font-weight: 500; margin-bottom: 8px;
}
.portal-page-title {
  font-family: Georgia, serif;
  font-size: 42px;
  color: #1a1a1a;
  margin: 0;
  font-weight: 400;
}
.portal-page-title em { font-style: italic; color: #c9a96e; }
.portal-page-subtitle {
  color: #666;
  font-size: 14px;
  margin: 12px 0 0;
  max-width: 600px;
}
.portal-cta-btn {
  background: #1a1a1a;
  color: #c9a96e;
  border: none;
  padding: 12px 24px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}
.portal-cta-btn:hover { background: #c9a96e; color: #1a1a1a; }

/* Stats grid */
.portal-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.portal-stat-card {
  background: #fff;
  padding: 24px;
  border-radius: 3px;
  border-left: 3px solid #c9a96e;
}
.ps-label {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #888; margin-bottom: 10px;
}
.ps-value {
  font-family: Georgia, serif;
  font-size: 32px;
  color: #1a1a1a;
  font-weight: 400;
}

.portal-section { margin-bottom: 48px; }
.portal-section-title {
  font-family: Georgia, serif;
  font-size: 22px;
  color: #1a1a1a;
  margin-bottom: 20px;
  font-weight: 400;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.portal-loading {
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 13px;
}
.portal-empty {
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 14px;
  background: #fff;
  border-radius: 3px;
}
.portal-empty a { color: #c9a96e; text-decoration: none; }

/* Upcoming stay card */
.portal-upcoming-card {
  background: #fff;
  padding: 32px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(201,169,110,0.15);
}
.puc-brand { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #c9a96e; margin-bottom: 6px; }
.puc-room { font-family: Georgia, serif; font-size: 24px; color: #1a1a1a; margin-bottom: 8px; }
.puc-dates { font-size: 14px; color: #555; margin-bottom: 4px; }
.puc-meta { font-size: 13px; color: #888; }
.puc-right { text-align: right; }
.puc-countdown { font-family: Georgia, serif; font-size: 22px; color: #c9a96e; margin-bottom: 8px; }
.puc-status {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.puc-link {
  display: block;
  font-size: 11px;
  color: #c9a96e;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Quick action cards */
.portal-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.portal-action-card {
  background: #fff;
  padding: 28px;
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: all 0.3s;
}
.portal-action-card:hover {
  border-color: #c9a96e;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.pa-icon { font-size: 28px; color: #c9a96e; margin-bottom: 14px; }
.pa-icon-wa { color: #25D366; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(37,211,102,0.1); margin-bottom: 14px; }
.portal-action-card.pa-whatsapp:hover { border-color: #25D366; box-shadow: 0 8px 24px rgba(37,211,102,0.15); }
.portal-action-card.pa-whatsapp:hover .pa-icon-wa { background: #25D366; color: #fff; }
.pa-title { font-family: Georgia, serif; font-size: 18px; color: #1a1a1a; margin-bottom: 8px; }
.pa-desc { font-size: 12px; color: #777; line-height: 1.5; }

/* Notifications list */
.portal-notif-list, .portal-notif-list-full {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-notif-item {
  background: #fff;
  padding: 16px 20px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-left: 3px solid transparent;
}
.portal-notif-item.unread { border-left-color: #c9a96e; background: #fefcf7; }
.pn-content { flex: 1; }
.pn-title { font-size: 14px; color: #1a1a1a; font-weight: 500; margin-bottom: 4px; }
.pn-msg { font-size: 12px; color: #666; line-height: 1.5; }
.pn-time { font-size: 11px; color: #999; white-space: nowrap; }

.portal-notif-full {
  background: #fff;
  padding: 20px;
  border-radius: 3px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-left: 3px solid transparent;
}
.portal-notif-full.unread { border-left-color: #c9a96e; background: #fefcf7; }
.pnf-icon {
  width: 40px; height: 40px;
  background: #f5f0eb;
  color: #c9a96e;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.portal-notif-full.type-success .pnf-icon { background: #f0fdf4; color: #166534; }
.portal-notif-full.type-warning .pnf-icon { background: #fef3c7; color: #92400e; }
.pnf-body { flex: 1; }
.pnf-title { font-size: 15px; color: #1a1a1a; font-weight: 500; margin-bottom: 6px; }
.pnf-msg { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 8px; }
.pnf-time { font-size: 11px; color: #999; }
.pnf-link {
  font-size: 11px; color: #c9a96e; text-decoration: none;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
}

/* Reservations list */
.portal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.portal-tab {
  background: transparent;
  border: none;
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
}
.portal-tab.active { color: #c9a96e; border-bottom-color: #c9a96e; }
.portal-reservation-list { display: flex; flex-direction: column; gap: 16px; }
.portal-res-card {
  background: #fff;
  padding: 24px;
  border-radius: 3px;
  display: flex;
  gap: 20px;
  border-left: 3px solid #c9a96e;
}
.prc-icon {
  font-size: 24px;
  color: #c9a96e;
  width: 40px;
  text-align: center;
}
.prc-body { flex: 1; }
.prc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.prc-brand { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #c9a96e; margin-bottom: 4px; }
.prc-name { font-family: Georgia, serif; font-size: 20px; color: #1a1a1a; }
.prc-status, .puc-status, .scc-status, .pcc-status, .sac-status, .slr-status {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 600;
}
.status-confirmed, .status-fulfilled { background: #dcfce7; color: #166534; }
.status-pending, .status-new { background: #fef3c7; color: #92400e; }
.status-checked_in { background: #dbeafe; color: #1e40af; }
.status-checked_out { background: #f3f4f6; color: #4b5563; }
.status-cancelled, .status-declined, .status-no_show { background: #fee2e2; color: #991b1b; }
.status-in_progress { background: #e0e7ff; color: #3730a3; }
.prc-details {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 13px;
}
.prc-detail { display: flex; flex-direction: column; gap: 2px; }
.prc-detail-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #999; }
.prc-detail span:last-child { color: #1a1a1a; }
.prc-notes {
  margin-top: 16px;
  padding: 12px 14px;
  background: #fefcf7;
  border-left: 2px solid #c9a96e;
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}

/* Discover grid */
.portal-discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.portal-brand-card {
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pbc-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.pbc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));
}
.pbc-type {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(26,26,26,0.8);
  color: #c9a96e;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
}
.pbc-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.pbc-name { font-family: Georgia, serif; font-size: 22px; color: #1a1a1a; margin: 0 0 6px; }
.pbc-loc { font-size: 11px; color: #999; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 12px; }
.pbc-desc { font-size: 13px; color: #666; line-height: 1.6; margin: 0 0 20px; flex: 1; }
.pbc-btn {
  background: transparent;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  padding: 12px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s;
}
.pbc-btn:hover { background: #1a1a1a; color: #c9a96e; }

/* Modal */
.portal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.portal-modal.open { display: flex; }
.portal-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
}
.portal-modal-content {
  position: relative;
  background: #fff;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  border-radius: 3px;
}
.portal-modal-close {
  position: absolute;
  top: 16px; right: 20px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  line-height: 1;
}
.portal-line { width: 50px; height: 1px; background: #c9a96e; margin: 16px 0 24px; }
.portal-form { display: flex; flex-direction: column; gap: 16px; }
.portal-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.portal-form label {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #888; margin-bottom: 6px; display: block;
}
.portal-form input, .portal-form select, .portal-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  font-size: 14px;
  font-family: inherit;
  background: #fafafa;
}
.portal-form input:focus, .portal-form select:focus, .portal-form textarea:focus {
  outline: none; border-color: #c9a96e; background: #fff;
}
.portal-form-section-title {
  font-family: Georgia, serif;
  font-size: 18px;
  margin: 12px 0 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Concierge cards */
.portal-concierge-list { display: flex; flex-direction: column; gap: 16px; }
.portal-concierge-card {
  background: #fff;
  padding: 24px;
  border-radius: 3px;
  border-left: 3px solid #c9a96e;
}
.pcc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.pcc-subject { font-family: Georgia, serif; font-size: 18px; color: #1a1a1a; margin-bottom: 4px; }
.pcc-brand { font-size: 11px; color: #c9a96e; letter-spacing: 1px; text-transform: uppercase; }
.pcc-message { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 12px; }
.pcc-date { font-size: 11px; color: #999; margin-bottom: 12px; }
.pcc-response {
  background: #fefcf7;
  padding: 14px 16px;
  border-left: 2px solid #c9a96e;
  margin-top: 14px;
  font-size: 13px;
  color: #444;
  line-height: 1.6;
}
.pcc-response-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c9a96e;
  margin-bottom: 6px;
  font-weight: 600;
}

/* ═══════════════════════════════════════
   STAFF PANEL
═══════════════════════════════════════ */
.staff-shell {
  min-height: 100vh;
  background: #f5f0eb;
}
.staff-header {
  background: #1a1a1a;
  color: #fff;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.staff-logo { display: flex; align-items: center; gap: 16px; }
.staff-logo img { max-height: 32px; filter: brightness(0) invert(1); }
.staff-logo span {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c9a96e;
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 16px;
}
.staff-header-right { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.staff-logout {
  background: transparent;
  color: #c9a96e;
  border: 1px solid rgba(201,169,110,0.3);
  padding: 8px 16px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.staff-logout:hover { background: #c9a96e; color: #1a1a1a; }
.staff-tabs {
  background: #fff;
  display: flex;
  padding: 0 40px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.staff-tab {
  background: transparent;
  border: none;
  padding: 18px 24px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
}
.staff-tab.active { color: #1a1a1a; border-bottom-color: #c9a96e; }
.staff-main { padding: 40px; max-width: 1400px; }
.staff-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.staff-section-header h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  margin: 0;
}
.staff-count {
  background: #1a1a1a;
  color: #c9a96e;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.staff-empty {
  background: #fff;
  padding: 60px;
  text-align: center;
  color: #999;
  border-radius: 3px;
}
.staff-arrivals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.staff-arrival-card {
  background: #fff;
  padding: 24px;
  border-radius: 3px;
  border-top: 3px solid #c9a96e;
}
.sac-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.sac-guest { font-family: Georgia, serif; font-size: 20px; color: #1a1a1a; margin-bottom: 4px; }
.sac-tier {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: 600;
}
.sac-tier.tier-explorer { background: #4a5d3a; color: #fff; }
.sac-tier.tier-voyager { background: #5a4a3a; color: #fff; }
.sac-tier.tier-sovereign { background: linear-gradient(135deg, #c9a96e, #b8860b); color: #1a1a1a; }
.sac-room { font-size: 14px; color: #1a1a1a; font-weight: 500; }
.sac-brand { font-size: 11px; color: #c9a96e; letter-spacing: 1px; text-transform: uppercase; margin: 4px 0 12px; }
.sac-dates { font-size: 12px; color: #666; margin-bottom: 12px; }
.sac-notes {
  background: #fefcf7;
  padding: 10px 12px;
  border-left: 2px solid #c9a96e;
  font-size: 11px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 12px;
}
.sac-contact { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #888; margin-bottom: 14px; }
.sac-actions { display: flex; gap: 8px; }
.sa-btn {
  flex: 1;
  background: transparent;
  color: #1a1a1a;
  border: 1px solid #ddd;
  padding: 8px 12px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.sa-btn:hover { border-color: #1a1a1a; }
.sa-btn-primary { background: #1a1a1a; color: #c9a96e; border-color: #1a1a1a; }
.sa-btn-primary:hover { background: #c9a96e; color: #1a1a1a; }

.staff-list { display: flex; flex-direction: column; gap: 8px; }
.staff-list-row {
  background: #fff;
  padding: 16px 24px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.staff-list-row.pending { border-left: 3px solid #c9a96e; flex-wrap: wrap; }
.slr-date { font-size: 11px; color: #c9a96e; letter-spacing: 1px; text-transform: uppercase; min-width: 120px; }
.slr-main { flex: 1; }
.slr-guest { font-size: 14px; color: #1a1a1a; font-weight: 500; margin-bottom: 4px; }
.slr-type {
  display: inline-block;
  font-size: 9px;
  background: #f5f0eb;
  color: #c9a96e;
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 8px;
}
.slr-meta { font-size: 12px; color: #666; }
.slr-notes { font-size: 11px; color: #888; margin-top: 6px; font-style: italic; }
.slr-actions { display: flex; gap: 8px; }

.staff-concierge-card {
  background: #fff;
  padding: 24px;
  border-radius: 3px;
  border-left: 3px solid #c9a96e;
  margin-bottom: 12px;
}
.scc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.scc-subject { font-family: Georgia, serif; font-size: 18px; color: #1a1a1a; }
.scc-meta { font-size: 11px; color: #888; margin-top: 4px; }
.scc-message { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 14px; }
.scc-response {
  background: #f5f0eb;
  padding: 12px 14px;
  border-left: 2px solid #c9a96e;
  font-size: 12px;
  color: #555;
  margin-bottom: 14px;
}
.scc-actions { display: flex; flex-direction: column; gap: 10px; }
.scc-actions textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  font-size: 12px;
  font-family: inherit;
  border-radius: 2px;
}
.scc-btns { display: flex; gap: 8px; }

/* Mobile portal */
@media (max-width: 768px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar {
    position: relative;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
  }
  .portal-tier-card { width: 100%; }
  .portal-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .portal-nav-link { flex: 1 0 auto; }
  .portal-main { padding: 32px 20px; }
  .portal-page-title { font-size: 32px; }
  .auth-card { padding: 32px 24px; }
  .auth-title { font-size: 30px; }
  .auth-form .form-row { grid-template-columns: 1fr; }
  .staff-header { padding: 16px 20px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .staff-tabs { padding: 0 20px; overflow-x: auto; }
  .staff-main { padding: 24px 20px; }
}

/* ════════════════════════════════════════════════════
   PORTAL EVENTS PAGE
   ════════════════════════════════════════════════════ */
.portal-page-sub {
  margin-top: 8px; color: rgba(0,0,0,0.55); font-size: 14px; max-width: 560px;
}
.events-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 24px 0 32px;
}
.events-filter {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.7);
  cursor: pointer;
  border-radius: 1px;
  transition: all 0.2s;
}
.events-filter:hover { border-color: #b08d3a; color: #b08d3a; }
.events-filter.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}
.event-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: all 0.3s;
}
.event-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-3px); }
.ec-image { height: 200px; background-size: cover; background-position: center; background-color: #eee; }
.ec-image-empty { background: linear-gradient(135deg, #f0e6d2 0%, #d4b88a 100%); }
.ec-body { padding: 22px 24px 20px; display: flex; flex-direction: column; flex: 1; }
.ec-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px;
}
.ec-brand { color: #b08d3a; font-weight: 600; }
.ec-type { color: rgba(0,0,0,0.5); background: rgba(0,0,0,0.05); padding: 3px 9px; }
.ec-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1.25; margin-bottom: 8px; color: #1a1a1a; }
.ec-when { font-size: 12px; color: rgba(0,0,0,0.55); margin-bottom: 12px; }
.ec-desc {
  font-size: 13px; color: rgba(0,0,0,0.7); line-height: 1.55; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ec-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06);
}
.ec-price { font-size: 14px; font-weight: 600; }
.ec-price span { font-weight: 400; color: rgba(0,0,0,0.5); font-size: 11px; }
.ec-btn {
  background: #1a1a1a; color: #fff; border: none;
  padding: 10px 22px; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.ec-btn:hover { background: #b08d3a; }
.ec-recur { font-size: 11px; color: #b08d3a; margin-top: 10px; }

/* Booked event states */
.ec-image { position: relative; }
.ec-status-badge {
  position: absolute; top: 14px; right: 14px;
  padding: 6px 12px; font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; font-weight: 600;
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ec-status-pending {
  background: rgba(176, 141, 58, 0.92); color: #fff;
  box-shadow: 0 2px 12px rgba(176, 141, 58, 0.35);
}
.ec-status-confirmed {
  background: rgba(46, 125, 50, 0.92); color: #fff;
  box-shadow: 0 2px 12px rgba(46, 125, 50, 0.35);
}
.event-card.has-booking {
  border-color: rgba(176, 141, 58, 0.35);
}
.ec-btn-pending, .ec-btn-confirmed {
  cursor: not-allowed; opacity: 0.85;
}
.ec-btn-pending {
  background: transparent; color: #b08d3a;
  border: 1px solid #b08d3a;
}
.ec-btn-pending:hover { background: transparent; }
.ec-btn-confirmed {
  background: #2e7d32; color: #fff;
}
.ec-btn-confirmed:hover { background: #2e7d32; }
.ec-booking-note {
  font-size: 11px; color: #b08d3a;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(176, 141, 58, 0.3);
  line-height: 1.5;
}
.ec-booking-note-ok { color: #2e7d32; border-top-color: rgba(46, 125, 50, 0.3); }

/* Toast notifications */
.ss-toast-host {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
.ss-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  min-width: 280px; max-width: 420px;
  padding: 14px 16px;
  background: #1a1a1a; color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid #b08d3a;
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  font-size: 13px; line-height: 1.5;
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ss-toast.ss-toast-in { opacity: 1; transform: translateX(0); }
.ss-toast.ss-toast-out { opacity: 0; transform: translateX(40px); }
.ss-toast-success { border-left-color: #2e7d32; }
.ss-toast-error { border-left-color: #c62828; }
.ss-toast-info { border-left-color: #b08d3a; }
.ss-toast-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: rgba(255,255,255,0.08);
}
.ss-toast-success .ss-toast-icon { background: #2e7d32; }
.ss-toast-error .ss-toast-icon { background: #c62828; }
.ss-toast-info .ss-toast-icon { background: #b08d3a; font-style: italic; font-family: serif; }
.ss-toast-msg { flex: 1; }
.ss-toast-close {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color 0.15s;
}
.ss-toast-close:hover { color: #fff; }

/* Portal modal */
.portal-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.portal-modal-card {
  background: #fff; max-width: 520px; width: 100%;
  padding: 40px 36px 32px; position: relative; max-height: 90vh; overflow-y: auto;
}
.portal-modal-close {
  position: absolute; top: 16px; right: 20px; background: none; border: none;
  font-size: 28px; cursor: pointer; color: rgba(0,0,0,0.5);
}
.portal-modal-label { font-size: 11px; letter-spacing: 2px; color: #b08d3a; text-transform: uppercase; }
.portal-modal-title { font-family: 'Cormorant Garamond', serif; font-size: 28px; margin: 6px 0 4px; }
.portal-modal-meta { font-size: 12px; color: rgba(0,0,0,0.55); margin-bottom: 24px; }

/* ── Breadcrumb (luxury, thin strip — sits below hero/subnav) ── */
.breadcrumb {
  position: relative;
  background: rgba(10,10,10,0.96);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.08);
  z-index: 30;
}
.breadcrumb-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 7px 48px;
}
.breadcrumb-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  line-height: 1.4;
}
.breadcrumb-item {
  display: inline-flex; align-items: center;
  color: rgba(255,255,255,0.5);
}
.breadcrumb-item a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.25s ease;
}
.breadcrumb-item a:hover { color: var(--gold); }
.breadcrumb-item span[aria-current="page"] {
  color: var(--gold);
  font-style: italic;
}
.breadcrumb-sep {
  margin: 0 9px;
  color: rgba(var(--gold-rgb),0.3);
  font-size: 12px;
}
@media (max-width: 768px) {
  .breadcrumb-inner { padding: 6px 20px; }
  .breadcrumb-list { font-size: 12px; }
  .breadcrumb-sep { margin: 0 6px; }
}

/* ══════════════════════════════════════════
   ROOM DETAIL — Light theme rebuild
   ══════════════════════════════════════════ */

.room-detail-hero { height: 42vh; min-height: 340px; max-height: 460px; }
.room-detail-hero .page-hero-overlay {
  background: linear-gradient(to bottom, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.85) 100%);
}
.room-detail-hero .page-hero-title { font-size: 44px; }
.room-detail-hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: rgba(255,255,255,0.85);
  margin-top: 12px; max-width: 580px; margin-left: auto; margin-right: auto;
  line-height: 1.5;
}

/* Scroll-down indicator at bottom of hero */
.room-detail-scroll {
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 12px;
  z-index: 3;
  pointer-events: none;
}
.room-detail-scroll::before {
  content: ""; position: absolute;
  left: 50%; top: 7px;
  width: 2px; height: 7px;
  background: var(--gold-light);
  border-radius: 1px;
  transform: translateX(-50%);
  animation: roomScrollDot 1.8s ease-in-out infinite;
}
@keyframes roomScrollDot {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  35%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(-50%, 14px); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* Booking widget strip on room detail (above overview) */
.room-booking-strip {
  background: #faf8f5;
  padding: 36px 32px 8px;
}
.room-booking-strip-inner {
  max-width: 1100px; margin: 0 auto;
}
.room-booking-strip .booking-widget {
  box-shadow: 0 14px 38px -22px rgba(40,30,15,0.4);
}
.room-booking-result {
  max-width: 720px; margin: 22px auto 0;
  text-align: center;
}
.room-booking-result-row {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
}
.room-booking-result-label {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold-dim);
}
.room-booking-result-total {
  font-family: var(--serif); font-size: 32px; font-weight: 300;
  color: #1a1a1a; line-height: 1;
}
.room-booking-result-meta {
  margin-top: 8px;
  font-family: var(--sans); font-size: 12px;
  color: #888; letter-spacing: 0.5px;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.room-booking-result-sep { color: rgba(138,117,96,0.5); }

/* ══════════════════════════════════════════
   Flatpickr — custom Soulsetters theme
   ══════════════════════════════════════════ */
.flatpickr-calendar.open {
  background: #faf8f5;
  border: 1px solid rgba(138,117,96,0.35);
  border-radius: 2px;
  box-shadow: 0 30px 80px -30px rgba(40,30,15,0.5),
              0 8px 24px -12px rgba(40,30,15,0.3);
  font-family: var(--sans);
  padding: 8px 6px 12px;
  width: auto;
}
.flatpickr-calendar.hasTime .flatpickr-time { border-top-color: rgba(138,117,96,0.25); }
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: rgba(138,117,96,0.35); }
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-top-color: rgba(138,117,96,0.35); }

.flatpickr-months { padding: 8px 4px 12px; }
.flatpickr-month {
  background: transparent;
  color: #2a2520;
  height: 42px;
}
.flatpickr-current-month {
  font-family: var(--serif);
  font-size: 20px !important;
  font-weight: 300 !important;
  color: #2a2520;
  padding-top: 6px;
}
.flatpickr-current-month .cur-month {
  font-weight: 300;
  font-style: italic;
  color: var(--gold-dim);
}
.flatpickr-current-month input.cur-year {
  font-family: var(--serif);
  font-weight: 300;
  color: #2a2520;
}
.flatpickr-monthDropdown-months {
  background: transparent !important;
  font-family: var(--serif) !important;
  font-style: italic;
  color: var(--gold-dim) !important;
}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: #faf8f5;
}

.flatpickr-prev-month, .flatpickr-next-month {
  fill: var(--gold-dim);
  color: var(--gold-dim);
  padding: 12px !important;
  top: 4px !important;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
  fill: #1a1a1a !important;
  color: #1a1a1a !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: inherit; }

.flatpickr-weekdays { background: transparent; height: 32px; }
.flatpickr-weekday {
  color: #999 !important;
  background: transparent !important;
  font-size: 10px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 400 !important;
}

.flatpickr-days { padding: 4px 0; }
.dayContainer { padding: 2px 0; }

.flatpickr-day {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 300;
  color: #3a3530;
  border-radius: 2px;
  border: 1px solid transparent;
  height: 38px; line-height: 36px;
  max-width: 38px;
  margin: 1px 0;
}
.flatpickr-day:hover {
  background: rgba(var(--gold-rgb),0.18);
  border-color: rgba(var(--gold-rgb),0.4);
  color: #1a1a1a;
}
.flatpickr-day.today {
  border-color: var(--gold-dim);
  color: var(--gold-dim);
}
.flatpickr-day.today:hover { background: rgba(var(--gold-rgb),0.25); color: #1a1a1a; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
  color: #ccc;
}
.flatpickr-day.flatpickr-disabled:hover { background: transparent; border-color: transparent; }

/* Range styling */
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  background: rgba(var(--gold-rgb),0.22) !important;
  border-color: rgba(var(--gold-rgb),0.22) !important;
  color: #2a2520;
  box-shadow: -5px 0 0 rgba(var(--gold-rgb),0.22), 5px 0 0 rgba(var(--gold-rgb),0.22);
}
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:hover {
  background: var(--gold-dim) !important;
  border-color: var(--gold-dim) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.flatpickr-day.startRange.endRange {
  border-radius: 2px;
}
.flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 var(--gold-dim);
}

@media (max-width: 768px) {
  .flatpickr-calendar.open { width: auto !important; }
  .flatpickr-day { height: 34px; line-height: 32px; max-width: 34px; font-size: 14px; }
}

/* ── Guests popover (custom dropdown) ── */
.guests-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, -8px);
  min-width: 220px;
  background: #faf8f5;
  border: 1px solid rgba(138,117,96,0.35);
  border-radius: 2px;
  box-shadow: 0 30px 80px -30px rgba(40,30,15,0.5),
              0 8px 24px -12px rgba(40,30,15,0.3);
  padding: 14px 12px 12px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  text-align: left;
}
.guests-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.guests-popover-label {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  text-align: center;
  margin-bottom: 10px;
  font-family: var(--sans);
}
.guests-popover-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.guests-popover-item {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(138,117,96,0.25);
  border-radius: 2px;
  padding: 14px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  color: #3a3530;
  font-family: var(--serif);
}
.guests-popover-item:hover {
  background: rgba(var(--gold-rgb),0.15);
  border-color: rgba(var(--gold-rgb),0.5);
}
.guests-popover-item.is-selected {
  background: var(--gold-dim);
  border-color: var(--gold-dim);
  color: #fff;
}
.guests-popover-num {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}
.guests-popover-cap {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Back-to-rooms strip (cream, sits below breadcrumb) */
.room-detail-backbar {
  background: #faf8f5;
  border-bottom: 1px solid rgba(138,117,96,0.15);
}
.room-detail-backbar-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 18px 32px;
  display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
}
.room-detail-back {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-dim); text-decoration: none;
  transition: color 0.3s, transform 0.3s;
  display: inline-flex; align-items: center; gap: 6px;
}
.room-detail-back:hover { color: #1a1a1a; transform: translateX(-2px); }
.room-detail-back--alt { color: #999; }
.room-detail-back--alt:hover { color: var(--gold-dim); }

/* Description body (cream section) */
.room-detail-desc {
  font-family: var(--serif);
  font-size: 17px; line-height: 1.9; color: #555;
  margin-top: 28px; text-align: left;
  max-width: 680px; margin-left: auto; margin-right: auto;
}
.room-detail-desc p { margin-bottom: 18px; }
.room-detail-desc p:last-child { margin-bottom: 0; }

/* Accent photo (small decorative shot under description) */
.room-detail-accent {
  margin: 44px auto 0;
  max-width: 520px;
  position: relative;
  padding: 8px;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(40,30,15,0.35),
              0 1px 0 rgba(138,117,96,0.18) inset;
}
.room-detail-accent::before {
  content: ""; position: absolute;
  inset: -1px;
  border: 1px solid rgba(138,117,96,0.35);
  pointer-events: none;
}
.room-detail-accent img {
  display: block; width: 100%;
  aspect-ratio: 3/2; object-fit: cover;
}

/* Meta strip (size / guests / type / price) */
.room-detail-meta-strip {
  max-width: 900px; margin: 56px auto 0;
  display: flex; justify-content: center; gap: 64px; flex-wrap: wrap;
  padding-top: 36px;
  border-top: 1px solid rgba(138,117,96,0.25);
}
.room-detail-meta-item { text-align: center; }
.room-detail-meta-num {
  font-family: var(--serif); font-size: 30px; font-weight: 300;
  color: var(--gold-dim); line-height: 1;
}
.room-detail-meta-label {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: #888; margin-top: 10px;
}

/* Cream-section CTA buttons */
.room-detail-cta {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: 48px;
}
.btn-outline--dark {
  border-color: var(--gold-dim); color: var(--gold-dim);
}
.btn-outline--dark:hover { background: var(--gold-dim); color: #fff; }

/* Features grid (light bg) */
.room-detail-features {
  max-width: 1000px; margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 32px;
}
.room-detail-feature {
  padding: 16px 20px;
  border: 1px solid rgba(138,117,96,0.25);
  background: #fff;
  font-size: 13px; color: #555;
  display: flex; align-items: center; gap: 12px;
  transition: border-color 0.3s, background 0.3s;
}
.room-detail-feature:hover {
  border-color: var(--gold-dim);
  background: #faf8f5;
}
.room-detail-feature-icon { color: var(--gold-dim); font-size: 12px; }

/* Gallery (cream section, masonry-ish) */
.room-detail-gallery {
  max-width: 1100px; margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 32px;
}
.room-detail-gallery-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  cursor: pointer; transition: transform 0.4s, filter 0.3s;
  display: block;
}
.room-detail-gallery-img:hover { transform: scale(1.02); filter: brightness(1.05); }

/* Related rooms grid (constrained on light bg) */
.room-detail-related {
  max-width: 1100px; margin: 48px auto 0;
  padding: 0 32px;
}

@media (max-width: 768px) {
  .room-detail-hero { height: 50vh; min-height: 340px; }
  .room-detail-hero-sub { font-size: 15px; padding: 0 24px; }
  .room-detail-backbar-inner { padding: 14px 20px; gap: 18px; }
  .room-detail-back { font-size: 11px; letter-spacing: 1.5px; }
  .room-detail-desc { font-size: 15px; padding: 0 24px; }
  .room-detail-meta-strip { gap: 32px; margin-top: 40px; padding-top: 28px; }
  .room-detail-meta-num { font-size: 24px; }
  .room-detail-features { padding: 0 20px; gap: 10px; }
  .room-detail-gallery { grid-template-columns: repeat(2, 1fr); padding: 0 20px; gap: 6px; }
  .room-detail-related { padding: 0 20px; }
}

/* ── Listings: sort toolbar ── */
.rooms-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto 32px;
  padding: 12px 0;
  border-top: 1px solid rgba(199, 159, 91, 0.18);
  border-bottom: 1px solid rgba(199, 159, 91, 0.18);
}
.rooms-toolbar-count {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6b5a3e;
}
.rooms-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rooms-sort-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6b5a3e;
}
.rooms-sort {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid rgba(107, 90, 62, 0.45);
  color: #2a2218;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 8px 36px 8px 14px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236b5a3e' stroke-width='1.6' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.rooms-sort option { color: #2a2218; background: #fff; }
.rooms-sort:focus { outline: none; border-color: var(--gold); }
@media (max-width: 768px) {
  .rooms-toolbar { flex-direction: column; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: 0 16px 24px; }
}

.booking-widget-btn--disabled,
.btn-gold.booking-widget-btn--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Booking confirm page (/book) ────────────────────────────────────── */
.book-confirm { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.book-confirm-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: start;
}
.book-confirm-room {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(20,16,8,0.04), 0 18px 48px rgba(20,16,8,0.08);
  position: sticky;
  top: 100px;
}
.book-confirm-photo {
  height: 240px;
  background-size: cover;
  background-position: center;
}
.book-confirm-room-body { padding: 24px 26px 28px; }
.book-confirm-room-brand {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim, #6b5a3e);
  margin-bottom: 6px;
}
.book-confirm-room-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  line-height: 1.15;
  color: #2a2218;
  margin: 0 0 10px;
}
.book-confirm-room-sub {
  font-style: italic;
  color: #6b5a3e;
  font-size: 15px;
  margin-bottom: 14px;
}
.book-confirm-room-meta {
  display: flex;
  gap: 18px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b5a3e;
  border-top: 1px solid rgba(107,90,62,0.2);
  padding-top: 14px;
}
.book-confirm-main { padding-top: 8px; }
.book-confirm-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  line-height: 1.1;
  color: #2a2218;
  margin: 8px 0 18px;
}
.book-confirm-rows {
  border-top: 1px solid rgba(107,90,62,0.25);
  margin-top: 28px;
}
.book-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(107,90,62,0.18);
}
.book-confirm-row-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b5a3e;
}
.book-confirm-row-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: #2a2218;
}
.book-confirm-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 26px;
  padding: 18px 0 6px;
  border-top: 2px solid rgba(107,90,62,0.4);
}
.book-confirm-total-label {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b5a3e;
}
.book-confirm-total-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  color: #2a2218;
  font-weight: 500;
}
.book-confirm-total-meta {
  font-size: 12px;
  font-style: italic;
  color: #8a7858;
  margin-bottom: 24px;
}
.book-confirm-form { margin-top: 12px; }
.book-confirm-form .form-field { margin-bottom: 18px; }
.book-confirm-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b5a3e;
  margin-bottom: 8px;
}
.book-confirm-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(107,90,62,0.35);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  color: #2a2218;
  resize: vertical;
}
.book-confirm-form textarea:focus { outline: none; border-color: var(--gold, #b89464); }
.book-confirm-error {
  background: rgba(180,40,40,0.08);
  color: #b22828;
  border: 1px solid rgba(180,40,40,0.3);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 14px;
}
.book-confirm-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}
.book-confirm-actions .btn-gold { flex: 1; text-align: center; }
@media (max-width: 768px) {
  .book-confirm { padding: 0 18px; }
  .book-confirm-grid { grid-template-columns: 1fr; gap: 28px; }
  .book-confirm-room { position: static; }
  .book-confirm-title { font-size: 32px; }
  .book-confirm-total-amount { font-size: 30px; }
  .book-confirm-actions { flex-direction: column; }
  .book-confirm-actions .btn-outline,
  .book-confirm-actions .btn-gold { width: 100%; text-align: center; }
}

/* ── /rooms rotating hero slideshow ── */
.rooms-hero-slides {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.rooms-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; animation: roomsHeroFade 18s infinite;
}
.rooms-hero-slide:nth-child(1) { animation-delay: 0s; }
.rooms-hero-slide:nth-child(2) { animation-delay: 6s; }
.rooms-hero-slide:nth-child(3) { animation-delay: 12s; }
@keyframes roomsHeroFade {
  0%   { opacity: 0; transform: scale(1.05); }
  5%   { opacity: 1; }
  33%  { opacity: 1; transform: scale(1.08); }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ============================================================
   CONCEPT PAGE — gold / cream / ivory editorial
   ============================================================ */

/* 1. Hero ----------------------------------------------------- */
.concept-hero {
  position: relative;
  height: 78vh;
  min-height: 560px;
  overflow: hidden;
}
.concept-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}
.concept-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.85) 100%);
}
.concept-hero-dark {
  position: absolute; inset: 0;
  background: #000;
  pointer-events: none;
}
.concept-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f6efe2;
  padding: 0 24px;
}
.concept-hero-kicker {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 22px;
}
.concept-hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 78px;
  line-height: 1.05;
  margin: 0 0 22px;
  color: #fbf6ec;
}
.concept-hero-title em {
  font-style: italic;
  font-weight: 300;
}
.concept-hero-title .concept-gold {
  color: var(--gold-light);
  font-style: italic;
}
.concept-hero-rest {
  display: inline-block;
  font-size: 0.5em;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f6efe2;
  margin-top: 14px;
}
.concept-hero-line {
  width: 70px;
  height: 1px;
  background: var(--gold-light);
  margin: 8px auto 18px;
}
.concept-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: #efe6d4;
  max-width: 520px;
}

/* 2. Editorial intro ----------------------------------------- */
.concept-intro {
  background: #faf8f5;
  padding: 110px 32px 90px;
  text-align: center;
}
.concept-intro-inner {
  max-width: 880px;
  margin: 0 auto;
}
.concept-intro-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 60px;
  line-height: 1.15;
  color: #2a2520;
  margin: 0 0 26px;
}
.concept-intro-title em {
  font-style: italic;
  font-weight: 300;
}
.concept-intro-small {
  font-size: 0.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a7a64;
  margin: 0 8px;
  vertical-align: middle;
}
.concept-gold-italic {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
}
.concept-divider {
  width: 60px;
  height: 1px;
  background: var(--gold-dim);
  margin: 0 auto 30px;
}
.concept-divider-left {
  margin: 0 0 30px;
}
.concept-intro-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 2;
  color: #6a625a;
  max-width: 760px;
  margin: 0 auto;
}

/* 3. Pillars -------------------------------------------------- */
.concept-pillars {
  background: #ffffff;
  padding: 100px 32px 110px;
  border-top: 1px solid rgba(196,168,130,0.18);
  border-bottom: 1px solid rgba(196,168,130,0.18);
}
.concept-pillars-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.concept-pillars-head {
  text-align: center;
  margin-bottom: 64px;
}
.concept-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 16px;
}
.concept-section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 42px;
  line-height: 1.2;
  color: #2a2520;
  margin: 0;
}
.concept-section-title em { font-style: italic; }
.concept-pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px;
}
.concept-pillar {
  text-align: left;
  padding: 28px 20px;
  border-top: 1px solid rgba(196,168,130,0.35);
  position: relative;
  transition: transform .4s ease, border-color .4s ease;
}
.concept-pillar:hover {
  transform: translateY(-4px);
  border-top-color: var(--gold);
}
.concept-pillar-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.concept-pillar-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #2a2520;
  margin: 0 0 12px;
}
.concept-pillar-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.85;
  color: #6f665c;
  font-style: italic;
  margin: 0;
}

/* 4. Editorial split ----------------------------------------- */
.concept-split {
  background: #faf8f5;
  padding: 110px 32px;
}
.concept-split-rev { background: #fffdf9; }
.concept-split-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.concept-split-rev .concept-split-inner {
  grid-template-columns: 1fr 1.05fr;
}
.concept-split-rev .concept-split-img { order: 2; }
.concept-split-rev .concept-split-text { order: 1; }
.concept-split-img {
  position: relative;
  overflow: hidden;
}
.concept-split-img::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(196,168,130,0.45);
  pointer-events: none;
}
.concept-split-img img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
}
.concept-split-text {
  padding: 0 12px;
}
.concept-split-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 50px;
  line-height: 1.1;
  color: #2a2520;
  margin: 14px 0 22px;
}
.concept-split-title em { font-style: italic; }
.concept-split-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 2;
  color: #6a625a;
  font-style: italic;
}

/* 5. Pull quote ---------------------------------------------- */
.concept-quote {
  background:
    radial-gradient(ellipse at center, rgba(196,168,130,0.08), rgba(196,168,130,0) 70%),
    #faf8f5;
  padding: 130px 32px;
  text-align: center;
}
.concept-quote-inner {
  max-width: 820px;
  margin: 0 auto;
}
.concept-quote-mark {
  font-family: var(--serif);
  font-size: 130px;
  line-height: 0.6;
  color: var(--gold);
  margin-bottom: 14px;
  font-style: italic;
}
.concept-quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.45;
  color: #3a342c;
  margin: 0 0 30px;
}
.concept-quote-attr {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* 6. CTA banner ---------------------------------------------- */
.concept-cta {
  background: #1a1612;
  padding: 110px 32px;
  text-align: center;
  color: #f6efe2;
  border-top: 1px solid rgba(196,168,130,0.25);
}
.concept-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.concept-cta-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 52px;
  line-height: 1.1;
  margin: 0 0 22px;
  color: #fbf6ec;
}
.concept-cta-title em { font-style: italic; }
.concept-cta-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.9;
  color: #d8cfbd;
  margin: 0 auto 38px;
  max-width: 520px;
}
.concept-cta-btn {
  display: inline-block;
  padding: 16px 46px;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .35s ease;
}
.concept-cta-btn:hover {
  background: var(--gold);
  color: #1a1612;
}

/* Responsive ------------------------------------------------- */
@media (max-width: 1100px) {
  .concept-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .concept-split-inner,
  .concept-split-rev .concept-split-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .concept-split-rev .concept-split-img { order: 0; }
  .concept-split-rev .concept-split-text { order: 0; }
  .concept-split-img img { height: 440px; }
}
@media (max-width: 720px) {
  .concept-hero {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
  }
  .concept-hero-title { font-size: 44px; }
  .concept-hero-rest { font-size: 0.42em; }
  .concept-hero-sub { font-size: 14px; }
  .concept-intro { padding: 64px 20px 56px; }
  .concept-intro-title { font-size: 34px; }
  .concept-intro-small { font-size: 0.42em; }
  .concept-intro-body { font-size: 16px; line-height: 1.85; }
  .concept-pillars { padding: 64px 20px 72px; }
  .concept-pillars-head { margin-bottom: 40px; }
  .concept-section-title { font-size: 28px; }
  .concept-pillars-grid { grid-template-columns: 1fr; gap: 8px; }
  .concept-pillar { padding: 24px 4px; }
  .concept-split { padding: 64px 20px; }
  .concept-split-title { font-size: 32px; }
  .concept-split-body { font-size: 16px; line-height: 1.85; }
  .concept-split-img img { height: 320px; }
  .concept-quote { padding: 80px 24px; }
  .concept-quote-mark { font-size: 90px; }
  .concept-quote-text { font-size: 22px; }
  .concept-cta { padding: 72px 24px; }
  .concept-cta-title { font-size: 32px; }
  .concept-cta-body { font-size: 14px; }
}

/* ══════════════════════════════════════════
   BRAND EXPERIENCES PAGE (bxp-*)
   ══════════════════════════════════════════ */

/* Hero */
.bxp-hero { position: relative; height: 70vh; min-height: 500px; overflow: hidden; }
.bxp-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* .bxp-hero-overlay was a hardcoded gradient (0.45 → 0.85). Removed at
   user's request — darkening is now admin-driven via .bxp-hero-dark alone
   (Hero Card v2 component). Leave the element in templates as a no-op so
   future selectors don't break, but make its background transparent. */
.bxp-hero-overlay { position: absolute; inset: 0; background: transparent; }
.bxp-hero-dark { position: absolute; inset: 0; background: #000; pointer-events: none; }
.bxp-hero-content { position: absolute; bottom: 80px; left: 0; right: 0; text-align: center; z-index: 2; padding: 0 24px; }
.bxp-hero-kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.bxp-hero-title { font-family: var(--serif); font-size: 56px; font-weight: 300; line-height: 1.15; color: var(--text); }
.bxp-hero-title em { font-style: italic; font-weight: 300; }
.bxp-gold { color: var(--gold); }

/* Intro */
.bxp-intro { padding: 80px 24px; background: var(--bg); text-align: center; }
.bxp-intro-inner { max-width: 720px; margin: 0 auto; }
.bxp-intro-title { font-family: var(--serif); font-size: 36px; font-weight: 300; color: var(--text); margin-bottom: 20px; }
.bxp-intro-desc { font-family: var(--serif); font-size: 18px; font-weight: 300; font-style: italic; color: var(--text-dim); line-height: 1.8; }
.bxp-intro-line { width: 60px; height: 1px; background: var(--gold-dim); margin: 0 auto 24px; }
.bxp-intro-line + .bxp-intro-title { margin-top: 0; }
.bxp-intro-desc + .bxp-intro-line { margin-top: 24px; }

/* ── Signature Experiences ── */
.bxp-signatures { background: var(--bg); max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.bxp-sig { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
.bxp-sig--reverse { direction: rtl; }
.bxp-sig--reverse > * { direction: ltr; }

.bxp-sig-image { position: relative; overflow: hidden; }
/* Crossfade slideshow support (#9). When the image container has
   `bxp-sig-image--slides`, every .bxp-sig-img-inner stacks with opacity
   transitions — the .is-active slide is visible, others fade out. */
.bxp-sig-img-inner {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.45,.05,.55,.95), transform 0.8s ease;
}
.bxp-sig-image:not(.bxp-sig-image--slides) .bxp-sig-img-inner { opacity: 1; }
.bxp-sig-image--slides .bxp-sig-img-inner.is-active { opacity: 1; }
.bxp-sig:hover .bxp-sig-img-inner.is-active { transform: scale(1.03); }
.bxp-sig-num { position: absolute; top: 32px; left: 32px; font-family: var(--serif); font-size: 72px; font-weight: 300; color: rgba(255,255,255,0.12); line-height: 1; pointer-events: none; }
.bxp-sig--reverse .bxp-sig-num { left: auto; right: 32px; }

.bxp-sig-content { display: flex; flex-direction: column; justify-content: center; padding: 56px 56px; background: var(--bg-section); }
.bxp-sig-kicker { font-family: var(--sans); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.bxp-sig-title { font-family: var(--serif); font-size: 42px; font-weight: 300; color: var(--text); margin-bottom: 16px; line-height: 1.2; }
.bxp-sig-divider { color: var(--gold-dim); font-size: 10px; margin-bottom: 20px; letter-spacing: 8px; }
.bxp-sig-desc { font-family: var(--serif); font-size: 18px; font-weight: 300; font-style: italic; color: var(--text-dim); line-height: 1.8; margin-bottom: 32px; }
.bxp-sig-cta { display: inline-block; font-family: var(--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 14px 36px; text-decoration: none; transition: all 0.3s; align-self: flex-start; }
.bxp-sig-cta:hover { background: var(--gold); color: var(--bg); }

/* ── Grid Divider ── */
.bxp-grid-intro { padding: 80px 24px 40px; background: var(--bg); text-align: center; }
.bxp-grid-intro-inner { max-width: 1200px; margin: 0 auto; }
.bxp-grid-intro-title { font-family: var(--serif); font-size: 36px; font-weight: 300; color: var(--text); }
.bxp-grid-intro-title em { font-style: italic; color: var(--gold); }

/* ── Experience Grid ── */
.bxp-grid-section { padding: 0 0 80px; background: var(--bg); position: relative; }
.bxp-carousel-wrap { position: relative; }
.bxp-carousel-fade { position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.2s; }
.bxp-carousel-fade--left  { left: 0;  background: linear-gradient(to right, var(--bg) 20%, transparent); }
.bxp-carousel-fade--right { right: 0; background: linear-gradient(to left,  var(--bg) 20%, transparent); }
.bxp-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; cursor: pointer; color: #fff; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, background 0.2s; pointer-events: none; }
.bxp-carousel-arrow--left  { left: 16px; }
.bxp-carousel-arrow--right { right: 16px; }
.bxp-carousel-arrow:hover  { background: rgba(0,0,0,0.55); }
/* Experience grid — horizontal carousel (#15). Full-bleed image cards with text
   overlaid at the bottom under a soft gradient. Category chip floats
   top-left. Hover lifts the card + gently zooms the image. */
.bxp-grid { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 18px; padding: 0 48px 8px; cursor: grab; }
.bxp-grid::-webkit-scrollbar { display: none; }
.bxp-grid.is-dragging { cursor: grabbing; user-select: none; }
.bxp-grid-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  position: relative;
  height: 340px;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.45s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 6px 22px rgba(0,0,0,0.32);
  cursor: pointer;
}
.bxp-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.bxp-grid-card-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.75s cubic-bezier(.22,.61,.36,1);
}
.bxp-grid-card:hover .bxp-grid-card-img { transform: scale(1.06); }
.bxp-grid-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.08) 35%,
    rgba(0,0,0,0.62) 75%,
    rgba(0,0,0,0.82) 100%
  );
  transition: background 0.45s;
}
.bxp-grid-card:hover .bxp-grid-card-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.12) 0%,
    rgba(0,0,0,0.15) 35%,
    rgba(0,0,0,0.72) 75%,
    rgba(0,0,0,0.88) 100%
  );
}
.bxp-grid-card-cat {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(196, 168, 130, 0.88);
  padding: 6px 12px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.bxp-grid-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 22px 24px;
  color: #fff;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
}
.bxp-grid-card:hover .bxp-grid-card-body { transform: translateY(-3px); }
.bxp-grid-card-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.bxp-grid-card-desc {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(.22,.61,.36,1),
              opacity 0.4s,
              margin-top 0.5s;
}
.bxp-grid-card:hover .bxp-grid-card-desc {
  max-height: 120px;
  opacity: 1;
  margin-top: 6px;
}

/* ── CTA Banner ── */
.bxp-cta { position: relative; height: 50vh; min-height: 360px; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; margin-bottom: 80px; }
.bxp-cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bxp-cta-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.bxp-cta-content { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.bxp-cta-title { font-family: var(--serif); font-size: 44px; font-weight: 300; color: var(--text); line-height: 1.2; margin-bottom: 32px; }
.bxp-cta-title em { font-style: italic; }
.bxp-cta-btn { display: inline-block; font-family: var(--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 16px 48px; text-decoration: none; transition: all 0.3s; }
.bxp-cta-btn:hover { background: var(--gold); color: var(--bg); }

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
  .bxp-sig { grid-template-columns: 1fr; min-height: auto; }
  .bxp-sig--reverse { direction: ltr; }
  .bxp-sig-image { height: 50vh; min-height: 360px; }
  .bxp-sig-content { padding: 40px 32px; }
  .bxp-sig-title { font-size: 34px; }
  .bxp-sig-num { font-size: 56px; top: 20px; left: 20px; }
  .bxp-sig--reverse .bxp-sig-num { left: 20px; right: auto; }
  .bxp-grid-card { flex: 0 0 300px; }
}

/* ── Responsive: Mobile ── */
@media (max-width: 600px) {
  .bxp-hero { height: 55vh; min-height: 400px; }
  .bxp-hero-title { font-size: 36px; }
  .bxp-hero-content { bottom: 60px; }
  .bxp-intro { padding: 56px 20px; }
  .bxp-intro-title { font-size: 28px; }
  .bxp-intro-desc { font-size: 16px; }
  .bxp-sig-image { height: 40vh; min-height: 280px; }
  .bxp-sig-content { padding: 36px 24px; }
  .bxp-sig-title { font-size: 28px; }
  .bxp-sig-desc { font-size: 16px; }
  .bxp-grid { gap: 14px; padding: 0 20px 8px; }
  .bxp-grid-card { flex: 0 0 78vw; }
  .bxp-grid-intro { padding: 56px 20px 28px; }
  .bxp-grid-intro-title { font-size: 28px; }
  .bxp-cta { height: 40vh; min-height: 300px; }
  .bxp-cta-title { font-size: 30px; }
}

/* ── Nautical Light Theme Override ── */
body[data-brand="Nautical"] .bxp-intro { background: #f7f5f0; }
body[data-brand="Nautical"] .bxp-intro-title { color: #2c3e3a; }
body[data-brand="Nautical"] .bxp-intro-desc { color: #4a5c57; }
body[data-brand="Nautical"] .bxp-intro-line { background: #c4d4cf; }
body[data-brand="Nautical"] .bxp-sig-content { background: #f7f5f0; }
body[data-brand="Nautical"] .bxp-sig-kicker { color: #5a8c7e; }
body[data-brand="Nautical"] .bxp-sig-title { color: #2c3e3a; }
body[data-brand="Nautical"] .bxp-sig-desc { color: #4a5c57; }
body[data-brand="Nautical"] .bxp-sig-divider { color: #5a8c7e; }
body[data-brand="Nautical"] .bxp-sig-cta { color: #5a8c7e; border-color: rgba(90,140,126,0.4); }
body[data-brand="Nautical"] .bxp-sig-cta:hover { background: #5a8c7e; color: #fff; }
body[data-brand="Nautical"] .bxp-sig-num { color: rgba(90,140,126,0.15); }
body[data-brand="Nautical"] .bxp-grid-intro { background: #f7f5f0; }
body[data-brand="Nautical"] .bxp-grid-intro-title { color: #2c3e3a; }
body[data-brand="Nautical"] .bxp-grid-section { background: #f7f5f0; padding-bottom: 80px; }
body[data-brand="Nautical"] .bxp-grid-card { background: #fff; border: 1px solid #e8e4dd; }
/* Text is rendered over a dark gradient now, so keep it white on every
   brand — overrides no longer needed for title/desc. Keep cat chip
   tinted with brand accent for identity. */
body[data-brand="Nautical"] .bxp-grid-card-cat { background: rgba(90,140,126,0.92); }
body[data-brand="Perdue"] .bxp-grid-card-cat { background: rgba(196, 168, 130, 0.92); }
body[data-brand="Rups"] .bxp-grid-card-cat { background: rgba(198, 130, 98, 0.92); }
body[data-brand="Nautical"] .bxp-gold { color: #5a8c7e; }
body[data-brand="Nautical"] .bxp-cta-btn { color: #5a8c7e; border-color: rgba(90,140,126,0.5); }
body[data-brand="Nautical"] .bxp-cta-btn:hover { background: #5a8c7e; color: #fff; }

/* ══════════════════════════════════════════
   ULTRA-MOBILE — 390px and below
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Hero */
  .hero h1 { font-size: 30px; }
  .hero-desc { font-size: 13px; }

  /* Brand Hero */
  .brand-hero-logo { font-size: 38px; letter-spacing: 3px; }
  .brand-hero-full .brand-hero-logo { font-size: 42px; }
  .brand-hero-logo-img { max-width: 200px; max-height: 56px; }
  .brand-hero-full .brand-hero-logo-img { max-width: 240px; max-height: 72px; }
  .brand-hero-tagline { font-size: 20px; }

  /* Section titles */
  .section-title { font-size: 26px; }
  .brand-rooms-title { font-size: 24px; }
  .brand-editorial-title { font-size: 28px; }
  .brand-cb-title { font-size: 26px; }
  .brand-banner-title { font-size: 26px; }
  .page-hero-title { font-size: 30px; }
  .page-intro-title { font-size: 24px; }

  /* Grids → 1 column */
  .brand-features-showcase { grid-template-columns: 1fr; gap: 12px; }
  .features-grid { grid-template-columns: 1fr; }
  .sustain-grid { grid-template-columns: 1fr; gap: 16px; }
  .how-grid { grid-template-columns: 1fr; gap: 16px; }
  .portal-features { grid-template-columns: 1fr; gap: 14px; }
  .stats-grid { grid-template-columns: 1fr; gap: 22px; }
  .stat-number { font-size: 44px; }
  .stat-label  { font-size: 16px; max-width: 280px; }
  .brands-showcase { grid-template-columns: 1fr; gap: 12px; }

  /* Room zigzag */
  .room-zigzag { padding: 20px 16px; margin: 0 0 20px; }
  .room-zigzag-img img { height: 200px; }
  .room-zigzag-name { font-size: 24px; }

  /* Experience cards */
  .exp-cards-track { gap: 14px; }
  .exp-card { flex: 0 0 240px; min-width: 220px; height: 400px; }

  /* Room detail */
  .room-detail-gallery { grid-template-columns: 1fr; }
  .room-hero-name { font-size: 24px; }
  .room-hero-price { font-size: 20px; }

  /* Footer */
  .footer-links { flex-direction: column; gap: 10px; }

  /* Auth */
  .auth-card { padding: 32px 20px; }

  /* Concept */
  .concept-hero-title { font-size: 36px; }
  .concept-intro-title { font-size: 28px; }
  .concept-section-title { font-size: 24px; }
  .concept-split-title { font-size: 26px; }
  .concept-quote-text { font-size: 19px; }
  .concept-cta-title { font-size: 26px; }

  /* Book confirm */
  .book-confirm { padding: 0 16px; }
  .book-confirm-grid { grid-template-columns: 1fr; }

  /* Padding tighten */
  .section { padding: 48px 16px; }
  .brand-section { padding: 40px 16px; }
  .brand-intro { padding: 40px 16px; }
  .brand-rooms { padding: 40px 16px; }
  .brand-editorial { padding: 40px 16px; }
  .page-section { padding: 40px 16px; }
}

/* ══════════════════════════════════════════
   HOME — Brand Showcase (dark)
   ══════════════════════════════════════════ */
.home-brands {
  background: #1a1814; padding: 100px 24px 110px;
}
.home-brands-header {
  text-align: center; max-width: 640px; margin: 0 auto 56px;
}
.home-brands-header .section-label {
  color: var(--gold); font-size: 10px; letter-spacing: 3px; margin-bottom: 12px;
}
.home-brands-title {
  font-family: var(--serif); font-size: 42px; font-weight: 300;
  color: #f5f0eb; line-height: 1.2;
}
.home-brands-title em { font-style: italic; }
.home-brands-line {
  width: 40px; height: 2px; background: var(--gold); margin: 20px auto;
}
.home-brands-desc {
  font-size: 15px; line-height: 1.8; color: rgba(245,240,235,0.55);
  max-width: 520px; margin: 0 auto;
}
.home-brands-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1200px; margin: 0 auto;
}
.home-brand-card {
  border-radius: 10px; overflow: hidden;
  background: #221f1a; position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  text-decoration: none;
}
.home-brand-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.home-brand-img {
  position: relative; height: 220px; overflow: hidden;
}
.home-brand-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease;
}
.home-brand-card:hover .home-brand-img img { transform: scale(1.08); }
.home-brand-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.7) 0%, transparent 60%);
}
.home-brand-info { padding: 22px 20px 26px; }
.home-brand-type {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px; font-weight: 500;
}
.home-brand-name {
  font-family: var(--serif); font-size: 21px; font-weight: 400;
  color: #f5f0eb; margin: 0; line-height: 1.3;
}
.home-brand-loc {
  font-size: 12px; color: rgba(245,240,235,0.4); margin-top: 4px;
}

/* Responsive */
@media (max-width: 1024px) {
  .home-brands-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .home-brands { padding: 80px 20px 90px; }
}
@media (max-width: 600px) {
  .home-brands-grid { grid-template-columns: 1fr; gap: 16px; }
  .home-brands-title { font-size: 34px; }
  .home-brands { padding: 64px 16px 72px; }
  .home-brand-img { height: 180px; }
}

/* ══════════════════════════════════════════
   HOME — Moodboard Gallery
   ══════════════════════════════════════════ */
.mood-section {
  padding: 110px 24px 130px;
  background: var(--cream, #faf8f5);
  overflow: hidden;
}
.mood-header {
  text-align: center;
  margin-bottom: 72px;
}
.mood-title {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  color: var(--text-body, #4a3f35);
  letter-spacing: 1px;
  line-height: 1.25;
  margin: 12px 0 0;
}
.mood-title em { font-style: italic; }
/* Editorial 12-col grid — 8 items each hand-placed via .mood-0..mood-7 */
.mood-canvas {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 32px;
  gap: 10px;
  max-width: 780px;
  margin: 0 auto;
}
.mood-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  opacity: 1; /* Ilk yuklemede hepsi canli — hover'da digerleri solar */
  background: #141110;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.5s ease,
              opacity 0.8s ease;
  -webkit-tap-highlight-color: transparent;
}
.mood-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Canvas hover-modunda (.spreading) aktif olmayan itemler solar,
   aktif olan parlak kalir — ters davranis: tek item'a odak. */
.mood-canvas.spreading .mood-item {
  opacity: 0.32;
}
.mood-canvas.spreading .mood-item.mood-active {
  opacity: 1;
  z-index: 10;
  box-shadow: 0 22px 46px rgba(20, 15, 10, 0.22);
}
.mood-item.mood-active img { transform: scale(1.04); }
.mood-item:focus-visible {
  outline: 2px solid var(--gold, #c4a882);
  outline-offset: 3px;
  opacity: 1;
}
/* Hand-placed editorial positions (12-col grid, 32px rows) */
.mood-0 { grid-column: 1 / 5;   grid-row: 3 / 13; }
.mood-1 { grid-column: 5 / 9;   grid-row: 1 / 7;  }
.mood-2 { grid-column: 9 / 13;  grid-row: 2 / 9;  }
.mood-3 { grid-column: 5 / 9;   grid-row: 7 / 14; }
.mood-4 { grid-column: 9 / 13;  grid-row: 9 / 14; }
.mood-5 { grid-column: 1 / 5;   grid-row: 13 / 18; }
.mood-6 { grid-column: 5 / 9;   grid-row: 14 / 21; }
.mood-7 { grid-column: 9 / 13;  grid-row: 14 / 20; }

/* ── Click-to-zoom (desktop only) — item escapes grid cell, auto-sizes to image
   natural aspect (no letterbox gaps). No backdrop darkening — pure spotlight.
   Second click (or clicking outside / Esc) shrinks back. Mobile uses SiteLightbox. ── */
.mood-item.mood-zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  z-index: 500;
  box-shadow: 0 30px 80px rgba(10, 7, 4, 0.55),
              0 10px 30px rgba(10, 7, 4, 0.35);
  cursor: zoom-out;
  opacity: 1 !important; /* defeat .spreading fade in case of race */
  animation: moodZoomIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  grid-column: unset !important;
  grid-row: unset !important;
  background: transparent;
  overflow: visible;
  border-radius: 0;
}
/* Image auto-sizes to its natural aspect, capped by viewport — no object-fit letterbox */
.mood-item.mood-zoomed img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
  object-fit: unset;
  background: transparent;
  transform: none !important;
}
@keyframes moodZoomIn {
  0%   { transform: translate(-50%, -50%) scale(0.82); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
/* ══════════════════════════════════════════
   Site Lightbox (shared) — attach via [data-sl-group] in markup
   JS: /js/site-lightbox.js
   ══════════════════════════════════════════ */
.sl-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.sl-modal.sl-open { display: flex; opacity: 1; pointer-events: auto; }
/* Hafif, karartmayan backdrop — sadece arkayi yumusakca sisle */
.sl-backdrop {
  position: absolute; inset: 0;
  background: rgba(250, 248, 245, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sl-img-wrap {
  position: relative; z-index: 2;
  max-width: 92vw; max-height: 86vh;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.sl-img-wrap.sl-grabbing { cursor: grabbing; }
/* Tatli buyume animasyonu — scale + opacity */
.sl-img {
  max-width: 90vw; max-height: 85vh;
  object-fit: contain; display: block;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(20, 15, 10, 0.25), 0 10px 30px rgba(20, 15, 10, 0.15);
  transform: scale(0.88);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.35s ease;
  user-select: none; -webkit-user-drag: none;
}
.sl-modal.sl-open .sl-img {
  transform: scale(1);
  opacity: 1;
}
/* Close button — gizli; her yere tikla kapanir. Yine de keyboard/a11y icin DOM'da */
.sl-close {
  position: absolute; top: 20px; right: 20px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(var(--gold-rgb, 198,161,91), 0.25);
  color: var(--text-body, #4a3f35);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  opacity: 0; /* gorunmez ama tiklanabilir degil — pointer-events asagida */
  pointer-events: none;
}
.sl-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(var(--gold-rgb, 198,161,91), 0.3);
  color: var(--text-body, #4a3f35);
  font-size: 28px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: inherit;
}
.sl-arrow:hover {
  background: rgba(var(--gold-rgb, 198,161,91), 0.15);
  border-color: var(--gold, #c6a15b);
  color: var(--gold, #c6a15b);
}
.sl-arrow-left  { left: 32px; }
.sl-arrow-right { right: 32px; }
.sl-arrow-left:hover  { transform: translateY(-50%) translateX(-2px); }
.sl-arrow-right:hover { transform: translateY(-50%) translateX(2px); }
.sl-counter {
  position: absolute; z-index: 3;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  color: var(--text-body, #4a3f35);
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  padding: 8px 18px;
  border: 1px solid rgba(var(--gold-rgb, 198,161,91), 0.3);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Mobile lightbox — tighter chrome, swipe is primary nav */
@media (max-width: 768px) {
  .sl-img-wrap { max-width: 96vw; max-height: 82vh; }
  .sl-img      { max-width: 94vw; max-height: 80vh; }
  .sl-arrow    { width: 40px; height: 40px; font-size: 22px; }
  .sl-arrow-left  { left: 10px; }
  .sl-arrow-right { right: 10px; }
  .sl-counter     { bottom: 18px; font-size: 10px; padding: 6px 14px; letter-spacing: 2.5px; }
}
/* ── Moodboard responsive (mobile: grid → horizontal scroll-snap carousel) ── */
@media (max-width: 768px) {
  .mood-section { padding: 64px 0 80px; }
  .mood-header { padding: 0 16px; margin-bottom: 44px; }
  .mood-title { font-size: 30px; }
  .mood-canvas {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 0 16px;
    max-width: 100%;
    scrollbar-width: none;
    grid-template-columns: none;
    grid-auto-rows: auto;
  }
  .mood-canvas::-webkit-scrollbar { display: none; }
  .mood-item {
    flex: 0 0 70vw;
    height: 55vh;
    scroll-snap-align: center;
    border-radius: 0;
    opacity: 1;
  }
  /* Mobile carousel'da hover/spreading yok — touch'da fade tetiklenmesin */
  .mood-canvas.spreading .mood-item,
  .mood-canvas.spreading .mood-item.mood-active {
    opacity: 1;
  }
  /* Mobile'da zoom state devre disi — lightbox devralir. Safety net: ani resize'da
     stuck kalmasin diye fixed positioning'i temizliyoruz. */
  .mood-item.mood-zoomed {
    position: relative;
    top: auto; left: auto;
    width: auto; height: auto;
    transform: none;
    animation: none;
    z-index: auto;
    box-shadow: none;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .mood-canvas.zoom-active::before { display: none; }
  /* Grid position'lari mobilde devre disi — flex dizilimi sirayi belirler */
  .mood-0, .mood-1, .mood-2, .mood-3,
  .mood-4, .mood-5, .mood-6, .mood-7 {
    grid-column: auto; grid-row: auto;
  }
  .mood-item:active {
    transform: scale(0.985);
    transition: transform 0.15s ease;
  }
}
/* Mood dots disabled — user feedback: çakışıyor, eski versiyon daha temiz.
   Carousel hâlâ swipe + drag ile çalışır. */
.mood-dots { display: none !important; }

/* ══════════════════════════════════════════
   HOME — Soul Story
   ══════════════════════════════════════════ */
.soul-story {
  background: var(--cream); padding: 100px 24px 110px;
}
.soul-story-inner {
  max-width: 680px; margin: 0 auto; text-align: center;
}
.soul-story-label {
  font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.soul-story-title {
  font-family: var(--serif); font-size: 38px; font-weight: 300;
  color: var(--text-body); line-height: 1.25;
}
.soul-story-title em { font-style: italic; font-weight: 300; color: var(--text-body); }
.soul-story-title .gold { color: var(--gold); }
.soul-story-line {
  width: 40px; height: 2px; background: var(--gold); margin: 24px auto 36px;
}
.soul-story-body {
  text-align: left;
}
.soul-story-body p {
  font-size: var(--fs-md); line-height: 1.95; color: var(--text-body-dim);
  margin: 0 0 28px; font-family: var(--serif);
}
.soul-story-body p:last-child { margin-bottom: 0; }
.soul-story-body em { font-style: italic; color: var(--text-body); }
.soul-story-sig {
  margin-top: 48px; font-size: 11px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--gold); opacity: 0.7;
}
@media (max-width: 600px) {
  .soul-story { padding: 64px 20px 72px; }
  .soul-story-title { font-size: 30px; }
  .soul-story-body p { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════
   PERDUE EXPERIENCES (pxp-*) — hub + category sub-pages
   Dedicated editorial layout. Genesis stage (hardcoded content).
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.pxp-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}
.pxp-hero--sub { height: 70vh; min-height: 480px; }
.pxp-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}
.pxp-hero-dark {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.75) 100%);
}
.pxp-hero-content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px 120px;
  text-align: center;
  color: #f5ead5;
}
.pxp-hero-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #c4a882;
  margin-bottom: 18px;
}
.pxp-hero-title {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(42px, 7vw, 92px);
  line-height: 1.05;
  margin: 0;
  max-width: 1100px;
}
.pxp-hero-title em {
  font-style: italic;
  color: #f5ead5;
  font-weight: 300;
}
.pxp-hero-title .pxp-gold {
  color: #c4a882;
  font-style: italic;
}
.pxp-hero-sub {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245, 234, 213, 0.75);
}

/* ── Intro (hub) ── */
.pxp-intro {
  background: #0f0d0a;
  padding: 110px 40px;
}
.pxp-intro-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: center;
}
.pxp-intro-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.pxp-intro-image-inner {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1s ease;
}
.pxp-intro:hover .pxp-intro-image-inner { transform: scale(1.03); }
.pxp-intro-text { color: #d9cfbc; }
.pxp-intro-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #c4a882;
  margin-bottom: 22px;
}
.pxp-intro-title {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  margin: 0 0 28px;
  color: #f5ead5;
}
.pxp-intro-title em { color: #c4a882; font-style: italic; }
.pxp-intro-divider {
  width: 56px;
  height: 1px;
  background: #c4a882;
  margin: 0 0 26px;
}
.pxp-intro-p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(217, 207, 188, 0.85);
  margin: 0 0 18px;
  max-width: 620px;
}

/* ── Category blocks (hub) ── */
.pxp-cat-block {
  background: #0f0d0a;
  padding: 0 0 140px;
}
.pxp-cat-banner {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  margin-bottom: 90px;
}
.pxp-cat-banner-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform 1.2s ease;
}
.pxp-cat-block:hover .pxp-cat-banner-img { transform: scale(1.06); }
.pxp-cat-row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: center;
}
.pxp-cat-row--reverse { grid-template-columns: 7fr 5fr; }
.pxp-cat-row--reverse .pxp-cat-image { order: 2; }
.pxp-cat-row--reverse .pxp-cat-text  { order: 1; }
.pxp-cat-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.pxp-cat-image-inner {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1s ease;
}
.pxp-cat-block:hover .pxp-cat-image-inner { transform: scale(1.04); }
.pxp-cat-text { color: #d9cfbc; }
.pxp-cat-title {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: #f5ead5;
}
.pxp-cat-subtitle {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #c4a882;
  margin-bottom: 20px;
}
.pxp-cat-divider {
  text-align: left;
  margin: 0 0 22px;
  color: #c4a882;
}
.pxp-cat-divider span {
  display: inline-block;
  font-size: 10px;
  opacity: 0.8;
}
.pxp-cat-divider::after {
  content: '';
  display: inline-block;
  width: 60px;
  height: 1px;
  background: rgba(196, 168, 130, 0.5);
  vertical-align: middle;
  margin-left: 12px;
}
.pxp-cat-p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.85;
  color: rgba(217, 207, 188, 0.85);
  margin: 0 0 18px;
  max-width: 620px;
}
.pxp-cat-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 14px 28px;
  border: 1px solid rgba(196, 168, 130, 0.6);
  background: transparent;
  color: #c4a882;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.35s ease;
}
.pxp-cat-cta:hover {
  background: #c4a882;
  color: #0f0d0a;
  border-color: #c4a882;
}
.pxp-cat-cta-arrow { transition: transform 0.35s ease; }
.pxp-cat-cta:hover .pxp-cat-cta-arrow { transform: translateX(4px); }

/* ── Quote band ── */
.pxp-quote-band {
  position: relative;
  padding: 140px 40px;
  overflow: hidden;
}
.pxp-quote-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.pxp-quote-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,13,10,0.65), rgba(15,13,10,0.85));
}
.pxp-quote-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  color: #f5ead5;
}
.pxp-quote-mark {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 120px;
  line-height: 0.8;
  color: #c4a882;
  margin-bottom: 12px;
}
.pxp-quote-text {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.55;
  margin: 0 0 28px;
}
.pxp-quote-line {
  width: 60px;
  height: 1px;
  background: #c4a882;
  margin: 0 auto;
}

/* ── Category page: items (side-by-side alternating cards) ──
   Layout borrowed from .bxp-sig — image fills one half edge-to-edge,
   text block sits on dark background the other half, cards stack
   directly with a small gap. No banner images between. */
.pxp-items {
  background: #0a0908;
  padding: 70px 40px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pxp-item--card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: transparent;
  border-bottom: none;
  min-height: 480px;
}
.pxp-item--card .pxp-item-image { order: 1; }
.pxp-item--card .pxp-item-text  { order: 2; }
.pxp-item--card.pxp-item--reverse .pxp-item-image { order: 2; }
.pxp-item--card.pxp-item--reverse .pxp-item-text  { order: 1; }

.pxp-item-image {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
}
.pxp-item-image-inner {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s ease;
}
.pxp-item--card:hover .pxp-item-image-inner { transform: scale(1.04); }
.pxp-item-num {
  position: absolute;
  top: 28px; right: 32px;
  z-index: 2;
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 42px;
  font-weight: 300;
  font-style: italic;
  color: rgba(245, 234, 213, 0.35);
  line-height: 1;
  letter-spacing: 2px;
}
.pxp-item--reverse .pxp-item-num { right: auto; left: 32px; }

.pxp-item-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 60px;
  color: #d9cfbc;
}
.pxp-item-kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #c4a882;
  margin-bottom: 18px;
}
.pxp-item-title {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  margin: 0 0 18px;
  color: #f5ead5;
}
.pxp-item-divider {
  text-align: left;
  margin: 0 0 22px;
  color: #c4a882;
}
.pxp-item-divider span { font-size: 10px; opacity: 0.8; }
.pxp-item-p {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(217, 207, 188, 0.75);
  margin: 0 0 14px;
  max-width: 520px;
}
.pxp-item-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  padding: 14px 36px;
  border: 1px solid rgba(196, 168, 130, 0.55);
  background: transparent;
  color: #c4a882;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.35s ease;
  align-self: flex-start;
}
.pxp-item-cta:hover {
  background: #c4a882;
  color: #0f0d0a;
  border-color: #c4a882;
}

/* ── Gallery strip ── */
.pxp-gallery-strip {
  background: #0a0908;
  padding: 100px 40px 120px;
}
.pxp-gallery-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 60px;
}
.pxp-gallery-line {
  width: 80px;
  height: 1px;
  background: rgba(196, 168, 130, 0.4);
}
.pxp-gallery-title {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 36px);
  margin: 0;
  color: #f5ead5;
  text-align: center;
}
.pxp-gallery-title em { color: #c4a882; font-style: italic; }
.pxp-gallery-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.pxp-gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pxp-gallery-img {
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 0.9s ease;
  cursor: pointer;
}
.pxp-gallery-img:hover { transform: scale(1.08); }

/* ── Back to experiences CTA ── */
.pxp-back-cta {
  background: #0f0d0a;
  padding: 60px 40px 100px;
  text-align: center;
}
.pxp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 28px;
  border: 1px solid rgba(196, 168, 130, 0.6);
  color: #c4a882;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.35s ease;
}
.pxp-back-link:hover {
  background: #c4a882;
  color: #0f0d0a;
  border-color: #c4a882;
}
.pxp-back-arrow { transition: transform 0.35s ease; }
.pxp-back-link:hover .pxp-back-arrow { transform: translateX(-4px); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pxp-hero { min-height: 520px; }
  .pxp-hero--sub { min-height: 400px; }
  .pxp-intro { padding: 70px 24px; }
  .pxp-intro-inner,
  .pxp-cat-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pxp-cat-row--reverse .pxp-cat-image { order: 0; }
  .pxp-cat-row--reverse .pxp-cat-text { order: 1; }
  .pxp-cat-block { padding-bottom: 80px; }
  .pxp-cat-banner { height: 280px; margin-bottom: 50px; }
  .pxp-cat-row { padding: 0 24px; }
  .pxp-item--card {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .pxp-item--card .pxp-item-image,
  .pxp-item--card.pxp-item--reverse .pxp-item-image { order: 0; min-height: 340px; }
  .pxp-item--card .pxp-item-text,
  .pxp-item--card.pxp-item--reverse .pxp-item-text { order: 1; padding: 50px 28px 60px; }
  .pxp-items { padding: 0; }
  .pxp-quote-band { padding: 90px 24px; }
  .pxp-quote-mark { font-size: 84px; }
  .pxp-gallery-strip { padding: 70px 20px 80px; }
  .pxp-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .pxp-gallery-intro { gap: 14px; }
  .pxp-gallery-line { width: 40px; }
  .pxp-intro-image,
  .pxp-cat-image,
  .pxp-item-image { aspect-ratio: 3 / 4; max-width: 420px; margin: 0 auto; }
  .pxp-hero-content { padding: 40px 20px 100px; }
}

@media (max-width: 600px) {
  .pxp-hero-title { font-size: clamp(34px, 9vw, 52px); }
  .pxp-intro-title,
  .pxp-cat-title { font-size: 30px; }
  .pxp-item-title { font-size: 26px; }
  .pxp-item-num { font-size: 48px; top: 16px; left: 16px; }
}

/* ══════════════════════════════════════════
   Brand Booking Modal — Ticket Aesthetic
   ══════════════════════════════════════════ */
.brand-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.brand-booking-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}
/* Mode-based visibility: elements with data-mode-only only show in matching mode */
.brand-booking-modal[data-mode="book"] [data-mode-only="inquire"] { display: none !important; }
.brand-booking-modal[data-mode="inquire"] [data-mode-only="book"] { display: none !important; }
/* data-mode-hide-empty hides rows when the field is empty — set by JS */
.brand-booking-modal [data-mode-hide-empty].is-hidden { display: none !important; }

.brand-booking-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.brand-booking-modal {
  padding: 28px 24px;
}
.brand-booking-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  overflow-y: auto;
  background: #121212;
  border: 1px solid var(--gold-dim, #3a3a3a);
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65);
  animation: bbmSlideIn 0.45s cubic-bezier(.22,.61,.36,1);
}
@keyframes bbmSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brand-booking-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(245, 240, 235, 0.18);
  color: rgba(245, 240, 235, 0.85);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  z-index: 5;
  transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s;
}
.brand-booking-modal-close:hover {
  color: var(--gold, #c4a882);
  background: rgba(10, 10, 10, 0.85);
  border-color: rgba(196, 168, 130, 0.6);
  transform: rotate(90deg);
}

/* ── View transition ── */
.brand-booking-modal-view { animation: bbmFadeIn 0.4s cubic-bezier(.22,.61,.36,1); }
@keyframes bbmFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Banner ── */
.bbm-banner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.bbm-banner-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bbm-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.15) 100%);
}
.bbm-banner-content {
  position: absolute;
  bottom: 20px;
  left: 28px;
  right: 90px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bbm-banner-eyebrow {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold, #c4a882);
  margin: 0;
  font-weight: 500;
}
.bbm-banner-title {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 30px;
  font-weight: 300;
  color: #f5f2ec;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.bbm-banner-mode-label {
  position: absolute;
  top: 16px;
  left: 28px;
  display: inline-block;
  padding: 6px 14px;
  background: rgba(10, 10, 10, 0.65);
  border: 1px solid rgba(196, 168, 130, 0.45);
  color: var(--gold, #c4a882);
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 20px;
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Facts row (4 columns) ── */
.bbm-facts {
  display: flex;
  flex-direction: row;
  padding: 18px 32px;
  border-bottom: 1px solid #2a2a2a;
  gap: 0;
}
.bbm-fact {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid rgba(196, 168, 130, 0.15);
  padding-left: 16px;
}
.bbm-fact:first-child {
  border-left: none;
  padding-left: 0;
}
.bbm-fact-label {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a7560;
  margin: 0 0 4px;
  font-weight: 500;
}
.bbm-fact-value {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 16px;
  color: #e8e8e8;
  font-weight: 500;
  line-height: 1.2;
  word-break: break-word;
}

/* ── Included list ── */
.bbm-included {
  padding: 18px 28px 20px;
  border-bottom: 1px solid #2a2a2a;
}
.bbm-included-label {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a7560;
  margin: 0 0 10px;
  font-weight: 500;
}
.bbm-included-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bbm-chip {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(196, 168, 130, 0.08);
  border: 1px solid rgba(196, 168, 130, 0.25);
  border-radius: 20px;
  color: #d4bc9a;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11px;
  letter-spacing: 0.3px;
  font-weight: 400;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  cursor: default;
}
.bbm-chip:hover {
  background: rgba(196, 168, 130, 0.15);
  border-color: rgba(196, 168, 130, 0.4);
  color: #e8d4b3;
}

/* ── Price block ── */
.bbm-price-block {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid #2a2a2a;
  gap: 18px;
}
.bbm-price-rate-line {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11px;
  color: #8a7560;
  font-style: italic;
  line-height: 1.3;
}
.bbm-price-total-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.bbm-price-total-label {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a7560;
  font-weight: 500;
}
.bbm-price-total-amount {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--gold, #c4a882);
  line-height: 1;
}

/* ── Divider (diamond) ── */
.bbm-divider {
  position: relative;
  text-align: center;
  margin: 24px 0 16px;
}
.bbm-divider::before,
.bbm-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 24px);
  height: 1px;
  background: rgba(196, 168, 130, 0.25);
}
.bbm-divider::before { left: 0; }
.bbm-divider::after { right: 0; }
.bbm-divider span {
  display: inline-block;
  position: relative;
  color: var(--gold, #c4a882);
  font-size: 12px;
  line-height: 1;
  padding: 0 10px;
  background: #121212;
}

/* ── Form wrap ── */
.bbm-form-wrap {
  padding: 20px 28px 24px;
}
.bbm-form {
  display: block;
  padding: 22px 32px 26px;
}
.bbm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bbm-row .bbm-field {
  margin-bottom: 0;
}
.bbm-field {
  display: block;
  margin-bottom: 14px;
}
.bbm-row + .bbm-field,
.bbm-field + .bbm-row {
  margin-top: 14px;
}
.bbm-field-label {
  display: block;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8a7560;
  margin-bottom: 6px;
  font-weight: 500;
}
.bbm-input,
.bbm-textarea {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  padding: 12px 14px;
  color: #e8e8e8;
  font-family: inherit;
  font-size: 13px;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.bbm-textarea {
  resize: vertical;
  min-height: 64px;
  max-width: 100%;
  line-height: 1.5;
  font-family: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.bbm-input:focus,
.bbm-textarea:focus {
  outline: none;
  border-color: var(--gold, #c4a882);
}
.bbm-input::placeholder,
.bbm-textarea::placeholder {
  color: #4a4235;
  font-style: italic;
}

/* ── Payment section ── */
.bbm-payment-section {
  margin-top: 14px;
}
.bbm-pay-note {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(196, 168, 130, 0.65);
  margin: 14px 0 12px;
  text-align: center;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bbm-pay-lock {
  font-size: 13px;
  filter: grayscale(0.4);
}

/* Book mode introduction (form alanlari yerine) */
.bbm-payment-intro {
  margin: 14px 0 18px;
  padding: 18px 22px;
  background: rgba(196, 168, 130, 0.06);
  border: 1px solid rgba(196, 168, 130, 0.18);
  border-radius: 6px;
  text-align: center;
}
.bbm-intro-line {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-style: italic;
  color: rgba(245, 242, 236, 0.92);
  margin: 0 0 8px;
  line-height: 1.4;
}
.bbm-intro-line strong {
  font-style: normal;
  color: #c4a882;
  font-weight: 500;
}
.bbm-intro-sub {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(245, 242, 236, 0.55);
  margin: 0;
  line-height: 1.6;
}

/* ── Error ── */
.bbm-error {
  background: rgba(196, 143, 143, 0.1);
  border: 1px solid rgba(196, 143, 143, 0.3);
  color: #c48f8f;
  padding: 10px 14px;
  border-radius: 4px;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 12px;
  margin: 10px 0;
  line-height: 1.45;
}

/* ── Honeypot ── */
.bbm-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ── Submit ── */
.bbm-submit {
  display: block;
  width: 100%;
  padding: 16px;
  background: linear-gradient(180deg, #c4a882 0%, #b09265 100%);
  color: #0a0a0a;
  border: none;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 6px;
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
  box-shadow: 0 4px 18px rgba(196, 168, 130, 0.18);
}
.bbm-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(196, 168, 130, 0.32);
  filter: brightness(1.05);
}
.bbm-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.bbm-submit--inquire {
  background: transparent;
  border: 1px solid var(--gold, #c4a882);
  color: var(--gold, #c4a882);
  box-shadow: none;
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.bbm-submit--inquire:hover:not(:disabled) {
  background: linear-gradient(180deg, #c4a882 0%, #b09265 100%);
  color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(196, 168, 130, 0.32);
  filter: none;
}

/* ── Processing View ── */
.bbm-view-center {
  text-align: center;
  padding: 60px 32px;
}
.bbm-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #2a2a2a;
  border-top: 3px solid var(--gold, #c4a882);
  border-radius: 50%;
  margin: 0 auto;
  animation: bbmSpin 1s linear infinite;
}
@keyframes bbmSpin {
  to { transform: rotate(360deg); }
}
.bbm-processing-title {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--gold, #c4a882);
  margin: 20px 0 0;
}
.bbm-processing-sub {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 12px;
  color: #8a7560;
  letter-spacing: 0.5px;
  margin: 6px 0 0;
}

/* ── Success View ── */
.bbm-success-banner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.bbm-success-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 14px;
  background: rgba(143, 196, 143, 0.12);
  border: 1px solid rgba(143, 196, 143, 0.5);
  color: #8fc48f;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 20px;
  font-weight: 600;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bbm-success-icon {
  text-align: center;
  font-size: 52px;
  line-height: 1;
  color: var(--gold, #c4a882);
  margin: 28px 0 12px;
}
.bbm-success-title {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 28px;
  font-weight: 300;
  color: #f5f2ec;
  text-align: center;
  margin: 0 0 4px;
}
.bbm-confirm-code {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 36px;
  font-weight: 500;
  color: var(--gold, #c4a882);
  letter-spacing: 3px;
  margin: 12px 0 16px;
  text-align: center;
}
.bbm-success-intro {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 14px;
  color: #d4bc9a;
  text-align: center;
  margin: 0 0 24px;
  padding: 0 28px;
  line-height: 1.5;
}
.bbm-success-intro span { color: var(--gold, #c4a882); font-style: normal; }

/* ── Condensed summary (success) ── */
.bbm-summary-condensed {
  margin: 0 28px 24px;
  padding: 18px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
}
.bbm-summary-row {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: 10px;
  align-items: flex-start;
}
.bbm-summary-row:first-child {
  margin-top: 0;
}
.bbm-summary-label {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #8a7560;
  font-weight: 500;
}
.bbm-summary-value {
  font-family: var(--serif, 'Cormorant Garamond', serif);
  font-size: 14px;
  color: #e8e8e8;
  text-align: right;
  word-break: break-word;
  line-height: 1.3;
}

/* ── Success buttons ── */
.bbm-btn-row {
  display: flex;
  gap: 12px;
  padding: 0 28px 28px;
}
.bbm-btn-primary,
.bbm-btn-secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
  text-align: center;
}
.bbm-btn-primary {
  background: linear-gradient(180deg, #c4a882 0%, #b09265 100%);
  color: #0a0a0a;
  border: 1px solid var(--gold, #c4a882);
  box-shadow: 0 4px 14px rgba(196, 168, 130, 0.18);
}
.bbm-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(196, 168, 130, 0.3);
  filter: brightness(1.05);
}
.bbm-btn-secondary {
  background: transparent;
  color: #d4bc9a;
  border: 1px solid #3a3a3a;
}
.bbm-btn-secondary:hover {
  border-color: var(--gold, #c4a882);
  color: var(--gold, #c4a882);
  background: rgba(196, 168, 130, 0.06);
  transform: translateY(-1px);
}
.bbm-success-note {
  text-align: center;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11px;
  color: #8a7560;
  padding: 0 28px 24px;
  font-style: italic;
  margin: 0;
  line-height: 1.45;
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .brand-booking-modal { padding: 16px 14px; }
  .brand-booking-modal-card {
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 0;
  }
  .bbm-banner {
    height: 150px;
    border-radius: 10px 10px 0 0;
  }
  .bbm-banner-content {
    bottom: 14px;
    left: 18px;
    right: 60px;
  }
  .bbm-banner-title { font-size: 22px; }
  .bbm-banner-brand { font-size: 13px; }
  .bbm-banner-eyebrow { font-size: 9px; letter-spacing: 2px; }
  .bbm-banner-mode-label {
    top: 12px;
    left: 18px;
    font-size: 8px;
    padding: 5px 11px;
  }
  .bbm-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 14px 20px;
  }
  .bbm-fact {
    border-left: none;
    padding-left: 0;
  }
  .bbm-price-block {
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .bbm-price-total-amount { font-size: 26px; }
  .bbm-form { padding: 16px 20px 20px; }
  .bbm-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .bbm-row .bbm-field { margin-bottom: 12px; }
  .bbm-field { margin-bottom: 12px; }
  .bbm-payment-section { margin-top: 10px; }
  .bbm-btn-row {
    flex-direction: column;
    padding: 0 20px 22px;
  }
  .bbm-success-banner {
    height: 150px;
    border-radius: 10px 10px 0 0;
  }
  .bbm-confirm-code { font-size: 26px; letter-spacing: 2px; }
  .bbm-success-title { font-size: 22px; }
  .bbm-success-intro { padding: 0 20px; font-size: 13px; }
  .bbm-summary-condensed { margin: 0 20px 20px; padding: 14px; }
  .bbm-success-note { padding: 0 20px 22px; }
  .bbm-view-center { padding: 50px 24px; }
}


/* ── Elektra offer cards on room detail ── */
.room-offers {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(196, 168, 130, 0.15);
}
.room-offers-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.room-offers-eyebrow {
  font-family: var(--sans, sans-serif);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8a6d3b;
  font-weight: 600;
}
.room-offers-sub {
  font-size: 13px;
  color: rgba(44, 37, 24, 0.72);
  font-style: italic;
}
.room-offers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Rate option card — lives on cream (.page-section--cream). Dark text on
   a white card so the board-plan / cancellation terms are legible (#3). */
.room-offer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid rgba(196, 168, 130, 0.45);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #2c2518;
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 2px 10px rgba(44, 37, 24, 0.05);
}
.room-offer-card:hover {
  border-color: var(--gold, #8a6d3b);
  background: #fffdf8;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(44, 37, 24, 0.10);
}
.room-offer-card.is-selected {
  border-color: var(--gold, #8a6d3b);
  background: #fff7e8;
  box-shadow: 0 0 0 2px rgba(138, 109, 59, 0.25);
}
.room-offer-card-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.room-offer-card-label {
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  color: #2c2518;
  font-weight: 500;
  line-height: 1.3;
}
.room-offer-card-rate {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(44, 37, 24, 0.65);
  text-transform: uppercase;
  font-weight: 500;
}
.room-offer-card-price {
  font-family: var(--serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: #8a6d3b;
  flex-shrink: 0;
}

/* ── Sold-out card state + "Nearest available" suggestion ──
   Per brand direction: do NOT dim the image/card when a room is sold out
   for the selected dates (#1). Keep the card crisp and let the status
   pill + price treatment communicate state. */
.room-zigzag[data-availability="sold-out"] .room-zigzag-img img,
.room-zigzag[data-availability="sold-out"] .room-zigzag-placeholder {
  /* Image stays vibrant */
  filter: none;
  opacity: 1;
}
.room-zigzag[data-availability="sold-out"] [data-price-amount] {
  color: rgba(245, 242, 236, 0.55);
  text-decoration: line-through;
}
.room-zigzag[data-availability="sold-out"] [data-price-label] {
  color: #d39090;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
}

/* Sold-out pill (the small badge on the card next to "View Room") */
.room-soldout-pill,
.room-zigzag[data-availability="sold-out"] .room-zigzag-cta-soldout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 26px;
  background: #b7c7d4;
  color: #ffffff;
  font-family: var(--sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* "Nearest available" suggestion — #2 aesthetic redesign */
.room-suggest-nearest {
  margin-top: 16px;
  padding: 14px 16px 14px 16px;
  background: linear-gradient(135deg, rgba(196,168,130,0.10) 0%, rgba(196,168,130,0.04) 100%);
  border: 1px solid rgba(196, 168, 130, 0.28);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.room-suggest-nearest-label {
  font-family: var(--sans, sans-serif);
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold, #c4a882);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.room-suggest-nearest-label::before {
  content: '';
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.room-suggest-nearest-btn {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(196, 168, 130, 0.5);
  color: #2c2518;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 2px 10px rgba(44, 37, 24, 0.06);
}
.room-suggest-nearest-btn:hover {
  border-color: var(--gold, #c4a882);
  background: #fffdf8;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(44, 37, 24, 0.12);
}
.room-suggest-nearest-btn .room-suggest-range {
  font-family: var(--serif, Georgia, serif);
  color: #2c2518;
}
.room-suggest-nearest-btn .room-suggest-sep {
  margin: 0 4px;
  opacity: 0.5;
}
.room-suggest-nearest-btn .room-suggest-price {
  color: var(--gold, #8a6d3b);
  font-weight: 600;
}
.room-suggest-nearest-btn::after {
  content: '\2192';
  color: var(--gold, #8a6d3b);
  font-size: 17px;
  transition: transform 0.25s;
}
.room-suggest-nearest-btn:hover::after {
  transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile modal responsive fixes (#20)
   Prevents brand popup forms (booking / contact / Rups inquiry) from
   bleeding past the viewport on narrow screens.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .brand-booking-modal {
    padding: 16px 12px;
    align-items: flex-start;
  }
  .brand-booking-modal-card {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
    margin: 16px auto;
    border-radius: 10px;
  }
  .brand-contact-modal {
    padding: 16px;
    align-items: flex-start;
  }
  .brand-contact-modal-card {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    padding: 28px 20px 24px;
    margin: 16px auto;
    border-radius: 8px;
  }
  /* Tight inner spacing for smaller viewports */
  .brand-contact-modal-card .field,
  .brand-booking-modal-card .field { margin-bottom: 14px; }
}
@media (max-width: 420px) {
  .brand-contact-modal-card { padding: 22px 16px 20px; }
  .brand-booking-modal-card { border-radius: 8px; }
}

/* ══════════════════════════════════════════
   FOOTER — contact grid + legal links
   ══════════════════════════════════════════ */
.footer-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 32px;
  max-width: 960px;
  margin: 36px auto 8px;
  padding: 0 24px;
  text-align: center;
}
.footer-contact-brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.footer-contact-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(196, 168, 130, 0.85);
  margin-bottom: 6px;
}
.footer-contact-line {
  font-size: 12px;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-line:hover { color: var(--gold, #c4a882); }

.footer-legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.45);
}
.footer-legal a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--gold, #c4a882); }
.footer-legal span { opacity: 0.4; }

@media (max-width: 640px) {
  .footer-contact-grid { gap: 18px 20px; padding: 0 16px; }
  .footer-contact-name { font-size: 12px; letter-spacing: 1.5px; }
  .footer-contact-line { font-size: 11.5px; }
}

/* ══════════════════════════════════════════
   LEGAL PAGES (privacy, terms, cookies)
   ══════════════════════════════════════════ */
.legal-page {
  background: var(--bg, #121212);
  color: var(--text, #e8e8e8);
  min-height: 60vh;
  padding: 80px 24px 100px;
}
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.7;
}
.legal-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold, #c4a882);
  opacity: 0.8;
  margin-bottom: 10px;
}
.legal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 44px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #f5f0eb;
  margin-bottom: 8px;
  line-height: 1.1;
}
.legal-lede {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 40px;
  letter-spacing: 0.5px;
}
.legal-inner section {
  margin-bottom: 28px;
}
.legal-inner h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--gold, #c4a882);
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.legal-inner p {
  font-size: 15px;
  color: rgba(232,232,232,0.8);
  margin-bottom: 10px;
}
.legal-inner ul {
  margin: 10px 0 10px 20px;
  color: rgba(232,232,232,0.8);
  font-size: 15px;
}
.legal-inner ul li { margin-bottom: 6px; }
.legal-inner a {
  color: var(--gold, #c4a882);
  text-decoration: none;
  border-bottom: 1px solid rgba(196,168,130,0.35);
}
.legal-inner a:hover { border-bottom-color: var(--gold, #c4a882); }
.legal-inner strong { color: #f0e6d8; font-weight: 500; }

@media (max-width: 640px) {
  .legal-page { padding: 60px 20px 80px; }
  .legal-title { font-size: 34px; }
  .legal-inner h2 { font-size: 19px; }
  .legal-inner p, .legal-inner ul { font-size: 14px; }
}

/* ── Cookie consent banner (KVKK + GDPR) ───────────────────────────── */
.soul-cookie-banner {
  position: fixed;
  left: 18px;
  bottom: 18px;
  right: auto;
  z-index: 99999;
  display: flex;
  pointer-events: none;
  animation: soul-cookie-in 0.32s ease both;
  max-width: 380px;
}
.soul-cookie-banner.is-leaving { animation: soul-cookie-out 0.22s ease both; }
@keyframes soul-cookie-in  { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes soul-cookie-out { to   { transform: translateY(20px); opacity: 0; } }
.scb-card {
  pointer-events: auto;
  background: rgba(20,17,10,0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(196,168,130,0.32);
  border-left: 3px solid rgba(196,168,130,0.85);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.42);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}
.scb-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #c4a882;
  font-weight: 700;
  margin-bottom: 4px;
}
.scb-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13.5px;
  color: rgba(240,230,216,0.92);
  line-height: 1.5;
  margin: 0;
}
.scb-text a {
  color: #c4a882;
  text-decoration: none;
  border-bottom: 1px solid rgba(196,168,130,0.4);
}
.scb-text a:hover { border-bottom-color: #c4a882; }
.scb-text strong { color: #f0e6d8; font-weight: 600; }
.scb-detail {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(196,168,130,0.05);
  border-radius: 4px;
}
.scb-tog {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12.5px;
  color: rgba(240,230,216,0.82);
  line-height: 1.35;
  cursor: pointer;
}
.scb-tog input { margin-top: 2px; flex: 0 0 auto; accent-color: #c4a882; }
.scb-tog--locked { opacity: 0.65; cursor: default; }
.scb-tog strong { color: #f0e6d8; font-style: normal; }
.scb-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.scb-btn {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.scb-btn--primary { background: #c4a882; color: #14110a; grid-column: 1 / -1; }
.scb-btn--primary:hover { background: #d4b892; }
.scb-btn--secondary { background: transparent; color: #c4a882; border-color: rgba(196,168,130,0.4); }
.scb-btn--secondary:hover { background: rgba(196,168,130,0.1); }
.scb-btn--ghost { background: transparent; color: rgba(240,230,216,0.65); border-color: rgba(240,230,216,0.18); }
.scb-btn--ghost:hover { color: #f0e6d8; border-color: rgba(240,230,216,0.35); }
@media (max-width: 640px) {
  .soul-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}