:root {
  --bg: #0b0b09;
  --bg-panel: #151310;
  --bg-panel2: #1b1813;
  --text: #f5f0e2;
  --text-dim: #c2b79f;
  --gold: #c9a769;
  --gold-soft: #8a7752;
  --line: rgba(201,167,105,0.22);
  /* Stronger border, used only where a clearly visible frame matters most
     — the calendar day tiles (see .day / booking.js). --line itself is
     left as-is everywhere else (buttons, dividers, inputs) so this fix
     doesn't ripple across parts of the site nobody flagged as unclear. */
  --line-strong: rgba(201,167,105,0.55);
  /* The one fill day tiles should visually compete for: available/
     bookable dates. Deliberately lighter than --bg-panel/--bg-panel2 (used
     for booked/pending, which should recede) so a free week visibly pops
     against a mostly-booked or not-yet-priced month. */
  --bg-available: #2c2517;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Work Sans', sans-serif; overflow-x: hidden; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--text); }
img { max-width: 100%; }
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; margin: 0; }
.kicker { font-family: 'Work Sans', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: 56px; padding-right: 56px; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--gold); color: #1a1408; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 16px 30px; border-radius: 2px; border: none; cursor: pointer; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text); font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 15px 28px; border-radius: 2px; border: 1px solid var(--line); cursor: pointer; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.field .input { border: 1px solid var(--line); background: var(--bg-panel2); padding: 13px 14px; font-size: 14.5px; color: var(--text); border-radius: 2px; }
.day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 2px; }

/* ---------- layout helpers ---------- */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.stage { position: relative; height: 560px; overflow: hidden; border-radius: 2px; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(11,11,9,0.55); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stage-cap { position: absolute; bottom: 18px; left: 24px; background: rgba(11,11,9,0.72); border: 1px solid var(--line); padding: 8px 16px; font-size: 12.5px; letter-spacing: 0.5px; color: var(--text-dim); }
.thumbs { display: flex; gap: 4px; margin-top: 4px; }
.thumbs img { flex: 1; min-width: 0; height: 84px; object-fit: cover; cursor: pointer; opacity: 0.5; outline: 2px solid transparent; outline-offset: -2px; }
.thumbs img.active { opacity: 1; outline: 2px solid var(--gold); }
.floor-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 30px; }
.floor-badge { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--gold); border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: none; }
.floor-p { font-size: 15.5px; line-height: 1.8; color: var(--text-dim); max-width: 780px; margin: 0 0 32px 64px; }

/* ---------- nav ---------- */
.nav-links { display: flex; align-items: center; gap: 44px; }
.nav-links a { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.lang-switch { display: flex; align-items: center; gap: 14px; padding-left: 20px; border-left: 1px solid var(--line); font-size: 12px; letter-spacing: 1px; }
.lang-switch a.current { color: var(--text); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); width: 44px; height: 44px; border-radius: 2px; cursor: pointer; align-items: center; justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .wrap { padding-left: 28px; padding-right: 28px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .grid-3 { grid-template-columns: 1fr; gap: 24px; }
  .stage { height: 380px; }
  .thumbs img { height: 64px; }
  h1 { font-size: 52px !important; }
  h2 { font-size: 32px !important; }
  .host-row, .history-row, .booking-value-row, .footer-row, .booking-cols { flex-direction: column !important; align-items: flex-start !important; }
  .booking-value-row .value-props { flex-wrap: wrap; gap: 32px !important; }
  .footer-row .footer-links { gap: 48px !important; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .stage { height: 280px; }
  .thumbs { flex-wrap: wrap; }
  .thumbs img { flex: 1 1 30%; height: 56px; }
  h1 { font-size: 38px !important; }
  .hero-badges { flex-wrap: wrap; }
  .amenities-grid, .grid-4 { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  /* The booking form's paired fields (check-in/out, adults/children,
     name/email) go single-column on narrow phones so nothing gets
     cramped or cut off. */
  .form-grid-2 { grid-template-columns: 1fr !important; }
}
.nav-mobile { display: none; flex-direction: column; gap: 18px; padding: 20px 28px 28px; background: rgba(11,11,9,0.96); border-top: 1px solid var(--line); }
.nav-mobile.open { display: flex; }

/* ---------- hero legibility: guaranteed contrast regardless of the photo behind it ---------- */
.hero-nav a, .hero-badge, .hero-title, .hero-tagline { text-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 2px 16px rgba(0,0,0,0.4); }
.hero-badge { background: rgba(11,11,9,0.6) !important; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,9,0.82) 0%, rgba(11,11,9,0.32) 22%, rgba(11,11,9,0.28) 50%, rgba(11,11,9,0.94) 100%); }