@font-face { font-family: "MouseMemoirs"; src: url("../fonts/MouseMemoirs.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Schoolbell"; src: url("../fonts/Schoolbell.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "FamiljenGrotesk"; src: url("../fonts/FamiljenGrotesk.ttf") format("truetype"); font-display: swap; }

:root {
  --brown:       #3D201A;
  --brown-dark:  #2A1612;
  --brown-soft:  #4E2D23;
  --brown-warm:  #9C6B44; /* Caramel/toffee - KNO calendar chip; distinct from beige-gray Closed */
  --burnt-orange:#B84E1F;
  --dark-green:  #475424;
  --med-green:   #62742D;
  --green:       #8CA540;
  --mustard:     #E6BC13;
  --mustard-hi:  #F0CE3E;
  --orange:      #E58721;
  --red:         #C23B2A;
  --tan:         #EEE6DB;
  --cream:       #F7F4EF;
  --paper:       #FFFDF6;
  --perry:       #6D88B6;
  --fuscia:      #B66D9E;

  --f-head:   "MouseMemoirs", "Bebas Neue", "Impact", sans-serif;
  --f-accent: "Schoolbell", "Caveat", cursive;
  --f-body:   "FamiljenGrotesk", "Inter", system-ui, sans-serif;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  --shadow:    0 12px 40px rgba(61, 32, 26, 0.12);
  --shadow-md: 0 20px 48px rgba(61, 32, 26, 0.16);
  --shadow-lg: 0 30px 60px rgba(61, 32, 26, 0.22);

  /* Stylized palm frond used as bullet/dot mask across the site */
  --palm-frond-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 Q14 6 13 11 Q12 17 13 23 L15 30 L17 30 L19 23 Q20 17 19 11 Q18 6 16 2 Z M14 8 Q9 9 5 13 Q10 12 14 11 Z M18 8 Q23 9 27 13 Q22 12 18 11 Z M13 14 Q7 15 3 19 Q9 18 13 17 Z M19 14 Q25 15 29 19 Q23 18 19 17 Z M13 20 Q8 21 4 25 Q9 24 13 23 Z M19 20 Q24 21 28 25 Q23 24 19 23 Z'/%3E%3C/svg%3E") center/contain no-repeat;

  /* Paw print used as bullet for franchise lists - main pad + 4 splayed toe pads */
  --paw-print-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 17 C11 17 8 21 8 25 C8 28 10.5 30 13 30 L19 30 C21.5 30 24 28 24 25 C24 21 21 17 16 17 Z M5 12 C2.8 12 1.5 14 1.5 16.5 C1.5 19 2.8 20.5 5 20.5 C7.2 20.5 8.5 19 8.5 16.5 C8.5 14 7.2 12 5 12 Z M27 12 C24.8 12 23.5 14 23.5 16.5 C23.5 19 24.8 20.5 27 20.5 C29.2 20.5 30.5 19 30.5 16.5 C30.5 14 29.2 12 27 12 Z M11 4 C8.8 4 7.5 6 7.5 8.5 C7.5 11 8.8 12.5 11 12.5 C13.2 12.5 14.5 11 14.5 8.5 C14.5 6 13.2 4 11 4 Z M21 4 C18.8 4 17.5 6 17.5 8.5 C17.5 11 18.8 12.5 21 12.5 C23.2 12.5 24.5 11 24.5 8.5 C24.5 6 23.2 4 21 4 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  color: var(--brown);
  background: var(--tan);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
img[hidden] { display: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--brown);
  font-weight: normal;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.container { width: min(1320px, 100% - 32px); margin: 0 auto; }

.eyebrow {
  font-family: var(--f-accent);
  color: var(--orange);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

/* ---------- ACCENT COLOR MODIFIERS ----------
   Use on .eyebrow and .script spans instead of inline style="color: ...".
   Design rule:
     - Handwritten .script accents: ALWAYS burnt orange, everywhere on the site.
       Base rules already set this; .script-burnt is available for edge cases.
     - .eyebrow-burnt   (burnt orange) — default choice on orange/warm backgrounds.
     - .eyebrow-mustard (mustard yellow) — for secondary eyebrows or on warm backgrounds where burnt would compete.
     - .eyebrow-orange  (brand orange) — for green backgrounds only.
     - .eyebrow-brown   (deep brown) — for high-contrast eyebrows on orange (e.g. Locations hero). */
/* .script accents ALWAYS render burnt orange by default. Contextual
   selectors below (.sec-head h2 .script, etc.) can override for specific
   layouts (e.g. brand orange on light heros). No .script should ever
   inherit brown - if it looks wrong on a page, override there. */
.script { color: var(--burnt-orange); }
.eyebrow-burnt,
.script-burnt   { color: var(--burnt-orange); }
.eyebrow-mustard { color: var(--mustard); }
.eyebrow-orange  { color: var(--orange); }
.eyebrow-brown   { color: var(--brown); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--r-pill);
  font-family: var(--f-body); font-weight: 700; font-size: 14px;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  text-transform: capitalize;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(61,32,26,.22); }
.btn-primary { background: var(--med-green); color: var(--cream); border-color: var(--med-green); }
.btn-primary:hover { background: var(--dark-green); border-color: var(--dark-green); }
.btn-mustard { background: var(--mustard); color: var(--brown); }
.btn-mustard:hover { background: var(--mustard-hi); }
.btn-outline { background: transparent; color: var(--cream); border-color: rgba(247,244,239,.45); }
.btn-outline:hover { background: var(--cream); color: var(--brown); border-color: var(--cream); }
.btn-outline-brown { background: transparent; color: var(--brown); border-color: var(--brown); }
.btn-outline-brown:hover { background: var(--brown); color: var(--cream); }
.btn-dark { background: var(--brown); color: var(--cream); }
.btn-dark:hover { background: var(--brown-soft); }
.btn-lg { padding: 18px 34px; font-size: 16px; }

/* ================= UPCOMING PARTY BAR (logged-in user has a booked party) ================= */
.upcoming-party-bar {
  background: var(--mustard);
  color: var(--brown);
  border-bottom: 1.5px solid rgba(61,32,26,.18);
  font-size: 14px;
  padding: 10px 0;
}
.upcoming-party-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.upcoming-party-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.upcoming-party-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.upcoming-party-dot { opacity: 0.55; }
.upcoming-party-cta {
  background: var(--brown);
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  white-space: nowrap;
}
.upcoming-party-cta:hover { background: var(--brown-soft); }
.upcoming-party-actions { display: flex; align-items: center; gap: 8px; }
.upcoming-party-dismiss {
  background: transparent;
  border: 0;
  color: var(--brown);
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0.55;
  border-radius: 50%;
}
.upcoming-party-dismiss:hover { opacity: 1; background: rgba(61,32,26,.1); }

/* ================= HERE BAR (you-are-here / corporate) ================= */
.here-bar {
  background: var(--tan);
  color: var(--brown);
  border-bottom: 1.5px solid rgba(61,32,26,.18);
  font-size: 13px;
  padding: 6px 0;
  position: sticky;
  top: 0;
  z-index: 90;
}
.here-bar.here-bar-loc { background: var(--med-green); color: var(--cream); border-bottom-color: rgba(61,32,26,.32); }
.here-bar.here-bar-loc .here-switch { border-color: var(--cream); color: var(--cream); }
.here-bar.here-bar-loc .here-switch:hover { background: var(--cream); color: var(--brown); }
.here-bar.here-bar-loc .here-tag strong { color: var(--mustard); }
.here-bar.here-bar-corp { background: var(--tan); }
.here-inner {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; position: relative;
}
.here-tag {
  font-family: var(--f-body);
  font-weight: 600; letter-spacing: 0.04em;
  font-size: 17px;
}
.here-tag strong { font-weight: 800; }
.here-switch {
  background: transparent; border: 1.5px solid var(--brown); color: var(--brown);
  font-family: var(--f-body); font-size: 15px; font-weight: 700;
  padding: 4px 14px; border-radius: var(--r-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.here-switch:hover { background: var(--brown); color: var(--cream); }
@media (max-width: 720px) {
  .here-switch { padding: 6px 14px; }
}
/* Below 640px the here-bar's "Welcome to Safari Run, San Mateo, CA" +
   "Change Location" button wrapped to 2 lines (~96px), which pushed the
   brown nav off the visible area under it (nav sticks at top:47px). Keep
   the here-bar to one row on mobile so the nav stays visible when scrolled. */
@media (max-width: 640px) {
  .here-inner { flex-wrap: nowrap; gap: 10px; padding: 0 8px; }
  .here-tag { font-size: 14px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .here-tag-prefix { display: none; }
  .here-switch { font-size: 11.5px; padding: 5px 10px; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; }
  .here-bar { padding: 5px 0; }
  /* Nav sticks flush under the mobile here-bar. Desktop here-bar is ~47px,
     mobile is ~42px - matching keeps the two bars touching with no body-color
     gap peeking through. */
  .nav { top: 42px !important; }
}

/* Hero rating chip removed 2026-07-23 — Jodi's read: 4.4 isn't a "wow" number
   and the testimonial sections do stronger trust work for family services. */
.here-caret { font-size: 10px; }
.here-menu {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--paper); color: var(--brown);
  border: 2px solid var(--brown); border-radius: var(--r-md);
  padding: 8px; min-width: 220px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 100;
}
.here-menu[hidden] { display: none; }
.here-menu a {
  padding: 8px 12px; border-radius: var(--r-sm);
  font-family: var(--f-body); font-size: 14px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  color: var(--brown);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.here-menu a:hover { background: var(--mustard); }
.here-menu .here-soon {
  font-family: var(--f-accent); color: var(--orange); font-size: 13px;
  font-weight: 500;
}
.here-menu .here-menu-corp {
  margin-top: 6px; padding-top: 10px;
  border-top: 1px dashed rgba(61,32,26,.18);
  color: var(--brown-soft);
}

/* ================= NAV ================= */
.nav {
  background: var(--brown);
  position: sticky; top: 47px; z-index: 80;
  box-shadow: 0 4px 0 rgba(0,0,0,0.06);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 0;
}
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 44px; width: auto; display: block; max-width: none; }
/* Mobile: the natural-height logo (44px tall) is ~180px wide - too greedy
   next to the Waiver icon + Log in + hamburger. Scale it down so it stays
   proportional instead of getting horizontally squished by flex. */
/* Below ~768px a logged-in nav (logo + Book a party + cart + account label
   + caret + waiver chip + burger) ran up to 107px past the viewport, so the
   whole page scrolled sideways. Collapse the two secondary bits here; the
   narrower blocks below then only handle genuinely tiny screens. */
@media (max-width: 767px) {
  .nav-login span, .nav-account .nav-login span, .nav-account .nav-caret { display: none !important; }
  .nav-waiver { display: none !important; }
}
@media (max-width: 480px) {
  .nav-logo img { height: 26px; }
  /* Log in stays visible on mobile, but icon-only so it fits alongside
     Book A Party + hamburger without pushing the logo. */
  .nav-login span, .nav-account .nav-login span, .nav-account .nav-caret { display: none !important; }
  .nav-login { padding: 7px 8px !important; }
  .nav-inner { gap: 8px !important; padding: 14px 0 !important; }
  .nav-right { gap: 6px !important; }
  .nav-action-book { padding: 7px 11px !important; font-size: 11.5px !important; letter-spacing: 0.03em !important; }
  .nav-burger { padding: 8px 6px !important; }
}
/* At 375px (iPhone SE/mini class) a logged-in nav is logo 152 + Book a party
   + cart + account + burger = ~382px of content in a 343px container, so the
   whole page scrolled sideways. Trim the logo and the gap to claw back the
   ~39px without dropping the Book CTA or the cart. */
@media (max-width: 400px) {
  .nav-logo img { height: 24px; }
  .nav-right { gap: 4px !important; }
}
@media (max-width: 380px) {
  .nav-logo img { height: 22px; }
  .nav-waiver { display: none !important; }
  .nav-action-book { padding: 6px 8px !important; font-size: 10.5px !important; }
}
@media (max-width: 340px) {
  /* Nothing else fits at this width - booking stays in the burger menu. */
  .nav-action-book { display: none !important; }
}
.nav-list {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: var(--r-pill);
  font-family: var(--f-body); font-size: 14.5px; font-weight: 600;
  color: var(--cream); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: rgba(247,244,239,.1); color: var(--mustard); }
.nav-item.nav-active > .nav-link {
  background: var(--mustard); color: var(--brown);
}
.nav-caret {
  display: inline-block; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nav-dropdown {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: var(--paper); border-radius: var(--r-md);
  /* Top padding holds an 8px transparent "bridge" so the hover area between
     the trigger and the visible dropdown stays continuous - no flicker on
     mouse-out. */
  padding: 18px 10px 10px;
  margin-top: -8px;
  min-width: 240px;
  box-shadow: var(--shadow);
  flex-direction: column;
  z-index: 60;
  background-clip: padding-box;
}
.nav-item:hover .nav-dropdown,
.nav-item.open .nav-dropdown { display: flex; }
.nav-drop-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--brown);
  cursor: pointer;
}
.nav-drop-link:hover { background: var(--cream); color: var(--med-green); }
/* Grouped sub-items inside the Programs dropdown - used for "Camps &
   Drop-Offs" umbrella so Seasonal Camps + Kids' Night Out read as
   siblings under one heading, matching how Chris labels the group on
   the live site. Same URL for now until backend supports a KNO-only
   endpoint. */
.nav-drop-group {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--tan);
  border-bottom: 1px solid var(--tan);
  margin: 4px 0;
  padding: 4px 0;
}
.nav-drop-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 4px;
  font-size: 14px; font-weight: 700;
  color: var(--brown);
  text-transform: uppercase; letter-spacing: 0.02em;
  cursor: default;
}
.nav-drop-sub {
  padding-left: 30px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.nav-mobile-subhead {
  padding: 12px 0 4px;
  font-size: 13px; font-weight: 700;
  color: var(--brown);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.nav-mobile a.nav-mobile-child.nav-mobile-sub {
  padding-left: 28px !important;
}
.nav-account { position: relative; }
.nav-dropdown-account {
  right: 0; left: auto;
  min-width: 240px;
}
.nav-account-email {
  font-size: 12px; color: var(--brown-soft);
  padding: 6px 12px 10px;
  border-bottom: 1px solid var(--tan);
  margin-bottom: 6px;
  word-break: break-all;
}
.nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mustard);
}
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cta { padding: 10px 20px; font-size: 14px; }
.nav-action {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-family: var(--f-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 2px solid transparent;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  white-space: nowrap;
}
.nav-action:hover { transform: translateY(-1px); }
/* Book a party is the one thing we most want a parent to do. The cream ring
   lifts it off the brown bar, so it stands apart from the mustard Waiver and
   cart chips beside it without being any bigger. */
.nav-action-book {
  background: var(--mustard); color: var(--brown); border-color: var(--mustard);
  box-shadow: 0 0 0 3px var(--cream);
}
.nav-action-book:hover { background: var(--mustard-hi, #F5CC1F); }
.nav-action-find { background: transparent; color: var(--cream); border-color: var(--cream); }
.nav-action-find:hover { background: var(--cream); color: var(--brown); }
@media (max-width: 720px) {
  .nav-action-find { display: none; }
  .nav-action-book { padding: 8px 14px; font-size: 12px; box-shadow: 0 0 0 2px var(--cream); }
}
.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  padding: 10px;
}
.nav-burger span {
  width: 24px; height: 2px; background: var(--cream); border-radius: 2px;
}
.nav-mobile {
  display: none; background: var(--brown-soft); padding: 12px 0 20px;
}
.nav-mobile.open { display: block; }
.nav-mobile-block { padding: 10px 0; border-bottom: 1px solid rgba(247,244,239,.08); }
.nav-mobile-block:last-child { border-bottom: none; }
.nav-mobile-title { font-weight: 700; color: var(--mustard); padding: 6px 0; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-mobile a { display: block; padding: 8px 0; color: var(--cream); font-weight: 600; }
/* Standalone top-level links (no section title in the block) get the same yellow uppercase treatment as section titles. */
.nav-mobile-block > a:only-child {
  color: var(--mustard);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 0;
}
.nav-mobile a.nav-mobile-child { padding-left: 14px; opacity: 0.8; font-size: 14px; font-weight: 500; }

@media (max-width: 1024px) {
  .nav-list, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* ================= HERO ================= */
.hero {
  position: relative;
  background-color: var(--orange);
  background-image: url("../images/bg-safari-trees.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(229,135,33,0.0) 40%, rgba(229,135,33,0.25) 100%);
  pointer-events: none;
}
.hero-inner {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: center;
  padding: 72px 0 48px;
  position: relative; z-index: 2;
}
.hero-copy .pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--cream); color: var(--brown);
  font-size: 13px; font-weight: 700;
  margin-bottom: 28px;
}
.hero-copy .pill .pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(194,59,42,.25);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(194,59,42,.45); }
  70% { box-shadow: 0 0 0 10px rgba(194,59,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(194,59,42,0); }
}
.hero-accent {
  font-family: var(--f-accent);
  color: var(--brown); font-size: 34px;
  margin: 20px 0 8px;
}
.hero-title {
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 0.95; color: var(--brown);
  margin-bottom: 24px;
}
.hero-title .leaf {
  color: var(--med-green);
  display: inline-block;
}
.hero-title .script {
  font-family: var(--f-accent);
  color: var(--burnt-orange);
  font-size: 0.85em;
  display: inline-block;
  transform: rotate(-3deg);
  text-transform: none;
  line-height: 1;
  margin: 0 0.05em;
}
.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 3px solid var(--brown);
  box-shadow: var(--shadow-lg);
  background: var(--cream);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* OUTRO BAND */
.story { background: var(--cream); }
.story-head { max-width: 880px; }
.story-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  align-items: center; max-width: 1100px; margin: 0 auto;
}
.story-text p {
  font-size: 17px; color: var(--brown); line-height: 1.7;
  margin: 0 0 14px;
}
.story-text p.story-lead {
  font-size: 22px; font-weight: 600; color: var(--brown);
  line-height: 1.45; margin-bottom: 18px;
}
.story-text p strong { color: var(--brown); font-weight: 800; }
.story-sig {
  font-family: var(--f-accent); color: var(--orange); font-size: 26px !important;
  margin-top: 24px !important; line-height: 1.2 !important;
}
.story-sig span {
  font-family: var(--f-body); font-size: 13px; color: var(--brown-soft);
  display: block; margin-top: 4px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.story-photo {
  position: relative;
  border-radius: var(--r-xl); overflow: hidden;
  border: 3px solid var(--brown);
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-md);
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-photo-tag {
  position: absolute; top: 18px; left: 18px;
  background: var(--mustard); color: var(--brown);
  font-family: var(--f-accent); font-size: 22px;
  padding: 6px 16px; border-radius: var(--r-pill);
  border: 2px solid var(--brown);
  transform: rotate(-3deg);
}
@media (max-width: 760px) {
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-photo { aspect-ratio: 4/3; }
}

.outro { background: var(--cream); text-align: center; }
.outro-inner { max-width: 720px; margin: 0 auto; }
.outro-title {
  font-family: var(--f-head);
  font-size: clamp(40px, 5vw, 72px);
  color: var(--brown);
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 18px;
}
.outro-lead {
  font-size: 18px; line-height: 1.55;
  color: var(--brown-soft);
  margin-bottom: 32px;
}
.outro-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* FIND-A-LOCATION GREEN BANNER (palm-leaf textured) */
.find-near {
  /* PNG palm-trees + matching base color to avoid the subpixel tile seam
     that showed up as vertical dark lines with the SVG. */
  background-color: #A2BC51;
  background-image: url('../images/bg-palm-trees.png');
  background-size: 1200px auto;
  background-repeat: repeat;
  position: relative;
}
.find-near-inner { position: relative; z-index: 1; max-width: 880px; }
.find-near-text { color: var(--brown); }
.find-near-title {
  font-family: var(--f-head);
  font-size: clamp(40px, 5vw, 64px);
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0 0 14px;
  color: var(--brown);
}
.find-near-title .script {
  font-family: var(--f-accent);
  text-transform: none;
  font-size: 0.7em;
  display: inline-block;
  transform: rotate(-3deg);
  color: var(--burnt-orange);
}
.find-near-lead {
  font-size: 19px; line-height: 1.55;
  color: var(--brown); font-weight: 700;
  margin: 0 0 28px;
  max-width: 56ch;
}
.find-near-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-outline-cream {
  background: transparent;
  color: var(--cream);
  border: 2px solid var(--cream);
}
.btn-outline-cream:hover {
  background: var(--cream);
  color: var(--brown);
}

/* PICKER BAND */
/* ================= WHY SAFARI RUN (4 pillars) - homepage below hero ================= */
.section.why-band { background: var(--cream); padding: 16px 0 40px; }
.why-band-head { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.why-band-eyebrow {
  font-family: var(--f-accent);
  color: var(--dark-green);
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
}
.why-band-title {
  font-family: var(--f-head);
  text-transform: uppercase;
  color: var(--brown);
  font-size: clamp(32px, 4.4vw, 48px);
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}
.why-band-title .script {
  font-family: var(--f-accent);
  color: var(--burnt-orange);
  text-transform: none;
  font-size: 0.72em;
  letter-spacing: 0;
}
.why-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
}
.why-pillar {
  background: var(--paper);
  border: 1.5px solid rgba(61,32,26,0.14);
  border-radius: 18px;
  padding: 28px 24px 26px;
  box-shadow: 0 4px 18px rgba(61,32,26,0.06);
  display: flex;
  flex-direction: column;
}
.why-scope {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-green);
  margin: 0 0 8px;
}
.why-scope.why-scope-parties { color: var(--burnt-orange); }
.why-pillar-title {
  font-family: var(--f-head);
  text-transform: uppercase;
  color: var(--brown);
  font-size: 30px;
  line-height: 0.95;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.why-pillar-title .script {
  font-family: var(--f-accent);
  color: var(--burnt-orange);
  text-transform: none;
  font-size: 0.72em;
  letter-spacing: 0;
  display: block;
  margin-top: 2px;
}
.why-pillar p {
  color: var(--brown);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.why-pillar p strong {
  background: linear-gradient(180deg, transparent 60%, #FFE79C 60%);
  font-weight: 700;
  color: var(--brown);
}
@media (max-width: 900px) {
  .why-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .why-pillars { grid-template-columns: 1fr; gap: 14px; }
  .why-pillar { padding: 22px 20px 20px; }
  .why-pillar-title { font-size: 26px; }
  .why-band { padding: 40px 0 44px; }
}

.picker-band {
  background: var(--tan);
  border-top: 3px solid var(--brown);
  border-bottom: 3px solid var(--brown);
  padding: 56px 0;
}
.picker-band .hero-picker { max-width: 720px; margin: 0 auto; }

/* COMING SOON LOCATION */
.loc-tile-tag-soon { background: var(--orange); color: var(--cream); }
.loc-tile-soon .loc-tile-photo img { filter: saturate(0.55) brightness(0.92); }
.loc-tile-mockup {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--med-green) 0%, var(--dark-green) 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 20px;
  overflow: hidden;
}
.loc-tile-mockup::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../images/bg-palm.png");
  background-size: cover; background-position: center;
  opacity: 0.22;
  mix-blend-mode: multiply;
}
.loc-tile-mockup-circle {
  position: relative; z-index: 1;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 5px solid var(--mustard);
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.32);
  transition: transform .4s ease;
}
.loc-tile:hover .loc-tile-mockup-circle { transform: translateY(-4px) rotate(-2deg); }
.loc-tile-photo .loc-tile-mockup-circle img.loc-tile-mockup-face {
  width: 220px; height: auto;
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  filter: none;
}
.loc-tile-soon .loc-tile-mockup-circle img.loc-tile-mockup-face { filter: none; }
/* "Coming soon" as a filled pill. White type needs a dark ground - on the
   cream tab it is 1.0:1 and invisible - so the burnt-orange fill carries it
   at 5.1:1. Also reads as a deliberate badge rather than greyed-out text. */
.loc-tab-soon .loc-tab-state {
  color: #fff;
  background: var(--burnt-orange);
  font-weight: 700;
  opacity: 1;
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1.5;
}

/* LIVERMORE COMING SOON HERO MOCKUP */
.livermore-mockup {
  position: relative;
  width: 100%; max-width: 380px; aspect-ratio: 1;
  margin: 0 auto 36px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--med-green) 0%, var(--dark-green) 100%);
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(61, 32, 26, 0.22);
}
.livermore-mockup::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../images/bg-palm.png");
  background-size: cover; background-position: center;
  opacity: 0.22; mix-blend-mode: multiply;
}
.livermore-mockup-circle {
  position: absolute;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 6px solid var(--mustard);
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  z-index: 1;
}
.livermore-mockup-face {
  position: absolute;
  width: 320px; height: auto;
  left: 50%; top: -16px;
  transform: translateX(-50%);
}
.livermore-mockup-tag {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  background: var(--mustard); color: var(--brown);
  font-family: var(--f-head); text-transform: uppercase;
  font-size: 18px; letter-spacing: 0.04em;
  padding: 8px 18px; border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.hero-lead {
  font-size: 20px; line-height: 1.55; font-weight: 600;
  color: var(--brown-dark);
  margin-top: 22px; max-width: 48ch;
}
.hero-ctas {
  display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap;
}

/* STATS BAND */
.stats-band {
  background: var(--tan);
  border-top: 3px solid var(--brown);
  border-bottom: 3px solid var(--brown);
  padding: 32px 0;
}
.stats-band-inner {
  display: flex; justify-content: space-around; gap: 32px;
  flex-wrap: wrap;
}
.stats-band-inner > div { text-align: center; }
.stat-n {
  font-family: var(--f-head); font-size: 56px;
  color: var(--brown); line-height: 1;
}
.stat-l {
  font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brown-soft);
  margin-top: 6px; font-weight: 700;
}

/* GALLERY */
.gallery { background: var(--cream); }
.gallery-head { text-align: center; margin-bottom: 40px; }
.gallery-head .eyebrow {
  font-family: var(--f-accent); color: var(--orange);
  font-size: 24px; margin-bottom: 8px;
}
.gallery-title {
  font-family: var(--f-head); font-size: clamp(40px, 5.5vw, 72px);
  color: var(--brown); line-height: 1.02; text-transform: uppercase;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-grid img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 3px solid var(--brown);
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}
.gallery-grid img:hover { transform: translateY(-4px) rotate(-1deg); }
@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Empty-state placeholder for galleries that don't have fresh photos yet */
.gallery-empty {
  max-width: 600px; margin: 0 auto;
  text-align: center;
  padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.gallery-empty-mascot {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  opacity: .92;
}
.gallery-empty-lead {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--brown-soft);
  margin: 0;
}
.gallery-empty-sub {
  font-size: 14px;
  color: var(--brown-soft);
  opacity: .72;
  margin: 0;
}

/* LOCATION PICKER */
.hero-picker {
  position: relative;
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--brown);
}
.hero-picker::before {
  content: "pick your jungle";
  position: absolute; top: -16px; left: 24px;
  background: var(--orange); color: var(--cream);
  padding: 6px 14px; border-radius: var(--r-pill);
  font-family: var(--f-accent); font-size: 18px;
  letter-spacing: 0.02em;
  transform: rotate(-2deg);
}
.hero-picker-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; padding-top: 8px; }
.hero-picker-title {
  font-family: var(--f-head);
  font-size: 36px; color: var(--brown); line-height: 1;
  text-transform: uppercase;
}
.hero-picker-sub { font-family: var(--f-accent); color: var(--med-green); font-size: 20px; }
.loc-tabs {
  display: flex; gap: 4px; background: var(--tan);
  padding: 6px; border-radius: var(--r-pill); margin-bottom: 16px;
}
.loc-tab {
  flex: 1; padding: 10px 12px; border-radius: var(--r-pill);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 700; font-size: 14px; color: var(--brown);
  transition: background .15s ease, color .15s ease;
}
.loc-tab:hover { background: rgba(255,255,255,.5); }
.loc-tab[aria-selected="true"] {
  background: var(--med-green); color: var(--cream);
  box-shadow: 0 4px 10px rgba(98,116,45,.3);
}
.loc-tab-state { font-size: 11px; opacity: .7; font-weight: 500; }
.loc-card {
  border-radius: var(--r-md); overflow: hidden;
  background: var(--paper); border: 2px solid var(--brown);
}
.loc-photo {
  position: relative; display: block; height: 220px; overflow: hidden;
  cursor: pointer; text-decoration: none; color: inherit;
}
.loc-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.loc-card:hover .loc-photo img { transform: scale(1.04); }
.loc-photo-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--mustard); color: var(--brown);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.loc-photo-mockup {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--med-green) 0%, var(--dark-green) 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.loc-photo-mockup[hidden] { display: none; }
.loc-photo-mockup::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../images/bg-palm.png");
  background-size: cover; background-position: center;
  opacity: 0.22; mix-blend-mode: multiply;
}
.loc-photo-mockup-circle {
  position: relative; z-index: 1;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 5px solid var(--mustard);
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}
.loc-photo-mockup-circle img {
  position: absolute;
  width: 200px; height: auto;
  left: 50%; top: -8px;
  transform: translateX(-50%);
}
.loc-body {
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.loc-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--brown-soft); }
.loc-ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--med-green); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.loc-ico svg { width: 14px; height: 14px; }
.loc-cta { width: 100%; margin-top: 6px; }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 64px; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .hero-inner { gap: 28px; padding: 56px 0 48px; }
  .hero-title { font-size: 44px; line-height: 0.98; margin-bottom: 16px; }
  .hero-copy .pill { font-size: 12px; padding: 7px 12px; margin-bottom: 14px; }
  .hero-lead { font-size: 16px; margin-top: 14px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { flex: 1; text-align: center; }
}

/* ================= MARQUEE ================= */
.marquee {
  background: var(--dark-green);
  color: var(--cream);
  overflow: hidden; padding: 18px 0;
  border-top: 3px solid var(--brown);
  border-bottom: 3px solid var(--brown);
}
.marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: scroll 40s linear infinite;
}
.marquee-item {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--f-head); font-size: 30px;
  letter-spacing: 0.04em;
}
.marquee-dot {
  display: inline-block;
  width: 12px; height: 12px;
  vertical-align: middle;
  background-color: var(--mustard);
  border-radius: 50%;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ================= SECTION SHARED ================= */
.section { padding: 96px 0; position: relative; }
.section-sm { padding: 64px 0; }
.sec-head { max-width: 780px; margin-bottom: 48px; }
.sec-head-c { margin: 0 auto 48px; text-align: center; }
.sec-head h2 {
  font-size: clamp(44px, 5vw, 72px);
  margin-top: 6px;
}
.sec-head .lead {
  font-size: 18px; color: var(--brown-soft); opacity: 0.85;
  margin-top: 14px; max-width: 60ch;
}
.sec-head-c .lead { margin-left: auto; margin-right: auto; }

/* ================= PAGE HERO (sub-pages) ================= */
.page-hero {
  position: relative;
  background-color: var(--orange);
  background-image: url('../images/bg-safari-trees.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 72px 0 64px; overflow: hidden;
  border-bottom: 3px solid var(--brown);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(224,140,63,0) 40%, rgba(224,140,63,.20) 100%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.94; color: var(--brown);
  margin-top: 10px;
}
.page-hero h1 .script {
  font-family: var(--f-accent);
  color: var(--burnt-orange);
  font-size: 0.7em;
  display: inline-block;
  transform: rotate(-3deg);
  text-transform: none;
}
.sec-head h2 .script {
  font-family: var(--f-accent);
  color: var(--orange);
  font-size: 0.7em;
  display: inline-block;
  transform: rotate(-3deg);
  text-transform: none;
}
.page-hero .lead {
  font-size: 20px; line-height: 1.55;
  color: var(--brown-dark);
  font-weight: 600;
  margin-top: 22px; max-width: 56ch;
}
.crumbs {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--brown-soft); opacity: .8;
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--orange); }
.crumbs .sep { opacity: .4; }

/* Page hero with side photo (franchise page) */
.page-hero-with-photo { padding: 56px 0 56px; }
.page-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.page-hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 3px solid var(--brown);
  box-shadow: var(--shadow-lg);
  background: var(--cream);
}
.page-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  object-position: center 15%;
}
@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  /* Portrait aspect on mobile matches the source photo so all three faces
     stay in frame instead of getting cropped by object-fit: cover. */
  .page-hero-photo { aspect-ratio: 4 / 5; }
  .page-hero-photo img { object-position: center 30%; }
}

/* ================= PROGRAMS MOSAIC ================= */
.programs { background: var(--cream); }
.programs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.prog-card {
  padding: 28px; border-radius: var(--r-lg);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 320px;
  position: relative; overflow: hidden;
  border: 2px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: pointer;
}
.prog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.prog-wide { grid-column: span 2; }
.prog-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.prog-icon {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--brown);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(61,32,26,.18);
}
.prog-icon img { width: 48px; height: 48px; }
.prog-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); font-size: 22px; font-weight: 700;
  transition: transform .2s ease, background .2s ease;
}
.prog-card:hover .prog-arrow { transform: translateX(4px); background: rgba(255,255,255,.32); }
.prog-sub { font-family: var(--f-accent); font-size: 22px; opacity: .9; margin-bottom: 6px; }
.prog-title { font-family: var(--f-head); font-size: 42px; margin-bottom: 10px; line-height: 1; color: inherit; text-transform: uppercase; }
.prog-desc { font-size: 15px; line-height: 1.5; opacity: .92; max-width: 42ch; }

.prog-orange { background: var(--orange); color: var(--cream); }
.prog-orange h3 { color: var(--cream); }
.prog-green { background: var(--med-green); color: var(--cream); }
.prog-green h3 { color: var(--cream); }
.prog-mustard { background: var(--mustard); color: var(--brown); }
.prog-mustard h3 { color: var(--brown); }
.prog-forest { background: var(--dark-green); color: var(--cream); }
.prog-forest h3 { color: var(--cream); }
.prog-cream { background: var(--paper); color: var(--brown); border-color: var(--brown); }
.prog-cream h3 { color: var(--brown); }
.prog-cream .prog-icon, .prog-cream .prog-arrow { background: rgba(61,32,26,.08); color: var(--brown); }
.prog-mustard .prog-icon, .prog-mustard .prog-arrow { background: rgba(61,32,26,.12); color: var(--brown); }
.prog-mascot {
  position: absolute; right: 4px; bottom: 4px;
  width: clamp(80px, 32%, 150px);
  max-height: 70%;
  object-fit: contain;
  pointer-events: none; opacity: .92;
  transition: transform .25s ease;
}
.prog-card:hover .prog-mascot { transform: translate(-6px, -4px) rotate(-3deg); }

@media (max-width: 900px) {
  .programs-grid { grid-template-columns: 1fr 1fr; }
  .prog-wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .programs-grid { grid-template-columns: 1fr; }
  .prog-wide { grid-column: span 1; }
}

/* ================= WHY CARDS ================= */
.why { background: var(--tan); }
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.why-card {
  background: var(--paper); padding: 28px 26px;
  border-radius: var(--r-md);
  border: 2px solid var(--brown);
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.why-badge {
  width: 68px; height: 68px; margin-bottom: 20px;
}
.why-badge img { width: 100%; height: 100%; object-fit: contain; }
.why-badge-num {
  display: block;
  padding: 0;
  background: none; border: none;
}
.why-badge-num img { width: 100%; height: 100%; object-fit: contain; }

/* Colored circular backdrop behind a numbered badge - card variant */
.why-badge.why-badge-bg {
  width: 88px; height: 88px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(61, 32, 26, 0.18);
}
.why-badge.why-badge-bg img { width: 64px; height: 64px; object-fit: contain; }
.why-badge.why-badge-animal { overflow: visible; width: 96px; height: 96px; }

/* Toucan badge - illustration only, no backdrop. Layout box stays 68px so
   the title lines up with the other cards' titles, but the illustration
   scales up to feel bigger via transform (per Jodi 2026-07-24). */
.why-badge.why-badge-tucan { width: 68px; height: 68px; overflow: visible; }
.why-badge.why-badge-tucan img {
  width: 100%; height: 100%; object-fit: contain;
  transform: scale(1.35); transform-origin: center center;
}

/* Calendar how-to instructions and party note */
.cal-howto {
  list-style: none; padding: 0; margin: 18px auto 0;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 540px;
  font-size: 16px; color: var(--brown);
}
.cal-howto li { display: flex; gap: 10px; align-items: baseline; justify-content: center; }
.cal-howto strong {
  font-family: var(--f-head); color: var(--orange);
  font-size: 20px; flex-shrink: 0;
}
.cal-party-note {
  margin: 16px auto 0; max-width: 540px;
  padding: 12px 18px;
  background: var(--paper); border: 1px dashed rgba(61,32,26,.25);
  border-radius: var(--r-md);
  font-size: 14px; color: var(--brown-soft);
  text-align: center;
}
.cal-party-note a { color: var(--orange); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cal-party-note a:hover { color: var(--red); }

/* ================= NAV: WAIVER + LOGIN ICON LINKS ================= */
.nav-waiver, .nav-login {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px;
  padding: 8px 14px; border-radius: var(--r-pill);
  transition: background .15s ease, transform .15s ease;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* Enriched account dropdown */
.nav-dropdown-account { min-width: 280px; padding: 0 0 8px; }
.nav-acct-head {
  padding: 14px 16px 12px;
  background: var(--tan);
  border-bottom: 1px solid var(--brown-line, #E9DFC7);
  border-radius: 12px 12px 0 0;
}
.nav-acct-hi {
  font-family: var(--f-head);
  font-size: 16px;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 4px;
}
.nav-acct-email { font-size: 12px; color: var(--brown-soft); }
.nav-acct-loc {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--burnt-orange);
}
.nav-acct-section {
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--tan);
}
.nav-acct-section:last-of-type { border-bottom: none; }
.nav-acct-section-title {
  padding: 4px 16px 6px;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-soft);
}
.nav-acct-empty {
  padding: 4px 16px 8px;
  font-size: 13px; font-style: italic;
  color: var(--brown-soft);
}
.nav-acct-book {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 16px !important;
}
.nav-acct-book-lbl { font-weight: 700; color: var(--brown); font-size: 14px; }
.nav-acct-book-sub { font-size: 12px; color: var(--brown-soft); }
.nav-acct-signout { margin-top: 4px; }

/* ===== Location Gallery ===== */
.loc-gallery .sec-head { margin-bottom: 32px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid var(--brown);
  cursor: pointer;
  background: var(--tan);
  transition: transform .2s ease, box-shadow .2s ease;
  grid-row: span 1;
}
.gallery-item.gallery-tall { grid-row: span 2; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform .3s ease;
}
.gallery-item.face-mid img { object-position: center 45%; }
.gallery-item.face-low img { object-position: center 60%; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item:hover { box-shadow: 0 6px 16px rgba(61,32,26,0.2); }
.loc-gallery-follow {
  margin-top: 28px; text-align: center;
  color: var(--brown); font-size: 15px;
}
.loc-gallery-follow a {
  color: var(--burnt-orange); font-weight: 700; text-decoration: underline;
}
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; gap: 10px; }
  .gallery-item.gallery-tall { grid-row: span 1; }
}

/* ===== Lightbox overlay ===== */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(20, 12, 8, 0.92);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 95vw; max-height: 90vh;
  border-radius: 8px;
  border: 2px solid var(--cream);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream); color: var(--brown);
  border: 2px solid var(--brown);
  font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cream); color: var(--brown);
  border: 2px solid var(--brown);
  font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
@media (max-width: 560px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 18px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}
.nav-acct-primary {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 8px 8px 4px !important;
  padding: 10px 12px !important;
  background: var(--brown);
  color: var(--cream) !important;
  border-radius: 8px;
  font-weight: 700;
}
.nav-acct-primary:hover { background: var(--brown-dark, #2A1712); }
.nav-acct-primary svg { color: var(--mustard); }
.nav-waiver {
  background: var(--mustard);
  color: var(--brown);
  border: 2px solid var(--brown);
}
.nav-login {
  background: var(--med-green);
  color: var(--cream);
  border: 2px solid var(--brown);
}
.nav-waiver svg, .nav-login svg { width: 18px; height: 18px; }
.nav-waiver:hover { background: var(--orange); color: var(--cream); transform: translateY(-1px); }
.nav-login:hover  { background: var(--dark-green); color: var(--cream); transform: translateY(-1px); }

/* ---- Cart item count badge ----------------------------------------------
   Restored 16 Sep 2026. These rules were deleted on 15 Sep along with the old
   My bookings circle, which is why Jeff's cart count had nothing to style.

   The markup that feeds this lives in Jeff's build, because the item count
   comes from his cart session and the static build has no access to it:

     <a href="/cart/..." class="nav-waiver nav-cart-chip" aria-label="View cart">
       <svg>...</svg><span>Cart</span>
       <span class="nav-cart-count">3</span>
     </a>

   The count span should be omitted entirely when the cart is empty, so an
   empty cart shows no badge rather than a zero.
   ------------------------------------------------------------------------ */
.nav-cart-chip { position: relative; }
.nav-cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--burnt-orange);
  color: var(--cream);
  border: 2px solid var(--brown);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
@media (max-width: 720px) {
  .nav-waiver span { display: none; }
  /* Guard only. The chip is already hidden outright at 767px, so this band
     never actually renders today. Kept so the badge cannot be swallowed by
     the span rule if that 767px cutoff is ever raised or removed. */
  .nav-cart-chip .nav-cart-count { display: inline-flex; }
}
.why-badge.why-badge-animal img {
  width: 90px; height: 110px;
  object-fit: contain; object-position: top;
  margin-top: -20px;
}
.why-badge-bg-orange { background: var(--orange); }
.why-badge-bg-green  { background: var(--med-green); }
.why-badge-bg-perry  { background: var(--perry); }
.why-badge-bg-brown  { background: var(--brown); }

/* =================================================================
   LOCATIONS SHOWCASE (corporate /index/location.html)
   Editorial photo+facts cards - replaces the playful prog-card grid.
   ================================================================= */
.loc-showcase { background: var(--cream); padding-top: 72px; padding-bottom: 72px; }
.loc-showcase-card {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 56px; align-items: center;
  padding: 0 0 64px;
  margin-bottom: 64px;
  border-bottom: 1px solid rgba(61, 32, 26, 0.10);
}
.loc-showcase-card:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.loc-showcase-card-reverse .loc-showcase-photo { order: 2; }
.loc-showcase-card-reverse .loc-showcase-body { order: 1; }

/* Whole-card is clickable - big touch target on mobile, faster on desktop.
   The main "Visit X" button uses a stretched ::before that covers the entire
   card; tel/mailto links get elevated z-index so they still work. */
.loc-showcase-card { position: relative; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.loc-showcase-card:hover { transform: translateY(-2px); }
.loc-showcase-card .btn-visit { position: static; }
.loc-showcase-card .btn-visit::before {
  content: ""; position: absolute; inset: 0;
  z-index: 1;
}
.loc-showcase-card a[href^="tel:"],
.loc-showcase-card a[href^="mailto:"] { position: relative; z-index: 2; }
.loc-showcase-card .loc-showcase-photo { position: relative; z-index: 0; }

.loc-showcase-photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--tan);
}
.loc-showcase-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Whole photo is clickable to that store's page (San Mateo / Sunnyvale /
   Plano). Anchor keeps the same size/shape as the previous div, plus a
   soft hover so it reads as clickable. */
a.loc-showcase-photo { display: block; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.loc-showcase-photo:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(61, 32, 26, 0.18); }
/* Livermore: real photo instead of a mascot mockup, with a burnt-orange
   "Coming soon" tag in the corner so nobody thinks they can walk in yet. */
.loc-showcase-photo-soon { position: relative; }
.loc-showcase-photo-soon img { filter: saturate(0.9) brightness(0.95); }
.loc-showcase-photo-soon-tag {
  position: absolute; top: 14px; right: 14px;
  background: var(--burnt-orange); color: var(--cream);
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12px; font-weight: 700;
  padding: 6px 14px; border: 2px solid var(--brown); border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.loc-showcase-body { display: flex; flex-direction: column; gap: 18px; }
.loc-showcase-meta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--brown-soft);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.loc-showcase-tag {
  background: var(--brown); color: var(--cream);
  padding: 6px 12px; border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.loc-tag-bay      { background: var(--med-green); color: var(--cream); }
.loc-tag-arcade   { background: var(--orange); color: var(--cream); }
.loc-tag-soon     { background: var(--cream); color: var(--brown); border: 2px solid var(--brown); }
.loc-showcase-city {
  font-family: var(--f-head); text-transform: uppercase;
  font-size: clamp(40px, 5vw, 56px); line-height: 1;
  color: var(--brown); margin: 0;
}
.loc-showcase-desc {
  font-size: 17px; line-height: 1.6; color: var(--brown-soft);
  margin: 0; max-width: 56ch;
}
.loc-showcase-facts {
  margin: 6px 0 4px; padding: 0;
  display: grid; grid-template-columns: max-content 1fr;
  gap: 8px 18px;
}
.loc-showcase-facts dt {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brown-soft); padding-top: 2px;
}
.loc-showcase-facts dd {
  margin: 0; font-size: 15px; line-height: 1.5; color: var(--brown);
}
.loc-showcase-facts a { color: var(--orange); font-weight: 600; }
.loc-showcase-facts a:hover { text-decoration: underline; }
.loc-showcase-body .btn { align-self: flex-start; margin-top: 8px; }

/* Coming soon mockup (Livermore) */
.loc-showcase-mockup {
  background: linear-gradient(135deg, var(--med-green) 0%, var(--dark-green) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.loc-showcase-mockup::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../images/bg-palm.png");
  background-size: cover; background-position: center;
  opacity: 0.22; mix-blend-mode: multiply;
}
.loc-showcase-mockup-circle {
  position: relative; z-index: 1;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  border: 6px solid var(--mustard);
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}
.loc-showcase-mockup-circle img {
  position: absolute;
  width: 130%; height: auto;
  left: 50%; top: -8%;
  transform: translateX(-50%);
}
.loc-showcase-mockup-tag {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  background: var(--mustard); color: var(--brown);
  font-family: var(--f-head); text-transform: uppercase;
  font-size: 16px; letter-spacing: 0.04em;
  padding: 8px 16px; border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

@media (max-width: 820px) {
  .loc-showcase-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
  .loc-showcase-card-reverse .loc-showcase-photo { order: 0; }
  .loc-showcase-card-reverse .loc-showcase-body { order: 0; }
  .loc-showcase-facts { grid-template-columns: 1fr; gap: 4px 0; }
  .loc-showcase-facts dt { padding-top: 10px; }
  .loc-showcase-facts dt:first-child { padding-top: 0; }
}
.why-t { font-family: var(--f-head); font-size: 30px; text-transform: uppercase; margin-bottom: 10px; }
.why-d { font-size: 14px; line-height: 1.55; color: var(--brown-soft); }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .why-grid { grid-template-columns: 1fr; } }

/* ================= PACKAGES ================= */
.packages {
  background: var(--cream) url("../images/bg-bamboo.png") center/cover no-repeat;
  background-blend-mode: soft-light;
}
.pkg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.pkg-card {
  background: var(--paper);
  border: 3px solid var(--brown);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pkg-card.pkg-popular {
  background: var(--mustard); border-color: var(--brown);
  transform: scale(1.02);
}
.pkg-card.pkg-popular:hover { transform: scale(1.02) translateY(-4px); }
.pkg-card.pkg-selected {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(194,59,42,.15), var(--shadow-md);
}
.pkg-ribbon {
  position: absolute; top: -14px; right: 22px;
  background: var(--orange); color: var(--cream);
  padding: 6px 14px; border-radius: var(--r-pill);
  font-family: var(--f-accent); font-size: 18px;
  transform: rotate(3deg);
}
.pkg-name {
  font-family: var(--f-head); font-size: 38px; text-transform: uppercase;
  line-height: 1;
}
.pkg-price {
  font-family: var(--f-head); font-size: 64px;
  color: var(--med-green); line-height: 1; margin-top: 14px;
}
.pkg-popular .pkg-price { color: var(--brown); }
.pkg-price span { font-family: var(--f-body); font-size: 16px; font-weight: 500; color: var(--brown-soft); }
.pkg-guests {
  display: inline-block; margin-top: 6px;
  font-family: var(--f-accent); color: var(--orange); font-size: 22px;
}
.pkg-popular .pkg-guests { color: var(--orange); }
.pkg-feats {
  list-style: none; padding: 24px 0 0; margin: 20px 0 24px;
  border-top: 2px solid rgba(61,32,26,.1);
  display: flex; flex-direction: column; gap: 10px;
}
.pkg-popular .pkg-feats { border-top-color: rgba(61,32,26,.2); }
.pkg-feats li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--brown-soft); }
.pkg-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--med-green); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.pkg-popular .pkg-check { background: var(--orange); }
.pkg-card .btn { width: 100%; }

@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; } }

/* ================= BIG CTA ================= */
/* Floating back button — injected by site.js on every page except home */
.floating-back {
  position: fixed;
  bottom: 20px; left: 20px;
  padding: 10px 18px;
  background: var(--cream);
  color: var(--brown);
  border: 2px solid var(--brown);
  border-radius: 999px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 4px 12px rgba(61, 32, 26, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.floating-back:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(61, 32, 26, 0.22);
}

/* Franchise steps - 4-step process cards on the franchise page */
.franchise-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.franchise-step {
  background: var(--paper);
  border: 2px solid var(--tan);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  position: relative;
}
.franchise-step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--med-green);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}
.franchise-step-title {
  font-family: var(--f-head);
  font-size: 20px;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  line-height: 1.15;
}
.franchise-step-body {
  color: var(--brown);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* Bigger Group - dark brown backdrop with bamboo texture (matches contact us) */
.bigger-group-section {
  background: var(--brown);
  padding: 72px 0;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.bigger-group-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../images/bg-bamboo-dark.png");
  background-size: 900px auto;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.35;
}
.bigger-group-section > .container { position: relative; z-index: 1; }
.bigger-group-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.bigger-group-copy h2 {
  font-family: var(--f-head);
  font-size: clamp(32px, 4vw, 48px);
  color: var(--cream);
  text-transform: uppercase;
  line-height: 1;
  margin: 6px 0 16px;
}
.bigger-group-copy h2 .script {
  font-family: var(--f-accent);
  font-size: 0.72em;
  text-transform: none;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-3deg);
}
.bigger-group-copy p {
  color: var(--cream);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 12px;
  opacity: 0.94;
}
.bigger-group-copy p strong { color: var(--mustard); font-weight: 700; }
.bigger-group-copy ul {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--cream);
  line-height: 1.7;
  opacity: 0.94;
}
.bigger-group-mascot {
  display: flex; align-items: center; justify-content: center;
}
.bigger-group-mascot img {
  max-width: 140px; width: 100%; height: auto;
}
@media (max-width: 820px) {
  .bigger-group-inner { grid-template-columns: 1fr; gap: 24px; }
  .bigger-group-mascot img { max-width: 100px; }
}

/* Come See Us - warm cream-card closing CTA with floating mascots */
.come-see { padding: 64px 0 96px; }
.come-see-card {
  position: relative;
  background: var(--tan);
  border: 2px solid var(--brown);
  border-radius: var(--r-xl);
  padding: 64px 56px;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 4px 18px rgba(61, 32, 26, 0.10);
}
.come-see-mascots {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1;
}
.come-see-mascot {
  position: absolute;
}
.come-see-mascot-a {
  right: 24px; top: 20px; height: 110px; width: auto;
  transform: rotate(8deg);
}
.come-see-mascot-b {
  left: 32px; bottom: 24px; height: 170px; width: auto;
  transform: scaleX(-1) rotate(-4deg);
}
.come-see-inner {
  position: relative; z-index: 2; text-align: center;
  padding: 0 40px;
}
.come-see-inner .eyebrow { margin-bottom: 12px; }
.come-see-inner h2 {
  font-family: var(--f-head);
  font-size: clamp(36px, 5vw, 56px);
  color: var(--brown);
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: 1;
}
.come-see-inner h2 .script {
  font-family: var(--f-accent);
  color: var(--burnt-orange);
  font-size: 0.72em;
  text-transform: none;
  font-weight: 400;
  display: inline-block;
  transform: rotate(-3deg);
}
.come-see-inner p {
  color: var(--brown);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 auto 28px;
  max-width: 44ch;
}
.come-see-ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
@media (max-width: 900px) {
  .come-see-card { padding: 48px 32px 36px; }
  .come-see-inner { padding: 0 8px; }
  .come-see-mascot-b {
    height: 130px;
    left: 12px; bottom: 12px;
  }
  .come-see-mascot-a { height: 72px; }
}
@media (max-width: 700px) {
  .come-see-card { padding: 40px 22px 32px; }
  .come-see-inner { padding: 0; }
  .come-see-mascots { display: none; }
  .come-see-ctas .btn { width: 100%; }
}

.bigcta-section { padding: 64px 0 96px; background: var(--tan); }
.bigcta {
  position: relative;
  background: var(--med-green) url("../images/bg-palm.png") center/cover no-repeat;
  background-blend-mode: soft-light;
  border-radius: var(--r-xl);
  padding: 72px; color: var(--cream);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  align-items: center; overflow: hidden;
  border: 3px solid var(--brown);
}
.bigcta::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: var(--mustard); opacity: .25;
}
.bigcta h2 {
  font-size: clamp(40px, 5vw, 64px);
  color: var(--cream); max-width: 16ch;
  line-height: 0.95;
}
.bigcta h2 .script {
  font-family: var(--f-accent); color: var(--mustard);
  text-transform: none; font-size: 0.7em;
  display: inline-block; transform: rotate(-3deg);
}
.bigcta p {
  margin-top: 16px;
  font-size: 17px; color: rgba(247,244,239,0.9);
  max-width: 48ch; line-height: 1.55;
}
/* Light variant - cream card with dark text, for contexts where the
   default dark-green card is hard to read against the section behind it. */
.bigcta.bigcta-light {
  background: var(--paper);
  color: var(--brown);
  border-color: var(--brown-soft, var(--brown));
}
.bigcta.bigcta-light h2 { color: var(--brown); }
.bigcta.bigcta-light h2 .script { color: var(--burnt-orange); }
.bigcta.bigcta-light p { color: var(--brown); }
.bigcta.bigcta-light .eyebrow { color: var(--orange); }
.bigcta.bigcta-light::before { display: none; }
.bigcta.bigcta-light { padding: 36px 40px; }
@media (max-width: 900px) {
  .bigcta.bigcta-light { padding: 30px 26px; }
}
/* Compact variant - used on the location index page so the "Want one in your
   city?" card doesn't overwhelm the location cards above it. Uses the same
   crisp tiled palm pattern as the hero and find-near bands, sized larger
   here so the fronds read as a real backdrop. Text goes dark brown so it's
   readable over the green + palms. */
.bigcta.bigcta-compact {
  padding: 40px 44px; gap: 32px;
  background-color: #A2BC51;
  background-image: url('../images/bg-palm-trees.png');
  background-size: 1600px auto;
  background-repeat: repeat;
  background-blend-mode: normal;
  color: var(--brown);
}
.bigcta.bigcta-compact h2 { font-size: clamp(28px, 3vw, 40px); color: var(--brown); }
.bigcta.bigcta-compact h2 .script { color: var(--burnt-orange); font-size: 1.1em; font-weight: 700; }
.bigcta.bigcta-compact p { font-size: 15px; margin-top: 10px; color: var(--brown); }
.bigcta.bigcta-compact::before { display: none; }
/* Group layout - a huddle of mascots on the right, slightly overlapping
   with the middle one raised. Sized responsively so 3-5 mascots all fit. */
.bigcta-right-trio {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0; flex-wrap: nowrap;
}
.bigcta.bigcta-compact .bigcta-right-trio .bigcta-mascot {
  height: 260px;
  width: auto;
  margin: 0 2px;
  object-fit: contain;
}
/* Alternate facing direction so the huddle feels like a group, not a lineup. */
.bigcta.bigcta-compact .bigcta-right-trio .bigcta-mascot:nth-child(even) {
  transform: scaleX(-1);
}
/* Raise the middle mascot so the trio reads as a group, not a lineup. */
.bigcta.bigcta-compact .bigcta-right-trio .bigcta-mascot:nth-child(2) {
  transform: scaleX(-1) translateY(-10px);
  z-index: 1;
}
@media (max-width: 900px) {
  .bigcta.bigcta-compact { padding: 28px 24px; }
  .bigcta.bigcta-compact .bigcta-right-trio .bigcta-mascot { height: 220px; width: auto; margin: 0 2px; }
}
.bigcta-bullets {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
.bigcta-bullets span {
  font-size: 14px; padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(247,244,239,.1); border: 1px solid rgba(247,244,239,.2);
  font-weight: 600;
}
.bigcta-ctas {
  display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap;
}
.bigcta-right { position: relative; }
.bigcta-mascot {
  width: 100%; max-width: 380px;
  margin-left: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.3));
}
@media (max-width: 900px) {
  .bigcta { grid-template-columns: 1fr; padding: 48px 32px; }
  .bigcta-mascot { max-width: 240px; margin: 0 auto; }
}

/* ================= TESTIMONIALS ================= */
.testimonials { background: var(--paper); }
.t-wrap { max-width: 900px; margin: 0 auto; }
.t-card {
  background: var(--cream);
  border: 3px solid var(--brown);
  border-radius: var(--r-lg);
  padding: 56px; min-height: 260px;
  position: relative;
}
.t-card::before {
  content: "\201C";
  position: absolute; top: 16px; left: 32px;
  font-family: var(--f-head);
  font-size: 120px; line-height: 1;
  color: var(--mustard);
}
.t-quote {
  font-family: var(--f-body);
  font-size: 22px; line-height: 1.5; color: var(--brown);
  max-width: 56ch; margin-bottom: 28px; padding-top: 20px;
  font-weight: 500;
}
.t-attr { display: flex; align-items: center; gap: 14px; }
.t-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--med-green); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-size: 22px;
}
.t-name { font-weight: 700; font-size: 15px; color: var(--brown); }
.t-role { font-size: 13px; color: var(--brown-soft); opacity: .7; }
.t-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.t-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(61,32,26,.2); transition: width .25s, background .2s;
}
.t-dot-active { width: 28px; border-radius: 5px; background: var(--med-green); }

/* Testimonials grid page */
.tq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tq-card {
  background: var(--paper); padding: 28px;
  border: 2px solid var(--brown); border-radius: var(--r-md);
}
.tq-card.tq-big {
  grid-column: span 2; background: var(--mustard);
}
.tq-q { font-family: var(--f-accent); font-size: 22px; color: var(--brown); line-height: 1.35; margin-bottom: 18px; }
.tq-big .tq-q { font-size: 28px; }
.tq-stars { color: var(--orange); font-size: 14px; letter-spacing: 3px; margin-bottom: 10px; }
.tq-attr { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--brown-soft); }
@media (max-width: 900px) { .tq-grid { grid-template-columns: 1fr; } .tq-card.tq-big { grid-column: span 1; } }

@media (max-width: 720px) {
  .t-card { padding: 40px 28px; }
  .t-quote { font-size: 19px; }
}

/* ================= LOCATIONS BAND ================= */
.locations {
  background: var(--brown) url("../images/bg-bamboo-dark.png") center/cover no-repeat;
  color: var(--cream); position: relative;
}
.locations .sec-head h2 { color: var(--cream); }
.locations .sec-head .lead { color: rgba(247,244,239,0.85); }
.locations .eyebrow { color: var(--mustard); }
.loc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.loc-tile {
  background: var(--paper); color: var(--brown);
  border-radius: var(--r-lg); overflow: hidden;
  border: 3px solid var(--brown);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.loc-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.loc-tile-photo { height: 220px; overflow: hidden; position: relative; }
.loc-tile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.loc-tile:hover .loc-tile-photo img { transform: scale(1.05); }
.loc-tile-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--mustard); color: var(--brown);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.loc-tile-body {
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.loc-tile-city { font-family: var(--f-head); font-size: 38px; line-height: 1; text-transform: uppercase; }
.loc-tile-meta { font-family: var(--f-accent); color: var(--orange); font-size: 20px; }
.loc-tile-desc { font-size: 14px; color: var(--brown-soft); line-height: 1.5; }
.loc-tile-cta { margin-top: auto; padding-top: 10px; display: flex; gap: 10px; }

@media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr; } }

/* ================= FRANCHISE ================= */
.franchise-band {
  background: var(--dark-green) url("../images/bg-safari-trees.png") center/cover no-repeat;
  background-blend-mode: overlay;
  color: var(--cream); padding: 96px 0;
  border-top: 3px solid var(--brown);
  border-bottom: 3px solid var(--brown);
  position: relative; overflow: hidden;
}
.franchise-section { background: var(--cream); }
.franchise-row {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px;
  align-items: center;
}
.franchise-card {
  background: var(--mustard);
  color: var(--brown);
  padding: 40px;
  border-radius: var(--r-lg);
  border: 3px solid var(--brown);
  box-shadow: var(--shadow-md);
}
.franchise-card .eyebrow { color: var(--orange); }
.franchise-card h2 { font-size: clamp(36px, 4.5vw, 56px); margin-bottom: 16px; line-height: 1.04; }
.franchise-card p { font-size: 17px; line-height: 1.55; margin-bottom: 24px; color: var(--brown-soft); }
.franchise-image img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-lg);
  border: 3px solid var(--brown);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .franchise-row { grid-template-columns: 1fr; }
}
.franchise-inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center;
  position: relative; z-index: 2;
}
.franchise-inner .eyebrow { color: var(--mustard); }
.franchise-inner h2 { color: var(--cream); font-size: clamp(44px, 5vw, 72px); }
.franchise-inner p { margin-top: 16px; font-size: 18px; color: rgba(247,244,239,.88); max-width: 52ch; }
.franchise-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.franchise-right {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.fran-stat {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(247,244,239,.2);
  border-radius: var(--r-md); padding: 24px;
  backdrop-filter: blur(6px);
}
.fran-n {
  font-family: var(--f-head); font-size: 56px;
  color: var(--mustard); line-height: 1;
}
.fran-l {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(247,244,239,.8); margin-top: 6px; font-weight: 600;
}
.franchise-lion {
  position: absolute; right: 14px; bottom: -10px;
  width: 140px; opacity: .85; pointer-events: none;
  z-index: 0; filter: drop-shadow(0 10px 20px rgba(0,0,0,.3));
  transform: rotate(-4deg);
}
@media (max-width: 1200px) { .franchise-lion { display: none; } }
@media (max-width: 900px) { .franchise-inner { grid-template-columns: 1fr; } }

/* ================= FOOTER ================= */
.footer {
  background: var(--tan); color: var(--brown);
  padding: 72px 0 32px; position: relative;
  border-top: 6px solid var(--brown);
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 18px;
  background: repeating-linear-gradient(90deg, var(--mustard) 0 24px, transparent 24px 48px);
  opacity: 1;
}
.footer-logo { width: 180px; height: 180px; margin-bottom: 22px; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(61,32,26,.14);
}
.footer-top.has-nl { grid-template-columns: 1.2fr .9fr .9fr .9fr .9fr 1.4fr; }
.footer-brand img.footer-logo {
  width: 300px; height: 300px;
  margin-bottom: -4px; object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(61, 32, 26, 0.10));
}
.footer-logo-tag {
  font-family: var(--f-accent);
  color: var(--dark-green, #5F7222);
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  max-width: 220px;
  margin: 0 0 20px;
  text-align: center;
  font-weight: 700;
}
.footer-promise-strip {
  background: var(--cream);
  border-top: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
}
.footer-promise-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-promise-row .footer-promise-line {
  font-family: var(--f-head);
  text-transform: uppercase;
  color: var(--brown);
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  margin: 0;
}
.footer-dot {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .footer-promise-row { gap: 12px; padding: 22px 16px 16px; }
  .footer-promise-row .footer-promise-line { font-size: 18px; }
}
.footer-tag { font-size: 13px; opacity: .8; line-height: 1.55; max-width: 280px; color: var(--brown); font-weight: 500; letter-spacing: 0.02em; }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.footer-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(61,32,26,.08); color: var(--brown); font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.footer-icon:hover { background: var(--brown); color: var(--cream); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-head {
  font-family: var(--f-head); color: var(--brown);
  font-size: 18px; letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.footer-col a { font-size: 14px; color: var(--brown); opacity: .85; font-weight: 500; }
.footer-col a:hover { opacity: 1; color: var(--med-green); }

/* Per-location contact card that lives in the footer's leftmost column
   when a visitor is on a location page. Renders address + phone + email
   + "see this week's schedule" (hours link) + a small other-locations
   strip. Data comes from LOC_INFO in site.js. */
.footer-visit-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 0 0;
}
.footer-visit-line {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 14px;
  color: var(--brown);
}
.footer-visit-line .footer-visit-label {
  font-family: var(--f-head);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-warm);
  margin-bottom: 2px;
}
.footer-visit-line a {
  color: var(--brown);
  opacity: 1;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: var(--mustard);
  text-underline-offset: 3px;
  font-weight: 600;
}
.footer-visit-line a:hover { color: var(--med-green); text-decoration-color: var(--med-green); }
.footer-visit-others {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(61,32,26,.15);
  font-size: 13px;
  color: var(--brown-warm);
}
.footer-visit-others-label {
  font-family: var(--f-head);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown-warm);
  margin-bottom: 6px;
}
.footer-visit-others a {
  color: var(--brown);
  opacity: .8;
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.footer-visit-others a:hover { opacity: 1; border-bottom-color: var(--mustard); }
.footer-visit-others a.soon { opacity: .5; font-style: italic; }
.footer-form { display: flex; flex-direction: column; gap: 10px; }
.footer-form input {
  padding: 12px 16px; border-radius: var(--r-pill);
  background: var(--paper); color: var(--brown);
  border: 1.5px solid var(--brown);
  font: inherit; font-size: 14px;
}
.footer-form input::placeholder { color: rgba(61,32,26,.4); }
.footer-fm { font-size: 12px; color: var(--med-green); min-height: 14px; }
.footer-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; font-size: 13px; opacity: .6; flex-wrap: wrap; gap: 16px;
}
.footer-legal { display: flex; gap: 20px; }

@media (max-width: 1100px) { .footer-top, .footer-top.has-nl { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .footer-top, .footer-top.has-nl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .footer-top, .footer-top.has-nl { grid-template-columns: 1fr; } }

/* ================= BOOKING WIZARD ================= */
.wizard {
  background: var(--paper);
  border: 3px solid var(--brown);
  border-radius: var(--r-lg);
  padding: 36px; max-width: 880px; margin: 0 auto;
  box-shadow: var(--shadow);
}
.wiz-steps {
  display: flex; gap: 8px; margin-bottom: 28px;
  padding-bottom: 24px; border-bottom: 2px solid rgba(61,32,26,.12);
}
.wiz-step {
  flex: 1; display: flex; align-items: center; gap: 10px;
  opacity: .4; transition: opacity .25s;
}
.wiz-step.on { opacity: 1; }
.wiz-step.done { opacity: .9; }
.wiz-n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--brown);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-size: 18px; color: var(--brown);
  flex-shrink: 0;
}
.wiz-step.on .wiz-n { background: var(--mustard); }
.wiz-step.done .wiz-n { background: var(--med-green); color: var(--cream); border-color: var(--med-green); }
.wiz-l { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brown); }
.wiz-panel { display: none; }
.wiz-panel.on { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wiz-h { font-family: var(--f-head); font-size: 36px; text-transform: uppercase; margin-bottom: 6px; }
.wiz-sub { color: var(--brown-soft); font-size: 15px; margin-bottom: 22px; }
.wiz-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wiz-opt {
  border: 2px solid var(--brown); border-radius: var(--r-md);
  padding: 20px; background: var(--cream); cursor: pointer;
  text-align: left;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.wiz-opt:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.wiz-opt.picked { background: var(--mustard); box-shadow: 0 0 0 3px rgba(194,59,42,.2), var(--shadow); }
.wiz-opt-t { font-family: var(--f-head); font-size: 28px; line-height: 1; text-transform: uppercase; margin-bottom: 6px; }
.wiz-opt-d { font-size: 13px; color: var(--brown-soft); }
.wiz-opt-meta { font-family: var(--f-accent); color: var(--orange); font-size: 18px; margin-top: 4px; }
.wiz-opt.picked .wiz-opt-meta { color: var(--orange); }
.wiz-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wiz-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brown); }
.wiz-form input, .wiz-form select, .wiz-form textarea {
  padding: 12px 14px; border-radius: var(--r-sm); border: 2px solid var(--brown);
  font: inherit; font-size: 14px; background: var(--cream); color: var(--brown);
}
.wiz-form .full { grid-column: span 2; }
.wiz-actions { display: flex; justify-content: space-between; margin-top: 28px; gap: 12px; }
.wiz-done {
  text-align: center; padding: 36px 12px;
}
.wiz-done-ic {
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--med-green); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-size: 48px; margin-bottom: 18px;
}
@media (max-width: 720px) {
  .wiz-options { grid-template-columns: 1fr; }
  .wiz-form { grid-template-columns: 1fr; }
  .wiz-form .full { grid-column: span 1; }
  .wiz-steps { flex-wrap: wrap; }
  .wizard { padding: 24px; }
}

/* ================= LOCATION DETAIL ================= */
.loc-detail {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 42px;
  align-items: stretch;
}
.loc-detail-img {
  border-radius: var(--r-lg); overflow: hidden; border: 3px solid var(--brown);
  background: var(--cream);
  aspect-ratio: 4/3;
}
.loc-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 820px) {
  .loc-detail-img { aspect-ratio: auto; align-self: stretch; }
}
.loc-detail-card {
  background: var(--paper); border: 3px solid var(--brown);
  border-radius: var(--r-lg); padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.loc-detail-card h3 { font-size: 28px; margin-bottom: 4px; }
.loc-detail-card .row { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.loc-detail-card .row .ic {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--med-green); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-weight: 700;
}
.loc-detail-card .row div { color: var(--brown-soft); }
.loc-detail-card .row strong { color: var(--brown); display: block; font-size: 14px; font-weight: 700; }
.loc-detail-ctas { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .loc-detail { grid-template-columns: 1fr; }
}

/* ================= SCHEDULE TABLE ================= */
.schedule {
  background: var(--paper); border: 3px solid var(--brown);
  border-radius: var(--r-lg); overflow: hidden;
}
.sched-row {
  display: grid; grid-template-columns: 140px 1fr 140px;
  gap: 20px; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid rgba(61,32,26,.1);
  font-size: 15px;
}
.sched-row:last-child { border-bottom: none; }
.sched-row:hover { background: var(--cream); }
.sched-head { background: var(--mustard); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.sched-day { font-family: var(--f-head); font-size: 22px; color: var(--brown); text-transform: uppercase; }
.sched-price { font-family: var(--f-head); font-size: 26px; color: var(--med-green); }
@media (max-width: 720px) { .sched-row { grid-template-columns: 80px 1fr 80px; padding: 14px; font-size: 13px; } .sched-day { font-size: 18px; } .sched-price { font-size: 20px; } }

/* ================= FAQ ================= */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq-item {
  background: var(--paper); border: 2px solid var(--brown);
  border-radius: var(--r-md); overflow: hidden;
  transition: box-shadow .2s;
}
.faq-item.open { box-shadow: var(--shadow); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 20px 26px; text-align: left;
  font-family: var(--f-head); font-size: 22px; color: var(--brown);
  text-transform: uppercase;
}
.faq-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mustard); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--brown);
  transition: transform .2s;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s;
  font-size: 15px; line-height: 1.6; color: var(--brown-soft);
}
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 26px 22px; }

/* ================= CONTACT FORM ================= */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.contact-form {
  background: var(--paper); border: 3px solid var(--brown);
  border-radius: var(--r-lg); padding: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brown); }
.contact-form .full { grid-column: span 2; }
.contact-form input, .contact-form select, .contact-form textarea {
  padding: 12px 14px; border-radius: var(--r-sm); border: 2px solid var(--brown);
  font: inherit; font-size: 14px; background: var(--cream); color: var(--brown);
}
.contact-info {
  display: flex; flex-direction: column; gap: 20px;
}
.contact-block {
  background: var(--cream); border: 2px solid var(--brown);
  border-radius: var(--r-md); padding: 20px;
}
.contact-block h4 { font-size: 22px; margin-bottom: 6px; }
.contact-block a { color: var(--orange); font-weight: 600; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } .contact-form { grid-template-columns: 1fr; } .contact-form .full { grid-column: span 1; } }

/* ================= ABOUT STORY ================= */
.story-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.story-grid img { border-radius: var(--r-lg); border: 3px solid var(--brown); }
.story-grid p { font-size: 17px; line-height: 1.6; margin-top: 16px; color: var(--brown-soft); max-width: 52ch; }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value {
  background: var(--paper); border: 2px solid var(--brown);
  border-radius: var(--r-md); padding: 24px;
}
.value-n { font-family: var(--f-head); font-size: 44px; color: var(--orange); line-height: 1; margin-bottom: 8px; }
.value h3 { font-size: 22px; margin-bottom: 8px; }
.value p { font-size: 14px; color: var(--brown-soft); line-height: 1.5; }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .values-grid { grid-template-columns: 1fr; } }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.team-card {
  background: var(--paper); border: 2px solid var(--brown);
  border-radius: var(--r-md); padding: 24px; text-align: center;
}
.team-avatar {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--med-green); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-head); font-size: 34px; margin-bottom: 14px;
}
.team-name { font-family: var(--f-head); font-size: 22px; text-transform: uppercase; }
.team-role { font-size: 13px; color: var(--brown-soft); margin-top: 4px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .team-grid { grid-template-columns: 1fr; } }

/* ================= MARKETS TABLE ================= */
.mkt {
  background: var(--paper); border: 3px solid var(--brown);
  border-radius: var(--r-lg); overflow: hidden;
}
.mkt-head, .mkt-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr;
  gap: 20px; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid rgba(61,32,26,.1);
  font-size: 15px;
}
.mkt-head {
  background: var(--mustard); font-family: var(--f-head);
  text-transform: uppercase; letter-spacing: .1em; font-size: 14px;
  color: var(--brown);
}
.mkt-row:last-child { border-bottom: none; }
.mkt-row:hover { background: var(--cream); }
.mkt-city { font-weight: 700; font-size: 16px; }
.mkt-tier { font-weight: 700; font-size: 13px; }
.mkt-tier.p { color: var(--med-green); }
.mkt-tier.s { color: var(--brown-soft); }
.mkt-status {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
}
.mkt-status.av { background: #E6F2E0; color: var(--med-green); }
.mkt-status.loi { background: var(--mustard); color: var(--brown); }
.mkt-status.rev { background: var(--cream); color: var(--red); border: 1px solid var(--red); }
.mkt-link { color: var(--orange); font-weight: 700; }
@media (max-width: 720px) {
  .mkt-head, .mkt-row { grid-template-columns: 1fr 1fr; font-size: 13px; padding: 14px; }
  .mkt-head span:nth-child(2), .mkt-row span:nth-child(2) { display: none; }
}

:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; border-radius: 6px; }

/* ================= PILLS / STATUS ================= */
.pill {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; border: 2px solid var(--brown);
  background: #fff; color: var(--brown);
}
.pill-green { background: #E6F2E0; color: var(--med-green); border-color: var(--med-green); }
.pill-orange { background: var(--mustard); color: var(--brown); border-color: var(--brown); }
.pill-brown { background: var(--brown); color: #fff; border-color: var(--brown); }

/* ================= STORY / TEAM EXTRAS ================= */
.story-img img { width: 100%; display: block; }
.team-photo {
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--cream); border: 3px solid var(--brown);
  overflow: hidden; margin-bottom: 14px; display: flex; align-items: center; justify-content: center;
}
.team-photo img { width: 86%; height: 86%; object-fit: contain; }
.team-card h3 { margin: 0; font-size: 20px; color: var(--brown); }
.team-card p { margin-top: 10px; color: var(--brown-soft); font-size: 14px; line-height: 1.55; }

/* ================= FAQ EXTRAS ================= */
.faq-q {
  width: 100%; text-align: left; padding: 22px 26px;
  background: #fff; border: 2px solid var(--brown); border-radius: var(--r-md);
  font-family: inherit; font-size: 17px; font-weight: 800; color: var(--brown);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item.open .faq-q { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.faq-plus { font-size: 22px; color: var(--orange); transition: transform .25s ease; flex-shrink: 0; }
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-a {
  background: var(--cream); border: 2px solid var(--brown); border-top: none;
  border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md);
  padding: 0 26px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
  color: var(--brown-soft); font-size: 15px; line-height: 1.6;
}
.faq-item.open .faq-a { max-height: 600px; padding: 20px 26px 24px; }

/* ================= TESTIMONIAL EXTRAS ================= */
.tq-quote { font-size: 17px; line-height: 1.5; color: var(--brown); margin: 0 0 18px; font-weight: 600; }
.tq-attrib { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 2px dashed var(--tan); }
.tq-attrib strong { color: var(--brown); font-size: 15px; }
.tq-attrib span { color: var(--brown-soft); font-size: 13px; }

/* ================= CONTACT EXTRAS ================= */
.contact-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start;
}
.contact-form-wrap {
  background: #fff; border: 3px solid var(--brown); border-radius: var(--r-lg);
  padding: 36px; box-shadow: var(--shadow);
}
.contact-form-wrap h3 { margin: 0 0 22px; font-size: 26px; color: var(--brown); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form input, .contact-form select, .contact-form textarea {
  border: 2px solid var(--brown); border-radius: var(--r-sm);
  padding: 12px 14px; font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--brown); background: #fff; width: 100%; box-sizing: border-box;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--brown-soft);
  opacity: 0.55;
  font-weight: 400;
}
.form-note { font-size: 13px; color: var(--brown-soft); margin: 4px 0 0; font-weight: 500; text-transform: none; letter-spacing: 0; }
.form-done { text-align: center; padding: 40px 20px; }
.form-done h3 { margin: 0 0 12px; font-size: 30px; color: var(--med-green); }
.form-done p { color: var(--brown-soft); font-size: 16px; line-height: 1.55; max-width: 42ch; margin: 0 auto; }

.contact-info { display: flex; flex-direction: column; gap: 16px; }
.info-card {
  background: #fff; border: 2px solid var(--brown); border-radius: var(--r-md);
  padding: 22px 24px;
}
.info-card h4 { margin: 0 0 8px; font-size: 18px; color: var(--brown); }
.info-card p { margin: 4px 0; font-size: 14px; color: var(--brown-soft); line-height: 1.5; }
.info-card strong { color: var(--brown); font-size: 15px; }

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form .row-2 { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 24px; }
}

/* ================= LOGIN ================= */
.login-section {
  background: var(--cream);
  min-height: calc(100vh - 240px);
  display: flex; align-items: center;
  padding: 56px 0;
}
.login-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.login-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 3px solid var(--brown);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
  position: relative;
}
.login-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.login-photo-tag {
  position: absolute; left: 18px; bottom: 18px;
  background: var(--mustard); color: var(--brown);
  font-family: var(--f-accent); font-size: 22px;
  padding: 6px 16px; border-radius: var(--r-pill);
  border: 2px solid var(--brown);
  transform: rotate(-3deg);
}
.login-card {
  max-width: 440px; margin: 0 auto; width: 100%;
  background: #fff; border: 3px solid var(--brown); border-radius: var(--r-lg);
  padding: 40px 36px; box-shadow: var(--shadow);
}
.login-split .login-card { margin: 0; }
@media (max-width: 880px) {
  .login-split { grid-template-columns: 1fr; max-width: 460px; gap: 24px; }
  .login-photo { aspect-ratio: 16 / 10; }
}
.login-head { text-align: center; margin-bottom: 24px; }
.login-head .eyebrow { color: var(--orange); font-size: 22px; }
.login-title {
  font-family: var(--f-head);
  font-size: 56px; line-height: 1; color: var(--brown);
  text-transform: uppercase; margin-top: 4px;
}
.login-title .script {
  font-family: var(--f-accent); color: var(--orange);
  font-size: 0.78em; text-transform: none; display: inline-block;
  transform: rotate(-3deg); margin-left: 0.05em;
}
.login-submit { width: 100%; margin-top: 6px; }
.login-meta {
  margin: 14px 0 0; text-align: center;
  font-size: 14px; color: var(--brown-soft); font-weight: 500;
  text-transform: none; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
}
.login-meta a { color: var(--med-green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.login-meta a:hover { color: var(--dark-green); }
.login-meta-dot { color: var(--brown-soft); opacity: 0.5; }

@media (max-width: 540px) {
  .login-section { padding: 32px 0; min-height: 0; }
  .login-card { padding: 28px 22px; }
  .login-title { font-size: 44px; }
  .login-meta { flex-direction: column; gap: 6px; }
  .login-meta-dot { display: none; }
}

/* =================================================================
   CORPORATE PAGE REBRAND (2026-05-03): mission, pillars, standards,
   compact programs, find-store strip, amplified franchise, outro.
   ================================================================= */

/* MISSION */
.mission { background: var(--cream); padding: 96px 0 72px; }
.mission-body { max-width: 760px; margin: 0 auto; text-align: center; }
.mission-lead {
  font-size: 22px; line-height: 1.55; font-weight: 500;
  color: var(--brown); margin: 0 0 18px;
}
.mission-lead:last-child { margin-bottom: 0; }

/* FIVE PILLARS */
.pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 48px;
}
.pillar-card {
  background: var(--paper); border-radius: var(--r-lg);
  padding: 36px 28px 32px; box-shadow: var(--shadow);
  border: 2px solid var(--tan);
  position: relative; overflow: hidden;
}
.pillar-num {
  display: block;
  width: 72px; height: 72px;
  margin-bottom: 14px;
}
.pillar-num img { width: 100%; height: 100%; object-fit: contain; }
.pillar-t {
  font-family: var(--f-head); text-transform: uppercase;
  font-size: 24px; line-height: 1.05; color: var(--brown);
  margin: 0 0 12px;
}
.pillar-d {
  font-size: 16px; line-height: 1.55; color: var(--brown-soft);
  margin: 0;
}
.pillar-d strong { color: var(--brown); font-weight: 700; }

/* STANDARDS */
.standards { background: var(--tan); }
.standards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 40px;
}
.standard {
  background: var(--paper); border-radius: var(--r-md);
  padding: 64px 24px 28px; text-align: center;
  border: 2px solid var(--cream);
  display: flex; flex-direction: column; align-items: center;
}
.standard-animal {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  margin-bottom: 14px;
  box-shadow: 0 6px 14px rgba(61, 32, 26, 0.18);
  overflow: visible;
}
.standard-animal img {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  height: auto;
  pointer-events: none;
}
/* Toucan needs to render bigger than 110px so its body fills the circle
   like the other animals - opt out of the global img{max-width:100%}. */
.standard-animal img[src*="tucan"] { max-width: none; }
.standard-animal img[src*="zebra"]   { width: 155px; left: 53%; bottom: 0; }    /* solid shoulders fill circle bottom (clipped by chapstick) */
.standard-animal img[src*="gorilla"] { width: 170px; bottom: 0; }                  /* taller so propeller shows more; shoulders still fill circle bottom */
.standard-animal img[src*="rhino"]   { width: 145px; left: 54%; bottom: 0; }      /* nudged right so horn on left doesn't pull it off-center */
.standard-animal img[src*="tucan"]   {
  width: 122px; left: 52%; bottom: -22px;
  /* tilt so head dips down toward the right and the beak lifts up-left */
  transform: translateX(-50%) rotate(7deg);
}
.standard-animal img[src*="giraffe"] { width: 130px; bottom: 0; }                  /* solid neck/body fills circle bottom, horns pop above */
.standard-animal img[src*="lion"]    { width: 150px; bottom: 0; }                  /* solid shirt fills circle bottom, mane tips pop above */

/* Chapstick clip-path: bottom-half circle + rectangle extending up.
   Sweep=0 for the arc so it draws through the BOTTOM (y=110) not the top.
   Lets top features (propeller, ears, horns) pop above while shoulders/body
   get clipped to the circle boundary at the sides and bottom. */
.standard-animal:has(img[src*="gorilla"]),
.standard-animal:has(img[src*="zebra"]),
.standard-animal:has(img[src*="rhino"]),
.standard-animal:has(img[src*="giraffe"]),
.standard-animal:has(img[src*="lion"]) {
  clip-path: path("M 0 55 A 55 55 0 1 0 110 55 L 110 -150 L 0 -150 Z");
  box-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(61, 32, 26, 0.18));
}
/* Toucan: small "beak pocket" - only extends ~25px to the left of the
   circle so just the beak tip pokes out. */
.standard-animal:has(img[src*="tucan"]) {
  clip-path: path("M 0 55 A 55 55 0 1 0 110 55 L 110 -150 L -25 -150 L -25 80 L 0 80 Z");
  box-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(61, 32, 26, 0.18));
  overflow: visible;
}
.standard-animal-orange { background: var(--orange); }
.standard-animal-green  { background: var(--med-green); }
.standard-animal-perry  { background: var(--perry); }
.standard-animal-brown  { background: var(--brown); }
.standard-n {
  font-family: var(--f-head); font-size: 48px; line-height: 1;
  color: var(--orange); margin-bottom: 10px;
}
.standard-l {
  font-size: 15px; line-height: 1.4; color: var(--brown);
  font-weight: 700;
}
.standard-l span {
  display: block; margin-top: 4px;
  font-size: 13px; font-weight: 500; color: var(--brown-soft);
  text-transform: none; letter-spacing: 0;
}
.standards-note {
  margin-top: 32px; text-align: center;
  font-size: 13px; color: var(--brown-soft); opacity: 0.7;
}

/* PROGRAMS (compact) */
.programs-compact { background: var(--cream); }
.programs-compact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 40px;
}
.prog-mini {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--paper); border-radius: var(--r-md);
  padding: 24px 22px; border: 2px solid var(--tan);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
}
a.prog-mini { cursor: pointer; }
a.prog-mini:hover {
  transform: translateY(-3px);
  border-color: var(--brown);
  box-shadow: var(--shadow-md);
}
.prog-mini-icon {
  flex-shrink: 0; width: 76px; height: 76px;
  background: var(--mustard-hi); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(61, 32, 26, 0.12);
}
.prog-mini-icon img { width: 60px; height: 60px; object-fit: contain; }
.prog-mini-icon svg { width: 44px; height: 44px; color: var(--brown); }
/* Animal-head variant: uses the same head PNGs from the standards section.
   Head sits low in the circle with the ears/horn peeking above like a badge. */
.prog-mini-icon.prog-mini-animal { overflow: visible; position: relative; }
.prog-mini-icon.prog-mini-animal img {
  width: 110%; height: 110%;
  object-fit: contain;
  object-position: center bottom;
  position: absolute; left: -5%; bottom: -4px;
}
.prog-mini-animal-orange { background: var(--orange); }
.prog-mini-animal-green  { background: var(--med-green); }
.prog-mini-animal-perry  { background: var(--perry); }
.prog-mini-animal-brown  { background: var(--brown); }
.prog-mini-title {
  font-family: var(--f-head); text-transform: uppercase;
  font-size: 19px; line-height: 1.05; color: var(--brown);
  margin: 0 0 6px;
}
.prog-mini-desc {
  font-size: 14px; line-height: 1.5; color: var(--brown-soft);
  margin: 0;
}
.prog-mini-cta {
  font-size: 14px; font-weight: 700; color: var(--orange);
  margin: 10px 0 0; letter-spacing: 0.01em;
}
a.prog-mini:hover .prog-mini-cta { text-decoration: underline; text-underline-offset: 3px; }
.programs-compact .lead a {
  color: var(--orange); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

/* FIND YOUR STORE STRIP */
.find-store-strip {
  background: var(--med-green); color: var(--cream);
  padding: 32px 0;
}
.find-store-inner {
  display: flex; gap: 28px; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
}
.find-store-text { flex: 1; min-width: 280px; }
.find-store-text .eyebrow { color: var(--mustard); }
.find-store-text h3 {
  font-family: var(--f-head); text-transform: uppercase;
  font-size: 28px; line-height: 1.05; margin: 4px 0 6px;
  color: var(--cream);
}
.find-store-text p {
  margin: 0; font-size: 16px; color: var(--cream); opacity: 0.9;
}
.find-store-cta { flex-shrink: 0; }
.find-store-cta .btn-primary {
  background: var(--mustard); color: var(--brown);
  border-color: var(--mustard);
}
.find-store-cta .btn-primary:hover {
  background: var(--mustard-hi); border-color: var(--mustard-hi);
}

/* FRANCHISE PITCH (amplified) */
.franchise-pitch {
  background: var(--paper);
  border-top: 4px solid var(--mustard);
  border-bottom: 4px solid var(--mustard);
}
.franchise-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 12px; margin-bottom: 56px;
}
.franchise-stat {
  background: var(--mustard); color: var(--brown);
  border-radius: var(--r-md); padding: 28px 16px;
  text-align: center;
}
.franchise-stat-n {
  font-family: var(--f-head); font-size: 44px; line-height: 1;
  margin-bottom: 6px;
}
.franchise-stat-l {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em;
}
.franchise-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  margin-bottom: 48px;
}
.franchise-col-eyebrow {
  font-family: var(--f-accent); color: var(--orange);
  font-size: 26px; margin-bottom: 16px;
}
.franchise-list {
  list-style: none; padding: 0; margin: 0;
}
.franchise-list li {
  padding: 14px 0 14px 38px; position: relative;
  font-size: 16px; line-height: 1.5; color: var(--brown-soft);
  border-bottom: 1px solid rgba(61, 32, 26, 0.1);
}
.franchise-list li:last-child { border-bottom: none; }
.franchise-list li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 24px; height: 24px;
  background-color: var(--brown);
  -webkit-mask: var(--paw-print-mask);
  mask: var(--paw-print-mask);
}
.franchise-list li strong { color: var(--brown); font-weight: 700; }
.franchise-image-wrap {
  margin-bottom: 40px; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.franchise-image-wrap img {
  width: 100%; height: auto; display: block;
}
.franchise-ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.franchise-tldr {
  text-align: center; margin-top: 24px;
  font-size: 13px; color: var(--brown-soft); opacity: 0.7;
}

/* RESPONSIVE */
@media (max-width: 920px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .standards-grid { grid-template-columns: repeat(2, 1fr); }
  .programs-compact-grid { grid-template-columns: repeat(2, 1fr); }
  .franchise-stats { grid-template-columns: repeat(2, 1fr); }
  .franchise-cols { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .mission { padding: 64px 0 48px; }
  .mission-lead { font-size: 18px; }
  .pillars-grid, .standards-grid, .programs-compact-grid {
    grid-template-columns: 1fr;
  }
  .pillar-num { font-size: 48px; }
  .standard-n { font-size: 36px; }
  .find-store-inner { flex-direction: column; align-items: flex-start; }
  .franchise-stat-n { font-size: 32px; }
}

/* =================================================================
   LOCATION PAGE: INFO CARD, OVERVIEW, TESTIMONIAL
   ================================================================= */

/* INFO CARD - Address / Email / Phone / Parking */
.loc-info { background: var(--paper); padding-top: 56px; padding-bottom: 56px; }
.loc-info-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 32px;
}
.loc-info-cell {
  background: var(--cream);
  border: 2px solid var(--tan);
  border-radius: var(--r-md);
  padding: 22px 22px 26px;
}
.loc-info-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--brown-soft);
  margin-bottom: 10px;
}
.loc-info-val {
  font-size: 16px; line-height: 1.45; color: var(--brown);
  font-weight: 500;
}
.loc-info-val a { color: var(--brown); border-bottom: 1px dashed rgba(61,32,26,.3); }
.loc-info-val a:hover { color: var(--orange); border-bottom-color: var(--orange); }

.loc-info-waiver {
  margin-top: 28px;
  background: var(--mustard);
  border-radius: var(--r-md);
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  color: var(--brown);
  font-size: 16px; line-height: 1.45;
}
.loc-info-waiver strong { font-weight: 700; }
.loc-info-waiver .btn { flex-shrink: 0; }

/* OVERVIEW SECTION - text + photo split */
.loc-overview-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
  margin-top: 8px;
}
.loc-overview-text .eyebrow { margin-bottom: 12px; }
.loc-overview-text h2 { margin: 0 0 20px; }
.loc-overview-text p {
  font-size: 17px; line-height: 1.6; color: var(--brown-soft);
  margin: 0 0 14px;
}
.loc-overview-photo {
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3; background: var(--tan);
}
.loc-overview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Story-only variant: single column, readable text, no image */
.loc-story { padding-block: clamp(56px, 7vw, 88px); }
.loc-story-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.loc-story .eyebrow { margin-bottom: 12px; }
.loc-story h2 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 0 0 22px;
  line-height: 1.04;
}
.loc-story p {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--brown);
  margin: 0 auto 18px;
  max-width: 62ch;
}
.loc-story p:last-child { margin-bottom: 0; }

/* TESTIMONIAL CARD - single big quote */
.testimonial-card {
  max-width: 760px; margin: 0 auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  text-align: center;
  border: 2px solid var(--cream);
  box-shadow: var(--shadow);
}
.testimonial-stars {
  color: var(--mustard);
  letter-spacing: 4px;
  font-size: 20px;
  margin-bottom: 20px;
}
.testimonial-quote {
  font-family: var(--f-body);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--brown);
  margin: 0 0 24px;
  text-transform: none;
  font-weight: 500;
  font-style: italic;
}
.testimonial-attr strong {
  display: block;
  font-family: var(--f-body);
  font-size: 16px; font-weight: 700;
  color: var(--brown);
}
.testimonial-attr span {
  font-size: 13px; color: var(--brown-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
}

@media (max-width: 920px) {
  .loc-info-grid { grid-template-columns: repeat(2, 1fr); }
  .loc-overview-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 540px) {
  .loc-info-grid { grid-template-columns: 1fr; }
  .loc-info-waiver { flex-direction: column; align-items: flex-start; text-align: left; }
  .testimonial-card { padding: 32px 22px; }
}

/* CUTER WAIVER HEADS-UP CARD - replaces the flat mustard rectangle */
.loc-waiver-card {
  margin-top: 36px;
  background: var(--paper);
  border: 3px dashed var(--mustard);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: var(--shadow);
  position: relative;
  transform: rotate(-0.4deg);
}
.loc-waiver-stamp {
  background: var(--mustard);
  color: var(--brown);
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 3px solid var(--brown);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(61, 32, 26, 0.18);
  transform: rotate(-6deg);
}
.loc-waiver-stamp svg { width: 38px; height: 38px; }
.loc-waiver-eyebrow {
  font-family: var(--f-accent);
  color: var(--orange);
  font-size: 22px;
  margin-bottom: 4px;
}
.loc-waiver-text h3 {
  font-family: var(--f-head); text-transform: uppercase;
  font-size: 26px; line-height: 1.05; color: var(--brown);
  margin: 0 0 8px;
}
.loc-waiver-text p {
  font-size: 15px; line-height: 1.5; color: var(--brown-soft);
  margin: 0;
}
@media (max-width: 720px) {
  .loc-waiver-card { grid-template-columns: 1fr; text-align: center; transform: none; }
  .loc-waiver-stamp { margin: 0 auto; }
  .loc-waiver-card .btn { justify-self: center; }
}

/* TOP ANNOUNCEMENT BAR - light green band site-wide for promos */
.announce-bar {
  background: var(--green);
  color: var(--brown);
  padding: 10px 0;
  font-size: 14px; font-weight: 600;
  text-align: center;
}
.announce-bar a {
  color: var(--brown); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.announce-bar a:hover { color: var(--cream); }
.announce-bar-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.announce-bar-icon {
  font-size: 16px;
}

/* PROMO STICKER - tilted yellow oval pinned to hero corner */
.page-hero { position: relative; }
.promo-sticker {
  position: absolute;
  top: 32px; right: 28px;
  width: 168px; height: 168px;
  background: var(--mustard);
  border: 4px solid var(--brown);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: var(--brown);
  text-decoration: none;
  transform: rotate(-12deg);
  box-shadow: 0 8px 22px rgba(61, 32, 26, 0.28);
  transition: transform .2s ease, box-shadow .2s ease;
  z-index: 3;
  padding: 12px;
  line-height: 1.05;
}
.promo-sticker:hover {
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 12px 28px rgba(61, 32, 26, 0.35);
}
.promo-sticker-line1 {
  font-family: var(--f-accent);
  font-size: 18px;
  color: var(--red);
}
.promo-sticker-line2 {
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: 22px; line-height: 0.95;
  margin-top: 2px;
}
.promo-sticker-line3 {
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: 22px; line-height: 0.95;
}
.promo-sticker-cta {
  font-family: var(--f-accent);
  font-size: 16px;
  color: var(--red);
  margin-top: 6px;
}
@media (max-width: 720px) {
  .promo-sticker {
    width: 130px; height: 130px;
    top: 16px; right: 12px;
    border-width: 3px;
  }
  .promo-sticker-line1, .promo-sticker-cta { font-size: 14px; }
  .promo-sticker-line2, .promo-sticker-line3 { font-size: 17px; }
}

/* =================================================================
   LOCATION PAGE: PROMO PILL + HERO SPLIT (Figma redesign)
   ================================================================= */

/* PROMO PILL - calm cream band with orange accents.
   Sits between the here-bar and the hero. Cream keeps it from stacking
   another saturated color band on top of an already-colorful nav area,
   while the orange eyebrow chip + orange CTA still flag it as a
   time-sensitive announcement. */
.promo-pill {
  background: var(--cream);
  padding: 14px 0;
}

/* Manager message block sitting inside a location hero rather than as a
   full-bleed strip. The inner card carries the global .container class,
   which centres it with a 16px inset - correct when the block spans the
   page, wrong inside the hero column, where it left the card 16px right of
   the "Book a party" button. Drop the strip chrome and let the card fill
   the column so its edge lines up with the CTAs above it. */
.loc-hero-split-text .promo-pill {
  background: none;
  padding: 0;
  margin-top: 22px;
}
.loc-hero-split-text .promo-pill-inner {
  /* Only these two. The card carries the global .container class, which
     centres it inside a 1320px max-width with a 16px gutter - right for a
     full-bleed strip, wrong here, where it left the card sitting 16px to the
     right of the "Book a party" button above it. Filling the column puts its
     left edge back on the CTAs.

     Do not add flex or padding rules here. The specials variant sets its own
     further down the file at a higher specificity, and anything added here
     is silently dead. Its centred content is deliberate. */
  width: 100%;
  margin: 0;
}
/* Optional second line under the deal chips - a caveat, a closure notice,
   or an "ask us" prompt. Quieter than the chips so it reads as a footnote. */
.promo-pill-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--brown-soft);
}
.promo-pill-note a {
  color: var(--burnt-orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.promo-pill-inner {
  background: var(--cream);
  color: var(--brown);
  border: 2px solid var(--orange);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  font-weight: 600; font-size: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.promo-pill-inner .promo-pill-eyebrow {
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--orange);
  padding: 4px 10px; border-radius: var(--r-pill);
  border: none;
  white-space: nowrap;
}
.promo-pill-inner .promo-pill-text {
  flex: 0 1 auto; min-width: 0;
}
.promo-pill-text { flex: 1; min-width: 220px; }
.promo-pill-cta {
  color: var(--orange); font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
  white-space: nowrap;
}
.promo-pill-cta:hover { color: var(--burnt-orange); }

/* Inline specials card - used inside the party wizard (Step 1) for
   location-specific deals that require a phone call to book. Sits
   between the section head and the calendar. */
.specials-card {
  max-width: 720px;
  margin: 0 auto 28px;
  background: #fff;
  border: 1.5px solid var(--brown);
  border-radius: 14px;
  padding: 16px 22px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(75, 46, 26, 0.08);
}
.specials-card-eyebrow {
  font-family: var(--f-head);
  font-size: 15px;
  color: var(--burnt-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.specials-card-deals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  color: var(--brown);
  font-size: 15px;
  margin-bottom: 10px;
}
.specials-deal { font-weight: 600; }
.specials-deal strong {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brown);
  background: var(--mustard);
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: 1px;
}
.specials-card-note {
  font-size: 13px;
  color: var(--brown-soft);
  margin: 0;
}
.specials-card-note a {
  color: var(--burnt-orange);
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .specials-card { padding: 14px 16px; }
  .specials-card-deals { font-size: 14px; gap: 6px 12px; }
}

/* SPECIALS variant: quiet cream notice with a thin brown border. Mustard
   only appears as small day-badge accents. Sits on the page without
   stealing attention from the hero. */
.promo-pill.promo-pill-specials .promo-pill-inner {
  background: #fff;
  color: var(--brown);
  border: 1.5px solid var(--brown);
  border-radius: 14px;
  padding: 12px 22px;
  gap: 10px 18px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  box-shadow: 0 2px 0 rgba(75, 46, 26, 0.08);
}
.promo-pill-eyebrow {
  font-family: var(--f-head);
  font-size: 16px;
  color: var(--burnt-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}
.promo-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  justify-content: center;
}
.promo-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  color: var(--brown);
  font-weight: 600;
  line-height: 1.2;
}
.promo-chip-day {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brown);
  background: var(--mustard);
  padding: 3px 8px;
  border-radius: 999px;
}
.promo-chip + .promo-chip::before {
  content: '·';
  color: var(--brown);
  opacity: 0.4;
  margin-right: 3px;
  font-weight: 700;
}
.promo-chip-deal { color: var(--brown); }
.promo-pill.promo-pill-specials .promo-pill-cta {
  color: var(--burnt-orange);
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.promo-pill.promo-pill-specials .promo-pill-cta:hover {
  color: var(--brown);
}
@media (max-width: 640px) {
  .promo-pill.promo-pill-specials .promo-pill-inner {
    padding: 10px 14px; gap: 8px 12px;
  }
  .promo-pill-eyebrow { font-size: 14px; }
  .promo-chip { font-size: 13px; }
}

/* LOCATION HERO SPLIT - text left, photo right */
.loc-hero-split {
  background: var(--cream);
  padding: 40px 0 80px;
}
.loc-hero-split-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.loc-hero-split-text .crumbs { margin-bottom: 14px; }
.loc-hero-split-text h1 {
  font-family: var(--f-head);
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.96; color: var(--brown);
  text-transform: uppercase;
  margin: 6px 0 18px;
}
.loc-hero-split-text h1 .script {
  font-family: var(--f-accent);
  color: var(--orange);
  font-size: 0.7em;
  display: inline-block;
  transform: rotate(-3deg);
  text-transform: none;
}
.loc-hero-split-text .lead {
  font-size: 18px; line-height: 1.55;
  color: var(--brown-soft); font-weight: 500;
  margin: 0; max-width: 50ch;
}
.loc-hero-callus {
  margin: 18px 0 0;
  font-size: 16px;
  color: var(--brown);
}
.loc-hero-callus strong {
  color: var(--brown);
  font-weight: 700;
  margin-right: 6px;
}
.loc-hero-callus a {
  color: var(--burnt-orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.loc-hero-callus a:hover { color: var(--brown); }
.loc-hero-split-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--tan);
  box-shadow: var(--shadow-md);
}
.loc-hero-split-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center 15%;
}

@media (max-width: 820px) {
  .loc-hero-split-inner { grid-template-columns: 1fr; gap: 32px; }
  .loc-hero-split { padding: 32px 0 56px; }
  .promo-pill-inner { padding: 12px 20px; font-size: 15px; flex-direction: column; align-items: flex-start; }
}

/* ================= PROGRAM-PAGE SPLIT HERO (acacia-tree backgrounds) ================= */
.prog-hero {
  padding: 64px 0 80px;
  position: relative;
  overflow: hidden;
}
/* Real Figma backgrounds: orange acacia / mustard bamboo / brown bamboo */
.prog-hero-orange {
  background-color: var(--orange);
  background-image: url('../images/bg-safari-trees.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.prog-hero-mustard {
  background-color: var(--mustard);
  background-image: url('../images/bg-bamboo.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.prog-hero-brown {
  background: #6B3E28;
  position: relative;
  overflow: hidden;
}
.prog-hero-brown::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url('../images/bg-bamboo-dark.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.55;
}
.prog-hero-brown > .container { position: relative; z-index: 1; }
/* Brown hero text overrides - dark brown text is unreadable on brown bg. */
.prog-hero-brown .prog-hero-text h1 { color: var(--paper); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.prog-hero-brown .prog-hero-text h1 .script { color: var(--burnt-orange); text-shadow: none; }
/* Mustard heroes: script defaults to brown (too low contrast). Use burnt
   orange to pop against the yellow background while keeping the light,
   cursive feel of the accent font. */
.prog-hero-mustard .prog-hero-text h1 .script { color: var(--burnt-orange); }
.prog-hero-orange  .prog-hero-text h1 .script { color: var(--burnt-orange); }
.prog-hero-brown .prog-hero-text .lead { color: var(--paper); }
.prog-hero-brown .hero-pick-loc .pick-loc-btn {
  background: var(--mustard);
  color: var(--brown);
  border: 2px solid var(--mustard);
}
.prog-hero-brown .hero-pick-loc .pick-loc-btn:hover { filter: brightness(1.05); }
.prog-hero-brown .hero-pick-loc .pick-loc-btn-soon {
  background: transparent;
  color: var(--paper);
  border: 2px dashed var(--paper);
  opacity: 0.9;
}

/* STORE MEMBERSHIP BLOCK
   A location page carries its own memberships: a lead-in, the cards that
   store actually sells, then its membership questions. Built for San Mateo
   2026-09-10. Prices never appear on the corporate program page, because
   every store sells a different membership. */
.memb-pick-head {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--brown); font-size: 20px; text-align: center; margin: 0 0 18px;
}
.memb-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; max-width: 860px; margin: 0 auto;
}
.memb-card {
  background: var(--paper); border: 2px solid var(--tan); border-radius: var(--r-lg);
  padding: 26px 24px; display: flex; flex-direction: column;
}
.memb-card-lead { border-color: var(--brown); }
.memb-card-name {
  font-family: var(--f-head); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--brown); font-size: 22px;
}
.memb-card-tag { font-family: var(--f-accent); color: var(--burnt-orange); font-size: 18px; margin-bottom: 10px; }
.memb-card-price { font-family: var(--f-head); font-size: 40px; color: var(--brown); line-height: 1; }
.memb-card-price small { font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--brown-soft); margin-left: 6px; }
.memb-card-value { font-size: 13px; color: var(--med-green); font-weight: 700; margin: 6px 0 14px; }
.memb-card-feats { list-style: none; padding: 0; margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--brown); }
.memb-card-feats li { padding-left: 20px; position: relative; margin-bottom: 6px; }
.memb-card-feats li::before { content: '\2713'; position: absolute; left: 0; color: var(--med-green); font-weight: 700; }
.memb-card .btn-soon { margin-top: auto; align-self: flex-start; }
.memb-foot-note {
  max-width: 860px; margin: 18px auto 0; text-align: center;
  font-size: 13px; color: var(--brown-soft); line-height: 1.5;
}
.memb-faq { max-width: 860px; margin: 40px auto 0; }

/* The line of copy under a "pick your membership" heading. Without this it
   inherited the container's left alignment and sat hard against the cards,
   which read as a mistake next to the centred heading above it. */
/* Plano sells two different memberships, so the headings that name them are
   doing more work than a "pick your membership" step heading and need to
   carry more weight. */
.memb-pick-head-lg { font-size: 28px; letter-spacing: 0.03em; margin-bottom: 10px; }
@media (max-width: 600px) { .memb-pick-head-lg { font-size: 23px; } }

.memb-pick-sub {
  max-width: 640px; margin: -8px auto 26px; text-align: center;
  color: var(--brown-soft); font-size: 15px; line-height: 1.55;
}
/* A heading that follows a previous block of cards needs air above it. */
.memb-cards + .memb-pick-head { margin-top: 44px; }

/* Plano's four unlimited passes. They carry a price and little else, so they
   sit four across rather than taking the 280px minimum the two-card rows use,
   which would drop them to two rows of two on a desktop. */
.memb-cards-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); max-width: 900px; }
/* "$1,200 for 36 months" wrapped after "36", leaving "months" stranded on its
   own line. Putting the term under the price fixes it for the long one and
   lines all four up with each other. */
.memb-cards-4 .memb-card-price small { display: block; margin-top: 2px; }
@media (max-width: 720px) {
  .memb-cards-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* PER-STORE FAQ
   A location page carries its own FAQ, split into collections with a row of
   topic buttons above it. Built for San Mateo 2026-09-10; Sunnyvale and
   Plano use the same markup, so this lives here rather than on the page. */
.faq-cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin: 0 auto 24px; max-width: 900px;
}
.faq-cat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--tan); background: var(--paper);
  font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--brown);
}
.faq-cat:hover { border-color: var(--brown); }
.faq-cat[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.faq-cat-n {
  font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--tan); color: var(--brown);
}
.faq-cat[aria-pressed="true"] .faq-cat-n { background: var(--mustard); color: var(--brown); }
.faq-group[hidden] { display: none; }
.faq-group-note {
  max-width: 760px; margin: 0 auto 14px; text-align: center;
  font-size: 13px; color: var(--brown-soft); font-style: italic;
}

/* STATUS CHIP
   Button-shaped, but not a link, for a path that exists in the build and is
   not open to customers yet. Memberships carry it on its own, because the
   back end is being rebuilt and nobody can buy one anywhere. Punch cards
   pair it with the front-desk line, because those you can buy in store
   today. Added 2026-09-10. */
.btn-soon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: 999px;
  border: 2px dashed var(--brown); background: transparent;
  color: var(--brown); font-family: var(--f-head);
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1; cursor: default;
}
.btn-soon-sm { padding: 9px 18px; font-size: 13px; }
.btn-soon-note {
  display: block; margin-top: 10px; font-family: var(--f-body);
  font-size: 14px; line-height: 1.45; color: var(--brown);
}
.prog-hero-green {
  /* PNG tile - raster avoids the SVG subpixel seam that showed as a dark line. */
  background-color: #A2BC51;
  background-image: url('../images/bg-palm-trees.png');
  background-size: 1200px auto;
  background-repeat: repeat;
}
.prog-hero-green .prog-hero-text h1 .script { color: var(--burnt-orange); }
.prog-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.prog-hero-text h1 {
  font-family: var(--f-head);
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.96; color: var(--brown);
  text-transform: uppercase;
  margin: 6px 0 18px;
  text-wrap: balance;
}
.prog-hero-text h1 .script {
  font-family: var(--f-accent);
  color: var(--brown);
  font-size: 0.72em;
  display: inline-block;
  transform: rotate(-3deg);
  text-transform: none;
  text-shadow: none;
}
.prog-hero-text .lead {
  font-size: 20px; line-height: 1.55;
  color: var(--brown-dark);
  font-weight: 600;
  margin: 0 0 28px; max-width: 50ch;
}
.prog-hero-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.prog-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center 15%;
}

/* BROWN CTA STRIPE (brown bamboo Figma pattern) */
.cta-stripe-brown {
  background-color: var(--brown);
  background-image: url('../images/bg-bamboo-dark.png');
  background-size: 829px 829px;
  background-repeat: repeat;
  color: var(--cream);
  padding: 56px 0;
  text-align: center;
}
.cta-stripe-inner {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  flex-direction: column;
}
.cta-stripe-copy { max-width: 640px; }
.cta-stripe-eyebrow {
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--mustard);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.cta-stripe-title {
  font-family: var(--f-head);
  font-size: clamp(30px, 4vw, 48px);
  margin: 0;
  text-transform: uppercase;
  color: var(--cream);
  letter-spacing: 0.01em;
  line-height: 1;
}
.cta-stripe-title .script {
  font-family: var(--f-accent);
  color: var(--mustard);
  font-size: 0.75em;
  text-transform: none;
  display: inline-block;
  transform: rotate(-3deg);
  margin-left: 4px;
}
.cta-stripe-sub {
  color: var(--cream);
  font-size: 16px;
  line-height: 1.5;
  margin: 14px 0 0;
  opacity: 0.9;
}
.btn-cream {
  background: var(--cream);
  color: var(--brown);
  border: 2px solid var(--cream);
}
.btn-cream:hover {
  background: var(--mustard);
  border-color: var(--mustard);
}

/* PARTY-PAGE PACKAGE GRID (Figma layout: 3 quiet cards + 1 mustard featured) */
.pkg-figma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.pkg-fc {
  background: var(--paper);
  border: 2px solid var(--tan);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.pkg-fc-badge {
  position: absolute;
  top: -10px; left: 24px;
  background: var(--mustard);
  color: var(--brown);
  font-family: var(--f-head);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 2px solid var(--paper);
}
.pkg-fc-name {
  font-family: var(--f-head);
  font-size: 24px; color: var(--brown);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.pkg-fc-tag { font-size: 14px; color: var(--brown-soft); margin: -8px 0 0; }
.pkg-fc-price {
  font-family: var(--f-head);
  font-size: 44px; color: var(--brown); line-height: 1;
}
.pkg-fc-price small { font-size: 16px; font-weight: 400; color: var(--brown-soft); }
.pkg-fc-extra {
  font-size: 13px; font-weight: 700;
  color: var(--burnt-orange);
  margin: -8px 0 0;
  letter-spacing: 0.01em;
}
.pkg-fc-feats {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--brown-soft);
}
.pkg-fc-feats li::before { content: '✓ '; color: var(--med-green); font-weight: 700; }
.pkg-fc .btn { margin-top: auto; }
/* Coming-soon session cards: muted so the current open session stands
   out, but still legible enough to preview what's coming. */
.pkg-fc-coming { opacity: 0.75; background: var(--paper); }
.pkg-fc-coming .pkg-fc-badge { background: var(--tan); color: var(--brown); }
.pkg-fc-coming .pkg-fc-price { color: var(--brown); opacity: 0.7; }
.pkg-fc-coming .btn { pointer-events: none; }
/* Ended session cards: fully muted, non-clickable. */
.pkg-fc-ended { opacity: 0.45; background: var(--paper); }
.pkg-fc-ended .btn { pointer-events: none; }
.pkg-fc-featured {
  border-color: var(--mustard);
}

@media (max-width: 820px) {
  .prog-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .prog-hero { padding: 40px 0 56px; }
}

/* AGE-GROUP CARD ROW (Fitness page: sneakers / cone / dumbbell) */
.age-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
  text-align: center;
}
.age-card { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.age-card-icon { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; }
.age-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.age-card-title {
  font-family: var(--f-head);
  font-size: 28px;
  color: var(--brown);
  margin: 6px 0 4px;
}
.age-card-desc {
  font-size: 16px; line-height: 1.5;
  color: var(--brown-soft);
  max-width: 28ch;
}

/* WEEKLY TOPICS (camp/fitness sessions: 10-week sticker grid) */
.session {
  margin-top: 48px;
}
.session-title {
  font-family: var(--f-head);
  font-size: 32px;
  color: var(--brown);
  margin: 0 0 12px;
}
.session-lead {
  font-size: 16px; line-height: 1.55;
  color: var(--brown-soft);
  max-width: 60ch;
  margin: 0 0 24px;
}
.weeks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
}
.week-card { display: flex; flex-direction: column; gap: 6px; }
.week-tag {
  display: inline-block;
  font-family: var(--f-accent);
  font-size: 18px;
  color: var(--brown);
  padding: 4px 14px;
  border-radius: 6px;
  align-self: flex-start;
  transform: rotate(-1.5deg);
  letter-spacing: 0.02em;
}
.week-tag-mustard { background: var(--mustard); }
.week-tag-orange  { background: var(--orange); color: var(--brown); }
.week-tag-green   { background: var(--med-green); color: var(--cream); }
.week-tag-perry   { background: var(--perry); color: var(--cream); }
.week-tag-fuscia  { background: var(--fuscia); color: var(--cream); }
.week-card-title {
  font-size: 15px; font-weight: 700;
  color: var(--brown); line-height: 1.45;
  margin: 4px 0 0;
}

@media (max-width: 820px) {
  .age-cards { grid-template-columns: 1fr; gap: 28px; }
  .weeks-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 520px) {
  .weeks-grid { grid-template-columns: 1fr; }
}

/* IMAGE + TEXT ALTERNATING STORY ROWS (Camps page) */
.story-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  margin: 48px 0;
}
.story-row.reverse { grid-template-columns: 1.1fr 1fr; }
.story-row.reverse .story-row-photo { order: 2; }
.story-row-photo {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--tan);
  box-shadow: var(--shadow);
}
.story-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-row-text h3 {
  font-family: var(--f-head);
  font-size: clamp(24px, 2.4vw, 32px);
  color: var(--brown);
  margin: 0 0 14px;
  line-height: 1.1;
}
.story-row-text p {
  font-size: 16px; line-height: 1.6;
  color: var(--brown-soft);
  margin: 0 0 12px;
}

/* NUMBERED GREEN CARDS (Camps "Why families return" - 6 in a 3x2 grid) */
.num-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.num-card {
  background: var(--med-green);
  color: var(--cream);
  border-radius: var(--r-md);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow);
}
.num-card-num {
  font-family: var(--f-accent);
  font-size: 28px;
  color: var(--brown);
  background: var(--mustard);
  width: 48px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  align-self: flex-start;
  transform: rotate(-3deg);
  box-shadow: 0 4px 8px rgba(61, 32, 26, 0.18);
}
.num-card h4 {
  font-family: var(--f-body);
  font-size: 18px; font-weight: 700;
  color: var(--cream);
  margin: 0; line-height: 1.25;
}
.num-card p {
  font-size: 15px; line-height: 1.55;
  color: rgba(247, 244, 239, 0.92);
  margin: 0;
}

/* ============ REASON FLIP CARDS (camp page: six reasons) ============
   3D flip cards with an animal head on the front. Click / tap / keyboard
   activation flips the card. Hover makes the animal wiggle. */
.reason-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.reason-card {
  position: relative;
  border: 3px solid var(--brown);
  border-radius: var(--r-md);
  padding: 28px 24px;
  color: var(--cream);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.reason-card p {
  font-size: 15.5px; line-height: 1.55;
  color: inherit; margin: 12px 0 0;
}
.reason-card-orange { background: var(--orange); }
.reason-card-green  { background: var(--med-green); }
.reason-card-perry  { background: var(--perry); }
.reason-card-brown  { background: var(--brown); }
.reason-card-animal {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--brown);
  box-shadow: 0 6px 14px rgba(61, 32, 26, 0.2);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  align-self: flex-start;
  transform-origin: center bottom;
  transition: transform .35s ease;
}
.reason-card-animal img {
  width: 92%; height: auto; display: block;
  transform: translateY(6%);
  pointer-events: none;
}
.reason-card:hover .reason-card-animal { transform: rotate(-6deg) scale(1.04); }
.reason-card:hover .reason-card-animal img { animation: reason-bob 1.2s ease-in-out infinite; }
@keyframes reason-bob {
  0%, 100% { transform: translateY(6%) rotate(0); }
  50%      { transform: translateY(3%) rotate(2deg); }
}
.reason-card-num {
  position: absolute;
  top: 22px; right: 22px;
  font-family: var(--f-accent);
  font-size: 34px;
  color: var(--brown);
  background: var(--mustard);
  min-width: 46px; height: 50px;
  padding: 0 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  transform: rotate(-4deg);
  box-shadow: 0 4px 8px rgba(61, 32, 26, 0.25);
}
.reason-card h4 {
  font-family: var(--f-body);
  font-size: 19px; font-weight: 700;
  color: inherit;
  margin: 24px 0 12px; line-height: 1.2;
}
@media (max-width: 900px) {
  .reason-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .reason-cards { grid-template-columns: 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .reason-card-inner { transition: none; }
  .reason-card:hover .reason-card-animal { transform: none; }
  .reason-card:hover .reason-card-animal img { animation: none; }
}

/* CAMP OPTION CARDS (Summer Camp / Parents Night drop-off) */
.camp-opts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}
.camp-opts-text { padding-top: 8px; }
.camp-opts-text h3 {
  font-family: var(--f-head);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--brown);
  margin: 0 0 14px;
  line-height: 1;
}
.camp-opts-text p { font-size: 16px; line-height: 1.55; color: var(--brown-soft); }
.camp-opt {
  background: var(--mustard);
  border-radius: var(--r-md);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
  color: var(--brown);
}
.camp-opt-orange { background: var(--orange); color: var(--cream); }
.camp-opt-title {
  font-family: var(--f-head);
  font-size: 26px;
  text-transform: uppercase;
}
.camp-opt-orange .camp-opt-title { color: var(--cream); }
.camp-opt ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 15px;
}
.camp-opt-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.camp-opt .btn-cream { background: var(--cream); color: var(--brown); border-color: var(--cream); }
.camp-opt-link {
  font-size: 14px; font-weight: 700;
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .story-row, .story-row.reverse { grid-template-columns: 1fr; gap: 24px; }
  .story-row.reverse .story-row-photo { order: 0; }
  .num-cards { grid-template-columns: 1fr 1fr; }
  .camp-opts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .num-cards { grid-template-columns: 1fr; }
}

/* OPEN PLAY HERO: text on left + photo collage on right */
.collage-hero {
  background: var(--paper);
  padding: 64px 0;
}
.collage-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.collage-hero-text h1 {
  font-family: var(--f-head);
  font-size: clamp(48px, 6vw, 80px);
  color: var(--brown);
  line-height: 0.96;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.collage-hero-text h1 .script {
  font-family: var(--f-accent);
  text-transform: none;
  font-size: 0.72em;
  display: inline-block;
  transform: rotate(-3deg);
  color: var(--orange);
}
.collage-hero-text .lead {
  font-size: 19px; line-height: 1.55;
  color: var(--brown); font-weight: 700;
  margin: 0 0 28px; max-width: 50ch;
}
.collage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 175px;
  gap: 14px;
}
.collage-grid > * {
  /* Each image lives inside an animated frame so the image itself can
     ken-burns-drift while the frame keeps the grid cell exact. */
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.collage-grid > *:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(61, 32, 26, 0.25);
}
.collage-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: center center;
  animation: kenburns 9s ease-in-out infinite alternate;
  transition: transform 0.6s ease;
}
.collage-grid > *:hover img { transform: scale(1.06); animation-play-state: paused; }
/* Stagger each photo so they don't all breathe in sync. */
.collage-grid > *:nth-child(1) img { animation-delay: 0s; }
.collage-grid > *:nth-child(2) img { animation-delay: -2s; animation-direction: alternate-reverse; }
.collage-grid > *:nth-child(3) img { animation-delay: -4.5s; }
.collage-grid > *:nth-child(4) img { animation-delay: -6.5s; animation-direction: alternate-reverse; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .collage-grid img { animation: none; }
}
.collage-grid .img-tall { grid-row: span 2; }
.collage-grid .img-wide { grid-column: span 2; }

/* CREAM INFO + PICK-LOCATION CARD (Open Play + Private Open Play) */
.info-price {
  background: var(--cream);
  border: 3px solid var(--brown);
  border-radius: var(--r-md);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: center;
  color: var(--brown);
  box-shadow: var(--shadow);
}
.info-price-text .eyebrow { color: var(--orange); margin-bottom: 6px; }
.info-price-text h3 {
  font-family: var(--f-head);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95;
  color: var(--brown);
  margin: 0 0 12px;
}
.info-price-text h3 .script {
  font-family: var(--f-accent);
  color: var(--orange);
  font-size: 0.7em;
  display: inline-block;
  transform: rotate(-3deg);
  text-transform: none;
}
.info-price-text p {
  font-size: 15px; line-height: 1.55;
  color: var(--brown);
  margin: 0 0 18px;
}
.info-price-included {
  font-size: 15px; font-weight: 700;
  color: var(--brown);
  border-bottom: 2px solid rgba(61, 32, 26, 0.2);
  padding-bottom: 6px; margin-bottom: 12px;
  display: inline-block; min-width: 150px;
}
.info-price-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  font-size: 14px;
  color: var(--brown);
}
.info-price-cta {
  text-align: center;
}
.info-price-cta .overline {
  font-size: 14px; font-weight: 700; color: var(--brown);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.info-price-cta .price {
  font-family: var(--f-head);
  font-size: 64px; line-height: 1;
  color: var(--brown);
  margin: 0 0 18px;
}
.info-price-cta .footnote {
  font-size: 13px; color: var(--brown);
  opacity: 0.75; margin-top: 10px;
}
/* Hero location marker - injected by site.js on program/book pages when
   the customer has a saved location. Uses the site's playful .eyebrow
   style so it reads as part of the hero content, not a separate widget. */
.hero-loc-chip {
  margin-bottom: 4px;
  font-size: 22px;
  color: var(--brown);
}
.prog-hero-brown .hero-loc-chip { color: var(--mustard); }
.prog-hero-mustard .hero-loc-chip { color: var(--brown); }

/* Location facility-tour video (YouTube embed, 16:9) */
.loc-tour-video {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 32px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(75, 46, 26, 0.12);
}
.loc-tour-video iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Visit Us map + get-directions link inside loc-detail-card */
.loc-detail-map {
  margin: 18px 0 4px;
}
.loc-detail-directions {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--burnt-orange);
  text-decoration: underline;
}
.loc-detail-directions:hover { color: var(--brown); }

.info-price-reserve {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tan);
}
.info-price-reserve-note {
  color: var(--brown);
  margin: 0 0 14px;
  font-size: 15px;
}
.info-price-reserve-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* PROGRESS STRIP (Birthday party booking flow) - compact single-row */
.steps-strip {
  background: var(--cream);
  padding: 14px 0;
  border-bottom: 1px solid var(--tan);
}
.steps-strip-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}
.step-pill {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1.5px solid var(--tan);
  border-radius: var(--r-pill);
  color: var(--brown-soft);
  font-family: var(--f-body);
}
.step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--tan);
  color: var(--brown);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-head);
  font-size: 13px;
  flex-shrink: 0;
}
.step-label-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.step-label-tag { display: none; }

@media (max-width: 600px) {
  .steps-strip { padding: 10px 0; }
  .step-pill { padding: 5px 8px; gap: 6px; }
  .step-num { width: 20px; height: 20px; font-size: 12px; }
  .step-label-name { font-size: 11px; }
}
@media (max-width: 420px) {
  /* on very narrow screens, hide non-current labels so circles stay legible */
  .step-pill:not(.is-current) .step-label-name { display: none; }
}
.step-pill.is-current {
  border-color: var(--mustard);
  color: var(--brown);
  background: var(--cream);
  flex-grow: 2;
}
.step-pill.is-done {
  border-color: var(--med-green);
  color: var(--brown);
}
.step-pill.is-current .step-num { background: var(--mustard); color: var(--brown); }
.step-pill.is-done .step-num { background: var(--med-green); color: var(--cream); }

@media (max-width: 820px) {
  .collage-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .info-price { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .info-price-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .info-price-text p { font-size: 16px; line-height: 1.6; }
  .info-price-list { font-size: 16px; line-height: 1.5; }
  .info-price-included { font-size: 16px; }
}

/* LOCATION TABS (used in 3-step party booking, Step 1) */
.loc-tabs {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 24px;
}
.loc-tab {
  background: var(--paper);
  border: 2px solid var(--brown);
  color: var(--brown);
  font-weight: 700; font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.loc-tab:hover { background: var(--mustard); }
.loc-tab.is-active { background: var(--brown); color: var(--cream); }

.step-next {
  text-align: center; margin-top: 32px;
}

/* BOOKING FORM (Step 3) */
.booking-form {
  max-width: 720px; margin: 0 auto;
  background: var(--cream);
  border: 2px solid var(--tan);
  border-radius: var(--r-md);
  padding: 32px;
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; margin-bottom: 18px;
}
.form-row.form-row-city-state-zip { grid-template-columns: 2fr 1fr 1fr; }
.form-row.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) { .form-row.form-row-3 { grid-template-columns: 1fr; } }
.form-row label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--brown);
}
.form-row label.full { grid-column: 1 / -1; }
.form-row input, .form-row textarea, .form-row select {
  padding: 10px 12px;
  border: 2px solid var(--tan);
  border-radius: var(--r-sm);
  font-family: var(--f-body); font-size: 15px;
  background: var(--paper);
  color: var(--brown);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none; border-color: var(--mustard);
}
.booking-summary {
  background: var(--paper);
  border-left: 4px solid var(--mustard);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin: 24px 0;
  font-size: 14px; color: var(--brown);
  display: flex; flex-direction: column; gap: 4px;
}
.form-foot {
  font-size: 13px; color: var(--brown-soft);
  margin-top: 12px; text-align: center;
}

/* PICKED CALENDAR SLOT (on the party-page step-1 mini-calendar) */
.cal-event.is-picked {
  outline: 2px solid var(--mustard);
  outline-offset: 1px;
}

/* SUMMER CAMP - phone-with-quote wrapper (phone + parent testimonial) */
.phone-with-quote {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 12px 8px;
}
.hero-quote-card {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--brown);
  border-radius: var(--r-md);
  padding: 22px 24px 20px;
  margin: 0;
  max-width: 360px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.14), 0 3px 6px rgba(0,0,0,0.08);
  transform: rotate(-1.2deg);
}
.hero-quote-mark {
  position: absolute;
  top: -22px; left: 18px;
  font-family: var(--f-head);
  font-size: 72px;
  line-height: 1;
  color: var(--mustard);
  text-shadow: 0 2px 0 var(--brown);
}
.hero-quote-body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--brown);
  margin: 0 0 14px;
  font-style: italic;
  font-weight: 600;
}
.hero-quote-cite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-style: normal;
  border-top: 1px solid var(--tan);
  padding-top: 10px;
}
.hero-quote-name {
  font-family: var(--f-head);
  font-size: 16px;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hero-quote-role {
  font-size: 12px;
  color: var(--brown-soft);
  font-weight: 700;
}

@media (max-width: 820px) {
  .phone-with-quote { max-width: 400px; gap: 20px; }
  .hero-quote-card { max-width: 320px; padding: 18px 20px 16px; }
  .hero-quote-mark { font-size: 60px; top: -18px; }
  .hero-quote-body { font-size: 15px; }
}

/* SUMMER CAMP - phone-shaped hero video frame (matte black iPhone-ish) */
/* When .prog-hero-photo is repurposed as a phone-frame wrapper, kill the
   landscape-photo defaults - no cream background, no forced 4:3 ratio,
   no clipping, no shadow (the phone has its own). */
.prog-hero-photo.prog-hero-phone-frame {
  background: transparent;
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}
.phone-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 19.5;
  background: #C25A1A;                     /* burnt orange chassis */
  border-radius: 46px;
  padding: 16px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.28),
    0 10px 22px rgba(0,0,0,0.20),
    inset 0 0 0 2px rgba(255,255,255,0.10),
    inset 0 0 0 6px rgba(0,0,0,0.18);
  overflow: visible;
}
.phone-frame::before {
  content: "";
  position: absolute;
  top: 26px; left: 50%;
  width: 128px; height: 30px;
  background: #000;
  border-radius: 15px;
  transform: translateX(-50%);
  z-index: 2;
}
.phone-frame::after {
  content: "";
  position: absolute;
  top: 22%;
  right: -3px;
  width: 3px; height: 68px;
  background: #8F3F0F;                     /* darker orange for side button */
  border-radius: 0 2px 2px 0;
}
.phone-frame-side {
  position: absolute;
  left: -3px;
  top: 15%;
  width: 3px; height: 38px;
  background: #8F3F0F;
  border-radius: 2px 0 0 2px;
}
.phone-frame-side.is-vol {
  top: 24%;
  height: 56px;
}
.phone-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  display: block;
  background: #000;
}
.phone-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 820px) {
  .phone-frame { max-width: 300px; padding: 14px; border-radius: 40px; }
  .phone-frame::before { top: 22px; width: 110px; height: 26px; }
  .phone-video { border-radius: 28px; }
}

/* FRANCHISE - what-we-look-for trait pills */
.trait-list {
  list-style: none; margin: 28px auto 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 32px;
  max-width: 860px;
}
.trait-pill {
  position: relative;
  padding: 4px 0 4px 32px;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.4;
}
.trait-pill::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--med-green);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F7F4EF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5,10 9,14 15,6'/></svg>");
  background-size: 20px 20px;
}

/* FRANCHISE - contact info + form side-by-side */
.franchise-contact {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  max-width: 1040px;
  margin: 32px auto 0;
}
.franchise-contact-info {
  background: var(--paper);
  border: 2px solid var(--tan);
  border-radius: var(--r-md);
  padding: 28px;
}
.franchise-contact-info h3 {
  font-family: var(--f-head);
  font-size: 22px;
  color: var(--brown);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.franchise-contact-sub {
  font-size: 13px; color: var(--brown-soft);
  margin: 0 0 20px;
}
.franchise-contact-row {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
  font-size: 15px; color: var(--brown);
}
.franchise-contact-row a {
  color: var(--med-green);
  text-decoration: underline;
  font-weight: 700;
}
.franchise-contact-ic {
  font-size: 20px;
  color: var(--mustard);
  min-width: 24px;
}
.franchise-contact-note {
  font-size: 13px;
  color: var(--brown-soft);
  margin: 22px 0 0;
  font-style: italic;
}
.franchise-contact-form {
  background: var(--paper);
  border: 2px solid var(--tan);
  border-radius: var(--r-md);
  padding: 28px;
}
.franchise-required {
  font-size: 12px;
  color: var(--brown-soft);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact-form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brown-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* Franchise form - polished grid + input styling */
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}
.contact-form-grid .franchise-required { grid-column: 1 / -1; margin-bottom: 0; }
.contact-form-grid .contact-form-field:nth-child(2) { grid-column: 1 / -1; } /* name */
.contact-form-grid .contact-form-field:nth-child(5) { grid-column: 1 / -1; } /* city */
.contact-form-grid .contact-form-field:nth-child(6) { grid-column: 1 / -1; } /* best time select */
.contact-form-grid .contact-form-field:nth-child(7) { grid-column: 1 / -1; } /* message */
.contact-form-grid .contact-form-actions { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 4px; }
.contact-form-grid .contact-form-note { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--brown-soft); margin: 0; font-style: italic; }
.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--brown);
  background: var(--paper);
  border: 2px solid var(--tan);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: var(--brown-soft);
  opacity: 0.75;
}
.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  outline: none;
  border-color: var(--med-green);
  background: #fffdf6;
  box-shadow: 0 0 0 4px rgba(122, 143, 74, 0.18);
}
.contact-form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354340f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.contact-form-field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--f-body);
}
.contact-form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.contact-form-done {
  text-align: center;
  padding: 12px 4px;
}
.contact-form-done h3 {
  font-family: var(--f-head);
  color: var(--brown);
  font-size: 26px;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.contact-form-done p {
  color: var(--brown);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 820px) {
  .franchise-contact { grid-template-columns: 1fr; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-grid .contact-form-field:nth-child(n) { grid-column: 1 / -1; }
}

/* LEGAL DOCUMENTS - review notice banner at top of stale policy docs */
.legal-notice {
  background: var(--cream);
  border: 2px solid var(--mustard);
  border-left-width: 6px;
  border-radius: var(--r-sm);
  padding: 18px 22px;
  margin: 0 0 32px;
}
.legal-notice-tag {
  display: inline-block;
  font-family: var(--f-head);
  font-size: 12px;
  color: var(--brown);
  background: var(--mustard);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.legal-notice-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--brown);
}
.legal-notice-body strong { color: var(--brown); }
.legal-notice-body a { color: var(--med-green); text-decoration: underline; font-weight: 700; }
.legal-notice-body a:hover { color: var(--brown); }

/* LEGAL DOCUMENTS - privacy policy, terms, etc. Compact typography for
   long-form legal text so it stays readable without overwhelming the
   page. */
.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  color: var(--brown);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
}
.legal-doc h2 {
  font-family: var(--f-head);
  font-size: 26px;
  color: var(--brown);
  margin: 36px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--tan);
  padding-bottom: 8px;
}
.legal-doc h3 {
  font-family: var(--f-head);
  font-size: 20px;
  color: var(--brown);
  margin: 24px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.legal-doc h4 {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
  margin: 18px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legal-doc p { margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc ul ul { margin-top: 6px; margin-bottom: 6px; }
.legal-doc a {
  color: var(--med-green);
  text-decoration: underline;
  word-break: break-word;
}
.legal-doc a:hover { color: var(--brown); }
.legal-doc strong { color: var(--brown); font-weight: 700; }
.legal-doc-copyright {
  margin-top: 36px !important;
  padding-top: 18px;
  border-top: 1px solid var(--tan);
  font-size: 13px;
  color: var(--brown-soft);
  text-align: center;
}

/* FRANCHISE - legal disclaimer footer */
.franchise-disclaimer { padding: 32px 0 !important; }
.franchise-disclaimer-body {
  max-width: 920px;
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.6;
  color: var(--brown-soft);
}
.franchise-disclaimer-body strong { color: var(--brown); }

/* SUMMER CAMP - waiver "welcome back" banner (prefilled from saved profile) */
.waiver-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 2px solid var(--mustard);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 0 auto 22px;
  max-width: 720px;
}
.waiver-welcome-inner { min-width: 0; }
.waiver-welcome-eyebrow {
  display: block;
  font-family: var(--f-head);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--med-green);
}
.waiver-welcome-body {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brown);
}
.waiver-welcome-clear {
  background: none;
  border: 0;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--med-green);
  text-decoration: underline;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.waiver-welcome-clear:hover { color: var(--brown); }
.waiver-welcome-clear.is-armed {
  color: var(--rust, #b04a2c);
  background: rgba(176, 74, 44, 0.08);
  border-radius: var(--r-sm);
}

/* SUMMER CAMP - multi-child waiver picker (shown when 2+ waivers on file) */
.waiver-picker {
  background: var(--paper);
  border: 2px solid var(--mustard);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 0 auto 22px;
  max-width: 720px;
}
.waiver-picker-eyebrow {
  display: block;
  font-family: var(--f-head);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--med-green);
}
.waiver-picker-body {
  margin: 4px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brown);
}
.waiver-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.waiver-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cream);
  border: 2px solid var(--brown);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--brown);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.waiver-picker-chip:hover {
  background: var(--mustard);
  transform: translateY(-1px);
}
.waiver-picker-chip .chip-updated {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.7;
}
.waiver-picker-new {
  background: none;
  border: 0;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--med-green);
  text-decoration: underline;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.waiver-picker-new:hover { color: var(--brown); }

/* SUMMER CAMP - expandable full-policy text (waiver step) */
.policies-key h4 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brown-soft); }
.policies-full { margin-top: 16px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--tan); border-radius: var(--r-sm); }
.policies-full h4 { margin: 0 0 10px; font-family: var(--f-head); font-size: 16px; color: var(--brown); text-transform: none; letter-spacing: 0; }
.policies-full p { font-size: 13px; line-height: 1.55; color: var(--brown); margin: 0 0 10px; }
.policies-full p:last-child { margin-bottom: 0; }
.policies-full-toggle {
  background: none; border: 0; padding: 6px 0;
  font-size: 13px; font-weight: 700;
  color: var(--med-green);
  text-decoration: underline;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.policies-full-toggle:hover { color: var(--brown); }

/* SUMMER CAMP - session picker (Step 2 on /program/seasonal) */
.camp-picked-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1.5px solid var(--mustard);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  margin: 0 auto 24px;
  max-width: 720px;
  font-size: 14px;
}
.camp-picked-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brown-soft);
  margin-right: 8px;
}
.camp-picked-dot { color: var(--brown-soft); margin: 0 6px; }

.sessions-list {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.session-card {
  background: var(--paper);
  border: 2px solid var(--tan);
  border-radius: var(--r-md);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.session-card.is-ended {
  opacity: 0.55;
  background: var(--cream);
}
.session-card.is-coming {
  opacity: 0.8;
  background: var(--cream);
  border-style: dashed;
}
.session-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.session-num {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brown-soft);
}
.session-theme {
  font-family: var(--f-head);
  font-size: 22px;
  color: var(--brown);
  line-height: 1.15;
}
.session-price {
  font-family: var(--f-head);
  font-size: 26px;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
}
.session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 14px;
  color: var(--brown-soft);
}
.session-meta strong { color: var(--brown); font-weight: 700; margin-right: 4px; }
.session-cta { margin-top: 4px; }
.session-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--brown);
  margin: 4px 0 4px;
}
.session-ended-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brown-soft);
  padding: 8px 12px;
  border: 1.5px dashed var(--tan);
  border-radius: var(--r-pill);
}

/* Checkbox rows inside the waiver form use these */
.check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--brown);
}
.conditional-row { margin-top: -6px; }

/* DATE BANNER (Step 2 packages - confirms which date was picked) */
.date-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1.5px solid var(--mustard);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  margin: 0 auto 24px;
  max-width: 720px;
  font-size: 14px;
}
.date-banner-inner {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--brown);
  min-width: 0;
}
.date-banner-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brown-soft);
}
.date-banner-value {
  font-weight: 700;
  color: var(--brown);
}
.date-banner-dot { color: var(--brown-soft); }
.date-banner-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--med-green);
  text-decoration: underline;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.date-banner-link:hover { color: var(--brown); }

/* HONORED GUESTS (up to 3 birthday kids) */
.guests-block {
  background: var(--paper);
  border: 2px dashed var(--tan);
  border-radius: var(--r-sm);
  padding: 18px;
  margin-bottom: 18px;
}
.guests-head { margin-bottom: 12px; }
.guests-title {
  margin: 0 0 4px;
  font-family: var(--f-head);
  font-size: 18px;
  color: var(--brown);
  text-transform: uppercase;
}
.guests-hint {
  margin: 0;
  font-size: 13px;
  color: var(--brown-soft);
}
.guests-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.guest-row {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--tan);
  border-radius: var(--r-sm);
  padding: 12px 14px 8px;
}
.guest-row .form-row { margin-bottom: 0; }
.guest-label {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  color: var(--brown);
  opacity: .8;
  margin-bottom: 8px;
}
.guest-remove {
  position: absolute;
  top: 10px; right: 12px;
  background: transparent;
  border: none;
  font-size: 12px; font-weight: 700;
  color: var(--brown-soft);
  cursor: pointer;
  padding: 4px 8px;
  text-transform: uppercase;
}
.guest-remove:hover { color: var(--rust, #b04a2c); text-decoration: underline; }

/* PARTY POLICIES BLOCK (Step 4) */
.policies-block {
  background: var(--paper);
  border: 2px solid var(--tan);
  border-radius: var(--r-sm);
  padding: 20px 22px;
  margin: 18px 0;
}
.policies-title {
  font-family: var(--f-head);
  font-size: 20px;
  color: var(--brown);
  text-transform: uppercase;
  margin: 0 0 4px;
}
.policies-sub {
  font-size: 13px;
  color: var(--brown-soft);
  margin: 0 0 16px;
}
.policies-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
}
.policy-item h4 {
  font-family: var(--f-head);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--med-green);
  margin: 0 0 6px;
}
.policy-item ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--brown);
  line-height: 1.55;
}
.policy-item li { margin-bottom: 4px; }

/* SIGNATURE BLOCK (Step 4) */
.sign-block {
  background: var(--cream);
  border: 2px solid var(--mustard);
  border-radius: var(--r-sm);
  padding: 20px 22px;
  margin: 18px 0;
}
.sign-title {
  font-family: var(--f-head);
  font-size: 20px;
  color: var(--brown);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.sign-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--brown);
  line-height: 1.5;
  cursor: pointer;
}
.sign-check input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--med-green);
  margin-top: 2px;
}
.sign-line { margin-top: 18px; }
/* Party wizard: each acknowledgment (policies + $150 deposit) lives in its
   own sign-group with a mustard divider between them, so it's obvious that
   there are two separate signatures to give - not one repeated by mistake. */
.sign-group {
  padding: 18px 20px;
  background: var(--paper);
  border-left: 4px solid var(--mustard);
  border-radius: 10px;
  margin-bottom: 18px;
}
.sign-group:last-child { margin-bottom: 0; }
.sign-group .sign-check { margin-bottom: 0; }
.sign-group .sign-line { margin-top: 14px; }
.sign-line-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--brown);
  margin-bottom: 8px;
  line-height: 1.4;
}
.sign-input {
  font-family: var(--f-head);
  font-size: 22px;
  letter-spacing: 0.02em;
  padding: 12px 14px;
  border: 2px solid var(--tan);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--brown);
  width: 100%;
}
.sign-input:focus {
  outline: none; border-color: var(--mustard);
}

@media (max-width: 640px) {
  .policies-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* PAY PANELS (Step 5: confirm → billing → card → success) */
.pay-panel { transition: opacity 0.18s ease; }
.pay-form { max-width: none; padding: 0; background: transparent; border: 0; }
.pay-mini-total {
  background: var(--paper);
  border-left: 4px solid var(--mustard);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--brown);
}
.pay-mini-total .due-today { color: var(--rust, #b04a2c); }

.card-head {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--paper);
  border: 1px solid var(--tan);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.card-head-total {
  font-size: 13px;
  color: var(--brown-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card-head-total strong {
  display: block;
  font-family: var(--f-head);
  font-size: 22px;
  color: var(--brown);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.card-head-brands { display: flex; gap: 6px; }
.brand-pill {
  background: var(--cream);
  border: 1px solid var(--tan);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brown);
  text-transform: uppercase;
}
.card-secure {
  font-size: 12px;
  color: var(--brown-soft);
  margin: 0 0 14px;
  line-height: 1.5;
}
.card-secure a { color: var(--med-green); }

/* SUCCESS panel */
.pay-panel-success { text-align: center; }
.success-burst {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--med-green);
  color: var(--cream);
  font-family: var(--f-head);
  font-size: 36px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.success-title {
  font-family: var(--f-head);
  font-size: 30px;
  color: var(--brown);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.success-sub {
  font-size: 15px;
  color: var(--brown);
  max-width: 520px;
  margin: 0 auto 20px;
  line-height: 1.5;
}
.success-summary {
  background: var(--paper);
  border: 1px solid var(--tan);
  border-radius: var(--r-sm);
  padding: 18px 22px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  margin: 0 auto 16px;
  max-width: 580px;
  font-size: 14px;
  color: var(--brown);
}
.success-summary > div { display: flex; flex-direction: column; }
.success-summary strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brown-soft);
  font-weight: 700;
  margin-bottom: 2px;
}
.success-foot {
  font-size: 12px;
  color: var(--brown-soft);
  margin: 0 0 16px;
  font-style: italic;
}

/* Success screen: "Send your invites - coming soon" placeholder card.
   Replace with the real invite tool link when Chris ships it. */
.success-next-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--tan);
  border: 2px solid var(--mustard);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin: 12px 0 20px;
}
.success-next-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--mustard);
  border-radius: 50%;
  color: var(--brown);
  font-size: 20px; font-weight: 700;
}
.success-next-body { flex: 1 1 auto; }
.success-next-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--burnt-orange);
  margin-bottom: 2px;
}
.success-next-title {
  font-family: var(--f-display);
  color: var(--brown);
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.success-next-title .script {
  font-family: var(--f-accent);
  color: var(--mustard);
  font-size: 0.85em;
  text-transform: none;
  display: inline-block;
  transform: rotate(-3deg);
  margin-left: 4px;
}
.success-next-sub {
  font-size: 14px; line-height: 1.5;
  color: var(--brown-soft);
  margin: 0;
}
/* Mint variant: used for the "Save the details" reminders card so it
   reads as a different kind of note than the mustard invite teaser. */
.success-next-card-mint {
  background: #EEF3E4;
  border-color: var(--med-green);
}
.success-next-card-mint .success-next-icon { background: var(--med-green); color: var(--cream); }
.success-next-card-mint .success-next-eyebrow { color: var(--med-green); }
/* Mustard script on pale mint is too low-contrast; use burnt-orange
   instead so the accent word actually reads. */
.success-next-card-mint .success-next-title .script { color: var(--burnt-orange); }
.success-rules {
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 10px 0 0;
  text-align: left;
}
.success-rule {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper);
  border: 2px solid var(--med-green);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.success-rule-num {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--med-green);
  color: var(--cream);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 22px; font-weight: 700;
  line-height: 1;
}
.success-rule-copy {
  flex: 1 1 auto;
  color: var(--brown-soft);
  font-size: 14px; line-height: 1.5;
}
.success-rule-copy strong { color: var(--brown); }
.success-rules-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--paper);
  border-left: 3px solid var(--med-green);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--brown-soft);
  font-size: 14px; line-height: 1.5;
  text-align: left;
}
.success-rules-note strong { color: var(--brown); }
/* Camp success pack list. Left-aligned, no floating bullet, checkmark
   sits tight against the copy so it always reads as one line. */
.success-packlist {
  list-style: none;
  margin: 10px 0 0; padding: 0;
  text-align: left;
  color: var(--brown-soft); font-size: 14px; line-height: 1.5;
}
.success-packlist li {
  position: relative;
  padding: 6px 0 6px 26px;
}
.success-packlist li::before {
  content: "✓";
  position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--med-green);
  color: var(--cream);
  border-radius: 50%;
  font-size: 11px; font-weight: 700;
  line-height: 1;
}
.success-packlist strong { color: var(--brown); }

@media (max-width: 640px) {
  .success-summary { grid-template-columns: 1fr; }
  .card-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .success-next-card { flex-direction: column; }
}

/* CART account-state row */
.cart-account-row {
  font-size: 13px;
  color: var(--brown-soft);
  text-align: center;
  margin: 8px 0 16px;
}
.cart-account-row strong { color: var(--brown); }
.cart-account-row a { color: var(--med-green); text-decoration: underline; }
.cart-account-row a:hover { color: var(--brown); }
.cart-account-row:empty { display: none; }

/* CONFIRM ORDER (Step 4) */
.confirm-card {
  max-width: 820px; margin: 0 auto;
  background: var(--cream);
  border: 2px solid var(--tan);
  border-radius: var(--r-md);
  padding: 32px;
}
.confirm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--brown);
  margin-bottom: 22px;
}
.confirm-table thead th {
  background: var(--paper);
  text-align: left;
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--brown);
  padding: 10px 12px;
  border-bottom: 2px solid var(--tan);
}
.confirm-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--tan);
  vertical-align: top;
}
.confirm-table .ct-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.confirm-desc-title { font-weight: 700; margin-bottom: 4px; }
.confirm-desc-line { color: var(--brown-soft); font-size: 13px; line-height: 1.5; }
.confirm-edit-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--med-green);
  text-decoration: underline;
  background: none; border: 0; padding: 0; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.confirm-deposit-note {
  font-size: 13px; color: var(--brown-soft);
  margin: 0 0 22px;
}
.confirm-totals-wrap {
  display: flex; justify-content: flex-end;
  margin-bottom: 22px;
}
.confirm-totals {
  min-width: 280px;
  background: var(--paper);
  border: 1px solid var(--tan);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--brown);
}
.confirm-totals-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.confirm-totals-row[hidden] { display: none; }
/* Belt-and-suspenders: any class with its own display: rule silently
   overrides the UA [hidden] { display: none } default. Enforce it. */
[hidden] { display: none !important; }
.confirm-totals-row.is-total {
  border-top: 1px solid var(--tan);
  margin-top: 6px; padding-top: 8px;
  font-weight: 700;
}
.confirm-totals-row.is-due {
  color: var(--rust, #b04a2c);
  font-weight: 700;
}
.confirm-totals-row.is-discount {
  color: var(--burnt-orange);
  font-weight: 600;
}

/* ---------- Promo code block on Confirm Order ---------- */
.promo-code-block {
  background: var(--paper);
  border: 1px dashed var(--tan);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  margin: 0 0 22px;
}
.promo-code-label {
  display: block;
  font-weight: 700;
  color: var(--brown);
  font-size: 14px;
  margin-bottom: 8px;
}
.promo-code-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.promo-code-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--tan);
  border-radius: var(--r-sm);
  font: inherit;
  color: var(--brown);
  background: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.promo-code-row input:disabled {
  background: var(--paper);
  color: var(--brown-soft);
  cursor: not-allowed;
}
.promo-code-row .btn { padding: 10px 20px; font-size: 14px; }
.promo-code-remove {
  background: transparent;
  border: 0;
  color: var(--burnt-orange);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 6px 10px;
}
.promo-code-remove:hover { color: var(--brown); }
.promo-code-msg {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.promo-code-msg.is-error { color: var(--burnt-orange); }
.promo-code-msg.is-ok    { color: var(--green); font-weight: 600; }
.promo-code-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--brown);
  opacity: .75;
  line-height: 1.4;
}
.promo-code-hint a {
  color: var(--med-green);
  font-weight: 600;
  text-decoration: none;
}
.promo-code-hint a:hover { text-decoration: underline; }

/* Persistent form-error banner + inline highlight for waiver forms.
   Native browser tooltips are too small and dismiss on click, so we
   layer these on top: banner at top of the form summarizes what's
   missing, .is-invalid gives every unfilled field an orange border. */
.form-error-banner {
  background: #fff2e8;
  border: 2px solid var(--burnt-orange);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 20px;
  color: var(--burnt-orange);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
}
.form-error-banner strong { color: var(--burnt-orange); }
.form-error-banner ul { margin: 6px 0 0; padding-left: 20px; }
.form-error-banner li { margin: 2px 0; }
/* Invalid-field highlight - un-scoped so it works on waiver + booking +
   any future form. Real red (not burnt orange) so the boxes actually pop
   without the customer scrolling back to the banner to hunt. */
.is-invalid,
.is-invalid input,
.is-invalid select,
.is-invalid textarea {
  border-color: #d13a2c !important;
  outline-color: #d13a2c;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border: 3px solid #d13a2c !important;
  box-shadow: 0 0 0 3px rgba(209, 58, 44, 0.18);
  background: #fff0ee !important;
}
.promo-code-note {
  margin: 8px 0 0;
  text-align: right;
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
}
@media (max-width: 640px) {
  .promo-code-row .btn { flex: 1 1 auto; }
  .promo-code-note { text-align: left; }
}

.confirm-actions {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .confirm-card { padding: 20px; }
  .confirm-table thead { display: none; }
  .confirm-table, .confirm-table tbody, .confirm-table tr, .confirm-table td { display: block; width: 100%; }
  .confirm-table tbody td { border-bottom: 0; padding: 4px 0; }
  .confirm-table tr { border-bottom: 1px solid var(--tan); padding: 14px 0; }
  .confirm-table .ct-num { text-align: left; }
  .confirm-table .ct-num::before { content: attr(data-label) ": "; font-weight: 700; }
  .confirm-totals-wrap { justify-content: stretch; }
  .confirm-totals { width: 100%; min-width: 0; }
}

@media (max-width: 640px) {
  .form-row,
  .form-row.form-row-city-state-zip { grid-template-columns: 1fr; }
}

/* ---------- HERO PICK-LOCATION (party corp mode: direct buttons in the hero) ---------- */
.hero-pick-loc { margin-top: 24px; max-width: 320px; }
.hero-pick-loc .eyebrow {
  font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.hero-pick-loc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
/* On the orange acacia hero, override the default green pick-loc-btn with a
   cream + brown look that reads warm and party-appropriate. */
.hero-pick-loc-grid .pick-loc-btn {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--brown);
  border: 2px solid var(--brown);
}
.hero-pick-loc-grid .pick-loc-btn:hover {
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.hero-pick-loc-grid .pick-loc-btn-soon {
  background: transparent;
  color: var(--brown);
  border: 2px dashed var(--brown);
  opacity: 0.85;
}
/* Mustard variant: for pages with a light/paper hero (Open Play) where cream
   buttons blend in. Mustard + brown pops against paper. */
.hero-pick-loc-mustard .pick-loc-btn {
  background: var(--mustard);
  color: var(--brown);
  border: 2px solid var(--brown);
}
.hero-pick-loc-mustard .pick-loc-btn:hover {
  background: var(--mustard);
  filter: brightness(1.05);
}
.hero-pick-loc-mustard .pick-loc-btn-soon {
  background: transparent;
  border: 2px dashed var(--brown);
}
.hero-pick-loc-grid .pick-loc-city { font-size: 15px; }
/* Corporate homepage hero: picker replaces the old marketing CTA row.
   Room to breathe, so bump the tiles a touch and let them stretch wider
   than the tight 320px used on the party corp-mode hero. */
.hero-pick-loc-corp { max-width: 460px; margin-top: 28px; }
.hero-pick-loc-corp .eyebrow { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 12px; }
.hero-pick-loc-corp .pick-loc-btn { padding: 12px 16px; border-radius: 12px; }
.hero-pick-loc-corp .pick-loc-city { font-size: 18px; font-weight: 700; }
.hero-pick-loc-corp .pick-loc-state { font-size: 12px; opacity: 0.85; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-pick-loc-corp .hero-pick-loc-grid { gap: 10px; }
.hero-pick-loc-grid .pick-loc-state { font-size: 11px; opacity: 0.7; }
/* On orange hero pages (Party, Seasonal), the default cream tiles blend with the
   Corporate-site tan bar above. Green + brown pops against orange the same way
   our brand-primary green button does. */
.prog-hero-orange .hero-pick-loc-grid .pick-loc-btn {
  background: var(--med-green);
  color: var(--cream);
  border: 2px solid var(--brown);
}
.prog-hero-orange .hero-pick-loc-grid .pick-loc-btn:hover {
  background: var(--med-green);
  filter: brightness(1.08);
}
.prog-hero-orange .hero-pick-loc-grid .pick-loc-btn-soon {
  background: transparent;
  color: var(--brown);
  border: 2px dashed var(--brown);
}

/* Info-price single-column variant (used when pick-loc has been moved out). */
.info-price.info-price-single { grid-template-columns: 1fr; }

/* ---------- PLANO PARTY SPECIALS ---------- */
.party-specials-section {
  background: var(--tan);
  border-top: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
}
.specials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0 0;
}
.special-card {
  background: var(--cream);
  border: 3px solid var(--brown);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  display: flex; flex-direction: column;
  gap: 6px;
  position: relative;
  box-shadow: 4px 4px 0 var(--brown);
}
.special-card-friday   { background: #FFEACC; }  /* warm cream */
.special-card-saturday { background: var(--mustard); }
.special-card-sunday   { background: var(--tan); }
.special-day {
  font-family: var(--f-accent);
  font-size: clamp(22px, 2.5vw, 30px);
  color: var(--burnt-orange);
  transform: rotate(-2deg);
  line-height: 1;
}
.special-offer {
  font-family: var(--f-head);
  font-size: clamp(28px, 3.5vw, 44px);
  color: var(--brown);
  text-transform: uppercase;
  line-height: 1;
  margin: 6px 0;
}
.special-detail {
  color: var(--brown);
  font-size: 14px;
  line-height: 1.45;
}
.specials-note {
  text-align: center;
  margin: 24px 0 0;
  color: var(--brown);
  font-weight: 600;
}
.specials-note a { color: var(--burnt-orange); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .specials-grid { grid-template-columns: 1fr; }
}

/* Compact chip-strip variant used above Step 2 in wizard mode. */
.specials-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px;
  background: var(--tan);
  border: 2px solid var(--brown);
  border-radius: var(--r-pill);
  padding: 12px 20px;
  margin: 0 0 24px;
}
.specials-strip-label {
  font-family: var(--f-head);
  color: var(--brown);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.specials-strip-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cream);
  border: 2px solid var(--brown);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--brown);
  font-size: 13px;
  font-weight: 600;
}
.specials-strip-chip strong {
  font-family: var(--f-head);
  color: var(--burnt-orange);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.specials-chip-saturday { background: var(--mustard); }

/* Corp-only Party Details variant: photo on the left, text on the right. */
.info-price.info-price-corp-details { grid-template-columns: 1fr 1.4fr; align-items: center; }
.info-price-photo {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 3px solid var(--brown);
  box-shadow: var(--shadow);
  aspect-ratio: 3/4;
}
.info-price-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .info-price.info-price-corp-details { grid-template-columns: 1fr; }
  .info-price-photo { aspect-ratio: 4/3; max-width: 420px; margin: 0 auto; }
}

/* ---------- MOBILE BOTTOM NAV ---------- */
/* Persistent 4-icon bar at the bottom of the viewport on phones.
   Hidden on tablet/desktop where the top nav is enough. */
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--brown);
    color: var(--cream);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.15);
  }
  .bottom-nav-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    color: inherit;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.15s ease, color 0.15s ease;
  }
  .bottom-nav-item svg { width: 22px; height: 22px; display: block; }
  .bottom-nav-item.is-active { opacity: 1; color: var(--mustard); }
  .bottom-nav-item:active,
  .bottom-nav-item:focus-visible { opacity: 1; }
  /* Add padding to page bottom so content isn't hidden behind the bar. */
  body { padding-bottom: 72px; }
}

/* ---------- PICK YOUR LOCATION card (program pages) ---------- */
/* Shown on corporate program pages so parents pick a store to book. */
.pick-loc-band {
  background: var(--cream);
  padding: 60px 20px;
}
.pick-loc-card {
  max-width: 820px; margin: 0 auto;
  background: var(--paper);
  border: 3px solid var(--brown);
  border-radius: 22px;
  padding: 44px 34px;
  text-align: center;
}
.pick-loc-card .eyebrow { color: var(--orange); font-weight: 700; }
.pick-loc-card h2 {
  color: var(--brown);
  margin: 6px 0 8px;
  font-size: clamp(28px, 3.6vw, 42px);
}
.pick-loc-card h2 .script { color: var(--burnt-orange); }
.pick-loc-card p {
  color: var(--brown-soft, var(--brown));
  margin: 0 0 26px;
  font-size: 16px;
}
.pick-loc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pick-loc-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 22px 14px;
  background: var(--green);
  color: var(--paper);
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pick-loc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  background: var(--green-dark, var(--green));
}
.pick-loc-city { font-size: 18px; }
.pick-loc-state { font-size: 12px; opacity: .85; letter-spacing: .04em; text-transform: uppercase; }
.pick-loc-btn-soon {
  background: var(--tan);
  color: var(--brown);
}
.pick-loc-btn-soon:hover { background: var(--tan-dark, var(--tan)); }
@media (max-width: 720px) {
  .pick-loc-grid { grid-template-columns: repeat(2, 1fr); }
  .pick-loc-card { padding: 34px 22px; }
}

/* ---------- MERGED variant: pick-loc buttons inside the info-price card ---------- */
.info-price-pick-loc { text-align: left; }
.info-price-pick-loc .eyebrow {
  color: var(--orange); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.pick-loc-inline-title {
  font-family: var(--f-head);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  color: var(--brown);
  margin: 0 0 18px;
}
.pick-loc-inline-title .script {
  font-family: var(--f-accent);
  color: var(--orange);
  font-size: 0.7em;
  display: inline-block;
  transform: rotate(-3deg);
  text-transform: none;
}
.pick-loc-grid-stack { grid-template-columns: 1fr; gap: 10px; }
.pick-loc-grid-stack .pick-loc-btn { padding: 16px 18px; }
.pick-loc-grid-stack .pick-loc-city { font-size: 17px; }

/* Solo variant: flat inline block that continues its parent section without
   a separate card container - reads as one flow, not two. */
.pick-loc-solo {
  max-width: 720px;
  margin: 44px auto 0;
  padding: 28px 0 0;
  border-top: 1px dashed rgba(61, 32, 26, 0.25);
  color: var(--brown);
  text-align: center;
}
.pick-loc-solo .eyebrow {
  color: var(--orange); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.pick-loc-solo .pick-loc-inline-title { text-align: center; }
.pick-loc-solo-lead {
  color: var(--brown); font-size: 15px; line-height: 1.55;
  margin: 0 0 24px;
}
.pick-loc-solo .pick-loc-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px) {
  .pick-loc-solo { padding: 28px 22px; }
  .pick-loc-solo .pick-loc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ SR_kidPicker ============
   Small tap-a-child picker used by every wizard that needs a kid.
   Jodi's UX guardrail (2026-07-23): parents must explicitly tap a
   card so muscle memory can't book the wrong child. */
.kidpick { background: var(--paper); border: 1px solid var(--tan); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.kidpick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.kidpick-title { font-family: var(--f-head), 'MouseMemoirs', sans-serif; color: var(--brown); font-size: 22px; letter-spacing: .3px; text-transform: uppercase; line-height: 1; }
.kidpick-waiver { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-decoration: none; letter-spacing: .04em; text-transform: uppercase; }
.kidpick-waiver.is-ok  { background: var(--med-green); color: var(--cream); }
.kidpick-waiver.is-need { background: var(--mustard); color: var(--brown); border: 1px solid var(--brown); }
.kidpick-waiver.is-need:hover { background: var(--orange); color: var(--cream); }
.kidpick-hint { color: var(--brown); opacity: .7; font-size: 13px; margin: 0 0 10px; }
.kidpick-row  { display: flex; gap: 10px; flex-wrap: wrap; }
.kidpick-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 14px; min-width: 130px;
  background: var(--cream); border: 2px solid var(--tan); border-radius: 12px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background .12s, border-color .12s, transform .08s;
}
.kidpick-card:hover { border-color: var(--med-green); background: var(--paper); }
.kidpick-card:active { transform: translateY(1px); }
.kidpick-card.is-picked { background: var(--med-green); border-color: var(--brown); color: var(--cream); }
.kidpick-card.is-picked .kidpick-meta { color: var(--cream); opacity: .9; }
.kidpick-name { font-weight: 700; font-size: 15px; color: var(--brown); }
.kidpick-card.is-picked .kidpick-name { color: var(--cream); }
.kidpick-meta { font-size: 12px; color: var(--brown); opacity: .75; }
.kidpick-allergy { display: inline-block; margin-top: 4px; padding: 2px 8px; background: var(--mustard); color: var(--brown); border-radius: 999px; font-size: 11px; font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kidpick-card-add { border-style: dashed; background: transparent; }
.kidpick-card-add:hover { background: var(--cream); }
.kidpick-add-plus { font-family: var(--f-head); font-size: 22px; color: var(--med-green); line-height: 1; }
.kidpick-form { margin-top: 12px; padding: 12px; background: var(--cream); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.kidpick-form-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.kidpick-form-row label,
.kidpick-form-full { display: flex; flex-direction: column; font-size: 12px; color: var(--brown); font-weight: 700; }
.kidpick-form-row input,
.kidpick-form-full input { padding: 8px 10px; border: 1px solid var(--tan); border-radius: 8px; font-size: 14px; margin-top: 3px; font-family: inherit; }
.kidpick-form-actions { display: flex; gap: 8px; }
.kidpick-picked { margin-top: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--med-green) 12%, transparent); border-radius: 8px; color: var(--brown); font-size: 13px; font-weight: 600; }
.kidpick-empty { padding: 14px 16px; background: var(--cream); border: 1px dashed var(--tan); border-radius: 12px; margin-bottom: 18px; }
.kidpick-empty-eyebrow { font-family: var(--f-head); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--med-green); font-weight: 700; margin-bottom: 4px; }
.kidpick-empty-body { color: var(--brown); font-size: 14px; }

/* ===== Sticky-header aware anchor scrolling =====================
   The here-bar + main nav together stick to the top of every page,
   ~176px on mobile / ~112px on desktop. Without scroll-margin-top,
   clicking a #step-N or #calendar anchor scrolls the section header
   UNDER the sticky bars, clipping the title. Adding it to any
   section that has an id gives the browser room to breathe. */
section[id],
[id^="step-"],
#calendar {
  scroll-margin-top: 120px;
}
@media (max-width: 720px) {
  section[id],
  [id^="step-"],
  #calendar {
    scroll-margin-top: 190px;
  }
}

/* =========================================================================
   FOOTER NEWSLETTER COLUMN
   Rendered by site.js as the last cell of .footer-top. Content and the Keap
   form ids live in the NEWSLETTER config there, not here. Was a full-width
   dark band above the footer until 2026-09-02; the colours below are the
   footer's tan ground, not the old green one.
   ========================================================================= */
.footer-nl .nl-sub {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--brown);
  opacity: .85;
  margin: 0 0 4px;
}
.nl-row { display: flex; flex-direction: column; gap: 8px; }
.nl-field { margin: 0; min-width: 0; }
.nl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nl-field input {
  width: 100%;
  font-family: var(--f-body);
  font-size: 15px;
  padding: 11px 16px;
  color: var(--brown);
  background: var(--paper);
  border: 2px solid var(--brown);
  border-radius: var(--r-pill);
}
.nl-field input::placeholder { color: rgba(61, 32, 26, 0.5); }
.nl-field input:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.nl-btn {
  width: 100%; justify-content: center;
  background: var(--mustard); border-color: var(--brown); color: var(--brown);
}
.nl-btn:hover { background: var(--mustard-hi); border-color: var(--brown); color: var(--brown); }
.nl-btn:disabled { opacity: 0.65; cursor: default; }
.nl-done h3 {
  font-family: var(--f-head);
  text-transform: uppercase;
  color: var(--burnt-orange);
  font-size: 22px;
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}
.nl-done p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--brown); opacity: .85; }
.nl-done a { color: var(--burnt-orange); font-weight: 700; }
.nl-sink { display: none; }

/* =========================================================================
   DASHED CARD OUTLINES - shared playful treatment
   =========================================================================
   Same cream page as every other program page. The only difference is that
   the information blocks are outlined in dashed brand colour instead of flat
   tan or brown, cycling mustard / orange / green so it reads as playful
   rather than uniform. Dashes go solid on hover, so a card you are about to
   click firms up.

   Opt a page in by putting `dash-cards` on its <body>. Used by Kids' Night
   Out and by the Seasonal Camps age groups, so the two read as one family.
   Page-specific extras stay under their own class further down.
   ========================================================================= */
body.dash-cards .session-card {
  border-style: dashed;
  border-width: 2.5px;
  transition: border-color .2s ease, border-style .2s ease, transform .2s ease;
}
body.dash-cards .sessions .session-card:nth-child(3n+1),
body.dash-cards .sessions-list .session-card:nth-child(3n+1) { border-color: var(--mustard); }
body.dash-cards .sessions .session-card:nth-child(3n+2),
body.dash-cards .sessions-list .session-card:nth-child(3n+2) { border-color: var(--orange); }
body.dash-cards .sessions .session-card:nth-child(3n+3),
body.dash-cards .sessions-list .session-card:nth-child(3n+3) { border-color: var(--green); }
body.dash-cards .session-card:hover {
  border-style: solid;
  transform: translateY(-2px);
}
/* An ended session shouldn't look like a live one you can still grab. */
/* A closed or not-yet-open session must not wear the same bright dashes as a
   bookable one. These need the same specificity as the nth-child cycling
   above, or the colour wins and every sold-out week looks available. */
body.dash-cards .sessions .session-card.is-ended,
body.dash-cards .sessions-list .session-card.is-ended,
body.dash-cards .sessions .session-card.is-coming,
body.dash-cards .sessions-list .session-card.is-coming {
  border-color: var(--tan);
  border-style: dashed;
}

body.dash-cards .why-card {
  border-style: dotted;
  border-width: 3px;
}
body.dash-cards .why-grid .why-card:nth-child(3n+1) { border-color: var(--green); }
body.dash-cards .why-grid .why-card:nth-child(3n+2) { border-color: var(--mustard); }
body.dash-cards .why-grid .why-card:nth-child(3n+3) { border-color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  body.dash-cards .session-card { transition: border-color .2s ease; }
  body.dash-cards .session-card:hover { transform: none; }
}

/* "What to expect" picks up the same dashed language as the session cards, so
   the page reads as one idea rather than a plain block above playful ones. */
/* The section labels sit on a flat brown rule. Dashed brand colour instead. */
/* 14px in an outlined pill reads smaller than 14px in a plain list - the
   border crowds it. Size the whole block up so it is comfortable. */
body.kno-dash .info-price-text p { font-size: 17px; line-height: 1.6; }

/* One short card, then the CTA. Everything that used to be spelled out here
   is answered properly in the FAQ below, so the card stays brief and points
   there rather than repeating it. */
body.kno-dash .kno-card-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 26px;
}
body.kno-dash .kno-faq-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--burnt-orange);
  text-decoration: none;
  border-bottom: 2px dashed var(--orange);
  padding-bottom: 2px;
}
body.kno-dash .kno-faq-link:hover { border-bottom-style: solid; }

/* The camp wizard renders the same three age groups as .pkg-fc rather than
   .session-card, so it needs the same treatment to match the corporate view
   above it and the Kids' Night Out cards elsewhere. */
body.dash-cards .pkg-fc {
  border-style: dashed;
  border-width: 2.5px;
  transition: border-color .2s ease, transform .2s ease;
}
body.dash-cards .pkg-figma-grid .pkg-fc:nth-child(3n+1) { border-color: var(--mustard); }
body.dash-cards .pkg-figma-grid .pkg-fc:nth-child(3n+2) { border-color: var(--orange); }
body.dash-cards .pkg-figma-grid .pkg-fc:nth-child(3n+3) { border-color: var(--green); }
body.dash-cards .pkg-fc:hover { border-style: solid; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  body.dash-cards .pkg-fc { transition: border-color .2s ease; }
  body.dash-cards .pkg-fc:hover { transform: none; }
}

/* Hours status in the Visit us card. Green means "you can walk in now" and
   nothing else - a parties-only Saturday stays neutral, because green there
   would invite a visit that gets turned away at the door. */
[data-hours-status] { font-weight: 700; }
[data-hours-status].is-open { color: var(--med-green); }
[data-hours-status].is-shut { color: var(--brown); opacity: .72; }

/* The Livermore build photo is portrait in a 4:3 slot, so cover crops top and
   bottom. Centred, it lost the blueprints on the table - which are the most
   interesting thing in the shot and the clearest signal that this store is
   genuinely being built. Bias the crop downward. */
.loc-detail-img-low img { object-position: center 78%; }

/* Shown under a session list when nothing in it can be booked. Deliberately
   quiet: it is information, not an error. */
.sessions-empty {
  max-width: 900px; margin: 18px auto 0; padding: 22px 26px;
  border: 2px dashed var(--tan); border-radius: var(--r-md);
  background: var(--paper); text-align: center;
}
.sessions-empty-lead {
  margin: 0 0 6px; font-weight: 700; font-size: 17px; color: var(--brown);
}
.sessions-empty-sub { margin: 0; font-size: 15px; color: var(--brown-soft); }
.sessions-empty-sub a {
  color: var(--burnt-orange); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--mustard);
  text-underline-offset: 3px;
}

/* =========================================================================
   ERROR PAGES  (Laminas partials: error/404.phtml, error/index.phtml)
   =========================================================================
   Styled entirely from here. Not one line of those partials is touched, so
   every PHP variable stays exactly as Jeff wrote it. Both partials wrap
   their whole output in .info-details, which is all the hook we need.

   Two audiences share one page:
     - A parent who mistyped a URL sees the heading, the message and the
       reason. That part is warm and on brand.
     - A developer with display_exceptions on also sees class names, file
       paths and stack traces. That part is deliberately quiet and technical,
       so it never competes with the message a parent came for.

   Header and footer arrive later. Until then this block centres itself and
   stands on its own.
   ========================================================================= */
.info-details {
  max-width: 760px;
  margin: 56px auto;
  padding: 40px 34px 34px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  color: var(--brown);
  font-family: var(--f-body);
  line-height: 1.55;
}
/* ---- The parent-facing half: card, eyebrow, lede, button, links, phones ---- */
.info-panel { position: relative; }
.info-panel::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -14px;
  width: 132px;
  height: 132px;
  background: url('../images/newsletter/giraffe.png') no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  animation: infoBob 3.4s ease-in-out infinite;
}
@keyframes infoBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .info-panel::after { animation: none; }
}

.info-eyebrow {
  font-family: var(--f-accent);
  color: var(--burnt-orange);
  font-size: 26px;
  line-height: 1;
  margin: 0 0 8px;
  transform: rotate(-2deg);
  display: inline-block;
}
.info-details .info-lede {
  font-size: 18px;
  color: var(--brown-soft);
  margin: 12px 0 0;
  max-width: 52ch;
}
.info-actions { margin: 24px 0 0; }
.info-btn {
  display: inline-block;
  background: var(--mustard);
  color: var(--brown);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  border: 2px solid var(--mustard);
  text-decoration: none;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.info-btn:hover { transform: translateY(-2px); background: var(--mustard-hi); box-shadow: 0 12px 28px rgba(61,32,26,.22); }
.info-btn:focus-visible { outline: 3px solid var(--burnt-orange); outline-offset: 3px; }

.info-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; max-width: 78%; }
.info-links a {
  background: var(--tan);
  color: var(--brown);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.info-links a:hover { background: var(--paper); border-color: var(--med-green); }
.info-links a:focus-visible { outline: 3px solid var(--burnt-orange); outline-offset: 2px; }

.info-help {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--tan);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  max-width: 78%;
}
.info-help-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--med-green);
  width: 100%;
}
.info-help a { color: var(--brown); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.info-help a:hover { color: var(--burnt-orange); text-decoration: underline; }

/* The framework's own words. Kept, because Jeff needs them. Made small and
   grey, because a parent does not. */
.info-details .info-tech {
  margin: 30px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--tan);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(61, 32, 26, .42);
  max-width: 78%;
}
.info-tech-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(61, 32, 26, .32);
  margin-bottom: 2px;
}

.info-details h1 {
  font-family: var(--f-head);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--brown);
  font-size: clamp(34px, 6vw, 52px);
  line-height: .98;
  margin: 0 0 6px;
}
.info-details p {
  font-size: 17px;
  color: var(--brown-soft);
  margin: 0 0 14px;
  max-width: 60ch;
}
@media (max-width: 720px) {
  .info-panel::after { display: none; }
  .info-links, .info-help, .info-details .info-tech { max-width: 100%; }
  .info-details { margin: 28px 16px; padding: 30px 22px 26px; }
  .info-btn { display: block; text-align: center; }
}

.info-details hr {
  border: 0;
  height: 3px;
  width: 74px;
  border-radius: 999px;
  background: var(--mustard);
  margin: 28px 0 22px;
}

/* ---- The technical half ---- */
.info-details h2,
.info-details h3 {
  font-family: var(--f-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  color: var(--med-green);
  margin: 22px 0 10px;
}
.info-details dl { margin: 0 0 16px; }
.info-details dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey, #6B5A4E);
  margin-top: 12px;
}
.info-details dd { margin: 6px 0 0; }
.info-details pre {
  background: var(--tan);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--brown);
  overflow-x: auto;              /* stack traces scroll, the page never does */
  white-space: pre;
}
.info-details ul.list-unstyled { list-style: none; margin: 0; padding: 0; }
.info-details ul.list-unstyled > li {
  border-top: 1px solid var(--tan);
  padding-top: 14px;
  margin-top: 14px;
}

@media (max-width: 560px) {
  .info-details { margin: 28px 16px; padding: 28px 20px 24px; border-radius: var(--r-md); }
}