/* ==========================================================================
   Hotel Vertice — Stylesheet
   Structural / geometric design language. No serif, no gradients, no texture.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; }
html { scroll-behavior: smooth; }

/* --- Design tokens ---------------------------------------------------- */
:root {
  --fog: #EAEAE6;
  --ink: #1C1D20;
  --garnet: #7A2130;
  --garnet-dark: #611a26;
  --steel: #5B5F66;
  --white: #FFFFFF;

  --font-display: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Work Sans', 'Segoe UI', Arial, sans-serif;

  --container: 1200px;
  --gap: 24px;
}

body {
  background: var(--fog);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--garnet);
}

/* --- Hairline dividers & corner brackets ------------------------------ */
.hairline {
  border: none;
  border-top: 1px solid var(--ink);
  opacity: 0.15;
  margin: 0;
}

.bracket-frame {
  position: relative;
}
.bracket-frame::before,
.bracket-frame::after,
.bracket-frame > .bracket-tl,
.bracket-frame > .bracket-br {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--garnet);
  z-index: 2;
}
.bracket-frame::before { top: -8px; left: -8px; border-right: none; border-bottom: none; }
.bracket-frame::after { bottom: -8px; right: -8px; border-left: none; border-top: none; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--garnet);
  color: var(--white);
}
.btn-primary:hover { background: var(--garnet-dark); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline-light:hover { background: var(--white); color: var(--ink); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* --- Header / Nav -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fog);
  border-bottom: 1px solid rgba(28,29,32,0.12);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--container);
  margin: 0 auto;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.logo .mark { color: var(--garnet); }

/* .nav-menu wraps the page links + language/CTA actions. On desktop it's
   flattened out of the box tree (display: contents) so its children sit as
   direct flex items of .nav, matching the original 3-group layout. On
   mobile it becomes the dropdown panel itself — see the 720px breakpoint. */
.nav-menu { display: contents; }
.nav-menu-divider { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--garnet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--garnet); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.lang-toggle {
  display: flex;
  border: 1px solid var(--ink);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  overflow: hidden;
}
.lang-toggle button {
  padding: 7px 12px;
  letter-spacing: 0.05em;
}
.lang-toggle button.active {
  background: var(--ink);
  color: var(--white);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--white);
  background: var(--ink);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Clipping lives here, not on .hero — .hero-media's own inset:0 box is
     all that ever needs to be cropped to its edges (the background image,
     via object-fit:cover). Putting it on .hero itself would also clip any
     normal content that overflows the section's box, e.g. the guest
     popover on mobile, which opens downward and — with the hero no longer
     forced short via a top-padding hack — can extend past the hero's
     bottom edge on shorter phones; it should sit on top of the section
     below instead of being cut off. */
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,29,32,0.35) 0%, rgba(28,29,32,0.55) 55%, rgba(28,29,32,0.92) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 48px 32px;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-text {
  width: 100%;
  max-width: 640px;
  margin-bottom: 48px;
  text-align: center;
}
.hero-text .eyebrow { color: var(--fog); opacity: 0.85; }
.hero-text h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin: 14px 0 18px;
}
.hero-text p {
  font-size: 1.05rem;
  color: var(--fog);
  max-width: 520px;
  margin: 0 auto;
}

/* --- Search bar (compact bar, sharp corners — no rounding) ------------ */
.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;
}

.search-bar {
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(28,29,32,0.15);
  display: flex;
  align-items: stretch;
  height: 64px;
  width: fit-content;
  max-width: 100%;
  position: relative;
}

.search-bar-divider {
  flex: none;
  width: 1px;
  background: rgba(28,29,32,0.15);
  align-self: stretch;
}

.search-bar-field {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
/* 307.875px = Flatpickr's actual rendered calendar width, so the field the
   calendar opens from is exactly as wide as the calendar itself. flex-shrink
   is 0 (not 1) on purpose: with shrink allowed, `.search-bar`'s
   width: fit-content collapses this field to its min-width at every
   viewport — even ones with plenty of room — so it never actually rendered
   at 307.875px and the calendar ended up visibly wider than its own field. */
.search-bar-field--dates { flex: 0 0 307.875px; }
/* 260px comfortably fits the guest popover's two stepper rows so the popover
   (which is set to 100% of this field's width) never needs to be wider than
   its trigger. */
.search-bar-field--guests { flex: 0 1 260px; min-width: 210px; position: relative; }

.search-bar-field--dates input[type="text"] {
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
}
.search-bar-field--dates input[type="text"]::placeholder { color: var(--steel); }
.search-bar-field--dates input[type="text"]:focus-visible { outline: 2px solid var(--garnet); outline-offset: -2px; }

.guest-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: center;
}
.guest-trigger:hover,
.guest-trigger[aria-expanded="true"] { background: rgba(28,29,32,0.04); }
.guest-trigger:focus-visible { outline: 2px solid var(--garnet); outline-offset: -2px; }
.guest-trigger-caret {
  font-size: 0.65rem;
  color: var(--steel);
  transition: transform 0.15s ease;
}
.guest-trigger[aria-expanded="true"] .guest-trigger-caret { transform: rotate(180deg); }

.search-bar-submit {
  flex: 0 0 auto;
  height: 100%;
  padding: 0 32px;
}

/* Guest popover — opens upward by default (desktop/tablet); flipped back to
   downward on mobile, see @media (max-width: 720px) below. */
.guest-popover {
  position: absolute;
  bottom: calc(100% + 1px);
  top: auto;
  left: 0;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--ink);
  padding: 20px;
  z-index: 20;
  box-shadow: 0 12px 24px rgba(28,29,32,0.15);
}
.guest-popover[hidden] { display: none; }
.guest-popover .guest-stepper { border: none; padding: 0; }
.guest-popover-done { width: 100%; height: 44px; margin-top: 16px; }

/* Stepper controls (reused inside the guest popover) */
.guest-stepper {
  border: 1px solid var(--steel);
  padding: 8px 14px;
}
.stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.stepper-row:not(:last-child) { border-bottom: 1px solid rgba(91,95,102,0.25); }
.stepper-row .stepper-label { font-size: 0.85rem; }
.stepper-row .stepper-label small { display: block; color: var(--steel); font-size: 0.72rem; }
.stepper-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stepper-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink);
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepper-btn:hover { background: var(--ink); color: var(--white); }
.stepper-btn:focus-visible { outline: 2px solid var(--garnet); outline-offset: 2px; }
.stepper-count { min-width: 18px; text-align: center; font-family: var(--font-display); font-weight: 700; }

/* --- Interior page hero (Rooms, Amenities, About, Book) --------------- */
.page-hero {
  background: var(--white);
  padding: 64px 0 56px;
}
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 14px 0 16px;
}
.page-hero p {
  color: var(--steel);
  max-width: 640px;
  font-size: 1.05rem;
}
/* Book page only — its hero (and everything below it, per .center usages
   elsewhere on that page) is centered rather than left-aligned like the
   other interior pages' heroes. */
.page-hero--center { text-align: center; }
.page-hero--center p { margin-left: auto; margin-right: auto; }
.hero-features {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 12px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(28,29,32,0.12);
}
.hero-features li {
  position: relative;
  padding-left: 15px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 6px;
  height: 6px;
  background: var(--garnet);
}

/* --- Sections general ------------------------------------------------ */
section { padding: 96px 0; }
.section-head {
  max-width: 640px;
  margin-bottom: 52px;
}
.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-top: 12px;
}
.section-head p {
  color: var(--steel);
  margin-top: 16px;
  font-size: 1.02rem;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Quick pitch --------------------------------------------------- */
.pitch { background: var(--white); }
.pitch-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.pitch-copy p { font-size: 1.08rem; color: var(--ink); }
.pitch-copy p + p { margin-top: 18px; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.stat {
  padding: 0 24px;
  border-left: 1px solid rgba(28,29,32,0.15);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat .stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--garnet);
  display: block;
}
.stat .stat-label {
  font-size: 0.8rem;
  color: var(--steel);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* --- Amenities teaser -------------------------------------------------- */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.amenity-card {
  background: var(--white);
}
.amenity-card .card-media {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin: 0 8px;
}
.amenity-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.amenity-card .card-body { padding: 22px 8px 8px; }
.amenity-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.amenity-card p { color: var(--steel); font-size: 0.95rem; }
.amenities-more {
  margin-top: 40px;
  text-align: center;
}
.amenities-more a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--garnet);
  border-bottom: 1px solid var(--garnet);
  padding-bottom: 3px;
}

/* --- Rooms preview --------------------------------------------------- */
.rooms-preview { background: var(--white); }
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.room-card {
  border: 1px solid rgba(28,29,32,0.12);
  display: flex;
  flex-direction: column;
}
.room-card .card-media {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.room-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.room-card .card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.room-card h3 { font-size: 1.05rem; }
.room-card .price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--garnet);
  font-size: 1.3rem;
}
.room-card .price span {
  font-size: 0.75rem;
  color: var(--steel);
  font-weight: 500;
  font-family: var(--font-body);
}
.room-card p.desc { color: var(--steel); font-size: 0.88rem; flex: 1; }
.room-card .btn { margin-top: 6px; }
.rooms-cta { text-align: center; margin-top: 44px; }

/* --- Room detail rows (Rooms page) -------------------------------------- */
.room-detail { padding: 80px 0; }
.room-detail:nth-child(even) { background: var(--white); }
.room-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.room-detail-media { order: 1; aspect-ratio: 4/3; overflow: hidden; }
.room-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.room-detail-body { order: 2; }
.room-detail--reverse .room-detail-media { order: 2; }
.room-detail--reverse .room-detail-body { order: 1; }
.room-detail-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 10px;
}
.room-detail-header h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.tier-price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--garnet);
  font-size: 1.4rem;
}
.tier-price small {
  font-size: 0.7rem;
  color: var(--steel);
  font-weight: 500;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
.room-detail-desc { color: var(--steel); font-size: 1.02rem; margin-top: 18px; }
.spec-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  margin: 26px 0 30px;
}
.spec-list li {
  font-size: 0.92rem;
  padding-left: 16px;
  position: relative;
}
.spec-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--garnet);
}
/* Fills the 2-column grid down each column instead of across each row, so
   items stay grouped the way they're written in the HTML (e.g. the
   restaurant's three meal times stay together in column one). */
.spec-list--fill-column {
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
}
/* Same idea, for 4-item lists — 2 rows per column instead of 3. */
.spec-list--fill-column-2 {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
}

/* --- Meeting room comparison (Amenities page) --------------------------- */
.meeting-rooms-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(28,29,32,0.12);
}
.meeting-room-item { padding-left: 24px; border-left: 1px solid rgba(28,29,32,0.15); }
.meeting-room-item:first-child { padding-left: 0; border-left: none; }
.meeting-room-item h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 10px 0 4px;
}
.meeting-room-item > p { color: var(--steel); font-size: 0.9rem; }
.meeting-room-item ul { margin-top: 16px; }
.meeting-room-item ul li {
  font-size: 0.88rem;
  color: var(--steel);
  padding-left: 14px;
  position: relative;
  margin-bottom: 8px;
}
.meeting-room-item ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: var(--garnet);
}

/* --- Secondary amenities (Amenities page) -------------------------------- */
/* Explicit white (rather than relying on :nth-child parity, which this
   section doesn't participate in) keeps the fog/white/fog/white/fog rhythm
   going after the three alternating .room-detail rows above it. */
.secondary-amenities { background: var(--white); }
.secondary-amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.secondary-amenity-media { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 24px; }
.secondary-amenity-media img { width: 100%; height: 100%; object-fit: cover; }
.secondary-amenity h3 { font-size: 1.2rem; margin: 10px 0 12px; }
.secondary-amenity > p { color: var(--steel); font-size: 0.95rem; }
.secondary-amenity .spec-list { grid-template-columns: 1fr; }

/* --- Testimonials ------------------------------------------------------ */
.testimonials { background: var(--ink); color: var(--white); }
.testimonials .section-head p { color: rgba(234,234,230,0.7); }
.testimonials .eyebrow { color: #c98a94; }
.testimonial-carousel {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}
.testimonial-viewport { overflow: hidden; flex: 1; min-width: 0; }
.testimonial-track {
  display: flex;
  transition: transform 0.45s ease;
}
.testimonial-card {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.testimonial-card .quote-mark {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--garnet);
  line-height: 1;
  font-weight: 800;
}
.testimonial-card .testimonial-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  margin: 0;
}
.testimonial-card p.quote { font-size: 0.98rem; color: var(--fog); margin-top: 8px; }
.testimonial-card .attribution {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(234,234,230,0.75);
  margin-top: 6px;
}
.testimonial-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.testimonial-arrow:hover { background: var(--garnet); border-color: var(--garnet); }
.testimonial-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}
.testimonial-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.testimonial-dot.active { background: var(--garnet); width: 24px; border-radius: 5px; }

/* --- Final CTA ----------------------------------------------------------- */
.final-cta {
  background: var(--fog);
  text-align: center;
}
.final-cta-inner {
  border-top: 1px solid rgba(28,29,32,0.15);
  border-bottom: 1px solid rgba(28,29,32,0.15);
  padding: 72px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.final-cta h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 14px; }
.final-cta p { color: var(--steel); margin-bottom: 32px; font-size: 1.02rem; }
.final-cta .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--fog);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-brand .logo { color: var(--white); margin-bottom: 14px; }
.footer-brand p { color: rgba(234,234,230,0.65); font-size: 0.92rem; max-width: 280px; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--garnet);
  margin-bottom: 18px;
}
.footer-col ul li { margin-bottom: 10px; font-size: 0.9rem; color: rgba(234,234,230,0.8); }
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(234,234,230,0.15);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(234,234,230,0.55);
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Flatpickr theme override ------------------------------------------- */
.flatpickr-calendar {
  font-family: var(--font-body);
  box-shadow: none;
  border: 1px solid var(--ink);
  border-radius: 0;
  /* Flatpickr sets z-index: 99999 as an inline style (so a plain class rule
     here can't win) which puts it above everything, including
     .site-header (z-index: 100) — so if its JS-computed position is ever
     wrong for an instant (see the reassert loop in main.js), it paints
     over the header instead of under it. !important is what actually beats
     that inline style; keeping this below the header's z-index makes "the
     header stays on top" a plain CSS guarantee that doesn't depend on that
     positioning math ever being correct. */
  z-index: 90 !important;
}
.flatpickr-months, .flatpickr-weekdays { background: var(--ink); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: var(--ink); }
span.flatpickr-weekday { background: var(--ink); color: var(--fog); font-family: var(--font-display); }
.flatpickr-prev-month, .flatpickr-next-month { color: var(--white) !important; fill: var(--white) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--garnet);
  border-color: var(--garnet);
}
.flatpickr-day.inRange {
  background: rgba(122,33,48,0.12);
  border-color: rgba(122,33,48,0.12);
  box-shadow: -5px 0 0 rgba(122,33,48,0.12), 5px 0 0 rgba(122,33,48,0.12);
}
.flatpickr-day:hover { background: rgba(122,33,48,0.18); }
.flatpickr-day.flatpickr-disabled { color: rgba(28,29,32,0.25); text-decoration: line-through; }
.flatpickr-day.today { border-color: var(--garnet); }

/* --- Booking engine (Book page) ------------------------------------------ */
/* Overrides the generic `section` top padding — stacked on top of
   .page-hero's own bottom padding it left a dead gap before the step
   indicator. Bottom padding is left at the section default (96px) so the
   reduced top gap reads as coherent with — roughly matching — the space
   already at the end of the section, rather than lopsided. */
.booking-engine { background: var(--white); padding-top: 40px; }
/* Explicit fog/white (rather than relying on section-default fog for both)
   so the enquiry form and the contact/map block below it read as two
   distinct sections instead of running together. */
.meeting-enquiry { background: var(--fog); }
/* .btn is inline-flex, so it sits at the form's left edge by default —
   switch to a block-level flex (still centers its own icon/text via the
   base .btn rules) so `margin: 0 auto` can center the button itself under
   the centered form. */
#enquiryForm button[type="submit"] { display: flex; margin: 8px auto 0; }
.contact-section { background: var(--white); }

/* Step indicator */
.booking-steps {
  display: flex;
  border-top: 1px solid rgba(28,29,32,0.15);
  border-bottom: 1px solid rgba(28,29,32,0.15);
  margin-bottom: 56px;
}
.booking-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  position: relative;
}
.booking-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(28,29,32,0.15);
}
.step-num {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--steel);
  color: var(--steel);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
}
.step-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--steel);
}
.booking-step.active .step-num { background: var(--garnet); border-color: var(--garnet); color: var(--white); }
.booking-step.active .step-label { color: var(--ink); }
.booking-step.done .step-num { background: var(--ink); border-color: var(--ink); color: var(--white); }
.booking-step.done .step-label { color: var(--ink); }

.booking-panel[hidden] { display: none; }
.booking-panel .search-bar { margin: 0 auto; }

/* Recap strip (Steps 2 & 3) */
.booking-recap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding: 18px 24px;
  background: var(--fog);
  border: 1px solid rgba(28,29,32,0.12);
  margin-bottom: 32px;
  font-size: 0.92rem;
}
.booking-recap strong { font-family: var(--font-display); }
/* Wraps one or two recap-edit links (Step 3 gets both "Edit Search" and
   "Change Rooms") so they group together at the right end of the strip
   instead of each needing its own auto-margin. */
.booking-recap .recap-edits {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.booking-recap .recap-edit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--garnet);
  border-bottom: 1px solid var(--garnet);
  padding-bottom: 2px;
}

/* Availability cards (Step 2) — extends .room-card / .rooms-grid */
.availability-grid .room-card { position: relative; background: var(--fog); }
.scarcity-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.scarcity-badge.low { background: var(--garnet); }
.room-card .capacity-line { font-size: 0.8rem; color: var(--steel); margin-top: -8px; }
.room-card .total-line { font-size: 0.8rem; color: var(--steel); margin-top: -6px; }
.room-card.highlighted { outline: 2px solid var(--garnet); outline-offset: 4px; }
.room-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.room-qty-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Capacity gate (Step 2) — blocks Step 3 until selected rooms cover every guest */
.capacity-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 22px 24px;
  background: var(--fog);
  border: 1px solid rgba(28,29,32,0.12);
}
.capacity-status {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--garnet);
}
.capacity-status.met { color: var(--ink); }
.capacity-status .capacity-check { margin-right: 4px; }

/* Generic form elements (booking details, enquiry, extras) */
.form-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 40px 0 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(28,29,32,0.12);
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-row--card { grid-template-columns: 2fr 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--steel);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  border: 1px solid rgba(28,29,32,0.25);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 13px 16px;
  height: 48px;
  width: 100%;
}
.form-field select { cursor: pointer; }
.form-field textarea { height: auto; min-height: 110px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--steel); }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--garnet); outline-offset: -2px; border-color: var(--garnet); }
.form-note { font-size: 0.85rem; color: var(--steel); margin: -8px 0 24px; }

/* Extras (Step 3) */
.extras-list { border-top: 1px solid rgba(28,29,32,0.12); margin-bottom: 8px; }
.extra-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(28,29,32,0.12);
  cursor: pointer;
}
.extra-item input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--garnet); cursor: pointer; }
.extra-item .extra-body { flex: 1; }
.extra-item .extra-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.extra-item .extra-desc { font-size: 0.85rem; color: var(--steel); margin-top: 2px; }
.extra-item .extra-price {
  flex: none;
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--garnet);
  white-space: nowrap;
  text-align: right;
}
.extra-item .extra-price.free { color: var(--steel); }

/* Details + live summary sidebar (Step 3) */
.booking-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; }
.booking-summary { background: var(--ink); color: var(--white); padding: 32px; position: sticky; top: 112px; }
.booking-summary h4 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c98a94;
  margin-bottom: 20px;
}
.booking-summary .summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 0.88rem;
  color: rgba(234,234,230,0.85);
}
.booking-summary .summary-row span:last-child { color: var(--white); text-align: right; }
.booking-summary .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 18px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
}

/* Confirmation modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28,29,32,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--white);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 48px 40px;
  position: relative;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--steel);
}
.modal-close:hover { color: var(--ink); }
.modal-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  border: 2px solid var(--garnet);
  color: var(--garnet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.modal-card h3 { font-size: 1.5rem; margin-bottom: 12px; }
.modal-card > p { color: var(--steel); margin-bottom: 28px; }
.modal-summary {
  text-align: left;
  border-top: 1px solid rgba(28,29,32,0.15);
  border-bottom: 1px solid rgba(28,29,32,0.15);
  padding: 16px 0;
  margin-bottom: 28px;
}
.modal-summary .summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 0.9rem; }
.modal-summary .summary-row strong { font-family: var(--font-display); }
.modal-summary .summary-total { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(28,29,32,0.12); }

/* Meeting room enquiry success state */
.form-success { display: none; padding: 28px 24px; background: var(--fog); border: 1px solid rgba(28,29,32,0.15); text-align: center; }
.form-success.visible { display: block; }
.form-success .modal-check { margin-bottom: 16px; }

/* Contact block + static map placeholder */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-facts { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.contact-fact-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--garnet); margin-bottom: 4px; }
.contact-fact-value { font-size: 1rem; }
.map-embed {
  aspect-ratio: 4 / 3;
  position: relative;
  border: 1px solid rgba(28,29,32,0.15);
  background: var(--fog);
  overflow: hidden;
}
.map-embed iframe { display: block; width: 100%; height: 100%; filter: grayscale(0.15) contrast(1.02); }
.map-embed-link {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 9px 14px;
  border: 1px solid rgba(28,29,32,0.15);
}
.map-embed-link:hover { background: var(--ink); color: var(--white); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .pitch-grid { grid-template-columns: 1fr; gap: 40px; }
  .amenities-grid { grid-template-columns: repeat(2, 1fr); }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .room-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Always image-first on mobile, regardless of the desktop alternating order. */
  .room-detail-media, .room-detail--reverse .room-detail-media { order: 1; }
  .room-detail-body, .room-detail--reverse .room-detail-body { order: 2; }
  .spec-list { grid-template-columns: 1fr; }
  .spec-list--fill-column,
  .spec-list--fill-column-2 { grid-auto-flow: row; grid-template-rows: none; }
  .meeting-rooms-compare { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; padding-top: 32px; }
  .meeting-room-item { padding-left: 0; border-left: none; padding-top: 24px; border-top: 1px solid rgba(28,29,32,0.15); }
  .meeting-room-item:first-child { padding-top: 0; border-top: none; }
  .secondary-amenities-grid { grid-template-columns: 1fr; gap: 40px; }
  .availability-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-layout { grid-template-columns: 1fr; gap: 40px; }
  .booking-summary { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--fog);
    border-bottom: 1px solid rgba(28,29,32,0.12);
    padding: 8px 32px 24px;
  }
  .nav-menu.open { display: block; }
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .nav-links a { display: block; padding: 12px 0; width: 100%; }
  .nav-menu-divider {
    display: block;
    height: 1px;
    background: rgba(28,29,32,0.15);
    margin: 12px 0 16px;
  }
  .nav-actions { width: 100%; gap: 14px; }
  .nav-actions .btn-primary { flex: 1; text-align: center; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header { position: sticky; }
  .nav { position: relative; }
  .lang-toggle button { padding: 6px 10px; }
  /* Vertically centered, and a bit shorter than the desktop/tablet 92vh —
     92vh of a phone viewport left a lot of empty sky above the headline
     before any real content. */
  .hero { min-height: 80vh; }
  .search-bar {
    flex-direction: column;
    height: auto;
    max-width: none;
    width: 100%;
  }
  .search-bar-divider { width: 100%; height: 1px; }
  .search-bar-field--dates,
  .search-bar-field--guests { flex: none; width: 100%; }
  .search-bar-field--dates input[type="text"],
  .guest-trigger { height: 56px; }
  .search-bar-submit { width: 100%; height: 56px; }
  /* Flip back to opening downward on mobile (desktop/tablet default is upward). */
  .guest-popover { top: calc(100% + 1px); bottom: auto; left: 0; right: 0; width: 100%; }
  .stepper-btn { width: 44px; height: 44px; }
  .amenities-grid { grid-template-columns: 1fr; }
  .rooms-grid { grid-template-columns: 1fr; }
  .testimonial-carousel { gap: 10px; }
  .testimonial-arrow { width: 36px; height: 36px; }
  .testimonial-card { padding: 26px 20px; }
  .stat-row { grid-template-columns: 1fr; gap: 18px; }
  .stat { border-left: none; padding-left: 0; border-top: 1px solid rgba(28,29,32,0.15); padding-top: 14px; }
  .stat:first-child { border-top: none; padding-top: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; }
  .hero-features { flex-direction: column; column-gap: 0; row-gap: 14px; }
  .room-detail { padding: 56px 0; }
  .booking-engine { padding-top: 24px; }
  .room-detail-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .booking-steps { flex-direction: column; }
  .booking-step { padding: 14px 4px; border-bottom: 1px solid rgba(28,29,32,0.12); }
  .booking-step:last-child { border-bottom: none; }
  .booking-step:not(:last-child)::after { display: none; }
  .booking-recap { padding: 16px; }
  .booking-recap .recap-edits { margin-left: 0; flex: 0 0 100%; justify-content: flex-end; }
  .availability-grid { grid-template-columns: 1fr; }
  .capacity-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .capacity-bar .btn { width: 100%; }
  .form-row,
  .form-row--card { grid-template-columns: 1fr; }
  .modal-card { padding: 36px 22px; }
  .modal-close { top: 10px; right: 10px; }
}