/* ==========================================================================
   Hidden Lake RV Resort — Design System
   Single stylesheet. No external requests. Mobile-first.
   Owner: design agent (page agents must NOT edit — use inline <style> instead).

   TABLE OF CONTENTS
   01. Design tokens (custom properties)
   02. Dark mode token overrides
   03. Reset & base
   04. Typography
   05. Layout — container, sections, rhythm
   06. Buttons
   07. Header / sticky nav / mobile hamburger
   08. Hero
   09. Cards & grids
   10. Checklist / highlight grid
   11. Amenity list
   12. Gallery grid
   13. Accordion (details/summary)
   14. Forms
   15. Tables
   16. Badges / pills
   17. CTA band
   18. Footer
   19. Utilities
   20. Accessibility — focus, reduced motion
   ========================================================================== */

/* ==========================================================================
   00. SELF-HOSTED FONTS — the live site's actual brand fonts (all OFL/Apache):
   Playfair Display (headings), Roboto (body), Montserrat (UI/nav/buttons).
   Files carried over from the site's own Wix font uploads.
   ========================================================================== */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/font-heading.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/font-heading-2.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/font-body.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../fonts/font-body-2.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-var.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-nav.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Thin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/font-legal.woff2") format("woff2");
}

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand palette (from content.json brand.colors) */
  --navy: #2A4D69;
  --navy-900: #1c3648;
  --navy-700: #23415a;
  --accent: #1D67CD;
  --accent-600: #1a5bb5;
  --slate: #5F7A8F;
  --pale: #CAD3DA;
  --gray-med: #8F8F8F;
  --gray-light: #E2E2E2;
  --white: #FFFFFF;
  --black: #000000;

  /* Semantic surface / text tokens (light mode default) */
  --bg: #FFFFFF;
  --bg-alt: #FAFAFA;          /* live site's light alt band */
  --bg-pale: #CAD3DA;         /* live site's pale blue-gray band (verbatim) */
  --surface: #FFFFFF;         /* card surface */
  --surface-2: #F7FAFC;
  --border: #E2E2E2;
  --border-strong: #CAD3DA;
  --text: #333333;            /* live body text is #333 (measured undimmed) */
  --text-muted: #555f66;
  --text-invert: #FFFFFF;
  --heading: #5F7A8F;         /* live site headings are slate (Playfair) */
  --link: #1D67CD;
  --link-hover: #14488f;
  --brand-bar: #2A4D69;       /* header background */
  --brand-bar-text: #FFFFFF;

  /* Type — matches the live site: Playfair Display headings, Roboto body,
     Montserrat UI (nav, buttons, labels) */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --font-nav: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Measured off the live site at 1280px: body 15/21, lead 20/28,
     banner H2 32/44.8, split-section H2 24/33.6 */
  --fs-xs:  0.8125rem;                                   /* 13px */
  --fs-sm:  0.9375rem;                                   /* 15px */
  --fs-base: 0.9375rem;                                  /* 15px (live) */
  --fs-lg:  1.25rem;                                     /* 20px (live lead) */
  --fs-h4:  1.15rem;
  --fs-h3:  1.375rem;
  --fs-h2:  clamp(1.6rem, 1.4rem + 0.8vw, 2rem);         /* 32px desktop (live) */
  --fs-h1:  clamp(1.9rem, 1.6rem + 1.5vw, 2.625rem);

  --lh-tight: 1.4;                                       /* live headings 1.4 */
  --lh-snug: 1.4;
  --lh-body: 1.4;                                        /* live body 21/15 */

  --ff-heading-weight: 900;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Section vertical rhythm — live bands run ~55–70px padding */
  --section-y: clamp(3.25rem, 2.9rem + 1.2vw, 4.25rem);

  /* Container — live site content column is 980px */
  --container: 980px;
  --container-narrow: 980px;
  --gutter: clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);

  /* Radii — the live site is square-cornered throughout */
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 33, 45, 0.06), 0 1px 3px rgba(16, 33, 45, 0.08);
  --shadow: 0 6px 18px rgba(16, 33, 45, 0.10), 0 2px 6px rgba(16, 33, 45, 0.06);
  --shadow-lg: 0 18px 44px rgba(16, 33, 45, 0.18), 0 6px 14px rgba(16, 33, 45, 0.10);
  --shadow-focus: 0 0 0 3px rgba(29, 103, 205, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.22s;

  --header-h: 76px;
}

/* ==========================================================================
   02. DARK MODE — swap surface/text tokens, keep navy brand identity
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1a22;
    --bg-alt: #14232e;
    --bg-pale: #172a37;
    --surface: #172630;
    --surface-2: #1c2f3c;
    --border: #263a48;
    --border-strong: #33505f;
    --text: #e7eef3;
    --text-muted: #a7bac7;
    --text-invert: #FFFFFF;
    --heading: #cfe0ee;
    --link: #6ea8ee;
    --link-hover: #9cc4f4;
    --brand-bar: #14232e;
    --brand-bar-text: #FFFFFF;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow: 0 8px 22px rgba(0,0,0,0.5);
    --shadow-lg: 0 22px 50px rgba(0,0,0,0.6);
  }
}

/* ==========================================================================
   03. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

/* ==========================================================================
   04. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: var(--lh-tight);
  font-weight: var(--ff-heading-weight);
  margin: 0 0 var(--sp-4);
  letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lg);
  color: var(--text);
  line-height: var(--lh-snug);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-3);
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--link); } }

.section-title { max-width: 46ch; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   05. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container.narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section.tight { padding-block: calc(var(--section-y) * 0.65); }
.section--alt { background: var(--bg-alt); }
.section--pale { background: var(--bg-pale); }
.section--navy {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
  color: var(--text-invert);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy .lead { color: rgba(255,255,255,0.82); }
.section--navy .eyebrow { color: var(--pale); }

.section-head { margin-bottom: var(--sp-7); }
.section-head.center { text-align: center; margin-inline: auto; max-width: 720px; }

/* ==========================================================================
   06. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  height: 40px;
  padding: 0 2.2rem;
  min-width: 142px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-align: center;
  white-space: nowrap;
}

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-900); color: #fff; box-shadow: var(--shadow); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
@media (prefers-color-scheme: dark) {
  .btn-outline { color: var(--text); border-color: var(--border-strong); }
  .btn-outline:hover { color: #fff; border-color: var(--pale); }
}

/* Booking CTA — live site buttons are solid navy, square-cornered */
.btn-book {
  background: var(--navy);
  color: #fff;
}
.btn-book:hover { background: var(--navy-900); color: #fff; box-shadow: var(--shadow); }

/* Ghost button for dark/hero surfaces — live site uses solid white on dark bands */
.btn-ghost {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.btn-ghost:hover { background: var(--pale); color: var(--navy); border-color: var(--pale); }

.btn-lg { height: 40px; padding: 0 2.2rem; font-size: 0.9375rem; }
.btn-block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.btn-row.center { justify-content: center; }

/* ==========================================================================
   07. HEADER / STICKY NAV / MOBILE HAMBURGER
   ========================================================================== */
.skip-link {
  position: absolute;
  left: 0; top: 0;
  transform: translateY(-120%);
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-sans);
  font-weight: 700;
  z-index: 200;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* Utility bar — solid navy, phone+icon left, directions+icon right (live) */
.util-bar {
  background: var(--navy);
  color: #fff;
  position: relative;
  z-index: 1;
}
.util-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 78px;
}
.util-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.88);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.util-bar a:hover { color: #fff; }
.util-bar .util-icon { width: 20px; height: 20px; flex: 0 0 auto; }

/* Header — WHITE menu strip below the navy bar (live layout, not sticky) */
.site-header {
  position: static;
  background: #fff;
  color: #000;
}

/* Main header — centered brand on the white strip, nav split either side */
.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--sp-4);
  padding-bottom: 1rem;
}

.brand {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
  color: #000;                /* live lockup text is black */
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.1;
  position: relative;
  z-index: 2;
}
.brand:hover { color: #000; }
/* White disc behind the logo, straddling the navy bar and the white strip */
.brand-disc {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-top: -14px;   /* live logo pokes only slightly into the navy bar */
  background: #fff;
  border-radius: 50%;
}
.brand img { width: 76px; height: 76px; object-fit: contain; }
.brand-name { font-size: 1.375rem; letter-spacing: 0.01em; }
.brand-name small { display: block; font-size: 1rem; font-family: var(--font-display); font-weight: 900; letter-spacing: 0.02em; color: #000; margin-top: 0.1rem; }
/* Live header strip has generous space below the lockup (hero starts ~264px) */
@media (min-width: 961px) { .header-inner { padding-bottom: 4rem; } }

/* Nav — two lists flank the centered brand on desktop */
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
@media (min-width: 961px) {
  .primary-nav { display: contents; }
  /* Nav rows aligned with the "Hidden Lake RV Resort" lockup line */
  .nav-list.nav-left { grid-column: 1; grid-row: 1; justify-self: start; margin-top: 4.8rem; }
  .nav-list.nav-right { grid-column: 3; grid-row: 1; justify-self: end; margin-top: 4.8rem; }
}
.nav-list a {
  display: inline-block;
  color: #000;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.7px;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav-list a:hover { color: var(--navy); }
.nav-list a[aria-current="page"] { color: #000; }
.nav-list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.28rem;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}
/* The live header carries no booking button on desktop — the Book Now item
   lives only in the mobile menu panel. */
.nav-cta { display: none; }

/* Hamburger toggle (JS) + no-JS checkbox fallback both supported */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle .bar {
  display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px;
  position: relative;
}
.nav-toggle .bar::before, .nav-toggle .bar::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after { top: 7px; }

/* No-JS fallback: hidden checkbox drives the panel */
.nav-checkbox { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 960px) {
  /* Mobile: brand left, toggle right, nav drops as a panel. */
  .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.5rem; }
  .brand { flex-direction: row; text-align: left; gap: 0.6rem; }
  .brand-disc { width: 56px; height: 56px; margin-top: 0; }
  .brand img { width: 44px; height: 44px; }
  .brand-name { font-size: 1.1rem; }
  .brand-name small { margin-top: 0; font-size: 0.8rem; }
  .util-inner { min-height: 54px; }
  .util-bar a { font-size: 0.95rem; }
  /* Book Now is shown inside the mobile menu panel only. */
  .nav-cta { display: block; }
  /* No-JS default: the <label> toggle is visible and drives the checkbox.
     When JS is present (html.js) we swap to the accessible <button>. */
  label.nav-toggle { display: inline-flex; }
  button.nav-toggle { display: none; }
  .js label.nav-toggle { display: none; }
  .js button.nav-toggle { display: inline-flex; }
  .primary-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur) var(--ease);
  }
  /* Open state via JS aria-expanded OR no-JS checkbox */
  .nav-checkbox:checked ~ .primary-nav,
  .primary-nav.is-open { max-height: 80vh; }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) var(--gutter) var(--sp-5);
  }
  .nav-list a { padding: 0.9rem 0.5rem; font-size: 1.02rem; border-bottom: 1px solid var(--border); }
  .nav-list a[aria-current="page"]::after { display: none; }
  .nav-list a[aria-current="page"] { background: var(--bg-alt); }
  .nav-cta { margin: var(--sp-4) 0 0; }
  .nav-cta .btn { width: 100%; }
}
@media (min-width: 961px) {
  .nav-toggle { display: none; }
  .primary-nav { max-height: none !important; overflow: visible; }
}

/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  color: #fff;
  isolation: isolate;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Live hero uses a mild neutral darkening, no blue gradient */
  background: rgba(0, 0, 0, 0.30);
}
.hero-inner {
  padding-block: clamp(4rem, 3rem + 8vw, 8rem);
  width: 100%;
  text-align: center;   /* live hero text is centered */
}
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.35); margin-bottom: var(--sp-4); }
.hero-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 12px rgba(0,0,0,0.4);
  margin-bottom: var(--sp-6);
  max-width: 46ch;
  margin-inline: auto;
}
.hero .btn-row { justify-content: center; }
.hero .btn-row { margin-top: var(--sp-2); }

/* Compact hero variant for interior pages (page agents may use) */
.hero--compact { min-height: min(52vh, 460px); }

/* ==========================================================================
   09. CARDS & GRIDS
   ========================================================================== */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }

.card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }

.card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card-body h3 { margin: 0; font-size: var(--fs-h4); }
.card-body p { color: var(--text-muted); }
.card-foot { margin-top: auto; padding-top: var(--sp-2); }

/* Feature / two-up split (image + copy) */
.split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.reverse .split-media { order: 2; }
}
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.split-body > :first-child { margin-top: 0; }

/* Two-photo collage: one wide lead image + a portrait inset */
.media-duo { display: grid; gap: var(--sp-4); grid-template-columns: 1.55fr 1fr; align-items: stretch; }
.media-duo figure { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.media-duo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }

/* ==========================================================================
   10. CHECKLIST / HIGHLIGHT GRID
   ========================================================================== */
.checklist {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.checklist li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.checklist li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--accent);
  /* white check mark drawn with an inline SVG mask — no external request */
  -webkit-mask: center / 0.85rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
          mask: center / 0.85rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  /* fallback bg fill so the disc shows even without mask support */
}

/* ==========================================================================
   11. AMENITY LIST
   ========================================================================== */
.amenity-list {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.amenity-list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.75rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.amenity-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.95rem;
  width: 0.55rem; height: 0.55rem;
  background: var(--accent);
  border-radius: 50%;
}

/* ==========================================================================
   12. GALLERY GRID
   ========================================================================== */
.gallery-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.gallery-grid figure { margin: 0; }
.gallery-grid a, .gallery-grid figure {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.gallery-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.gallery-grid a:hover img, .gallery-grid figure:hover img { transform: scale(1.06); }

/* ==========================================================================
   13. ACCORDION (native details/summary)
   ========================================================================== */
.accordion { display: grid; gap: var(--sp-3); }
.accordion details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
  flex: 0 0 auto;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .accordion-body { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); }

/* ==========================================================================
   14. FORMS
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--heading);
}
.field .req { color: var(--accent); }

.input, .textarea, .select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { min-height: 8rem; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.field-note { font-size: var(--fs-sm); color: var(--text-muted); }

.form-notice {
  background: var(--bg-pale);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  color: var(--text);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   15. TABLES
   ========================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border); }
table.data {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
  background: var(--surface);
}
table.data th, table.data td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
table.data thead th {
  background: var(--navy);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) td { background: var(--surface-2); }

/* ==========================================================================
   16. BADGES / PILLS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--bg-pale);
  color: var(--navy);
  border: 1px solid var(--border-strong);
}
.badge-soon { background: rgba(29,103,205,0.12); color: var(--accent); border-color: rgba(29,103,205,0.35); }
@media (prefers-color-scheme: dark) {
  .badge { color: var(--text); }
  .badge-soon { color: var(--link); }
}

/* ==========================================================================
   17. CTA BAND
   ========================================================================== */
.cta-band {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.5rem + 3vw, 3.75rem);
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at 85% -20%, rgba(29,103,205,0.35), transparent 60%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 60ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: var(--sp-6); justify-content: center; }
.cta-band a:not(.btn) { color: #fff; text-decoration: underline; }

/* ==========================================================================
   17b. SHARED BANDS — testimonial + "Stay for a Night / Stay for a Season"
   The stay band appears above the footer on every page (live-site chrome).
   ========================================================================== */
.photo-band {
  position: relative;
  color: #fff;
  isolation: isolate;
  padding-block: var(--section-y);
}
.photo-band .band-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.photo-band .band-media img { width: 100%; height: 100%; object-fit: cover; }
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(26, 42, 53, 0.62);
}
.photo-band h2, .photo-band h3 { color: #fff; }
.photo-band p { color: rgba(255,255,255,0.92); }

.stay-grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 720px) { .stay-grid { grid-template-columns: 1fr 1fr; } }
.stay-grid h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.stay-grid p { max-width: 44ch; margin-inline: auto; margin-bottom: var(--sp-5); }

.testimonial-band { text-align: center; }
.testimonial-band blockquote {
  margin: 0 auto;
  max-width: 62ch;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.testimonial-band .attribution {
  margin-top: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.85);
}

/* ==========================================================================
   18. FOOTER — the live footer is light (white bg, slate links)
   ========================================================================== */
.site-footer {
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.footer-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--sp-4); color: var(--heading); }
.footer-brand img { width: 48px; height: 48px; object-fit: contain; }
.footer-brand .brand-name { color: var(--heading); font-family: var(--font-display); font-weight: 500; }

.site-footer h3 {
  color: var(--heading);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--navy); }
.footer-list li { margin-bottom: 0.55rem; }
.footer-contact li { display: flex; gap: 0.55rem; margin-bottom: 0.7rem; }
.footer-contact .label { color: var(--heading); font-weight: 700; flex: 0 0 auto; }

.social-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-2); }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.social-row a:hover { background: var(--bg-alt); border-color: var(--slate); }

.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.footer-bottom .managed { color: var(--text-muted); }

/* ==========================================================================
   19. UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--sp-4); }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.tel-link { font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   20. ACCESSIBILITY — focus & reduced motion
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.site-header :focus-visible, .hero :focus-visible, .section--navy :focus-visible,
.cta-band :focus-visible {
  outline-color: #fff;
}

/* ==========================================================================
   21. PROMO POPUP — "DID YOU KNOW? WE WILL MOVE YOU IN FOR FREE"
   Replicates the live site's Wix lightbox: gradient panel, dark side tab,
   verbatim copy. Injected by main.js; shown once per browser session.
   ========================================================================== */
.promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 30, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.promo-overlay[hidden] { display: none; }
.promo-modal {
  position: relative;
  display: flex;
  width: min(560px, 94vw);
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(135deg, #dce9f5 0%, #e8e4f0 55%, #f3d9e4 100%);
  box-shadow: var(--shadow-lg);
}
.promo-tab {
  flex: 0 0 48px;
  background: #23272b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  white-space: nowrap;
}
.promo-body {
  flex: 1;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  text-align: center;
  color: #4a5560;
}
.promo-body h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  letter-spacing: 0.12em;
  color: #6b7680;
  margin-bottom: var(--sp-5);
}
.promo-body p { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.promo-body .promo-cta {
  display: inline-block;
  background: #23272b;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  padding: 0.9rem 1.9rem;
  margin: var(--sp-3) 0 var(--sp-4);
}
.promo-body .promo-cta:hover { background: var(--navy); color: #fff; }
.promo-foot { font-size: var(--fs-xs); }
.promo-foot a { color: var(--accent); text-decoration: underline; }
.promo-close {
  position: absolute;
  top: 0.5rem; right: 0.6rem;
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  color: #4a5560;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.promo-close:hover { color: #23272b; }
@media (prefers-color-scheme: dark) {
  .promo-modal { background: linear-gradient(135deg, #26313c 0%, #2b2f3c 55%, #3a2c35 100%); }
  .promo-body, .promo-body h2, .promo-close { color: #d7dee4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .btn:hover, .checklist li:hover { transform: none; }
}

/* ==========================================================================
   22. PIXEL PARITY — values measured off the live site at 1280px
   ========================================================================== */
/* Header spans wider than the 980px content column on live (~1240px) */
.util-bar .container,
.site-header .header-inner { max-width: 1240px; }
.nav-list a { white-space: nowrap; }

/* Split sections: live runs nearly full-bleed (~25px viewport margins),
   EQUAL halves, 26px gap; on white sections the text half is a #FAFAFA
   panel; on pale bands the text sits raw on the band. H2 24px, centered. */
.container:has(> .split) { max-width: 1230px; }
@media (min-width: 800px) {
  .split { grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
  .split.reverse { grid-template-columns: 1fr 1fr; }
  .split-media { max-height: 460px; }
  .split-media img { height: 100%; min-height: 420px; max-height: 460px; object-fit: cover; }
}
.split-body {
  text-align: center;
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem clamp(1.5rem, 4vw, 4.5rem);
}
.section--pale .split-body { background: transparent; }
.split-body .btn-row { justify-content: center; }
.split-body h2 { font-size: 1.5rem; }

/* Hero: ~480px band, 70px Playfair title, 18px Playfair slate tagline */
.hero { min-height: 480px; }
.hero h1 { font-size: clamp(2.75rem, 5.5vw, 4.375rem); line-height: 1.15; }
.hero-sub {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  color: #fff;               /* live tagline renders white */
}

/* Testimonial (live): attribution ABOVE, small divider, quote below,
   carousel chevrons + dots (decorative) */
.testimonial-band blockquote { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; line-height: 1.3; }
.testimonial-band .attribution { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: 0 0 var(--sp-3); }
.testimonial-band .quote-divider {
  width: 28px; height: 1px; background: rgba(255,255,255,0.8);
  border: 0; margin: 0 auto var(--sp-5);
}
.testimonial-band { position: relative; }
.testimonial-band .car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 2.2rem; color: #fff; opacity: 0.9; line-height: 1;
  font-family: Georgia, serif; user-select: none;
}
.testimonial-band .car-arrow.prev { left: clamp(0.5rem, 6vw, 6.5rem); }
.testimonial-band .car-arrow.next { right: clamp(0.5rem, 6vw, 6.5rem); }
.testimonial-band .car-dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--sp-6); }
.testimonial-band .car-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.95; display: block;
}
.testimonial-band .car-dots span:last-child { background: transparent; border: 1px solid #fff; }

/* Stay band (live): SOLID NAVY, center divider, white buttons w/ navy text */
.stay-band { background: var(--navy); padding-block: var(--section-y); color: #fff; }
.stay-band h2, .stay-band p { color: #fff; }
.stay-grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 720px) {
  .stay-grid { grid-template-columns: 1fr 1fr; }
  /* Divider runs the full band height on live */
  .stay-grid > div + div {
    border-left: 1px solid rgba(255,255,255,0.28);
    margin-block: calc(var(--section-y) * -1);
    padding-block: var(--section-y);
  }
}
.stay-grid p { font-family: var(--font-display); font-weight: 900; font-size: 1rem; line-height: 1.4; max-width: 44ch; margin-inline: auto; margin-bottom: var(--sp-5); }
.stay-band .btn-ghost, .photo-band .btn-ghost { min-width: 228px; color: var(--navy); }

/* Promo popup: title Playfair Black 40px slate; tab Roboto 15px; foot 10px */
.promo-body h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  letter-spacing: 0.02em;
  color: var(--slate);
}
.promo-tab span { font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.18em; }
.promo-foot a { font-size: 0.625rem; }

/* Footer (live structure): CENTERED black Poppins link columns flanking a
   Google Map embed, centered icon row, thin gray uppercase copyright */
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 900px) {
  .footer-cols { grid-template-columns: 1fr 1.65fr 1fr; }
}
.footer-col { display: flex; flex-direction: column; text-align: center; }
.footer-col a { color: #000; font-family: var(--font-nav); font-size: 1rem; line-height: 27px; }
.footer-col a:hover { color: var(--navy); text-decoration: underline; }
.footer-map {
  width: 100%;
  aspect-ratio: 515 / 320;
  border: 0;
}
.footer-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 2.75rem 0 1.5rem; }
.footer-social img { width: 39px; height: 39px; }
.footer-social a { display: inline-flex; }
.footer-copy {
  text-align: center;
  font-family: "Roboto Thin", var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9aa3aa;
  margin: 0;
}
.footer-copy a { font-family: inherit; color: #9aa3aa; }
.footer-copy a:hover { color: #333; }