/* ---- tokens.css ---- */
/* ==========================================================================
   Xenia Design System — Tokens
   v2.0 conversion-first foundation
   ========================================================================== */

:root {
  /* ----- BRAND-NEUTRAL CORE (Xenia base) ----- */
  --xenia-ink:        #1C1C1C;         /* Primary text, near-black */
  --xenia-ink-soft:   #3A3A3A;         /* Body copy */
  --xenia-ink-quiet:  #6B6B6B;         /* Captions, secondary */
  --xenia-ink-faint:  #A0A0A0;         /* Tertiary */
  --xenia-canvas:     #FFFFFF;         /* Page background */
  --xenia-surface:    #FAF8F5;         /* Card / alt-row surface */
  --xenia-line:       #E8E4DE;         /* Hairlines */
  --xenia-line-soft:  #F0EDE6;         /* Subtle dividers */

  /* ----- BRAND ACCENT (overridable per-hotel in theme.css) ----- */
  --hotel-accent:        #14B881;      /* DEFAULT — overridden per hotel */
  --hotel-accent-deep:   #0E8F66;      /* Hover, pressed */
  --hotel-accent-soft:   #D4F4E5;      /* Soft fill, chip background */
  --hotel-accent-ink:    #FFFFFF;      /* Text on accent */

  /* ----- CONVERSION CTA (high-contrast amber — universal across hotels) ----- */
  --xenia-cta:           #F59E0B;      /* Primary booking CTA — high-contrast */
  --xenia-cta-deep:      #D97706;      /* CTA hover */
  --xenia-cta-soft:      #FEF3C7;      /* CTA soft background */
  --xenia-cta-ink:       #1C1C1C;      /* Text on CTA */

  /* ----- TRUST + SEMANTIC ----- */
  --xenia-trust:         #2563EB;      /* Trust badges (lock, secure) */
  --xenia-trust-soft:    #DBEAFE;
  --xenia-success:       #059669;      /* Success states, real "free cancel" badges */
  --xenia-success-soft:  #D1FAE5;
  --xenia-warn:          #D97706;      /* Honest scarcity bar */
  --xenia-warn-soft:     #FEF3C7;
  --xenia-error:         #DC2626;      /* Errors, destructive */
  --xenia-error-soft:    #FEE2E2;

  /* ----- TYPOGRAPHY ----- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale — fluid: clamp(min, preferred, max) */
  --text-display: clamp(2.5rem, 5vw + 1rem, 5rem);   /* 40-80px — hero hotel name */
  --text-h1:      clamp(2rem, 3.5vw + 1rem, 3.5rem); /* 32-56px */
  --text-h2:      clamp(1.5rem, 2.5vw + 1rem, 2.5rem);/* 24-40px */
  --text-h3:      clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);/* 20-28px */
  --text-lead:    1.25rem;     /* 20px */
  --text-body:    1.0625rem;   /* 17px — body baseline */
  --text-small:   0.875rem;    /* 14px */
  --text-micro:   0.75rem;     /* 12px */
  --text-eyebrow: 0.6875rem;   /* 11px — uppercase label */

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.8;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.18em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ----- SPACING SCALE (8-point grid) ----- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* ----- RADIUS ----- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ----- SHADOWS ----- */
  --shadow-sm: 0 2px 8px rgba(28, 28, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 28, 28, 0.10);
  --shadow-lg: 0 16px 48px rgba(28, 28, 28, 0.14);
  --shadow-xl: 0 24px 64px rgba(28, 28, 28, 0.18);
  --shadow-focus: 0 0 0 3px rgba(245, 158, 11, 0.4); /* CTA focus ring */
  --shadow-focus-accent: 0 0 0 3px rgba(20, 184, 129, 0.4); /* accent focus */

  /* ----- MOTION ----- */
  --motion-fast:   150ms;
  --motion-base:   250ms;
  --motion-slow:   400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  /* ----- BREAKPOINTS (use in @media queries) ----- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ----- LAYOUT ----- */
  --container-max:    1200px;
  --container-narrow: 800px;
  --container-tight:  640px;
  --nav-height:       72px;
  --sticky-cta-h:     72px;

  /* ----- Z-INDEX ----- */
  --z-base:           0;
  --z-elevated:       10;
  --z-sticky:         100;
  --z-fixed:          200;
  --z-modal-backdrop: 900;
  --z-modal:          1000;
  --z-toast:          1100;
  --z-tooltip:        1200;

  /* ----- TOUCH TARGETS (WCAG + Material) ----- */
  --touch-min: 48px;        /* 48x48 minimum tap target */
  --touch-spacing: 8px;     /* min spacing between tap targets */
}

/* Honor prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---- reset.css ---- */
/* ==========================================================================
   Xenia Design System — Modern CSS Reset
   Based on Josh Comeau's reset + Andy Bell's modern reset
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: var(--leading-relaxed, 1.6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img { font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 1rem; }

input, button, textarea, select { font: inherit; color: inherit; }

button {
  background: none;
  border: none;
  cursor: pointer;
  text-align: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: var(--leading-tight, 1.15);
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

ul, ol { list-style: none; }

#root, #app, main { isolation: isolate; }

/* Focus styles — replaced by .focus-ring utility in accessibility.css */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--hotel-accent, currentColor); outline-offset: 2px; }


/* ---- typography.css ---- */
/* ==========================================================================
   Xenia Design System — Typography
   ========================================================================== */

/* Font loading happens in HTML <head> via Google Fonts preconnect.
   Fallback metrics tuned to minimize CLS during font swap. */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--xenia-ink);
  background: var(--xenia-canvas);
}

/* ----- DISPLAY (serif) ----- */
.display, h1.display, h2.display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-display { font-size: var(--text-display); font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); letter-spacing: -0.015em; }
.t-h1      { font-size: var(--text-h1);      font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); letter-spacing: -0.01em; }
.t-h2      { font-size: var(--text-h2);      font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); letter-spacing: -0.005em; }
.t-h3      { font-size: var(--text-h3);      font-family: var(--font-display); font-weight: 500; line-height: var(--leading-snug); }

/* ----- BODY (sans) ----- */
.t-lead   { font-size: var(--text-lead);   font-weight: 400; line-height: var(--leading-relaxed); color: var(--xenia-ink-soft); }
.t-body   { font-size: var(--text-body);   font-weight: 400; line-height: var(--leading-relaxed); }
.t-small  { font-size: var(--text-small);  font-weight: 400; line-height: var(--leading-normal); color: var(--xenia-ink-quiet); }
.t-micro  { font-size: var(--text-micro);  font-weight: 500; line-height: var(--leading-normal); color: var(--xenia-ink-quiet); letter-spacing: var(--tracking-wide); }

/* ----- EYEBROW (uppercase label above titles) ----- */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--hotel-accent-deep);
}

/* ----- ITALIC TAGLINE STYLE ----- */
.t-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
  font-style: italic;
  font-weight: 400;
  color: var(--xenia-ink-soft);
  line-height: var(--leading-snug);
}

/* ----- LINKS ----- */
a:not(.btn):not(.bare) {
  color: var(--hotel-accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--motion-fast) var(--ease-standard);
}
a:not(.btn):not(.bare):hover { color: var(--hotel-accent); }
a.bare { text-decoration: none; }

/* ----- HEADING DEFAULTS (when not class-tagged) ----- */
h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 400; line-height: var(--leading-tight); letter-spacing: -0.01em; }
h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 400; line-height: var(--leading-tight); }
h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 500; line-height: var(--leading-snug); }
h4 { font-family: var(--font-body);    font-size: var(--text-body); font-weight: 600; line-height: var(--leading-normal); }
h5 { font-family: var(--font-body);    font-size: var(--text-small); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
h6 { font-family: var(--font-body);    font-size: var(--text-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-widest); }

p { line-height: var(--leading-relaxed); }
p + p { margin-top: var(--space-3); }

/* ----- TEXT UTILITIES ----- */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

.text-ink       { color: var(--xenia-ink); }
.text-ink-soft  { color: var(--xenia-ink-soft); }
.text-ink-quiet { color: var(--xenia-ink-quiet); }
.text-canvas    { color: var(--xenia-canvas); }
.text-accent    { color: var(--hotel-accent-deep); }
.text-cta       { color: var(--xenia-cta-deep); }
.text-success   { color: var(--xenia-success); }
.text-warn      { color: var(--xenia-warn); }
.text-error     { color: var(--xenia-error); }

.italic { font-style: italic; }
.uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wide); }


/* ---- accessibility.css ---- */
/* ==========================================================================
   Xenia Design System — Accessibility
   WCAG 2.1 AA baseline
   ========================================================================== */

/* ----- Skip nav link (keyboard users) ----- */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--xenia-ink);
  color: var(--xenia-canvas);
  font-weight: 600;
  z-index: var(--z-tooltip);
  text-decoration: none;
}
.skip-nav:focus {
  left: var(--space-3);
}

/* ----- Visually hidden (for screen readers only) ----- */
.visually-hidden, .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Focus rings: visible + consistent ----- */
:focus-visible {
  outline: 2px solid var(--xenia-cta);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--xenia-cta);
  outline-offset: 3px;
}

/* ----- Minimum touch target (Material 48px / Apple 44px floor) ----- */
button,
a.btn,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
.tap-target {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

/* ----- High contrast mode support ----- */
@media (prefers-contrast: more) {
  :root {
    --xenia-ink: #000000;
    --xenia-canvas: #FFFFFF;
    --xenia-line: #000000;
  }
}

/* ----- Forced colors (Windows High Contrast) ----- */
@media (forced-colors: active) {
  button, .btn {
    border: 1px solid ButtonText;
  }
}

/* ----- Allow forced color users to retain semantic meaning ----- */
.btn-primary, .btn-cta {
  forced-color-adjust: none;
}

/* ----- Print styles (reduce ink, no decorative backgrounds) ----- */
@media print {
  body { background: white; color: black; }
  .no-print { display: none !important; }
}


/* ---- layouts.css ---- */
/* ==========================================================================
   Xenia Design System — Layouts
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-5); }
.container-tight  { max-width: var(--container-tight);  margin-inline: auto; padding-inline: var(--space-5); }

@media (min-width: 768px) {
  .container, .container-narrow, .container-tight { padding-inline: var(--space-6); }
}

/* ----- SECTIONS ----- */
.section { padding-block: var(--space-8); }
.section-lg { padding-block: var(--space-9); }
.section-sm { padding-block: var(--space-7); }

.section-surface { background: var(--xenia-surface); }
.section-canvas  { background: var(--xenia-canvas); }
.section-ink     { background: var(--xenia-ink); color: var(--xenia-canvas); }
.section-accent  { background: var(--hotel-accent-soft); }

@media (min-width: 768px) {
  .section    { padding-block: var(--space-9); }
  .section-lg { padding-block: var(--space-10); }
}

/* Section header ergonomics */
.section-header { margin-bottom: var(--space-6); max-width: 720px; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header .t-eyebrow { display: block; margin-bottom: var(--space-2); }
.section-header h2, .section-header .t-h2 { margin-bottom: var(--space-3); }
.section-header .t-lead { color: var(--xenia-ink-soft); }

/* ----- GRID UTILITIES ----- */
.grid           { display: grid; gap: var(--space-5); }
.grid-2         { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.grid-3         { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.grid-4         { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.grid-auto-card { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-photo     { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-photo { grid-template-columns: 2fr 1fr 1fr; }
}

/* ----- FLEX UTILITIES ----- */
.flex          { display: flex; gap: var(--space-3); }
.flex-col      { display: flex; flex-direction: column; gap: var(--space-3); }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.items-baseline{ align-items: baseline; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ----- SPACING UTILITIES ----- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); } .mb-7 { margin-bottom: var(--space-7); } .mb-8 { margin-bottom: var(--space-8); }

/* ----- VISIBILITY ----- */
.hidden        { display: none !important; }
.mobile-only   { display: block; }
.desktop-only  { display: none; }
@media (min-width: 768px) {
  .mobile-only  { display: none; }
  .desktop-only { display: block; }
}

/* ----- BODY OFFSET FOR FIXED NAV + STICKY CTA ----- */
body {
  padding-top: 0; /* nav is sticky, not fixed */
}
@media (max-width: 767px) {
  body {
    padding-bottom: var(--sticky-cta-h); /* room for mobile sticky CTA */
  }
}

/* ----- PROPERTY-AGNOSTIC ASPECT RATIOS ----- */
.aspect-photo  { aspect-ratio: 4 / 3; overflow: hidden; }
.aspect-wide   { aspect-ratio: 16 / 9; overflow: hidden; }
.aspect-square { aspect-ratio: 1 / 1; overflow: hidden; }
.aspect-tall   { aspect-ratio: 3 / 4; overflow: hidden; }

.cover { width: 100%; height: 100%; object-fit: cover; }

/* ----- SCROLL ANCHOR OFFSET (account for sticky nav) ----- */
[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-3)); }


/* ---- components.css ---- */
/* ==========================================================================
   Xenia Design System — Components
   v2 conversion-first. Every pattern from Hospitality_Conversion_Playbook_v1.md
   ========================================================================== */

/* ----- PREVIEW META BANNER (test only, removed in production) ----- */
.preview-meta {
  background: var(--xenia-ink);
  color: var(--xenia-canvas);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-small);
  text-align: center;
}
.preview-meta strong { color: var(--xenia-cta); }

/* ----- TOP TRUST BAR ----- */
.top-bar {
  background: var(--hotel-accent-deep);
  color: var(--xenia-canvas);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-small);
  text-align: center;
  font-weight: var(--weight-medium);
}
.top-bar a { color: var(--xenia-canvas); text-decoration: underline; }
.top-bar strong { font-weight: var(--weight-semibold); }

/* ----- NAV ----- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--xenia-canvas);
  border-bottom: 1px solid var(--xenia-line);
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
}
.nav-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--xenia-ink);
}
.nav-brand-mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
}
.nav-brand-hotel {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--xenia-ink-soft);
}
.nav-brand-divider {
  width: 1px;
  height: 24px;
  background: var(--xenia-line);
}
.nav-trust {
  display: none;
  gap: var(--space-4);
  align-items: center;
  font-size: var(--text-small);
  color: var(--xenia-ink-quiet);
}
.nav-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--hotel-accent-soft);
  color: var(--hotel-accent-deep);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
}
.nav-cta {
  background: var(--xenia-cta);
  color: var(--xenia-cta-ink);
  border: none;
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  transition: background var(--motion-fast) var(--ease-standard);
}
.nav-cta:hover { background: var(--xenia-cta-deep); }
@media (min-width: 1024px) { .nav-trust { display: flex; } }

/* ----- BUTTONS ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  border: 1.5px solid transparent;
  padding: var(--space-4) var(--space-5);
  min-height: var(--touch-min);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.btn-cta {
  background: var(--xenia-cta);
  color: var(--xenia-cta-ink);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-bold);
  padding-block: var(--space-4);
  font-size: 1.0625rem;
}
.btn-cta:hover { background: var(--xenia-cta-deep); }
.btn-primary {
  background: var(--hotel-accent);
  color: var(--hotel-accent-ink);
}
.btn-primary:hover { background: var(--hotel-accent-deep); }
.btn-secondary {
  background: transparent;
  color: var(--hotel-accent-deep);
  border-color: var(--hotel-accent);
}
.btn-secondary:hover {
  background: var(--hotel-accent-soft);
}
.btn-ghost {
  background: transparent;
  color: var(--xenia-ink);
  border: 1px solid var(--xenia-line);
}
.btn-ghost:hover {
  background: var(--xenia-surface);
  border-color: var(--xenia-ink-faint);
}
.btn-block { width: 100%; }
.btn-lg { padding: var(--space-5) var(--space-6); font-size: 1.125rem; min-height: 56px; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-small); min-height: 36px; }

/* ----- HERO ----- */
.hero {
  position: relative;
  background: var(--xenia-ink);
  color: var(--xenia-canvas);
  min-height: 600px;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(28, 28, 28, 0.7) 0%, rgba(28, 28, 28, 0.4) 50%, rgba(28, 28, 28, 0.75) 100%);
}
.hero-content {
  position: relative;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  min-height: 600px;
  z-index: 1;
}
.hero-info { padding-block: var(--space-4); }
.hero-eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--hotel-accent);
  margin-bottom: var(--space-3);
}
.hero-name {
  font-family: var(--hotel-font-display, var(--font-display));
  font-size: var(--text-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  font-style: italic;
  font-weight: var(--weight-regular);
  opacity: 0.94;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.hero-review {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 3px solid var(--hotel-accent);
}
.hero-review-score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: var(--weight-medium);
  color: var(--hotel-accent);
  line-height: 1;
}
.hero-review-meta { flex: 1; font-size: var(--text-small); line-height: var(--leading-snug); }
.hero-review-stars { color: var(--xenia-cta); font-size: 1rem; letter-spacing: 2px; }
.hero-review-count { display: block; opacity: 0.8; margin-top: 2px; }
.hero-recent {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--hotel-accent);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.hero-features { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.hero-feature {
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.12);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .hero-content { grid-template-columns: 1.2fr 1fr; gap: var(--space-7); padding: var(--space-7) var(--space-5); }
}

/* ----- BOOKING WIDGET (the single most important element) ----- */
.booking-widget {
  background: var(--xenia-canvas);
  color: var(--xenia-ink);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
}
.booking-widget-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-1);
}
.booking-widget-sub {
  font-size: var(--text-small);
  color: var(--xenia-ink-quiet);
  margin-bottom: var(--space-4);
}
.booking-widget-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.booking-widget-field { display: flex; flex-direction: column; }
.booking-widget-field.full { grid-column: span 2; }
.booking-widget-label {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--xenia-ink-quiet);
  margin-bottom: var(--space-1);
}
.booking-widget-input {
  padding: var(--space-3);
  border: 1.5px solid var(--xenia-line);
  background: var(--xenia-canvas);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--xenia-ink);
  cursor: pointer;
  min-height: var(--touch-min);
  transition: border-color var(--motion-fast) var(--ease-standard);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.booking-widget-input:hover, .booking-widget-input:focus {
  border-color: var(--hotel-accent);
  outline: none;
}
.booking-widget-input strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: var(--weight-medium);
  color: var(--xenia-ink);
}
.booking-widget-input-meta {
  font-size: var(--text-micro);
  color: var(--xenia-ink-faint);
  margin-top: 2px;
}
.booking-widget-cta {
  width: 100%;
  padding: var(--space-4);
  background: var(--xenia-cta);
  color: var(--xenia-cta-ink);
  border: none;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
  min-height: 56px;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease-standard);
}
.booking-widget-cta:hover { background: var(--xenia-cta-deep); }
.booking-widget-trust {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--xenia-line);
  font-size: var(--text-micro);
  color: var(--xenia-ink-quiet);
}
.booking-widget-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-medium);
}
.booking-widget-trust-icon { color: var(--xenia-trust); font-weight: var(--weight-bold); }

/* ----- QUICK FACTS BAND ----- */
.quick-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--xenia-canvas);
  border: 1px solid var(--xenia-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.quick-fact {
  padding: var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--xenia-line);
  border-right: 1px solid var(--xenia-line);
}
.quick-fact:nth-child(2) { border-right: none; }
.quick-fact:nth-last-child(-n+2) { border-bottom: none; }
.quick-fact-value {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: var(--weight-medium);
  color: var(--xenia-ink);
  line-height: 1;
  margin-bottom: var(--space-1);
}
.quick-fact-label {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--xenia-ink-quiet);
}
@media (min-width: 768px) {
  .quick-facts { grid-template-columns: repeat(4, 1fr); }
  .quick-fact { border-bottom: none; border-right: 1px solid var(--xenia-line); }
  .quick-fact:last-child { border-right: none; }
}

/* ----- PHOTO GALLERY ----- */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .photo-grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-2); }
  .photo-grid-cell:first-child { grid-row: span 2; aspect-ratio: 1; }
}
.photo-grid-cell {
  background: linear-gradient(135deg, #475569 0%, #94A3B8 100%);
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform var(--motion-base) var(--ease-standard);
}
.photo-grid-cell:hover { transform: scale(1.02); }
.photo-grid-label {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  background: rgba(28, 28, 28, 0.8);
  color: var(--xenia-canvas);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.photo-grid-more {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 28, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--xenia-canvas);
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

/* ----- ROOM CARDS ----- */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.room-card {
  background: var(--xenia-canvas);
  border: 1px solid var(--xenia-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  transition: box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.room-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.room-card-photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #475569 0%, #94A3B8 100%);
  background-size: cover;
  background-position: center;
  position: relative;
}
.room-card-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.room-card-badge {
  background: var(--xenia-success);
  color: var(--xenia-canvas);
  padding: var(--space-1) var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
}
.room-card-body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.room-card-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}
.room-card-details {
  font-size: var(--text-small);
  color: var(--xenia-ink-quiet);
  margin-bottom: var(--space-3);
  line-height: var(--leading-normal);
}
.room-card-description {
  font-size: var(--text-small);
  color: var(--xenia-ink-soft);
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
  flex-grow: 1;
}
.room-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.room-card-feature {
  font-size: var(--text-micro);
  color: var(--xenia-ink-soft);
  padding: 2px var(--space-2);
  background: var(--xenia-surface);
  border-radius: var(--radius-sm);
}
.room-card-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--xenia-line);
}
.room-card-sleeps {
  font-size: var(--text-small);
  color: var(--xenia-ink-quiet);
}
.room-card-sleeps strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  color: var(--xenia-ink);
}
.room-card-cta {
  background: var(--xenia-cta);
  color: var(--xenia-cta-ink);
  padding: var(--space-3) var(--space-4);
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  transition: background var(--motion-fast) var(--ease-standard);
}
.room-card-cta:hover { background: var(--xenia-cta-deep); }

/* ----- AMENITY GRID ----- */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.amenity-card {
  background: var(--xenia-canvas);
  border: 1px solid var(--xenia-line);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-sm);
}
.amenity-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--hotel-accent-soft);
  color: var(--hotel-accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: var(--radius-sm);
}
.amenity-info { flex: 1; min-width: 0; }
.amenity-name { font-weight: var(--weight-semibold); font-size: var(--text-small); line-height: 1.2; margin-bottom: 2px; }
.amenity-detail { font-size: var(--text-micro); color: var(--xenia-ink-quiet); }

/* ----- REVIEWS ----- */
.reviews-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  align-items: start;
}
@media (min-width: 768px) { .reviews-summary { grid-template-columns: 1fr 1fr; } }
.reviews-score-block {
  text-align: center;
  padding: var(--space-5);
  background: var(--xenia-canvas);
  border: 1px solid var(--xenia-line);
  border-radius: var(--radius-sm);
}
.reviews-score {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--xenia-ink);
  margin-bottom: var(--space-2);
}
.reviews-stars {
  font-size: 1.25rem;
  color: var(--xenia-cta);
  letter-spacing: 4px;
  margin-bottom: var(--space-2);
}
.reviews-count { color: var(--xenia-ink-quiet); margin-bottom: var(--space-3); font-size: var(--text-small); }
.reviews-recent {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--hotel-accent-soft);
  color: var(--hotel-accent-deep);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
}
.review-card {
  background: var(--xenia-canvas);
  border: 1px solid var(--xenia-line);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
}
.review-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.review-card-author { font-weight: var(--weight-semibold); }
.review-card-meta { color: var(--xenia-ink-quiet); }
.review-card-text { font-size: 0.9375rem; line-height: var(--leading-relaxed); color: var(--xenia-ink-soft); }
.review-card-stars { color: var(--xenia-cta); letter-spacing: 2px; margin-bottom: var(--space-2); }
.review-card-verified {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--xenia-trust);
  color: var(--xenia-canvas);
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* ----- MOBILE STICKY CTA ----- */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--xenia-canvas);
  border-top: 1px solid var(--xenia-line);
  padding: var(--space-3) var(--space-4);
  z-index: var(--z-fixed);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.1);
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
.mobile-sticky-cta-price {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--weight-medium);
  line-height: 1.1;
}
.mobile-sticky-cta-price small {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  color: var(--xenia-ink-quiet);
  display: block;
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: 2px;
}
.mobile-sticky-cta-btn {
  background: var(--xenia-cta);
  color: var(--xenia-cta-ink);
  border: none;
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  min-height: var(--touch-min);
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 767px) { .mobile-sticky-cta { display: grid; } }

/* ----- MODAL ----- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--xenia-canvas);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xl);
  border-top: 4px solid var(--xenia-cta);
  z-index: var(--z-modal);
  position: relative;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--xenia-line);
  position: sticky;
  top: 0;
  background: var(--xenia-canvas);
  z-index: 1;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--weight-medium);
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--xenia-ink-quiet);
  line-height: 1;
  padding: var(--space-2);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--xenia-surface); color: var(--xenia-ink); }
.modal-summary {
  padding: var(--space-4) var(--space-5);
  background: var(--xenia-surface);
  font-size: var(--text-small);
  border-bottom: 1px solid var(--xenia-line);
}
.modal-summary strong { display: block; margin-bottom: 4px; font-weight: var(--weight-semibold); }
.modal-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--xenia-line);
}
.modal-summary-total .label { font-size: var(--text-micro); color: var(--xenia-ink-quiet); }
.modal-summary-total .price {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: var(--weight-medium);
}
.modal-body { padding: var(--space-5); }
.form-row { margin-bottom: var(--space-3); }
.form-label {
  display: block;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--xenia-ink-quiet);
  margin-bottom: var(--space-1);
}
.form-input {
  width: 100%;
  padding: var(--space-3);
  border: 1.5px solid var(--xenia-line);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--xenia-ink);
  min-height: var(--touch-min);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.form-input:focus { border-color: var(--hotel-accent); outline: none; }
.form-pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--xenia-line);
}
.form-pay-btn {
  padding: var(--space-3);
  background: var(--xenia-ink);
  color: var(--xenia-canvas);
  border: none;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  min-height: var(--touch-min);
}
.form-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--xenia-line);
  font-size: var(--text-micro);
  color: var(--xenia-ink-quiet);
  text-align: center;
}
.form-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.form-trust-icon { color: var(--xenia-trust); font-weight: var(--weight-bold); }
.handoff-message {
  background: var(--hotel-accent-soft);
  border-left: 4px solid var(--hotel-accent);
  padding: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-small);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: var(--leading-relaxed);
}
.handoff-message strong { color: var(--hotel-accent-deep); }

/* ----- HONEST SCARCITY BAR ----- */
.scarcity-bar {
  background: var(--xenia-warn);
  color: var(--xenia-canvas);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}
.scarcity-bar strong { color: var(--xenia-cta-soft); }

/* ----- FLOW DIAGRAM (booking flow demonstrator) ----- */
.flow-diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
@media (min-width: 768px) { .flow-diagram { grid-template-columns: repeat(4, 1fr); } }
.flow-step {
  padding: var(--space-4);
  background: var(--xenia-canvas);
  border-top: 4px solid var(--hotel-accent);
  border-radius: var(--radius-sm);
}
.flow-step.payment { border-top-color: var(--xenia-cta); }
.flow-step-num {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  color: var(--hotel-accent-deep);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-2);
}
.flow-step.payment .flow-step-num { color: var(--xenia-cta-deep); }
.flow-step-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}
.flow-step-body { font-size: var(--text-small); color: var(--xenia-ink-soft); line-height: var(--leading-relaxed); }

/* ----- FOOTER ----- */
.footer {
  background: var(--xenia-ink);
  color: var(--xenia-canvas);
  padding: var(--space-7) 0 var(--space-5);
}
.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
}
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: var(--space-3); }
.footer-tag { font-size: var(--text-small); opacity: 0.75; line-height: var(--leading-relaxed); margin-bottom: var(--space-3); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: var(--xenia-canvas);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}
.footer-social a:hover { background: rgba(255,255,255,0.18); }
.footer-col-title {
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-bottom: var(--space-3);
  opacity: 0.7;
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-small); }
.footer-links a { color: var(--xenia-canvas); text-decoration: none; opacity: 0.75; }
.footer-links a:hover { opacity: 1; color: var(--hotel-accent); }
.footer-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  font-size: var(--text-micro);
  opacity: 0.6;
  line-height: var(--leading-relaxed);
}
.footer-meta a { color: var(--hotel-accent); text-decoration: none; }


/* ---- pages.css ---- */
/* ==========================================================================
   Xenia Multi-Page Layer — pages.css
   Interior-page layouts for the 11-page hotel site. Builds on tokens +
   components. Colorblind-safe: never color alone — bold/underline/border/icon.
   ========================================================================== */

/* ----- Multi-page nav (extends .nav) ----- */
.nav-links { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.nav-link {
  font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-medium);
  color: var(--xenia-ink-soft); text-decoration: none; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); white-space: nowrap; transition: background var(--motion-fast) var(--ease-standard);
  border-bottom: 2px solid transparent;
}
.nav-link:hover { background: var(--xenia-surface); color: var(--xenia-ink); }
.nav-link[aria-current="page"] {
  color: var(--xenia-ink); font-weight: var(--weight-bold);
  border-bottom-color: var(--hotel-accent);   /* bold + underline, not color-only */
}
.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--xenia-line); border-radius: var(--radius-sm);
  width: var(--touch-min); height: var(--touch-min); cursor: pointer; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--xenia-ink);
}
@media (max-width: 1024px) {
  .nav-links {
    position: fixed; top: var(--nav-height); left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--xenia-canvas); border-bottom: 1px solid var(--xenia-line);
    box-shadow: var(--shadow-lg); padding: var(--space-2); transform: translateY(-120%);
    transition: transform var(--motion-base) var(--ease-standard); z-index: var(--z-fixed); max-height: 80vh; overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-link { padding: var(--space-4); border-bottom: 1px solid var(--xenia-line-soft); border-radius: 0; }
  .nav-link[aria-current="page"] { border-left: 4px solid var(--hotel-accent); border-bottom-color: var(--xenia-line-soft); padding-left: calc(var(--space-4) - 4px); }
  .nav-toggle { display: inline-flex; }
}

/* ----- Page hero (compact interior header) ----- */
.page-hero {
  position: relative; padding: var(--space-9) 0 var(--space-7); background: var(--xenia-surface);
  border-bottom: 1px solid var(--xenia-line); overflow: hidden;
}
.page-hero.has-photo { color: #fff; background: var(--xenia-ink); }
.page-hero.has-photo .page-hero-photo {
  position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.42; z-index: 0;
}
.page-hero.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,20,20,0.30), rgba(20,20,20,0.72));
}
.page-hero-inner { position: relative; z-index: 2; }
.breadcrumb { font-size: var(--text-small); margin-bottom: var(--space-3); color: inherit; }
.breadcrumb a { color: inherit; text-decoration: underline; font-weight: var(--weight-medium); opacity: 0.92; }
.breadcrumb span { opacity: 0.7; padding: 0 var(--space-2); }
.page-hero-eyebrow {
  font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest);
  font-weight: var(--weight-bold); margin-bottom: var(--space-3); display: inline-block;
}
.page-hero.has-photo .page-hero-eyebrow { color: var(--xenia-cta); }
.page-hero:not(.has-photo) .page-hero-eyebrow { color: var(--hotel-accent-deep); }
.page-hero-title { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--leading-tight); margin: 0 0 var(--space-4); }
.page-hero-lead { font-size: var(--text-lead); line-height: var(--leading-relaxed); max-width: 60ch; opacity: 0.95; margin: 0; }

/* ----- Generic section helpers used by interior pages ----- */
.section-narrow { max-width: var(--container-narrow); margin-inline: auto; }
.prose { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--xenia-ink-soft); }
.prose p { margin: 0 0 var(--space-4); }

/* ----- Detail list (Location facts, getting here) ----- */
.detail-list { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.detail-row {
  display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-4);
  background: var(--xenia-canvas); border: 1px solid var(--xenia-line); border-radius: var(--radius-md);
}
.detail-row-label {
  font-size: var(--text-small); font-weight: var(--weight-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--xenia-ink-quiet); min-width: 9rem; flex-shrink: 0;
}
.detail-row-value { font-size: var(--text-body); color: var(--xenia-ink); font-weight: var(--weight-medium); }

/* ----- Map embed ----- */
.map-embed { border: 1px solid var(--xenia-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ----- FAQ accordion (native <details>) ----- */
.faq-list { display: grid; gap: var(--space-3); max-width: var(--container-narrow); margin-inline: auto; }
.faq-item {
  border: 1px solid var(--xenia-line); border-radius: var(--radius-md); background: var(--xenia-canvas);
  overflow: hidden; transition: box-shadow var(--motion-fast) var(--ease-standard);
}
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--hotel-accent); }
.faq-q {
  cursor: pointer; list-style: none; padding: var(--space-5); font-family: var(--font-body);
  font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--xenia-ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: var(--touch-min);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; font-size: 1.5rem; font-weight: var(--weight-regular); color: var(--hotel-accent-deep); flex-shrink: 0; line-height: 1; }
.faq-item[open] .faq-q::after { content: "\2212"; }
.faq-a { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--xenia-ink-soft); }
.faq-a a { color: var(--hotel-accent-deep); text-decoration: underline; font-weight: var(--weight-medium); }

/* ----- Activities grid ----- */
.activities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.activity-card {
  padding: var(--space-6); background: var(--xenia-canvas); border: 1px solid var(--xenia-line);
  border-radius: var(--radius-lg); border-top: 3px solid var(--hotel-accent);
}
.activity-card-icon { font-size: 1.75rem; margin-bottom: var(--space-3); }
.activity-card-title { font-family: var(--font-display); font-size: var(--text-h3); margin: 0 0 var(--space-2); color: var(--xenia-ink); }
.activity-card-dist {
  display: inline-block; font-size: var(--text-small); font-weight: var(--weight-bold);
  background: var(--hotel-accent-soft); color: var(--hotel-accent-deep);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); margin-bottom: var(--space-3);
}
.activity-card-body { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--xenia-ink-soft); margin: 0; }

/* ----- Events grid ----- */
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.event-card {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6);
  background: var(--xenia-surface); border: 1px solid var(--xenia-line); border-radius: var(--radius-lg);
}
.event-card-title { font-family: var(--font-display); font-size: var(--text-h3); margin: 0; color: var(--xenia-ink); }
.event-card-body { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--xenia-ink-soft); margin: 0; flex: 1; }
.event-card-link { font-weight: var(--weight-bold); color: var(--hotel-accent-deep); text-decoration: underline; font-size: var(--text-small); }

/* ----- Dining feature ----- */
.dining-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.dining-feature-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 320px; background-size: cover; background-position: center; }
.dining-feature-eyebrow { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--weight-bold); color: var(--hotel-accent-deep); margin-bottom: var(--space-3); }
.dining-feature-title { font-family: var(--font-display); font-size: var(--text-h2); margin: 0 0 var(--space-2); }
.dining-feature-tag { font-style: italic; color: var(--xenia-ink-quiet); margin: 0 0 var(--space-4); font-size: var(--text-lead); }
@media (max-width: 768px) { .dining-feature { grid-template-columns: 1fr; } .dining-feature-img { min-height: 240px; } }

/* ----- Contact ----- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { display: grid; gap: var(--space-4); }
.contact-detail { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--xenia-line); border-radius: var(--radius-md); background: var(--xenia-canvas); }
.contact-detail-icon { font-size: 1.25rem; flex-shrink: 0; }
.contact-detail-label { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-bold); color: var(--xenia-ink-quiet); }
.contact-detail-value { font-size: var(--text-body); font-weight: var(--weight-medium); }
.contact-detail-value a { color: var(--hotel-accent-deep); text-decoration: underline; }
.contact-form { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--xenia-surface); border: 1px solid var(--xenia-line); border-radius: var(--radius-lg); }

/* ----- Lightbox gallery ----- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.gallery-cell { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--xenia-surface); border: 0; padding: 0; }
.gallery-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-base) var(--ease-standard); }
.gallery-cell:hover img, .gallery-cell:focus-visible img { transform: scale(1.05); }
.gallery-cell:focus-visible { outline: 3px solid var(--xenia-cta); outline-offset: 2px; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(15,15,15,0.92); display: none; align-items: center; justify-content: center; padding: var(--space-5); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); }
.lightbox-close { position: absolute; top: var(--space-5); right: var(--space-5); width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-pill); border: 0; background: rgba(255,255,255,0.16); color: #fff; font-size: 1.5rem; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: var(--radius-pill); border: 0; background: rgba(255,255,255,0.16); color: #fff; font-size: 1.75rem; cursor: pointer; }
.lightbox-nav.prev { left: var(--space-4); } .lightbox-nav.next { right: var(--space-4); }

/* ----- Bottom CTA band (every interior page) ----- */
.cta-band { background: var(--xenia-ink); color: #fff; padding: var(--space-8) 0; text-align: center; }
.cta-band-inner { max-width: var(--container-narrow); margin-inline: auto; }
.cta-band-eyebrow { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--weight-bold); color: var(--xenia-cta); margin-bottom: var(--space-3); }
.cta-band-title { font-family: var(--font-display); font-size: var(--text-h2); margin: 0 0 var(--space-4); color: #fff; }
.cta-band-sub { font-size: var(--text-lead); opacity: 0.88; margin: 0 0 var(--space-6); }
.cta-band .btn-cta { font-size: var(--text-lead); padding: var(--space-4) var(--space-8); }

/* ----- Rooms page: full-width room rows ----- */
.room-detail-grid { display: grid; gap: var(--space-6); }

/* ----- Reduce hero name clamp on interior pages so it never overpowers ----- */
.page-hero-title { max-width: 22ch; }

/* ==========================================================================
   REDESIGN v2 (Matt feedback 2026-06-06) — richer, on-brand, less white.
   Loaded after components.css so these win. Driven by per-hotel theme vars.
   ========================================================================== */

/* ----- NAV: one tight line, de-emphasize Xenia, hotel name primary ----- */
.nav { background: var(--xenia-canvas); border-bottom: 1px solid var(--xenia-line); }
.nav-inner { gap: var(--space-4); }
.nav-brand { gap: 8px; align-items: baseline; }
.nav-brand-mark, .nav-brand-divider { display: none; }     /* drop the big ξενία mark */
.nav-brand-hotel { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700;
  color: var(--xenia-ink); letter-spacing: 0; line-height: 1; white-space: nowrap; }
.nav-brand-via { font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; color: var(--xenia-ink-faint); white-space: nowrap; }
.nav-cta { background: var(--xenia-cta); color: var(--xenia-cta-ink); font-weight: 700;
  padding: 9px 20px; letter-spacing: .02em; box-shadow: var(--shadow-sm); white-space: nowrap; }
.nav-cta:hover { background: var(--xenia-cta-deep); }
.nav-links { flex-wrap: nowrap; gap: 1px; }
.nav-link { padding: 8px 9px; font-size: 13.5px; border-bottom-width: 2px; }
/* one line on desktop, hamburger below 1100 so it never wraps */
@media (min-width: 1101px) {
  .nav-toggle { display: none !important; }
  .nav-links { position: static; transform: none; flex-direction: row; background: none;
    box-shadow: none; border: 0; padding: 0; max-height: none; overflow: visible; }
}
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--xenia-canvas); border-bottom: 1px solid var(--xenia-line);
    box-shadow: var(--shadow-lg); padding: var(--space-2); transform: translateY(-130%);
    transition: transform var(--motion-base) var(--ease-standard); z-index: var(--z-fixed);
    max-height: 82vh; overflow-y: auto; }
  .nav-links.open { transform: translateY(0); }
  .nav-link { padding: var(--space-4); border-bottom: 1px solid var(--xenia-line-soft); border-radius: 0; font-size: 15px; }
}

/* ----- DARK BRAND BANDS (impact sections) ----- */
.section-dark { background: var(--brand-dark);
  background: linear-gradient(160deg, var(--brand-dark), var(--brand-dark-2)); color: var(--brand-dark-ink); }
.section-dark .t-eyebrow { color: var(--xenia-cta); }
.section-dark .t-h2, .section-dark h2, .section-dark h3 { color: var(--brand-dark-ink); }
.section-dark .t-lead, .section-dark p { color: rgba(255,255,255,.82); }

/* ----- STATS BAND (replaces white quick-fact boxes; true, punchy facts) ----- */
.stats-band { padding-block: var(--space-7); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.stat { text-align: center; padding: var(--space-3) var(--space-5); position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%;
  width: 1px; background: rgba(255,255,255,.18); }
.stat-value { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.7rem);
  line-height: 1.05; color: #fff; margin-bottom: 6px; }
.stat-value .unit { font-size: .55em; }
.stat-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; color: rgba(244,239,230,.78); line-height: 1.3; }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) 0; }
  .stat:nth-child(odd)::before { display: none; }
  .stat:nth-child(3)::before, .stat:nth-child(4)::before { display: none; }
}

/* ----- AMENITIES: bigger icons in brand chips, richer cards ----- */
.amenity-grid { gap: var(--space-4); }
.amenity-card { background: var(--xenia-canvas); border: 1px solid var(--xenia-line);
  border-radius: var(--radius-lg); padding: var(--space-5); gap: var(--space-4);
  box-shadow: var(--shadow-sm); align-items: center; }
.amenity-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px);
  transition: all var(--motion-base) var(--ease-standard); }
.amenity-icon { width: 58px; height: 58px; border-radius: 14px; background: var(--hotel-accent-soft);
  color: var(--hotel-accent-deep); font-size: 1.85rem; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.amenity-name { font-size: 1.02rem; font-weight: 700; }
.amenity-detail { font-size: .9rem; color: var(--xenia-ink-quiet); }

/* ----- GALLERY: enforce full rows (cols set inline by builder) ----- */
.gallery-grid { gap: var(--space-3); }
@media (max-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gallery-cell:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 16/9; }
}

/* ----- HERO polish: stronger overlay + elegant display type ----- */
.hero-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,30,.28), rgba(20,20,30,.62)); }
.hero-name { letter-spacing: -0.01em; }
.hero-review-score { color: var(--xenia-cta); }
.booking-widget { box-shadow: var(--shadow-xl); border-top: 4px solid var(--xenia-cta); }

/* page-hero eyebrow uses brand accent already; ensure cta band pops */
.cta-band { background: linear-gradient(160deg, var(--brand-dark), var(--brand-dark-2)); }

/* ==========================================================================
   AMENITIES v3 — dark, immersive band with glowing amber badges (exciting)
   ========================================================================== */
.amenities-section { position: relative; overflow: hidden; }
.amenities-section::before { content: ""; position: absolute; width: 520px; height: 520px;
  right: -140px; top: -180px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(245,158,11,.20), transparent 70%); }
.amenities-section::after { content: ""; position: absolute; width: 420px; height: 420px;
  left: -160px; bottom: -200px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(245,158,11,.10), transparent 70%); }
.amenities-section .container { position: relative; z-index: 1; }
.amenities-section .amenity-grid { gap: var(--space-4); }

.section-dark .amenity-card { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  box-shadow: none; border-radius: var(--radius-lg); }
.section-dark .amenity-card:hover { background: rgba(255,255,255,.10); border-color: var(--xenia-cta);
  transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.30); }
.section-dark .amenity-icon { width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: var(--xenia-cta); color: var(--xenia-cta-ink); box-shadow: 0 6px 20px rgba(0,0,0,.28);
  box-shadow: 0 6px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.18); }
.section-dark .amenity-icon svg { width: 31px; height: 31px; stroke-width: 1.9; }
.section-dark .amenity-name { color: #fff; font-size: 1.06rem; }
.section-dark .amenity-detail { color: rgba(255,255,255,.62); }
.section-dark .prose a, .section-dark p a { color: var(--xenia-cta); }
.section-dark .prose a:hover, .section-dark p a:hover { color: #fff; }

/* ==========================================================================
   FULL-ROW GRIDS — every row fills; the short last row stretches (no orphans).
   Column count comes from --cols-d (set inline per grid by the builder).
   ========================================================================== */
.amenity-grid, .room-grid, .activities-grid, .events-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  --cols: var(--cols-d, 4);
}
.amenity-grid > *, .room-grid > *, .activities-grid > *, .events-grid > * {
  flex: 1 0 calc((100% - (var(--cols) - 1) * var(--space-4)) / var(--cols) - 0.5px);
  min-width: 0;
}
@media (max-width: 920px) {
  .amenity-grid, .room-grid, .activities-grid, .events-grid { --cols: 2; }
}
@media (max-width: 560px) {
  .amenity-grid, .room-grid, .activities-grid, .events-grid { --cols: 1; }
}

/* activity icon -> brand chip with SVG (consistent with amenities) */
.activity-card-icon { width: 52px; height: 52px; border-radius: var(--radius-pill);
  background: var(--hotel-accent-soft); color: var(--hotel-accent-deep); display: flex;
  align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.activity-card-icon svg { width: 27px; height: 27px; }

/* ----- Modal booking-capture grid (dates/guests/rooms/room type) ----- */
.modal-booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--xenia-line); }
.modal-booking-grid .form-row { margin: 0; }
.modal-booking-grid label { font-size: var(--text-eyebrow); }
@media (max-width: 480px) { .modal-booking-grid { grid-template-columns: 1fr; } }

/* ----- Child-age selectors (shown when Children > 0) ----- */
.modal-child-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3); margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--xenia-line); }
.modal-child-ages[hidden] { display: none; }
.modal-child-ages .form-row { margin: 0; }
.modal-child-ages label { font-size: var(--text-eyebrow); }


/* ---- theme.css ---- */
/* ==========================================================================
   The Burgundy — theme
   Derived from the real site: cream page (#F0EAD6), espresso brown (#3C1800),
   amber (#D4871C) accent + pill buttons, DM Serif Display. Vintage-playful,
   1970s summer-camp lodge reborn. Colorblind-safe high-contrast warm palette.
   ========================================================================== */
:root {
  /* the real site's cream background — never white */
  --xenia-canvas:    #F0EAD6;
  --xenia-surface:   #E6DBBF;
  --xenia-line:      #D8CBA8;
  --xenia-line-soft: #E4D9BC;

  /* espresso brown = darkest ink (headings + dark bands) */
  --xenia-ink:       #3A1A06;
  --xenia-ink-soft:  #5A3318;
  --xenia-ink-quiet: #846A4C;
  --xenia-ink-faint: #A89274;

  /* brand accent = amber */
  --hotel-accent:      #C57E18;
  --hotel-accent-deep: #9C6210;
  --hotel-accent-soft: #F2E3C2;
  --hotel-accent-ink:  #3A1A06;

  /* booking CTA = the brand amber with brown ink (matches their pill button) */
  --xenia-cta:      #D4871C;
  --xenia-cta-deep: #B0700F;
  --xenia-cta-soft: #F3E2C4;
  --xenia-cta-ink:  #3A1A06;

  /* brand dark band */
  --brand-dark:      #3A1A06;
  --brand-dark-2:    #4d2913;
  --brand-dark-ink:  #F0EAD6;

  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* pill buttons everywhere (their signature) */
.theme-burgundy .btn, .theme-burgundy .nav-cta, .theme-burgundy .booking-widget-cta,
.theme-burgundy .room-card-cta, .theme-burgundy .mobile-sticky-cta-btn,
.theme-burgundy .activity-card-dist { border-radius: var(--radius-pill); }