/* ============================================================
   BADM brand fonts — Modulus Pro (display) + Proxima Nova (body)
   Ported from source-handoff/fonts.css. The prototype served .otf
   directly; these are the same files converted to woff2 (lossless
   container change — metrics, glyph counts and PostScript names
   verified identical).

   Modulus Pro is self-hosted here rather than reusing the theme's
   existing fonts/modulus-pro-*-webfont.woff2. Those are the same
   typeface design (every advance width matches) but a different
   build: unitsPerEm 2048 with ascent 901 / descent -250 normalised,
   against the prototype's 1000 / -200. That shifts baselines by
   ~2.5% of font-size — about 1.6px on the 64px H1 — so the approved
   comp would not reproduce. Filenames deliberately omit the
   "-webfont" suffix so both sets coexist in fonts/ without collision.

   Loaded only on the isolated Home 2026 and Header & Footer 2026 Preview
   templates, so the rest of the site keeps its existing declarations from
   style.css.
   ============================================================ */

/* ---- Modulus Pro (headlines / display) ---- */
@font-face {
  font-family: "Modulus Pro";
  src: url("../fonts/modulus-pro-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Modulus Pro";
  src: url("../fonts/modulus-pro-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Modulus Pro";
  src: url("../fonts/modulus-pro-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Modulus Pro";
  src: url("../fonts/modulus-pro-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Modulus Pro";
  src: url("../fonts/modulus-pro-extrabold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---- Proxima Nova (body / UI) ---- */
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proximanova-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proximanova-regularit.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proximanova-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proximanova-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proximanova-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("../fonts/proximanova-boldit.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}


/* ===== styles.css — verbatim from source-handoff ===== */

/* ============================================================
   Bay Area Discovery Museum — Homepage Redesign
   Tokens grounded in the BADM logo palette (orange + teal)
   ============================================================ */

:root {
  /* Brand — BADM Brand Book · How We Look · Color Palette */
  /* PRIMARY (client-confirmed primary CTA orange) */
  --badm-orange: #FA7F08;        /* primary brand orange */
  --badm-orange-deep: #E26F00;   /* darkened for hover/active */
  --badm-orange-soft: #FFE9CF;   /* light tint for fills */
  --badm-teal-deep: #348888;     /* deep teal */
  --badm-mint: #9EF8EE;          /* light mint */
  /* SECONDARY */
  --badm-orange-2: #F24405;      /* deep brand orange-red (accents) */
  --badm-teal: #22BABB;          /* bright teal */
  --badm-teal-soft: #D3F6F1;     /* light teal tint for chips/areas (derived from mint) */

  /* Neutrals */
  --ink: #1A1F2C;
  --ink-2: #444B5E;
  --ink-3: #7A7F8E;
  --line: #E7E2D6;
  --line-strong: #D8D1BE;
  --paper: #FAF6EE;     /* warm cream */
  --paper-2: #F2EBDB;
  --white: #FFFFFF;

  /* Type — BADM Brand Book · Typography. Licensed fonts via fonts.css (@font-face).
     Headlines: Modulus Pro · Body: Proxima Nova. System sans as last-resort fallback. */
  --display: "Modulus Pro", ui-sans-serif, system-ui, sans-serif;
  --body: "Proxima Nova", ui-sans-serif, system-ui, sans-serif;

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 0 rgba(26,31,44,.04), 0 6px 14px -8px rgba(26,31,44,.12);
  --shadow: 0 2px 0 rgba(26,31,44,.04), 0 24px 40px -24px rgba(26,31,44,.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================================================
   RATIONALE STRIP — top of page, behind everything else
   ============================================================ */
.rationale {
  background: #0F1420;
  color: #E9E6DC;
  padding: 22px 0;
  font-size: 13px;
  border-bottom: 1px solid #1F2535;
}
.rationale .container { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rationale h4 {
  margin: 0 0 6px;
  font: 600 12px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--badm-orange);
}
.rationale p { margin: 0; color: #C8C2B4; max-width: 70ch; line-height: 1.6; }
.rationale ul { margin: 4px 0 0; padding-left: 18px; color: #C8C2B4; }
.rationale ul li { margin: 4px 0; }
.rationale .pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: rgba(250,127,8,.16); color: #FFC084; font-weight: 600;
  font-size: 11px; letter-spacing: .04em;
}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.utility {
  background: var(--ink);
  color: #D8D3C2;
  font-size: 13px;
  letter-spacing: .005em;
}
.utility .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-block: 8px; min-height: 36px;
  flex-wrap: nowrap;
}
.utility .left, .utility .right {
  display: inline-flex; align-items: center; gap: 12px;
  flex-wrap: nowrap; white-space: nowrap;
  overflow: hidden;
}
.utility .left .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #5AE0B0;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(90,224,176,.15);
}
.utility .util-loc {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #BDB7A8;
}
.utility .util-loc svg { color: #8FE0C8; flex-shrink: 0; }
.utility b { color: #FFFFFF; font-weight: 600; }
.utility .muted { color: #B6B0A0; }
.utility .sep { width: 1px; height: 12px; background: rgba(255,255,255,.2); flex-shrink: 0; }
.utility .right a {
  color: #D8D3C2;
  transition: color .15s ease;
}
.utility .right a:hover { color: var(--badm-orange); }
.utility .lang {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
}

/* ============================================================
   MAIN NAV (replaces side nav)
   ============================================================ */
.mainnav {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .28s ease;
}
.mainnav .row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
  position: relative;
}
/* Let grid children compress instead of forcing the row to overflow. */
.mainnav .row > * { min-width: 0; }
.mainnav .logo { display: flex; align-items: center; }
.mainnav .logo img { width: 168px; max-width: none; height: auto; display: block; transition: width .28s ease; }
.mainnav .row { transition: padding .28s ease; }
/* condensed when scrolled */
.mainnav.scrolled .row { padding-block: 9px; }
.mainnav.scrolled .logo img { width: 134px; }
.mainnav.scrolled { box-shadow: 0 8px 26px -16px rgba(26,31,44,.34); }
.mainnav .links {
  display: flex; align-items: center; gap: 2px; justify-content: center;
}
.mainnav .links > div { position: static; }
.mainnav .links a {
  padding: 9px 13px;
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.mainnav .links a:hover { background: var(--paper-2); }
.mainnav .links a > svg { opacity: .5; transition: transform .2s ease; }
.mainnav .links .has-menu.open > a > svg { transform: rotate(180deg); }
.mainnav .actions { display: flex; align-items: center; gap: 8px; }
.mainnav .icon-btn {
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-2);
  transition: background .15s ease, color .15s ease;
}
.mainnav .icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.mainnav .icon-btn:focus-visible { outline: 3px solid var(--badm-teal); outline-offset: 2px; }
.mainnav .btn-tickets {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  min-width: 132px;
  border-radius: 999px;
  background: var(--badm-orange);
  color: white;
  border: 1.5px solid var(--badm-orange);
  font-weight: 600;
  font-size: 14.5px;
  transition: background .15s ease, transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 14px -6px rgba(250,127,8,.55);
  white-space: nowrap;
}
.mainnav .btn-tickets:hover { background: var(--badm-orange-deep); border-color: var(--badm-orange-deep); transform: translateY(-1px); }
.mainnav .btn-member {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  min-width: 132px;
  border-radius: 999px;
  background: transparent;
  color: var(--badm-teal-deep);
  border: 1.5px solid var(--badm-teal-deep);
  font-weight: 600;
  font-size: 14.5px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.mainnav .btn-member:hover { background: var(--badm-teal-deep); color: #fff; border-color: var(--badm-teal-deep); }
.mainnav .hamburger { display: none; }

/* mega menu */
.has-menu { position: static; }
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 10px;
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 44px 70px -30px rgba(26,31,44,.42), 0 6px 18px -10px rgba(26,31,44,.16);
  transition: opacity .2s ease, transform .2s ease;
  display: grid;
  grid-template-columns: 1fr 392px;
  padding: 10px;
  gap: 10px;
  z-index: 60;
}
/* invisible hover bridge — spans the full gap (incl. the 10px margin) between the
   nav label row and the panel so the cursor can travel down into the menu */
.mega::before {
  content: ""; position: absolute;
  top: -42px; left: 0; right: 0; height: 44px;
}
.has-menu.open > .mega,
.has-menu:focus-within > .mega {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
.mega-links { padding: 26px 26px 18px; display: flex; flex-direction: column; }
.mega-eyebrow {
  font: 700 12px/1 var(--body);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--badm-teal-deep);
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
}
.mega-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mega-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.mega-list a {
  padding: 14px 14px !important;
  border-radius: 14px;
  display: flex !important; align-items: center; gap: 15px;
  white-space: normal !important;
  transition: background .14s ease, transform .14s ease;
}
.mega-list a:hover { background: var(--paper) !important; }
.mega .sub-icon {
  flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--badm-teal-soft); color: var(--badm-teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s ease, color .14s ease;
}
.mega-list a:hover .sub-icon { background: var(--badm-teal-deep); color: #fff; }
.mega .sub-text { display: grid; gap: 3px; }
.mega .sub-label { font-weight: 600; color: var(--ink); font-size: 16.5px; line-height: 1.2; letter-spacing: -.01em; }
.mega .sub-desc { color: var(--ink-3); font-size: 13.5px; font-weight: 400; line-height: 1.3; }
.mega-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mega-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px; color: var(--badm-orange-deep);
  transition: gap .14s ease;
}
.mega-all:hover { gap: 12px; }
.mega-help {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-3);
}
.mega-help svg { color: var(--badm-teal); }
.mega-feature {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 332px;
  display: flex; align-items: flex-end;
  color: #fff;
  text-decoration: none !important;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
}
.mega-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s ease;
}
.mega-feature:hover img { transform: scale(1.05); }
.mega-feature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,35,0) 18%, rgba(20,24,35,.5) 58%, rgba(20,24,35,.88) 100%);
}
.mega-feature .mf-body { position: relative; z-index: 1; padding: 26px 28px; margin-top: auto; }
.mega-feature .mf-tag {
  display: inline-block;
  background: var(--badm-orange); color: #fff;
  font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; margin-bottom: 14px;
}
.mega-feature .mf-title { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.06; display: block; letter-spacing: -.015em; }
.mega-feature .mf-cta { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14.5px; margin-top: 14px; }

/* Neutralize the base `.mainnav .links a` styling (padding/radius/color/font)
   for the panel's own anchors, which have higher base specificity. */
.mainnav .links a.mega-feature { padding: 0; border-radius: 16px; font-size: inherit; }
.mainnav .links .mega-foot a.mega-all {
  padding: 0; border-radius: 0; font-size: 14.5px;
  color: var(--badm-orange-deep);
}
.mainnav .links .mega-foot a.mega-all:hover { background: transparent; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--badm-orange);
  color: white;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 22px -10px rgba(250,127,8,.55);
}
.btn.primary:hover { background: var(--badm-orange-deep); }
.btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn.secondary:hover { background: var(--ink); color: white; }
.btn.ghost {
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.06);
}
.btn.ghost:hover { background: white; }
.btn.lg { padding: 16px 26px; font-size: 16px; }
.btn .arr { transition: transform .15s ease; }
.btn:hover .arr { transform: translateX(2px); }

/* ============================================================
   TODAY STRIP — single-line, no awkward wrap
   ============================================================ */
.today {
  background: var(--badm-teal-deep);
  color: white;
  font-size: 14px;
}
.today .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 10px;
  flex-wrap: nowrap;
}
.today .left, .today .right {
  display: inline-flex; align-items: center; gap: 12px;
  flex-wrap: nowrap; white-space: nowrap;
  min-width: 0;
}
.today b { font-weight: 700; }
.today .hours { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.today .member { color: rgba(255,255,255,.82); font-size: 13px; }
.today .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #BFF6A9;
  box-shadow: 0 0 0 0 rgba(191,246,169,.7);
  animation: pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(191,246,169,.7); }
  70% { box-shadow: 0 0 0 10px rgba(191,246,169,0); }
  100% { box-shadow: 0 0 0 0 rgba(191,246,169,0); }
}
.today a.inline {
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; font-weight: 600;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.3);
  margin-left: 4px;
}
.today a.inline:hover { color: #BFF6A9; }
.today .capacity {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.today .capacity .bar {
  width: 60px; height: 5px;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  overflow: hidden;
}
.today .capacity .bar > i {
  display: block; height: 100%;
  background: #BFF6A9;
  border-radius: 999px;
}
.today .capacity .cap-text { opacity: .85; font-size: 12.5px; }
.today .right .label { font-size: 12.5px; opacity: .85; }
.today .slot {
  padding: 4px 11px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease, transform .15s ease;
  cursor: pointer;
  color: white;
}
.today .slot:hover:not(:disabled) { background: rgba(255,255,255,.32); transform: translateY(-1px); }
.today .slot.full,
.today .slot:disabled {
  opacity: .4; cursor: not-allowed; text-decoration: line-through;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--paper);
  padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 88px);
  overflow: hidden;
}
.hero::before {
  /* subtle dotted texture */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(26,31,44,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  opacity: .5;
  pointer-events: none;
}
.hero .row {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero .copy { max-width: 620px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.hero .eyebrow .badge {
  background: var(--badm-orange); color: white;
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .accent { color: var(--badm-orange); font-style: italic; font-weight: 500; }
.tbd-flag {
  display: inline-block;
  font: 600 10px/1 var(--body) !important;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--badm-orange-deep);
  background: var(--badm-orange-soft);
  padding: 5px 8px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 10px;
  font-style: normal !important;
  white-space: nowrap;
}
.hero .tagline {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 56ch;
  text-wrap: pretty;
}
.hero .tagline strong { color: var(--ink); font-weight: 600; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .meta {
  margin-top: 28px;
  display: flex; gap: 22px; flex-wrap: wrap;
  color: var(--ink-2);
  font-size: 14px;
}
.hero .meta .stat { display: flex; align-items: center; gap: 9px; }
.hero .meta .stat .ico {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--badm-teal-soft); color: var(--badm-teal-deep);
}

.hero .photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5/6;
  background: #ddd;
  box-shadow: var(--shadow);
}
.hero .photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 8s ease;
}
.hero .photo:hover img { transform: scale(1.04); }
.hero .photo .tag {
  position: absolute; left: 18px; bottom: 18px;
  background: white; border-radius: 12px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-sm);
}
.hero .photo .tag .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--badm-orange);
}
.hero .photo .sticker {
  position: absolute; right: -22px; top: 28px;
  width: 130px; height: 130px;
  background: var(--badm-orange);
  color: white;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px; line-height: 1.15;
  transform: rotate(-8deg);
  box-shadow: 0 18px 30px -10px rgba(250,127,8,.5);
}
.hero .photo .sticker b {
  display: block; font-size: 32px; font-weight: 700; letter-spacing: -.02em;
  margin: 2px 0;
}

/* ============================================================
   PROMOS GRID — replaces slider
   ============================================================ */
.promos {
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  background: var(--white);
}
.promos .head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px; flex-wrap: wrap;
}
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 12px/1 var(--body);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--badm-teal-deep);
  margin-bottom: 12px;
  white-space: nowrap;
}
.section-eyebrow::before {
  content: ""; width: 22px; height: 1.5px;
  background: var(--badm-teal-deep);
  flex-shrink: 0;
}
.promos h2, .visit h2, .quicklinks h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0; color: var(--ink);
  text-wrap: balance;
}
.promos .head p {
  margin: 8px 0 0; color: var(--ink-2); max-width: 48ch;
}
.promos .head .right { display: flex; align-items: center; gap: 16px; }
.promos .head .right a { color: var(--ink); font-weight: 600; }
.promos .head .right a:hover { color: var(--badm-orange-deep); }

.promo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  height: auto;
}
.promo {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #2a2e3a;
  color: white;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none !important;
}
.promo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.promo img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
  transition: transform 6s ease;
}
.promo:hover img.bg { transform: scale(1.05); }
.promo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.7) 100%);
  z-index: 1;
}
.promo > * { position: relative; z-index: 2; }
.promo > img.bg { position: absolute; }
/* Birthdays image has baked-in promo text (upper-left) + an orange bar (bottom) \u2014
   crop right-of-centre and mid-height to frame the kids + cake, skipping both */
.promo.t-teal img.bg { object-position: 66% 60%; }
.promo .tag {
  position: absolute; top: 18px; left: 18px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  padding: 6px 11px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px;
}
.promo .tag.hot { background: var(--badm-orange); color: white; }
.promo .tag.sale { background: var(--badm-teal); color: white; }
.promo h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 32px; line-height: 1.05; letter-spacing: -.01em;
  margin: 0 0 8px;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(0,0,0,.4);
  color: var(--white);
      text-transform: none;
}
.promo p {
  margin: 0 0 16px;
  font-size: 14.5px;
  opacity: .92;
  max-width: 36ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
  color: var(--white);
}
.promo .cta { text-shadow: 0 1px 12px rgba(0,0,0,.4); color: #fff; }
.promo .cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px;
}
.promo .cta .arr {
  width: 28px; height: 28px; border-radius: 50%;
  background: white; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.promo:hover .cta .arr { transform: translateX(3px); }

.promo.feature {
  grid-column: 1; grid-row: 1 / 3;
  padding: 36px;
}
.promo.feature h3 { font-size: clamp(36px, 3.6vw, 52px); }
.promo.feature p { font-size: 16px; max-width: 40ch; }

/* ============================================================
   VISIT band — first time visitor info
   ============================================================ */
.visit {
  background: var(--paper);
  padding: clamp(64px, 8vw, 110px) 0;
  position: relative;
  overflow: hidden;
}
.visit::before {
  content: "";
  position: absolute; right: -120px; top: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--badm-teal-soft);
  opacity: .55;
  z-index: 0;
}
.visit::after {
  content: "";
  position: absolute; left: -80px; bottom: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: var(--badm-orange-soft);
  opacity: .6;
  z-index: 0;
}
.visit .container { position: relative; z-index: 1; }
.visit .head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.visit .head .section-eyebrow { color: var(--badm-orange-deep); }
.visit .head .section-eyebrow::before { background: var(--badm-orange-deep); }
.visit .head p { margin: 14px auto 0; color: var(--ink-2); font-size: 17px; max-width: 56ch; }
.visit-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.visit-card {
  background: white;
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.visit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--badm-orange-soft);
}
.visit-card .ico {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--badm-orange-soft);
  color: var(--badm-orange-deep);
}
.visit-card.t-teal .ico { background: var(--badm-teal-soft); color: var(--badm-teal-deep); }
.visit-card.t-ink .ico { background: var(--ink); color: white; }
.visit-card h3 {
  font-family: var(--display);
  font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -.01em;
  margin: 0;
}
.visit-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.visit-card .link {
  margin-top: auto;
  font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.visit-card:hover .link { color: var(--badm-orange-deep); }

/* ============================================================
/* ============================================================
   FOOTER
   ============================================================ */
footer {
  /* Client: PRIMARY brand teal #22BABB. Bright teal needs dark text for
     legibility (white fails AA), so footer text is dark brand-ink. */
  background: var(--badm-teal);
  color: #06312F;
  padding: 0 0 28px;
  position: relative;
}
footer .container { padding-top: 64px; }

/* top masthead band */
footer .foot-top {
  display: grid;
  grid-template-columns: 1.25fr minmax(300px, .85fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
footer .foot-brand .name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: .98;
  letter-spacing: -.02em;
  color: white;
  margin-bottom: 20px;
}
footer .foot-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: #ABA597;
  max-width: 44ch;
  margin: 0 0 24px;
  text-wrap: pretty;
}
footer .socials { display: flex; gap: 10px; }
footer .socials a {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #D8D3C2;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
}
footer .socials a:hover {
  background: var(--badm-orange); color: white; border-color: var(--badm-orange);
  transform: translateY(-2px);
}

/* visit / hours card */
footer .foot-visit-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 24px 26px 26px;
}
footer .foot-visit-card .vc-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  color: white;
  white-space: nowrap;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
footer .foot-visit-card .vc-head .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #5AE0B0;
  box-shadow: 0 0 0 4px rgba(90,224,176,.18);
  flex-shrink: 0;
}
footer .foot-visit-card .vc-head .dot[style*="--status-dot"] {
  background: var(--status-dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-dot) 18%, transparent);
}
footer .foot-visit-card .vc-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
footer .foot-visit-card .vc-row span { color: #8E897C; }
footer .foot-visit-card .vc-row b { color: #E9E5D9; font-weight: 600; text-align: right; white-space: nowrap; }
footer .foot-visit-card .vc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  border-bottom: 1.5px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
  transition: gap .14s ease, border-color .15s ease;
}
footer .foot-visit-card .vc-cta:hover { gap: 12px; border-bottom-color: #fff; }

/* link columns */
footer .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 44px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
footer h5 {
  font: 600 12px/1 var(--body);
  letter-spacing: .14em; text-transform: uppercase;
  color: white; margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 9px;
}
footer h5::before {
  content: ""; width: 14px; height: 2px;
  background: var(--white);
}
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: 14.5px; }
footer ul a {
  color: #ABA597;
  transition: color .15s ease;
  display: inline-block;
}
footer ul a:hover { color: var(--badm-orange); }

/* Link groups are <details>: static columns on desktop, accordions on phones */
.foot-group > summary { list-style: none; cursor: default; }
.foot-group > summary::-webkit-details-marker { display: none; }
.foot-group > summary h5 { display: inline-flex; }
.foot-group .fg-chev { display: none; }
footer .foot-group > ul { display: grid; }
footer .bottom {
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: #807B6F;
}
footer .bottom a { color: #ABA597; transition: color .15s ease; }
footer .bottom a:hover { color: var(--badm-orange); }

/* ============================================================
   MOBILE DRAWER — tightened hierarchy
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15,20,32,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(380px, 100vw);
  background: var(--white);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.32,.72,.16,1);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,.3);
}
.drawer.open { transform: translateX(0); }

.drawer .drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.drawer .drawer-head img { width: 110px; max-width: none; height: auto; display: block; }
.drawer .close-btn {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
  padding:0;
}
.drawer .close-btn:hover { background: var(--ink); color: white; }

.drawer .drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 18px;
  display: flex; flex-direction: column;
}

.drawer .today-mini {
  background: var(--badm-teal);
  color: white;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.drawer .today-mini .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #BFF6A9;
  box-shadow: 0 0 0 4px rgba(191,246,169,.25);
  flex-shrink: 0;
}
.drawer .today-mini .t-copy { display: grid; gap: 1px; min-width: 0; }
.drawer .today-mini .t-copy b { font-size: 13.5px; font-weight: 700; }
.drawer .today-mini .t-copy span { font-size: 11.5px; opacity: .92; }

.drawer .quick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 12px;
}
.drawer .quick a {
  display: flex; align-items: center; justify-content: center;
  padding: 13px;
  border-radius: 999px;
  font-weight: 600; font-size: 14.5px;
  text-align: center;
  border: 1.5px solid transparent;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.drawer .quick a:hover { transform: translateY(-1px); }
.drawer .quick a.primary { background: var(--badm-orange); color: white; border-color: var(--badm-orange); }
.drawer .quick a.primary:hover { background: var(--badm-orange-deep); border-color: var(--badm-orange-deep); }
.drawer .quick a.secondary {
  background: transparent; color: var(--badm-teal-deep);
  border: 1.5px solid var(--badm-teal);
}
.drawer .quick a.secondary:hover { background: var(--badm-teal-deep); color: white; border-color: var(--badm-teal-deep); }

.drawer .links {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.drawer .links details, .drawer .links > a { border-bottom: 1px solid var(--line); }
.drawer .links summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 4px;
  font-size: 16px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.drawer .links summary::-webkit-details-marker { display: none; }
.drawer .links summary .chev {
  color: var(--ink-3);
  transition: transform .2s ease;
  display: inline-flex;
}
.drawer .links details[open] summary .chev { transform: rotate(180deg); color: var(--badm-orange-deep); }
.drawer .links details[open] summary { color: var(--badm-orange-deep); }
.drawer .links .single {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 4px;
  font-size: 16px; font-weight: 600;
  color: var(--ink);
}
.drawer .links .single:hover { color: var(--badm-orange-deep); }
.drawer .links .sub-list {
  display: grid; gap: 2px;
  padding: 0 0 12px;
}
.drawer .links .sub-list a {
  padding: 10px 12px;
  border-radius: 8px;
  display: grid; gap: 1px;
}
.drawer .links .sub-list a:hover { background: var(--paper); }
.drawer .links .sub-list .sub-label {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  line-height: 1.3;
}
.drawer .links .sub-list .sub-desc {
  font-size: 12px; color: var(--ink-3); font-weight: 400;
  line-height: 1.3;
}

.drawer .util {
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  flex-shrink: 0;
  display: grid; gap: 8px;
  font-size: 12.5px; color: var(--ink-3);
  background: var(--paper);
}
.drawer .util .util-links { display: flex; gap: 8px; align-items: center; }
.drawer .util .util-links a {
  color: var(--ink-2); font-weight: 600; font-size: 13px;
}
.drawer .util .util-links a:hover { color: var(--badm-orange-deep); }
.drawer .util .util-links .dot { opacity: .5; }
.drawer .util .util-address { color: var(--ink-3); font-size: 12px; }
.drawer .util .socials { display: flex; gap: 8px; margin-top: 4px; }
.drawer .util .socials a {
  width: 34px; height: 34px; border-radius: 999px;
  background: white;
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.drawer .util .socials a:hover {
  background: var(--ink); color: white; border-color: var(--ink);
}

/* ============================================================
   VARIANT B — Photo-led / Cinematic
   ============================================================ */
.variant-photo .mainnav {
  background: rgba(18,24,36,.42);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 32px -16px rgba(0,0,0,.55);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
}
.variant-photo .mainnav .links a { color: white; }
.variant-photo .mainnav .links a:hover { background: rgba(255,255,255,.15); }
.variant-photo .mainnav .links a .chev { opacity: .9; }
.variant-photo .mainnav .icon-btn {
  background: rgba(255,255,255,.18);
  color: white !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0;
}
.variant-photo .mainnav .icon-btn:hover { background: rgba(255,255,255,.3); color: white; }
.variant-photo .mainnav .icon-btn:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.variant-photo .mainnav .btn.secondary {
  color: white; border-color: rgba(255,255,255,.55);
}
.variant-photo .mainnav .btn.secondary:hover { background: white; color: var(--ink); border-color: white; }
.variant-photo .mainnav .btn-member {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.variant-photo .mainnav .btn-member:hover {
  background: rgba(255,255,255,.92);
  color: var(--ink);
  border-color: rgba(255,255,255,.92);
}
.variant-photo .mainnav .logo svg path,
.variant-photo .mainnav .logo img { filter: brightness(0) invert(1); }

/* Scrolled: pin the cinematic header and flip it to a light frosted bar so
   the white-on-video treatment doesn't disappear over the light page below. */
.variant-photo .mainnav.scrolled {
  position: fixed;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -16px rgba(26,31,44,.32);
}
.variant-photo .mainnav.scrolled .links a { color: var(--ink); }
.variant-photo .mainnav.scrolled .links a:hover { background: var(--paper); }
.variant-photo .mainnav.scrolled .links a .chev { opacity: .5; }
.variant-photo .mainnav.scrolled .logo img { filter: none; }
.variant-photo .mainnav.scrolled .icon-btn {
  background: var(--paper-2); color: var(--ink-2) !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.variant-photo .mainnav.scrolled .icon-btn:hover { background: var(--line); color: var(--ink); }
.variant-photo .mainnav.scrolled .btn-member {
  color: var(--badm-teal-deep);
  background: transparent;
  border-color: var(--badm-teal-deep);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.variant-photo .mainnav.scrolled .btn-member:hover {
  background: var(--badm-teal-deep); color: #fff; border-color: var(--badm-teal-deep);
}
.variant-photo .today {
  background: var(--ink);
}
.variant-photo .utility { display: none; }

.hero-photo {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: flex-end;
  color: white;
  overflow: hidden;
  margin-top: -1px;
  background: #348888; /* on-brand fallback while the video loads */
  isolation: isolate;
}
.hero-photo .bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
/* Which encode is on screen is decided here, not in JS — home-2026.js plays
   whichever element layout is showing. Both are preload="none" and neither
   autoplays: a hidden <video> with autoplay fetches its file anyway, so the
   inactive encode would otherwise be downloaded on every device. Keep the
   760px below in step with the matchMedia() in home-2026.js:initHeroVideo().
   These carry the same (0,2,0) specificity as the rule above and win on
   order; an unclassed .bg (only one file set) is unaffected. */
.hero-photo .bg--mobile { display: none; }
@media (max-width: 760px) {
  .hero-photo .bg--desktop { display: none; }
  .hero-photo .bg--mobile { display: block; }
}
/* Brighter, on-brand video treatment — replaces the off-brand near-black scrim.
   Soft brand deep-teal washes only where chrome/text sits (top nav, bottom copy);
   the middle stays clear so the footage reads bright and cheerful. */
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(52,136,136,.32) 0%, rgba(52,136,136,0) 24%),
    linear-gradient(180deg, rgba(52,136,136,0) 50%, rgba(52,136,136,.30) 78%, rgba(43,108,108,.58) 100%);
  z-index: 1;
}
.hero-photo > .container { z-index: 2; }
.hero-photo .container {
  width: 100%;
  padding-top: 180px;
  padding-bottom: 64px;
  position: relative;
}
.hero-photo .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: white;
  margin-bottom: 28px;
  border: 1px solid rgba(255,255,255,.2);
}
.hero-photo .eyebrow .badge {
  background: var(--badm-orange); color: white;
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
}
.hero-photo h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .96;
  letter-spacing: -.025em;
  margin: 0 0 24px;
  max-width: 16ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.hero-photo h1 .accent { color: #FFC08C; font-style: italic; font-weight: 500; }
/* Streamlined video hero: no stacked H1 — the tagline carries the message as a
   single, confident line so there's less text over the footage. */
.hero-photo .tagline.tagline-lead {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.015em;
  max-width: 22ch;
  color: #fff;
  margin: 0 0 34px;
  text-shadow: 0 2px 22px rgba(0,0,0,.32);
}
.hero-photo .tagline.tagline-lead strong { color: #fff; font-weight: 700; }
.hero-photo .tagline {
  font-size: clamp(17px, 1.45vw, 20px);
  max-width: 54ch;
  margin: 0 0 36px;
  color: rgba(255,255,255,.92);
  text-wrap: pretty;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.hero-photo .tagline strong { color: white; font-weight: 600; }
.hero-photo .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-photo .ctas .btn.secondary {
  border-color: rgba(255,255,255,.7);
  color: white;
}
.hero-photo .ctas .btn.secondary:hover {
  background: white; color: var(--ink); border-color: white;
}

/* Photo variant promos — wider, bigger imagery */
.variant-photo .promos { background: var(--paper); }
.variant-photo .promo-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  height: auto;
}
.variant-photo .promo {
  min-height: 460px;
  border-radius: 22px;
}
.variant-photo .promo.feature { grid-column: auto; grid-row: auto; padding: 28px; }
.variant-photo .promo.feature h3 { font-size: 32px; }

/* ============================================================
   VARIANT C — Playful Typographic
   ============================================================ */
.variant-type { background: var(--paper); }
.variant-type .utility { background: var(--badm-orange); color: white; }
.variant-type .utility .left .dot { background: white; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.variant-type .utility .sep { background: rgba(255,255,255,.3); }
.variant-type .utility .right a:hover { color: var(--paper); }
.variant-type .today { display: none; }

.hero-type {
  background: var(--paper);
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0 0;
  overflow: hidden;
}
.hero-type .container { position: relative; z-index: 2; }
.hero-type .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.hero-type .eyebrow .badge {
  background: var(--badm-orange); color: white;
  padding: 4px 10px; border-radius: 999px; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
}
.hero-type h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 10vw, 168px);
  line-height: .9;
  letter-spacing: -.035em;
  margin: 0 0 24px;
  color: var(--ink);
  text-wrap: balance;
  max-width: 12ch;
}
.hero-type h1 .accent {
  color: var(--badm-orange);
  font-style: italic;
  font-weight: 500;
}
.hero-type h1 .accent2 {
  color: var(--badm-teal-deep);
  font-style: italic;
  font-weight: 500;
}
.hero-type .tagline {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 0 36px;
  text-wrap: pretty;
}
.hero-type .tagline strong { color: var(--ink); font-weight: 600; }
.hero-type .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: clamp(48px, 6vw, 88px); }
.ticker-band {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
  display: flex;
  padding: 14px 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  position: relative;
  margin: 0;
}
.ticker-band .marquee {
  display: flex; gap: 36px;
  white-space: nowrap;
  animation: marquee 36s linear infinite;
  padding-right: 36px;
}
.ticker-band .marquee span {
  display: inline-flex; align-items: center; gap: 18px;
}
.ticker-band .marquee .star {
  width: 16px; height: 16px;
  background: var(--badm-orange);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Type variant adopts a more dramatic, taller ticker */
.variant-type .ticker-band {
  font-size: clamp(20px, 2vw, 28px);
  padding: 18px 0;
}
.hero-type .blob1, .hero-type .blob2 {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}
.hero-type .blob1 {
  right: -120px; top: 80px;
  width: 380px; height: 380px;
  background: var(--badm-teal-soft);
  opacity: .6;
}
.hero-type .blob2 {
  right: 120px; top: 360px;
  width: 160px; height: 160px;
  background: var(--badm-orange-soft);
}
.hero-type .heroshot {
  position: absolute;
  right: var(--gutter); top: 110px;
  width: clamp(280px, 32vw, 460px);
  aspect-ratio: 4/5;
  border-radius: 30px;
  overflow: hidden;
  z-index: 1;
  box-shadow: var(--shadow);
  transform: rotate(2deg);
}
.hero-type .heroshot img { width: 100%; height: 100%; object-fit: cover; }
.hero-type .heroshot .ribbon {
  position: absolute; left: -20px; top: 24px;
  background: var(--badm-teal-deep); color: white;
  font-family: var(--display); font-weight: 600;
  padding: 8px 18px; font-size: 14px;
  transform: rotate(-3deg);
  letter-spacing: .02em;
}

/* Type variant — promos as colorblocks */
.variant-type .promos { background: var(--paper); }
.variant-type .promo-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  height: auto;
  gap: 14px;
}
.variant-type .promo {
  min-height: 380px;
  border-radius: 24px;
  color: white;
  padding: 24px;
}
.variant-type .promo img.bg { opacity: .85; }
.variant-type .promo.feature { grid-column: span 2; grid-row: auto; min-height: 380px; padding: 28px; }
.variant-type .promo.feature h3 { font-size: 36px; }
/* Color-blocked promo overlays — transparent up top so the photo stays vibrant,
   only a deep brand-tinted scrim at the bottom for text legibility */
.promo.t-orange::after { background: linear-gradient(180deg, rgba(58,26,2,0) 42%, rgba(50,23,2,.40) 66%, rgba(44,20,2,.86) 100%) !important; }
.promo.t-teal::after   { background: linear-gradient(180deg, rgba(2,44,44,0) 42%, rgba(2,40,40,.42) 66%, rgba(2,34,34,.88) 100%) !important; }
.promo.t-ink::after    { background: linear-gradient(180deg, rgba(10,12,20,0) 44%, rgba(10,12,20,.46) 68%, rgba(8,10,16,.9) 100%) !important; }
/* Photo variant keeps the cleaner dark gradient so cards don't fight the cinematic hero */
.variant-photo .promo::after { background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.68) 100%) !important; }
.variant-type .promo h3 { font-family: var(--display); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .mainnav .row { gap: 16px; }
  .mainnav .logo img { width: 130px; }
  .mainnav .links a { padding: 8px 10px; font-size: 14.5px; }
  .today .right .label { display: none; }
  .today .member, .today .left .sep { display: none; }
}
@media (max-width: 1010px) {
  .mainnav .links { display: none; }
  .mainnav .row { grid-template-columns: 1fr auto; }
  .mainnav .icon-btn { display: none; }
  /* Membership drops with the links so the bar is logo + tickets + hamburger.
     "Get tickets" deliberately stays: the collapse point was moved 920 -> 1010
     precisely to keep it on screen, and it is the page's primary CTA. Both
     remain in the drawer's quick actions. */
  .mainnav .btn-member { display: none; }
  .mainnav .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink);
  }
  .variant-photo .mainnav .hamburger {
    background: rgba(255,255,255,.18); color: white !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
  }
  .variant-photo .mainnav.scrolled .hamburger {
    background: var(--paper-2); color: var(--ink) !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0;
  }
  .utility .right .lang { display: none; }
  .today .row { gap: 14px; }
  .today .left .capacity { display: none; }
  .hero .row { grid-template-columns: 1fr; gap: 28px; }
  .hero .copy { order: 2; }
  .hero .photo { order: 1; aspect-ratio: 4/3; max-height: 360px; }
  .hero .photo .sticker { right: 12px; width: 96px; height: 96px; font-size: 12px; }
  .hero .photo .sticker b { font-size: 24px; }
  .hero h1 { font-size: clamp(36px, 8vw, 52px); }
  .hero-photo { min-height: 78vh; }
  .hero-photo .container { padding-top: 140px; padding-bottom: 32px; }
  .hero-photo h1 { font-size: clamp(40px, 9vw, 64px); }
  .hero-type .heroshot { display: none; }
  .hero-type h1 { font-size: clamp(48px, 13vw, 88px); max-width: none; }
  .hero-type .blob1 { right: -160px; top: 200px; width: 240px; height: 240px; }
  .hero-type .blob2 { display: none; }
  .promo-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
  }
  .promo.feature { grid-column: 1 / 3; grid-row: auto; min-height: 320px; }
  .promo { min-height: 220px; }
  .promo h3 { font-size: 24px; }
  .variant-photo .promo-grid { grid-template-columns: 1fr 1fr; }
  .variant-type .promo-grid { grid-template-columns: 1fr 1fr; }
  .variant-type .promo.feature { grid-column: 1 / 3; }
  .visit-cards { grid-template-columns: 1fr; }
  footer .foot-top { grid-template-columns: 1fr; gap: 32px; }
  footer .grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
}
@media (max-width: 700px) {
  /* Phones: drop the redundant utility bar (its links live in the drawer) */
  .utility { display: none; }
  .mainnav .row { padding-block: 12px; }
  .mainnav .logo img { width: 120px; }
  .today .row { padding-block: 9px; }
  .today .hours { display: none; }
  /* Swap tiny time-chips for a meaningful status + one booking link */
  .today .left .capacity { display: inline-flex; }
  .today .left .capacity .bar { display: none; }
  .today .right .slot, .today .right .label { display: none; }
  .today .right .inline { display: inline-flex; gap: 4px; }
  .promo-grid { grid-template-columns: 1fr; }
  .promo.feature { grid-column: 1; }
  .promo { min-height: 220px; padding: 22px; }
  .promo h3 { font-size: 22px; }
  .variant-photo .promo-grid { grid-template-columns: 1fr; }
  .variant-type .promo-grid { grid-template-columns: 1fr; }
  .variant-type .promo.feature { grid-column: 1; }
  footer .grid { grid-template-columns: 1fr; gap: 0; padding-top: 32px; }
  footer .bottom { flex-direction: column; align-items: flex-start; }
  /* Accordion link groups with dividers */
  .foot-group { border-top: 1px solid rgba(255,255,255,.12); }
  .foot-group:first-child { border-top: none; }
  .foot-group > summary {
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
  }
  .foot-group > summary h5 { margin: 0; }
  .foot-group .fg-chev {
    display: inline-flex; color: rgba(255,255,255,.5);
    transition: transform .2s ease;
  }
  .foot-group[open] .fg-chev { transform: rotate(180deg); color: var(--badm-orange); }
  .foot-group:not([open]) > ul { display: none; }
  .foot-group[open] > ul { display: grid; padding: 2px 0 18px; }
  .hero h1 { font-size: 40px; }
  .hero .ctas .btn { padding: 13px 18px; font-size: 14.5px; }
  .visit { padding: 56px 0; }
  .promos .head { flex-direction: column; align-items: flex-start; }
  .mainnav .btn-tickets { padding: 9px 14px; font-size: 13.5px; }
}


/* ===== extras.css — verbatim from source-handoff ===== */

/* ============================================================
   VIDEO CHIP + MODAL
   ============================================================ */
.video-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 20px 6px 6px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.video-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.video-chip .play {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--badm-orange);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding-left: 2px;
}
.video-chip .vc-text {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.1; text-align: left;
}
.video-chip .vc-title {
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  white-space: nowrap;
}
.video-chip .vc-meta {
  font-weight: 500; font-size: 12px; color: var(--ink-3);
  letter-spacing: .01em;
  white-space: nowrap;
  margin-top: 1px;
}

.video-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(15,20,32,.78);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.video-modal-scrim.open { opacity: 1; pointer-events: auto; }
.video-modal {
  background: #0a0d14;
  border-radius: 20px;
  overflow: hidden;
  max-width: 960px;
  width: 100%;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
  position: relative;
  transform: scale(.96);
  transition: transform .2s ease;
}
.video-modal-scrim.open .video-modal { transform: scale(1); }
.video-modal .aspect {
  aspect-ratio: 16/9;
  background: #1a1f2c;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  font-size: 14px;
  position: relative;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(250,127,8,.18), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(34,186,187,.18), transparent 40%);
}
.video-modal .aspect .placeholder {
  text-align: center;
  display: grid; gap: 14px;
}
.video-modal .aspect .placeholder .big-play {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--badm-orange);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto;
  box-shadow: 0 20px 40px -10px rgba(250,127,8,.5);
}
.video-modal .aspect .placeholder .lbl {
  font-family: var(--display);
  color: white;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.video-modal .aspect .placeholder .sub {
  color: rgba(255,255,255,.6);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.video-modal .close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 10;
}
.video-modal .close:hover { background: rgba(255,255,255,.22); }

/* Video chip placement per variant */
.hero .video-chip-wrap { margin-top: 28px; }
.hero-photo .video-chip {
  background: rgba(255,255,255,.18);
  color: white;
  border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-photo .video-chip .vc-title { color: white; }
.hero-photo .video-chip .vc-meta { color: rgba(255,255,255,.7); }
.hero-photo .video-chip-wrap {
  position: absolute;
  top: 130px;
  right: var(--gutter);
  z-index: 3;
}
.hero-type .video-chip-wrap { margin-top: 8px; margin-bottom: 24px; display: inline-block; }

/* ============================================================
   MISSION BAND (full-bleed colored section)
   ============================================================ */
.mission {
  background: var(--badm-teal-deep);
  color: white;
  padding: clamp(80px, 9vw, 130px) 0;
  position: relative;
  overflow: hidden;
}
.mission::before, .mission::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.mission::before {
  left: -120px; top: -120px;
  width: 380px; height: 380px;
  background: rgba(255,255,255,.07);
}
.mission::after {
  right: -160px; bottom: -160px;
  width: 460px; height: 460px;
  background: rgba(255,255,255,.05);
}
.mission .container { position: relative; z-index: 1; }
.mission .grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.mission .eyebrow {
  font: 600 12px/1 var(--body);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.mission .eyebrow::before {
  content: ""; width: 22px; height: 1.5px;
  background: rgba(255,255,255,.7);
}
.mission h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.mission h2 em { font-style: italic; font-weight: 500; color: rgba(255,255,255,.85); }
.mission .lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 36px;
  color: rgba(255,255,255,.94);
  text-wrap: pretty;
}
.mission .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 28px 0 0;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.22);
}
.mission .stat { display: grid; gap: 6px; }
.mission .stat b {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 3.6vw, 52px);
  letter-spacing: -.02em;
  line-height: .95;
  color: white;
}
.mission .stat span {
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  letter-spacing: .02em;
  line-height: 1.35;
}
.mission .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.mission .btn.primary { background: white; color: var(--badm-orange-deep); box-shadow: none; }
.mission .btn.primary:hover { background: var(--badm-orange); color: white; }
.mission .btn.ghost {
  background: transparent; color: white;
  border: 1.5px solid rgba(255,255,255,.7);
}
.mission .btn.ghost:hover { background: rgba(255,255,255,.12); border-color: white; }
.mission .photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: rgba(0,0,0,.15);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.35);
}
.mission .photo img { width: 100%; height: 100%; object-fit: cover; }
.mission .photo .badge {
  position: absolute;
  top: 22px; left: 22px;
  background: white; color: var(--ink);
  font-family: var(--display); font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: -.005em;
  box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.mission .photo .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--badm-orange); }

/* Mission per-variant tints */
.variant-photo .mission { background: var(--ink); }
.variant-photo .mission .btn.primary { color: var(--ink); }
.variant-type .mission { background: var(--badm-teal-deep); }
.variant-type .mission .btn.primary { color: var(--badm-teal-deep); }

/* ============================================================
   TICKET WIDGET (replaces Visit cards)
   ============================================================ */
.ticket-widget-section {
  background: var(--paper);
  padding: clamp(64px, 8vw, 110px) 0;
  position: relative;
}
.variant-photo .ticket-widget-section { background: white; }
.ticket-widget-section .head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.ticket-widget-section .head .section-eyebrow { color: var(--badm-orange-deep); justify-content: center; white-space: nowrap; }
.ticket-widget-section .head .section-eyebrow::before { background: var(--badm-orange-deep); }
.ticket-widget-section .head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.05; letter-spacing: -.02em;
  margin: 14px 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
.ticket-widget-section .head p { color: var(--ink-2); margin: 0; font-size: 17px; }

.ticket-widget {
  display: grid;
  grid-template-columns: 1.6fr minmax(330px, 1fr);
  gap: 0;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(26,31,44,.03), 0 30px 60px -30px rgba(26,31,44,.25);
  border: 1px solid var(--line);
}
.ticket-widget > .left, .ticket-widget > .right { min-width: 0; }
.ticket-widget .left { padding: 34px 36px; border-right: 1px solid var(--line); }
.ticket-widget .right {
  padding: 34px 36px;
  background: var(--paper);
  display: flex; flex-direction: column;
}
.ticket-widget .step { margin-bottom: 26px; }
.ticket-widget .step:last-child { margin-bottom: 0; }
.ticket-widget .step-label {
  display: flex; align-items: center; gap: 10px;
  font: 600 12px/1 var(--body);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  white-space: nowrap;
}
.ticket-widget .step-label .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--badm-orange);
  color: white;
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}

.ticket-widget .tier {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.ticket-widget .tier:last-child { border-bottom: none; }
.ticket-widget .tier .name { font-weight: 600; font-size: 15px; }
.ticket-widget .tier .desc {
  font-size: 13px; color: var(--ink-3); margin-top: 2px;
}
.ticket-widget .tier .desc b { color: var(--ink-2); font-weight: 600; }
.ticket-widget .tier .ctrl {
  display: inline-flex; align-items: center; gap: 10px;
  background: white;
  border-radius: 999px;
  padding: 4px;
  border: 1px solid var(--line);
}
.ticket-widget .tier .ctrl button {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 16px;
  transition: background .15s ease;
  padding: 0;
}
.ticket-widget .tier .ctrl button:hover:not(:disabled) { background: var(--badm-orange-soft); color: var(--badm-orange-deep); }
.ticket-widget .tier .ctrl button:disabled { opacity: .35; cursor: not-allowed; }
.ticket-widget .tier .ctrl .count { min-width: 18px; text-align: center; font-weight: 600; font-size: 15px; }

.ticket-widget .right-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.ticket-widget .right-head h4 {
  font-family: var(--display); font-weight: 600;
  font-size: 22px; letter-spacing: -.01em;
  margin: 0;
}
.ticket-widget .right-head .selected { font-size: 13px; color: var(--ink-2); }

.ticket-widget .summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.ticket-widget .summary-row.total {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
  font-size: 15px;
  color: var(--ink);
}
.ticket-widget .summary-row.total b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ticket-widget .reserve {
  margin-top: 18px;
  padding: 16px 20px;
  width: 100%;
  border-radius: 999px;
  background: var(--badm-orange);
  color: white !important;
  font-weight: 700;
  font-size: 15.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease, transform .12s ease;
}
.ticket-widget .reserve:hover { background: var(--badm-orange-deep); transform: translateY(-1px); }
.ticket-widget .reserve:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Skip widget links band below */
.ticket-skip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.ticket-skip a {
  background: white;
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 14.5px;
  transition: border-color .15s ease, background .15s ease;
}
.ticket-skip a:hover { border-color: var(--badm-orange-soft); background: var(--badm-orange-soft); color: var(--badm-orange-deep); }
.ticket-skip a .ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--badm-teal-soft); color: var(--badm-teal-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 1040px) {
  .ticket-widget { grid-template-columns: 1fr; }
  .ticket-widget .left { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .today .row { gap: 12px; padding-block: 10px; }
  .today .center { display: none; }
  .today .right .slots .label { display: none; }
  .mission .grid { grid-template-columns: 1fr; }
  .mission .photo { aspect-ratio: 16/10; max-height: 360px; }
  .mission .stats { grid-template-columns: 1fr 1fr; }
  .ticket-widget { grid-template-columns: 1fr; }
  .ticket-widget .left { border-right: none; border-bottom: 1px solid var(--line); }
  .ticket-skip { grid-template-columns: 1fr; }
  .hero-photo .video-chip-wrap { top: 100px; right: 16px; }
  .hero-photo .video-chip { font-size: 12.5px; padding: 5px 14px 5px 5px; }
  .hero-photo .video-chip .play { width: 28px; height: 28px; }
  .hero-photo .video-chip .vc-meta { display: none; }
}
@media (max-width: 600px) {
  .today .row { font-size: 13px; }
  .today .left .capacity .bar { width: 60px; }
  .ticket-widget .left, .ticket-widget .right { padding: 24px 22px; }
  .mission .stats { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   POLISH PASS — focus states, scroll-reveal, section seams
   ============================================================ */

/* Keyboard focus — two-tone ring that reads on light & dark sections */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-tickets:focus-visible,
.mainnav .links a:focus-visible,
.age-chip:focus-visible,
.cal-cell:focus-visible,
.cal-nav:focus-visible,
.today .slot:focus-visible,
.promo:focus-visible,
.visit-card:focus-visible,
.marin-card:focus-visible,
.video-chip:focus-visible,
.ticket-widget .tier .ctrl button:focus-visible,
.ticket-widget .reserve:focus-visible,
.ticket-skip a:focus-visible,
footer a:focus-visible,
.vc-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4.5px var(--badm-orange);
  border-radius: 8px;
}
/* round elements keep their pill ring */
.btn:focus-visible,
.btn-tickets:focus-visible,
.age-chip:focus-visible,
.today .slot:focus-visible,
.video-chip:focus-visible,
.ticket-widget .tier .ctrl button:focus-visible,
.ticket-widget .reserve:focus-visible,
.vc-cta:focus-visible { border-radius: 999px; }
/* on the teal mission + dark footer, swap the inner gap colour so it reads */
.mission a:focus-visible,
.mission button:focus-visible,
.mission .btn:focus-visible {
  box-shadow: 0 0 0 2px var(--badm-teal-deep), 0 0 0 4.5px #fff;
}
footer a:focus-visible,
footer .vc-cta:focus-visible {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4.5px var(--badm-orange);
}

/* Scroll reveal — JS adds .reveal-init, then .reveal-in on intersect.
   No JS / reduced motion => content stays fully visible. */
.reveal-init { opacity: 0; transform: translateY(20px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}

/* Marquee: pause on hover for readability */
.ticker-band:hover .marquee { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .reveal-init, .reveal-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ticker-band .marquee { animation: none !important; transform: none !important; }
  .hero .photo img, .promo img.bg { transition: none !important; }
}

/* Softened section seams — colored panels slide over the section above them */
.mission, .day-in-marin, footer { --seam: clamp(28px, 4vw, 52px); }
.mission {
  border-radius: var(--seam) var(--seam) 0 0;
  margin-top: calc(var(--seam) * -1);
  z-index: 2;
}
.day-in-marin {
  border-radius: var(--seam) var(--seam) 0 0;
  margin-top: calc(var(--seam) * -1);
  z-index: 3;
}
footer {
  border-radius: 0;
  overflow: hidden;
  z-index: 4;
}


/* ===== iteration.css — verbatim from source-handoff ===== */

/* ============================================================
   ITERATION 2 — hours banner, discovery zones, live (ACME) badge,
   footer newsletter / quick links, promo heading alignment.
   ============================================================ */

/* ============================================================
   ACCESSIBILITY PASS — contrast nudges to clear WCAG AA (4.5:1)
   on small text. Brand hues kept; only darkened where text-on-light
   (or light-on-teal) fell short.
   ============================================================ */
.zones .zones-all { color: #A8480A; }          /* was orange-deep 2.99:1 → ~4.6:1 */
.ticket-widget-section .head .section-eyebrow { color: #A8480A; }
.ticket-widget-section .head .section-eyebrow::before { background: #A8480A; }
/* Deepen the utility hours bar slightly so text clears AA. */
.ticket-widget .tier .desc { color: var(--ink-2); }  /* nudge gray to AA */

/* ---- TICKET MODAL (header "Get tickets" — booking flow from anywhere) ---- */
html { scroll-behavior: smooth; }
.ticket-widget-section { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.ticket-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(20,40,40,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.ticket-modal-scrim.open { opacity: 1; pointer-events: auto; }
.ticket-modal {
  position: relative;
  background: var(--paper);
  border-radius: 24px;
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 40px 90px -20px rgba(15,32,32,.6);
  transform: translateY(14px) scale(.98);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
  -webkit-overflow-scrolling: touch;
}
.ticket-modal-scrim.open .ticket-modal { transform: translateY(0) scale(1); }
.ticket-modal-body { padding: clamp(22px, 3vw, 38px); }
/* the embedded widget drops its own section chrome inside the modal */
.ticket-modal-body .head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.ticket-modal-body .head h2 { font-size: clamp(26px, 3vw, 36px); }
.tm-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,40,40,.06);
  color: var(--ink);
  border: 1px solid var(--line);
  transition: background .15s ease, transform .12s ease;
  padding: 0;
}
.tm-close:hover { background: rgba(20,40,40,.12); transform: rotate(90deg); }
.tm-close:focus-visible { outline: 3px solid var(--badm-teal); outline-offset: 2px; }
@media (max-width: 700px) {
  .ticket-modal-scrim { padding: 0; align-items: flex-end; }
  .ticket-modal { border-radius: 22px 22px 0 0; max-height: 92vh; width: 100%; }
}

/* ---- HOURS BANNER (under the video hero) ---- */
/* Client prefers white text on the primary teal #22BABB (their call — note this
   is below WCAG AA contrast for small text; documented for the record). */
.hours-banner {
  background: var(--badm-teal);
  color: #fff;
}
.hours-banner .hb-row {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding-block: 16px;
  flex-wrap: wrap;
}
.hb-main { display: inline-flex; align-items: center; gap: 13px; }
.hb-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: pulse 1.8s ease-out infinite;
}
/* --status-dot is set inline from BADM Settings → Hours. Unset, the dot keeps
   its approved white and mint ring. */
.hb-pulse[style*="--status-dot"] {
  background: var(--status-dot);
  animation-name: status-pulse;
}
@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-dot) 70%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--status-dot) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-dot) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .hb-pulse { animation: none; } }
.hb-hours { display: flex; flex-direction: column; line-height: 1.25; }
.hb-hours b {
  font-family: var(--display);
  font-weight: 700; font-size: 22px; letter-spacing: -.01em;
}
.hb-hours > span { font-size: 16px; color: rgba(255,255,255,.9); }
.hb-hours .hb-dot { margin: 0 8px; opacity: .5; }
.hb-special {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  font-size: 13.5px;
}
.hb-special .hb-tag {
  font: 700 10px/1 var(--body);
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--badm-orange); color: #fff;
  padding: 5px 9px; border-radius: 999px;
  white-space: nowrap;
}
.hb-special-txt { color: #fff; }
.hb-right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 18px;
}
.hb-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 14.5px; color: #fff;
  white-space: nowrap;
}
.hb-link:hover { color: #BFF6A9; }
@media (max-width: 760px) {
  .hb-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .hb-special { order: 3; }
}

/* ---- DISCOVERY ZONES (horizontal scroller) ---- */
.zones {
  background: var(--paper);
  padding: clamp(56px, 7vw, 92px) 0 clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
}
.variant-photo .zones { background: var(--paper); }
.zones-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 26px; flex-wrap: wrap;
}
.zones-head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.05; letter-spacing: -.02em;
  margin: 0; color: var(--ink);
}
.zones-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--badm-orange-deep);
  transition: gap .14s ease;
}
.zones-all:hover { gap: 12px; }
.zones-scroller {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Align first/last card with the container content box so the row lines up
     with the "What's On" promo images (client note). scroll-padding keeps
     snap from eating the start inset. */
  padding: 6px max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) 18px;
  scroll-padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.zones-scroller::-webkit-scrollbar { height: 8px; }
.zones-scroller::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.zone-card {
  position: relative;
  flex: 0 0 clamp(220px, 24vw, 300px);
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
  background: #2a2e3a;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.zone-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.zone-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s ease;
}
.zone-card:hover img { transform: scale(1.05); }
.zone-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,40,40,0) 42%, rgba(15,32,32,.82) 100%);
}
.zone-card .zone-name {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  z-index: 1;
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 14px rgba(0,0,0,.4);
}

/* ---- PROMO HEADING ALIGNMENT (Steven's note: cards looked lopsided) ----
   Reserve a consistent block height for the copy so titles line up across cards. */
.promos .promo p { min-height: 2.9em; }

/* ---- HERO VIDEO PAUSE/PLAY CONTROL (accessibility) ---- */
.hero-photo .video-toggle {
  position: absolute;
  right: var(--gutter); bottom: 26px;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: rgba(15,32,32,.42);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff !important;
  font-weight: 600; font-size: 13px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .15s ease, transform .12s ease;
}
.hero-photo .video-toggle:hover { background: rgba(15,32,32,.62); transform: translateY(-1px); }
.hero-photo .video-toggle svg { display: block; }
@media (max-width: 700px) {
  .hero-photo .video-toggle { bottom: 16px; right: 16px; padding: 8px 12px 8px 10px; font-size: 12.5px; }
}

/* ---- FOOTER (content mirrors the live site footer; our visual design) ---- */
.foot-hours { margin-top: 22px; display: grid; gap: 3px; font-size: 14.5px; color: #ABA597; }
.foot-hours p { margin: 0; }
.foot-hours b { color: #fff; font-weight: 700; }
.foot-contact { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.foot-contact li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.foot-contact .fc-ico { color: var(--badm-teal); flex-shrink: 0; display: inline-flex; }
.foot-contact a { color: #C8C3B5; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.2); transition: color .15s ease; }
.foot-contact a:hover { color: var(--badm-orange); }
.foot-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.foot-cta-row .fcta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; white-space: nowrap;
  transition: background .15s ease, transform .12s ease, border-color .15s ease, color .15s ease;
}
.foot-cta-row .fcta.primary { background: var(--badm-orange); color: #fff; }
.foot-cta-row .fcta.primary:hover { background: var(--badm-orange-deep); transform: translateY(-1px); }
.foot-cta-row .fcta.outline {
  padding: 0; border: none; background: none;
  color: #fff; font-weight: 600;
  border-bottom: 1.5px solid rgba(255,255,255,.35);
  border-radius: 0; padding-bottom: 2px;
}
.foot-cta-row .fcta.outline:hover { background: none; color: var(--badm-mint); border-color: var(--badm-mint); }

/* 3-column link grid (Explore / Experiences / Connect) — desktop only;
   below 920px the base footer responsive rules take over (2-up, then accordion). */
@media (min-width: 921px) {
  footer .grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Footer link columns — expanded on tablet/desktop, tap-accordion on phones */
.foot-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: none; border: none; padding: 0; margin-bottom: 18px;
  text-align: left; color: inherit; cursor: default;
}
.foot-col-head h5 { margin: 0; }
.foot-col .fg-chev { display: none; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.foot-col ul a {
  color: #C8C3B5; font-size: 15px; display: inline-block;
  transition: color .15s ease, transform .14s ease;
}
.foot-col ul a:hover { color: var(--badm-orange); transform: translateX(2px); }
/* Long address shouldn't overflow the hours card */
footer .foot-visit-card .vc-row b { white-space: normal; }
footer .foot-visit-card .vc-row:nth-child(4) { gap: 18px; }

@media (max-width: 700px) {
  .grid-3 .foot-col { border-top: 1px solid rgba(255,255,255,.12); }
  .grid-3 .foot-col:first-child { border-top: none; }
  .foot-col-head { margin-bottom: 0; padding: 16px 0; cursor: pointer; }
  .foot-col .fg-chev {
    display: inline-flex; color: rgba(255,255,255,.5);
    transition: transform .2s ease;
  }
  .foot-col.open .fg-chev { transform: rotate(180deg); color: var(--badm-orange); }
  .foot-col:not(.open) ul { display: none; }
  .foot-col.open ul { padding: 0 0 18px; }
}

/* Follow cluster in the bottom bar */
.foot-follow { display: inline-flex; align-items: center; gap: 12px; }
.foot-follow span { font-weight: 600; color: #ABA597; font-size: 13.5px; }
.foot-follow a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #D8D3C2; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
}
.foot-follow a:hover { background: var(--badm-orange); color: #fff; border-color: var(--badm-orange); transform: translateY(-2px); }

.foot-news { margin-top: 26px; max-width: 460px; }
.foot-news .fn-label {
  font: 600 12px/1 var(--body);
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin: 0 0 6px;
  display: inline-flex; align-items: center; gap: 9px;
}
.foot-news .fn-label::before { content: ""; width: 14px; height: 2px; background: var(--badm-teal); }
.foot-news .fn-sub { font-size: 13.5px; color: #ABA597; margin: 0 0 14px; line-height: 1.5; }
.foot-news form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.foot-news input {
  flex: 1 1 160px; min-width: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 12px 16px;
  color: #fff; font: inherit; font-size: 14px;
}
.foot-news input::placeholder { color: #8E897C; }
.foot-news input:focus { outline: none; border-color: var(--badm-teal); background: rgba(255,255,255,.1); }
.foot-news button {
  flex: 0 0 auto;
  padding: 12px 26px;
  background: transparent;
  color: #fff !important ;
  border: 1.5px solid rgba(255,255,255,.5);
  font-weight: 700; font-size: 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.foot-news button:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Quick links — curated "focus" row above the columns */
.foot-quick {
  display: flex; align-items: center; gap: 10px 12px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.foot-quick .fq-label {
  font: 600 12px/1 var(--body);
  letter-spacing: .14em; text-transform: uppercase;
  color: #8E897C; margin-right: 4px;
}
.foot-quick a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #E9E5D9; font-weight: 600; font-size: 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.foot-quick a:hover { background: var(--badm-orange); border-color: var(--badm-orange); color: #fff; }
.foot-quick a.accent { background: var(--badm-orange); border-color: var(--badm-orange); color: #fff; }
.foot-quick a.accent:hover { background: var(--badm-orange-deep); border-color: var(--badm-orange-deep); }

@media (max-width: 700px) {
  .foot-news { max-width: none; }
  .foot-quick { gap: 8px; }
  .foot-quick .fq-label { width: 100%; margin-bottom: 2px; }
}

/* ============================================================
   TICKET WIDGET v2 — month calendar, senior tier
   ============================================================ */
.ticket-widget .cal {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
}
.ticket-widget .cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ticket-widget .cal-title {
  font-family: var(--display);
  font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--ink);
}
.ticket-widget .cal-nav {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink-2);
  border: 1px solid var(--line);
  transition: background .14s ease, color .14s ease, opacity .14s ease;
  padding:0;
}
.ticket-widget .cal-nav:hover:not(:disabled) { background: var(--badm-orange); color: #fff; border-color: var(--badm-orange); }
.ticket-widget .cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.ticket-widget .cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.ticket-widget .cal-dow span {
  text-align: center; font: 700 11px/1 var(--body);
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 6px;
}
.ticket-widget .cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.ticket-widget .cal-cell {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font: 600 15px/1 var(--body); color: var(--ink);
  background: transparent; border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  /* style.css gives every `button` .9375rem 1.5625rem padding. On a date cell
     that sets a ~68px floor, so seven columns overflowed the card on phones.
     1px 6px is the browser default the prototype was drawn with, and what the
     .sp-ico sizes below assume. min-width: 0 lets the 1fr tracks shrink on a
     320px screen. */
  padding: 1px 6px;
  min-width: 0;
}
.ticket-widget .cal-cell.empty { pointer-events: none; }
.ticket-widget .cal-cell:hover:not(.disabled):not(.active) { background: var(--badm-orange-soft); border-color: var(--badm-orange); }
.ticket-widget .cal-cell.today:not(.active) { box-shadow: inset 0 0 0 1.5px var(--badm-teal); }
.ticket-widget .cal-cell.active {
  background: var(--badm-orange); color: #fff; border-color: var(--badm-orange);
  box-shadow: 0 6px 14px -6px rgba(250,127,8,.6);
}
.ticket-widget .cal-cell.disabled { color: var(--line-strong); cursor: not-allowed; }
/* Unavailable dates carry a grey fill, not just a strikethrough, so the two
   states read as a pair against the mint of an available date. The text is
   --ink-3 rather than --line-strong: on the fill, --line-strong drops to about
   1.3:1 and the date becomes unreadable. */
.ticket-widget .cal-cell.closed {
  color: var(--ink-3);
  background: var(--paper-2);
  text-decoration: line-through;
}
/* Open day, but nothing to sell — sold out or not yet on sale (client,
   2026-10-08). Kept apart from Closed by fill, not colour: white with a dashed
   edge, no new hue. Struck through like Closed, because either way it cannot
   be booked. */
.ticket-widget .cal-cell.no-tickets {
  color: var(--ink-3);
  background: #fff;
  border: 1px dashed var(--line-strong);
  text-decoration: line-through;
}
.ticket-widget .cal-legend {
  margin-top: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3);
}
.ticket-widget .cal-legend > span { display: inline-flex; align-items: center; gap: 7px; }
/* Both keys are swatches now that unavailable dates have a fill of their own —
   a dot beside a filled square would not show what the grid actually does. */
.ticket-widget .cal-legend .cl-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--paper-2); border: 1px solid var(--line-strong); }
.ticket-widget .cal-legend .cl-none { width: 12px; height: 12px; border-radius: 4px; background: #fff; border: 1px dashed var(--line-strong); }
.ticket-widget .cal-legend .cl-swatch { width: 12px; height: 12px; border-radius: 4px; background: var(--badm-teal-soft); border: 1px solid var(--badm-mint); }
/* Mint marks a bookable date. It marked weekends until 2026-09-11, which told
   visitors something they already knew. */
.ticket-widget .cal-cell.available:not(.active):not(.disabled) { background: var(--badm-teal-soft); }
.ticket-widget .cal-cell.available:not(.active):not(.disabled):hover { background: var(--badm-orange-soft); border-color: var(--badm-orange); }

/* Special-event marker — added 2026-09-21 (BUILD-HANDOFF §24).

   An ::after rather than markup: the cell is a centred flex box whose only
   child is the numeral, and keeping the dot in CSS leaves the PHP and JS
   renderers identical apart from one class name. The dot is decorative; the
   event reaches the accessible label, so it is never the only signal.

   --badm-teal-deep on the mint of an available cell measures 3.63:1, clearing
   the 3:1 non-text minimum. On the selected date it switches to --ink, not
   white: white on --badm-orange measures 2.59:1, and that exception is
   documented for the numeral, not something to extend to new elements. */
.ticket-widget .cal-cell.special { position: relative; }
/* With artwork the cell stacks: numeral above, icon below. 56px wide inside an
   83.5px cell, chosen on a mock against the real Bat.svg at true size — see
   BUILD-HANDOFF §24. Height is never set: it follows the uploaded file's own
   proportions, which is the whole reason this is an <img> and not the dot's
   ::after. */
.ticket-widget .cal-cell.has-icon { flex-direction: column; gap: 4px; }
.ticket-widget .cal-cell .sp-ico {
  width: 100%; max-width: 56px; height: auto; max-height: 40%;
  /* A tall or square upload hits max-height while width stays 56px, which
     would squash it. contain letterboxes instead. */
  object-fit: contain;
  display: block; pointer-events: none; user-select: none;
}
.ticket-widget .cal-cell.special::after {
  content: "";
  position: absolute; left: 50%; bottom: 5px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%;
  background: var(--badm-teal-deep);
}
.ticket-widget .cal-cell.special.active::after { background: var(--ink); }
/* Inside today's ring the dot would sit on the 1.5px inset stroke. */
.ticket-widget .cal-cell.special.today:not(.active)::after { bottom: 6px; }
/* The dot is the fallback for an event with no artwork uploaded, so it must not
   also appear under one that has it. Must stay after the rules above: same
   specificity, so source order decides. */
.ticket-widget .cal-cell.has-icon::after { content: none; }
/* The legend key is an available cell in miniature, dot included. */
.ticket-widget .cal-legend .cl-ico { width: 22px; height: auto; max-height: 16px; display: block; }
.ticket-widget .cal-legend .cl-event {
  position: relative;
  width: 12px; height: 12px; border-radius: 4px;
  background: var(--badm-teal-soft); border: 1px solid var(--badm-mint);
}
.ticket-widget .cal-legend .cl-event::after {
  content: "";
  position: absolute; left: 50%; bottom: 2px;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%;
  background: var(--badm-teal-deep);
}

/* While a date's real tiers are being fetched. Deliberately mild: the rows
   showing are the previous date's and are still true until the answer lands,
   so a spinner would overstate what is happening. */
.ticket-widget.tiers-loading .tier { opacity: .55; transition: opacity .12s ease; }
.ticket-widget.tiers-loading .tier .ctrl button { pointer-events: none; }

/* Member/guest discount note under the tiers */
.ticket-widget .tier-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--badm-teal-soft); border-radius: 12px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
}
.ticket-widget .tier-note svg { color: var(--badm-teal-deep); flex-shrink: 0; margin-top: 2px; }
.ticket-widget .tier-note a { color: var(--badm-orange-deep); font-weight: 600; }
/* Only one member line shows; the attribute must win over any display rule. */
.ticket-widget .tier-note [data-member-note][hidden] { display: none; }

/* Rescheduling note in the summary */
.ticket-widget .reschedule-note {
  margin: 0 0 16px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45;
}
.ticket-widget .reschedule-note a { color: var(--badm-orange-deep); font-weight: 600; }

@media (max-width: 600px) {
  .ticket-widget .cal { padding: 14px 12px 12px; }
  .ticket-widget .cal-cell { font-size: 14px; border-radius: 10px; }
  .ticket-widget .cal-cell.special::after { bottom: 4px; width: 4px; height: 4px; margin-left: -2px; }
  /* On a ~34px phone cell the theme's global img { max-width: 100% } already
     holds the icon inside the cell's content box — about 21px once the cell's
     6px side padding is taken off. Stated as a cap rather than a fixed width so
     the rule says what actually happens. */
  .ticket-widget .cal-cell .sp-ico { width: 100%; max-width: 26px; max-height: 38%; }
  .ticket-widget .cal-cell.has-icon { gap: 2px; }
  .ticket-widget .cal-cell.special.today:not(.active)::after { bottom: 5px; }
  .ticket-widget .cal-grid { gap: 3px; }
}

/* ---- MOBILE: promos scroll sideways like Discovery Zones (client note) ---- */
@media (max-width: 700px) {
  .promos .promo-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 2px 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .promos .promo-grid::-webkit-scrollbar { display: none; }
  .promos .promo-grid .promo,
  .promos .promo-grid .promo.feature {
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: start;
    grid-column: auto;
    min-height: 300px;
  }
  /* subtle "more →" affordance: let the last card breathe at the edge */
  .promos .promo-grid::after { content: ""; flex: 0 0 4px; }
}

/* ============================================================
   MOBILE HARDENING — new sections at 360–480px
   ============================================================ */
@media (max-width: 760px) {
  /* Hours banner: let the special-hours pill wrap instead of overflowing */
  .hours-banner .hb-row { gap: 12px 18px; }
  .hb-special { flex-wrap: wrap; max-width: 100%; }
  .hb-special-txt { font-size: 13px; }
  /* Move the video control clear of the bottom-left CTAs */
  .hero-photo .video-toggle { top: 86px; bottom: auto; right: 12px; }
  /* Entry-time "live" tag drops under the step title cleanly */
  .ticket-widget .step-label { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  /* Discovery zone cards a touch narrower so a second card peeks in */
  .zone-card { flex-basis: clamp(200px, 72vw, 260px); }
  .zone-card .zone-name { font-size: 20px; }
}
@media (max-width: 480px) {
  .hb-right { width: 100%; justify-content: flex-start; }
}

/* ============================================================
   FOOTER ON PRIMARY TEAL #22BABB — white text (client preference;
   note: below WCAG AA contrast on bright teal, documented for the record).
   ============================================================ */
.foot-hours { color: rgba(255,255,255,.95); font-weight: 600; }
.foot-contact a { color: #fff; font-weight: 600; text-decoration-color: rgba(255,255,255,.4); }
.foot-contact .fc-ico { color: #fff; }
.foot-col ul a { color: #fff; font-weight: 600; transition: color .15s ease; }
.foot-col ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.foot-col-head h5 { color: #fff; }
.foot-follow span { color: #fff; font-weight: 600; }
.foot-follow a { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; }
.foot-follow a:hover { background: var(--badm-orange); border-color: var(--badm-orange); color: #fff; }
.foot-news .fn-label { color: #fff; }
.foot-news .fn-label::before { background: #fff; }
.foot-news .fn-sub { color: #fff; font-weight: 600; }
.foot-news .fn-field > span { color: #fff; font-weight: 600; }
.foot-news input { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; }
.foot-news input::placeholder { color: rgba(255,255,255,.7); }
.foot-news input:focus { border-color: #fff; background: rgba(255,255,255,.26); }
.foot-news button { color: #fff; border-color: rgba(255,255,255,.6); }
.foot-news button:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.foot-quick { border-bottom-color: rgba(255,255,255,.28); }
.foot-quick .fq-label { color: #fff; font-weight: 700; }
.foot-quick a { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); color: #fff; transition: background .15s ease, border-color .15s ease; }
.foot-quick a:hover { background: rgba(255,255,255,.28); border-color: #fff; }
/* Hours card + generic footer text/links on teal */
footer .foot-visit-card { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
footer .foot-visit-card .vc-head { border-bottom-color: rgba(255,255,255,.28); }
footer .foot-visit-card .vc-row { border-bottom-color: rgba(255,255,255,.22); }
footer .foot-visit-card .vc-row span { color: #fff; font-weight: 600; }
footer .foot-visit-card .vc-row b { color: #fff; font-weight: 700; }
footer .foot-visit-card .vc-cta { color: #fff; font-weight: 700; border-bottom-color: rgba(255,255,255,.5); transition: gap .14s ease, border-color .15s ease; }
footer .foot-visit-card .vc-cta:hover { border-bottom-color: #fff; gap: 12px; }
footer .foot-tagline { color: #fff !important; font-weight: 600; }
footer .bottom { color: #fff; font-weight: 600; }
footer ul a { color: #fff; font-weight: 600; transition: color .15s ease; }
footer ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
footer .bottom a { color: #fff; font-weight: 600; }
footer .bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
footer .socials a { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; transition: background .15s ease, border-color .15s ease; }
footer .socials a:hover { background: rgba(255,255,255,.28); border-color: #fff; }

/* ============================================================
   [hidden] MUST WIN

   The React prototype mounted or unmounted these elements; the port
   toggles the hidden attribute instead. But several rules carried over
   from the prototype set display on those same elements and outrank
   [hidden]'s display:none — .hero-photo .video-toggle svg (0,2,1) and
   .ticket-widget .fee-optin (0,2,0) both beat [hidden] (0,1,0). So the
   attribute was set correctly and simply ignored: the video control
   showed play AND pause together, and the card-fee opt-in stayed on
   screen at a zero subtotal.

   Scoped and !important because hidden is a semantic "not applicable
   right now", not a style — nothing should be able to outvote it. This
   also stops the next display rule on a toggled element reintroducing it.
   ============================================================ */
.variant-photo [hidden] { display: none !important; }

/* ============================================================
   SEARCH — overlay, panel, and the drawer's inline form
   Net-new UI: the approved prototype has a search button and
   nothing behind it. Geometry and motion are lifted from the
   ticket modal so the two overlays feel like one system, but
   this one is top-aligned — search belongs near the nav it was
   opened from, not floating mid-screen.
   ============================================================ */
.search-scrim {
  position: fixed; inset: 0;
  background: rgba(20,40,40,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(72px, 12vh, 140px) 24px 24px;
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.search-scrim.open { opacity: 1; pointer-events: auto; }

/* A grid rather than a positioned close button: floated top-right it sat on
   top of the submit, since the form is full-bleed inside the panel. */
.search-panel {
  background: var(--paper);
  border-radius: 24px;
  width: min(680px, 100%);
  padding: clamp(18px, 2.4vw, 24px);
  box-shadow: 0 40px 90px -20px rgba(15,32,32,.6);
  display: grid;
  gap: 12px;
  transform: translateY(14px) scale(.98);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.search-scrim.open .search-panel { transform: translateY(0) scale(1); }

.search-panel__close {
  justify-self: end;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,40,40,.06);
  color: var(--ink);
  border: 1px solid var(--line);
  transition: background .15s ease, transform .12s ease;
  padding: 0;
}
.search-panel__close:hover { background: rgba(20,40,40,.12); transform: rotate(90deg); }
.search-panel__close:focus-visible { outline: 3px solid var(--badm-teal); outline-offset: 2px; }

/* ---- the form itself, shared by the overlay and the drawer ---- */
.badm-search {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.badm-search:focus-within {
  border-color: var(--badm-teal);
  box-shadow: 0 0 0 3px rgba(34,186,187,.22);
}
/* Absolute, so the label is never a grid item — without this the field wraps
   to a second row and the columns render out of order. Declared here rather
   than leaning on style.css's .screen-reader-text, which this stylesheet is
   otherwise independent of. */
.badm-search__label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.badm-search__icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  flex-shrink: 0;
}
.badm-search__field {
  /* min-width 0 or the grid child refuses to shrink and the submit is pushed out. */
  min-width: 0;
  width: 100%;
  border: 0 !important; 
  background: transparent; outline: none;
  font-family: inherit;
  font-size: 16.5px;
  color: var(--ink);
  padding: 10px 0 !important;
  -webkit-appearance: none;
  appearance: none;
}
.badm-search__field::placeholder { color: var(--ink-3); opacity: 1; }
.badm-search__field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.badm-search__submit {
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--badm-orange);
  color: white !important ;
  font-weight: 700;
  font-size: 14.5px;
  padding: 11px 22px;
  border: 1px solid var(--badm-orange);
  transition: background .15s ease, border-color .15s ease;
}
.badm-search__submit:hover { background: var(--badm-orange-deep); border-color: var(--badm-orange-deep); }
.badm-search__submit:focus-visible { outline: 3px solid var(--badm-teal); outline-offset: 2px; }

/* ---- drawer variant: the only search affordance below 1010px ---- */
.drawer .badm-search--drawer {
  margin-bottom: 12px;
  padding: 4px 4px 4px 12px;
  gap: 8px;
}
/* 16px is a floor, not a taste call: iOS Safari zooms the viewport when a
   focused input is smaller, and this field only ever renders on touch widths. */
.drawer .badm-search--drawer .badm-search__field { font-size: 16px; padding: 8px 0; border: 0; }
.drawer .badm-search--drawer .badm-search__submit { padding: 9px 16px; font-size: 13.5px; }

@media (max-width: 700px) {
  .search-scrim { padding: 16px; align-items: flex-start; }
  .search-panel { padding: 14px; border-radius: 20px; gap: 10px; }
  .search-panel__close { width: 34px; height: 34px; }
  .badm-search { padding: 5px 5px 5px 12px; gap: 8px; }
  .badm-search__field { font-size: 16px; }
  .badm-search__submit { padding: 10px 16px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .search-scrim, .search-panel { transition: none; }
  .search-panel { transform: none; }
  .search-panel__close:hover { transform: none; }
}

/* ============================================================
   FOOTER NEWSLETTER — ActiveCampaign embed (._form, styles-version 5)

   When news_shortcode is set, footer-2026.php renders the AC embed
   INSTEAD of the built-in form, so this section restates the approved
   .foot-news treatment (line ~2464 plus the teal overrides ~2710) on AC's
   own markup:

     form._form > ._form-content > ._form_element > ._field-wrapper > input
                                 > ._button-wrapper > button._submit

   Why the !important, and why an id. Two things outrank scoped class
   selectors here and neither is ours to edit from the theme:

   1. The AC form builder emits layout and type as INLINE styles — the
      supplied DOM has display/flex/column-gap on ._form-content,
      display:none on both ._form-label, and font-size:10px on
      ._error-inner. A style attribute beats any selector, so !important
      is the only way to reach those declarations.
   2. AC styles the submit button by id — #_form_48_submit, filled blue,
      4px radius, uppercase, 60px tall — and !important does NOT settle
      an id-vs-class fight: within the important cascade the id still
      wins. Measured: transparent/999px/none lost all three.

   Hence #badm-newsletter, set on the .foot-news wrapper in
   footer-2026.php. It beats #_form_48_submit on specificity without
   hardcoding a form number that changes whenever the form is rebuilt in
   the AC builder, and it keeps every rule below off the other AC form on
   the site — the one content-footer.php renders through
   column_three_form_shortcode.

   ⚠ footer-2026.php and this file have to ship together: without the id
   the whole section stops matching and the embed renders in AC's own
   default styling.
   ============================================================ */

/* AC's <form> is a plain block wrapper; the approved row lives on
   ._form-content, so cancel the flex it would inherit from .foot-news form. */
#badm-newsletter form._form {
  display: block;
  width: 100%;
  /* AC caps its own form at 500px. .foot-news already owns the width — 460px
     on desktop, the full column below 700px — so leaving the cap in place
     made the embed narrower than the approved form on tablet widths. */
  max-width: none;
  margin: 0;
}

#badm-newsletter ._form-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  column-gap: 10px !important;
  row-gap: 10px !important;
  justify-content: flex-start !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* 160px basis + wrap is the approved behaviour: name and email share the
   row, Submit wraps under them when it no longer fits. min-width:0 is the
   §9 trap — without it a long value pushes the row wider than the column. */
#badm-newsletter ._form-content > ._form_element {
  flex: 1 1 160px;
  min-width: 0;
  width: auto;            /* AC's ._full_width sets 100% */
  margin: 0;
  padding: 0;
}
/* flex-start, not stretch: AC's validation messages sit inside the email
   field's ._form_element, so that column is taller than the row. Stretching
   would hand the button the column's height — measured at 109px against a
   48px field — instead of leaving it the same pill as the fields. */
#badm-newsletter ._form-content > ._button-wrapper {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}

/* The embed carries its own <h2>, but .fn-label + .fn-sub directly above it
   are the approved copy — rendering both gives the column two headings that
   say the same thing. Hidden here rather than deleted in AC, so the copy
   stays with the form. Two rules, not one selector list: an unsupported
   :has() would invalidate the whole rule and leave the title visible. */
#badm-newsletter ._form-title { display: none !important; }
#badm-newsletter ._form-content > ._form_element:has(._form-title) { display: none !important; }

/* AC hides its labels with an inline display:none, which also drops them from
   the accessibility tree and leaves each field named only by its placeholder.
   Visually hidden instead, so the <label for> bindings still do their job. */
#badm-newsletter ._form-label {
  display: block !important;
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Password managers inject a zero-size icon root in here (the supplied DOM has
   LastPass's). Keeping the wrapper a block stops it becoming a flex item and
   claiming a gap of its own. */
#badm-newsletter ._field-wrapper {
  display: block;
  position: relative;
}

#badm-newsletter ._form-content input[type="text"],
#badm-newsletter ._form-content input[type="email"],
#badm-newsletter ._form-content input[type="tel"] {
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  /* 12+12 padding + 21.7 line + 2×1.5 button border = the 48px pill. In the
     built-in form the fields are flex siblings of the button and stretch to
     it for free; AC nests each field two levels down, so nothing equalises
     them and they land at 47. Stated here rather than left 1px short. */
  min-height: 48px;
  margin: 0 !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 14px !important;
  color: #fff !important;
  /* 1.55 is the body line-height, and it is load-bearing here: the built-in
     form's inputs take it through font:inherit and measure 48px tall. Any
     other value makes the AC fields a different height from the approved
     ones for no visible reason. */
  font: 400 14px/1.55 var(--body) !important;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none !important;
}
#badm-newsletter ._form-content input::placeholder {
  color: rgba(255,255,255,.7);
  opacity: 1;             /* Firefox dims placeholders by default */
}
#badm-newsletter ._form-content input[type="text"]:focus,
#badm-newsletter ._form-content input[type="email"]:focus,
#badm-newsletter ._form-content input[type="tel"]:focus {
  outline: none;
  border-color: #fff !important;
  background: rgba(255,255,255,.26) !important;
}

/* Transparent, not orange. §9: one filled orange CTA per region and the
   footer's is .fcta.primary; secondary buttons stay transparent, a decision
   reversed twice in review. AC ships this button filled by default. */
#badm-newsletter ._form-content ._submit,
#badm-newsletter ._form-content button[type="submit"] {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  padding: 12px 26px !important;
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.6) !important;
  border-radius: 999px !important;
  font: 700 14px/1.55 var(--body) !important;   /* same reason as the fields */
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease;
}
#badm-newsletter ._form-content ._submit:hover,
#badm-newsletter ._form-content button[type="submit"]:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: #fff !important;
}
#badm-newsletter ._form-content ._submit:focus-visible,
#badm-newsletter ._form-content button[type="submit"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#badm-newsletter ._form-content ._submit[disabled],
#badm-newsletter ._form-content button[type="submit"][disabled] {
  opacity: .55;
  cursor: default;
}

/* AC renders validation as an absolutely-positioned white tooltip with an
   arrow. On #22BABB that is white-on-white, it overlaps the link columns
   below, and at the builder's inline 10px it is unreadable either way.
   Rebuilt as an inline message under the field it belongs to. */
#badm-newsletter ._form-content ._error {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: auto !important;
}
#badm-newsletter ._form-content ._error-arrow { display: none !important; }
#badm-newsletter ._form-content ._error-inner,
#badm-newsletter ._form-content ._error-inner p {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  /* White at 600 is the footer-wide convention on teal (§15) — orange would
     read as the CTA colour, and there is no other error precedent here. */
  color: #fff !important;
  font: 600 12.5px/1.4 var(--body) !important;
  text-align: left !important;
  white-space: normal !important;
}
/* The field itself has to carry the error too — a 12.5px line of white text is
   not enough signal on its own, and colour alone would not be either. */
#badm-newsletter ._form-content input._has_error {
  border-color: #fff !important;
  box-shadow: inset 0 0 0 1px #fff !important;
}

/* Float-clearing leftover; the row is flex, so it only adds a gap. */
#badm-newsletter ._clear-element { display: none !important; }

/* Success panel. Deliberately no display declaration: AC ships this with an
   inline display:none and its script sets display itself on submit. */
#badm-newsletter ._form-thank-you {
  margin: 0;
  padding: 12px 16px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 14px;
  color: #fff;
  font: 600 14px/1.5 var(--body);
}

@media (max-width: 700px) {
  /* 16px is a floor, not a taste call — same reason as the drawer search
     field: iOS Safari zooms the viewport when a focused input is smaller.
     line-height drops with it so 16px still fits inside the 48px pill; at
     1.55 the fields grew to 50px and stopped matching the button. */
  #badm-newsletter ._form-content input[type="text"],
  #badm-newsletter ._form-content input[type="email"],
  #badm-newsletter ._form-content input[type="tel"] {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}

/* ============================================================
   PARENT THEME OVERRIDES — ticket widget text colour

   badm/style.css carries:

     .button, button, input[type="button"], input[type="reset"],
     input[type="submit"], .wp-block-button__link { color: #000 !important; }

   An !important on a bare `button` selector, so no amount of specificity
   in this file wins. Every control in the ticket widget was rendering with
   black text regardless of what the rules above ask for — which silently
   defeated the greying of unavailable dates.

   These restore the intended colours. Kept together, and scoped to
   .ticket-widget, so the workaround is visible as a workaround and can be
   deleted wholesale if style.css is ever fixed at source.

   DELIBERATELY NOT INCLUDED: .cal-cell.active, which the design sets to
   white on --badm-orange. That measures 2.59:1, below the 4.5:1 AA
   threshold, while the black the parent theme forces measures 8.10:1.
   Restoring the design there would make the selected date less readable,
   so it is a decision for the client and their designer rather than a bug
   to quietly fix. See HANDOFF.md, 2026-09-11.
   ============================================================ */
.ticket-widget .cal-cell { color: var(--ink) !important; }
.ticket-widget .cal-cell.disabled { color: var(--line-strong) !important; }
.ticket-widget .cal-cell.closed { color: var(--ink-3) !important; }
.ticket-widget .cal-cell.no-tickets { color: var(--ink-3) !important; }
.ticket-widget .cal-nav { color: var(--ink-2) !important; }
.ticket-widget .tier .ctrl button { color: var(--ink) !important; }

/* ============================================================
   HEADER & FOOTER 2026 PREVIEW — interior-page header treatment

   The homepage header is designed to overlay a dark video. The approval
   template renders ordinary page content, so it uses the same light treatment
   the homepage switches to after scrolling, but keeps the nav in normal flow.
   ============================================================ */
.badm-2026-chrome-preview .badm-2026-preview-content {
  min-height: 50vh;
  background: var(--white);
}

/* The existing theme also calls its full-screen interior masthead `.hero`.
   The redesign's prototype uses the same class for a different component and
   adds a padded dotted background, which creates a blank band above the legacy
   hero image. Restore only the two colliding properties inside preview content. */
.badm-2026-chrome-preview .badm-2026-preview-content .hero {
  padding: 0;
  background: #FA7F08;
}
.badm-2026-chrome-preview .badm-2026-preview-content .hero::before {
  content: none;
}

/* Legacy page layouts reserve space for the old side navigation, which this
   preview template does not render. */
.badm-2026-chrome-preview .jump-nav {
  width: calc(100% - 0px) !important;
}
.badm-2026-chrome-preview .wp-block-group {
  width: 100%;
  background: none;
}
.badm-2026-chrome-preview .container,
.badm-2026-chrome-preview .wp-block-group__inner-container {
  max-width: 1360px;
}

.badm-2026-chrome-preview .variant-photo .mainnav,
.badm-2026-chrome-preview .variant-photo .mainnav.scrolled {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -16px rgba(26,31,44,.32);
}
.badm-2026-chrome-preview .variant-photo .mainnav .links a { color: var(--ink); }
.badm-2026-chrome-preview .variant-photo .mainnav .links a:hover { background: var(--paper); }
.badm-2026-chrome-preview .variant-photo .mainnav .links a .chev { opacity: .5; }
.badm-2026-chrome-preview .variant-photo .mainnav .logo img { filter: none; }
.badm-2026-chrome-preview .variant-photo .mainnav .icon-btn {
  background: var(--paper-2);
  color: var(--ink-2) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.badm-2026-chrome-preview .variant-photo .mainnav .icon-btn:hover {
  background: var(--line);
  color: var(--ink) !important;
}
.badm-2026-chrome-preview .variant-photo .mainnav .btn-member {
  color: var(--badm-teal-deep);
  background: transparent;
  border-color: var(--badm-teal-deep);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.badm-2026-chrome-preview .variant-photo .mainnav .btn-member:hover {
  background: var(--badm-teal-deep);
  color: #fff;
  border-color: var(--badm-teal-deep);
}

@media (max-width: 1010px) {
  .badm-2026-chrome-preview .variant-photo .mainnav .hamburger,
  .badm-2026-chrome-preview .variant-photo .mainnav.scrolled .hamburger {
    background: var(--paper-2);
    color: var(--ink) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}