/* ==========================================================================
   Capitol International Productions — Design System
   Deep navy/near-black + vivid cobalt blue (shared group identity) with a
   warm gold/amber secondary accent unique to the grounds-entertainment brand.
   ========================================================================== */

:root,
[data-theme='light'] {
  /* ---- Surfaces ---- */
  --color-bg: #f6f7fa;
  --color-surface: #ffffff;
  --color-surface-2: #eef1f6;
  --color-surface-offset: #e6eaf1;
  --color-surface-offset-2: #dde3ec;
  --color-divider: #d6dce6;
  --color-border: #c7cfdc;

  /* ---- Text ---- */
  --color-text: #10162a;
  --color-text-muted: #4c5670;
  --color-text-faint: #8b93a8;
  --color-text-inverse: #f7f8fb;

  /* ---- Primary: Capitol Cobalt Blue ---- */
  --color-primary: #1857c9;
  --color-primary-hover: #123f97;
  --color-primary-active: #0d2f73;
  --color-primary-highlight: #d9e5fa;

  /* ---- Secondary: Warm Gold/Amber (brand differentiator) ---- */
  --color-gold: #c98a1f;
  --color-gold-hover: #a86f14;
  --color-gold-active: #855610;
  --color-gold-highlight: #f7e6c4;

  /* ---- Navy (deep brand base, used for dark sections in light mode too) ---- */
  --color-navy: #0a1128;
  --color-navy-2: #121b3a;

  /* ---- Semantic ---- */
  --color-success: #2f7d4f;
  --color-success-highlight: #d5ecdd;
  --color-warning: #a3521a;
  --color-warning-highlight: #f0dcc7;
  --color-error: #a8293f;
  --color-error-highlight: #f2d7dc;

  /* ---- Radius ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.9rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Shadows (tone-matched to navy) ---- */
  --shadow-sm: 0 1px 2px oklch(0.15 0.03 260 / 0.1);
  --shadow-md: 0 6px 16px oklch(0.15 0.03 260 / 0.14);
  --shadow-lg: 0 16px 40px oklch(0.15 0.03 260 / 0.22);

  /* ---- Content widths ---- */
  --content-narrow: 640px;
  --content-default: 980px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* ---- Fonts ---- */
  --font-display: 'Archivo Expanded', 'Arial Narrow', sans-serif;
  --font-body: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-brand: 'Cinzel', 'Times New Roman', serif;
  --font-script: 'Fraunces', Georgia, serif;
}

/* ---- Theme-invariant text-on-dark tokens ----
   Many components (site-header, mobile-nav, hero, .section-dark,
   feature-card, footer, chat-panel-header, trust-section, stat labels)
   ALWAYS render on a hardcoded var(--color-navy) background, in both
   light and dark site themes. These must use a text color that stays
   light-on-dark regardless of [data-theme], instead of --color-text-inverse
   (which flips to near-black in dark mode and becomes unreadable against
   the still-dark navy background). Defined identically outside the
   [data-theme] blocks so it never flips. */
:root {
  --text-on-dark: #f7f8fb;
  --text-on-dark-muted: color-mix(in oklab, #f7f8fb 82%, transparent);
}

[data-theme='dark'] {
  --color-bg: #0a0e1c;
  --color-surface: #0f1526;
  --color-surface-2: #141b30;
  --color-surface-offset: #182038;
  --color-surface-offset-2: #1d2640;
  --color-divider: #26304c;
  --color-border: #313d5c;

  --color-text: #e7eaf3;
  --color-text-muted: #a3aec7;
  --color-text-faint: #6b7592;
  --color-text-inverse: #10162a;

  --color-primary: #4d8bf0;
  --color-primary-hover: #6fa1f4;
  --color-primary-active: #8bb4f6;
  --color-primary-highlight: #1c2c4f;

  --color-gold: #e0a83f;
  --color-gold-hover: #ecbd63;
  --color-gold-active: #f2cc81;
  --color-gold-highlight: #3a2f18;

  --color-navy: #05070f;
  --color-navy-2: #0a0e1c;

  --color-success: #5cbb80;
  --color-success-highlight: #1c3226;
  --color-warning: #d98f4e;
  --color-warning-highlight: #3a2717;
  --color-error: #e26a7f;
  --color-error-highlight: #3a1c22;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md: 0 6px 16px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.5);
}

/* ==========================================================================
   Type Scale
   ========================================================================== */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  --text-hero: clamp(2.25rem, 0.2rem + 6.2vw, 6.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}

/* ==========================================================================
   Global Typography
   ========================================================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-script);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--color-gold);
  font-weight: 500;
}

p {
  max-width: 68ch;
}

a {
  color: inherit;
}

/* ==========================================================================
   Layout Helpers
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-10));
}
.wrap--narrow {
  max-width: var(--content-default);
}

.section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
  position: relative;
}
.section--tight {
  padding-block: clamp(var(--space-10), 6vw, var(--space-20));
}

.section-dark {
  background: var(--color-navy);
  color: var(--text-on-dark);
}
[data-theme='dark'] .section-dark {
  background: var(--color-navy);
}

.grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}
.grid > * {
  /* Prevents CSS Grid item blowout: without this, a grid item's default
     min-width:auto can force its track wider than the container on narrow
     (mobile) screens, clipping form fields and cards off the right edge. */
  min-width: 0;
}
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ==========================================================================
   IAFE Announcement Bar (homepage, top of body)
   ========================================================================== */
.iafe-announce {
  background: var(--color-navy);
  padding-block: var(--space-3);
}
.iafe-announce p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: color-mix(in oklab, white 92%, transparent);
  text-align: center;
  line-height: 1.5;
}
.iafe-announce a {
  color: var(--color-gold-highlight);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-gold-highlight) 50%, transparent);
  text-underline-offset: 2px;
  white-space: nowrap;
}
.iafe-announce a:hover {
  color: var(--color-gold-highlight);
  text-decoration-color: var(--color-gold-highlight);
}

/* ==========================================================================
   Curved Section Divider (nod to sister site, used sparingly)
   ========================================================================== */
.wave-divider {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  margin-top: -1px;
}
.wave-divider path {
  fill: var(--color-bg);
}
[data-theme='dark'] .wave-divider path {
  fill: var(--color-bg);
}
/* Attraction detail hero: shrink the divider so the gap before "About This
   Attraction" roughly matches the gap before the banner photo below it. */
.video-hero + .wave-divider {
  height: clamp(30px, 4vw, 56px);
}

/* Attraction detail "About This Attraction" section: the wave-divider above
   adds clamp(30px,4vw,56px) of extra visual whitespace on top of this
   section's own clamp(40px,6vw,80px) top padding, so the effective top gap
   is clamp(70px,10vw,136px). Match that on the bottom so the block reads as
   evenly spread out above and below instead of top-heavy. */
.about-section {
  padding-bottom: clamp(70px, 10vw, 136px);
}
/* Frame the copy in a defined card instead of letting it float directly on
   the flat page background -- gives the section visual weight/depth instead
   of reading as plain empty space, while keeping the brand's neutral+accent
   palette (gold top edge ties back to the CTA buttons). */
.about-section .wrap--narrow {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--color-gold);
  padding: var(--space-8) var(--space-6);
}
@media (min-width: 640px) {
  .about-section .wrap--narrow {
    padding: var(--space-10) var(--space-10);
  }
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--color-navy) 96%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid oklch(from white l c h / 0.08);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-header--hidden {
  transform: translateY(-100%);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  max-width: 1680px;
  padding-inline: clamp(var(--space-5), 3vw, var(--space-8));
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-on-dark);
  text-decoration: none;
  flex-shrink: 0;
}
.brand svg {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
/* Compact header lockup: globe icon (cropped from the hero logo) + a 3-line
   wordmark set in the same Cinzel Roman-inscription face as the hero logo,
   so the nav mark reads as a smaller version of the full logo rather than
   a different design. Kept modest since the homepage hero carries the large
   version of the same mark. */
.brand-icon {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 2px;
}
/* CAPITOL is the actual hero-logo artwork (same file, just the wordmark
   cropped out at full source resolution), not recreated in a web font —
   this guarantees an exact match to the hero logo's font and chrome finish
   instead of an approximation. Downscaling a high-res source keeps it crisp
   at nav size. */
.brand-name-img {
  height: 14px;
  width: auto;
  display: block;
}
.brand-sub {
  font-family: var(--font-brand), var(--font-display);
  font-size: 8.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #cbd3e2;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.brand-tag {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-gold);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .brand-icon {
    height: 31px;
  }
  .brand-text {
    gap: 2px;
  }
  .brand-name-img {
    height: 11px;
  }
  .brand-sub {
    font-size: 7px;
    letter-spacing: 0.04em;
  }
  .brand-tag {
    font-size: 6px;
    letter-spacing: 0.05em;
  }
}

.main-nav {
  display: none;
  align-items: center;
  gap: var(--space-3);
}
.main-nav a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-on-dark);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  opacity: 0.85;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current='page'] {
  opacity: 1;
  border-bottom-color: var(--color-gold);
}
@media (min-width: 1500px) {
  .main-nav {
    display: flex;
  }
}
@media (max-width: 1599px) {
  .header-actions .btn {
    display: none;
  }
}

/* Desktop nav dropdowns (About / Buyers / Conferences) — visible only
   alongside .main-nav at >=1500px. Hover for mouse, focus-within +
   click-toggle (via nav.js) for keyboard/touch parity. */
.nav-item {
  position: relative;
  display: flex;
}
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-on-dark);
  background: none;
  border: none;
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
  opacity: 0.85;
  white-space: nowrap;
  cursor: pointer;
  font-weight: inherit;
}
.nav-trigger:hover,
.nav-trigger:focus-visible,
.nav-item.is-open .nav-trigger,
.nav-item.has-current .nav-trigger {
  opacity: 1;
  border-bottom-color: var(--color-gold);
}
.nav-caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-item.is-open .nav-caret {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: var(--space-2);
  background: var(--color-navy);
  border: 1px solid oklch(from white l c h / 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  display: none;
  flex-direction: column;
  z-index: 20;
}
.nav-item.is-open .nav-dropdown,
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: flex;
}
.nav-dropdown a {
  font-family: var(--font-display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-on-dark);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  opacity: 0.85;
  white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible,
.nav-dropdown a[aria-current='page'] {
  opacity: 1;
  background: color-mix(in oklab, var(--text-on-dark) 10%, transparent);
  color: var(--color-gold);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  text-decoration: none;
  min-height: 44px;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
/* .btn's own display:inline-flex otherwise beats the browser's default
   [hidden] { display: none } rule on specificity, so a button marked
   hidden (e.g. a per-attraction "Watch Video" quick-link with no video)
   stays visibly rendered even though it's functionally inert. Force it. */
.btn[hidden] {
  display: none !important;
}
@media (max-width: 480px) {
  .btn--wrap-safe {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-hover);
}
.btn--gold {
  background: var(--color-gold);
  color: #1a1002;
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--color-gold-hover);
}
.btn--outline {
  background: transparent;
  border-color: color-mix(in oklab, var(--text-on-dark) 40%, transparent);
  color: var(--text-on-dark);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.btn--outline-dark {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn--outline-dark:hover,
.btn--outline-dark:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  min-height: 36px;
}
/* Lighter treatment for secondary utility actions (Copy Link, Back to All)
   that shouldn't compete visually with the real conversion buttons
   (Get a Quote, View One-Sheet, References) in the same row. */
.btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-text-muted) 50%, transparent);
  text-underline-offset: 3px;
  min-height: auto;
}
.btn--link:hover,
.btn--link:focus-visible {
  color: var(--color-primary);
  text-decoration-color: var(--color-primary);
}
.btn--block {
  width: 100%;
}
/* Dynamic-length CTAs (e.g. "Request <Attraction Name>") can exceed the
   viewport on mobile since the label length varies per attraction. Allow
   these to wrap and constrain to the available width instead of
   overflowing past the screen edge. */
[data-detail-cta] {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--text-on-dark);
}
.nav-toggle svg {
  width: 32px;
  height: 32px;
}
@media (min-width: 1500px) {
  .nav-toggle {
    display: none;
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--text-on-dark);
  border: 1px solid oklch(from white l c h / 0.15);
}
.theme-toggle:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 200;
  background: var(--color-navy);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  visibility: hidden;
}
.mobile-nav.is-open {
  visibility: visible;
  transform: translateX(0);
}
.mobile-nav-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-8);
}
.mobile-nav nav {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
}
.mobile-nav .btn {
  max-width: 480px;
  margin-inline: auto;
}
.mobile-nav-close {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
}
.mobile-nav-close svg {
  width: 32px;
  height: 32px;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  text-decoration: none;
  padding-block: var(--space-3);
  border-bottom: 1px solid oklch(from white l c h / 0.1);
}
.mobile-nav a[aria-current='page'] {
  color: var(--color-gold);
}
.mobile-nav .btn {
  margin-top: var(--space-6);
}

/* Mobile nav accordion groups (About / Buyers / Conferences) */
.mobile-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  background: none;
  border: none;
  padding-block: var(--space-3);
  border-bottom: 1px solid oklch(from white l c h / 0.1);
  cursor: pointer;
  text-align: left;
}
.mobile-nav-group.is-open .nav-caret {
  transform: rotate(180deg);
}
.mobile-nav-group-toggle .nav-caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.mobile-nav-group-panel {
  display: flex;
  flex-direction: column;
  padding-left: var(--space-4);
}
.mobile-nav-group-panel[hidden] {
  display: none;
}
.mobile-nav-group-panel a {
  font-size: var(--text-base);
  padding-block: var(--space-3);
  border-bottom: 1px solid oklch(from white l c h / 0.06);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: var(--text-on-dark);
  overflow: hidden;
  background: var(--color-navy);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-navy) 55%, transparent) 0%,
    color-mix(in oklab, var(--color-navy) 78%, transparent) 55%,
    var(--color-navy) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
}
.hero h1 {
  font-size: var(--text-hero);
  line-height: 1.02;
  max-width: 16ch;
  margin-bottom: var(--space-5);
  overflow-wrap: normal;
  word-break: keep-all;
}
.hero h1.is-long-word {
  max-width: 22ch;
  font-size: clamp(2rem, 5vw, 3.4rem);
}
.hero .eyebrow {
  font-size: var(--text-lg);
  display: block;
  margin-bottom: var(--space-4);
}
.hero p.lead {
  font-size: var(--text-lg);
  max-width: 46ch;
  color: color-mix(in oklab, var(--text-on-dark) 88%, transparent);
  margin-bottom: var(--space-8);
  font-family: var(--font-body);
  text-transform: none;
}
/* CMS-editable hero lead text is injected as plain text (no <p class="lead"> wrapper),
   so this wrapper div needs its own matching typography + spacing to keep the
   buttons below from crowding the text. */
.hero div[data-cms-html] {
  font-size: var(--text-lg);
  max-width: 46ch;
  color: color-mix(in oklab, var(--text-on-dark) 88%, transparent);
  margin-bottom: var(--space-8);
  font-family: var(--font-body);
}
.hero div[data-cms-html] p {
  margin: 0;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Attraction detail hero: with the description, category tags, and CTA
   removed, the only remaining content is the attraction name — pin it to
   the bottom-left corner instead of vertically centering it, so the hero
   reads as a clean full-bleed banner with just a name label overlaid. */
.hero.video-hero {
  align-items: flex-end;
}
.hero.video-hero .hero-content {
  padding-block: 0 clamp(var(--space-8), 6vw, var(--space-12));
}
.hero.video-hero h1 {
  margin-bottom: 0;
  /* Attraction names run longer than marketing taglines ("Nature Nick's
     Animal Adventures", "Paul Bunyan Lumberjack Show"). The base --text-hero
     size scales up to 6.5rem and forces long names into 3 stacked lines,
     overwhelming the banner photo. Cap it smaller here so most names fit in
     1-2 lines with room for the photo/video to show through. */
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.75rem);
  line-height: 1.08;
  max-width: 20ch;
}
@media (max-width: 640px) {
  /* Keep the name clear of the "Watch Full Video" control, which moves to
     the top-right corner on mobile (see .hero-play-btn media query below). */
  .hero.video-hero .hero-content {
    padding-block: 0 var(--space-8);
  }
  .hero.video-hero h1 {
    /* The 70% cap here fought the goal: narrowing the box forced LONGER
       names into 3 lines, growing the dark banner taller instead of
       shrinking it. The text is bottom-anchored and the video button sits
       top-right, so a near-full-width box doesn't risk overlap -- widen it
       and drop the font a step further so long names settle into 2 lines
       (short names stay one line) instead of 3. */
    max-width: 92%;
    font-size: 1.5rem;
    line-height: 1.15;
  }
}
@media (max-width: 480px) {
  .hero-cta .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}

/* Pilot layout (Sea Lion Splash test page): the banner photo stays clearly
   visible instead of being washed out by the full-height gradient, with the
   heading block pinned to the upper-left corner over a small darkened wedge. */
.hero--pilot {
  align-items: flex-start;
}
.hero--pilot .hero-content {
  padding-top: clamp(var(--space-10), 8vw, var(--space-16));
  padding-bottom: clamp(var(--space-10), 8vw, var(--space-16));
  max-width: 640px;
  /* .wrap centers itself with margin-inline: auto — cancel that here so the
     heading block hugs the left edge of the banner instead of sitting in the
     middle of the page, keeping just the existing left padding as a gutter. */
  margin-inline: 0;
}
.hero--pilot .hero-media::after {
  /* Left-to-right scrim (not a corner wedge) since the heading now runs the
     full left edge of the banner instead of sitting only near the top. */
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-navy) 70%, transparent) 0%,
    color-mix(in oklab, var(--color-navy) 38%, transparent) 38%,
    transparent 68%
  );
}
@media (max-width: 720px) {
  .hero--pilot .hero-media::after {
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-navy) 72%, transparent) 0%,
      color-mix(in oklab, var(--color-navy) 45%, transparent) 45%,
      transparent 70%
    );
  }
}

/* Brand-forward hero: centered logo lockup on the left, balanced by an
   "at a glance" stat panel on the right — capitolselect.com-inspired, with
   the extra column keeping the wide desktop canvas from feeling empty. */
.hero--brand {
  min-height: 74vh;
  display: flex;
  align-items: center;
}
.hero--brand .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-10);
  padding-block: clamp(var(--space-14), 9vw, var(--space-20));
}
.hero--brand .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
  gap: clamp(var(--space-5), 2.2vw, var(--space-8));
}
/* This section also carries .video-hero (shared with attraction-detail pages,
   which intentionally zero the top padding to pin content to the bottom).
   Re-assert real top/bottom breathing room here so the logo never sits flush
   against the sticky nav bar, and let the `gap` above — not per-element
   margins — carry the vertical rhythm between logo / eyebrow / heading /
   lead / CTAs / trust line for a consistent, balanced stack. */
.hero--brand.video-hero .hero-content {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
/* Wider variant for hero content that carries the stat grid + trusted-by
   logo strip (e.g. the homepage "Why Book With Capitol" hero) so those
   multi-column rows have room to lay out instead of collapsing into the
   narrow 56ch text column used by simple heading+CTA hero content. */
.hero--brand .hero-content.hero-content--wide {
  max-width: 1040px;
}
@media (min-width: 960px) {
  .hero--brand .hero-content.hero-content--wide {
    max-width: 1040px;
  }
}
.hero-logo-mark {
  width: clamp(320px, 28vw, 460px);
  max-width: 72%;
  height: auto;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}
.hero-logo-mark--badge {
  width: clamp(240px, 24vw, 360px);
}
.hero--brand .eyebrow {
  font-size: var(--text-base);
  letter-spacing: 0.12em;
  color: var(--color-gold);
  white-space: nowrap;
  margin: 0;
}
.hero--brand h1 {
  font-size: clamp(1.5rem, 0.95rem + 1.7vw, 2.25rem);
  line-height: 1.2;
  max-width: 620px;
  margin-inline: auto;
  margin-block: 0;
  text-align: center;
}
.hero--brand p.lead,
.hero--brand div[data-cms-html] {
  max-width: 48ch;
  margin-inline: auto;
  margin-block: 0;
  text-align: center;
  font-size: var(--text-base);
}
.hero--brand .hero-cta {
  justify-content: center;
  margin: 0;
}

/* Simple trust line under the hero CTAs (replaces the removed "At a Glance"
   stat panel — kept the approved trust caption, dropped the boxed layout). */
.hero-trust-line {
  margin: 0;
  text-align: center;
  font-size: var(--text-xs);
  line-height: 1.5;
  font-family: var(--font-body);
  color: var(--text-on-dark-muted);
  max-width: 48ch;
  margin-inline: auto;
}
@media (min-width: 960px) {
  .hero--brand .hero-content {
    max-width: 68ch;
  }
}
.hero--brand .hero-media::after {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-navy) 62%, transparent) 0%,
    color-mix(in oklab, var(--color-navy) 72%, transparent) 45%,
    var(--color-navy) 100%
  );
}
@media (max-width: 640px) {
  .hero-logo-mark {
    width: 260px;
    max-width: 72%;
  }
  .hero-logo-mark--badge {
    width: clamp(200px, 55vw, 280px);
  }
  .hero--brand {
    min-height: 0;
  }
  .hero--brand .eyebrow {
    white-space: normal;
    max-width: 30ch;
    margin-inline: auto;
  }
  .hero-highlight {
    padding: var(--space-6);
  }
  .hero-highlight-grid {
    gap: var(--space-3);
  }
}

.page-hero {
  min-height: 46vh;
}
.page-hero h1 {
  font-size: var(--text-3xl);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.card-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.card-tag-group .card-tag {
  margin-bottom: 0;
}
.card-tag--gold {
  color: var(--color-gold-active);
  background: var(--color-gold-highlight);
}

.feature-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-navy);
  color: var(--text-on-dark);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-md);
}
.feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in oklab, var(--color-navy) 92%, transparent) 100%);
  z-index: 1;
}
.feature-card-body {
  position: relative;
  z-index: 2;
  padding: var(--space-6);
}
.feature-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.feature-card p {
  font-family: var(--font-body);
  text-transform: none;
  font-size: var(--text-sm);
  color: color-mix(in oklab, var(--text-on-dark) 85%, transparent);
}

/* ==========================================================================
   Capitol Select cross-sell banner (homepage) — navy/gold on-brand card
   pointing to the sister division. Uses --text-on-dark tokens (not
   hardcoded hex) so it stays readable in both [data-theme='light'] and
   [data-theme='dark'], matching the section-dark contrast fix.
   ========================================================================== */
.select-banner {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-2) 100%);
  border: 1px solid color-mix(in oklab, var(--color-gold) 35%, transparent);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  box-shadow: var(--shadow-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.select-banner-text {
  flex: 1 1 420px;
}
.select-banner-text .eyebrow {
  color: var(--color-gold);
}
.select-banner-text h2 {
  font-size: var(--text-2xl);
  color: var(--text-on-dark);
  margin-bottom: var(--space-3);
}
.select-banner-text p {
  font-family: var(--font-body);
  text-transform: none;
  font-size: var(--text-base);
  color: var(--text-on-dark-muted);
  max-width: 65ch;
}
.select-banner-action {
  flex: 0 0 auto;
}

/* ==========================================================================
   Agent Cards
   ========================================================================== */
.agent-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.agent-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.agent-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--color-gold);
}
.agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.agent-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  line-height: 1.1;
}
.agent-role {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-gold-active);
  font-size: var(--text-sm);
  text-transform: none;
}
.agent-regions {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.agent-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.agent-contact a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.agent-contact a:hover {
  text-decoration: underline;
}
.agent-bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.draft-flag {
  font-size: var(--text-xs);
  color: var(--color-warning);
  background: var(--color-warning-highlight);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* ==========================================================================
   Staff Cards + Bio Modal (Agents & Staff page)
   Clean scannable grid on the page itself; clicking "View Full Bio" opens
   the complete biography in a modal so the grid never has to show long text.
   Hover is visual polish only (card lift + button emphasis) — the button is
   always visible and tappable so mobile/tablet (no hover) works identically.
   ========================================================================== */
.staff-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .staff-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.staff-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}
.staff-card:hover,
.staff-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.staff-card-photo {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-gold);
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
}
.staff-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.staff-card-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  line-height: 1.15;
}
.staff-card-title {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-gold-active);
  font-size: var(--text-sm);
  text-transform: none;
}
.staff-card-specialty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 30ch;
}
.staff-card-btn {
  margin-top: var(--space-4);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.staff-card:hover .staff-card-btn,
.staff-card:focus-within .staff-card-btn {
  background: var(--color-gold);
  color: var(--color-navy);
  border-color: var(--color-gold);
}

.staff-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: color-mix(in oklab, black 78%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.staff-modal-overlay[hidden] {
  display: none;
}
.staff-modal-panel {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--space-10) var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.staff-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-text) 8%, transparent);
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}
.staff-modal-close:hover,
.staff-modal-close:focus-visible {
  background: color-mix(in oklab, var(--color-text) 16%, transparent);
}
.staff-modal-photo {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 3px solid var(--color-gold);
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  flex-shrink: 0;
  margin-bottom: var(--space-4);
}
.staff-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.staff-modal-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  line-height: 1.15;
}
.staff-modal-title {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-gold-active);
  font-size: var(--text-base);
  text-transform: none;
  margin-top: var(--space-1);
}
.staff-modal-specialty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-2);
}
.staff-modal-bio {
  margin-top: var(--space-6);
  text-align: left;
  align-self: stretch;
}
.staff-modal-bio p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.staff-modal-bio p:last-child {
  margin-bottom: 0;
}
.staff-modal-contact {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.staff-modal-contact-link {
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.staff-modal-contact-link:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .staff-modal-panel {
    padding: var(--space-8) var(--space-5) var(--space-6);
    max-height: 92vh;
  }
  .staff-modal-photo {
    width: 108px;
    height: 108px;
  }
}

/* Static, crawlable full-page staff profile (/about/<slug>.html). Mirrors the
   modal's visual language but as a page section rather than an overlay. */
.staff-profile-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.staff-profile-photo {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 3px solid var(--color-gold);
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  flex-shrink: 0;
  margin-bottom: var(--space-5);
}
.staff-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.staff-profile-title {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-gold-active);
  font-size: var(--text-base);
  margin-top: var(--space-1);
}
.staff-profile-specialty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-2);
}
.staff-profile-bio {
  margin-top: var(--space-8);
  text-align: left;
  align-self: stretch;
}
.staff-profile-bio p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.staff-profile-bio p:last-child {
  margin-bottom: 0;
}
.staff-profile-contact {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.staff-profile-contact-link {
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
}
.staff-profile-contact-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-navy);
  color: color-mix(in oklab, var(--text-on-dark) 85%, transparent);
  padding-block: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-8);
}
.footer-grid {
  display: grid;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.footer-brand svg {
  width: 40px;
  height: 40px;
}
.footer-logo-img {
  height: 48px;
  width: auto;
  display: block;
}

/* ==========================================================================
   Logo badge — rounded navy chip so the white-on-transparent logo-v6-final
   artwork always sits on its native dark backdrop, for use on LIGHT
   backgrounds (light-theme header variants, admin login/dashboard, printable
   one-sheets) where the header/footer's always-dark background isn't present.
   ========================================================================== */
.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0a1128;
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  line-height: 0;
}
.logo-badge img {
  display: block;
  height: 40px;
  width: auto;
}
.logo-badge--lg img {
  height: 64px;
}
.logo-badge--sm {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
}
.logo-badge--sm img {
  height: 28px;
}
.footer-brand strong {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-base);
  color: var(--text-on-dark);
}
.footer-tagline {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-gold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.footer-heading {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-links a {
  color: color-mix(in oklab, var(--text-on-dark) 85%, transparent);
  text-decoration: none;
  font-size: var(--text-sm);
}
.footer-links a:hover {
  color: var(--color-gold);
}
.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.social-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--text-on-dark) 10%, transparent);
  color: var(--text-on-dark);
}
.social-btn:hover {
  background: var(--color-gold);
  color: var(--color-navy);
}
.social-btn svg {
  width: 20px;
  height: 20px;
}
.footer-bottom {
  border-top: 1px solid oklch(from white l c h / 0.1);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-admin-link {
  color: var(--color-text-faint);
  text-decoration: none;
  opacity: 0.6;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.footer-admin-link:hover,
.footer-admin-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* Back to Top button — sits at the very bottom of every page's footer */
.back-to-top-row {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid oklch(from white l c h / 0.1);
  text-align: center;
}
.back-to-top-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.back-to-top-btn:hover,
.back-to-top-btn:focus-visible {
  background: var(--color-gold);
  color: var(--color-navy);
  transform: translateY(-2px);
}
.back-to-top-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* On mobile, keep Staff Login clear of the fixed live-chat launcher
   (bottom-left) and "Get a Quote" button (bottom-right) by right-aligning
   it and giving the footer extra bottom clearance. */
@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-admin-link {
    align-self: flex-end;
  }
  .site-footer {
    padding-bottom: calc(var(--space-8) + 96px);
  }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.field .hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.field input,
.field select,
.field textarea {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  font-size: var(--text-base);
  min-height: 48px;
  color: var(--color-text);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.field-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
.field-row > * {
  min-width: 0;
}
@media (min-width: 640px) {
  .field-row--2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.routing-result {
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-primary);
  background: var(--color-primary-highlight);
  padding: var(--space-6);
  margin-top: var(--space-8);
}
.routing-result[hidden] {
  display: none;
}
.routing-result h3 {
  font-size: var(--text-lg);
  color: var(--color-primary-active);
  margin-bottom: var(--space-3);
}
[data-theme='dark'] .routing-result h3 {
  color: var(--color-primary);
}

/* ==========================================================================
   Media / Promo Library
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
.filter-chip {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  min-height: 40px;
}
.filter-chip.is-active,
.filter-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.filter-search {
  width: 100%;
  flex-basis: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.filter-search:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* Attraction category chips: fixed 2-column grid so every chip lines up
   evenly instead of wrapping at inconsistent widths (mobile-friendly, saves
   vertical space vs. one chip per row). */
#attractions-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 641px) {
  #attractions-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #attractions-chips .filter-chip {
    flex: 0 0 auto;
  }
}
#attractions-chips .filter-chip {
  border-radius: var(--radius-lg);
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shortlist-star {
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.shortlist-star:hover {
  color: var(--color-gold);
  transform: scale(1.1);
}
.shortlist-star.is-saved {
  color: var(--color-gold);
}
.shortlist-star.is-saved svg {
  fill: var(--color-gold);
}

.promo-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.promo-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.promo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-body {
  padding: var(--space-5);
}
.promo-body h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}
.promo-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
}

/* Attractions listing: single clean-photo thumbnail + video badge */
.promo-thumb-wrap {
  position: relative;
}
.promo-thumb--single {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.promo-thumb--single .thumb-single {
  display: block;
  width: 100%;
  height: 100%;
}
.promo-thumb--single .thumb-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.promo-card:hover .promo-thumb--single .thumb-single img {
  transform: scale(1.04);
}
.promo-video-badge {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-navy) 82%, transparent);
  color: var(--text-on-dark);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.promo-video-badge:hover,
.promo-video-badge:focus-visible {
  background: var(--color-gold);
  color: var(--color-navy);
}

.social-follow-grid {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  flex-wrap: wrap;
}
.social-follow-card {
  --brand: var(--color-gold);
  --brand-glow: color-mix(in oklab, var(--color-gold) 45%, transparent);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 220px;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.social-follow-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand);
  opacity: 0.85;
}
.social-follow-card:hover,
.social-follow-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px var(--brand-glow), var(--shadow-lg);
  border-color: var(--brand);
}
.social-follow-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px -4px var(--brand-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.social-follow-card:hover .social-follow-icon,
.social-follow-card:focus-visible .social-follow-icon {
  transform: scale(1.08);
  box-shadow: 0 10px 26px -4px var(--brand-glow);
}
.social-follow-icon svg {
  width: 30px;
  height: 30px;
}
.social-follow-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.social-follow-handle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Brand colors per platform */
.social-follow-card--facebook {
  --brand: #1877f2;
  --brand-glow: rgba(24, 119, 242, 0.45);
}
.social-follow-card--instagram {
  --brand: #c2226e;
  --brand-glow: rgba(194, 34, 110, 0.45);
}
.social-follow-card--instagram .social-follow-icon {
  background: linear-gradient(135deg, #405de6 0%, #833ab4 35%, #c13584 60%, #fd1d1d 80%, #fcaf45 100%);
}
.social-follow-card--vimeo {
  --brand: #1ab7ea;
  --brand-glow: rgba(26, 183, 234, 0.45);
}

/* Dark-section variant (e.g. homepage "Follow Us on Social Media") */
.section-dark .social-follow-card {
  background: color-mix(in oklab, var(--color-surface) 10%, transparent);
  border-color: color-mix(in oklab, white 14%, transparent);
  color: var(--text-on-dark);
}
.section-dark .social-follow-card:hover,
.section-dark .social-follow-card:focus-visible {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--color-surface) 15%, transparent);
}
.section-dark .social-follow-handle {
  color: color-mix(in oklab, var(--text-on-dark) 70%, transparent);
}

/* ==========================================================================
   Utility text/misc
   ========================================================================== */
.text-muted {
  color: var(--color-text-muted);
}
.center {
  text-align: center;
}
.mx-auto {
  margin-inline: auto;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.badge-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}
/* Sentence-style notes (with links) must wrap as normal text, not flex columns */
p.badge-note {
  display: inline-block;
  line-height: 1.6;
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  z-index: 999;
  border-radius: var(--radius-md);
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Video Hero (background video with poster fallback + reduced-motion)
   ========================================================================== */
.video-hero {
  min-height: 58vh;
}
.video-hero .hero-content {
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
}
.video-hero .hero-media {
  background: var(--color-navy);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-video-hero].video-ready .hero-video {
  opacity: 1;
}
[data-video-hero].video-ready .hero-poster {
  opacity: 0;
}
[data-video-hero].no-motion .hero-video {
  display: none;
}
[data-video-hero].no-motion .hero-poster {
  opacity: 1;
}

/* Real video background (YouTube/Vimeo loop) replacing the AI clip when a
   genuine attraction video is available */
.hero-video-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: none;
}
.hero-video-embed[hidden] {
  display: none;
}
[data-video-hero].real-video-hero .hero-poster {
  opacity: 0;
}
[data-video-hero].real-video-hero .hero-video {
  display: none;
}

/* Vertical (YouTube Shorts) hero: blurred full-width backdrop, with the
   9:16 player at full banner height to the right of the title. */
[data-video-hero].real-video-hero--vertical::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: var(--hero-vertical-bg) center / cover no-repeat;
  filter: blur(28px) brightness(0.8) saturate(1.2);
  z-index: 0;
}
[data-video-hero].real-video-hero--vertical .hero-video-embed {
  top: 0;
  left: auto;
  right: 14%;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  aspect-ratio: 9 / 16;
  transform: none;
  z-index: 1;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
@media (max-width: 720px) {
  [data-video-hero].real-video-hero--vertical .hero-video-embed {
    right: 50%;
    transform: translateX(50%);
  }
}

/* Clickable "watch full video" control overlaid on the hero background,
   shown whenever a real attraction video (embedded loop or external link)
   is available so the hero itself functions as a video player entry point */
.hero-play-btn {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--text-on-dark) 25%, transparent);
  background: color-mix(in oklab, var(--color-navy) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.hero-play-btn svg {
  color: var(--color-gold);
  flex-shrink: 0;
}
.hero-play-btn:hover {
  background: color-mix(in oklab, var(--color-navy) 78%, transparent);
  border-color: var(--color-gold);
  transform: translateY(-2px);
}
.hero-play-btn[hidden] {
  display: none;
}
@media (max-width: 640px) {
  /* On narrow screens the hero content (heading + description + CTA
     button) is vertically centered and often tall enough that its "Request
     This Show" button lands at roughly the same height as this bottom-right
     overlay control, causing the two to visually overlap. Move the play
     control to the top-right corner on mobile instead, which stays clear of
     the stacked hero text and the CTA button in every case we've tested. */
  .hero-play-btn {
    top: var(--space-4);
    right: var(--space-4);
    bottom: auto;
    left: auto;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }
}

/* ==========================================================================
   Sticky header — solid-on-scroll reinforcement
   ========================================================================== */
.site-header--solid {
  background: color-mix(in oklab, var(--color-navy) 99%, transparent);
  box-shadow: var(--shadow-md);
  border-bottom-color: oklch(from white l c h / 0.14);
}

/* ==========================================================================
   Sticky floating "Get a Quote" button
   ========================================================================== */
.sticky-quote-btn {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-gold);
  color: #1a1002;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease;
}
.sticky-quote-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sticky-quote-btn:hover,
.sticky-quote-btn:focus-visible {
  background: var(--color-gold-hover);
}
.sticky-quote-btn svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 640px) {
  .sticky-quote-btn span {
    display: none;
  }
  .sticky-quote-btn {
    padding: var(--space-3);
    right: var(--space-4);
    bottom: var(--space-4);
  }
}
/* Keep clear of the live-chat launcher on mobile */
@media (max-width: 640px) {
  .sticky-quote-btn {
    bottom: calc(var(--space-4) + 64px);
  }
}

/* ==========================================================================
   Glassmorphism cards over video/dark sections
   ========================================================================== */
.glass-card {
  background: color-mix(in oklab, var(--color-surface) 12%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid color-mix(in oklab, white 14%, transparent);
  border-radius: var(--radius-lg);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  background: color-mix(in oklab, var(--color-surface) 18%, transparent);
  border-color: color-mix(in oklab, var(--color-gold) 45%, transparent);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   Why Book With Capitol — trust section + animated stat counters
   ========================================================================== */
.trust-section {
  background: var(--color-navy);
  color: var(--text-on-dark);
  padding-block: var(--space-24);
  position: relative;
  overflow: hidden;
}
.trust-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at top right,
    color-mix(in oklab, var(--color-primary) 22%, transparent),
    transparent 60%
  );
  pointer-events: none;
}
.trust-heading {
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin-bottom: var(--space-12);
}
.trust-heading .eyebrow {
  color: var(--color-gold);
}
.trust-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--space-16);
}
.trust-card {
  padding: var(--space-6);
}
.trust-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.trust-card p {
  font-family: var(--font-body);
  color: color-mix(in oklab, var(--text-on-dark) 82%, transparent);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.stat-row {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid color-mix(in oklab, white 14%, transparent);
  padding-top: var(--space-10);
}
.stat-item {
  text-align: left;
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  font-weight: 800;
  color: var(--color-gold);
  line-height: 1;
  display: block;
}
.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: color-mix(in oklab, var(--text-on-dark) 78%, transparent);
  margin-top: var(--space-2);
}

/* ==========================================================================
   Trusted-by client logo strip
   ========================================================================== */
/* Legacy .trustedby-section/.trustedby-row/.trustedby-label/.trustedby-copy
   markup removed (unused, and its shared .trustedby-logo grayscale filter was
   unintentionally desaturating the live .trustedby-strip badges below). */

/* ==========================================================================
   Badges (New / Trending)
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-full);
  line-height: 1.4;
}
.badge--new {
  background: var(--color-gold-highlight);
  color: var(--color-gold-active);
}
.badge--trending {
  background: var(--color-primary-highlight);
  color: var(--color-primary-active);
}
.badge--availability {
  background: #D4A02A;
  color: #14182B;
  border: 1px solid #D4A02A;
  font-weight: 700;
}
.badge--acquisition {
  background: #B3122E;
  color: #fff;
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  padding: 0.4em 0.95em;
  box-shadow: 0 2px 8px rgba(179, 18, 46, 0.35);
}
.hero-availability { margin-bottom: var(--space-3); font-size: var(--text-base); }
.card-badge-slot {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: flex;
  gap: var(--space-2);
}

/* ==========================================================================
   Newsletter capture
   ========================================================================== */
.newsletter-block {
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.newsletter-copy h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.newsletter-copy p {
  color: var(--color-text-muted);
  max-width: 42ch;
}
.newsletter-form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.newsletter-form input[type='email'] {
  min-width: 240px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.newsletter-form input[type='email']:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.newsletter-success {
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: 600;
  display: none;
}
.newsletter-success.is-visible {
  display: block;
}

/* ==========================================================================
   Blog / News list + detail
   ========================================================================== */
.blog-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.blog-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.blog-card-body {
  padding: var(--space-6);
}
.blog-card-date {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-gold-hover);
  margin-bottom: var(--space-2);
  display: block;
}
.blog-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.blog-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.blog-post-body {
  max-width: var(--content-narrow);
  margin-inline: auto;
  font-family: var(--font-body);
  line-height: 1.7;
}
.blog-post-body p {
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list {
  max-width: var(--content-default);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-6) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.4em;
  color: var(--color-gold-hover);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item-body {
  padding: 0 var(--space-8) var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ==========================================================================
   Agent quick-match wizard (Contact page)
   ========================================================================== */
.match-wizard {
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.match-wizard-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--space-6);
}
.match-wizard label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.match-wizard select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.match-result {
  background: var(--color-surface);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: none;
}
.match-result.is-visible {
  display: block;
}
.match-result strong {
  font-family: var(--font-display);
  display: block;
  margin-bottom: var(--space-1);
}

/* ==========================================================================
   vCard "Save Contact" button
   ========================================================================== */
.vcard-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.vcard-btn:hover,
.vcard-btn:focus-visible {
  background: color-mix(in oklab, var(--color-primary-highlight) 70%, var(--color-primary) 30%);
}
.vcard-btn svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Live chat widget
   ========================================================================== */
.chat-launcher {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s ease;
}
.chat-launcher:hover {
  background: var(--color-primary-hover);
  transform: scale(1.06);
}
.chat-launcher svg {
  width: 24px;
  height: 24px;
}
.chat-panel {
  position: fixed;
  left: var(--space-5);
  bottom: calc(var(--space-5) + 72px);
  z-index: 91;
  width: min(320px, calc(100vw - var(--space-8)));
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.chat-panel-header {
  background: var(--color-navy);
  color: var(--text-on-dark);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-panel-header h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.chat-panel-close {
  background: none;
  border: none;
  color: var(--text-on-dark);
  cursor: pointer;
  padding: var(--space-1);
  opacity: 0.8;
}
.chat-panel-body {
  padding: var(--space-5);
}
.chat-panel-body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.chat-panel-body textarea {
  width: 100%;
  min-height: 90px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  resize: vertical;
  margin-bottom: var(--space-3);
}
.chat-panel-body input[type='email'] {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.chat-success {
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: 600;
  display: none;
}
.chat-success.is-visible {
  display: block;
}
@media (max-width: 640px) {
  .chat-launcher,
  .chat-panel {
    left: var(--space-4);
  }
  .chat-panel {
    bottom: calc(var(--space-4) + 68px);
  }
}

/* ==========================================================================
   Regional coverage / SEO copy blocks
   ========================================================================== */
.coverage-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.coverage-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
  color: var(--color-gold-hover);
}
.coverage-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Admin bar hint (unused publicly — utility for /admin pages only)
   ========================================================================== */
.admin-hidden-hint {
  display: none;
}

/* ==========================================================================
   Animated stat counters (Why Book With Capitol trust section)
   ========================================================================== */
.stat-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: var(--space-6);
}
.stat-item {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--color-surface) 8%, transparent);
  border: 1px solid color-mix(in oklab, white 12%, transparent);
}
[data-counter] {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl, 2.75rem);
  font-weight: 800;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: color-mix(in oklab, var(--text-on-dark) 82%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Trusted-by fair logo strip
   ========================================================================== */
.trustedby-strip {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-4);
}
.trustedby-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: var(--radius-md, 12px);
  padding: var(--space-4) var(--space-6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.trustedby-badge:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}
.trustedby-logo {
  display: block;
  max-height: 88px;
  max-width: 200px;
  width: auto;
  height: auto;
}
.trustedby-caption {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: var(--space-6) auto 0;
}

/* ==========================================================================
   Featured-acts scrolling marquee (homepage)
   ========================================================================== */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee-track,
.marquee-track:focus-within {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
.marquee-card {
  flex: 0 0 auto;
  width: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.marquee-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.marquee-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.marquee-card-body {
  padding: var(--space-4);
}
.marquee-card .card-tag {
  margin-bottom: var(--space-2);
}
.marquee-card h3 {
  font-size: var(--text-base);
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0;
}

/* ==========================================================================
   Featured Attractions (homepage) badges + photo
   ========================================================================== */
.featured-card-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.featured-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.card.reveal:hover .featured-card-thumb img {
  transform: scale(1.04);
}
/* Featured Shows (homepage) — the whole card is a single <a>, not just a
   button inside it, so the entire tile is clickable. Markup reuses the All
   Categories .promo-card/.promo-thumb/.promo-body structure (same width,
   height, padding, image aspect ratio, border radius, and title styling)
   so the two homepage sections look visually consistent; the hover-lift,
   focus ring, and image-zoom below are layered on top via this class only
   so the All Categories cards are unaffected. */
a.featured-show-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
a.featured-show-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}
a.featured-show-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
a.featured-show-card .promo-thumb img {
  transition: transform 0.35s ease;
}
a.featured-show-card:hover .promo-thumb img {
  transform: scale(1.04);
}
/* Fixed 2-line clamp on the title keeps every card exactly the same height
   regardless of how long an individual show's name is. */
a.featured-show-card .promo-body h3 {
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--text-base) * 1.3 * 2);
}
.badge-new {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-gold);
  color: #1a1002;
  font-family: var(--font-display);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-full);
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Newsletter signup
   ========================================================================== */
.newsletter-form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  max-width: 480px;
}
.newsletter-form input[type='email'] {
  flex: 1 1 220px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.newsletter-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.newsletter-success {
  display: none;
  color: var(--color-success);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
.newsletter-success.is-visible {
  display: block;
}

/* ==========================================================================
   Blog list + post
   ========================================================================== */
.blog-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.blog-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.blog-card-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.blog-date {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gold-hover);
  font-family: var(--font-display);
}
.blog-card h3 {
  font-size: var(--text-lg);
  margin: 0;
}
.blog-post-body {
  max-width: var(--content-narrow);
  margin-inline: auto;
  font-size: var(--text-base);
  line-height: 1.75;
}
.blog-post-body p {
  margin-bottom: var(--space-5);
}
.blog-post-meta {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

/* ==========================================================================
   How Booking Works steps (Contact page)
   ========================================================================== */
.how-it-works-step {
  text-align: left;
}
.how-it-works-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-gold-highlight);
  color: var(--color-gold-active);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.how-it-works-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

/* ==========================================================================
   Agent-matching quiz (Contact page)
   ========================================================================== */
.quiz-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.quiz-step label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}
.quiz-box select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.quiz-result {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  display: none;
}
.quiz-result.is-visible {
  display: block;
}
.quiz-result-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   vCard "Save Contact" button
   ========================================================================== */
.vcard-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  margin-top: var(--space-3);
}
.vcard-btn svg {
  width: 14px;
  height: 14px;
}

/* FAQ accordion legacy rules removed — superseded by the card-style block above
   (previously duplicated .faq-item/.summary rules here forced padding: var(--space-5) 0,
   which zeroed out horizontal padding and pushed question text and the + icon flush
   against the card edges). */

/* ==========================================================================
   Social follow strip
   ========================================================================== */
.social-strip {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.social-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: var(--font-display);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.social-strip-btn:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}
.social-strip-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   Admin CMS page (utilitarian — not brand-styled, function over form)
   ========================================================================== */
.admin-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f1f2f5;
  color: #1a1d29;
  margin: 0;
}
.admin-login-wrap {
  max-width: 360px;
  margin: 10vh auto;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.admin-login-wrap h1 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.admin-login-wrap input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}
/* Show/hide password toggle — admin login context (dark icon on white field) */
.admin-login-wrap .password-field-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}
.admin-login-wrap .password-field-wrap input {
  margin-bottom: 0;
  padding-right: 2.75rem;
  color: #1a1d29;
}
.admin-login-wrap .password-toggle-btn {
  color: #888;
}
.admin-login-wrap .password-toggle-btn:hover,
.admin-login-wrap .password-toggle-btn:focus-visible {
  color: #1a1d29;
}
.admin-login-wrap button,
.admin-btn {
  background: #1857c9;
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.admin-login-wrap button:hover,
.admin-btn:hover {
  background: #123f97;
}
.admin-login-wrap button.password-toggle-btn,
.admin-login-wrap button.password-toggle-btn:hover {
  background: none;
  color: #888;
  padding: 0.3rem;
}
.admin-login-wrap button.password-toggle-btn:hover,
.admin-login-wrap button.password-toggle-btn:focus-visible {
  color: #1a1d29;
}
.admin-error {
  color: #a8293f;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  display: none;
}
.admin-shell {
  display: flex;
  min-height: 100vh;
}
.admin-sidebar {
  width: 220px;
  background: #10162a;
  color: #e7eaf3;
  padding: 1.5rem 1rem;
  flex-shrink: 0;
}
.admin-sidebar h2 {
  font-size: 1rem;
  margin-bottom: 1.25rem;
  color: #e0a83f;
}
.admin-back-link {
  display: block;
  font-size: 0.8rem;
  color: #9fb3d9;
  text-decoration: none;
  margin-bottom: 1rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  border: 1px solid #26304c;
}
.admin-back-link:hover,
.admin-back-link:focus-visible {
  background: #1857c9;
  color: #fff;
  border-color: #1857c9;
}
/* Light-background variant for the pre-login screen (white card) — the
   default .admin-back-link colors are tuned for the dark sidebar and read
   too faint on white. */
.admin-back-link--light {
  color: #1857c9;
  border-color: #dde3f0;
  background: #f4f6fb;
}
.admin-back-link--light:hover,
.admin-back-link--light:focus-visible {
  background: #1857c9;
  color: #fff;
  border-color: #1857c9;
}
.admin-sidebar button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #c7cfdc;
  padding: 0.55rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
.admin-sidebar button:hover,
.admin-sidebar button.is-active {
  background: #1857c9;
  color: #fff;
}
.admin-main {
  flex: 1;
  padding: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.admin-main h1 {
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}
.admin-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border-radius: 6px;
}
.admin-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0;
  font-size: 0.85rem;
}
.admin-table th,
.admin-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #eee;
  text-align: left;
  vertical-align: top;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-table th:last-child,
.admin-table td:last-child {
  white-space: nowrap;
  max-width: none;
}
.admin-table-scroll-hint {
  display: none;
  font-size: 0.78rem;
  color: #888;
  margin: -0.75rem 0 1rem;
}
.admin-status-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.admin-status-live {
  background: #e6f4ea;
  color: #1e7a34;
}
.admin-status-hidden {
  background: #fdeaea;
  color: #a12c2c;
}
.admin-table button[data-toggle-hide] {
  margin-right: 0.35rem;
}
@media (max-width: 800px) {
  .admin-main {
    padding: 1.25rem 1rem;
  }
  .admin-table-scroll-hint {
    display: block;
  }
}
.admin-table th {
  background: #f6f7fa;
  font-weight: 600;
}
.admin-table button {
  background: #eee;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  margin-right: 0.3rem;
}
.admin-table button.danger {
  background: #f2d7dc;
  color: #a8293f;
}
.admin-table button.is-active {
  background: #1857c9;
  color: #fff;
}
.admin-table button.is-active.danger {
  background: #a8293f;
  color: #fff;
}
.admin-table a.admin-btn-secondary {
  background: #e7edfa;
  color: #1857c9;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.admin-table a.admin-btn-secondary:hover {
  background: #d3ddf6;
}

/* Drag-and-drop row reordering (Staff / Support & Ops Team CRUD tables) */
.admin-table tr[draggable="true"] {
  cursor: grab;
}
.admin-table tr[draggable="true"].is-dragging {
  opacity: 0.45;
  background: #f0f4ff;
}
.admin-table td.admin-drag-handle {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  text-align: center;
  color: #999;
  font-size: 0.95rem;
  letter-spacing: -0.1em;
  user-select: none;
  cursor: grab;
  white-space: nowrap;
}
.admin-section-hint {
  font-size: 0.82rem;
  color: #666;
  margin: -0.5rem 0 1rem;
}

/* Photo upload field (Staff / Support & Ops Team CRUD forms) */
.admin-photo-field {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.admin-photo-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ddd;
  background: #f2f2f2;
  flex-shrink: 0;
}
.admin-photo-preview--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #999;
  text-align: center;
  padding: 0.2rem;
}
.admin-photo-field input[type="file"] {
  width: auto;
  padding: 0.2rem 0;
  border: none;
  font-size: 0.78rem;
}
.admin-photo-status {
  font-size: 0.75rem;
  color: #1e7a34;
}

/* Promo Materials: attraction list + editor split layout */
.pm-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1rem;
}
.pm-list-col {
  flex: 0 0 320px;
  min-width: 0;
}
.pm-editor-col {
  flex: 1;
  min-width: 0;
}
.pm-list {
  max-height: 720px;
  overflow-y: auto;
  border: 1px solid #d5d9e2;
  border-radius: 8px;
  background: #fff;
}
.pm-list-item {
  background: #fff;
}
.pm-list-item.is-active {
  background: #1857c9;
}
.pm-list-item.is-active .pm-list-item-name,
.pm-list-item.is-active .pm-list-item-meta {
  color: #fff;
}
.pm-list-item-name {
  color: #1a1d29;
}
.pm-list-item-meta {
  color: #888;
}
@media (max-width: 800px) {
  .pm-layout {
    flex-direction: column;
  }
  .pm-list-col {
    flex: 1 1 auto;
    width: 100%;
  }
  .pm-list-col .pm-list {
    max-height: 320px;
  }
  .pm-editor-col {
    width: 100%;
  }
}
.admin-form {
  background: #fff;
  padding: 1.25rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  max-width: 640px;
}
.admin-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  margin-top: 0.75rem;
}
.admin-form input,
.admin-form textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
}
.admin-form textarea {
  min-height: 70px;
}

/* Toggle switch — used for on/off content settings like the homepage IAFE banner */
.admin-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.admin-toggle-row .admin-toggle-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}
.admin-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.admin-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.admin-toggle .admin-toggle-track {
  position: absolute;
  inset: 0;
  background: #c7ccd6;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.admin-toggle .admin-toggle-track::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.admin-toggle input:checked + .admin-toggle-track {
  background: var(--color-navy);
}
.admin-toggle input:checked + .admin-toggle-track::before {
  transform: translateX(20px);
}
.admin-toggle input:focus-visible + .admin-toggle-track {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}
.admin-card {
  background: #fff;
  padding: 1.25rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  max-width: 640px;
  border-left: 4px solid var(--color-gold);
}
.admin-card h2 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}
.admin-card .admin-card-hint {
  font-size: 0.78rem;
  color: #666;
  margin: 0 0 0.5rem;
}
.admin-card label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  margin-top: 0.75rem;
}
.admin-card input,
.admin-card textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box;
}
.admin-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: #2f7d4f;
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 4px;
  font-size: 0.85rem;
  display: none;
  z-index: 100;
}
.admin-toast.is-visible {
  display: block;
}
@media (max-width: 800px) {
  .admin-shell {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
  }
}

/* ==========================================================================
   Attraction detail: real-photo gallery, video showcase, lightbox, modal
   ========================================================================== */
.attraction-gallery-section {
  background: var(--color-surface-2);
}
.attraction-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}
.gallery-item {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  cursor: zoom-in;
  box-shadow: 0 8px 24px color-mix(in oklab, black 18%, transparent);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item:hover,
.gallery-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px color-mix(in oklab, black 28%, transparent);
}
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.08);
}
@media (max-width: 640px) {
  .gallery-item:first-child {
    grid-column: span 1;
    grid-row: span 1;
  }
}
/* Applied via JS (see fixOrphanGalleryItem in attraction-detail.js) when the
   last gallery photo would otherwise sit alone in its row — auto-fill grids
   have a column count that varies by viewport width, so a fixed multiple-of-N
   photo count can't guarantee a full last row at every breakpoint. Spanning
   the orphan across the full row width makes it read as an intentional
   closing wide shot instead of an awkward lone square. */
.gallery-item--orphan {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
  max-width: 720px;
  margin: 0 auto;
}
/* Last photo stretched across the empty columns of a partly filled last
   row — takes the row's height from its neighbours so tops and bottoms line
   up. */
.gallery-item--fill {
  position: relative;
  aspect-ratio: auto;
  align-self: stretch;
}
.gallery-item--fill img {
  position: absolute;
  inset: 0;
}
@media (max-width: 640px) {
  .gallery-item--orphan {
    aspect-ratio: 16 / 9;
    max-width: none;
  }
}

/* Additional video gallery (attraction.additional_videos) — a grid of
   clickable thumbnail cards, each opening the shared video modal. Mirrors
   .attraction-gallery-grid/.gallery-item but with a dark play-button
   overlay and a small platform badge so buyers know what they're about to
   open (YouTube / Vimeo / Facebook). */
.attraction-video-gallery-section {
  background: var(--color-surface-2);
}
.attraction-video-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.video-gallery-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #111;
  box-shadow: 0 8px 24px color-mix(in oklab, black 18%, transparent);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.video-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in oklab, black 10%, transparent) 0%, color-mix(in oklab, black 45%, transparent) 100%);
}
.video-gallery-item-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in oklab, black 55%, transparent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.video-gallery-item-playbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in oklab, white 90%, transparent);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px color-mix(in oklab, black 35%, transparent);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-gallery-item:hover,
.video-gallery-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px color-mix(in oklab, black 28%, transparent);
}
.video-gallery-item:hover img,
.video-gallery-item:focus-visible img {
  transform: scale(1.08);
}
.video-gallery-item:hover .video-gallery-item-playbtn,
.video-gallery-item:focus-visible .video-gallery-item-playbtn {
  transform: translate(-50%, -50%) scale(1.08);
}
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: color-mix(in oklab, black 82%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.gallery-lightbox[hidden] {
  display: none;
}
.gallery-lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.gallery-lightbox-close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, white 12%, transparent);
  color: var(--text-on-dark);
  font-size: 1.75rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}
.gallery-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, white 14%, transparent);
  color: var(--text-on-dark);
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s ease;
}
.gallery-lightbox-nav:hover,
.gallery-lightbox-nav:focus-visible {
  background: color-mix(in oklab, white 26%, transparent);
}
.gallery-lightbox-prev {
  left: var(--space-4);
}
.gallery-lightbox-next {
  right: var(--space-4);
}
.gallery-lightbox-count {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-on-dark);
  font-size: var(--text-sm);
  background: color-mix(in oklab, black 40%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
@media (max-width: 640px) {
  .gallery-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .gallery-lightbox-prev {
    left: var(--space-2);
  }
  .gallery-lightbox-next {
    right: var(--space-2);
  }
}

/* Mobile landscape pseudo-fullscreen: expands the active video container to
   cover the full viewport when a mobile device rotates to landscape, without
   relying on the browser Fullscreen API (unavailable in this environment and
   unreliable/gesture-gated on mobile Safari anyway). */
.mobile-landscape-expand {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 9999 !important;
  background: #000 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}
.mobile-landscape-expand video,
.mobile-landscape-expand iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Video showcase: real background loop, left clearly visible (only a light
   scrim for button contrast), with a centered semi-transparent play button
   that opens the full video — the video itself keeps playing in the background. */
.video-showcase {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Secondary/optional video section (attraction.additional_video_url) —
   same visual language as the hero video showcase but shorter, since it
   sits further down the page alongside photos rather than up top. */
.video-showcase--secondary {
  min-height: 38vh;
}
@media (max-width: 640px) {
  .video-showcase--secondary {
    min-height: 42vh;
  }
}
.video-showcase-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.video-showcase-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: none;
}
.video-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-showcase-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--color-navy) 16%, transparent);
  pointer-events: none;
  transition: background 0.2s ease;
}
.video-showcase-label {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-dark);
  background: color-mix(in oklab, var(--color-navy) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-on-dark) 30%, transparent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  pointer-events: none;
}
@media (max-width: 640px) {
  .video-showcase-label {
    top: var(--space-4);
    left: var(--space-4);
  }
}
.video-showcase:hover .video-showcase-overlay {
  background: color-mix(in oklab, var(--color-navy) 8%, transparent);
}
.video-showcase-playbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--color-navy) 40%, transparent);
  border: 2px solid color-mix(in oklab, var(--text-on-dark) 65%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--text-on-dark);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.video-showcase-playbtn svg {
  color: var(--color-gold);
  margin-left: 3px;
}
.video-showcase-playbtn:hover {
  background: color-mix(in oklab, var(--color-navy) 58%, transparent);
  border-color: var(--color-gold);
  transform: translate(-50%, -50%) scale(1.08);
}
@media (max-width: 640px) {
  .video-showcase-playbtn {
    width: 64px;
    height: 64px;
  }
  .video-showcase-playbtn svg {
    width: 20px;
    height: 20px;
  }
}

/* Banner showcase: legacy real photo band shown at the bottom of the page
   (the AI/real video now lives up in the hero instead). Every attraction
   page renders this section at the same fixed aspect ratio (matching the
   Sea Lion Splash banner photo, 1983x793 ≈ 2.5:1) so the banner reads as a
   consistent, uniform size site-wide instead of varying with each photo's
   native aspect ratio. object-fit: cover crops the sides/top of photos
   that aren't already 2.5:1 to fill the box — the Sea Lion Splash photo
   itself is exactly 2.5:1, so it still displays with zero cropping. */
.banner-showcase {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  padding-block: clamp(var(--space-6), 4vw, var(--space-12)) !important;
}
.banner-showcase-media {
  position: relative;
  width: 100%;
  max-width: 1656px;
  aspect-ratio: 1983 / 793;
  margin-inline: auto;
  line-height: 0;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}
.banner-showcase-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg, 12px);
}
/* Some legacy banner photos are extreme portrait crops or ultra-wide header
   graphics with baked-in title text; cropping those to fill the 2.5:1 box
   would cut off the subject or the text. attraction-detail.js measures the
   real image dimensions at load time and adds this class so those specific
   outliers show the full, uncropped photo (letterboxed on the navy
   background) instead — the box size stays consistent site-wide either way. */
.banner-showcase-media.fit-contain img:not(.banner-showcase-backdrop) {
  object-fit: contain;
  position: relative;
  z-index: 1;
}
/* Blurred backdrop fill: a second copy of the same photo, scaled up and
   blurred, sits behind the sharp letterboxed image so the empty bars read
   as an intentional soft-glow frame instead of flat navy dead space. Only
   shown when the sharp image is in letterboxed (fit-contain) mode — in the
   normal cover-fill case the sharp image already fills the whole box, so
   the backdrop stays invisible underneath it (opacity: 0, no extra cost). */
.banner-showcase-media .banner-showcase-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) saturate(1.15) brightness(0.5);
  transform: scale(1.15);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0;
  border-radius: var(--radius-lg, 12px);
}
.banner-showcase-media.fit-contain .banner-showcase-backdrop {
  opacity: 1;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: color-mix(in oklab, black 88%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.video-modal[hidden] {
  display: none;
}
.video-modal-inner {
  position: relative;
  width: min(1100px, 94vw);
  aspect-ratio: 16 / 9;
}
/* Facebook videos shared with us are typically portrait Reels \u2014 forcing
   the standard 16:9 box would letterbox them heavily, so use a
   height-driven portrait box instead. */
.video-modal-inner--portrait {
  width: auto;
  height: min(85vh, 820px);
  aspect-ratio: 9 / 16;
}
.video-modal-frame,
.video-modal-frame iframe,
.video-modal-frame video {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Self-hosted clips play in a real <video> element. The modal box is sized to
   the clip's own aspect ratio in JS, so `contain` only ever pads a rounding
   difference; the black backdrop keeps that invisible. */
.video-modal-frame video {
  object-fit: contain;
  background: #000;
  display: block;
}
.video-modal-fallback {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--text-on-dark);
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.video-modal-fallback:hover {
  opacity: 1;
}
.video-modal-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, white 12%, transparent);
  color: var(--text-on-dark);
  font-size: 1.6rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Promo Materials password gate — on-brand navy/gold overlay (not the
   utilitarian admin styling; this faces external buyers/press, not staff)
   ========================================================================== */
.promo-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: linear-gradient(160deg, var(--color-navy) 0%, #05070f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.promo-gate[hidden] {
  display: none;
}
.promo-gate-card {
  width: 100%;
  max-width: 420px;
  background: color-mix(in oklab, var(--color-navy) 88%, white 4%);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.promo-gate-back {
  display: inline-flex;
  margin-bottom: var(--space-5);
}
.promo-gate-card .logo-badge {
  margin: 0 auto var(--space-5);
}
.promo-gate-card h1 {
  font-size: var(--text-lg);
  color: var(--text-on-dark);
  margin-bottom: var(--space-3);
}
.promo-gate-card p {
  color: color-mix(in oklab, var(--text-on-dark) 78%, transparent);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.promo-gate-card input {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-4);
  border: 1px solid color-mix(in oklab, var(--text-on-dark) 25%, transparent);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  background: color-mix(in oklab, white 6%, transparent);
  color: var(--text-on-dark);
}
/* Show/hide password toggle — promo gate context (light icon on dark field) */
.promo-gate-card .password-field-wrap {
  position: relative;
  margin-bottom: var(--space-4);
}
.promo-gate-card .password-field-wrap input {
  margin-bottom: 0;
  padding-right: 2.75rem;
}
.promo-gate-card .password-toggle-btn {
  color: color-mix(in oklab, var(--text-on-dark) 55%, transparent);
}
.promo-gate-card .password-toggle-btn:hover,
.promo-gate-card .password-toggle-btn:focus-visible {
  color: var(--text-on-dark);
}
.promo-gate-card input::placeholder {
  color: color-mix(in oklab, var(--text-on-dark) 50%, transparent);
}
.promo-gate-error {
  color: #ff9b9b;
  font-size: 0.85rem;
  margin-bottom: var(--space-4);
  display: none;
}
.promo-gate-note {
  margin-top: var(--space-6);
  font-size: 0.78rem;
  color: color-mix(in oklab, var(--text-on-dark) 55%, transparent);
}
body[data-promo-locked] #main,
body[data-promo-locked] .site-footer,
body[data-promo-locked] .sticky-quote-btn,
body[data-promo-locked] .chat-launcher,
body[data-promo-locked] .chat-panel {
  display: none !important;
}

/* Promo library: real photo grid + video cards per attraction */
.promo-attraction-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.promo-attraction-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.promo-attraction-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.promo-attraction-photos a {
  display: block;
  cursor: zoom-in;
}
.promo-attraction-photos--print {
  grid-template-columns: repeat(4, 1fr);
}
.promo-photo-tile {
  position: relative;
}
.promo-photo-download {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-sm, 4px);
  background: rgba(10, 20, 40, 0.82);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.promo-photo-tile:hover .promo-photo-download {
  opacity: 1;
}
.promo-attraction-card {
  display: flex;
  flex-direction: column;
}
.promo-attraction-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.promo-kit-cats {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.promo-attraction-body h3 {
  font-size: var(--text-base);
  margin: var(--space-1) 0 var(--space-2);
  line-height: 1.3;
}
.promo-kit-photonote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.promo-badge-hi {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-primary, #01696f);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.promo-kit-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: auto;
}
.promo-kit-btns .btn,
.promo-kit-view {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.promo-kit-btns .btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.promo-kit-view {
  margin-top: var(--space-2);
}
@media (max-width: 640px) {
  .promo-attraction-photos--print {
    grid-template-columns: repeat(3, 1fr);
  }
}
.promo-category-heading {
  font-size: var(--text-xl);
  margin: var(--space-12) 0 var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.promo-category-heading:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.promo-search-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.promo-search-bar input {
  flex: 1 1 260px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  background: var(--color-surface);
  color: var(--text-primary);
}

/* ==========================================================================
   Trending News Articles (homepage, industry news feed) + attraction detail
   "In the News" section (shared markup via [data-news-section])
   ========================================================================== */
/* Give the section a slightly deeper neutral tone than the sections around
   it (gallery uses --color-surface-2) so consecutive light sections don't
   blur into one flat, undifferentiated wash. */
[data-news-section] {
  background: var(--color-surface-offset);
}
.news-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border-top: 3px solid var(--color-primary);
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  border-left: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold-hover);
}
.news-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold-hover);
}
.news-card-meta .news-source {
  font-weight: 600;
}
.news-card-meta .news-dot {
  opacity: 0.5;
}
.news-card h3 {
  font-size: var(--text-lg);
  margin: 0;
  color: var(--color-text);
}
.news-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.news-card-link {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}
.news-section-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Client Testimonials (attraction detail pages — pilot layout)
   ========================================================================== */
.testimonial-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.testimonial-quote-mark {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-gold);
}
.testimonial-quote {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0;
}
.testimonial-quote + .testimonial-quote {
  margin-top: var(--space-3);
}
.testimonial-attribution {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-gold-hover);
}
.testimonial-attribution .testimonial-org {
  display: block;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  margin-top: 2px;
  font-size: var(--text-sm);
}
.testimonial-attribution .testimonial-year {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
}

/* ==========================================================================
   Follow This Act (attraction detail pages — live social feeds + designer
   artwork slot). Facebook and X show real live-updating embeds; Instagram
   and TikTok show Follow buttons (neither offers a free live feed embed).
   Section renders on the default light background; styles below are
   light-mode-first with a .section-dark override for when it happens to
   follow the dark banner/testimonials sections.
   ========================================================================== */
.follow-embed-grid {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}
.follow-embed-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
}
.section-dark .follow-embed-card {
  background: color-mix(in oklab, var(--color-surface) 8%, transparent);
  border-color: color-mix(in oklab, white 14%, transparent);
}
.follow-embed-card iframe {
  max-width: 100%;
}
.follow-embed-card .twitter-timeline {
  max-width: 100%;
}
.designer-artwork-wrap {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.designer-artwork-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 640px;
}
.designer-artwork-block img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
}
.designer-artwork-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}
.section-dark .designer-artwork-caption {
  color: color-mix(in oklab, var(--text-on-dark) 70%, transparent);
}
@media (max-width: 640px) {
  .follow-embed-card,
  .follow-embed-card iframe {
    width: 100%;
  }
}

/* ==========================================================================
   Additional Artwork & Promo Materials (attraction detail pages) — an
   expandable, webmaster-managed list of extra graphics/banners/promo images
   beyond the main gallery and banner photos. Sits on a light surface between
   Testimonials and Follow This Act (both dark) to break up the rhythm.
   ========================================================================== */
.extra-artwork-section {
  background: var(--color-surface-offset);
}
.extra-artwork-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.extra-artwork-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  width: 100%;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.extra-artwork-card:hover,
.extra-artwork-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md, 0 16px 36px color-mix(in oklab, black 22%, transparent));
}
.extra-artwork-card img {
  width: 100%;
  max-height: 420px;
  border-radius: var(--radius-md);
  display: block;
  object-fit: contain;
  background: var(--color-surface-offset);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.extra-artwork-card:hover img,
.extra-artwork-card:focus-visible img {
  transform: scale(1.03);
}
/* Captions intentionally removed from Additional Artwork cards — images-only display. */

/* Show/hide password toggle — shared base (icon size, position, focus state).
   Context-specific color is set by .admin-login-wrap / .promo-gate-card above. */
.password-field-wrap {
  position: relative;
}
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.3rem;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: var(--radius-sm, 4px);
  transition: color 0.15s ease;
}
.password-toggle-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.password-toggle-btn:focus-visible {
  outline: 2px solid var(--color-primary, #1857c9);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* In-context visual editor (admin-only; visual-editor.js)                */
/* ---------------------------------------------------------------------- */
.editor-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.editor-fab:hover { transform: translateY(-1px); }
.editor-fab.is-active { background: var(--color-gold); color: #1a1a1a; }

.editor-fab--onesheet {
  bottom: 84px;
  background: var(--color-navy, #14213d);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.editor-fab--onesheet:hover { transform: translateY(-1px); color: #fff; }

.edit-mode-active .editable-field {
  outline: 2px dashed var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  cursor: text;
  transition: outline-color 0.15s ease, background 0.15s ease;
}
.edit-mode-active .editable-field:hover { background: var(--color-primary-highlight); }
.edit-mode-active .editable-field:focus { outline-color: var(--color-gold); background: var(--color-gold-highlight); }

.edit-mode-active [data-editable-img] {
  position: relative;
}
.edit-mode-active [data-editable-img]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 40, 0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  border-radius: inherit;
}
.edit-mode-active [data-editable-img]:hover::after { opacity: 1; }
/* Always-visible, always-clickable "Replace Photo" control. Injected as a
   real sibling element (not a ::after on the image) so it works even when
   the image sits behind overlapping content at a higher z-index — e.g. the
   homepage hero poster, where the heading/eyebrow/CTA block is stacked on
   top of the full-bleed background photo. See positionHostFor() in
   visual-editor.js for how its container is chosen. */
.editable-img-replace-btn {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  z-index: 20;
  background: rgba(10, 20, 40, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full, 999px);
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, transform 0.15s ease;
}
.edit-mode-active .thumb-single { position: relative; display: block; }
.edit-mode-active .featured-show-card .promo-thumb { position: relative; }
.edit-mode-active .featured-show-card .editable-img-replace-btn { top: 0.6rem; right: 0.6rem; font-size: 0.75rem; padding: 0.35rem 0.75rem; }
.edit-mode-active .thumb-single .editable-img-replace-btn { top: 0.6rem; right: 0.6rem; font-size: 0.75rem; padding: 0.35rem 0.75rem; }
.editable-img-replace-btn:hover {
  background: var(--color-primary);
  transform: translateY(-1px);
}

.edit-mode-active .gallery-item {
  position: relative;
  cursor: grab;
}
.edit-mode-active .gallery-item.is-dragging { opacity: 0.4; }
.gallery-item-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.gallery-add-tile {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2, #f3f3f3);
  border: 2px dashed var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  min-height: 100%;
}

.editor-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  background: #1a1a1a;
  color: #fff;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.editor-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.editor-toast.is-error { background: var(--color-error); }
.editor-toast-undo {
  background: none;
  border: none;
  color: var(--color-gold);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ==========================================================================
   Company Offices — icon + centered wrap so a partial last row (e.g. 5
   offices in a 3-col grid) doesn't dangle awkwardly on the left.
   ========================================================================== */
.offices-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.office-card {
  flex: 0 1 300px;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
}
.office-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--color-gold-highlight);
  color: var(--color-gold-active);
}
.office-card-icon svg {
  width: 22px;
  height: 22px;
}
.office-card h3 {
  margin: 0;
  line-height: 1.25;
}

/* ---------------------------------------------------------------------
   Load-In at a Glance — icon strip on attraction detail pages summarizing
   space/power/setup/show-length facts parsed from requirements_text.
   Only rendered when at least one fact can be confidently extracted.
--------------------------------------------------------------------- */
.loadin-glance {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.loadin-glance-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-active, var(--color-gold));
  margin-bottom: var(--space-4);
}
.loadin-glance-grid {
  display: grid;
  /* Values are verbatim one-sheet requirement text and can run to several
     lines, so the columns are wider than a typical stat strip. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  /* Cards fill their grid cell rather than hugging their own text, so every
     block in a row is the same height. */
  align-items: stretch;
}
/* Every block the same height, not just the ones sharing a row.
 *
 * `grid-auto-rows: 1fr` in a grid of indefinite height resolves each row to
 * the tallest row's content, so all five cards match the longest requirement
 * regardless of which row they land in.
 *
 * Only from two columns up. Stacked in one column on a phone this would
 * padd every card out to the tallest one and add a screenful of dead space,
 * so there each card still hugs its own text. 560px is where the second
 * 260px column fits. */
@media (min-width: 560px) {
  .loadin-glance-grid {
    grid-auto-rows: 1fr;
  }
}
.loadin-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  /* Stretched to the row height by the grid. The existing align-items above
     keeps the body pinned to the top, so short cards don't float their text
     into the middle of a tall box. */
}
.loadin-fact-icon {
  font-size: var(--text-lg);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1em;
}
.loadin-fact-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.loadin-fact-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* These are spans in the markup; without display:block the separator rule
   below paints a stray dashed line across the text instead of between the
   values, and two requirements run together as one word. */
.loadin-fact-values {
  display: block;
}
.loadin-fact-value {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
}
/* Several requirements under one label read as separate lines rather than
   one long semicolon-joined run. */
.loadin-fact-value + .loadin-fact-value {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--color-border);
}
/* The one sheet is silent on this requirement. The row is still rendered so
   the five labels stay in the same order on every attraction page. */
.loadin-fact--none {
  background: transparent;
  border-style: dashed;
}
.loadin-fact--none .loadin-fact-icon {
  opacity: 0.45;
}
.loadin-fact-value--none {
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Attractions List (Buyers) — comparison-friendly card rows with
   Load-In at a Glance facts, per-attraction thumbnail, and clickable
   name/photo through to the full detail page.
   ========================================================================== */
.links-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.links-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.links-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.links-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: var(--space-3);
  transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.links-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.links-card-thumb {
  flex-shrink: 0;
  display: block;
  width: 148px;
  height: 104px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.links-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-interactive);
}
.links-card:hover .links-card-thumb img { transform: scale(1.04); }
.links-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.links-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.links-card-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.25;
}
.links-card-name:hover,
.links-card-name:focus-visible { color: var(--color-primary); }
.links-card-cat {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.links-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 72ch;
}
.links-card-facts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.links-fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  line-height: 1.3;
}
.links-fact-chip .links-fact-icon { font-size: 0.9em; }
.links-fact-chip strong {
  color: var(--color-text);
  font-weight: 600;
  margin-left: 0.15rem;
}
.links-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-1);
}
.links-empty-state {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  padding: var(--space-2) 0 var(--space-1);
}
@media (max-width: 640px) {
  .links-card { flex-direction: column; }
  .links-card-thumb { width: 100%; height: 168px; }
}


/* Back-to-index navigation at the top of each attraction detail page.
   Presented as a real button rather than a faint text link, and placed
   above the page content so it reads as navigation instead of a
   secondary action competing with the booking CTAs. */
.detail-back-bar {
  display: flex;
  margin-bottom: var(--space-6);
}
.btn--back {
  white-space: normal;
  max-width: 100%;
  text-align: center;
  font-weight: 600;
}
.btn--back:hover,
.btn--back:focus-visible {
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--back-short {
  display: none;
}
/* The full label is too long for a single line on phones, where a
   two-line, full-width back button reads heavier than the content it
   sits above. Swap in a short label instead. */
@media (max-width: 640px) {
  .btn--back-full {
    display: none;
  }
  .btn--back-short {
    display: inline;
  }
}

/* ---- Load-In at a Glance — inline (visual editor) + admin panel ---- */
.loadin-edit-head {
  grid-column: 1 / -1;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px dashed #c8a24a;
  border-radius: 8px;
  background: #fffaf0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.loadin-edit-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #6b5a2e;
  flex: 1 1 260px;
}
.loadin-edit-warn {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #9a3412;
}
.loadin-edit-modes { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.loadin-edit-mode {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border: 1px solid #d6c9a8;
  border-radius: 999px;
  background: #fff;
  color: #5c5138;
  cursor: pointer;
}
.loadin-edit-mode:hover { border-color: #c8a24a; }
.loadin-edit-mode.is-active { background: #1f2937; border-color: #1f2937; color: #fff; }

.loadin-fact--editing { outline: 1px dashed #c8a24a; outline-offset: 3px; }
.loadin-edit-box {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #1f2937;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}
.loadin-edit-box:focus { outline: 2px solid #c8a24a; outline-offset: 0; border-color: #c8a24a; }
.loadin-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}
.loadin-edit-state {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
}
.loadin-edit-state.is-override { color: #b45309; }
.loadin-edit-btn {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}
.loadin-edit-btn:hover { border-color: #94a3b8; background: #f1f5f9; }

/* Admin console panel */
.loadin-editor {
  margin: 1.1rem 0;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fbfcfe;
}
.loadin-editor__head h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.loadin-editor__head p { margin: 0 0 0.9rem; font-size: 0.82rem; line-height: 1.45; color: #64748b; }
.loadin-editor__modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.loadin-mode {
  display: block;
  padding: 0.6rem 0.7rem;
  border: 1px solid #d8e0ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.loadin-mode.is-active { border-color: #1f2937; box-shadow: inset 0 0 0 1px #1f2937; }
.loadin-mode input { margin-right: 0.4rem; }
.loadin-mode__name { font-weight: 600; font-size: 0.86rem; }
.loadin-mode__hint { display: block; margin-top: 0.15rem; font-size: 0.74rem; line-height: 1.35; color: #778698; }
.loadin-editor__rows { display: grid; gap: 0.85rem; }
.loadin-row { padding: 0.7rem 0.8rem; border: 1px solid #e6ebf2; border-radius: 8px; background: #fff; }
.loadin-row.is-unused { opacity: 0.5; }
.loadin-row__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.loadin-row__label { font-weight: 600; font-size: 0.88rem; }
.loadin-row__state { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #7c8798; }
.loadin-row__state.is-override { color: #b45309; }
.loadin-row__auto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; margin: 0.4rem 0 0.35rem; }
.loadin-row__autolabel { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #9aa5b4; }
.loadin-row__autoval { font-size: 0.82rem; line-height: 1.35; color: #334155; flex: 1 1 200px; }
.loadin-row__autoval.is-empty { color: #9aa5b4; font-style: italic; }
.loadin-row__input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 0.45rem 0.55rem; font: inherit; font-size: 0.85rem; line-height: 1.35;
  border: 1px solid #cbd5e1; border-radius: 6px; resize: vertical;
}
.loadin-mini {
  font: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 0.2rem 0.5rem; border: 1px solid #cbd5e1; border-radius: 5px;
  background: #f8fafc; color: #334155; cursor: pointer;
}
.loadin-mini:hover:not(:disabled) { border-color: #94a3b8; }
.loadin-mini:disabled { opacity: 0.45; cursor: not-allowed; }
.loadin-mini--clear { margin-top: 0.35rem; }
.loadin-editor__preview { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed #d8e0ea; }
.loadin-preview__empty { margin: 0.4rem 0 0; font-size: 0.82rem; font-style: italic; color: #778698; }

/* Attraction detail pages: hero title set in Sora (clean, crisp) — 2026-10-03 */
body[data-page="attraction-detail"] .hero h1 {
  font-family: 'Sora', var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Attraction page layout v2 (preview: body.layout-v2, see detail-layout-v2.js)
   ========================================================================== */
.layout-v2 .booking-actions { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3) !important; align-items: stretch; }
.layout-v2 .booking-actions > [data-detail-cta] { grid-column: 1 / -1; justify-self: start; margin-bottom: var(--space-3); }
.layout-v2 .booking-actions-label { grid-column: 1 / -1; font-family: var(--font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-gold); }
.layout-v2 .booking-actions .btn { white-space: normal; text-align: center; justify-content: center; line-height: 1.25; min-height: 44px; }
/* Booking Documents buttons: one uniform size on every attraction page, even when a label wraps to two lines (owner request 2026-10-16). */
.layout-v2 .booking-actions .btn:not([data-detail-cta]) { height: 64px; min-height: 64px; padding: 8px 16px; box-sizing: border-box; }
.layout-v2 .attraction-gallery-grid.gallery-collapsed .gallery-item:nth-child(n+13) { display: none; }
.layout-v2 .gallery-showall-wrap { display: flex; justify-content: center; margin-top: var(--space-6); }
@media (max-width: 640px) {
  .layout-v2 .booking-actions { grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .layout-v2 .booking-actions > [data-detail-cta] { justify-self: stretch; }
  .layout-v2 .booking-actions .btn:not([data-detail-cta]) { font-size: 12px; padding: 6px 8px; height: 56px; min-height: 56px; }
  .layout-v2 .attraction-gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .layout-v2 .attraction-video-gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .layout-v2 .attraction-gallery-section h2, .layout-v2 [data-additional-video-gallery] h2, .layout-v2 [data-extra-artwork-section] h2 { font-size: var(--text-2xl) !important; }
}

/* 'Layout Diagram — Coming Soon' placeholder: shown again on non-strolling
   shows without a diagram (owner request 2026-10-15). */

/* Medium hero tint (all attraction pages, owner choice 2026-10-14) */
.hero-media.hero-tint-light::after {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-navy) 38%, transparent) 0%,
    color-mix(in oklab, var(--color-navy) 30%, transparent) 35%,
    color-mix(in oklab, var(--color-navy) 58%, transparent) 70%,
    color-mix(in oklab, var(--color-navy) 94%, transparent) 100%
  );
}

/* Darker lower tint for banners with artwork text near the bottom */
.hero-media.hero-tint-light.hero-tint-dark-bottom::after {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--color-navy) 38%, transparent) 0%,
    color-mix(in oklab, var(--color-navy) 30%, transparent) 35%,
    color-mix(in oklab, var(--color-navy) 60%, transparent) 58%,
    color-mix(in oklab, var(--color-navy) 88%, transparent) 75%,
    var(--color-navy) 100%
  );
}

/* Lower banner background choices (admin: Photos tab → Lower banner background) */
.banner-showcase.banner-showcase--gray { background: #F1F2F5; }
.banner-showcase.banner-showcase--white { background: #FFFFFF; }
[data-theme='dark'] .banner-showcase.banner-showcase--gray,
[data-theme='dark'] .banner-showcase.banner-showcase--white { background: var(--color-navy); }
.banner-showcase.banner-showcase--photo { background: var(--color-navy); isolation: isolate; }
.banner-showcase.banner-showcase--photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(color-mix(in oklab, var(--color-navy) 55%, transparent), color-mix(in oklab, var(--color-navy) 55%, transparent)), var(--showcase-bg);
  background-size: cover; background-position: center;
}

/* ==========================================================================
   Owner-chosen section backgrounds (admin → Home Page → Section backgrounds)
   Approved choices only so the site stays on-brand.
   ========================================================================== */
.cms-bg--navy,
.cms-bg--photo {
  --color-surface: #0f1526; --color-surface-2: #141b30; --color-surface-offset: #182038;
  --color-divider: #26304c; --color-border: #313d5c;
  --color-text: #e7eaf3; --color-text-muted: #a3aec7; --color-text-faint: #6b7592;
  background: var(--color-navy) !important;
  color: var(--text-on-dark);
}
.cms-bg--photo:not(.why-book) {
  background-image: linear-gradient(rgba(10,16,40,.80), rgba(10,16,40,.80)), var(--cms-bg-img) !important;
  background-size: cover !important; background-position: center !important;
}
.cms-bg--gray { background: #EEF1F6 !important; }
.cms-bg--white { background: #FFFFFF !important; }
[data-theme='dark'] .cms-bg--gray { background: var(--color-surface-2) !important; }
[data-theme='dark'] .cms-bg--white { background: var(--color-surface) !important; }
/* Light choices on sections that are dark by design (Why Book, Ready to Book) */
.cms-bg--gray > .hero-media,
.cms-bg--white > .hero-media,
.cms-bg--navy > .hero-media { display: none; }
.cms-bg--gray, .cms-bg--white { color: var(--color-text); }
.cms-bg--gray h2, .cms-bg--white h2 { color: var(--color-text) !important; }
.cms-bg--gray .wrap > p, .cms-bg--white .wrap > p,
.cms-bg--gray .wrap.center p, .cms-bg--white .wrap.center p { color: var(--color-text-muted) !important; }
.cms-bg--navy h2, .cms-bg--photo h2 { color: var(--text-on-dark); }
.cms-bg--gray .select-banner-text h2,
.cms-bg--white .select-banner-text h2 { color: var(--text-on-dark) !important; }

.cms-bg--gray .why-card, .cms-bg--white .why-card { background: #0D1B3E; }
[data-theme='dark'] .cms-bg--gray .why-card, [data-theme='dark'] .cms-bg--white .why-card { background: var(--color-surface-2); }

/* Media & Marketing Kit viewer: download the photo being viewed (2026-10-19) */
.gallery-lightbox-download {
  position: absolute;
  top: var(--space-6, 24px);
  left: var(--space-6, 24px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #10162a;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  z-index: 3;
}
.gallery-lightbox-download:hover { background: #fff; }
/* Inline editor: add print photos on Media Kit cards */
.promo-print-add {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; width: 100%;
  border: 2px dashed var(--color-gold, #e0a83f); background: rgba(224, 168, 63, 0.10);
  color: #10162a; font-weight: 700; font-size: 0.72rem; line-height: 1.2; text-align: center;
  cursor: pointer; padding: 4px;
}
.promo-print-add:hover { background: rgba(224, 168, 63, 0.22); }
.promo-print-add-wide { aspect-ratio: auto; padding: 10px; margin: 0 0 2px; font-size: 0.8rem; }

/* Print photo file size on hover (2026-10-19) */
.promo-photo-size {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(10, 20, 40, 0.82); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.promo-photo-tile:hover .promo-photo-size.has-size { opacity: 1; }
@media (hover: none) { .promo-photo-size { display: none; } }
/* Inline editor: delete a print photo */
.promo-print-remove {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 21px; height: 21px; border-radius: 50%;
  border: 2px solid #fff; background: #d33; color: #fff;
  font-size: 14px; line-height: 1; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.promo-print-remove:hover { background: #b01e1e; }

/* Logo in the Media Kit viewer: light backdrop so dark logos stay visible */
.gallery-lightbox.is-logo img {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  max-width: min(90vw, 900px);
  max-height: 75vh;
  object-fit: contain;
}

/* Saved acts / shortlist (2026-10-19) */
.shortlist-box { border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px); padding: 1rem 1.25rem; background: var(--color-surface, #fff); }
.shortlist-title { font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-gold-hover, #a07a12); margin: 0 0 .5rem; font-weight: 700; }
.shortlist-list { list-style: none; margin: 0 0 .9rem; padding: 0; }
.shortlist-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.shortlist-list li:last-child { border-bottom: 0; }
.shortlist-remove { background: none; border: 0; color: var(--color-text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.shortlist-remove:hover { color: #c62828; }
.shortlist-quote-btn { display: inline-flex; margin-right: .75rem; }
.shortlist-clear { background: none; border: 0; color: var(--color-text-muted); text-decoration: underline; font-size: var(--text-xs); cursor: pointer; padding: .4rem 0; }
.shortlist-note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 .25rem; }
.shortlist-empty { font-size: var(--text-sm); }
.shortlist-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: .6rem; background: var(--color-navy, #14213d); color: #fff; text-decoration: none; border-radius: 999px; padding: .6rem .7rem .6rem 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.28); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.shortlist-pill:hover { color: #fff; }
.shortlist-pill__count { color: var(--color-gold, #f2b705); }
.shortlist-pill__cta { background: var(--color-gold, #f2b705); color: #14213d; border-radius: 999px; padding: .35rem .8rem; }
@media (max-width: 560px) {
  .shortlist-pill { left: 12px; right: 84px; transform: none; justify-content: space-between; font-size: .8rem; padding: .5rem .5rem .5rem .8rem; }
  .shortlist-pill__cta { padding: .35rem .6rem; }
  .shortlist-pill__cta::before { content: 'Request Quote'; }
  .shortlist-pill__cta { font-size: 0; }
  .shortlist-pill__cta::before { font-size: .8rem; }
}
@media print { .shortlist-pill { display: none !important; } }

/* Space & setup filter on the listing page (2026-10-19) */
.space-filter { margin: calc(var(--space-8) * -1 + var(--space-3)) 0 var(--space-8); }
.space-filter__toggle { display: inline-flex; align-items: center; gap: .5rem; background: var(--color-surface, #fff); border: 1.5px solid var(--color-border); color: var(--color-text); border-radius: 999px; padding: .55rem 1rem; font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.space-filter__toggle:hover, .space-filter.is-open .space-filter__toggle { border-color: var(--color-primary); color: var(--color-primary); }
.space-filter.has-active .space-filter__toggle { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.space-filter__badge { background: var(--color-gold, #f2b705); color: #14213d; border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; font-weight: 700; }
.space-filter__chev { transition: transform .15s ease; }
.space-filter.is-open .space-filter__chev { transform: rotate(180deg); }
.space-filter__panel { margin-top: var(--space-3); background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px); padding: 1rem 1.25rem; display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: .75rem 1.5rem; align-items: start; }
.space-filter__field { display: flex; flex-direction: column; gap: .35rem; font-size: var(--text-sm); font-weight: 600; }
.space-filter__field select { padding: .5rem .6rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: var(--text-sm); background: #fff; color: #14213d; }
.space-filter__checks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding-top: 1.55rem; }
.space-filter__checks label { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--text-sm); cursor: pointer; }
.space-filter__checks small { color: var(--color-text-muted); }
.space-filter__checks input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.space-filter__count { grid-column: 1 / -1; margin: 0; font-weight: 700; font-size: var(--text-sm); color: var(--color-primary); }
.space-filter__count:empty { display: none; }
.space-filter__note { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.space-filter__clear { background: none; border: 0; color: var(--color-primary); text-decoration: underline; cursor: pointer; font-size: inherit; padding: 0 0 0 .4rem; }
@media (max-width: 640px) {
  .space-filter__panel { grid-template-columns: 1fr; }
  .space-filter__checks { flex-direction: column; padding-top: 0; }
}

/* Featured Artwork & Photos — inline editing (2026-10-20) */
.edit-mode-active .extra-artwork-card { position: relative; cursor: grab; }
.edit-mode-active .extra-artwork-card.is-dragging { opacity: 0.4; }
.extra-artwork-add { min-height: 220px; cursor: pointer !important; font-size: var(--text-base); }
.extra-artwork-add:hover { transform: none; }