/* ==========================================================================
   Galveston Bay RV Resort & Marina — "Bayou Roadside" theme layer
   Loaded AFTER styles.css. Replaces the generic gradient / glass / pill look
   with a flat, printed, Gulf Coast camp-park feel:
     - 5 core colors, flat fills, hard "stamped" shadows
     - 2 typefaces (Bitter slab + Nunito Sans) with Lobster Two as a rare accent
     - ticket / sticker labels instead of pills
     - left-aligned editorial section headers
     - purposeful motion only (reveal, stamp-in, count-up, ken-burns, wave drift)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --shadow-modern: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.04);
  --shadow-contact: 0 2px 4px rgba(0,0,0,0.06), 0 8px 12px rgba(0,0,0,0.04);
  --border-translucent: rgba(0,0,0,0.05);
  --border-translucent-light: rgba(255,255,255,0.15);

  --ink: #092C49;          /* Deep Nautical Navy (60% Primary Ink & Anchor) */
  --ink-deep: #051b2d;
  --teal: #16697A;         /* Bayou Ocean Teal (30% Water & Secondary Interactive) */
  --teal-bright: #1d7e91;  /* Bayou Ocean Teal Hover */
  --teal-soft: #E6FCF9;    /* Coastal Seafoam Mist (Secondary Neutral) */
  --seafoam: #E6FCF9;      /* Coastal Seafoam Mist */
  --color-seafoam: #E6FCF9;
  --color-seafoam-soft: rgba(230, 252, 249, 0.7);
  --color-seafoam-border: rgba(22, 105, 122, 0.22);
  --sun: #F8A431;          /* Golden Sunset Amber (10% High-Impact Focal Accent & Primary CTAs) */
  --sun-bright: #FFF8EB;   /* Warm Sunlit Horizon Cream (CTA Hover & Sun Base) */
  --sun-deep: #8C5E32;     /* Warm Driftwood Bronze (WCAG AA Text Accent on Light Surfaces) */
  --sun-ember: #D96B27;    /* Deep Sunburst Orange-Amber (Upper Logo Sun Accent) */
  --marsh: #2E5339;        /* Coastal Marsh Reed Green (30% Nature & Grounds) */
  --marsh-soft: rgba(46, 83, 57, 0.10);
  --bronze: #8C5E32;       /* Warm Driftwood Bronze (30% Structural Borders & Framing) */
  --bronze-soft: rgba(140, 94, 50, 0.10);
  --driftwood: #8C5E32;
  --sand: #F9F6F0;         /* Warm Sunlit Sand (60% Primary Canvas) */
  --sand-dark: #EDE7DC;
  --paper: #FFFFFF;        /* Pure Egret White (60% Card & Surface Foundation) */
  --line: #8C5E32;         /* Warm Driftwood Bronze borders */
  --line-soft: rgba(140, 94, 50, 0.25);
  --scarcity-orange: #F8A431; /* Golden Sunset Amber */
  --color-scarcity-bg: #FFF8EB;
  --color-scarcity-border: rgba(248, 164, 49, 0.45);

  /* Explicit 60-30-10 tokens */
  --color-navy: #092C49;
  --color-teal: #16697A;
  --color-marsh: #2E5339;
  --color-bronze: #8C5E32;
  --color-white: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-sand: #F9F6F0;
  --color-seafoam: #E6FCF9;
  --color-scarcity-orange: #F8A431;
  --color-sunset-orange: #F8A431;
  --color-orange: #F8A431;
  --color-sun-amber: #F8A431;
  --color-sun-deep: #D96B27;

  --font-heading: 'Outfit', sans-serif;
  --font-serif: 'Outfit', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Lobster Two', cursive;
  --font-script: 'Lobster Two', cursive;

  --section-y: clamp(3.75rem, 7vw, 6.25rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --stamp: 5px 5px 0 var(--ink);
  --stamp-sm: 3px 3px 0 var(--ink);
  --stamp-soft: 4px 4px 0 var(--line);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

:root:not([data-theme="dark"]) {
  --color-primary: var(--ink);
  --color-primary-light: #123e63;
  --color-primary-dark: var(--ink-deep);
  --color-accent: var(--teal);
  --color-accent-hover: #1d7e91;
  --color-accent-light: #1d7e91;
  --color-accent-text: var(--teal);
  --color-accent-soft: rgba(22, 105, 122, 0.12);
  --color-accent-border: rgba(22, 105, 122, 0.35);
  --color-aqua: var(--teal);
  --color-aqua-light: #1d7e91;
  --color-aqua-soft: rgba(22, 105, 122, 0.10);
  --color-aqua-border: rgba(22, 105, 122, 0.25);
  --color-bay: var(--ink);
  --color-bay-light: #123e63;
  --color-bay-dark: #051b2d;
  --color-ochre: var(--bronze);
  --color-ochre-light: #a4703e;
  --color-secondary: var(--marsh);
  --color-secondary-light: #3c6b4b;
  --color-emerald: var(--marsh);
  --color-emerald-dark: #203c28;
  --color-emerald-soft: rgba(46, 83, 57, 0.10);
  --color-emerald-border: rgba(46, 83, 57, 0.25);
  --color-bg: var(--sand);
  --color-bg-alt: var(--sand-dark);
  --color-bg-card: var(--paper);
  --color-text: var(--ink);
  --color-text-muted: #536b7f;
  --color-border: var(--line);
  --color-border-light: rgba(140, 94, 50, 0.25);
  --border-hairline-brass: 1px solid var(--line);
  --border-hairline-brass-glow: 2px solid var(--ink);
  --border-hairline-aqua: 1px solid rgba(22, 105, 122, 0.25);
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-sm: 3px 3px 0 var(--line);
  --shadow-md: 4px 4px 0 var(--line);
  --shadow-lg: var(--stamp);
  --shadow-xl: var(--stamp);
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s var(--ease-out);
  --transition-slow: all 0.2s var(--ease-out);
}

/* --------------------------------------------------------------------------
   2. Base: texture, type, rhythm
   -------------------------------------------------------------------------- */
/* Retire the full-screen fixed noise overlay (scroll-perf cost); texture is
   now a static background on the page + sections. */
body::before,
[data-theme="dark"] body::before { display: none !important; }

:root:not([data-theme="dark"]) body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  background-color: var(--sand);
  padding-bottom: 0;
}

:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) .section {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .18 0 0 0 0 .29 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.12;
}

/* Small uppercase labels read better in the sans than in the slab */
.eyebrow, .btn, .luxury-pill, .nav-link, .mobile-nav-link, .exp-pill, .highlights-label,
.stay-finder-label, .mascot-speech-title, .family-badge,
.timeline-time-badge, .luxury-comp-table th, .stat-item .stat-label,
.coords-tag, .collage-seal-badge, .collection-index, .collection-photo-badge, .comfort-cell span,
.calc-metric-label, .calc-inclusions-title, .calc-inclusions-tag, .testimonial-verified-badge,
.testimonial-author, .area-time-badge, .faq-pill-btn, .logo-tapered-eyebrow, .heron-tag,
.owner-welcome-tag, .owner-role, .angler-tip-badge, .rv-advisory-title, .office-status-badge,
.rate-filter-btn, .rates-category-pill, .rate-card-site-nums, .gallery-tab-btn, .lightbox-counter,
.form-label-luxury, .rules-chip, .footer-col h3, .footer-col h4 {
  font-family: var(--font-body);
}

.container { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Section rhythm: tighter, with a printed rule between bands */
.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
:root:not([data-theme="dark"]) .section { border-top: 2px solid var(--ink); }
:root:not([data-theme="dark"]) .section:first-of-type { border-top: 0; }

.section-header { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   3. Section headers: left-aligned, ticket-stub eyebrow, wavy script accent
   -------------------------------------------------------------------------- */
.section-header,
.section-header.text-center,
#navigator .container.text-center,
.container.text-center > .eyebrow {
  text-align: left;
}
.section-header { max-width: 760px; margin-left: 0; margin-right: 0; }
.section-header.text-center { margin-left: 0; margin-right: 0; }

.eyebrow,
.eyebrow.eyebrow-aqua,
.eyebrow.eyebrow-emerald,
.eyebrow-aqua,
.eyebrow-emerald {
  color: var(--paper) !important;
  display: inline-block;
  padding: 0.28rem 0.8rem;
  margin-bottom: 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  rotate: -1.5deg;
  box-shadow: 3px 3px 0 var(--sun);
}
.eyebrow::before, .eyebrow::after { display: none !important; content: none !important; }
.eyebrow-aqua { background: var(--teal); box-shadow: 3px 3px 0 var(--ink); }
.eyebrow-emerald { background: var(--marsh); box-shadow: 3px 3px 0 var(--ink); }

.section-title,
.section-header h2,
.story-text h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 1rem;
}
.section-title em, h2 em, h3 em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 700;
  color: var(--sun-deep);
  letter-spacing: 0;
  -webkit-text-fill-color: currentColor;
  background: none;
  text-decoration: underline wavy var(--sun);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: none;
}
.section-desc {
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 62ch;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   4. Buttons: flat fills, hard offset shadow, NO transform (Fitts's law)
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 4px;
  border: 2px solid var(--ink);
  padding: 0.85rem 1.4rem;
  box-shadow: var(--stamp-sm);
  transform: none !important;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease, box-shadow 0.18s ease !important;
}
.btn-lg { padding: 1.05rem 1.8rem; font-size: 0.9rem; }
.btn-sm { padding: 0.6rem 1rem; font-size: 0.76rem; }

.btn-brass,
.btn-sun-shimmer,
.elementor-button,
.btn-primary,
.reserve-cta-btn {
  background-color: var(--sun);
  background-image: none;
  fill: var(--ink);
  color: var(--ink);
  font-weight: 800;
  border-color: var(--ink);
  animation: none;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-sun-shimmer::before, .btn-sun-shimmer::after { display: none !important; }
.btn-brass:hover, .btn-brass:focus-visible,
.btn-sun-shimmer:hover, .btn-sun-shimmer:focus-visible,
.elementor-button:hover, .elementor-button:focus-visible,
.btn-primary:hover, .btn-primary:focus-visible,
.reserve-cta-btn:hover, .reserve-cta-btn:focus-visible {
  background-color: var(--sun-bright);
  background-image: none;
  fill: var(--ink);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink), 0 6px 20px rgba(248, 164, 49, 0.45);
}
.btn-brass:active,
.elementor-button:active,
.btn-primary:active { box-shadow: 0 0 0 var(--ink); }

.btn-outline-navy {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--stamp-sm);
}
.btn-outline-navy:hover, .btn-outline-navy:focus-visible {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 1px 1px 0 var(--sun);
}

.btn-glass, .btn-outline-white, .btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn-glass:hover, .btn-outline-white:hover, .btn-outline-light:hover,
.btn-glass:focus-visible, .btn-outline-white:focus-visible, .btn-outline-light:focus-visible {
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Navbar
   -------------------------------------------------------------------------- */
.navbar,
.navbar.scrolled {
  background: var(--ink);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 3px solid var(--bronze);
  box-shadow: none;
}
.nav-link {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  position: relative;
}
.nav-link:hover,
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--paper) !important;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--paper) !important;
}
.mobile-drawer-close:hover {
  color: var(--paper) !important;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--sun);
  scale: 0 1;
  transform-origin: left center;
  transition: scale 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after,
.nav-link.active::after,
.nav-link[aria-current="page"]::after { scale: 1 1; }

/* --------------------------------------------------------------------------
   6. Hero: left-aligned, unified coastal glass badges, high-contrast CTAs
   -------------------------------------------------------------------------- */
.hero {
  justify-content: flex-start;
  min-height: clamp(600px, 82vh, 800px);
  padding: clamp(7.75rem, 11vh, 9.25rem) 0 clamp(6.75rem, 9.5vh, 8rem);
}
.hero-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: left;
}
.hero-overlay,
.hero-page .hero-overlay {
  background:
    linear-gradient(90deg, rgba(9, 44, 73, 0.92) 0%, rgba(9, 44, 73, 0.70) 50%, rgba(9, 44, 73, 0.18) 100%),
    linear-gradient(to top, rgba(9, 44, 73, 0.68) 0%, rgba(9, 44, 73, 0) 40%);
}

.hero-bg {
  transform: scale(1);
  transition: none;
  animation: kenBurns 28s ease-out both;
}
.hero:hover .hero-bg { transform: scale(1); }

.hero-top-meta-row {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  margin-bottom: 1.15rem;
}

.hero-trust-wrapper,
.hero-weather-wrapper,
.hero-actions,
.hero-cta-group { justify-content: flex-start; }
.hero-trust-wrapper,
.hero-weather-wrapper {
  width: auto;
  flex: 0 1 auto;
  margin: 0;
  display: flex;
  align-items: stretch;
}
@media (max-width: 640px) {
  .hero-trust-wrapper,
  .hero-weather-wrapper {
    width: 100%;
  }
}

.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 0.5rem;
  min-height: 40px;
  background: rgba(9, 44, 73, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(248, 164, 49, 0.85);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(9, 44, 73, 0.45);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  padding: 0.42rem 0.95rem;
  rotate: 0deg;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.hero-trust-badge .hero-trust-rating { color: #FFFFFF; font-weight: 800; }
.hero-trust-badge .hero-trust-stars,
.hero-trust-badge span.hero-trust-stars {
  color: var(--sun) !important;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 4px rgba(9, 44, 73, 0.7);
}
.hero-trust-bayou {
  color: var(--color-seafoam);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.hero-trust-sep {
  color: rgba(230, 252, 249, 0.55);
  opacity: 1;
  margin: 0 0.05rem;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.7vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: left;
  text-shadow: 0 3px 0 rgba(9, 44, 73, 0.35);
  max-width: 15.5em;
  margin-bottom: 1.1rem;
}
.hero-title span { display: block; }
.hero-title em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 700;
  color: var(--sun);
  text-decoration: none;
  -webkit-text-fill-color: currentColor;
}
.hero-subtitle {
  font-weight: 400;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  max-width: 62ch;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.4rem;
  text-align: left;
  color: rgba(255, 255, 255, 0.94);
}
.hero-subtitle strong {
  color: var(--color-seafoam);
  font-weight: 700;
}

.hero-weather-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-height: 40px;
  background: rgba(9, 44, 73, 0.88);
  background-image: none;
  animation: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(230, 252, 249, 0.45);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(9, 44, 73, 0.45);
  padding: 0.42rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-weather-pill:hover, .hero-weather-pill:focus-visible {
  background: rgba(9, 44, 73, 0.96);
  border-color: var(--sun);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(9, 44, 73, 0.55);
  outline: none;
}
.hero-weather-pill .weather-pulse-dot {
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(248, 164, 49, 0.32);
}
.hero-weather-pill .weather-badge-title {
  color: var(--color-seafoam);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  margin-bottom: 0.5rem;
}
.hero-cta-group {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.hero-cta-group .btn {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.hero-cta-group .btn-glass {
  background: rgba(9, 44, 73, 0.90);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 6px 20px rgba(9, 44, 73, 0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-cta-group .btn-glass:hover,
.hero-cta-group .btn-glass:focus-visible {
  background: var(--teal);
  color: #FFFFFF;
  border-color: var(--color-seafoam);
  box-shadow: 0 8px 24px rgba(9, 44, 73, 0.6);
}
.hero-bottom-proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  max-width: min(65ch, 100%);
  margin-top: 0.15rem;
  box-sizing: border-box;
}
.hero-reassurance-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(9, 44, 73, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(230, 252, 249, 0.32);
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  box-shadow: 0 2px 10px rgba(9, 44, 73, 0.3);
  max-width: 100%;
  box-sizing: border-box;
}
.hero-reassurance-capsule span {
  font-size: 0.8rem;
  color: var(--color-seafoam);
  text-shadow: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-align: left;
}
.hero-verified-quote {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(9, 44, 73, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(249, 246, 240, 0.18);
  border-left: 3px solid var(--sun);
  border-radius: 0 6px 6px 0;
  padding: 0.48rem 0.9rem;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  font-style: italic;
  box-shadow: 0 4px 16px rgba(9, 44, 73, 0.4);
}
.hero-verified-quote .hero-quote-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  background: rgba(22, 105, 122, 0.65);
  border: 1px solid rgba(230, 252, 249, 0.4);
  border-radius: 3px;
  color: var(--color-seafoam);
  font-style: normal;
  font-weight: 800;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-verified-quote strong {
  color: var(--color-seafoam);
  font-style: normal;
}
.hero .btn-brass {
  box-shadow: 0 6px 20px rgba(9, 44, 73, 0.45);
  border: 2px solid var(--paper);
}
.hero .btn-brass:hover {
  box-shadow: 0 8px 24px rgba(248, 164, 49, 0.45);
}

/* Wave divider: 3-tone brand wave ribbons echoing the original logo */
.hero-wave-divider { overflow: hidden; max-width: 100%; }
.hero-wave-divider .wave-drift-back { fill: rgba(9, 44, 73, 0.55); }
.hero-wave-divider .wave-drift-mid { fill: var(--teal); }

/* Highlights: a flat ticket strip instead of floating pills */
.resort-highlights-strip {
  background: var(--paper);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 0;
  margin: 0;
  box-shadow: none;
  width: 100%;
}
.resort-highlights-strip .highlights-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}
.highlights-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 0;
  padding: 0.35rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
}
.highlights-label::before, .highlights-label::after { display: none !important; }
.highlights-pills-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}
.highlight-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem clamp(0.28rem, 0.5vw, 0.85rem);
  background: transparent;
  border: 0;
  border-left: 2px dashed var(--line);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-size: clamp(0.68rem, 0.72vw, 0.80rem);
  font-weight: 700;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: max-content;
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.highlight-pill span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.highlight-pill svg { color: var(--teal); flex-shrink: 0; width: 15px; height: 15px; }
.highlight-pill:hover, .highlight-pill:focus-visible { background: var(--seafoam); transform: none; box-shadow: none; }

/* Responsive Grid Symmetry: 6 (desktop >1200px) -> 3x2 (tablet/laptop <=1200px) -> 2x3 (phone <=640px) */
@media (max-width: 1200px) and (min-width: 641px) {
  .resort-highlights-strip .highlights-container {
    flex-direction: column;
  }
  .highlights-label {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem var(--gutter, 1.5rem);
    width: 100%;
    border-bottom: 2px solid var(--ink);
  }
  .highlights-pills-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .highlight-pill {
    padding: 0.85rem 0.5rem;
    font-size: clamp(0.72rem, 1.35vw, 0.78rem);
    gap: 0.4rem;
    border-left: 2px dashed var(--line);
    border-top: 0;
    min-width: 0;
  }
  .highlight-pill:nth-child(3n + 1) {
    border-left: 0;
  }
  .highlight-pill:nth-child(n + 4) {
    border-top: 2px dashed var(--line);
  }
  .highlight-pill span {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .resort-highlights-strip .highlights-container {
    flex-direction: column;
  }
  .highlights-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.6rem var(--gutter, 1.25rem);
    width: 100%;
    border-bottom: 2px solid var(--ink);
  }
  .highlights-pills-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .highlight-pill {
    padding: 0.75rem 0.45rem;
    font-size: 0.72rem;
    border-left: 2px dashed var(--line);
    border-top: 0;
    min-width: 0;
    text-align: center;
  }
  .highlight-pill:nth-child(2n + 1) {
    border-left: 0;
  }
  .highlight-pill:nth-child(n + 3) {
    border-top: 2px dashed var(--line);
  }
  .highlight-pill span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }
}

/* --------------------------------------------------------------------------
   7. Story section: editorial text + a tidy postcard stack (no dead hole)
   -------------------------------------------------------------------------- */
.story-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.story-lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--teal);
  border-left: 4px solid var(--sun);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}
.story-dropcap::first-letter {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--sun-deep);
  color: var(--sun-deep);
  filter: none;
  font-family: var(--font-heading);
  font-weight: 800;
}
.story-dropcap, .story-body { font-size: 1.05rem; line-height: 1.75; color: var(--ink); }

.story-stats-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 2rem;
  padding: 1.4rem 0 0;
  border-top: 2px dashed var(--line);
  gap: 1rem;
}
.stat-item .stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--sun-deep);
}
.stat-item .stat-label { font-size: 0.64rem; line-height: 1.5; letter-spacing: 0.08em; color: var(--ink); display: block; }

.story-collage {
  position: sticky;
  top: 110px;
  perspective: none;
  min-height: 610px;
}
.collage-frame-accent { display: none; }
.collage-img-tall,
.collage-img-offset {
  position: absolute;
  overflow: hidden;
  border: 8px solid var(--paper);
  outline: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: var(--stamp);
}
.collage-img-tall { top: 0; left: 0; width: 70%; height: 470px; rotate: -1.4deg; z-index: 1; }
.collage-img-offset { top: 110px; right: 0; bottom: auto; width: 46%; height: 390px; rotate: 1.8deg; z-index: 2; }
.collage-img-tall img, .collage-img-offset img { width: 100%; height: 100%; object-fit: cover; }
.story-collage:hover .collage-img-tall img,
.story-collage:hover .collage-img-offset img { transform: none; }

.collage-coords-badge {
  top: 16px;
  left: 16px;
  right: auto;
  z-index: 5;
  background: var(--paper);
  background-image: none;
  animation: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: 3px 3px 0 var(--sun);
  padding: 0.5rem 0.9rem;
  rotate: -2deg;
}
.coords-tag { color: var(--ink); font-size: 0.66rem; letter-spacing: 0.1em; }
.coords-pin { color: var(--sun-deep); }
.coords-latlon { color: var(--teal); font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; }
.collage-seal-badge { display: none; }

.collage-guest-review-card {
  left: 6%;
  bottom: 0;
  z-index: 6;
  max-width: 310px;
  background: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: var(--stamp);
  rotate: 1deg;
}
.story-collage:hover .collage-guest-review-card { transform: none; box-shadow: var(--stamp); }
.guest-review-stars { color: var(--color-scarcity-orange); text-shadow: 0 1px 1px rgba(9, 44, 73, 0.35); }
.guest-review-quote { font-family: var(--font-heading); font-style: italic; font-size: 0.95rem; color: var(--ink); }
.guest-review-author { color: var(--color-text-muted); }
.guest-review-author strong { color: var(--ink); }

.owner-welcome-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: var(--stamp-soft);
  backdrop-filter: none;
}
.owner-portrait-halo { animation: none !important; box-shadow: none; border: 3px solid var(--sun); border-radius: 50%; }
.owner-welcome-tag { color: var(--teal); }

/* --------------------------------------------------------------------------
   8. Cards: paper + ink outline + stamped shadow, lift on hover
   -------------------------------------------------------------------------- */
.collection-card,
.calc-box,
.tier-card-luxury,
.contact-concierge-card,
.legal-card-luxury,
.policy-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--stamp);
  backdrop-filter: none;
}
.timeline-card,
.testimonial-card,
.area-guide-card,
.bento-item,
.faq-luxury-item,
.calc-metric-card,
.schedule-luxury-box,
.comforts-bar {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--stamp-soft);
  backdrop-filter: none;
}
.collection-card::before, .tier-card-luxury::before { background: var(--teal); background-image: none; }

.collection-card,
.tier-card-luxury,
.family-feature-card,
.timeline-card,
.testimonial-card,
.area-guide-card {
  transition: translate 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s var(--ease-out);
}
.collection-card:hover,
.tier-card-luxury:hover,
.family-feature-card:hover,
.timeline-card:hover,
.testimonial-card:hover,
.area-guide-card:hover {
  translate: -3px -3px;
  box-shadow: 8px 8px 0 var(--ink), 0 14px 28px -6px rgba(9, 44, 73, 0.18);
}
.collection-card:hover { transform: none; }

/* Subtle 3.5% image zoom on card hover */
.collection-card-img img,
.collection-img-wrap img,
.tier-card-img img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.collection-card:hover .collection-card-img img,
.collection-card:hover .collection-img-wrap img,
.tier-card-luxury:hover .tier-card-img img {
  transform: scale(1.035);
}

/* Seafoam Neutral Accents for Coastal Icon Containers */
.family-feature-card .coastal-icon,
.coastal-icon-frame {
  background: rgba(230, 252, 249, 0.6);
  border: 1px solid rgba(22, 105, 122, 0.22);
  border-radius: 12px;
  padding: 8px;
  box-sizing: content-box;
  box-shadow: 0 4px 10px rgba(9, 44, 73, 0.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease;
}

.family-feature-card:hover .coastal-icon {
  transform: translateY(-4px) scale(1.08);
  background: rgba(230, 252, 249, 0.85);
  border-color: rgba(22, 105, 122, 0.35);
}

.timeline-card:nth-child(odd) { rotate: -0.5deg; }
.timeline-card:nth-child(even) { rotate: 0.5deg; }
.timeline-card:hover { rotate: 0deg; }

/* Stickers instead of pills */
.family-badge, .collection-photo-badge, .timeline-time-badge, .area-time-badge,
.testimonial-verified-badge, .angler-tip-badge, .calc-inclusions-tag,
.tab-live-badge, .luxury-pill, .exp-pill, .rules-chip,
.rates-category-pill, .office-status-badge {
  border-radius: 3px;
  background: var(--paper);
  background-image: none;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 800;
  letter-spacing: 0.07em;
  animation: none;
}
.family-badge-teal { background: var(--teal-soft); color: var(--ink); }
.family-badge-navy { background: var(--ink); color: var(--paper); }
.family-badge-marsh { background: rgba(46, 83, 57, 0.15); color: var(--ink); border: 1.5px solid var(--marsh); }
.collection-photo-badge, .timeline-time-badge, .area-time-badge { background: var(--teal); color: var(--paper); border-color: var(--ink); }
.testimonial-verified-badge { background: var(--teal-soft); }
.tab-live-badge { display: none; }

.collection-photo-badge { box-shadow: 2px 2px 0 var(--ink); }

/* Testimonial stars */
.testimonial-stars { color: var(--color-scarcity-orange); text-shadow: 0 1px 1px rgba(9, 44, 73, 0.35); }
.testimonial-quote { font-family: var(--font-body); font-weight: 600; font-style: normal; font-size: 1.02rem; line-height: 1.65; color: var(--ink); }
.testimonial-location-stamp { border-radius: 3px; border: 1.5px dashed var(--ink); background: transparent; }

/* Bento gallery */
.bento-item { overflow: hidden; }
.bento-overlay { background: linear-gradient(to top, rgba(9, 44, 73, 0.92) 0%, rgba(9, 44, 73, 0.72) 38%, rgba(9, 44, 73, 0.22) 100%); }
.bento-item.bento-large .bento-overlay,
.bento-item:nth-child(-n+2) .bento-overlay { background: linear-gradient(to top, rgba(9, 44, 73, 0.92) 0%, rgba(9, 44, 73, 0.62) 28%, rgba(9, 44, 73, 0) 58%); }
.bento-content h3, .bento-content h4 { text-shadow: none; }

/* Attractions: 5 items → 2 big + 3 across (no orphan hole) */
.area-guide-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.area-guide-grid > .area-guide-card { grid-column: span 2; }
.area-guide-grid > .area-guide-card:nth-child(-n+2) { grid-column: span 3; }
.area-guide-grid > .area-guide-card:nth-child(-n+2) .area-guide-img { aspect-ratio: 16 / 8; height: auto; }
.area-guide-img { overflow: hidden; }
.area-guide-img img { width: 100%; height: 100%; object-fit: cover; }


/* Calculator */
.calc-slider-wrap { background: var(--sand); border: 2px solid var(--ink); border-radius: 6px; }
.calc-slider { accent-color: var(--sun); }
.calc-slider::-webkit-slider-runnable-track { height: 10px; background: var(--ink); background-image: none; border-radius: 0; border: 0; }
.calc-slider::-moz-range-track { height: 10px; background: var(--ink); border-radius: 0; border: 0; }
.calc-slider::-webkit-slider-thumb { background: var(--teal); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 50%; }
.calc-slider::-moz-range-thumb { background: var(--teal); border: 3px solid var(--ink); border-radius: 50%; }
.calc-metric-val { font-family: var(--font-heading); font-weight: 800; color: var(--ink); }
.calc-metric-val.aqua { color: var(--teal); }
.calc-inclusions-box { background: var(--teal-soft); border: 2px dashed var(--teal); border-radius: 6px; }

/* FAQ */
.faq-pill-btn { border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); color: var(--ink); box-shadow: none; }
.faq-pill-btn.active { background: var(--ink); color: var(--paper); }
.faq-q-number { background: var(--teal); color: var(--paper); border-radius: 3px; border: 1.5px solid var(--ink); }
.faq-luxury-item {
  margin-bottom: 0.9rem;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s var(--ease-out);
}
.faq-luxury-item.active {
  background: var(--color-seafoam);
  border-color: var(--teal);
  box-shadow: 4px 4px 0 var(--ink);
}
.faq-luxury-question { font-family: var(--font-heading); }


/* FAQ: Centered luxury layout */
#faq .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#faq .section-header,
#faq .section-header.text-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 780px;
}
#faq .section-header .eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-block !important;
}
#faq .section-desc {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 65ch;
}
.faq-filter-nav {
  display: flex !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 2.25rem !important;
  width: 100%;
}
.faq-luxury-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 920px !important;
  width: 100% !important;
}


/* Angler tip + comfort bar */
.angler-tip-card { background: var(--ink); color: var(--paper); border-radius: 6px; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--sun); }
.angler-tip-card .angler-tip-title { color: var(--paper); }
.angler-tip-card .angler-tip-text { color: rgba(255, 255, 255, 0.88); }
.comforts-bar { background: var(--paper); }

/* --------------------------------------------------------------------------
   9. Home map section + legend
   -------------------------------------------------------------------------- */
#navigator .container.text-center > .eyebrow { margin-bottom: 1.1rem; }
#navigator .section-desc { margin-bottom: 2rem; }
.navigator-layout {
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 2.25rem;
}
.navigator-sidebar {
  width: 390px;
  text-align: left;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.1rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 1.35rem;
  box-shadow: var(--stamp);
  box-sizing: border-box;
}
.navigator-sidebar h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.navigator-zones-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.navigator-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--line);
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, transform 0.18s ease;
}
.legend-row span {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  line-height: 1.22;
  min-width: 0;
}
.legend-row span strong {
  font-size: 0.78rem;
  font-weight: 800;
}
.legend-row:hover { background: var(--sand-dark); transform: translateY(-1px); }
.legend-row.active { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--sun); }
.legend-row.active strong { color: var(--sun); }
.legend-color { width: 13px !important; height: 13px !important; border-radius: 50% !important; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--ink); flex-shrink: 0; }
/* Distinct, on-brand legend swatches matching 60-30-10 tokens */
.legend-row[data-zone="all"] .legend-color { background-color: var(--sun) !important; }
.legend-row[data-zone="1"] .legend-color { background-color: var(--ink) !important; }
.legend-row[data-zone="2"] .legend-color { background-color: var(--teal) !important; }
.legend-row[data-zone="3"] .legend-color { background-color: var(--marsh) !important; }
.legend-row[data-zone="4"] .legend-color { background-color: var(--bronze) !important; }
.legend-row[data-zone="marina"] .legend-color { background-color: var(--ink) !important; border: 2px dashed var(--teal) !important; }

/* Navigator Amenity Chips Theme Alignment */
.navigator-chips-title {
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.amenity-chip {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--line);
  color: var(--ink);
  font-weight: 800;
  min-height: 44px;
  box-sizing: border-box;
}
.amenity-chip:hover {
  background: var(--sand-dark);
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: 3px 3px 0 var(--teal);
  transform: translateY(-1px);
}
.amenity-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--sun);
}

.navigator-cta-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.25rem;
}
.navigator-cta-pair .btn {
  width: 100%;
  justify-content: center;
  padding: 0.65rem 0.55rem;
  font-size: 0.78rem;
  min-height: 44px;
  margin-top: 0 !important;
  box-sizing: border-box;
}

.navigator-map-box {
  border: 2px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: var(--stamp) !important;
  overflow: hidden;
  background: var(--ink-deep);
  display: flex;
  flex-direction: column;
}
.navigator-mode-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}
.navigator-stage-wrapper {
  flex: 1;
  min-height: 620px;
  height: 100% !important;
}
.navigator-tabs-bar {
  background: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 0.5rem 0.6rem;
  gap: 0.5rem;
}
.navigator-tabs-group { gap: 0.35rem; flex-wrap: wrap; }
.navigator-tab-btn {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  border-radius: 3px;
  border: 2px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.48rem 0.8rem;
  min-height: 40px;
}
.navigator-tab-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.navigator-tab-btn.active { background: var(--teal); color: var(--paper); border-color: var(--paper); box-shadow: none; }
.tab-controls-right { gap: 0.4rem; }
/* Developer-only API key controls are never shown to the public */
#btn-open-key-modal, .gmp-key-modal-overlay { display: none !important; }
.btn-api-key-toggle {
  border-radius: 3px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: var(--paper);
  font-weight: 800;
  font-size: 0.74rem;
}

/* Satellite/illustrated map pan-zoom controls */
.masterplan-zoom-hud, .hud-btn { border-radius: 3px; }

/* --------------------------------------------------------------------------
   10. Footer + sticky booking bar
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  background-image: none;
  border-top: 6px solid var(--bronze);
  color: rgba(255, 255, 255, 0.85);
}
.footer-col h3, .footer-col h4 {
  color: var(--paper);
  letter-spacing: 0.12em;
  font-size: 0.78rem;
}
.footer-link-item a:hover, .footer-links-list a:hover { color: var(--paper) !important; text-decoration: underline !important; }
.footer-bottom { border-top: 2px dashed rgba(255, 255, 255, 0.25); }

.sticky-booking-bar {
  background: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 3px solid var(--bronze);
  box-shadow: none;
  padding: 0.6rem var(--gutter);
}
.sticky-bar-title { font-family: var(--font-heading); font-size: 1rem; line-height: 1.25; }
.sticky-bar-title em { font-family: var(--font-heading); font-weight: 800; font-style: normal; color: var(--sun); text-decoration: none; letter-spacing: -0.01em; }
.sticky-bar-sub { display: none; }
.sticky-bar-actions .btn { padding: 0.6rem 1.1rem; }
.sticky-bar-actions .btn-brass { box-shadow: 3px 3px 0 var(--paper); }
.sticky-bar-close { border-radius: 3px; border-width: 2px; }

/* --------------------------------------------------------------------------
   11. Forms (contact page etc.)
   -------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"],
select, textarea, .booking-input, .booking-select {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: none;
  font-family: var(--font-body);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--sun);
  box-shadow: 3px 3px 0 var(--ink);
  outline: none;
}

/* --------------------------------------------------------------------------
   12. Motion: only things that mean something
   -------------------------------------------------------------------------- */
/* Retire decorative loops */
.campspot-banner-mascot, .mascot-callout-img,
.heron-portrait-halo, .heron-portrait-halo-sm,
.preloader-logo { animation: none !important; }

/* Status dots: a gentle, brand-colored "live" pulse */
@keyframes ambientWavePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(140, 94, 50, 0.55); }
  60% { box-shadow: 0 0 0 7px rgba(140, 94, 50, 0); }
}

/* Hero photo: slow push-in on load (not hover-triggered) */
@keyframes kenBurns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.07) translate3d(-0.8%, -0.6%, 0); }
}

/* Scroll reveal: rise and settle; groups stagger left → right */
.reveal-init {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s var(--ease-out);
}
.reveal-init.is-revealed { opacity: 1; transform: none; }

/* Ticket-stub eyebrow "stamps" onto the page when its block reveals */
.reveal-init .eyebrow { opacity: 0; }
.reveal-init.is-revealed .eyebrow { animation: stampIn 0.55s var(--ease-out) 0.15s both; }
@keyframes stampIn {
  0% { opacity: 0; scale: 1.5; rotate: -7deg; }
  55% { opacity: 1; scale: 0.94; rotate: -1.5deg; }
  100% { opacity: 1; scale: 1; rotate: -1.5deg; }
}

/* Wavy underline draws in under accent words */
.reveal-init.is-revealed h2 em { animation: underlineFade 0.8s ease 0.35s both; }
@keyframes underlineFade {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: var(--sun); }
}

/* Map badges drop in once the map block is on screen */
.navigator-map-box .gmp-gold-marker-wrap {
  animation: badgeDrop 0.5s var(--ease-out) both paused;
}
.navigator-map-box.is-revealed .gmp-gold-marker-wrap { animation-play-state: running; }
.fallback-marker-node:nth-child(2) .gmp-gold-marker-wrap { animation-delay: 0.12s; }
.fallback-marker-node:nth-child(3) .gmp-gold-marker-wrap { animation-delay: 0.24s; }
.fallback-marker-node:nth-child(4) .gmp-gold-marker-wrap { animation-delay: 0.36s; }
.fallback-marker-node:nth-child(5) .gmp-gold-marker-wrap { animation-delay: 0.48s; }
@keyframes badgeDrop {
  from { opacity: 0; scale: 0.3; translate: 0 -14px; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}

/* Honor reduced-motion preferences everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-init { opacity: 1; transform: none; }
  .reveal-init .eyebrow { opacity: 1; }
  .hero-bg { animation: none; }
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .navigator-sidebar {
    width: 100%;
    align-items: stretch;
    text-align: left;
  }
}
@media (max-width: 1100px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-collage { position: relative; top: auto; min-height: 560px; max-width: 640px; }
  /* highlights handled by symmetrical responsive grid */
}
@media (max-width: 1024px) and (min-width: 641px) {
  .hero { padding: 7.5rem 0 6rem; }
  .hero-content { padding: 0 2rem; }
  .hero-top-meta-row { gap: 0.65rem; margin-bottom: 1.1rem; }
  .hero-title { font-size: clamp(2.1rem, 5vw, 3.4rem); }
  .hero-subtitle { font-size: 1.02rem; max-width: 54ch; margin-bottom: 1.35rem; }
  .hero-weather-pill { padding: 0.35rem 1rem; font-size: 0.78rem; margin-bottom: 0; }
  .hero-actions { gap: 0.85rem; }
  .hero-cta-group { gap: 1rem; }
  .hero-page { min-height: clamp(400px, 48vh, 520px); padding: 8rem 2rem 4.5rem; }
}
@media (max-width: 900px) {
  .area-guide-grid { grid-template-columns: repeat(2, 1fr); }
  .area-guide-grid > .area-guide-card,
  .area-guide-grid > .area-guide-card:nth-child(-n+2) { grid-column: span 1; }
  .area-guide-grid > .area-guide-card:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .nav-actions .btn { display: none !important; }
  .hero { padding: 5.5rem 0 4.5rem; min-height: auto; }
  .hero-content { padding: 0 1.15rem; }
  .hero-top-meta-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-bottom: 0.75rem; }
  .hero-trust-badge {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem 0.45rem;
    min-height: 32px;
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    border-radius: 5px;
    margin: 0 !important;
    width: auto;
    max-width: 100%;
  }
  .hero-trust-sep,
  .hero-trust-bayou { display: none; }
  .hero-title { font-size: clamp(1.65rem, 6.8vw, 2.1rem); line-height: 1.12; margin-bottom: 0.65rem; }
  .hero-subtitle { font-size: 0.9rem; line-height: 1.48; margin-bottom: 0.95rem; max-width: 100%; }
  .hero-weather-wrapper { margin-bottom: 0; max-width: 100%; }
  .hero-weather-pill {
    min-height: 32px;
    padding: 0.3rem 0.7rem;
    font-size: 0.71rem;
    border-radius: 5px;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }
  .hero-weather-pill > * { white-space: normal; }
  .hero-weather-pill .weather-badge-title { font-size: 0.65rem; }
  .hero-weather-pill .weather-metrics { font-size: 0.70rem; }
  .hero-weather-pill .weather-arrow { display: none; }
  .hero-actions { align-items: stretch; width: 100%; gap: 0.6rem; margin-bottom: 0.75rem; }
  .hero-cta-group { flex-direction: column; align-items: stretch; width: 100%; gap: 0.55rem; }
  .hero-cta-group .btn { width: 100%; min-height: 48px; padding: 0.75rem 1rem; font-size: 0.82rem; justify-content: center; text-align: center; }
  .hero-bottom-proof { width: 100%; max-width: 100%; gap: 0.4rem; }
  .hero-reassurance-capsule { width: 100%; max-width: 100%; justify-content: center; text-align: center; padding: 0.28rem 0.55rem; }
  .hero-reassurance-capsule span { font-size: 0.71rem; line-height: 1.3; text-align: center; }
  .hero-verified-quote { width: 100%; max-width: 100%; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.45rem 0.75rem; font-size: 0.75rem; line-height: 1.4; }
  .hero-wave-divider svg { width: 100%; max-width: 100%; margin-left: 0; }
  .hero-page { min-height: auto; padding: 7rem 1.25rem 3.5rem; }
  .story-collage { min-height: 0; padding-bottom: 0.5rem; }
  .collage-img-tall { position: relative; width: 84%; height: 300px; }
  .collage-img-offset { width: 42%; height: 210px; top: 150px; }
  .collage-guest-review-card { position: relative; left: auto; bottom: auto; margin: 56px 0 0 auto; max-width: 94%; }
  .area-guide-grid { grid-template-columns: 1fr; }
  .area-guide-grid > .area-guide-card,
  .area-guide-grid > .area-guide-card:nth-child(5) { grid-column: span 1; }
  .navigator-sidebar { padding: 1.1rem; }
  .navigator-legend { grid-template-columns: 1fr; }
  .navigator-cta-pair { grid-template-columns: 1fr; }
  .navigator-stage-wrapper { min-height: 460px; }
  .btn { padding: 0.8rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   14. Inner pages: rates, policies, contact, gallery
   -------------------------------------------------------------------------- */
.logo-tapered-eyebrow,
.logo-tapered-eyebrow.teal {
  display: inline-block;
  padding: 0.28rem 0.8rem;
  margin-bottom: 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: left;
  rotate: -1.5deg;
  box-shadow: 3px 3px 0 var(--sun);
}
.logo-tapered-eyebrow::before, .logo-tapered-eyebrow::after { display: none !important; content: none !important; }
.logo-tapered-eyebrow.teal { background: var(--teal); box-shadow: 3px 3px 0 var(--ink); }
.hero .logo-tapered-eyebrow { background: var(--paper); color: var(--ink); }
.hero .logo-tapered-eyebrow.teal { background: var(--paper); color: var(--teal); }

.bayside-heron-callout {
  background: var(--paper);
  background-image: none;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--stamp-soft);
}
.bayside-heron-callout::before { background: var(--teal); background-image: none; height: 6px; }
.heron-portrait-halo, .heron-portrait-halo-sm {
  background: var(--teal);
  background-image: none;
  box-shadow: none;
  animation: none !important;
  border: 2px solid var(--ink);
}
.bayside-heron-callout:hover .heron-portrait-img { transform: none; }
.heron-tag {
  border-radius: 3px;
  background: var(--teal);
  color: var(--paper);
  border: 1.5px solid var(--ink);
  font-family: var(--font-body);
}
.heron-title { font-family: var(--font-heading); }

.schedule-luxury-box {
  background: var(--sand-dark);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--stamp);
}
.schedule-header-wrap { text-align: left; margin-left: 0; margin-right: 0; }
.official-master-rates-wrap {
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 6px;
  box-shadow: none;
}
.official-master-rates-wrap .logo-tapered-eyebrow, .schedule-header-wrap .logo-tapered-eyebrow { margin-bottom: 0.9rem; }

.rates-category-title-bar { border-bottom: 2px solid var(--ink); }
.rates-category-pill { background: var(--teal-soft); }
.rates-collection-card { box-shadow: var(--stamp-soft); border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); }
.rates-collection-card:hover { transform: none; translate: -3px -3px; box-shadow: 7px 7px 0 var(--ink); border-color: var(--ink); }
.rates-collection-card.card-teal::before { background: var(--teal); height: 6px; }
.rates-collection-card.card-amber::before { background: var(--sun); height: 6px; }
.rates-collection-card.card-cypress::before { background: var(--marsh); height: 6px; }
.rates-collection-card.card-navy::before { background: var(--ink); height: 6px; }
.rate-card-site-nums { color: var(--sun-deep); }

.rate-price-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* rows have 2 children: label + value */
  align-items: center;
  column-gap: 0.6rem;
  border-bottom: 1.4px dashed var(--line);
}
.rate-price-row > :first-child { white-space: nowrap; }
.rate-price-val {
  text-align: right; font-family: var(--font-heading); font-weight: 800;
  /* price on top, "Elec Included" pill beneath: never wider than the box */
  flex-direction: column; align-items: flex-end; gap: 0.2rem;
}
.rate-pill-included, .rate-pill-metered { white-space: nowrap; border-radius: 3px; font-family: var(--font-body); }
.rate-pill-included { background: rgba(46, 83, 57, 0.12); color: var(--marsh); border-color: var(--marsh); }
.rate-pill-metered { background: rgba(140, 94, 50, 0.12); color: var(--bronze); border-color: var(--bronze); }
.pill-teal { background: var(--teal-soft); color: var(--ink); }
.pill-amber { background: var(--color-scarcity-bg); color: var(--ink); border: 1.5px solid var(--sun); }
.pill-cypress { background: rgba(46, 83, 57, 0.15); color: var(--ink); border: 1.5px solid var(--marsh); }

.rate-filter-btn, .gallery-tab-btn {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
  font-weight: 800;
}
.rate-filter-btn.active, .gallery-tab-btn.active { background: var(--ink); color: var(--paper); }

.luxury-comp-table th { background: var(--ink); color: var(--paper); }
.luxury-rates-table td { border-bottom: 1.4px dashed var(--line); }

/* --------------------------------------------------------------------------
   15. Hero background video (YouTube, muted loop)
   Cover-fits a 16:9 player into any hero size, fades in once it is playing,
   and re-grades the daytime drone footage into the brand palette.
   -------------------------------------------------------------------------- */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  overflow-x: clip;
  contain: paint;
  clip-path: inset(0);
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  background: var(--ink);
}
.hero-video-wrap.is-playing { opacity: 1; }
.hero-video-wrap iframe,
.hero-video-wrap #hero-yt-player {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Rendered at 2x and scaled back down: YouTube chooses the stream quality
     from the player's layout size, so this requests 1080p instead of ~360p.
     0.56 = 1.12 (crops YouTube edge chrome) / 2. */
  width: max(200vw, 355.56vh);
  height: max(112.5vw, 200vh);
  transform: translate(-50%, -50%) scale(0.56);
  border: 0;
  pointer-events: none;
  /* Colour grade: richer water and sky, slightly warmer greens */
  filter: saturate(1.15) contrast(1.05) brightness(1.06) sepia(0.05);
}
/* Warm sun-tint over the footage so the daylight reads as golden hour */
.hero-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(140, 94, 50, 0.15) 0%, rgba(9, 44, 73, 0.08) 100%);
  mix-blend-mode: soft-light;
}
/* Once the video plays, the poster Ken-Burns is not needed */
.hero:has(.hero-video-wrap.is-playing) .hero-bg { animation: none; }

/* Overlay re-tuned for bright daytime footage: strong on the text side,
   open on the right so the park stays visible, deep navy at the bottom
   to blend into the wave divider and highlights strip. */
.hero:has(.hero-video-wrap) .hero-overlay {
  background:
    linear-gradient(90deg, rgba(9, 44, 73, 0.90) 0%, rgba(9, 44, 73, 0.66) 42%, rgba(9, 44, 73, 0.18) 78%, rgba(9, 44, 73, 0.08) 100%),
    linear-gradient(to bottom, rgba(9, 44, 73, 0.55) 0%, rgba(9, 44, 73, 0) 22%),
    linear-gradient(to top, rgba(9, 44, 73, 0.70) 0%, rgba(9, 44, 73, 0) 40%);
}
.hero:has(.hero-video-wrap) .hero-title { text-shadow: 0 2px 0 rgba(9, 44, 73, 0.45), 0 6px 28px rgba(9, 44, 73, 0.55); }
.hero:has(.hero-video-wrap) .hero-subtitle { text-shadow: 0 1px 14px rgba(9, 44, 73, 0.7); }

@media (max-width: 900px) {
  /* On portrait phones the text spans the full width: flatten the side gradient */
  .hero:has(.hero-video-wrap) .hero-overlay {
    background:
      linear-gradient(to bottom, rgba(9, 44, 73, 0.72) 0%, rgba(9, 44, 73, 0.55) 55%, rgba(9, 44, 73, 0.85) 100%);
  }
  .hero-video-wrap iframe,
  .hero-video-wrap #hero-yt-player {
    width: max(150vw, 266.67vh);
    height: max(84.375vw, 150%);
    transform: translate(-50%, -50%) scale(0.7467);   /* 1.12 / 1.5 */
  }
}
@media (max-width: 768px) {
  /* On mobile portrait phones, disable heavy video iframe to guarantee 0px overflow and fast LCP */
  .hero-video-wrap {
    display: none !important;
  }
  .hero-video-toggle {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrap { display: none; }
}

/* --------------------------------------------------------------------------
   16. Audit #2 fixes + playful touches
   -------------------------------------------------------------------------- */

/* Hero video pause / play control */
.hero-video-toggle {
  position: absolute;
  right: 2.25rem;
  bottom: 7.25rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem;
  background: rgba(9, 44, 73, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  border: 1px solid rgba(249, 246, 240, 0.35);
  border-radius: 999px;
  font: 700 0.68rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover, .hero-video-toggle:focus-visible {
  background: var(--ink);
  border-color: var(--sun);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  outline: 2px solid var(--sun-bright);
  outline-offset: 2px;
}
.hero-video-toggle .icon-play { display: none; }
.hero-video-toggle.is-paused .icon-pause { display: none; }
.hero-video-toggle.is-paused .icon-play { display: block; }
@media (max-width: 640px) {
  .hero-video-toggle { bottom: auto; top: 5.2rem; right: 0.75rem; padding: 0.45rem 0.6rem; }
  .hero-video-toggle .toggle-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-video-toggle { display: none !important; } }

/* Closing CTA band: one alignment, readable script words on navy */
.cta-band .container { text-align: center; }
.cta-band .eyebrow {
  display: inline-block;
  background: var(--sun) !important;
  color: var(--ink) !important;
  box-shadow: 3px 3px 0 var(--paper);
}
.cta-band .section-title { text-align: center; margin-left: auto; margin-right: auto; }
.cta-band .section-title em { color: var(--sun); }
.cta-band .section-title em::after { background-image: none; border-bottom: 3px wavy var(--sun); }
.cta-band .section-desc { margin-left: auto !important; margin-right: auto !important; text-align: center; max-width: 52ch; }

/* Calculator slider: a fishing line with a bobber */
.calc-slider::-webkit-slider-runnable-track { height: 6px; background: var(--teal); border-radius: 3px; }
.calc-slider::-moz-range-track { height: 6px; background: var(--teal); border-radius: 3px; border: 0; }
.calc-slider::-webkit-slider-thumb {
  width: 26px; height: 32px; margin-top: -12px;
  background: linear-gradient(to bottom, var(--sun) 0 50%, var(--paper) 50% 100%);
  border: 3px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  box-shadow: 2px 3px 0 rgba(9, 44, 73, 0.35);
  transition: translate 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.calc-slider::-moz-range-thumb {
  width: 20px; height: 26px;
  background: linear-gradient(to bottom, var(--sun) 0 50%, var(--paper) 50% 100%);
  border: 3px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
}
.calc-slider:hover::-webkit-slider-thumb { translate: 0 -2px; }
.calc-slider:active::-webkit-slider-thumb { translate: 0 2px; }

/* CTA buttons: a soft water-ripple on hover instead of a plain colour swap */
@keyframes btnRipple {
  from { background-size: 0% 0%; }
  to   { background-size: 320% 320%; }
}
.btn-brass:hover, .btn-brass:focus-visible {
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0) 55%);
  background-repeat: no-repeat;
  background-position: center;
  animation: btnRipple 0.65s ease-out 1 both;
}

/* Testimonials as taped-up postcards */
.testimonial-card { position: relative; }
.testimonial-card::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 84px;
  height: 26px;
  margin-left: -42px;
  background: rgba(140, 94, 50, 0.30);
  border-left: 2px dashed rgba(255, 255, 255, 0.7);
  border-right: 2px dashed rgba(255, 255, 255, 0.7);
  rotate: -3deg;
  pointer-events: none;
}
.testimonial-card:nth-child(2)::after { rotate: 2deg; background: rgba(9, 44, 73, 0.15); }
.testimonial-card:nth-child(3)::after { rotate: -1.5deg; }
.testimonial-card:nth-child(odd) { rotate: -0.6deg; }
.testimonial-card:nth-child(even) { rotate: 0.6deg; }
.testimonial-card:hover { rotate: 0deg; }

@media (prefers-reduced-motion: reduce) {
  .btn-brass:hover, .btn-brass:focus-visible { animation: none; }
}

/* --------------------------------------------------------------------------
   17. Personality: stickers, section doodles, "Bobber" footer mascot, live
   office status, 404 scene
   -------------------------------------------------------------------------- */

/* Live office status in the highlights label */
.highlights-label { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.3rem; }
.office-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.16rem 0.48rem;
  background: rgba(22, 105, 122, 0.55);
  border: 1px solid rgba(230, 252, 249, 0.38);
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-seafoam);
  line-height: 1.25;
}
.office-live:empty { display: none; }
.office-live::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sand-dark);
  flex-shrink: 0;
}
.office-live[data-state="open"]::before {
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(248, 164, 49, 0.35);
}

/* Cooler stickers beside "Why Families Love It Here" */
.container:has(> .sticker-cluster) { position: relative; }
.sticker-cluster {
  position: absolute;
  top: 0.25rem;
  right: var(--gutter, 1.5rem);
  display: grid;
  grid-template-columns: repeat(2, 112px);
  gap: 0.9rem 1.1rem;
  pointer-events: none;
}
.sticker {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font: 800 0.74rem/1.25 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 0 0 4px var(--paper), 4px 7px 0 4px rgba(9, 44, 73, 0.28);
  transition: rotate 0.3s cubic-bezier(0.16, 1, 0.3, 1), scale 0.3s var(--ease-out, ease-out);
}
.sticker-sun   { background: var(--sun);   color: var(--ink); rotate: -9deg; }
.sticker-teal  { background: var(--teal);  color: var(--paper); rotate: 7deg;  translate: 6px 8px; }
.sticker-paper { background: var(--paper); color: var(--ink);   rotate: 5deg;  translate: -4px 0; }
.sticker-marsh { background: var(--marsh); color: var(--paper); rotate: -6deg; translate: 8px 6px; }
@keyframes stickerPeel {
  0%   { opacity: 0; scale: 1.5; }
  60%  { opacity: 1; scale: 0.94; }
  100% { opacity: 1; scale: 1; }
}
.reveal-init .sticker-cluster .sticker { opacity: 0; }
.reveal-init.reveal-visible .sticker-cluster .sticker,
.sticker-cluster .sticker { animation: stickerPeel 0.55s var(--ease-out, ease-out) both; }
.sticker-cluster .sticker:nth-child(2) { animation-delay: 0.12s; }
.sticker-cluster .sticker:nth-child(3) { animation-delay: 0.24s; }
.sticker-cluster .sticker:nth-child(4) { animation-delay: 0.36s; }
@media (max-width: 1100px) {
  .sticker-cluster {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.5rem;
    margin: -0.5rem 0 2.25rem;
    padding-left: 0.25rem;
  }
  .sticker { width: 92px; height: 92px; font-size: 0.64rem; }
  .sticker-sun, .sticker-teal, .sticker-paper, .sticker-marsh { translate: 0 0; }
}

/* Hand-drawn doodles in the empty top-right corner of select sections */
#amenities, #timeline, #collection, #extended-stay { position: relative; }
#amenities::after, #timeline::after, #collection::after, #extended-stay::after {
  content: "";
  position: absolute;
  top: clamp(2.5rem, 5vw, 4.5rem);
  right: max(var(--gutter, 1.5rem), calc((100% - 1240px) / 2));
  width: 118px;
  height: 130px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.9;
}
/* palm tree */
#amenities::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 120' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 116C50 88 48 66 40 44' stroke='%238C5E32' stroke-opacity='.75' stroke-width='3.5'/%3E%3Cpath d='M40 44C24 32 10 36 4 50M40 44C32 24 16 22 8 26M40 44C50 26 68 24 80 34M40 44C58 40 72 48 78 62M40 44C42 30 40 16 34 8' stroke='%232E5339' stroke-opacity='.75' stroke-width='3.5'/%3E%3Ccircle cx='38' cy='48' r='3' fill='%23F8A431' stroke='none'/%3E%3Cpath d='M20 116h52' stroke='%238C5E32' stroke-width='3.5'/%3E%3C/svg%3E"); }
/* sun */
#timeline::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='17' fill='%23F8A431' fill-opacity='.22' stroke='%23D96B27' stroke-width='4'/%3E%3Cpath d='M50 12v12M50 76v12M12 50h12M76 50h12M23 23l8 8M69 69l8 8M77 23l-8 8M31 69l-8 8' stroke='%23F8A431' stroke-opacity='.85' stroke-width='3.5'/%3E%3C/svg%3E"); }
/* waves */
#collection::after, #extended-stay::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' fill='none' stroke-linecap='round'%3E%3Cpath d='M6 20q14-14 28 0t28 0 28 0 24 0' stroke='%2316697A' stroke-opacity='.65' stroke-width='4'/%3E%3Cpath d='M6 42q14-14 28 0t28 0 28 0 24 0' stroke='%23092C49' stroke-opacity='.35' stroke-width='4'/%3E%3Cpath d='M6 64q14-14 28 0t28 0 28 0 24 0' stroke='%238C5E32' stroke-width='4'/%3E%3C/svg%3E"); height: 90px; }
@media (max-width: 1100px) {
  #amenities::after, #timeline::after, #collection::after, #extended-stay::after { display: none; }
}

/* "Bobber": the park's little floating mascot, perched on the footer line */
.footer { position: relative; }
.footer::after {
  content: "";
  position: absolute;
  top: -58px;
  right: max(var(--gutter, 1.5rem), 6%);
  width: 62px;
  height: 84px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 96'%3E%3Cpath d='M36 4v12' stroke='%23F9F6F0' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M8 46C8 30 16 14 36 14s28 16 28 32z' fill='%23F8A431'/%3E%3Cpath d='M8 46h56c0 18-12 28-28 28S8 64 8 46z' fill='%23FFFFFF'/%3E%3Cpath d='M8 46C8 30 16 14 36 14s28 16 28 32c0 18-12 28-28 28S8 64 8 46z' fill='none' stroke='%23092C49' stroke-width='3'/%3E%3Ccircle cx='27' cy='40' r='3.2' fill='%23092C49'/%3E%3Ccircle cx='45' cy='40' r='3.2' fill='%23092C49'/%3E%3Ccircle cx='21' cy='48' r='3.4' fill='%238C5E32' opacity='.55'/%3E%3Ccircle cx='51' cy='48' r='3.4' fill='%238C5E32' opacity='.55'/%3E%3Cpath d='M28 52q8 8 16 0' fill='none' stroke='%23092C49' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M0 80q9-8 18 0t18 0 18 0 18 0' fill='none' stroke='%2316697A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  animation: bobberBob 3.8s ease-in-out infinite;
}
@keyframes bobberBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(5px) rotate(3deg); }
}
@media (max-width: 640px) { .footer::after { width: 46px; height: 62px; top: -42px; } }

/* 404: "this fish got away" */
.oops-scene {
  position: absolute;
  right: max(var(--gutter, 1.5rem), 7%);
  bottom: 3.5rem;
  width: min(340px, 34vw);
  z-index: 3;
  pointer-events: none;
}
.oops-scene .oops-fish { animation: fishAway 4.5s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes fishAway {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(8px, -10px) rotate(-4deg); }
}
.oops-scene .oops-bobber { animation: bobberBob 3.8s ease-in-out infinite; transform-origin: 50% 80%; }
@media (max-width: 900px) { .oops-scene { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .footer::after, .oops-scene .oops-fish, .oops-scene .oops-bobber { animation: none; }
  .sticker-cluster .sticker { animation: none; opacity: 1 !important; }
}

/* --------------------------------------------------------------------------
   Rules page: search field
   -------------------------------------------------------------------------- */
.rules-search { margin: 0 0 1.75rem; }
.rules-search-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.rules-search-input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: var(--stamp-sm);
}
.rules-search-input:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.rules-search-status {
  min-height: 1.5em;
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
/* The filter toggles the [hidden] attribute; make sure no display rule beats it */
.legal-card-luxury [hidden],
.rules-jump-nav[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Privacy page: "On this page" table of contents
   Stacked card on mobile/tablet, sticky left rail on wide screens.
   -------------------------------------------------------------------------- */
.legal-toc {
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: var(--stamp-soft);
}
.legal-toc-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun-deep);
}
.legal-toc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.15rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-toc-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  border-left: 3px solid transparent;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.legal-toc-list a:hover,
.legal-toc-list a:focus-visible {
  background: var(--sand);
  border-left-color: var(--sun);
}
@media (min-width: 1100px) {
  .legal-page-container--toc {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    max-width: 1180px;
  }
  .legal-toc { position: sticky; top: 110px; margin-bottom: 0; }
  .legal-toc-list { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --------------------------------------------------------------------------
   Hero wave divider: overscan so the drifting waves never show their ends.
   The wave paths span exactly the SVG viewBox and the drift animation slides
   them sideways, so on wide screens a hard vertical edge appeared at the left
   and right. Making the SVG 10% wider than its clipped container (5% overscan
   per side) hides the ends at every width: the drift is 35 SVG units, which is
   about 3.2% of the container width at any size, always under the 5% overscan.
   -------------------------------------------------------------------------- */
.hero-wave-divider svg {
  width: 110%;
  max-width: none;
  margin-left: -5%;
}


/* --------------------------------------------------------------------------
   17. Rates page layout fixes (audit: spacing & layouts)
   -------------------------------------------------------------------------- */

/* Grids that used a fixed minmax() minimum overflowed their container on
   narrow phones; min(..., 100%) lets a single column shrink to fit. */
.rates-collection-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.rates-policy-policies-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.policies-luxury-grid { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.rates-collection-card, .rates-policy-policy-item, .rates-policy-policy-text { min-width: 0; }
.rates-policy-policy-text { overflow-wrap: anywhere; }

/* The schedule header was capped at 760px, which also squeezed the 12-category
   rate table inside it. Cap only the intro copy instead. */
.schedule-header-wrap { max-width: none; }
.schedule-header-wrap > p { max-width: 760px; margin-left: 0 !important; margin-right: 0 !important; }

/* RV / Marina summary tables: keep the price on one line and make the unit
   text secondary so values no longer break into 2-3 lines. */
.luxury-rates-table td:last-child { font-size: 0.9rem; font-weight: 600; }
.luxury-rates-table td:last-child strong { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }

/* Master rate table: tighter cells, and vehicle pills may wrap cleanly */
#master-rates-table { min-width: 640px !important; }
#master-rates-table td, #master-rates-table th { padding-left: 8px !important; padding-right: 8px !important; }
#master-rates-table td:last-child span { display: inline-block; white-space: normal; line-height: 1.35; }

/* Mobile rates cards alternative (< 768px) */
.mobile-rates-cards-wrapper {
  display: none;
}

@media (max-width: 768px) {
  .mobile-rates-cards-wrapper {
    display: block;
  }
  #master-rates-table {
    display: none !important;
  }
}

/* Tablet and phone: the 6-column table becomes one card per site type
   (no sideways scrolling, nothing cropped). Labels come from data-label,
   which an inline script on rates.html copies from the header row. */
@media (max-width: 860px) {
  .official-master-rates-wrap { padding: 1.1rem !important; }
  #master-rates-table { min-width: 0 !important; }
  #master-rates-table thead { display: none; }
  #master-rates-table, #master-rates-table tbody { display: block; }
  #master-rates-table tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.1rem 0.75rem; padding: 0.85rem 0.25rem;
  }
  #master-rates-table td { display: block; padding: 0 !important; text-align: left !important; }
  #master-rates-table td:nth-child(1) { grid-column: 1 / -1; font-size: 1rem; }
  #master-rates-table td:nth-child(2) { grid-column: 1 / -1; margin-bottom: 0.4rem; font-size: 0.85rem; }
  #master-rates-table td:nth-child(n+3):nth-child(-n+5)::before {
    content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
  }
  #master-rates-table td:nth-child(6) { grid-column: 1 / -1; margin-top: 0.5rem; }
}

@media (max-width: 640px) {
  .schedule-luxury-box { padding: 1rem; }
  .tier-card-content { padding: 1.5rem; }
  .rates-collection-card { padding: 1.25rem; }
  /* summary tables: label above value so nothing is squeezed */
  .luxury-rates-table tr { display: block; padding: 0.75rem 0; border-bottom: 1.4px dashed var(--line); }
  .luxury-rates-table td { display: block; border: 0; padding: 0.1rem 0; text-align: left !important; }
}

/* Breathing room between a card's description and its rate box */
.rates-collection-card .rate-card-desc { margin-bottom: 1rem; }

@media (max-width: 640px) {
  /* nested policy panel: less padding, and the icon sits above the text so the copy gets the full width */
  .rates-policy-wrap { padding: 1.25rem 1rem !important; }
  .rates-policy-policy-item { flex-direction: column; gap: 0.6rem; padding: 1rem; }
}

/* --------------------------------------------------------------------------
   18. Rates Page Grid Balancing, Margins & Touch Targets (P2/P3 Polish)
   -------------------------------------------------------------------------- */

/* Container Margin Alignment: align rates container with global 1320px width */
.rates-container-luxury {
  max-width: 1320px;
}

/* Heron Host Guarantee Perks (4 items): balanced 2x2 grid on desktop/tablet */
@media (min-width: 641px) {
  .heron-perks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Collection Grids: Eliminate dangling orphan cards */
@media (min-width: 768px) {
  /* 2 Tiers (60' Pull-Throughs): 2 columns */
  .rates-collection-grid.rates-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 4 Tiers (Waterfront & Marina Front): 2x2 grid */
  .rates-collection-grid.rates-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 641px) and (max-width: 959px) {
  /* 6 Tiers (Scenic Back-Ins): 2 columns on tablet */
  .rates-collection-grid.rates-grid-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  /* 6 Tiers: 3 columns on desktop */
  .rates-collection-grid.rates-grid-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Policies Luxury Grid (4 items): 4 columns on large screens, 2x2 on tablet */
@media (min-width: 1024px) {
  .policies-luxury-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .policies-luxury-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 11 Policies Items: Last item spans full width as an anchor banner */
@media (min-width: 641px) {
  .rates-policy-policies-grid > :last-child {
    grid-column: 1 / -1;
  }
}

/* Touch Targets: Meet WCAG 2.5.5 / 2.5.8 minimum target sizing (>= 44px) */
.btn-sm,
.nav-actions .btn,
.mobile-nav-drawer .btn,
.sticky-bar-actions .btn,
.mobile-menu-btn,
.rules-chip,
.gallery-tab-btn,
.rate-filter-btn,
.filter-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn {
  min-width: 44px;
  padding: 9px;
}

.mobile-nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.6rem 0;
}

.rules-chip {
  min-height: 44px;
}

.sticky-bar-close,
.mobile-drawer-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sticky-bar-close {
  min-width: 44px;
  min-height: 44px;
}

.calc-slider-wrap .calc-slider {
  min-height: 44px;
  cursor: pointer;
}

/* Text Size Floors: Ensure high readability across badges, pills, and labels (>= 12px) */
.heron-tag,
.logo-tapered-eyebrow,
.eyebrow {
  font-size: 0.78rem !important;
}

.family-badge,
.collection-index {
  font-size: 0.78rem !important;
}

.rate-pill-included,
.rate-pill-metered {
  font-size: 0.76rem !important;
  padding: 3px 8px;
}

.calc-metric-label {
  font-size: 0.8rem !important;
}




/* --------------------------------------------------------------------------
   Website Evolve: Bento Grid Modernization (Section 19)
   -------------------------------------------------------------------------- */
.bento-grid-evolution {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 260px);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 3rem;
}

.bento-evo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--ink); /* Fallback */
  text-decoration: none;
  box-shadow: var(--shadow-modern);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-evo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.85) 100%);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.bento-evo-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--shadow-modern);
}

.bento-evo-card:hover::before {
  opacity: 0.9;
}

/* Hover reveal distance tag */
.bento-evo-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  z-index: 2;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: var(--shadow-modern);
}

.bento-evo-card:hover .bento-evo-badge {
  opacity: 1;
  transform: translateY(0);
}

.bento-evo-content {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  color: #fff;
}

.bento-evo-content h3 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.bento-evo-content p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Grid Spans */
.bento-span-large {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-span-wide {
  grid-column: span 2;
  grid-row: span 1;
}

.bento-span-square {
  grid-column: span 1;
  grid-row: span 1;
}

.bento-span-full {
  grid-column: span 4;
  grid-row: span 1;
}

/* Ensure large card text scales up nicely */
.bento-span-large .bento-evo-content h3 {
  font-size: clamp(1.5rem, 4vw, 2rem);
}
.bento-span-large .bento-evo-content p {
  font-size: 1.05rem;
}

@media (max-width: 1024px) {
  .bento-grid-evolution {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .bento-span-large, .bento-span-wide, .bento-span-full {
    grid-column: span 2;
  }
  .bento-span-square {
    grid-column: span 1;
  }
  .bento-evo-card {
    min-height: 260px;
  }
  .bento-evo-badge {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .bento-grid-evolution {
    grid-template-columns: 1fr;
  }
  .bento-span-large, .bento-span-wide, .bento-span-square, .bento-span-full {
    grid-column: span 1;
  }
  .bento-evo-card {
    min-height: 240px;
  }
}

/* Visual Polish: Tactile Feedback */
.btn:active, .nav-btn:active, button:active, .bento-evo-card:active {
  transform: scale(0.98);
}


/* Table Scannability (Human Ergonomics) */
#master-rates-table th {
    position: sticky;
    top: 0;
    z-index: 15;
    background: #ffffff;
}
#master-rates-table th:first-child,
#master-rates-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #ffffff;
}
#master-rates-table th:first-child {
    z-index: 20;
    background: #ffffff;
}

/* Ensure mobile cards don't have sticky behavior */
@media (max-width: 860px) {
    #master-rates-table th:first-child,
    #master-rates-table td:first-child {
        position: static;
        z-index: auto;
    }
}


/* Sticky Booking Dock: Fluid non-overflowing bounds across 1024px-1366px */
.sticky-booking-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem var(--gutter, 1.5rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.sticky-bar-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.sticky-bar-title {
  font-family: var(--font-heading);
  font-size: clamp(0.85rem, 1.15vw, 1.05rem);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
@media (max-width: 1180px) {
  .sticky-bar-sub { display: none !important; }
}
@media (max-width: 900px) {
  .sticky-booking-bar {
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .sticky-bar-title {
    white-space: normal;
  }
  .sticky-bar-actions {
    width: 100%;
    justify-content: center;
  }
}


/* Equal-Height Card Alignment & Anchored Action Footers */
.collection-card,
.accommodation-card,
.area-guide-card,
.timeline-card,
.testimonial-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.collection-body,
.area-guide-body,
.timeline-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.collection-card .btn,
.accommodation-card .btn,
.collection-body .btn,
.area-guide-card .area-guide-meta,
.timeline-body .timeline-time-badge {
  margin-top: auto !important;
}

/* Outdoor Sunlight Font Boost (16px / 1.0rem with >= 12:1 contrast) */
#collection .collection-body > p,
.accommodation-card .collection-body > p {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
  opacity: 0.95 !important;
}

/* Primary CTA Sunset Amber Shimmer on Hover */
.btn-brass:hover,
.btn-sun-shimmer:hover {
  box-shadow: 4px 4px 0 var(--ink), 0 6px 22px rgba(248, 164, 49, 0.4) !important;
}

/* Active Map Pin Radar Pulse Animation */
@keyframes pinPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 105, 122, 0.75), 0 0 0 0 rgba(248, 164, 49, 0.55);
    transform: translate(-50%, -58%) scale(1.12);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(22, 105, 122, 0), 0 0 0 24px rgba(248, 164, 49, 0);
    transform: translate(-50%, -62%) scale(1.18);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 105, 122, 0), 0 0 0 0 rgba(248, 164, 49, 0);
    transform: translate(-50%, -58%) scale(1.12);
  }
}

.pin-pulse-active,
.gmp-gold-marker-wrap.pin-pulse-active,
.fallback-marker-node.pin-pulse-active .gmp-gold-marker-wrap {
  animation: pinPulse 1.6s infinite cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1200 !important;
  border-radius: 50%;
}

/* Desktop Click-to-Copy Phone Tooltip */
.phone-copy-tooltip {
  position: fixed;
  z-index: 10000;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--teal);
  box-shadow: 3px 3px 0 var(--line);
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  transition: opacity 0.2s ease, transform 0.2s ease;
}


/* Text Overflow & Badge Group Wrapping (text-layout-repair) */
.family-badge-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem 0.5rem !important;
  margin-bottom: 0.65rem !important;
  align-items: center !important;
}

.family-badge {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  padding: 0.28rem 0.65rem !important;
  font-size: 0.74rem !important;
  line-height: 1.25 !important;
}

/* Matcher Result Chips: Generous padding & clean border (no cramped edges) */
.matcher-result-specs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem 0.85rem !important;
  margin: 1.25rem 0 1.6rem !important;
}

.matcher-spec-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.38rem 0.85rem !important;
  border-radius: 4px !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--ink) !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  box-shadow: 2px 2px 0 rgba(9, 44, 73, 0.12) !important;
}

.matcher-spec-chip svg {
  color: var(--teal) !important;
  flex-shrink: 0 !important;
}


/* Extended Stays Inclusions: Two-Line Uniform Architecture */
.calc-inclusions-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}

@media (max-width: 900px) {
  .calc-inclusions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 540px) {
  .calc-inclusions-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
}

.calc-inclusion-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.55rem !important;
}

.calc-inclusion-item svg {
  color: var(--teal) !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.calc-inclusion-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}

.calc-inclusion-name {
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 0.88rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

.calc-inclusion-price {
  font-weight: 700 !important;
  color: var(--teal) !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   MOBILE FOOTER STRUCTURAL & ERGONOMIC REFINEMENT
   ========================================================================== */
@media (max-width: 768px) {
  .footer {
    padding: 3.25rem 0 11.5rem !important;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
  }

  /* 1. Brand Section: Centered, balanced, and readable */
  .footer-brand {
    text-align: center !important;
    padding-bottom: 1.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .footer-brand img {
    margin: 0 auto 1rem !important;
    height: 48px !important;
    display: block !important;
  }

  .footer-brand p {
    margin: 0 auto !important;
    max-width: 320px !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* 2. Structured Card Containers for Columns */
  .footer-col {
    text-align: left !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 1.25rem 1.25rem 1.35rem !important;
  }

  .footer-col h3,
  .footer-col h4 {
    margin-bottom: 0.85rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    color: var(--paper) !important;
    padding-bottom: 0.45rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .footer-col h3::after,
  .footer-col h4::after {
    display: none !important;
  }

  /* 3. Navigation Links: 2-Column Balanced Grid instead of endless vertical scroll */
  .footer-grid > .footer-col:nth-child(2) .footer-links-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.35rem 1rem !important;
  }

  .footer-link-item {
    font-size: 0.86rem !important;
    padding: 0.35rem 0 !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .footer-link-item:hover {
    color: var(--paper) !important;
    text-decoration: underline !important;
    padding-left: 0 !important;
  }

  /* 4. Office & Contact Info: Comfortable Touch Targets */
  .footer-grid > .footer-col:nth-child(3) .footer-links-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .footer-grid > .footer-col:nth-child(3) .footer-link-item {
    min-height: 0 !important;
    line-height: 1.45 !important;
  }

  /* Highlight clickable phone number */
  .footer-grid > .footer-col:nth-child(3) a[href^="tel"] {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(140, 94, 50, 0.15) !important;
    color: #FFFFFF !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 4px !important;
    border: 1px solid rgba(140, 94, 50, 0.3) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0.25rem 0 !important;
    width: fit-content !important;
  }

  /* 5. Instant Reservations Column */
  .footer-grid > .footer-col:nth-child(4) p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .footer-grid > .footer-col:nth-child(4) .btn {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
  }

  /* 6. Footer Bottom: Balanced Centered Legal & Policy Links */
  .footer-bottom {
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1rem !important;
    font-size: 0.78rem !important;
  }

  .footer-bottom > div:first-child {
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-align: center !important;
  }

  .footer-bottom > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem 1rem !important;
  }

  .footer-bottom a {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0.25rem 0.35rem !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .footer-bottom a:hover {
    color: var(--paper) !important;
    text-decoration: underline !important;
  }
}


.scarcity-badge,
.badge-scarcity,
.urgent-scarcity-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--color-scarcity-bg);
  color: var(--color-navy);
  border: 1px solid var(--color-scarcity-border);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full, 9999px);
  line-height: 1.2;
}

.scarcity-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-scarcity-orange);
  display: inline-block;
  animation: pulseScarcity 2s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   Secondary Neutral: Coastal Seafoam Mist (#E6FCF9) Component Styling
   - Pill badge backgrounds
   - Subtle hover tints
   - Alert notification boxes
   -------------------------------------------------------------------------- */
.family-badge-teal,
.rates-category-pill,
.testimonial-verified-badge,
.angler-tip-badge,
.bento-content .family-badge,
.pill-teal,
.badge-seafoam,
.seafoam-pill {
  background: var(--seafoam) !important;
  color: var(--ink) !important;
  border: 1px solid var(--color-seafoam-border) !important;
}

.rates-category-pill.pill-amber {
  background: var(--color-scarcity-bg) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--sun) !important;
}

.rates-category-pill.pill-cypress {
  background: rgba(46, 83, 57, 0.15) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--marsh) !important;
}

.table tbody tr:hover,
.rates-table tbody tr:hover,
#master-rates-table tbody tr:hover,
.mobile-nav-link:hover,
.faq-item:hover,
.interactive-hover-seafoam:hover {
  background-color: var(--seafoam) !important;
}

.alert-box,
.notification-box,
.notice-box,
.alert-notification,
.info-callout,
.rate-extended-callout,
.vehicle-alert-box,
.vehicle-restriction-box,
.seafoam-callout {
  background: var(--seafoam) !important;
  color: var(--ink) !important;
  border: 1px solid var(--color-seafoam-border) !important;
  border-left: 4px solid var(--teal) !important;
  border-radius: 4px !important;
}

.family-badge-coral,
.badge-urgency {
  background: var(--color-scarcity-orange) !important;
  color: var(--color-navy) !important;
  border: 1.5px solid var(--color-navy) !important;
  font-weight: 800 !important;
}

/* Extended Stay Box & Card Token Styling */
.extended-stay-box,
.extended-stay-card {
  background: #FFFFFF !important;
  border: 2px solid var(--ink, #092C49) !important;
  border-radius: var(--radius-md, 6px) !important;
  box-shadow: 4px 4px 0 var(--line, #8C5E32) !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Campspot Reassurance Trust Badge & Quick-Booking Pill */
.footer-campspot-badge {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(22, 105, 122, 0.35);
  border: 1px solid rgba(230, 252, 249, 0.25);
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--color-seafoam);
  text-align: center;
  line-height: 1.3;
}

.footer-quick-booking-pill {
  margin-top: 0.6rem;
  display: flex;
  justify-content: center;
}

.footer-quick-booking-pill .quick-pill-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(9, 44, 73, 0.7);
  color: #FFFFFF;
  border: 1px solid rgba(230, 252, 249, 0.3);
  padding: 0.4rem 0.75rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
  width: 100%;
}

.footer-quick-booking-pill .quick-pill-phone:hover {
  background: var(--teal);
  border-color: var(--color-seafoam);
  color: #FFFFFF;
}