/* ==========================================================================
   Old Town Quito Suites · Preview stylesheet
   Sections:
   01. Design tokens
   02. Base & reset
   03. Accessibility helpers
   04. Layout
   05. Typography
   06. Buttons & links
   07. Header & navigation
   08. Hero & booking bar
   09. Intro & key facts
   09b. The house: then & now, details
   10. Book direct
   11. Suites
   12. Compare table & cards
   13. Suite recommender
   14. Hotel room vs suite
   15. Services
   16. Stay with us
   17. Location
   18. Tours
   19. Reviews
   20. FAQ
   21. Final CTA
   22. Footer
   23. Mobile booking bar
   24. Motion
   25. Responsive
   ========================================================================== */


/* 01. Design tokens
   ========================================================================== */
/* Metric-matched fallbacks: while the web fonts load, system fonts take the same width and line height,
   so text does not jump when Cormorant Garamond and Jost arrive (layout shift / CLS).
   size-adjust measured in the browser against Georgia and Arial; ascent/descent from each font's metrics. */
/* BEGIN self-hosted fonts (tools/self_host_fonts.py) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-italic-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-italic-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-normal-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-normal-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-normal-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-normal-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/jost-normal-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/jost-normal-latin-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jost-normal-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jost-normal-latin-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jost-normal-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jost-normal-latin-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* END self-hosted fonts */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia");
  size-adjust: 89.4%;
  ascent-override: 92.4%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost Fallback";
  src: local("ArialMT"), local("Arial");   /* PostScript name first: on Windows local("Arial") can resolve to another face */
  size-adjust: 93.3%;
  ascent-override: 107%;
  descent-override: 37.5%;
  line-gap-override: 0%;
}
:root {
  --color-ivory: #F7F3EC;
  --color-paper: #FCFAF6;
  --color-sand: #EDE6DA;
  --color-linen: #EADFCD;        /* warm featured-section background (replaces the dark stone sections) */
  --color-line-linen: #D6C7AF;
  --color-line: #DDD4C4;
  --color-ink: #1C211E;
  --color-ink-soft: #4B524D;
  --color-muted: #6B706B;
  --color-forest: #2E3133;       /* dark anchor: volcanic stone (andesite) */
  --color-forest-2: #3A3E40;
  --color-accent: #A0472F;       /* terracotta: booking CTAs and accent text (5.5:1 on ivory) */
  --color-accent-dark: #7F3522;  /* terracotta hover */
  --color-gold: #B8955E;         /* decorative lines and details only */
  --color-gold-light: #D4B98A;   /* gold for text on dark backgrounds */
  --color-focus: #1D5FD1;

  /* Background shown behind hero and CTA photos while they load */
  --tint-hero-3: #1B1D1E;
  --tint-cta-2: #2E3133;

  --font-serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", "Jost Fallback", "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --gutter: 24px;
  --radius: 2px;
  --header-h: 84px;
  --section-space: clamp(80px, 11vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}


/* 02. Base & reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font: 300 17px/1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
address { font-style: normal; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}


/* 03. Accessibility helpers
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--color-ink);
  color: #fff;
  padding: 12px 18px;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* Placeholder text for information still required from the client */
.todo {
  display: inline-block;
  font-size: 13px;
  font-style: italic;
  color: #A23B2A;
  background: rgba(162, 59, 42, .08);
  padding: 2px 8px;
}


/* 04. Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-space) 0; }
.section-soft { background: var(--color-ivory); }
.section-linen { background: var(--color-linen); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.section-head > div { max-width: 620px; }
.section-head .lead { max-width: 480px; }

.section-head-stacked {
  display: block;
  max-width: 720px;
}
.section-head-stacked .lead { max-width: none; }


/* 05. Typography
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
}
h2 { font-size: clamp(36px, 4.6vw, 56px); margin: 18px 0 20px; }
h3 { font-size: 26px; margin-bottom: 10px; }
h4 { font-size: 26px; }
em { font-style: italic; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 500 12px/1.4 var(--font-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
}
.eyebrow-light { color: var(--color-gold-light); }

.lead { font-size: 19px; color: var(--color-ink-soft); }
.lead-light { color: rgba(247, 243, 236, .78); }
p + p { margin-top: 16px; }


/* 06. Buttons & links
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-small { min-height: 44px; padding: 12px 20px; font-size: 12px; }

.btn-gold { background: var(--color-accent); color: #fff; }
.btn-gold:hover { background: var(--color-accent-dark); }

.btn-outline-light { border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--color-ink); }

.btn-outline-dark { border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline-dark:hover { background: var(--color-ink); color: #fff; }

.text-link {
  display: inline-block;
  margin-top: 22px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-gold);
  font: 500 13px/1.4 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.text-link:hover { color: var(--color-accent); }


/* 07. Header & navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: #fff;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), opacity .9s var(--ease);
}
.intro-pending .site-header { opacity: 0; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

.brand { display: block; flex-shrink: 0; }
.brand-logo { width: 150px; transition: filter .4s var(--ease); }

.primary-nav ul { display: flex; gap: 34px; }
.primary-nav a {
  position: relative;
  font-size: 14px;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--color-gold);
  transition: width .3s var(--ease);
}
.primary-nav a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 16px; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Header after scrolling (light background, dark logo) */
.site-header.is-scrolled {
  background: rgba(252, 250, 246, .96);
  color: var(--color-ink);
  box-shadow: 0 1px 0 var(--color-line);
}
.site-header.is-scrolled .brand-logo { filter: brightness(0); }
.site-header.is-scrolled .btn-outline-light { border-color: var(--color-ink); color: var(--color-ink); }
.site-header.is-scrolled .btn-outline-light:hover { background: var(--color-ink); color: #fff; }


/* 08. Hero & booking bar
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  color: #fff;
}

/* Hero photo with a dark overlay for text contrast */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--tint-hero-3);
}
/* Slideshow: slides are stacked and cross-fade (controlled by main.js) */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Scale and shift are driven by main.js (intro + scroll depth) */
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(var(--hero-scale, 1.04));
}
.hero-slide:first-child img { object-position: 50% 40%; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Darken only where the text sits (left side, header strip, perks line); the right half stays clear */
  background:
    linear-gradient(90deg, rgba(20, 21, 22, .62) 0%, rgba(20, 21, 22, .45) 42%, rgba(20, 21, 22, .14) 70%, rgba(20, 21, 22, 0) 100%),
    linear-gradient(180deg, rgba(20, 21, 22, .38) 0%, rgba(20, 21, 22, 0) 20%, rgba(20, 21, 22, 0) 72%, rgba(20, 21, 22, .42) 100%);
}
/* A soft halo behind the letters keeps them legible on the lighter photos */
.hero-copy,
.hero-perks {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 22px rgba(0, 0, 0, .4);
}
@media (max-width: 680px) {
  /* On phones the text spans the full width, so the veil runs top to bottom instead */
  .hero-media::after {
    background: linear-gradient(180deg, rgba(20, 21, 22, .5) 0%, rgba(20, 21, 22, .3) 45%, rgba(20, 21, 22, .55) 100%);
  }
}

.hero-content {
  position: relative;
  padding-top: calc(var(--header-h) + 60px);
  padding-bottom: 56px;
}
.hero h1 {
  max-width: 940px;
  margin: 22px 0 24px;
  font-size: clamp(42px, 6.8vw, 88px);
}
.hero h1 em { color: var(--color-gold-light); }
.hero-lead {
  max-width: 600px;
  margin-bottom: 44px;
  font-size: 19px;
  color: rgba(255, 255, 255, .88);
}

.booking-bar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr .7fr .7fr auto;
  max-width: 1000px;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}
.booking-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 22px;
  border-right: 1px solid var(--color-line);
}
.booking-field label,
.booking-label {
  margin-bottom: 6px;
  font: 500 11px/1 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.booking-field input,
.booking-field select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border: 0;
  background: none;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
}
.booking-field input:focus-visible,
.booking-field select:focus-visible { outline-offset: 6px; }
.booking-submit { border-radius: 0 var(--radius) var(--radius) 0; padding: 0 30px; }

.booking-status {
  min-height: 24px;
  margin-top: 14px;
  font-size: 15px;
}
.booking-status a { color: var(--color-gold-light); }

.hero-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-top: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, .88);
}
.hero-perks li::before {
  content: "✓";
  margin-right: 8px;
  color: var(--color-gold-light);
}

/* Slideshow controls: pause button + one dot per photo */
.hero-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.hero-controls[hidden] { display: none; }
.hero-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.hero-pause:hover { background: #fff; color: var(--color-ink); }
.hero-pause svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hero-pause .icon-play { fill: currentColor; stroke: none; }
.hero-pause .icon-play,
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }

.hero-dots { display: flex; gap: 4px; }
.hero-dot {
  display: inline-flex;
  align-items: center;
  width: 36px; height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-dot::before {
  content: "";
  width: 100%; height: 2px;
  background: rgba(255, 255, 255, .45);
  transition: background-color .3s var(--ease);
}
.hero-dot:hover::before { background: rgba(255, 255, 255, .8); }
.hero-dot[aria-current="true"]::before { background: var(--color-gold-light); }


/* 08a. Hero intro "Dawn" and scroll depth
   First visit of the session: the photo starts dark, a warm light passes over it like sunrise
   and the title rises word by word. On scroll the photo moves slower than the page and darkens.
   Variables set by main.js on .hero: --hero-scale, --hero-shift, --hero-shade, --hero-dawn, --hero-p.
   The "intro-pending" class on <html> is set in the <head> before first paint.
   ========================================================================== */
.hero-shade,
.hero-dawn {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-shade { background: #141516; opacity: var(--hero-shade, 0); }
.hero-dawn {
  background: radial-gradient(ellipse 70% 60% at 28% 38%, rgba(236, 186, 112, .7), rgba(236, 186, 112, 0) 70%);
  opacity: var(--hero-dawn, 0);
}

/* Title, eyebrow and lead drift up and fade while scrolling (the booking form is left alone) */
.hero-copy {
  transform: translate3d(0, calc(var(--hero-p, 0) * -80px), 0);
  opacity: calc(1 - var(--hero-p, 0) * 1.4);
}

.hero-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
  vertical-align: bottom;
}
.hero-word > span {
  display: inline-block;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
}
.intro-pending .hero-word > span { transform: translateY(110%); }

.hero-fade { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hero-fade-1 { transition-delay: .35s; }
.hero-fade-2 { transition-delay: .55s; }
.hero-fade-3 { transition-delay: .75s; }
.hero-fade-4 { transition-delay: .9s; }
.intro-pending .hero-fade { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide img { transform: none; }
  .hero-copy { transform: none; opacity: 1; }
}


/* 08b. Date range picker
   ========================================================================== */
.date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 17px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.date-value { overflow: hidden; text-overflow: ellipsis; }
.date-icon { flex: none; fill: none; stroke: var(--color-muted); stroke-width: 1.4; stroke-linecap: round; }
.date-trigger:hover .date-icon,
.date-trigger.is-active .date-icon { stroke: var(--color-accent); }
.booking-date:has(.date-trigger.is-active) { box-shadow: inset 0 -2px 0 var(--color-accent); }

.date-picker {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  width: 640px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 22px 24px 18px;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45);
  animation: dp-in .18s var(--ease);
}
.date-picker[hidden] { display: none; }
.date-picker.is-above { top: auto; bottom: calc(100% + 10px); }
.booking-form .date-picker { left: auto; right: 0; }
@keyframes dp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.dp-hint {
  font: 500 11px/1.3 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.dp-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.dp-nav:hover:not(:disabled) { border-color: var(--color-ink); }
.dp-nav:disabled { opacity: .3; cursor: default; }

.dp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.dp-title { margin-bottom: 10px; font: 400 21px/1.2 var(--font-serif); text-align: center; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.dp-weekday {
  padding-bottom: 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
  color: var(--color-muted);
}
.dp-day {
  position: relative;
  height: 40px;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.date-picker button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .dp-day:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--color-ink); border-radius: 50%; }
}
.dp-day:active:not(:disabled) { background: var(--color-linen); border-radius: 50%; }
.dp-handle, .dp-backdrop { display: none; }
.dp-day:disabled { color: var(--color-line-linen); cursor: default; text-decoration: line-through; }
.dp-day.is-today { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.dp-day.is-in-range,
.dp-day.is-preview { background: var(--color-linen); }
.dp-day.is-preview { background: var(--color-sand); }
.dp-day.is-start,
.dp-day.is-end,
.dp-day.is-preview-end { background: var(--color-accent); color: #fff; border-radius: 50%; }
.dp-day.is-preview-end { background: var(--color-accent-dark); }
.dp-day:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-radius: 50%; z-index: 1; }

.dp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-line);
}
.dp-summary { font-size: 14px; color: var(--color-ink-soft); }
.dp-done { min-height: 40px; padding: 10px 22px; }

/* Phones: one month in a bottom sheet */
@media (max-width: 680px) {
  .date-picker,
  .booking-form .date-picker {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-width: none;
    z-index: 1001;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
    animation: dp-up .26s cubic-bezier(.2, .8, .2, 1);
    transition: transform .2s var(--ease);
    will-change: transform;
  }
  .date-picker.is-above { bottom: 0; }
  .dp-handle {
    display: block;
    width: 40px; height: 4px;
    margin: 0 auto 12px;
    border-radius: 2px;
    background: var(--color-line);
  }
  .dp-head { touch-action: none; }
  .dp-months { grid-template-columns: 1fr; }
  .dp-day { height: 44px; font-size: 15px; }
  .dp-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 21, 22, .4);
    animation: dp-fade .2s ease-out;
    touch-action: none;
  }
  .dp-backdrop[hidden] { display: none; }
  html.dp-lock, html.dp-lock body { overflow: hidden; }
  body.dp-sheet-open .mobile-bar { transform: translateY(110%); }
  @keyframes dp-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes dp-fade { from { opacity: 0; } to { opacity: 1; } }
}


/* 09. Intro & key facts
   ========================================================================== */
.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.intro-text .lead { margin-bottom: 18px; color: var(--color-ink); }
.intro-text > p:not(.lead):not(.eyebrow) { color: var(--color-ink-soft); }

.facts-card {
  background: var(--color-ivory);
  border-top: 2px solid var(--color-gold);
  padding: 36px 34px;
}
.facts-title {
  font-size: 15px;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
}
.facts-list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 15px;
}
.facts-list > div:last-child { border-bottom: 0; }
.facts-list dt { color: var(--color-muted); }
.facts-list dd { color: var(--color-ink); font-weight: 400; }


/* 09b. The house: then & now, details
   ========================================================================== */
.figure-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-sand);
}
.figure-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.then-now {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.then-now-item:first-child .figure-media img { filter: sepia(.15); }

figcaption {
  margin-top: 14px;
  font-size: 15px;
  color: var(--color-ink-soft);
}
.figure-label {
  display: inline-block;
  margin-right: 10px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.group-title.details-title { margin-top: 80px; }
.details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.details-grid figcaption { font-size: 14px; }


/* 10. Book direct
   ========================================================================== */
.perks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-line-linen);
}
.perk {
  padding: 40px 28px 10px 0;
  border-right: 1px solid var(--color-line-linen);
}
.perk + .perk { padding-left: 28px; }
.perk:last-child { border-right: 0; }
.perk-number { font: italic 400 22px var(--font-serif); color: var(--color-accent); }
.perk h3 { margin: 20px 0 10px; }
.perk p { font-size: 15px; color: var(--color-ink-soft); }


/* 11. Suites
   ========================================================================== */
.group-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: 16px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--color-line);
}
.suite-grid + .group-title { margin-top: 80px; }

.suite-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.suite-grid-three { grid-template-columns: repeat(3, 1fr); }

.suite-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--color-sand);
}

/* Suite photo gallery: horizontal scroll-snap track; arrows and counter added by main.js when there are 2+ photos */
.suite-gallery {
  position: relative;
  margin-bottom: 22px;
}
.suite-gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.suite-gallery-track::-webkit-scrollbar { display: none; }
.suite-gallery-track > .suite-media {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.gallery-btn {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-top: -20px;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 250, 246, .92);
  color: var(--color-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4);
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
}
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }
.gallery-btn:hover { background: #fff; }
.gallery-btn:disabled { visibility: hidden; }
.suite-gallery:hover .gallery-btn,
.gallery-btn:focus-visible { opacity: 1; }
.gallery-count {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(28, 33, 30, .7);
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
}
@media (hover: none) {
  .gallery-btn { opacity: 1; }
}
.suite-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.suite-card:hover .suite-media img { transform: scale(1.04); }

.suite-tagline {
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.suite-name { margin-bottom: 14px; }
.suite-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 14px;
  color: var(--color-ink-soft);
}
.suite-specs li + li::before { content: "·"; margin-right: 14px; color: var(--color-gold); }
.suite-card .text-link { margin-top: 16px; }

/* Cards in the same row share their row tracks (photo, tagline, name, specs, link),
   so names, specs and links line up even when a tagline wraps to two lines */
@supports (grid-template-rows: subgrid) {
  .suite-card {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .suite-card > .suite-tagline { align-self: end; }
  .suite-card > .text-link { justify-self: start; align-self: start; }
}


/* 12. Compare table & cards
   ========================================================================== */
.compare-table-wrap { overflow-x: auto; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--color-paper);
}
.compare-table th,
.compare-table td {
  padding: 18px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}
.compare-table thead th {
  font: 500 11px/1.3 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-sand);
}
.compare-table tbody th {
  font: 400 21px/1.2 var(--font-serif);
  white-space: nowrap;
}
.compare-table tbody tr:hover { background: var(--color-ivory); }
.compare-table td { white-space: nowrap; }
.compare-actions { display: flex; gap: 10px; justify-content: flex-end; }
.compare-table .compare-actions { flex-direction: column; gap: 6px; }
.compare-table th,
.compare-table td { padding: 16px 10px; }
.compare-table .btn { min-height: 36px; padding: 8px 12px; letter-spacing: .06em; }
.compare-actions .btn { min-height: 40px; padding: 10px 14px; font-size: 11px; white-space: nowrap; }

.compare-cards { display: none; }
.compare-card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  padding: 24px 22px;
}
.compare-card + .compare-card { margin-top: 16px; }
.compare-card h3 { margin-bottom: 14px; }
.compare-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}
.compare-card dt { color: var(--color-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.compare-card dd { font-weight: 400; }
.compare-card .compare-actions { justify-content: flex-start; flex-wrap: wrap; }


/* 13. Suite recommender
   ========================================================================== */
.recommender {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}
.rec-panel {
  background: var(--color-ivory);
  padding: 36px;
}
.rec-options { border: 0; }
.rec-legend {
  font: 500 13px/1.4 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 18px;
}
.rec-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.rec-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rec-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .25s, background-color .25s, color .25s;
}
.rec-choice span:hover { border-color: var(--color-ink); }
.rec-choice input:checked + span { background: var(--color-forest); border-color: var(--color-forest); color: #fff; }
.rec-choice input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.rec-result:not(:empty) {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
}
.rec-label {
  font: 500 12px/1.4 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.rec-result h3 { font-size: 32px; margin: 10px 0 12px; }
.rec-result p { color: var(--color-ink-soft); }
.rec-result .compare-actions { justify-content: flex-start; margin-top: 22px; flex-wrap: wrap; }


/* 14. Hotel room vs suite
   ========================================================================== */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  max-width: 900px;
}
.vs-col { padding: 34px 32px; background: var(--color-paper); }
.vs-col-highlight { background: var(--color-linen); border-top: 2px solid var(--color-accent); }
.vs-col h3 { margin-bottom: 18px; }
.vs-list li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 15px;
}
.vs-list li::before { content: "—"; color: var(--color-muted); }
.vs-list-check li::before { content: "✓"; color: var(--color-accent); }


/* 15. Services
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}
.service {
  padding: 42px 34px;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.service p { font-size: 15px; color: var(--color-ink-soft); }
.service strong { font-weight: 500; color: var(--color-ink); }

.icon {
  width: 32px; height: 32px;
  margin-bottom: 24px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 16. Stay with us
   ========================================================================== */
.stay-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.stay-card {
  display: flex;
  flex-direction: column;
  padding: 32px 26px;
  background: var(--color-paper);
  border-top: 2px solid var(--color-gold);
}
.stay-card h3 { font-size: 24px; }
.stay-card p { flex: 1; font-size: 15px; color: var(--color-ink-soft); }


/* 17. Location
   ========================================================================== */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
.small-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 34px 0 10px;
}
.landmarks li {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 16px;
}
.location-grid .todo { margin-top: 14px; }
.landmarks li { display: flex; justify-content: space-between; gap: 16px; }
.landmark-time { color: var(--color-muted); font-size: 14px; white-space: nowrap; }
.address { margin-top: 26px; font-size: 16px; font-weight: 400; }
.location-photo { margin-top: 32px; }

.location-grid { align-items: stretch; }
.map-frame {
  position: relative;
  min-height: 420px;
  background: var(--color-sand);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) sepia(.2) contrast(.95);
}


/* 18. Tours
   ========================================================================== */
.tour-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-line-linen);
}
.tour-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 92px;
  padding: 22px 20px 22px 0;
  border-bottom: 1px solid var(--color-line-linen);
  font: 400 24px/1.2 var(--font-serif);
  text-decoration: none;
  transition: color .3s var(--ease), padding .3s var(--ease);
}
.tour-list a::after { content: "→"; font-family: var(--font-sans); font-size: 16px; color: var(--color-accent); }
.tour-list a:hover { color: var(--color-accent); padding-left: 8px; }
.tour-teasers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tour-teaser a { display: flex; flex-direction: column; gap: 6px; color: var(--color-ink); text-decoration: none; }
.tour-teaser-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-sand); margin-bottom: 8px; }
.tour-teaser-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tour-teaser a:hover img { transform: scale(1.04); }
.tour-teaser-name { font: 400 24px/1.2 var(--font-serif); }
.tour-teaser a:hover .tour-teaser-name { color: var(--color-accent); }
.tour-teaser-price { font-size: 14px; color: var(--color-ink-soft); }
.tour-teaser-actions { margin-top: 32px; }
@media (max-width: 1080px) { .tour-teasers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .tour-teasers { grid-template-columns: 1fr; } }
.tour-transfer { margin-top: 32px; font-size: 16px; color: var(--color-ink-soft); }
.tour-transfer strong { font-weight: 500; color: var(--color-ink); }
.tour-transfer .text-link { margin-left: 12px; }


/* 19. Reviews
   ========================================================================== */
.reviews { text-align: center; max-width: 1080px; }
.reviews .eyebrow { justify-content: center; }
.reviews > .lead { max-width: 640px; margin: 0 auto; }

.guest-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 44px auto 0;
  text-align: left;
}
.guest-photos figcaption { font-size: 14px; }

/* Score per platform */
.review-platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 56px 0 0;
}
.review-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 18px 24px;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
}
.review-platform-name {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.review-platform-score { margin: 14px 0 4px; }
.review-score-value { font: 400 44px/1 var(--font-serif); color: var(--color-ink); }
.review-score-scale { margin-left: 6px; font-size: 15px; color: var(--color-muted); }
.review-platform-count { font-size: 14px; color: var(--color-ink-soft); }
.review-platform .text-link { margin-top: 16px; font-size: 12px; }
.review-updated { margin-top: 18px; font-size: 13px; color: var(--color-muted); }

/* Featured reviews */
.group-title.review-featured-title { margin: 72px 0 28px; text-align: left; }
.review-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}
.review-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--color-ivory);
  border-top: 2px solid var(--color-accent);
}
.review-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.review-badge {
  padding: 5px 10px;
  border: 1px solid var(--color-line);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.review-card-rating { font-size: 14px; letter-spacing: .12em; color: var(--color-accent); }
.review-card blockquote { flex: 1; }
.review-card blockquote p { font: italic 400 21px/1.45 var(--font-serif); color: var(--color-ink); }
.review-card-author {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--color-muted);
}
.review-source-note { margin-top: 28px; font-size: 13px; color: var(--color-muted); }

@media (max-width: 960px) {
  .review-platforms { grid-template-columns: 1fr 1fr; }
  .review-cards { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .guest-photos { grid-template-columns: 1fr; }
  .review-platform { padding: 22px 12px 20px; }
  .review-score-value { font-size: 36px; }
}

/* 20. FAQ
   ========================================================================== */
.faq-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(40px, 7vw, 100px);
}
.faq-list details { border-bottom: 1px solid var(--color-line); }
.faq-list details:first-child { border-top: 1px solid var(--color-line); }
.faq-list summary {
  position: relative;
  list-style: none;
  padding: 24px 44px 24px 0;
  font: 400 23px/1.3 var(--font-serif);
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-list details p { padding: 0 44px 26px 0; color: var(--color-ink-soft); }


/* 21. Final CTA
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(100px, 13vw, 160px) 0;
  color: #fff;
  text-align: center;
  background: var(--tint-cta-2);
}
.cta-media {
  position: absolute;
  inset: 0;
}
.cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20, 21, 22, .72) 0%, rgba(20, 21, 22, .5) 55%, rgba(20, 21, 22, .35) 100%);
}
.cta-inner { position: relative; max-width: 820px; }
.cta .eyebrow { justify-content: center; }
.cta h2 { font-size: clamp(40px, 5.6vw, 72px); }
.cta .lead { margin: 0 auto 40px; max-width: 520px; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }


/* 22. Footer
   ========================================================================== */
.site-footer {
  background: var(--color-ink);
  color: rgba(247, 243, 236, .72);
  padding: 80px 0 40px;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-logo { width: 170px; margin-bottom: 22px; }
.footer-brand p { max-width: 300px; }
.footer-title {
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin: 0 0 20px;
}
.footer-address { line-height: 1.9; }
.footer-links li { padding: 4px 0; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 28px;
  font-size: 13px;
}


/* 22b. Suite page
   ========================================================================== */
.suite-top { padding-top: calc(var(--header-h) + 28px); }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none;
  font-size: 13px;
  color: var(--color-muted);
}
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--color-line-linen); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }

.suite-title { margin: 28px 0 32px; }
.suite-title h1 { font-size: clamp(44px, 6vw, 76px); margin: 14px 0 8px; }
.suite-subtitle { font: italic 400 22px/1.4 var(--font-serif); color: var(--color-ink-soft); }

/* Gallery mosaic: one large photo + four tiles */
.suite-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  aspect-ratio: 2.4 / 1;
}
.mosaic-main { grid-row: 1 / span 2; overflow: hidden; background: var(--color-sand); }
.mosaic-main img,
.mosaic-photo img { width: 100%; height: 100%; object-fit: cover; }
.mosaic-photo { overflow: hidden; background: var(--color-sand); }
.mosaic-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--color-sand);
  text-align: center;
}

/* At-a-glance specs */
.suite-specs-bar {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 32px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.suite-specs-bar > div { padding: 20px 16px; border-left: 1px solid var(--color-line); }
.suite-specs-bar > div:first-child { border-left: 0; padding-left: 0; }
.suite-specs-bar dt {
  font: 500 11px/1.3 var(--font-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.suite-specs-bar dd { font-size: 16px; font-weight: 400; }

/* Two columns: content + sticky booking box */
.suite-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  padding-top: 64px;
  padding-bottom: 110px;
}
.suite-block + .suite-block {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--color-line);
}
.suite-block h2 { font-size: clamp(30px, 3.4vw, 42px); margin: 0 0 22px; }
.suite-definition { font-size: 20px; line-height: 1.6; }

.suite-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.suite-highlights li { padding-top: 20px; border-top: 2px solid var(--color-gold); }
.suite-highlights h3 { font-size: 23px; }
.suite-highlights p { font-size: 15px; color: var(--color-ink-soft); }

.space-list li,
.know-list > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}
.space-list li:first-child,
.know-list > div:first-child { border-top: 1px solid var(--color-line); }
.space-list h3 { font-size: 22px; margin: 0; }
.space-list p { font-size: 15px; color: var(--color-ink-soft); }
.space-list + .todo { margin-top: 18px; }
.know-list dt {
  font: 500 12px/1.6 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.know-list dd { font-size: 16px; }

.breakfast-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 26px;
}
.breakfast-options > div { padding: 28px 26px; background: var(--color-linen); }
.breakfast-options h3 { font-size: 23px; }
.breakfast-options p { font-size: 15px; color: var(--color-ink-soft); }

.check-list { columns: 2; column-gap: 32px; }
.check-list li { padding: 6px 0; font-size: 16px; break-inside: avoid; }
.check-list li::before { content: "✓"; margin-right: 10px; color: var(--color-accent); }

.extras-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 15px;
}
.extras-list li > span:first-child { font-weight: 400; }
.extras-list li > span:last-child { color: var(--color-ink-soft); text-align: right; }

/* Booking box */
.suite-booking { position: sticky; top: calc(var(--header-h) + 24px); }
.booking-card {
  padding: 30px 28px;
  background: var(--color-ivory);
  border-top: 2px solid var(--color-accent);
}
.booking-price { font: 400 26px/1.3 var(--font-serif); }
.booking-from {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.booking-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
}
.booking-form .booking-field { padding: 12px 16px; border-bottom: 1px solid var(--color-line); }
.booking-form .booking-field:nth-child(2) { border-right: 0; }
.booking-form .booking-field:nth-child(4) { border-right: 0; }
.booking-form .booking-submit { grid-column: 1 / -1; min-height: 52px; border-radius: 0; }
.booking-card .booking-status { font-size: 14px; }
.booking-card .booking-status a { color: var(--color-accent); }
.booking-whatsapp { width: 100%; }
.booking-perks { margin-top: 20px; font-size: 14px; color: var(--color-ink-soft); }
.booking-perks li { padding: 3px 0; }
.booking-perks li::before { content: "✓"; margin-right: 8px; color: var(--color-accent); }

.suite-grid-two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.suite-grid-two + .text-link { margin-top: 44px; }

@media (max-width: 1080px) {
  .suite-specs-bar { grid-template-columns: repeat(4, 1fr); }
  .suite-specs-bar > div:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
  .suite-specs-bar > div:nth-child(-n + 4) { border-bottom: 1px solid var(--color-line); }
}

@media (max-width: 960px) {
  .suite-layout { grid-template-columns: 1fr; }
  .suite-booking { position: static; }
}

@media (max-width: 680px) {
  .suite-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; aspect-ratio: auto; }
  .mosaic-main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .mosaic-tile { aspect-ratio: 3 / 2; font-size: 12px; }
  .suite-specs-bar { grid-template-columns: 1fr 1fr; }
  .suite-specs-bar > div { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--color-line); }
  .suite-specs-bar > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--color-line); }
  .suite-specs-bar > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .suite-highlights,
  .breakfast-options,
  .suite-grid-two { grid-template-columns: 1fr; }
  .space-list li,
  .know-list > div { grid-template-columns: 1fr; gap: 4px; }
  .check-list { columns: 1; }
  .booking-card { padding: 26px 18px; }
  .booking-form .booking-field { padding: 10px 12px; }
  .booking-form .booking-field input { font-size: 15px; }
  .extras-list li { flex-direction: column; gap: 2px; }
  .extras-list li > span:last-child { text-align: left; }
}


/* 23. Mobile booking bar
   ========================================================================== */
.mobile-bar { display: none; }


/* 24. Motion
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* 25. Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }

  .primary-nav.is-open {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 auto;
    background: var(--color-paper);
    color: var(--color-ink);
    padding: 24px var(--gutter) 32px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .25);
  }
  .primary-nav.is-open ul { flex-direction: column; gap: 0; }
  .primary-nav.is-open a {
    display: block;
    padding: 14px 0;
    font-size: 20px;
    border-bottom: 1px solid var(--color-line);
  }

  .suite-grid { grid-template-columns: repeat(2, 1fr); }
  .suite-grid-three { grid-template-columns: repeat(3, 1fr); }
  .stay-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1080px) {
  .compare-table-wrap { display: none; }
  .compare-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
  .compare-card + .compare-card { margin-top: 0; }
}

@media (max-width: 960px) {

  .intro-grid,
  .recommender,
  .location-grid,
  .faq-grid { grid-template-columns: 1fr; }

  .perks-grid { grid-template-columns: 1fr 1fr; }
  .perk:nth-child(2) { border-right: 0; }
  .perk:nth-child(3) { padding-left: 0; }
  .perk:nth-child(-n+2) { border-bottom: 1px solid var(--color-line-linen); padding-bottom: 30px; }

  .services-grid { grid-template-columns: 1fr 1fr; }
  .tour-list { grid-template-columns: 1fr 1fr; }
  .suite-grid-three,
  .details-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --gutter: 16px; --header-h: 70px; }
  body { font-size: 16px; }

  .header-actions .btn { display: none; }
  .brand-logo { width: 124px; }

  .hero-content { padding-bottom: 32px; }
  .hero-lead { margin-bottom: 30px; font-size: 17px; }
  .booking-bar { grid-template-columns: 1fr 1fr; }
  .booking-field { padding: 12px 16px; border-bottom: 1px solid var(--color-line); }
  .booking-field:nth-child(2) { border-right: 0; }
  .booking-field:nth-child(4) { border-right: 0; }
  .booking-submit { grid-column: 1 / -1; min-height: 54px; border-radius: 0 0 var(--radius) var(--radius); }

  .then-now,
  .details-grid,
  .perks-grid,
  .suite-grid,
  .suite-grid-three,
  .services-grid,
  .stay-grid,
  .vs-grid,
  .tour-list,
  .footer-grid { grid-template-columns: 1fr; }

  .perk,
  .perk + .perk { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--color-line-linen); }

  .facts-card, .rec-panel { padding: 28px 22px; }
  .facts-list > div { grid-template-columns: 1fr; gap: 2px; }

  .mobile-bar {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 10px;
    position: fixed;
    inset: auto 0 0;
    z-index: 45;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--color-paper);
    border-top: 1px solid var(--color-line);
    transform: translateY(110%);
    transition: transform .4s var(--ease);
  }
  .mobile-bar.is-visible { transform: none; }
  .mobile-bar .btn { padding: 12px; font-size: 12px; }

  html { scroll-padding-bottom: 90px; }
  .site-footer { padding-bottom: 110px; }
}


/* Language switch (EN / ES) in the header */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .14em;
  color: inherit;
  text-decoration: none;
  opacity: .85;
}
.lang-switch:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* 22b-3. Tours page (proposal)
   ========================================================================== */
.tours-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: end;
  margin: 28px 0 36px;
}
.tours-hero h1 { font-size: clamp(40px, 5.4vw, 68px); margin: 14px 0 10px; }
.tours-hero-actions { justify-content: flex-start; margin-top: 26px; }
.tours-hero-points { display: grid; gap: 12px; padding: 24px 26px; background: var(--color-ivory); border-top: 2px solid var(--color-gold); }
.tours-hero-points li { position: relative; padding-left: 24px; font-size: 16px; color: var(--color-ink); }
.tours-hero-points li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); }

.tour-group { padding: 56px 0 8px; scroll-margin-top: calc(var(--header-h) + 16px); }
.tour-group h2 { font-size: clamp(30px, 3.4vw, 42px); margin: 0 0 6px; }
.tour-group-intro { color: var(--color-ink-soft); margin-bottom: 26px; }
.tour-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.tour-card { display: flex; flex-direction: column; background: var(--color-paper); border: 1px solid var(--color-line); scroll-margin-top: calc(var(--header-h) + 16px); }
.tour-card:target { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.tour-card-media {
  display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; background: var(--color-sand); text-align: center; padding: 16px;
  font: italic 400 22px/1.2 var(--font-serif); color: var(--color-ink-soft);
}
.tour-card-media .todo { font: 400 12px/1.3 var(--font-sans); }
.tour-card-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-sand); }
.tour-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tour-card:hover .tour-card-photo img { transform: scale(1.04); }
.tour-card-body { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; flex: 1; }
.tour-card-body h3 { font-size: 26px; margin: 0; }
.tour-card-desc { color: var(--color-ink-soft); font-size: 15px; }
.tour-card-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--color-ink); }
.tour-card-meta li { display: flex; align-items: center; gap: 6px; }
.tour-card-meta .v2-icon { width: 18px; height: 18px; color: var(--color-accent); }
.tour-card-points { display: grid; gap: 6px; font-size: 14px; color: var(--color-ink-soft); }
.tour-card-points li { position: relative; padding-left: 18px; }
.tour-card-points li::before { content: "·"; position: absolute; left: 4px; color: var(--color-gold); font-weight: 700; }
.tour-card .btn { margin-top: auto; align-self: flex-start; }
.tour-card-price { font: 400 30px/1.1 var(--font-serif); color: var(--color-ink); }
.tour-card-price-from { font: 500 11px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); margin-right: 4px; }
.tour-card-price-note { font: 400 13px/1.3 var(--font-sans); color: var(--color-muted); }
.tour-card-stops-title { font: 500 11px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: -6px; }
.tour-included {
  display: grid; grid-template-columns: repeat(3, auto); gap: 8px 28px; justify-content: start;
  margin: 0 0 28px; padding: 16px 20px; background: var(--color-linen); font-size: 14px; color: var(--color-ink-soft);
}
.tour-included strong { font-weight: 500; color: var(--color-ink); }
@media (max-width: 960px) { .tour-included { grid-template-columns: 1fr; } }

/* Tours, variant B: list rows with a price column and interest filters */
.tour-list-b { padding: 8px 0 72px; }
.tour-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; position: sticky; top: var(--header-h); z-index: 5; padding: 12px 0; background: var(--color-paper); }
.tour-filter {
  min-height: 40px; padding: 8px 18px; border: 1px solid var(--color-line); border-radius: 99px;
  background: transparent; font: 400 14px/1 var(--font-sans); color: var(--color-ink); cursor: pointer;
}
.tour-filter[aria-pressed="true"] { background: var(--color-forest); border-color: var(--color-forest); color: #fff; }
.tour-rows { display: grid; gap: 20px; }
.tour-row {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 230px; gap: 28px; align-items: stretch;
  padding: 18px; background: var(--color-paper); border: 1px solid var(--color-line); scroll-margin-top: calc(var(--header-h) + 80px);
}
.tour-row[hidden] { display: none; }
.tour-row-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-sand); align-self: start; }
.tour-row-photo img { width: 100%; height: 100%; object-fit: cover; }
.tour-row-info { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.tour-row-info h3 { font-size: 28px; margin: 0; }
.tour-row-tag { font: 500 11px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); }
.tour-row-stops { font-size: 14px; color: var(--color-ink-soft); }
.tour-row-stops span { font-weight: 500; color: var(--color-ink); }
.tour-row-buy { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; border-left: 1px solid var(--color-line); }
.tour-row-buy .tour-card-meta { flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.tour-row-buy .btn { margin-top: auto; width: 100%; }
@media (max-width: 960px) {
  .tour-row { grid-template-columns: 220px minmax(0, 1fr); }
  .tour-row-buy { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--color-line); padding-top: 14px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px 20px; }
  .tour-row-buy .tour-card-meta { margin: 0; }
  .tour-row-buy .btn { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .tour-row { grid-template-columns: 1fr; padding: 0 0 16px; }
  .tour-row-info, .tour-row-buy { padding-left: 16px; padding-right: 16px; }
  .tour-row-buy { grid-template-columns: 1fr; }
  .tour-filters { flex-wrap: nowrap; overflow-x: auto; }
  .tour-filter { white-space: nowrap; }
}

.tour-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 44px; }
.tour-why h3 { font-size: 23px; margin: 0 0 8px; }
.tour-why p { font-size: 15px; color: var(--color-ink-soft); }
.tour-compare-wrap { overflow-x: auto; }
.tour-compare { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--color-paper); }
.tour-compare th, .tour-compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--color-line-linen); vertical-align: top; }
.tour-compare thead th { font: 500 12px/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.tour-compare tbody th { font-weight: 500; color: var(--color-ink); width: 34%; }
.tour-compare .tour-yes { color: var(--color-ink); font-weight: 500; }
.tour-compare .tour-yes::before { content: "✓ "; color: var(--color-accent); }

.tour-transfers { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.tour-transfer-card { padding: 32px 30px; background: var(--color-ivory); border-top: 2px solid var(--color-accent); display: grid; gap: 14px; justify-items: start; }
.tour-transfer-price { font: 400 44px/1 var(--font-serif); color: var(--color-ink); }
.tour-transfer-price span { font: 500 12px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); margin-right: 6px; }
.tour-transfer-card p:not(.tour-transfer-price) { color: var(--color-ink-soft); font-size: 15px; }

.tour-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: none; }
.tour-step-n { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--color-gold); border-radius: 50%; font: 400 20px/1 var(--font-serif); color: var(--color-accent); }
.tour-steps h3 { font-size: 24px; margin: 14px 0 6px; }
.tour-steps p { color: var(--color-ink-soft); font-size: 15px; }

@media (max-width: 960px) {
  .tours-hero, .tour-transfers { grid-template-columns: 1fr; }
  .tour-why { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .tour-why, .tour-steps { grid-template-columns: 1fr; }
  .tour-cards { grid-template-columns: 1fr; }
  .tours-hero-actions { flex-direction: column; align-items: stretch; }
  .tour-compare th, .tour-compare td { padding: 12px 10px; font-size: 14px; }
}

/* 22b-2. FAQ page
   ========================================================================== */
.faq-topics ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.faq-topics a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-line);
  border-radius: 99px;
  font-size: 14px;
  color: var(--color-ink);
  text-decoration: none;
}
.faq-topics a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.faq-body { margin-top: 48px; margin-bottom: var(--section-space); }
.faq-body > * { max-width: 860px; }   /* readable width, aligned with the title */
.faq-group { scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-group + .faq-group { margin-top: 64px; }
.faq-group h2 { font-size: clamp(28px, 3vw, 36px); margin: 0 0 18px; }
.faq-help {
  margin-top: 72px;
  padding: 36px 32px;
  background: var(--color-linen);
  border-top: 2px solid var(--color-accent);
}
.faq-help h2 { font-size: clamp(26px, 3vw, 32px); margin: 0 0 8px; }
.faq-help p { color: var(--color-ink-soft); margin-bottom: 22px; }
.faq-help .cta-actions { justify-content: flex-start; }
.v2-all-faq,
#faq .faq-grid > div > .text-link { margin-top: 22px; }
@media (max-width: 680px) {
  .faq-help { padding: 28px 20px; }
  .faq-help .cta-actions { flex-direction: column; align-items: stretch; }
}

/* 22c. Suite page, v2 layout (decision-first): key facts, why you'll love it, where you'll sleep,
   breakfast options, what's included, good to know
   ========================================================================== */

.v2-icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Key facts: 4 facts with icons on one line + one differentiating badge */
.v2-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.v2-facts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.v2-facts-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: var(--color-ink);
}
.v2-facts-list .v2-icon { color: var(--color-accent); }
.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-linen);
  border-radius: 99px;
  font-size: 14px;
  color: var(--color-ink);
}
.v2-badge .v2-icon { width: 18px; height: 18px; color: var(--color-accent); }

/* Content blocks */
.v2-layout { margin-top: 48px; }
.v2-block + .v2-block {
  margin-top: 52px;
  padding-top: 48px;
  border-top: 1px solid var(--color-line);
}
.v2-h2 { font-size: clamp(28px, 3vw, 36px); margin: 0 0 22px; }
.v2-lead {
  font: italic 400 clamp(22px, 2.4vw, 27px)/1.45 var(--font-serif);
  color: var(--color-ink);
  margin-bottom: 40px;
}

.v2-love { display: grid; gap: 14px; }
.v2-love li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  color: var(--color-ink-soft);
}
.v2-love li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 14px;
  height: 1px;
  background: var(--color-gold);
}

/* Where you'll sleep: one card per bedroom */
.v2-sleep {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.v2-sleep-card h3 { font-size: 23px; margin: 14px 0 4px; }
.v2-sleep-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-sand);
}
.v2-sleep-media img { width: 100%; height: 100%; object-fit: cover; }
.v2-sleep-empty { display: flex; align-items: center; justify-content: center; }
.v2-sleep-beds {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--color-ink);
}
.v2-sleep-beds .v2-icon { width: 18px; height: 18px; color: var(--color-accent); }
.v2-sleep-note { margin-top: 6px; font-size: 15px; color: var(--color-muted); }

/* Included: icon grid */
.v2-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px 24px;
}
.v2-amenities li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--color-ink);
}
.v2-amenities .v2-icon { color: var(--color-accent); }
.v2-breakfast {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--color-ivory);
  border-left: 2px solid var(--color-gold);
  font-size: 15px;
  color: var(--color-ink-soft);
}
.v2-breakfast .v2-icon { color: var(--color-accent); margin-top: 2px; }
.v2-breakfast strong { font-weight: 500; color: var(--color-ink); }

/* Breakfast: the two options side by side, with everything they include */
.v2-intro { font-size: 17px; color: var(--color-ink-soft); margin: -8px 0 24px; }
.v2-breakfast-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.v2-bf-card {
  padding: 26px 26px 24px;
  background: var(--color-ivory);
  border-top: 2px solid var(--color-gold);
}
.v2-bf-tag {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.v2-bf-card h3 { font-size: 26px; margin: 10px 0 8px; }
.v2-bf-when { font-size: 15px; color: var(--color-ink-soft); margin-bottom: 16px; }
.v2-bf-list { display: grid; gap: 8px; }
.v2-bf-list li,
.v2-kitchen-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--color-ink);
}
.v2-bf-list li::before,
.v2-kitchen-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* Kitchen equipment, always visible */
.v2-kitchen { margin-top: 32px; }
.v2-h3 { font-size: 23px; margin: 0 0 14px; }
.v2-kitchen-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 24px;
}

.v2-more { margin-top: 28px; }
.v2-more summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-gold);
}
.v2-more summary::-webkit-details-marker { display: none; }
.v2-more-list { display: grid; gap: 14px; margin-top: 20px; }
.v2-more-list dt { font-weight: 500; font-size: 14px; color: var(--color-ink); }
.v2-more-list dd { font-size: 15px; color: var(--color-ink-soft); }

/* Good to know: three short rows */
.v2-know > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}
.v2-know > div:first-child { border-top: 1px solid var(--color-line); }
.v2-know dt { font-size: 14px; color: var(--color-muted); }
.v2-know dd { font-size: 16px; color: var(--color-ink); }

/* Booking card: no price line */
.v2-booking-title { font-size: 28px; margin: 0 0 18px; }
.booking-guest-note { margin-top: 10px; font-size: 13px; color: var(--color-muted); }
.v2-booking-perks { display: grid; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--color-ink-soft); }
.v2-booking-perks li { display: flex; align-items: center; gap: 10px; }
.v2-booking-perks .v2-icon { width: 18px; height: 18px; color: var(--color-accent); }

@media (max-width: 680px) {
  .v2-amenities { grid-template-columns: 1fr 1fr; gap: 16px; }
  .v2-breakfast-options { grid-template-columns: 1fr; }
  .v2-bf-card { padding: 22px 18px; }
  .v2-kitchen-list { grid-template-columns: 1fr 1fr; }
  .v2-amenities li { font-size: 15px; }
}
@media (max-width: 680px) {
  .v2-facts { display: block; padding: 18px 0; }
  .v2-facts-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .v2-facts-list li { font-size: 15px; }
  .v2-badge { margin-top: 16px; }
  .v2-layout { margin-top: 32px; }
  .v2-know > div { grid-template-columns: 1fr; gap: 2px; }
}

/* The Hotels Network notes (eSIM bar) stay off phones: our own bottom booking bar lives there.
   The eSIM perk is shown natively in the hero perks and the Book direct section instead. */
@media (max-width: 680px) {
  #thn_notes_widget { display: none !important; }
}

/* The Hotels Network reviews pill: never over the booking form. Hidden on narrow screens (THN decides
   "mobile" by device, so a narrow desktop window still got it) and, on the home page, while the hero
   booking form is on screen (main.js toggles html.thn-hold). */
#eighty_hotel_reviews_widget { transition: opacity .3s ease; }
html.thn-hold #eighty_hotel_reviews_widget { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 1024px) {
  #eighty_hotel_reviews_widget { display: none !important; }
}