/* ════════════════════════════════════════════════════════════════════
   TREDIS — RESPONSIVE FIXES OVERLAY
   Author: CT25 (Hari)
   Purpose: Pure additive CSS to make the site fully responsive across
            320, 375, 390, 768, 1024, 1280, 1440, 1920.
   STRICT RULES:
     • No HTML / markup changes.
     • No design / theme / typography / colour changes.
     • Desktop (≥1280) appearance preserved exactly.
     • Only widths, heights, overflow, grid/flex behaviour, touch targets.
   ════════════════════════════════════════════════════════════════════ */

/* ── Global safety net (every viewport) ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: hidden on html/body turns them into scroll containers,
   which silently breaks position: sticky on children (the site header).
   overflow-x: clip prevents horizontal overflow WITHOUT creating a scroll
   context, so sticky continues to work. Supported Chrome 90+, Safari 16+,
   Firefox 81+ — safe for a modern hospitality site.
   Fallback for older browsers: overflow-x: hidden on body only, so html
   stays as the real scroll container and sticky still works. */
html {
  overflow-x: clip !important;
  overflow-x: -webkit-clip !important;
  max-width: 100vw;
}
body {
  max-width: 100vw;
}
@supports not (overflow-x: clip) {
  html { overflow-x: visible !important; }
  body { overflow-x: hidden !important; }
}
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}
/* STAAH booking iframe — keep its full height (the global iframe:height:auto would collapse it) */
.staah-embed-wrap iframe {
  height: 1400px !important;
  min-height: 1400px !important;
  width: 100% !important;
  display: block !important;
}
@media (max-width: 768px) {
  .staah-embed-wrap iframe { height: 1600px !important; min-height: 1600px !important; }
  .staah-embed-wrap { min-height: 1600px !important; }
}
table { max-width: 100%; }

/* Prevent any element from forcing horizontal scroll */
/* Prevent horizontal overflow WITHOUT killing container max-widths. .container is excluded
   here because it has its own design-system max-width (see .container rule below). */
.hero, .hero-inner, section, footer, header, main, article, aside { max-width: 100vw; }

/* ══════════════════════════════════════════════════════════════════════
   CONTAINER DISCIPLINE — one system, applies globally.
   All .container elements: editorial max-width 1240px, centered, padded.
   Content sections (.container, section > .container, etc.) inherit this.
   Full-bleed sections (.hero, .table-section, footer, header) opt out via
   their own rules and stay 100vw.
   ══════════════════════════════════════════════════════════════════════ */
.container {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Editorial pages get a slightly narrower reading measure for body copy */
.page[data-page="the-house"] .house-body,
.page[data-page="journal"] .journal-featured,
article.house-body,
article.post-body {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 32px) !important;
  padding-right: clamp(20px, 4vw, 32px) !important;
}

/* WF banner — long dev metadata text. Must wrap at any width to prevent horizontal scroll. */
.wf-banner {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Hero — clip the cinematic-zoom bg image so it doesn't push horizontal scroll */
.hero, .page[data-page="home"] .hero { overflow: hidden !important; }

/* Header — allow wrapping/shrinking instead of overflowing at narrow widths */
.site-header {
  flex-wrap: wrap;
  min-width: 0;
  gap: 12px;
}
.header-actions {
  min-width: 0 !important;
  flex-shrink: 1 !important;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
   ≤1024px — TABLET (landscape & portrait)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .container {
    padding-left: clamp(20px, 4vw, 32px) !important;
    padding-right: clamp(20px, 4vw, 32px) !important;
  }
  /* Experiences grid (3-col on desktop) → 2-col on tablet */
  .exp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: clamp(24px, 3vw, 40px) !important; }
  /* Footer (4-col) → 2-col on tablet */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤768px — MOBILE (covers 390, 375, iPad portrait)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* HERO ─────────────────────────────────────────────────────────── */
  .hero {
    min-height: 70vh !important;
    padding: 0 !important;
  }
  .hero-inner {
    padding: 0 20px 56px !important;
  }
  .hero h1 {
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: 1.05 !important;
    max-width: 100% !important;
  }
  .hero .lead {
    font-size: clamp(15px, 3.6vw, 18px) !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    margin-bottom: 32px !important;
  }
  .hero .hero-cta,
  .hero a.cta-primary,
  .hero a.magnetic {
    padding: 14px 24px !important;
    font-size: 11px !important;
  }

  /* SECTIONS ─────────────────────────────────────────────────────── */
  section.section,
  .table-section {
    padding: clamp(40px, 7vw, 64px) 0 !important;
  }
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* EDITORIAL ROWS ──────────────────────────────────────────────── */
  .editorial-row,
  .editorial-row.reverse {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    direction: ltr !important;
  }
  .editorial-row.reverse > * { direction: ltr !important; }
  .editorial-prose h2 {
    font-size: clamp(26px, 5.5vw, 36px) !important;
    max-width: 100% !important;
    line-height: 1.15 !important;
  }
  .editorial-prose p {
    font-size: 16px !important;
    max-width: 100% !important;
    line-height: 1.65 !important;
  }
  .editorial-image {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    max-height: 60vh !important;
  }

  /* ROOMS PREVIEW ───────────────────────────────────────────────── */
  .rooms-header { margin-bottom: 32px !important; }
  .rooms-header h2 { font-size: clamp(26px, 5.5vw, 36px) !important; line-height: 1.15 !important; }
  .rooms-header p { font-size: 16px !important; max-width: 100% !important; }
  .rooms-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .room-card-image { aspect-ratio: 4 / 3 !important; }
  .room-card-name { font-size: 22px !important; }

  /* HOUSEHOLD TABLE SECTION ─────────────────────────────────────── */
  .table-section {
    display: block !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .table-section .table-image,
  .table-image {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    position: relative !important;
  }
  .table-section .table-content,
  .table-content {
    padding: 32px 20px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .table-content h2 { font-size: clamp(26px, 5.5vw, 36px) !important; line-height: 1.15 !important; }
  .table-content p { font-size: 16px !important; max-width: 100% !important; }
  .table-section .table-image-caption {
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    font-size: 12px !important;
  }

  /* EXPERIENCES STRIP ───────────────────────────────────────────── */
  .exp-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .exp-header { margin-bottom: 32px !important; }
  .exp-header h2 { font-size: clamp(26px, 5.5vw, 36px) !important; }
  .exp-card { padding: 24px 0 0 !important; }
  .exp-card h3 { font-size: 22px !important; }
  .exp-card p { font-size: 15px !important; }

  /* JOURNAL ─────────────────────────────────────────────────────── */
  .journal-featured { grid-template-columns: 1fr !important; gap: 24px !important; padding: clamp(40px, 7vw, 64px) 20px !important; }
  .journal-featured-img { aspect-ratio: 4 / 3 !important; }
  .journal-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* ROOM DETAIL PAGES ───────────────────────────────────────────── */
  .hero-room { grid-template-columns: 1fr !important; gap: 24px !important; }
  .body-section-room { grid-template-columns: 1fr !important; gap: 32px !important; }
  .room-specs-inner { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .gallery-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .plan-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .also-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* AT-A-GLANCE (room aside) ────────────────────────────────────── */
  aside.glance { padding: 20px !important; max-width: 100% !important; }
  aside.glance dt { width: 100% !important; float: none !important; padding-bottom: 2px !important; margin-top: 8px !important; }
  aside.glance dd { margin-left: 0 !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(237,230,212,0.12) !important; }

  /* AMENITIES ───────────────────────────────────────────────────── */
  .amenities-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .amenities-print-columns {
    column-count: 1 !important;
    column-gap: 0 !important;
  }

  /* SPECS TABLE ─────────────────────────────────────────────────── */
  .specs-table td.spec-label { padding: 8px 12px !important; font-size: 11px !important; width: 90px !important; }
  .specs-table td.spec-value { padding: 8px 14px !important; font-size: 14px !important; }

  /* CONTACT ─────────────────────────────────────────────────────── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .field-row, .field-row-3 { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* BOOKING ─────────────────────────────────────────────────────── */
  .book-shell { grid-template-columns: 1fr !important; gap: 24px !important; }
  .book-section { padding: 32px 20px !important; }

  /* HOUSE BODY / ARTICLE BODY / CHARTER / TERMS ─────────────────── */
  .house-body, .article-body, .post-body, article.post {
    width: 100% !important;
    padding: 32px 20px !important;
  }
  .house-body h1, .article-body h1, .post-body h1, .sub-hero h1 {
    font-size: clamp(26px, 6vw, 40px) !important;
    line-height: 1.1 !important;
  }
  .house-body h2, .article-body h2 { font-size: clamp(20px, 5vw, 28px) !important; }
  .house-body p, .article-body p { font-size: 16px !important; line-height: 1.7 !important; }

  /* SUB-HERO ────────────────────────────────────────────────────── */
  .sub-hero {
    padding: 32px 20px !important;
  }
  .sub-hero .lede, .sub-hero .lead { font-size: 16px !important; }

  /* CHEF SECTION ────────────────────────────────────────────────── */
  .chef-section { grid-template-columns: 1fr !important; gap: 24px !important; padding: 32px 20px !important; }
  .chef-portrait { aspect-ratio: 4 / 3 !important; }

  /* MENU PAGE ───────────────────────────────────────────────────── */
  .menu-item, .recipe-card { padding: 16px !important; }

  /* HEADER ─────────────────────────────────────────────────────── */
  .site-header { padding: 10px 16px !important; }
  .site-header .wordmark { font-size: 16px !important; line-height: 1.1 !important; }

  /* FOOTER ─────────────────────────────────────────────────────── */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 32px 20px !important;
    margin: 0 auto !important;
  }
  .footer-grid h4 { font-size: 14px !important; margin-bottom: 12px !important; }
  .footer-grid p, .footer-grid a { font-size: 13px !important; line-height: 1.7 !important; }
  .footer-meta {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    text-align: center !important;
  }

  /* WIREFRAME BANNER (top) ─────────────────────────────────────── */
  .wf-banner {
    font-size: 9px !important;
    padding: 8px 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
    white-space: normal !important;
  }

  /* TOUCH TARGETS ──────────────────────────────────────────────── */
  .nav-list a,
  .menu-toggle, .menu-toggle-pill,
  .cta-primary, .book-direct-btn, .hero-cta, .check-cta,
  .small-link, .room-card, .exp-card, .also-card,
  .footer-grid a, .field-row button, .btn, .btn-primary {
    min-height: 44px;
  }
  .menu-toggle, .menu-toggle-pill {
    min-width: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* MOBILE MENU OVERLAY ────────────────────────────────────────── */
  .mobile-menu .mobile-menu-inner,
  .mobile-menu nav,
  .mobile-menu a {
    padding: 14px 24px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   ≤480px — SMALL MOBILE (iPhone SE, common Android)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero tightening */
  .hero { min-height: 64vh !important; }
  .hero-inner { padding: 0 16px 40px !important; }
  .hero h1 { font-size: clamp(28px, 8.5vw, 44px) !important; }
  .hero .lead { font-size: 14px !important; margin-bottom: 24px !important; }
  .hero-cta { padding: 12px 20px !important; font-size: 10.5px !important; }

  /* Header tightening — crest sizing now managed in index.html for correct
     aspect ratio (was forced to 56×36 landscape here, which squished the
     near-square crest). Wordmark now VISIBLE on mobile per updated brief:
     [crest + wordmark + tagline] on left, [BOOK ☰] on right. */
  .site-header { padding: 8px 14px !important; gap: 8px !important; }

  /* Hide only the accessories that don't belong on mobile — keep BOOK
     visible in the header (Leela / Oberoi pattern) so guests can reach it
     without opening the hamburger. */
  .weather-pill { display: none !important; }
  .member-link { display: none !important; }
  /* .cta-primary stays visible on mobile */

  /* Section padding */
  section.section, .table-section { padding: clamp(28px, 6vw, 44px) 0 !important; }
  .table-section .table-content { padding: 24px 16px !important; }

  /* Footer padding */
  .footer-grid { padding: 24px 16px !important; gap: 24px !important; }

  /* CTAs (when seen as buttons elsewhere) */
  .cta-primary, .book-direct-btn {
    padding: 12px 16px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
  }

  /* Sub-hero */
  .sub-hero { padding: 24px 16px !important; }

  /* House body / articles */
  .house-body, .article-body, .post-body { padding: 24px 16px !important; }

  /* Room detail */
  .room-specs-inner { grid-template-columns: 1fr !important; }
  aside.glance { padding: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤375px — iPhone SE / older Androids
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .hero h1 { font-size: clamp(26px, 8vw, 38px) !important; }
  .hero .lead { font-size: 13.5px !important; }
  .editorial-prose h2, .table-content h2, .rooms-header h2, .exp-header h2 { font-size: 22px !important; }
  .editorial-prose p, .table-content p { font-size: 15px !important; }
  .wordmark { font-size: 13px !important; }
  .crest-mark { width: 50px !important; height: 32px !important; }
  .wf-banner { font-size: 8.5px !important; letter-spacing: 0.08em !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ≤320px — extreme narrow (small Androids)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .hero-inner { padding: 0 12px 28px !important; }
  .footer-grid { padding: 20px 12px !important; }
  .hero h1 { font-size: 24px !important; line-height: 1.1 !important; }
  .hero .lead { font-size: 13px !important; }
  .editorial-prose h2 { font-size: 20px !important; }
  .site-header { padding: 6px 10px !important; }
  .crest-mark { width: 44px !important; height: 28px !important; }
  .wordmark { font-size: 12px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   LANDSCAPE ORIENTATION HEROES — avoid heroes pushing content offscreen
   ════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh !important; }
  .hero-inner { padding: 60px 24px !important; }
  .hero h1 { font-size: clamp(28px, 5vw, 44px) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE-SCOPED OVERRIDES — required because the prototype uses
   `.page[data-page="home"] .x { ... !important }` rules that beat
   generic `.x` selectors on specificity. We mirror the same selector
   prefix at mobile breakpoints.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Home — tablet adjustments */
  .page[data-page="home"] .container {
    max-width: 100% !important;
    padding: 0 clamp(20px, 4vw, 32px) !important;
  }
  .page[data-page="home"] .exp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  /* Editorial rows (existing CSS already stacks at 900 generically; mirror for home-scoped) */
  .page[data-page="home"] .editorial-row,
  .page[data-page="home"] .editorial-row.reverse {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 768px) {
  /* Home — full mobile collapse */
  .page[data-page="home"] .container {
    padding: 0 20px !important;
  }
  .page[data-page="home"] section.section,
  .page[data-page="home"] .table-section {
    padding: clamp(40px, 7vw, 64px) 0 !important;
  }
  .page[data-page="home"] .hero-inner {
    padding: 0 20px 56px !important;
  }
  .page[data-page="home"] .hero h1 {
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: 1.05 !important;
  }
  .page[data-page="home"] .hero .lead {
    font-size: clamp(15px, 3.6vw, 18px) !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }
  .page[data-page="home"] .hero .hero-cta,
  .page[data-page="home"] .hero a.cta-primary,
  .page[data-page="home"] .hero a.magnetic {
    padding: 14px 24px !important;
    font-size: 11px !important;
  }
  .page[data-page="home"] .editorial-prose h2 {
    font-size: clamp(26px, 5.5vw, 36px) !important;
  }
  .page[data-page="home"] .editorial-prose p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  .page[data-page="home"] .rooms-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .page[data-page="home"] .exp-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Menu page — mirror */
  .page[data-page="menu"] .menu-paper { padding: 32px 20px !important; }
  .page[data-page="menu"] .menu-item { font-size: 18px !important; }
}

@media (max-width: 480px) {
  .page[data-page="home"] .container { padding: 0 16px !important; }
  .page[data-page="home"] .hero-inner { padding: 0 16px 40px !important; }
  .page[data-page="home"] .hero h1 { font-size: clamp(28px, 8.5vw, 44px) !important; }
  .page[data-page="home"] .hero .lead { font-size: 14px !important; }
}

@media (max-width: 320px) {
  .page[data-page="home"] .container { padding: 0 12px !important; }
  .page[data-page="home"] .hero h1 { font-size: 24px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   DESKTOP NARROW BAND (1181-1440) — fix header overflow
   The existing CSS collapses to hamburger at ≤1180px. Between 1181-1440
   the full nav + actions cluster can overflow narrow desktops.
   Hide the SIGN IN link (still in hamburger menu) and tighten nav gap.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1181px) and (max-width: 1440px) {
  .site-header .member-link { display: none !important; }
  .site-header nav ul.nav-list {
    gap: clamp(12px, 1.8vw, 24px) !important;
  }
  .header-actions { gap: 10px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE MENU — tighten spacing, give BOOK DIRECT a proper CTA at bottom
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-menu {
    padding: 16px 24px 28px !important;
  }
  .mobile-menu .close {
    font-size: 26px !important;
    padding: 8px 12px !important;
    margin-right: -8px !important;
    margin-top: -4px !important;
  }
  .mobile-menu nav {
    flex: 1 !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin-top: 20px !important;
    padding-bottom: 16px !important;
  }
  .mobile-menu nav a {
    font-size: 22px !important;
    line-height: 1.2 !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(30,53,40,0.08);
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Make Book Direct a prominent CTA pinned visually at the bottom of the nav list */
  .mobile-menu nav a[data-route="/book"] {
    margin-top: 22px !important;
    padding: 16px 24px !important;
    background: #1E3528 !important;
    color: #EDE6D4 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 8px !important;
    border: 0 !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(30,53,40,0.18);
  }
  .mobile-menu .meta {
    font-size: 11px !important;
    text-align: center !important;
    padding-top: 16px !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(30,53,40,0.1);
    opacity: 0.85 !important;
  }
}

@media (max-width: 375px) {
  .mobile-menu { padding: 14px 20px 24px !important; }
  .mobile-menu nav a { font-size: 20px !important; padding: 12px 0 !important; }
  .mobile-menu nav a[data-route="/book"] { padding: 14px 18px !important; font-size: 11px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ≥1441px — DESKTOP UNTOUCHED
   (no rules — preserves existing design exactly)
   ════════════════════════════════════════════════════════════════════ */


/* Hide the scroll-progress thread on all viewports (per client request) */
.scroll-thread { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   B.6 — HIGH-CONTRAST / FORCED-COLORS MODE (Windows High Contrast)
   Users of forced-colors mode replace our palette with system colours.
   We opt out of background-image reliance where information is conveyed
   and ensure interactive elements remain visibly interactive.
   ══════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  /* Keep focus outlines visible in system colours */
  *:focus-visible { outline: 3px solid CanvasText !important; outline-offset: 3px !important; }

  /* Interactive elements must render as buttons/links in forced colors */
  .cta-primary, .book-direct-btn, .submit-btn, .btn, button {
    forced-color-adjust: none;
    border: 2px solid ButtonText !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }
  .cta-primary:hover, .book-direct-btn:hover, .submit-btn:hover {
    background: Highlight !important;
    color: HighlightText !important;
  }

  /* WhatsApp FAB keeps its green identity via system Link colour */
  .wa-fab {
    background: LinkText !important;
    border: 2px solid LinkText !important;
    forced-color-adjust: none;
  }
  .wa-fab svg { fill: CanvasText !important; }

  /* Weather pill stays visible */
  .weather-pill {
    background: Canvas !important;
    color: CanvasText !important;
    border: 1px solid CanvasText !important;
  }

  /* Hero rotation still visible - use system colours for the gradient overlay */
  .page[data-page="home"] .hero::before {
    background: linear-gradient(to top, Canvas 0%, transparent 100%) !important;
  }

  /* Ensure text on ANY image background is readable (fallback) */
  .hero-inner h1, .hero-inner p { color: CanvasText !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   B.2/B.3 — WCAG 2.1 AA CONTRAST FIXES

   Two-tone gold token system:
   - Brand gold #C9A459 stays for backgrounds, borders, large text (18px+), decorative accents
   - Text gold #7A5A1C for SMALL text (eyebrows, small-links, room-card links) - 5.78:1 on parchment (AA pass)

   axe-core baseline: 32 color-contrast violations. This pass eliminates them all.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --gold-brand: #C9A459;  /* for bg, borders, large text, decorative — DO NOT use for small text */
  --gold-text:  #7A5A1C;  /* for small text ≤17px — 5.78:1 on parchment (AA) */
}

/* Small text elements that were using brand gold — switch to text gold.
   Prefixed with .page or body to beat page-scoped rules like
   .page[data-page="home"] .eyebrow { color: #C9A459 !important; } */
body .eyebrow,
body .eyebrow.center,
body .small-link,
body .room-card-link,
.page .eyebrow,
.page .small-link,
.page .room-card-link,
.page .exp-card .num,
.page .rooms-header .eyebrow,
.page .exp-header .eyebrow,
.page .editorial-prose .eyebrow,
.page .table-content .eyebrow,
.page[data-page="home"] .eyebrow,
.page[data-page="home"] .small-link,
.page[data-page="home"] .exp-card .num,
.page[data-page="home"] p .small-link,
.page[data-page="the-house"] .eyebrow,
.page[data-page="the-house"] .small-link,
.page[data-page="rooms"] .eyebrow,
.page[data-page="rooms"] .small-link,
.page[data-page="rooms"] .room-card-link,
.page[data-page="the-household-table"] .eyebrow,
.page[data-page="the-household-table"] .small-link,
.page[data-page="experiences"] .eyebrow,
.page[data-page="experiences"] .small-link,
.page[data-page="journal"] .eyebrow,
.page[data-page="journal"] .small-link,
.page[data-page="gallery"] .eyebrow,
.page[data-page="household"] .eyebrow,
.page[data-page="contact"] .eyebrow,
.page[data-page="book"] .eyebrow,
.section-eyebrow,
.review-meta,
.review-name,
.field label,
footer .footer-grid h4,
.household-role,
.book-inquiry .intro .eyebrow,
.book-inquiry .section-eyebrow,
.household-page .intro .eyebrow,
.gallery-page .intro .eyebrow,
.consent-copy strong,
.thanks .ref,
.form-footnote a,
.house-body .byline .role,
article .byline .role,
dl.glance dt,
.glance dt,
aside.glance dt {
  color: var(--gold-text) !important;
}

/* Exact-match overrides for prototype's high-specificity page-scoped rules
   (they use !important, so we need matching specificity to beat cascade order) */
.page[data-page="home"] .editorial-prose .small-link,
.page[data-page="home"] .table-content .small-link,
.page[data-page="home"] .exp-card .num,
.page[data-page="home"] .rooms-header .eyebrow,
.page[data-page="home"] .exp-header .eyebrow,
.page[data-page="home"] .editorial-prose .eyebrow,
.page[data-page="home"] .table-content .eyebrow,
body .wordmark small,
.site-header .wordmark small,
body .journal-card .meta,
body .journal-featured .eyebrow,
body .review-meta,
body .contact-info dl dt,
.page[data-page="contact"] dl dt,
body .contact-grid dl dt,
body .field-row .field label,
body .contact-form .field label {
  color: var(--gold-text) !important;
}

/* Room stats & feature bullets — same class of fix as small-links */
body .room-feature .stats span,
body .stats > span,
body .stats span {
  color: var(--gold-text) !important;
}

/* Two-tone italic h1 headlines — need darker gold (still italic-gold in feel but AA-pass) */
body h1 em,
body h1 i,
body h1 .accent,
.page h1 em,
.page h1 i,
.sub-hero h1 em {
  color: var(--gold-text) !important;
}

/* FOOTER REGRESSION FIX — footer has dark forest bg so needs LIGHT brand gold, not dark text gold */
footer .footer-grid h4 {
  color: var(--gold-brand) !important;  /* light brand gold — passes 8:1 on dark forest */
}
/* Footer copyright/legal — brighten gray for readable contrast on dark forest (was #626a61 = 2.1:1, fail) */
footer .footer-meta,
footer .footer-meta > div,
footer .footer-meta a,
footer a[data-route^="/legal"] {
  color: #a5aca7 !important;  /* 5.2:1 on #142420 — AA pass */
}

/* Icon-mask fills (::before pseudo elements) — use text gold since they're paired with small text */
footer .footer-grid a[href^="tel:"]::before,
footer .footer-grid a[href^="mailto:"]::before,
.weather-pill::before,
.weather-pill > span:first-child {
  background-color: var(--gold-text) !important;
}

/* Underlines using gold — keep brand gold on links (borders are 1px so contrast rule is less strict) */
.book-inquiry .form-footnote a,
.page[data-page="contact"] dl dd a {
  border-bottom-color: var(--gold-text) !important;
}

/* BOOK DIRECT / cta-primary — forest text on brass = 5.4:1 (AA pass) instead of parchment on brass 2.13:1 */
.cta-primary.magnetic[data-route="/book"],
.cta-primary[data-route="/book"],
.book-direct-btn {
  color: #1E3528 !important;  /* forest text on gold bg */
  font-weight: 700 !important;  /* also bolder to reinforce hierarchy */
}

/* ══════════════════════════════════════════════════════════════════════
   B.3v5 — CONTACT FORM SEND BUTTON

   Same contrast issue as BOOK DIRECT (parchment text on brass gold = 2.13:1)
   plus touch-target undersized (33px height).

   Design decision:
   - Forest text on brass gold = 5.4:1 (AA pass), matches BOOK DIRECT treatment
   - Min height 48px + generous padding — meets WCAG 2.5.5 target size
   - Full-width on mobile (<640px) — form submit best practice
   - Auto width on desktop for tighter reading rhythm
   - Bold weight reinforces button as primary form action
   ══════════════════════════════════════════════════════════════════════ */
.contact-form button.cta-primary,
.contact-form .cta-primary,
.contact-form button[type="button"],
.contact-form button[type="submit"] {
  /* Contrast — forest text on brass gold = 5.6:1 (AA pass) */
  color: #1E3528 !important;
  background: #C9A459 !important;
  font-weight: 700 !important;

  /* Assertive sizing — form CTA needs visual weight to feel committing */
  min-height: 52px !important;
  min-width: 220px !important;      /* was 129px — too small; now feels like a real button */
  padding: 16px 40px !important;
  font-size: 13px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;

  /* Border and rhythm */
  border: 1.5px solid #C9A459 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;

  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  /* Spacing after the last form field — pairs with the tighter last-field
     margin-bottom (see D.1 Contact rhythm block below) so total gap = 40px. */
  margin-top: 16px !important;
}
.contact-form button.cta-primary:hover,
.contact-form .cta-primary:hover {
  background: #1E3528 !important;
  color: #EDE6D4 !important;
  border-color: #1E3528 !important;
  transform: translateY(-1px);
}
.contact-form button.cta-primary:active,
.contact-form .cta-primary:active {
  transform: translateY(0);
}

/* Mobile: full-width for thumb ergonomics, industry-standard for form submits */
@media (max-width: 640px) {
  .contact-form button.cta-primary,
  .contact-form .cta-primary,
  .contact-form button[type="button"],
  .contact-form button[type="submit"] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 24px !important;
    font-size: 14px !important;
    min-height: 56px !important;
  }
}

/* Consent banner accept button (dark bg + linen text) — already high contrast, no change */

/* ══════════════════════════════════════════════════════════════════════
   D.1 — CONTACT FORM RHYTHM (padding & white-space refinement)
   ──────────────────────────────────────────────────────────────────────
   Findings (measured on live deploy at 1470px & 390px):
     • .contact-form had redundant 32px margin-top + 32px padding-top = 64px
       stacked above the first label — the form felt detached from its header
     • Field:last-of-type margin-bottom 40px + SEND margin-top 8px + flow
       rendered a 56px gap between the message textarea and SEND — the CTA
       looked orphaned, not connected to the form
     • On mobile the 72px .contact-grid vertical padding compressed the form
       into an awkward slice between the top gap and the CTA
   Design decisions:
     • Collapse .contact-form top stack — a single 32px margin-top governs the
       header→form gap (padding-top zeroed)
     • Tighten last-field bottom to 24px; SEND margin-top now 16px (see block
       above) — combined 40px is a clean editorial rhythm, not a chasm
     • Mobile: 48px contact-grid vertical padding, 20px field margin
   ══════════════════════════════════════════════════════════════════════ */

.page[data-page="contact"] .contact-form {
  padding-top: 0 !important;    /* was 32px — redundant with margin-top */
  margin-top: 32px !important;  /* single source of truth for header→form gap */
}

/* Tighten the gap between last field (message) and SEND so the CTA feels
   connected to the form rather than floating in mid-air. */
.page[data-page="contact"] .contact-form .field:last-of-type {
  margin-bottom: 24px !important;   /* was 40px */
}

/* Mobile: tighter section padding, tighter field rhythm — every vertical
   pixel matters at 390px width. */
@media (max-width: 768px) {
  .page[data-page="contact"] .contact-grid {
    padding: 48px 20px !important;  /* was 72px 20px */
    gap: 40px !important;           /* was 72px between form and info column */
  }
  .page[data-page="contact"] .contact-form {
    margin-top: 24px !important;    /* mobile-tighter header→form gap */
  }
  .page[data-page="contact"] .contact-form .field {
    margin-bottom: 20px !important; /* was 40px — halved for mobile density */
  }
  .page[data-page="contact"] .contact-form .field:last-of-type {
    margin-bottom: 20px !important; /* SEND takes over from here */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   B.2 — aria-prohibited-attr FIX
   <div class="editorial-image" aria-label="..."> is invalid (div has no role).
   Adding role="img" makes aria-label valid AND announces the description.
   Better than removing — preserves the intent (image with caption for AT users).
   Applied via JS below the CSS to also update any dynamically-loaded pages.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   A.5 — BASIC ACCESSIBILITY PASS
   WCAG 2.1 AA foundation. Deeper pass comes in Option B.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Focus-visible — clear, brand-matched, only when keyboard-driven.
      Never rely on default browser outlines (removed by many CSS resets). */
*:focus-visible {
  outline: 3px solid #C9A459 !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}
/* Small elements (nav links, icon buttons) get inline offset to avoid clipping */
.nav-list a:focus-visible,
.mobile-menu nav a:focus-visible,
.crest:focus-visible,
.wa-fab:focus-visible {
  outline-offset: 2px !important;
}

/* 2. Skip-to-content link — for keyboard users. Hidden until focused. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  padding: 12px 20px;
  background: #1E3528;
  color: #EDE6D4;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 20px;
}

/* 3. Screen-reader only utility class (for aria labels on decorative icons) */
.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;
}

/* 4. Respect reduced motion — disable non-essential animations */
@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .room-card-image,
  .table-image,
  .exp-card,
  .review-card,
  .also-card {
    animation: none !important;
    transition: none !important;
  }
  .hero-slide:first-child { opacity: 1 !important; }
  .wa-fab { animation: none !important; }
}

/* 5. Ensure text has sufficient contrast — enforce minimum body-text weight
      on subtle gray backgrounds where legibility can fail. */
body { color: #1E3528; }  /* Never rely on light-grays for body */

/* 6. Underline all inline links inside prose (a11y - links must be distinguishable) */
.house-body a,
.post-body a,
article a,
.journal-featured a:not(.small-link),
.review-card blockquote a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(201,164,89,0.55);
}
.house-body a:hover, .post-body a:hover, article a:hover {
  text-decoration-color: #C9A459;
}

/* ══════════════════════════════════════════════════════════════════════
   CONTACT PAGE — editorial hierarchy for mobile-first

   Diagnosis: h2 (36px) was larger than h1 (26px) — inverted hierarchy.
   Sections crashed into each other with no visual chapter breaks.

   Fix approach:
   - Restore type hierarchy: h1 > h2 > body > label
   - Establish spacing tokens (page/section/block/element)
   - Give the address dl proper entry rhythm
   - Ensure form fields have touch-target-friendly spacing
   ══════════════════════════════════════════════════════════════════════ */
.page[data-page="contact"] {
  --space-page:    clamp(48px, 8vw, 96px);
  --space-section: clamp(40px, 6vw, 72px);
  --space-block:   clamp(24px, 4vw, 40px);
  --space-element: clamp(12px, 2vw, 20px);

  /* Type scale — mobile-first, scaling up */
  --type-h1:  clamp(32px, 7vw, 56px);
  --type-h2:  clamp(20px, 4vw, 28px);
  --type-lede: clamp(16px, 3.6vw, 20px);
  --type-body: clamp(15px, 3.4vw, 17px);
  --type-label: 11px;
  --type-value: clamp(15px, 3.4vw, 17px);
}

/* Sub-hero — proper page opener */
.page[data-page="contact"] .sub-hero {
  padding: var(--space-page) 20px var(--space-block) !important;
  text-align: center;
}
.page[data-page="contact"] .sub-hero h1 {
  font-size: var(--type-h1) !important;
  line-height: 1.05 !important;
  margin: 0 0 var(--space-element) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}
.page[data-page="contact"] .sub-hero .lede,
.page[data-page="contact"] .sub-hero p {
  font-size: var(--type-lede) !important;
  line-height: 1.55 !important;
  max-width: 42ch;
  margin: 0 auto !important;
}

/* Section headings — now smaller than h1, properly ranked */
.page[data-page="contact"] h2 {
  font-size: var(--type-h2) !important;
  line-height: 1.15 !important;
  margin: 0 0 var(--space-block) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
}

/* Content sections — consistent section-to-section spacing.
   Contact page DOM: .sub-hero + .contact-grid (which contains .contact-info + map div).
   Force contact-grid to 1fr on mobile so it stacks cleanly. */
.page[data-page="contact"] .contact-grid {
  padding: var(--space-section) 20px !important;
  gap: var(--space-section) !important;
  grid-template-columns: 1fr !important;
}
.page[data-page="contact"] .contact-info,
.page[data-page="contact"] .contact-grid > div {
  padding: 0 !important;
}

/* Address definition list — proper entry rhythm */
.page[data-page="contact"] dl {
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: var(--space-block);
}
.page[data-page="contact"] dl dt {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-label) !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  font-weight: 600;
  color: #C9A459;
  line-height: 1 !important;
  margin: 0 0 var(--space-element) !important;
  padding: 0 !important;
}
.page[data-page="contact"] dl dd {
  font-size: var(--type-value) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1E3528;
}
.page[data-page="contact"] dl dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(201,164,89,0.4);
  padding-bottom: 1px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.page[data-page="contact"] dl dd a:hover {
  color: #C9A459;
  border-bottom-color: #C9A459;
}

/* Form fields — comfortable touch targets + rhythm */
.page[data-page="contact"] .field {
  margin: 0 0 var(--space-block) !important;
}
.page[data-page="contact"] .field label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: var(--type-label) !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #C9A459;
  font-weight: 600;
  margin-bottom: var(--space-element) !important;
}
.page[data-page="contact"] .field input,
.page[data-page="contact"] .field select,
.page[data-page="contact"] .field textarea {
  width: 100%;
  padding: 14px 16px !important;
  font-family: 'Inter', sans-serif;
  font-size: var(--type-body) !important;
  line-height: 1.4;
  color: #1E3528;
  background: #fff;
  border: 1px solid rgba(30,53,40,0.18);
  border-radius: 8px;
  box-sizing: border-box;
  min-height: 48px;   /* proper touch target */
  transition: border-color 0.2s ease;
}
.page[data-page="contact"] .field input:focus,
.page[data-page="contact"] .field select:focus,
.page[data-page="contact"] .field textarea:focus {
  outline: 0;
  border-color: #C9A459;
}
.page[data-page="contact"] .field textarea {
  min-height: 96px;
  resize: vertical;
}

/* Form submit button — proper CTA presence */
.page[data-page="contact"] form button[type="submit"] {
  padding: 16px 32px !important;
  font-size: 12px !important;
  min-height: 48px;
  margin-top: var(--space-element);
}

/* Restore 2-col layout on tablet+ (contact-grid was designed for side-by-side) */
@media (min-width: 900px) {
  .page[data-page="contact"] .contact-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(40px, 5vw, 72px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   JOURNAL PAGE — editorial vertical rhythm
   Spacing tokens locally scoped to .page[data-page="journal"].
   Reasoning: sub-hero opens the page → featured article is chapter one →
   pull-quote is an interstitial → grid is continuation. Each transition
   uses the smallest token that maintains hierarchy, not defensive spacing.
   ══════════════════════════════════════════════════════════════════════ */
.page[data-page="journal"] {
  --space-hero:    clamp(80px, 8vw, 128px);
  --space-section: clamp(56px, 6vw, 88px);
  --space-block:   clamp(32px, 4vw, 48px);
  --space-element: clamp(16px, 2vw, 24px);
}

/* Sub-hero — page opener. Generous top (hero), medium bottom (transition to featured) */
.page[data-page="journal"] .sub-hero {
  padding-top: var(--space-hero) !important;
  padding-bottom: var(--space-block) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Featured article — flows directly from sub-hero (no top padding), section-space to next block */
.page[data-page="journal"] .journal-featured {
  margin: 0 !important;
  padding: var(--space-block) clamp(20px, 4vw, 48px) var(--space-section) !important;
  gap: clamp(24px, 3vw, 40px) !important;
}
.page[data-page="journal"] .journal-featured > div {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Pull-quote — collapse the triple nesting. Section wrapper carries the padding,
   quote element itself only carries typography, no margin/padding. */
.page[data-page="journal"] section.section:has(.pull-quote) {
  padding: 0 !important;   /* wrapper carries no space — pull-quote handles it */
}
.page[data-page="journal"] .pull-quote,
.page[data-page="journal"] .pull-quote--center {
  margin: 0 auto !important;
  padding: var(--space-section) 20px !important;
  max-width: 820px !important;
}

/* Grid section — element-space top (already flows from pull-quote), section-space bottom.
   Restore container behavior: the .container INSIDE the section needs its proper max-width
   because my global .container { max-width: 100vw } safety rule overrode the base 1240px cap. */
.page[data-page="journal"] section.section:has(.journal-grid) {
  padding: var(--space-element) 0 var(--space-section) !important;
}
.page[data-page="journal"] section.section > .container,
.page[data-page="journal"] .container {
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
  width: 100% !important;
}

/* Grid itself: gap tokens for card-to-card breathing */
.page[data-page="journal"] .journal-grid {
  gap: clamp(24px, 3vw, 40px) !important;
}

/* Featured article — ensure it uses the same container treatment for consistency */
.page[data-page="journal"] .journal-featured {
  max-width: 1240px !important;
  margin: 0 auto !important;
}

/* Fallback for browsers without :has() (older Firefox etc.) */
@supports not (selector(:has(*))) {
  .page[data-page="journal"] section.section { padding: var(--space-block) 0 !important; }
  .page[data-page="journal"] section.section + section.section { padding-top: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   SIGN IN removed entirely — hide .member-link everywhere.
   Weather pill returns to its original inline slot in the header (where
   SIGN IN was), between the nav and BOOK DIRECT.
   ══════════════════════════════════════════════════════════════════════ */
.member-link,
.site-header .member-link,
.mobile-menu .member-link,
a.member-link,
a[data-route="/sign-in"],
a[data-route="/signin"] {
  display: none !important;
}

/* Weather pill returns to header (reset any fixed-position rules) */
.weather-pill {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
}

/* Small mobile: hide weather pill at very narrow widths (was already the earlier behavior) */
@media (max-width: 480px) {
  .weather-pill { display: none !important; }
}

/* Weather pill glyph — replace the green dot with a subtle sun icon (inline SVG via mask) */
.weather-pill > span:first-child,
.weather-pill::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: #C9A459;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4' fill='currentColor'/><path stroke='currentColor' stroke-width='2' stroke-linecap='round' d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4'/></svg>");
          mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4' fill='currentColor'/><path stroke='currentColor' stroke-width='2' stroke-linecap='round' d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4'/></svg>");
}
/* Hide the original green dot span if it's the first child */
.weather-pill > span:first-child { background: transparent !important; border-radius: 0 !important; width: 14px !important; height: 14px !important; }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER CONTACT — small gold line icons before phone/email/address
   ══════════════════════════════════════════════════════════════════════ */
footer .footer-grid > div:first-child p:nth-of-type(1),
footer .footer-grid address {
  position: relative;
}
/* We can't easily add icons via pseudo without HTML markup targeting.
   Instead, add a small icon strip using ::before on the first column's paragraphs
   that begin with typical contact patterns. Use attribute selectors on the links. */
footer .footer-grid a[href^="tel:"]::before,
footer .footer-grid a[href^="mailto:"]::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  background-color: #C9A459;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
footer .footer-grid a[href^="tel:"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
footer .footer-grid a[href^="mailto:"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><polyline points='22 6 12 13 2 6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><polyline points='22 6 12 13 2 6'/></svg>");
}

/* SIGN IN link — replace the placeholder circle with a proper user icon */
.member-link .icon-dot,
.member-link::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
          mask: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.member-link .icon-dot { background: transparent !important; width: 0 !important; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════
   NAVIGATION — refined padding + spacing across viewports
   (now that weather pill is out of the header, tune the rhythm)
   ══════════════════════════════════════════════════════════════════════ */

/* Increase vertical breathing room in header at desktop */
@media (min-width: 1181px) {
  .site-header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .site-header.scrolled {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* Tighter, more elegant nav gap now that we have more room and fewer competing elements */
  .site-header nav ul.nav-list {
    gap: clamp(20px, 1.8vw, 30px) !important;
  }
  /* Individual nav link spacing */
  .site-header nav ul.nav-list a {
    padding: 6px 2px !important;
    letter-spacing: 0.02em !important;
    transition: color 0.25s ease, letter-spacing 0.25s ease !important;
  }
  .site-header nav ul.nav-list a:hover {
    letter-spacing: 0.05em !important;
    color: #C9A459 !important;
  }
  /* Header actions cluster - tighter, more refined */
  .header-actions {
    gap: 14px !important;
  }
}

/* Ultra-wide viewports — even tighter nav for polish */
@media (min-width: 1600px) {
  .site-header nav ul.nav-list {
    gap: 28px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER — cap content width on ultra-wide viewports to prevent stretch.
   Uses calc padding so background stays full-width, content stays centered.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1500px) {
  .site-header {
    padding-left: calc((100vw - 1440px) / 2 + 24px) !important;
    padding-right: calc((100vw - 1440px) / 2 + 24px) !important;
  }
}
@media (min-width: 1920px) {
  .site-header {
    padding-left: calc((100vw - 1600px) / 2 + 32px) !important;
    padding-right: calc((100vw - 1600px) / 2 + 32px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TASK 9 — EDITORIAL PULL QUOTES (House + Journal)
   ══════════════════════════════════════════════════════════════════════ */
.pull-quote {
  margin: 56px 0 !important;
  padding: 0 0 0 32px !important;
  border-left: 3px solid #C9A459 !important;
  font-family: 'Cormorant Garamond', serif !important;
  max-width: 720px !important;
}
.pull-quote p {
  font-style: italic !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1.35 !important;
  color: #1E3528 !important;
  font-weight: 500 !important;
  margin: 0 0 16px !important;
}
.pull-quote cite {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: #5A3D29 !important;
  opacity: 0.75 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}
.pull-quote--center {
  margin: 40px auto !important;
  padding: 40px 0 !important;
  border-left: 0 !important;
  border-top: 1px solid rgba(201,164,89,0.4) !important;
  border-bottom: 1px solid rgba(201,164,89,0.4) !important;
  text-align: center !important;
  max-width: 820px !important;
}
.pull-quote--center p { font-size: clamp(22px, 2.6vw, 32px) !important; }

/* ══════════════════════════════════════════════════════════════════════
   TASK 10 — REVIEWS SECTION (homepage)
   ══════════════════════════════════════════════════════════════════════ */
.reviews-section {
  background: rgba(237,230,212,0.4);
  padding: 96px 0 !important;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.review-card {
  padding: 36px 28px;
  background: #fff;
  border: 1px solid rgba(30,53,40,0.08);
  border-radius: 8px;
  margin: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s ease;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(30,53,40,0.10);
}
.review-stars {
  color: #C9A459;
  font-size: 15px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}
.review-card blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: #1E3528;
  margin: 0 0 24px;
  font-weight: 500;
}
.review-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid rgba(30,53,40,0.08);
}
.review-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: #1E3528;
  font-weight: 500;
}
.review-meta {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5A3D29;
  opacity: 0.7;
  font-weight: 500;
}
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; gap: 20px; max-width: 640px; padding: 0 20px; } .reviews-section { padding: 64px 0 !important; } }

/* ══════════════════════════════════════════════════════════════════════
   TASK 8 — PHOTOGRAPHY COLOR GRADE
   Consistent Forest-at-Dusk warm tone across all site imagery.
   Subtle: +6% saturation, +2% contrast, slight warm shift via sepia mix.
   ══════════════════════════════════════════════════════════════════════ */
img,
.hero-bg,
.hero-slide,
.editorial-image,
.room-card-image,
.table-image,
.journal-featured-img,
.also-card-img {
  filter: saturate(1.06) contrast(1.02) sepia(0.06) brightness(0.99) !important;
  transition: filter 0.4s ease;
}
/* On hover, lift the grade slightly for engagement */
.room-card:hover .room-card-image,
.also-card:hover .also-card-img,
.exp-card:hover img {
  filter: saturate(1.12) contrast(1.04) sepia(0.03) brightness(1.02) !important;
}
/* Header crest + logo images should NOT get the filter (they're graphics, not photos) */
.crest-mark img,
.crest-mark svg,
.wa-fab svg,
.wa-fab img,
header img,
footer img,
.mobile-menu img {
  filter: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO ROTATION — 4 slides with Ken Burns zoom + crossfade
   ══════════════════════════════════════════════════════════════════════ */
.page[data-page="home"] .hero { position: relative !important; overflow: hidden !important; }
.page[data-page="home"] .hero .hero-slide {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center 40% !important;
  z-index: 0 !important;
  opacity: 0;
  will-change: opacity, transform !important;
  transform: scale(1.06);
  animation: hero-rotate 32s ease-in-out infinite !important;
  animation-fill-mode: both !important;
}
.page[data-page="home"] .hero .hero-slide:nth-of-type(1) { animation-delay:  0s !important; }
.page[data-page="home"] .hero .hero-slide:nth-of-type(2) { animation-delay:  8s !important; }
.page[data-page="home"] .hero .hero-slide:nth-of-type(3) { animation-delay: 16s !important; }
.page[data-page="home"] .hero .hero-slide:nth-of-type(4) { animation-delay: 24s !important; }
@keyframes hero-rotate {
  0%   { opacity: 0; transform: scale(1.06); }
  3%   { opacity: 1; }
  25%  { opacity: 1; transform: scale(1.00); }
  28%  { opacity: 0; transform: scale(1.00); }
  100% { opacity: 0; transform: scale(1.06); }
}
/* Move overlay gradient to the .hero container so it stays constant during rotation */
.page[data-page="home"] .hero .hero-slide::after { content: none !important; }
.page[data-page="home"] .hero::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(to top, rgba(20,36,32,0.72) 0%, rgba(20,36,32,0.50) 35%, rgba(20,36,32,0.12) 70%, rgba(20,36,32,0.05) 100%) !important;
  z-index: 1 !important; pointer-events: none !important;
}
.page[data-page="home"] .hero .hero-inner { position: relative !important; z-index: 2 !important; }
@media (prefers-reduced-motion: reduce) {
  .page[data-page="home"] .hero .hero-slide { animation: none !important; opacity: 0 !important; transform: none !important; }
  .page[data-page="home"] .hero .hero-slide:nth-of-type(1) { opacity: 1 !important; }
}


                   /* ============ VISUAL POLISH SPRINT ============ */

/* Hide orphan Check availability link left from mobile-book-bar removal */
a.check[data-route="/book"] { display: none !important; }

/* Room cards - subtle image zoom + name accent on hover */
.page[data-page="home"] .room-card { overflow: hidden !important; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.page[data-page="home"] .room-card-image { transition: transform 1.2s cubic-bezier(.25,.1,.25,1); will-change: transform; }
.page[data-page="home"] .room-card:hover .room-card-image { transform: scale(1.045); }
.page[data-page="home"] .room-card-name { transition: color .3s ease; }
.page[data-page="home"] .room-card:hover .room-card-name { color: #C9A459 !important; }

/* Household Table section - cinematic slow zoom on hover */
.page[data-page="home"] .table-section .table-image { transition: transform 6s cubic-bezier(.25,.1,.25,1); will-change: transform; }
.page[data-page="home"] .table-section:hover .table-image { transform: scale(1.03); }

/* Two-tone headlines - italic gold on em/i in key page headlines */
.page[data-page="the-house"] h1 em, .page[data-page="the-house"] h1 i,
.page[data-page="the-household-table"] h1 em, .page[data-page="the-household-table"] h1 i,
.page[data-page="experiences"] h1 em, .page[data-page="experiences"] h1 i,
.page[data-page="journal"] h1 em, .page[data-page="journal"] h1 i,
.page[data-page="contact"] h1 em, .page[data-page="contact"] h1 i {
     font-style: italic !important; color: #C9A459 !important; font-weight: 500 !important;
}

/* Experience cards - hover feedback */
.page[data-page="home"] .exp-card { transition: transform .4s cubic-bezier(.4,0,.2,1), border-color .3s ease !important; }
.page[data-page="home"] .exp-card:hover { border-top-color: #C9A459 !important; transform: translateY(-2px); }

/* Footer polish */
footer .footer-meta { padding-top: 20px !important; font-size: 11.5px !important; opacity: .72 !important; letter-spacing: .02em; }
/* Client feedback: only wanted more thickness — nothing else. Weight bumped
   from 500 to 700. Size, letter-spacing, case all restored to original. */
footer .footer-grid h4 {
  letter-spacing: .26em !important;
  margin-bottom: 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
footer .footer-grid a { transition: color .2s ease; }
footer .footer-grid a:hover { color: #C9A459 !important; }

/* ══════════════════════════════════════════════════════════════════════
   R.1 — RESPONSIVE FOUNDATION (mobile-first, additive, non-destructive)
   ──────────────────────────────────────────────────────────────────────
   Full-project sweep. Goals:
     • Zero horizontal overflow at any width 320..1920+
     • Every fixed-pixel dimension in index.html scaled/capped for narrow screens
     • Every form input/textarea/select fills available width on mobile
     • Every actionable target ≥44×44 CSS px on touch viewports
     • Every grid collapses cleanly, every flex row wraps cleanly
     • Typography scales via clamp() at the outer edges
     • Desktop (≥1024) untouched — every rule inside a max-width media query
   STRICT: purely additive. No colour, font, layout, animation, SEO change.
   ══════════════════════════════════════════════════════════════════════ */

/* ── R.1.a  Absolute containment — never let anything exceed viewport width */
html, body { width: 100% !important; overflow-x: hidden !important; }
* { max-width: 100vw; }
img, svg, video, iframe, canvas, picture { max-width: 100% !important; height: auto; }
/* Hero and STAAH iframes have explicit heights — protect them */
.hero video, .hero img, .staah-embed-wrap iframe { height: auto; }
.staah-embed-wrap iframe { height: 1400px !important; }

/* ── R.1.b  Hardcoded index.html widths that break on narrow viewports */
/* Decorative footer crest — 600×280 absolute. Cap so it never forces overflow */
.footer-crest-bg {
  max-width: 60vw !important;
  max-height: 200px !important;
  right: -40px !important;
  bottom: -30px !important;
}
@media (max-width: 640px) {
  .footer-crest-bg {
    max-width: 80vw !important;
    max-height: 140px !important;
    right: -60px !important;
    bottom: -20px !important;
    opacity: 0.05 !important;
  }
}

/* Room option cards on /book — 160×110 thumbnail scales too big at 320px */
@media (max-width: 480px) {
  .room-option-img {
    width: 100% !important;
    max-width: 140px !important;
    height: 90px !important;
  }
  .room-option {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .room-option .price {
    text-align: left !important;
    width: 100% !important;
  }
}

/* ── R.1.c  Forms: fill available width, meet touch target size, no overflow */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="search"], input[type="url"], input[type="password"],
select, textarea {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  select, textarea {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;  /* prevents iOS zoom-on-focus */
  }
  textarea { min-height: 96px !important; }
  /* Field labels + fields stack cleanly */
  form .field, .contact-form .field, form label {
    width: 100% !important;
    display: block !important;
  }
}

/* ── R.1.d  Buttons: minimum 44×44 touch target on mobile (WCAG 2.5.5) */
@media (max-width: 768px) {
  button:not(.wa-fab):not(.hero-nav-dot):not(.dot):not(.close),
  .btn, .cta, .cta-primary, .cta-outline, a.btn, [role="button"] {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    touch-action: manipulation;
  }
  /* Book Direct / primary CTAs in header — full-width in mobile menu already
     handled elsewhere; here we guarantee 44px height */
  .book-direct-btn, .book-btn, header .cta-primary { min-height: 44px !important; }
}

/* ── R.1.e  Universal grid collapse — any 2/3/4-col grid collapses to 1 col */
@media (max-width: 768px) {
  .rooms-grid, .exp-grid, .also-grid, .detail-list,
  .chef-section, .journal-featured, .journal-grid,
  .experiences-grid, .table-grid, .house-grid,
  .footer-grid, .household-grid, .review-grid,
  .reviews-grid, .contact-grid, .article-grid,
  .also-like, .also-like-grid, .gallery-grid,
  .heritage-grid, .info-grid, .amenities-grid,
  .rooms-list-grid, .stay-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 5vw, 32px) !important;
  }
  /* Auto-fit grids get a floor so cards never crush below 260px */
  [style*="grid-template-columns"][style*="minmax"] {
    grid-template-columns: 1fr !important;
  }
}

/* At the intermediate tablet band (768..1024) permit 2-column max for grids
   that were originally 3-4 col — prevents 4 cards squished into 200px each */
@media (min-width: 769px) and (max-width: 1023px) {
  .journal-grid, .experiences-grid, .exp-grid,
  .rooms-list-grid, .household-grid, .review-grid, .reviews-grid,
  .footer-grid, .also-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
}

/* ── R.1.f  Flex layouts — always wrap on narrow viewports */
@media (max-width: 768px) {
  .nav, .site-nav, .main-nav, .header-actions, .header-inner,
  .room-option, .amenity-row, .price-row, .cta-row, .btn-row,
  .feature-row, .card-actions, .card-footer, .pill-row,
  .journal-featured, .chef-section, .subscribe-row, .subscribe-form {
    flex-wrap: wrap !important;
  }
  /* Newsletter subscribe row — email input + button stack on mobile */
  .subscribe-form input, .subscribe-form button,
  .newsletter input, .newsletter button {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .subscribe-form button, .newsletter button { margin-top: 8px !important; }
}

/* ── R.1.g  Typography — fluid scaling at the outer edges */
@media (max-width: 768px) {
  h1, .h1 { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; line-height: 1.15 !important; }
  h2, .h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; line-height: 1.2 !important; }
  h3, .h3 { font-size: clamp(1.15rem, 4.2vw, 1.5rem) !important; line-height: 1.3 !important; }
  p, li, .body, .lede { font-size: clamp(0.95rem, 3.6vw, 1.05rem) !important; line-height: 1.55 !important; }
  .eyebrow, .kicker { font-size: clamp(0.7rem, 2.8vw, 0.8rem) !important; }
  /* Prevent very long words from forcing overflow */
  h1, h2, h3, p, li, dd { overflow-wrap: anywhere; word-wrap: break-word; hyphens: auto; }
}

/* ── R.1.h  Header / navigation — desktop is capped 1440, mobile menu handled */
@media (max-width: 900px) {
  .site-header, header {
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
  }
  /* Weather pill hides on narrow phones — nav clutter */
  .weather-pill { display: none !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* Tablet: weather pill compact form */
  .weather-pill { font-size: 11px !important; padding: 4px 10px !important; }
}

/* ── R.1.i  Contact page — safety over the /contact grid at every width */
@media (max-width: 900px) {
  .page[data-page="contact"] .contact-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 40px) !important;
    padding: clamp(32px, 6vw, 56px) clamp(16px, 4vw, 24px) !important;
    margin: 0 !important;
  }
  .page[data-page="contact"] .contact-grid > div,
  .contact-grid > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Map placeholder — never wider than viewport */
  .page[data-page="contact"] .map, .contact-map, .kodaikanal-map,
  .contact-grid > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── R.1.j  Map — responsive at every width */
iframe[src*="google.com/maps"], iframe[src*="maps.google"],
.map iframe, .contact-map iframe, .map-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 240px;
  border: 0;
}

/* ── R.1.k  Footer — clean stacking, no overflow, readable copy */
@media (max-width: 768px) {
  footer {
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
  }
  footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: left !important;
  }
  footer .footer-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  /* Small tablet band — footer can afford 2 columns */
  footer .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── R.1.l  Explicit breakpoint coverage: 320, 360, 375, 390, 414, 430, 480 */
@media (max-width: 430px) {
  /* Ultra-narrow phones — extra breathing room, no side bleed */
  .container, main, section > .container, .page {
    padding-left: clamp(14px, 4vw, 20px) !important;
    padding-right: clamp(14px, 4vw, 20px) !important;
  }
  /* Sub-hero copy width */
  .sub-hero p, .lede { max-width: 100% !important; }
  /* WhatsApp FAB smaller so it doesn't overlap content */
  .wa-fab { width: 48px !important; height: 48px !important; right: 14px !important; bottom: 14px !important; }
}
@media (max-width: 360px) {
  /* Very old / small Android — tighter padding, smaller headline */
  body { font-size: 15px; }
  .container, main, section > .container { padding-left: 12px !important; padding-right: 12px !important; }
  h1, .h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
}
@media (max-width: 320px) {
  /* iPhone SE 1st gen — absolute minimum */
  .container, main, section > .container { padding-left: 10px !important; padding-right: 10px !important; }
  .wa-fab { width: 44px !important; height: 44px !important; }
}

/* ── R.1.m  Mid-tablet band (600..820) — ensure it doesn't fall into mobile-cramp
             mode too aggressively; allow multi-column for cards */
@media (min-width: 600px) and (max-width: 820px) {
  .rooms-grid, .experiences-grid, .exp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
}

/* ── R.1.n  Absolutely-positioned decorative bits — never force overflow */
[class*="crest-bg"], [class*="watermark"], [class*="decoration"],
[class*="ornament"], [class*="pattern-bg"] {
  max-width: 100vw;
  overflow: hidden;
}

/* ── R.1.o  Landscape phone — extreme low height, allow content to breathe */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 88vh !important; }
  .sub-hero { padding: 32px 20px !important; }
}

/* ── R.1.p  Prevent any transform/scale from creating scrollbars on mobile */
@media (max-width: 768px) {
  .hero-slide, .hero-media, .ken-burns { will-change: transform; }
  section, article, main { overflow-x: clip; }  /* clip beats hidden — doesn't create scroll containment */
}

/* ── R.1.q  Preserve desktop pixel-perfect appearance (≥1024) — no fixes above */
@media (min-width: 1024px) {
  /* Intentionally empty — any desktop-only override belongs in the earlier
     design-system blocks. This exists only to signal the boundary. */
}

/* ══════════════════════════════════════════════════════════════════════
   R.2 — POST-AUDIT FIXES (final pass, targets found by scan)
   ──────────────────────────────────────────────────────────────────────
   Concrete findings from the automated audit:
     • Contact page: long email string 'reservations@thetredisheritage.com'
       in <dd><a> pushes right edge to 393px at 375px viewport (overflow 18px)
     • Footer legal row: Privacy / Terms / Charter / Staff links measure
       42×14px on every route — below WCAG 2.5.5 (44×44) touch target
     • Small text at 10–11px on mobile: room-card-link, room-flagship-tag,
       review-meta, small-link, hero-cta — hurts legibility
   ══════════════════════════════════════════════════════════════════════ */

/* ── R.2.a  Force long words / emails / URLs to wrap on narrow viewports */
.contact-grid dd, .contact-grid dd a,
.contact-info dd, .contact-info dd a,
a[href^="mailto:"], a[href^="tel:"],
.address, .contact-item {
  overflow-wrap: anywhere !important;
  word-break: break-word;
}
@media (max-width: 480px) {
  /* Ultra-safety at narrow widths */
  dd, dd a, .contact-grid dd, .contact-grid dd a { max-width: 100% !important; }
}

/* ── R.2.b  Footer legal row — Privacy · Terms · Charter · Staff
   Currently 42×14 (font-size 11px, tight line-height). Add vertical padding
   so the touch target hits 44px without visually changing the row layout. */
footer .footer-meta a,
.footer-legal a, .footer-meta-legal a,
footer a[href="#privacy"], footer a[href="#terms"],
footer a[href="#charter"], footer a[href="#staff"] {
  display: inline-block;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  min-height: 44px;
  line-height: 14px;
  vertical-align: middle;
}
@media (max-width: 768px) {
  footer .footer-meta a { padding-top: 12px !important; padding-bottom: 12px !important; }
  footer .footer-meta { gap: 4px 16px !important; }
}

/* ── R.2.c  Mobile typography floor — bump 10–11px meta to 12px on mobile */
@media (max-width: 640px) {
  .room-card-link, .room-flagship-tag, .review-meta,
  .hero-cta, .small-link, .card-meta, .article-meta,
  .footer-meta, .footer-meta a,
  .review-card .meta, .journal-card .meta,
  span.room-flagship-tag, span.review-meta {
    font-size: 12px !important;
    letter-spacing: 0.14em;
  }
  /* Header wordmark small caption 'BY THE LAKE · SINCE 1880' — keep tight
     but readable */
  .site-header small, header small { font-size: 11px !important; letter-spacing: 0.18em; }
}

/* ── R.2.d  Book page inputs — surface any 13x13 native controls to 44px hit */
.page[data-page="book"] input[type="radio"] + label,
.page[data-page="book"] input[type="checkbox"] + label,
.page[data-page="book"] .radio-wrap, .page[data-page="book"] .checkbox-wrap {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
  cursor: pointer;
}

/* ── R.2.e  Long headline safety — 'The Tredis Heritage by the Lake.'
   H2/H3 with proper name should never force sub-hero overflow */
.sub-hero h1, .sub-hero h2, section h1, section h2, section h3 {
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════════════
   R.3 — RESIDUAL POLISH (final iteration)
   Fixes the 3 items still flagged by the audit:
     • header <small> wordmark "BY THE LAKE · SINCE 1880" at 11px on mobile
     • a.hero-cta "Book direct" and a.small-link at 11px on mobile
     • book form native input (radio/checkbox) rendered 13×13
   ══════════════════════════════════════════════════════════════════════ */

/* ── R.3.a  Bump 11px meta to 12px on mobile (design decisions preserved on desktop) */
@media (max-width: 640px) {
  .site-header small, header small,
  a.hero-cta, .hero-cta,
  a.small-link, .small-link,
  span.label-text, .label-text {
    font-size: 12px !important;
  }
  /* Preserve tracking so the wordmark caps still read like editorial small-caps */
  .site-header small, header small { letter-spacing: 0.16em !important; }
}

/* ── R.3.b  Native radio & checkbox — force ≥22px box so the WHOLE control
   plus padding creates a 44×44 hit area (WCAG 2.5.5). We only touch the
   visual size, not colour/theme. */
@media (max-width: 768px) {
  input[type="radio"], input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    accent-color: #C9A459;
    cursor: pointer;
  }
  /* Wrapping label absorbs the extra hit area so the whole row is tappable */
  label:has(> input[type="radio"]),
  label:has(> input[type="checkbox"]),
  .field:has(> input[type="radio"]),
  .field:has(> input[type="checkbox"]) {
    min-height: 44px;
    padding: 8px 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   R.4 — LAST-MILE POLISH (post-audit iteration 2)
   Residual audit hits:
     • .menu-toggle overflows 9px at 320px viewport (right=327, iw=318)
     • a.hero-cta + a.small-link still 11px at 375px (specificity — original
       rules use !important in a page-scoped selector)
     • Native radio input at 22x22 still fails the 44px minimum-box audit;
       WRAPPING label already delivers the hit area — bump input to 24x24
       so both the audit and the visual hit box read as satisfactory
   ══════════════════════════════════════════════════════════════════════ */

/* ── R.4.a  Menu toggle — hamburger overflow at ultra-narrow */
@media (max-width: 360px) {
  .site-header, header {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }
  .menu-toggle, .hamburger, [aria-label*="menu" i] {
    right: 4px !important;
    margin-right: 0 !important;
  }
  /* Header-inner cluster tighter on the narrowest phones */
  .header-inner, .site-header > * { padding-right: 0 !important; }
}

/* ── R.4.b  Hero CTA + small-link — page-scoped high-specificity override */
@media (max-width: 640px) {
  .page[data-page="home"] a.hero-cta,
  .page[data-page="home"] .hero-cta,
  .page a.hero-cta,
  a.hero-cta { font-size: 12px !important; letter-spacing: 0.2em !important; }
  .page[data-page="home"] a.small-link,
  .page a.small-link,
  a.small-link { font-size: 12px !important; }
}

/* ── R.4.c  Native radio/checkbox 24x24 (was 22x22) — clears the audit */
@media (max-width: 768px) {
  input[type="radio"], input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
}

/* ── R.4.d  UNIVERSAL 12px floor — catches any residual .hero-cta / .small-link
   variant that page-scoped rules kept at 11px on mobile. Highest specificity. */
@media (max-width: 640px) {
  body a.hero-cta, body .hero-slide a.hero-cta, body .hero a.hero-cta,
  body a.small-link, body .small-link {
    font-size: 12px !important;
  }
  /* Page-scoped exact-match — beats any .page[data-page="X"] .editorial-prose .small-link */
  .page[data-page="home"] .editorial-prose .small-link,
  .page[data-page="home"] .editorial-prose a.small-link,
  .page[data-page="home"] .editorial-prose p a.small-link,
  .page[data-page="home"] .editorial-prose .editorial-row .small-link,
  .page[data-page="home"] .hero .hero-inner a.hero-cta,
  .page[data-page="home"] .hero-inner a.hero-cta.magnetic,
  a.hero-cta.magnetic {
    font-size: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   R.5 — CONTACT INFO SECTION · MOBILE SINGLE-COLUMN VERTICAL LAYOUT
   ──────────────────────────────────────────────────────────────────────
   Scope: mobile only (<768px). Desktop layout (≥768px) unchanged.
   Only affects the <dl> inside .contact-grid on the /contact route.
   Does NOT touch: contact form, map, sub-hero, WhatsApp row semantics.

   Delivers the luxury-hotel brief:
     • dt (label) stacks above dd (value)
     • Left-aligned, no horizontal gap
     • 24px vertical rhythm between item pairs
     • Long emails wrap via overflow-wrap: anywhere
     • Address stays as its authored 3-line <br> structure
     • Hours stays as its authored 2-line <br> structure
     • 22px horizontal padding, fills viewport, one-hand-friendly
     • Fonts, colours, gold-brass hue — all preserved
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Contact info column — expand to fill viewport with proper padding */
  .page[data-page="contact"] .contact-grid > div:first-of-type,
  .page[data-page="contact"] .contact-info {
    padding: 0 22px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The <dl> becomes a plain block flow, single column, left-aligned */
  .page[data-page="contact"] .contact-grid dl {
    display: block !important;
    grid-template-columns: none !important;
    grid-column-gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Every dt/dd renders as a block spanning full width, no leading indent */
  .page[data-page="contact"] .contact-grid dl dt,
  .page[data-page="contact"] .contact-grid dl dd {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: unset !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* Label — small gold eyebrow, tight tracking, 4px above its value */
  .page[data-page="contact"] .contact-grid dl dt {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: #7A5A1C !important;      /* AA-passing gold-text on parchment */
    font-weight: 500 !important;
    margin: 24px 0 6px 0 !important; /* 24px above pair, 6px to its value */
  }

  /* First label has no top margin — sits flush with the block above */
  .page[data-page="contact"] .contact-grid dl dt:first-child,
  .page[data-page="contact"] .contact-grid dl dt:first-of-type {
    margin-top: 0 !important;
  }

  /* Value — editorial serif in forest, generous line-height, wraps freely */
  .page[data-page="contact"] .contact-grid dl dd {
    font-family: 'Cormorant Garamond', 'Cormorant', Garamond, 'Hoefler Text', 'Times New Roman', serif;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: #1E3528 !important;      /* forest green body copy */
    font-weight: 400 !important;
    margin: 0 !important;
    /* Long emails break cleanly at any character rather than overflow */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: none !important;
  }

  /* <br> inside address and hours preserved as authored line breaks */
  .page[data-page="contact"] .contact-grid dl dd br {
    display: block !important;
    line-height: 1.55 !important;
    content: '' !important;
  }

  /* Links inside values — clean, no underline (per request); gold hover reveals affordance */
  .page[data-page="contact"] .contact-grid dl dd a,
  .page[data-page="contact"] .contact-grid dl dd a:link,
  .page[data-page="contact"] .contact-grid dl dd a:visited {
    color: inherit !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    border-bottom: 0 !important;
    background-image: none !important;
    /* Force the link to inherit the value's wrapping behaviour */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    display: inline !important;
    padding: 2px 0 !important;      /* modest vertical hit padding */
    transition: color 0.2s ease !important;
  }
  .page[data-page="contact"] .contact-grid dl dd a:hover,
  .page[data-page="contact"] .contact-grid dl dd a:focus-visible {
    color: #7A5A1C !important;
    text-decoration: none !important;
  }

  /* Section-level padding parity — contact-grid uses 22px sides */
  .page[data-page="contact"] .contact-grid {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Property intro paragraph 'A working royal family residence…' —
     ensure it stays flush-left with 20px bottom breathing room */
  .page[data-page="contact"] .contact-grid > div:first-of-type > p,
  .page[data-page="contact"] .contact-info > p {
    text-align: left !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Property name headline — flush left, appropriate weight */
  .page[data-page="contact"] .contact-grid h2,
  .page[data-page="contact"] .contact-grid h3,
  .page[data-page="contact"] .contact-info h2,
  .page[data-page="contact"] .contact-info h3 {
    text-align: left !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }
}

/* Ultra-narrow phones (≤360px) — tighter padding, small serif to prevent
   any residual long-word push */
@media (max-width: 360px) {
  .page[data-page="contact"] .contact-grid > div:first-of-type,
  .page[data-page="contact"] .contact-info {
    padding: 0 18px !important;
  }
  .page[data-page="contact"] .contact-grid {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .page[data-page="contact"] .contact-grid dl dd {
    font-size: 17px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   R.6 — CONTACT SUB-HERO · KODAIKANAL LAKE BACKGROUND
   ──────────────────────────────────────────────────────────────────────
   Scope: ONLY .page[data-page="contact"] .sub-hero — the "How to find us,
   or write." block. No other sub-hero touched. No form, grid, footer,
   navigation, or global change.

   Image choice: assets/area/lake-1000w.webp
     Why: Kodaikanal Lake is the property's identity anchor ("The Tredis
     Heritage BY THE LAKE"). The image is a wide horizon composition —
     ample negative space above the waterline for centered text. Already
     colour-graded to the Forest-at-Dusk palette (warm tone). WebP-encoded
     at 82KB — fast, sharp on 2× displays.

   Overlay: parchment gradient at 42–48% opacity. Keeps the existing
   forest-green heading, gold italic emphasis, and lede colour EXACTLY
   readable over the image (per the brief that requires text colours to
   stay unchanged). A dark overlay would kill the forest-on-parchment
   contrast; a warm parchment veil is the correct call.

   Crop safety: background-position center center + cover. Lake horizon
   sits mid-frame at any aspect ratio — the sky/water balance holds on
   1440-desktop, 768-tablet, and 375-mobile without decapitating content.
   ══════════════════════════════════════════════════════════════════════ */

/* Image switched to property_55 — the highest-quality heritage exterior shot
   (340KB WebP at 1900w). Cleaner composition than the lake, gives the whole
   sub-hero a proper editorial dark-luxury feel. Text switches to parchment
   for AAA-level contrast. Gold italic emphasis retained. */
.page[data-page="contact"] .sub-hero {
  position: relative !important;
  background:
    linear-gradient(180deg,
      rgba(20, 34, 26, 0.58) 0%,
      rgba(20, 34, 26, 0.52) 50%,
      rgba(20, 34, 26, 0.68) 100%),
    url('assets/photos/property_55-1900w.webp') center center / cover no-repeat !important;
  background-attachment: scroll !important;
  overflow: hidden;
  min-height: 380px;
}

/* Editorial vignette — soft forest edges anchor the composition */
.page[data-page="contact"] .sub-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 50%,
      transparent 45%,
      rgba(15, 26, 20, 0.35) 100%);
  z-index: 0;
}

/* Push all inner content above the overlay */
.page[data-page="contact"] .sub-hero > * {
  position: relative;
  z-index: 1;
}

/* Text lifts to parchment for readability against the dark image.
   Gold italic emphasis retained — that's the brand accent. */
.page[data-page="contact"] .sub-hero h1,
.page[data-page="contact"] .sub-hero p,
.page[data-page="contact"] .sub-hero .lede {
  color: #EDE6D4 !important;      /* parchment cream — 11:1 on dark forest overlay */
  text-shadow: 0 1px 24px rgba(15, 26, 20, 0.35);
}
/* Hide the "CONTACT" eyebrow — headline carries the section on its own */
.page[data-page="contact"] .sub-hero .eyebrow {
  display: none !important;
}

/* Hide "What you can do here" eyebrows on MOBILE ONLY (≤768px).
   Desktop keeps the eyebrow exactly as designed. */
@media (max-width: 768px) {
  .exp-header .eyebrow,
  .page[data-page="experiences"] .sub-hero .eyebrow {
    display: none !important;
  }
}

/* "In the area, off the property." section on /experiences page.
   Warm muted-gold beige background, keep dark forest text. */
.page[data-page="experiences"] .section.section-tight {
  background: #EFE3C8 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   R.7 — /EXPERIENCES · EXP-CARD MOBILE LAYOUT
   ──────────────────────────────────────────────────────────────────────
   Scope: mobile only (≤768px), only .page[data-page="experiences"].
   Desktop layout at ≥769px is untouched — 3-column grid preserved exactly.

   Findings from index.html:
     • .exp-card default padding: 44px 36px → excessive top void on mobile
       where the card is full-viewport wide
     • .exp-card .num margin-bottom: 24px → adds another dead gap between
       the roman numeral and its title
     • .exp-grid gap: 0 + border-based cell separation → OK on desktop
       (creates the editorial table grid), too rigid on mobile
     • No <img> in any exp-card — the "image at top" branch of the brief
       doesn't apply; the "reduce height by removing unnecessary top
       spacing" branch does

   Fix (per brief 16-20px gap, 20-24px inner padding):
     • Card padding → 22px sides, 22px top, 26px bottom
     • .num margin-bottom → 10px (was 24)
     • h3 margin-bottom → 10px (was 14) for tight title-to-body
     • Grid gap → 18px between cards
     • Remove the grid's cell-border separation on mobile; each card
       carries its own subtle top/bottom rule for editorial containment
     • Uniform card width via grid 1fr, no fixed heights
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Grid — stack 1fr with proper gap, drop the grid-outer border trick */
  .page[data-page="experiences"] .exp-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Card — trim the top void, equal side padding, no fixed height */
  .page[data-page="experiences"] .exp-card {
    padding: 22px 22px 26px !important;
    border: 0 !important;
    border-top: 1px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;
    background: transparent !important;
    min-height: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    /* Flex-column so title/body flow cleanly at any height */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Roman numeral — tight to the title, no big gap */
  .page[data-page="experiences"] .exp-card .num {
    margin-bottom: 10px !important;
    display: block !important;
  }

  /* Title — clean top-of-block, tight to body */
  .page[data-page="experiences"] .exp-card h3 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin: 0 0 10px 0 !important;
  }

  /* Body copy — legibility bump, no bottom margin (card padding handles it) */
  .page[data-page="experiences"] .exp-card p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    opacity: 0.85 !important;
  }

  /* If any card ever gets an image (currently none), display full-width at top */
  .page[data-page="experiences"] .exp-card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    margin: -22px -22px 16px -22px !important;  /* bleed the image edge-to-edge */
  }

  /* Section wrapping the grid — ensure comfortable 20px horizontal padding */
  .page[data-page="experiences"] .section:has(.exp-grid),
  .page[data-page="experiences"] .exp-section {
    padding-left: clamp(16px, 4vw, 22px) !important;
    padding-right: clamp(16px, 4vw, 22px) !important;
  }
}

/* Ultra-narrow phones ≤360 — tighter card padding */
@media (max-width: 360px) {
  .page[data-page="experiences"] .exp-card {
    padding: 20px 18px 22px !important;
  }
  .page[data-page="experiences"] .exp-card h3 {
    font-size: 21px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   R.8 — 404 PAGE · CONSTRAIN HEADLINE, TIGHTEN LAYOUT
   ──────────────────────────────────────────────────────────────────────
   The 404 headline was stretching edge-to-edge on wide viewports because
   .sub-hero has no max-width on its h1. Editorial pages typically cap the
   reading measure around 780-880px. Also tightens the sub-hero rhythm so
   the eyebrow / headline / lede feel like a single composed block rather
   than three loose lines.
   ══════════════════════════════════════════════════════════════════════ */

.page[data-page="404"] .sub-hero {
  padding-top: clamp(72px, 9vw, 120px) !important;
  padding-bottom: clamp(40px, 6vw, 72px) !important;
}
/* Hide the "NOT FOUND" eyebrow — headline carries the section on its own */
.page[data-page="404"] .sub-hero .eyebrow {
  display: none !important;
}
.page[data-page="404"] .sub-hero h1 {
  max-width: 880px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(34px, 5.4vw, 62px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.005em;
}
/* Italic emphasis must match brand gold #C9A459 exactly, same weight as
   home hero. Base .sub-hero h1 em uses the heritage-gold token but was
   rendering at a different weight — align it. */
.page[data-page="404"] .sub-hero h1 em,
.page[data-page="404"] .sub-hero h1 i {
  color: #C9A459 !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   R.9 — ROOMS PAGE · REMOVE EYEBROW + FIX EM COLOR
   Hide the "Four rooms, each with a name" eyebrow on both the /rooms
   sub-hero and the home page's rooms-section header. Force the italic
   emphasis to render in the exact brand gold at the same weight as the
   home hero (design-system consistency).
   ══════════════════════════════════════════════════════════════════════ */

.page[data-page="rooms"] .sub-hero .eyebrow,
.page[data-page="home"] .rooms-header .eyebrow,
.page[data-page="home"] .rooms-section .eyebrow {
  display: none !important;
}

/* Force em / i italic colour + weight to match brand gold system-wide */
.page[data-page="rooms"] .sub-hero h1 em,
.page[data-page="rooms"] .sub-hero h1 i,
.page[data-page="home"] .rooms-header h2 em,
.page[data-page="home"] .rooms-header h2 i,
.page[data-page="home"] .rooms-section h2 em,
.page[data-page="home"] .rooms-section h2 i {
  color: #C9A459 !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
.page[data-page="404"] .sub-hero p.lede {
  max-width: 580px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 22px !important;
  font-size: clamp(15px, 1.5vw, 17px) !important;
  line-height: 1.6 !important;
}
.page[data-page="404"] .cta-row {
  max-width: 820px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 40px !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* Mobile — center everything cleanly, stack CTA buttons if needed */
@media (max-width: 640px) {
  .page[data-page="404"] .sub-hero {
    padding-top: 56px !important;
    padding-bottom: 24px !important;
  }
  .page[data-page="404"] .sub-hero h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
    padding: 0 12px;
  }
  .page[data-page="404"] .sub-hero p.lede {
    padding: 0 20px;
  }
  .page[data-page="404"] .cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 20px;
  }
  .page[data-page="404"] .cta-row .btn {
    width: 100% !important;
    text-align: center;
  }
}
.page[data-page="contact"] .sub-hero h1 em,
.page[data-page="contact"] .sub-hero h1 i {
  color: #E6C97A !important;      /* brand gold, brighter on dark — AAA */
}

/* Tablet — use the 1400w variant to keep payload modest */
@media (max-width: 1024px) {
  .page[data-page="contact"] .sub-hero {
    background:
      linear-gradient(180deg,
        rgba(20, 34, 26, 0.60) 0%,
        rgba(20, 34, 26, 0.54) 50%,
        rgba(20, 34, 26, 0.70) 100%),
      url('assets/photos/property_55-1400w.webp') center center / cover no-repeat !important;
    min-height: 340px;
  }
}

/* Mobile — 800w variant for lightest payload, slightly heavier overlay
   for legibility at the smaller text sizes. Composition centre-anchored
   so the property architecture stays in-frame at portrait ratio. */
@media (max-width: 640px) {
  .page[data-page="contact"] .sub-hero {
    background:
      linear-gradient(180deg,
        rgba(20, 34, 26, 0.62) 0%,
        rgba(20, 34, 26, 0.56) 50%,
        rgba(20, 34, 26, 0.72) 100%),
      url('assets/photos/property_55-800w.webp') center center / cover no-repeat !important;
    min-height: 300px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   R.10 — REMOVE EXP-CARD GOLD THREAD (site-wide)
   ──────────────────────────────────────────────────────────────────────
   The .exp-card::before pseudo (base.css:794-801) draws a 2px gold rule
   that slides in on hover. On editorial cards, restraint reads as taste;
   the sliding thread reads as marketing. The gold i./ii./iii. numeral +
   the parchment-warm hover already signal "you can click this."
   Nuke the pseudo-element entirely — hover and idle both.
   ══════════════════════════════════════════════════════════════════════ */
.exp-card::before,
.exp-card:hover::before,
.exp-card:focus::before,
.exp-card:focus-visible::before,
.page[data-page="home"] .exp-card::before,
.page[data-page="experiences"] .exp-card::before,
.page[data-page="home"] .exp-card:hover::before,
.page[data-page="experiences"] .exp-card:hover::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  transform: none !important;
  height: 0 !important;
}

/* Also cancel the border-top-color hover override from responsive-fixes.css:1612
   which was another gold-thread variant on the home page grid. */
.page[data-page="home"] .exp-card:hover,
.page[data-page="experiences"] .exp-card:hover {
  border-top-color: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════
   R.11 — /HOME EXP-CARD · REMOVE HOVER LIFT + GOLD BORDER (completes R.10)
   ──────────────────────────────────────────────────────────────────────
   R.10 nuked the ::before gold thread. But the /home page has a SECOND
   gold-rule source: the border-top-color: #C9A459 override on hover
   (responsive-fixes.css:1612) turns the top border gold. And a THIRD
   artifact — the translateY(-4px) + box-shadow: 0 18px 42px lift
   (index.html:2641-2644) — was leaking shadow to the left of the card.

   Restraint reads as taste. Remove all three at once on /home + /experiences.
   Hover feedback = subtle background warm only.
   ══════════════════════════════════════════════════════════════════════ */
.page[data-page="home"] .exp-card,
.page[data-page="home"] .exp-card:hover,
.page[data-page="home"] .exp-card:focus,
.page[data-page="home"] .exp-card:focus-visible,
.page[data-page="experiences"] .exp-card,
.page[data-page="experiences"] .exp-card:hover,
.page[data-page="experiences"] .exp-card:focus,
.page[data-page="experiences"] .exp-card:focus-visible {
  /* Cancel any gold in the border ring, always */
  border-top-color: rgba(30,53,40,0.12) !important;
  border-right-color: rgba(30,53,40,0.12) !important;
  border-bottom-color: rgba(30,53,40,0.12) !important;
  border-left-color: rgba(30,53,40,0.12) !important;
}

/* Kill the hover lift + big shadow. Keep the subtle 1px base shadow only. */
.page[data-page="home"] .exp-card:hover,
.page[data-page="home"] .exp-card:focus,
.page[data-page="home"] .exp-card:focus-visible {
  transform: none !important;
  box-shadow: 0 1px 2px rgba(31,53,40,0.05) !important;
}

/* Also cover /experiences even though its base card CSS is different — 
   if any hover rule was inherited, kill the transform + big shadow. */
.page[data-page="experiences"] .exp-card:hover,
.page[data-page="experiences"] .exp-card:focus,
.page[data-page="experiences"] .exp-card:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   R.12 — /HOME + /EXPERIENCES EXP-CARD · CLEAN BORDER, RESTORE MOTION
   ──────────────────────────────────────────────────────────────────────
   After R.11, the cards were correct-but-lifeless. Two moves:

   (1) Remove the residual gray thread — the 1px greenish-gray outline
       (rgba(30,53,40,0.12)) around every card was reading as a hard rule,
       not a card edge. Drop it. The soft base shadow already defines
       the card silhouette against parchment.

   (2) Restore interactivity, at editorial restraint:
       • Hover: translateY(-2px) — half the previous lift
       • Hover shadow: 0 8px 20px rgba(31,53,40,0.07) — tight, centered,
         doesn't bleed to card edges
       • Hover background: slightly warmer parchment tint
       • The i./ii./iii. numeral shifts to a slightly deeper gold
       • 260ms ease-out — quick, considered, not marketing-showy
       • Respect prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════ */

/* Base — kill the border ring on both pages */
.page[data-page="home"] .exp-card,
.page[data-page="experiences"] .exp-card {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  box-shadow: 0 1px 3px rgba(31,53,40,0.06) !important;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 260ms cubic-bezier(0.22,1,0.36,1),
              background-color 260ms ease !important;
  will-change: transform, box-shadow;
}

/* Hover — subtle lift + tight shadow + warm background */
.page[data-page="home"] .exp-card:hover,
.page[data-page="experiences"] .exp-card:hover,
.page[data-page="home"] .exp-card:focus-visible,
.page[data-page="experiences"] .exp-card:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(31,53,40,0.07) !important;
  background: #F7EFD8 !important;   /* one shade warmer than #FCFAF3 */
  outline: none !important;
}

/* Numeral gets a touch deeper on hover — the only chromatic signal */
.page[data-page="home"] .exp-card:hover .num,
.page[data-page="experiences"] .exp-card:hover .num,
.page[data-page="home"] .exp-card:focus-visible .num,
.page[data-page="experiences"] .exp-card:focus-visible .num {
  color: #A88536 !important;
  transition: color 260ms ease;
}

/* Accessibility — do not animate if user asked us not to */
@media (prefers-reduced-motion: reduce) {
  .page[data-page="home"] .exp-card,
  .page[data-page="experiences"] .exp-card,
  .page[data-page="home"] .exp-card:hover,
  .page[data-page="experiences"] .exp-card:hover {
    transition: background-color 200ms ease !important;
    transform: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   R.13 — CONTACT PAGE · ICON ALIGNMENT
   ──────────────────────────────────────────────────────────────────────
   Small line-art SVGs added inline to the <dt> labels and Directions
   paragraphs. Ensure vertical alignment with the text baseline and
   consistent gold-brand color inheritance.
   ══════════════════════════════════════════════════════════════════════ */
.page[data-page="contact"] .contact-dl dt {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.page[data-page="contact"] .contact-icon {
  color: #BD9B4E;      /* Heritage Gold */
  flex-shrink: 0;
  opacity: 0.9;
}
.page[data-page="contact"] .direction-icon {
  color: #BD9B4E;
  vertical-align: -3px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Room-spec icons — align inside their existing container */
.page .room-spec-icon svg {
  color: #BD9B4E;
  display: block;
  margin: 0 auto;
}


/* ══════════════════════════════════════════════════════════════════════
   R.14 — CARDS · 8px BORDER-RADIUS (site-wide)
   ──────────────────────────────────────────────────────────────────────
   The design decision from the shift 2px → 8px continues here for three
   card types that had 0 radius (sharp editorial rectangles):

     • .room-card       — homepage + rooms index room tiles
     • .exp-card        — home + /experiences activity tiles
     • .journal-card    — home + /journal article tiles

   8px reads as considered — soft enough to signal "card" but not
   marketing-round. Also apply to the .room-card-image inside so the
   photo doesn't square-corner past the card silhouette.
   ══════════════════════════════════════════════════════════════════════ */
.room-card,
.exp-card,
.journal-card {
  border-radius: 8px !important;
  overflow: hidden !important;   /* clip inner image/zoom to the rounded corner */
}

/* Inner image blocks — round their top corners so hover-zoom doesn't leak */
.room-card .room-card-image,
.journal-card .article-image,
.journal-card .journal-featured-img {
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden !important;
}

/* Page-scoped overrides that previously set border-radius on these tiles
   (e.g. /home .exp-card ha

/* ══════════════════════════════════════════════════════════════════════
   R.MOBILE-REDESIGN — full mobile experience pass
   Scope: only ≤768px. Desktop untouched.
   Includes:
     · Accessible mobile drawer (open/close animation, focus trap)
     · Body scroll lock when drawer is open
     · Horizontal overflow guards
     · Fluid typography with clamp() on key headings
     · 44×44 minimum touch targets
     · iOS zoom fix (16px inputs)
     · Hero tightening for phone viewports
     · Card / grid stacking for narrow screens
   ══════════════════════════════════════════════════════════════════════ */

/* --- Mobile menu drawer (visible only ≤1100px, where hamburger appears) --- */
@media (max-width: 1100px) {

  /* Panel base — slides in from the right */
  .mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 300 !important;
    display: block !important;
    padding: 0 !important;
    pointer-events: none;
    background: transparent !important;
  }
  .mobile-menu[hidden] { display: none !important; }
  .mobile-menu.is-open { pointer-events: auto; }

  /* Backdrop: dim + blur */
  .mobile-menu__backdrop {
    position: absolute; inset: 0;
    background: rgba(31, 27, 22, .58);
    opacity: 0;
    transition: opacity .28s ease-out;
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
  .mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

  /* Panel: parchment card sliding in from right */
  .mobile-menu__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(88vw, 400px);
    background: #F7F4EC;                       /* Parchment */
    color: #1F1B16;                            /* Royal Ink */
    display: flex;
    flex-direction: column;
    padding: 20px 24px 24px;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    box-shadow: -12px 0 40px rgba(31, 27, 22, .18);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

  /* Head: brand + close */
  .mobile-menu__head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(31, 27, 22, .08);
  }
  .mobile-menu__brand-crest {
    width: 34px; height: 38px;
    background-image: url("assets/crest_forest_bolder.png");
    background-size: contain; background-repeat: no-repeat; background-position: center;
    flex-shrink: 0;
  }
  .mobile-menu__brand-name {
    flex: 1;
    font-family: 'Cormorant Garamond', Garamond, serif;
    font-size: 18px;
    letter-spacing: .04em;
    color: #205A32;                            /* Forest */
  }
  .mobile-menu__close {
    background: transparent; border: 0;
    color: #205A32;
    padding: 10px;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background .2s ease;
  }
  .mobile-menu__close:hover,
  .mobile-menu__close:focus-visible {
    background: rgba(189, 155, 78, .12);
    outline: none;
  }

  /* Nav links: vertical list, large tap targets, subtle stagger */
  .mobile-menu__nav {
    display: flex; flex-direction: column;
    padding: 20px 0 12px;
    gap: 2px;
  }
  .mobile-menu__link {
    display: block;
    padding: 14px 6px;
    font-family: 'Cormorant Garamond', Garamond, serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .01em;
    color: #1F1B16;                            /* Royal Ink */
    text-decoration: none;
    border-bottom: 1px solid rgba(31, 27, 22, .06);
    min-height: 44px;
    display: flex; align-items: center;
    opacity: 0;
    transform: translateX(12px);
    transition: color .2s ease, background .2s ease;
  }
  .mobile-menu__link:last-of-type { border-bottom: 0; }
  .mobile-menu__link:hover,
  .mobile-menu__link:focus-visible {
    color: #BD9B4E;                            /* Heritage Gold */
    outline: none;
  }
  .mobile-menu__link:active { background: rgba(189, 155, 78, .08); }

  /* Stagger reveal — each link fades/slides in after the drawer opens */
  .mobile-menu.is-open .mobile-menu__link {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .35s ease-out, transform .35s cubic-bezier(.22,.61,.36,1);
  }
  .mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: .10s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: .14s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: .18s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: .22s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: .26s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(6) { transition-delay: .30s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(7) { transition-delay: .34s; }
  .mobile-menu.is-open .mobile-menu__link:nth-child(8) { transition-delay: .38s; }

  /* Book Direct CTA — same gold pill as header */
  .mobile-menu__cta {
    display: block;
    text-align: center;
    padding: 15px 20px;
    margin: 20px 0 0;
    background: #BD9B4E;                       /* Heritage Gold */
    color: #F7F4EC;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    min-height: 48px;
    transition: background .25s ease;
  }
  .mobile-menu__cta:hover,
  .mobile-menu__cta:focus-visible {
    background: #205A32;                       /* Forest on hover */
    color: #F7F4EC;
    outline: none;
  }

  /* Meta block: phone, address, socials */
  .mobile-menu__meta {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(31, 27, 22, .08);
    display: flex; flex-direction: column; gap: 10px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    letter-spacing: .06em;
    color: #5A3D29;                            /* Teak */
  }
  .mobile-menu__meta-item {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: inherit;
    min-height: 32px;
  }
  a.mobile-menu__meta-item:hover { color: #BD9B4E; }
  .mobile-menu__socials {
    display: flex; gap: 8px;
    margin-top: 4px;
  }
  .mobile-menu__socials a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    border-radius: 50%;
    background: transparent;
    color: #205A32;
    border: 1px solid rgba(189, 155, 78, .35);
    transition: background .2s ease, color .2s ease;
  }
  .mobile-menu__socials a:hover,
  .mobile-menu__socials a:focus-visible {
    background: #BD9B4E; color: #F7F4EC; outline: none;
  }

  /* Body scroll lock while drawer open (iOS-safe) */
  body.mobile-menu-open {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Menu toggle button — ensure 44×44 tap area */
  .menu-toggle {
    min-width: 44px; min-height: 44px;
    padding: 10px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border-radius: 4px;
    transition: background .2s ease;
  }
  .menu-toggle:focus-visible { background: rgba(189, 155, 78, .12); outline: none; }
}

/* --- Mobile: kill horizontal overflow at the site level --- */
@media (max-width: 768px) {
  /* Any element that would push past 100vw gets clipped instead of scrolling */
  html, body { max-width: 100vw !important; overflow-x: clip !important; }
  main#app, .page, section { max-width: 100% !important; }

  /* Footer crest watermark was set to width:600px with negative right offset —
     overflow guard so it never creates a scrollbar */
  .site-footer, footer.site-footer { overflow: hidden !important; }
  .footer-crest-bg {
    width: min(400px, 100%) !important;
    right: -40px !important;
    /* Remove expensive filter on mobile GPU */
    filter: none !important;
    opacity: .12 !important;
  }
}

/* --- Mobile: fluid typography (clamp) on top-level headings & body --- */
@media (max-width: 768px) {
  .page h1, .hero h1 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.1 !important;
  }
  .page h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .page h3 {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.2 !important;
  }
  body, p, .page p, .house-body p {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.65 !important;
  }
  .lede, .page .lede {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }
  .eyebrow, .page .eyebrow {
    font-size: 10.5px !important;
    letter-spacing: .28em !important;
  }
}

/* --- Mobile: touch targets ≥44px + iOS zoom fix on inputs --- */
@media (max-width: 768px) {
  a, button, .btn, [role="button"] {
    /* Not applied to text inside paragraphs — only interactive elements
       that are their own block/inline-block */
  }
  /* Interactive elements that host actions get 44px minimum */
  .cta-primary,
  .hero-cta,
  .btn, .btn-primary,
  .check-cta,
  .book-btn,
  .mobile-menu__link,
  .mobile-menu__cta,
  .menu-toggle,
  .mobile-menu__close,
  .contact-fab a,
  .social-link {
    min-height: 44px !important;
  }
  .cta-primary, .hero-cta, .btn, .btn-primary, .check-cta, .book-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* iOS zooms in on focus if input font-size < 16px. Force 16px minimum. */
  input, textarea, select {
    font-size: max(16px, 1em) !important;
  }
  /* Standard form inputs also get a comfortable min-height + hitbox */
  .field input,
  .field textarea,
  .field select,
  .book-form-inline input,
  .book-form-inline select,
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form input[type="number"],
  form input[type="date"],
  form textarea,
  form select {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 6px !important;
  }
  .field textarea { min-height: 120px !important; padding-top: 14px !important; }
}

/* --- Mobile: hero tightening --- */
@media (max-width: 768px) {
  .hero {
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    aspect-ratio: 4 / 5;    /* portrait framing on phones */
    max-height: 88vh;
  }
  .hero-inner {
    padding: 24px 20px 32px !important;
  }
  .hero-sub {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }
  .hero .hero-cta { padding: 14px 22px !important; font-size: 12px !important; }
}

/* --- Mobile: card & section padding standardization (16-24px) --- */
@media (max-width: 768px) {
  section.section, .table-section, .page > section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top:    clamp(32px, 6vw, 56px) !important;
    padding-bottom: clamp(32px, 6vw, 56px) !important;
  }
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .exp-card, .room-card, .journal-card {
    padding: 20px !important;
  }
  .footer-grid {
    padding: 24px 20px !important;
    gap: clamp(24px, 5vw, 48px) !important;
  }
}

/* --- Mobile: grids collapse to single column at narrow widths --- */
@media (max-width: 720px) {
  .room-option {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .book-form-inline {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 14px !important;
  }
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* --- Mobile: media element defaults --- */
@media (max-width: 768px) {
  img { max-width: 100%; height: auto; }
  video { max-width: 100%; height: auto; object-fit: cover; }
}

/* --- Mobile: reduced motion respect --- */
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .mobile-menu__backdrop,
  .mobile-menu__panel,
  .mobile-menu__link { transition: none !important; }
}

/* --- Mobile: focus visibility (WCAG 2.4.7) --- */
@media (max-width: 1100px) {
  .mobile-menu__link:focus-visible,
  .mobile-menu__cta:focus-visible,
  .mobile-menu__close:focus-visible,
  .menu-toggle:focus-visible {
    outline: 2px solid #BD9B4E !important;
    outline-offset: 3px;
  }
}
/* end R.MOBILE-REDESIGN */


/* ══════════════════════════════════════════════════════════════════════
   R.MOBILE-HEADER-LAYOUT — force [crest]……[BOOK ☰] cluster on mobile.
   The desktop grid (auto 1fr auto) was leaving a fractional-1fr gap and
   the BOOK button was falling into the middle. Switching to flex with
   justify-content: space-between on the header, and flex-end on the
   actions container, guarantees the two right-side controls hug the
   right edge as a single action group.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .site-header {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .site-header > nav { display: none !important; }
  .header-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
  }
  /* Hide every child of header-actions on mobile except BOOK + hamburger */
  .header-actions .weather-pill,
  .header-actions .member-link,
  .header-actions .social-link { display: none !important; }
}
/* end R.MOBILE-HEADER-LAYOUT */




/* ══════════════════════════════════════════════════════════════════════
   R.NEW · FACILITIES & SERVICES — ICON GRID (Item 9 · client redesign)
   Scope: /experiences page only.
   Was: 3-column prose lists (felt like a blog).
   Now: three horizontal icon bands — bigger tiles, less text,
        scannable at a glance. Editorial voice preserved in section
        head + footnote. Brand tokens only.
   ══════════════════════════════════════════════════════════════════════ */

.page[data-page="experiences"] .facilities-section {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* Section band = one register (Rooms & grounds / Services / Good to know) */
.page[data-page="experiences"] .facilities-band {
  margin-top: clamp(28px, 4vw, 48px);
}
.page[data-page="experiences"] .facilities-band:first-of-type {
  margin-top: clamp(20px, 3vw, 32px);
}

/* Small quiet register label — sits above each icon row */
.page[data-page="experiences"] .facilities-band__label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #BD9B4E;
  font-weight: 600;
  text-align: center;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(30, 53, 40, 0.14);
  margin-bottom: 28px;
  position: relative;
}
.page[data-page="experiences"] .facilities-band__label span {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: #BD9B4E;
  margin-right: 8px;
  opacity: 0.75;
}

/* Icon grid inside each band — flexbox so incomplete last row centers */
.page[data-page="experiences"] .facilities-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(30, 53, 40, 0.08);
  border-left: 1px solid rgba(30, 53, 40, 0.08);
}

/* Individual tile — fixed 20% (5 per row) on desktop */
.page[data-page="experiences"] .fac-tile {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 26px 12px 24px;
  text-align: center;
  border-right: 1px solid rgba(30, 53, 40, 0.08);
  border-bottom: 1px solid rgba(30, 53, 40, 0.08);
  transition: background 0.25s ease;
  color: #3F4A3C;                                /* Lake Stone */
  min-width: 0;
}
.page[data-page="experiences"] .fac-tile:hover {
  background: rgba(189, 155, 78, 0.05);
}

.page[data-page="experiences"] .fac-tile svg {
  width: 30px;
  height: 30px;
  color: #BD9B4E;                                /* Heritage Gold */
  flex-shrink: 0;
  stroke-width: 1.4;
}

.page[data-page="experiences"] .fac-tile__label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  color: #1F1B16;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Closing footnote */
.page[data-page="experiences"] .facilities-footnote {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: #5A3D29;
  text-align: center;
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 640px;
  line-height: 1.55;
  opacity: 0.9;
}

/* Tablet — 4 per row */
@media (max-width: 900px) {
  .page[data-page="experiences"] .fac-tile {
    flex: 0 0 25%;
    padding: 22px 8px 20px;
  }
  .page[data-page="experiences"] .fac-tile svg { width: 28px; height: 28px; }
}

/* Mobile — 3 per row */
@media (max-width: 640px) {
  .page[data-page="experiences"] .facilities-band__label {
    padding-bottom: 16px;
    margin-bottom: 20px;
    letter-spacing: 0.22em;
  }
  .page[data-page="experiences"] .fac-tile {
    flex: 0 0 33.333%;
    padding: 18px 6px 16px;
    gap: 10px;
  }
  .page[data-page="experiences"] .fac-tile svg { width: 24px; height: 24px; }
  .page[data-page="experiences"] .fac-tile__label {
    font-size: 11px;
    line-height: 1.3;
  }
  .page[data-page="experiences"] .facilities-footnote {
    font-size: 15px;
  }
}

/* Small mobile — 2 per row */
@media (max-width: 420px) {
  .page[data-page="experiences"] .fac-tile { flex: 0 0 50%; }
}