/* =========================================================
   10TH PLANET PASADENA — TORN-PAPER FIGHT-POSTER REDESIGN
   Cream · Deep Forest Green · Ink Black
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* Paper / Ink */
  --paper:          #EFE6D0;
  --paper-warm:     #E8DDC1;
  --paper-deep:     #D9CBA6;
  --paper-shadow:   #BFAE83;
  --ink:            #0E0E0C;
  --ink-soft:       #242320;
  --ink-muted:      #5A574E;
  --ink-subtle:     #8A8775;
  /* Brand — 10P Pasadena navy + yellow (from their logo) */
  --navy:           #223855;
  --navy-deep:      #15243B;
  --navy-bright:    #34547E;
  --yellow:         #FFEE03;
  --yellow-deep:    #E6D600;
  --yellow-soft:    #FFF04D;
  /* Legacy aliases — keep green/hot names so existing selectors still work */
  --green:          var(--navy);
  --green-deep:     var(--navy-deep);
  --green-bright:   var(--navy-bright);
  --green-glow:     rgba(34, 56, 85, 0.22);
  --hot:            var(--yellow);
  --hot-deep:       var(--yellow-deep);
  --mustard:        var(--yellow);

  /* Semantic (keep aliases so legacy class hooks still work) */
  --bg:             var(--paper);
  --bg-card:        var(--paper-warm);
  --bg-elevated:    #FFFFFF;
  --text-primary:   var(--ink);
  --text-muted:     var(--ink-muted);
  --text-subtle:    var(--ink-subtle);
  --text-on-light:  var(--ink);
  --text-on-green:  #F3EBD3;
  --accent:         var(--hot);
  --accent-hover:   var(--hot-deep);
  --secondary:      var(--green);
  --secondary-deep: var(--green-deep);
  --border:         rgba(14, 14, 12, 0.14);
  --border-strong:  rgba(14, 14, 12, 0.32);

  /* Layout */
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-ink: 6px 6px 0 var(--ink);
  --shadow-ink-sm: 3px 3px 0 var(--ink);
  --shadow-ink-lg: 10px 10px 0 var(--ink);
  --maxw: 1240px;

  /* Type */
  --f-display: "Bowlby One", "Archivo Black", Impact, sans-serif;
  --f-marker:  "Permanent Marker", "Caveat", cursive;
  --f-hand:    "Caveat", cursive;
  --f-body:    "Archivo", "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* PAPER TEXTURE — subtle grain layer over the whole body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.55;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0,0,0,0.08) 100%);
}
main, nav, footer, section, header { position: relative; z-index: 3; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

/* ---------- TYPE ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  filter: url(#rough-ink);
}
.display.h-xl  { font-size: clamp(3rem, 8vw, 6.5rem); }
.display.h-lg  { font-size: clamp(2.25rem, 5.5vw, 4.25rem); }
.display.h-md  { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }

h1.display { font-size: clamp(3.2rem, 9vw, 7.5rem); }
h2.display { font-size: clamp(2.4rem, 6vw, 4.75rem); }
h3.display { font-size: clamp(1.5rem, 2.6vw, 2rem); }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.text-muted { color: var(--ink-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-marker);
  font-size: 1.1rem;
  color: var(--green);
  letter-spacing: 0.04em;
  text-transform: none;
}
.eyebrow::before {
  content: "";
  width: 38px;
  height: 3px;
  background: var(--green);
  transform: rotate(-1.5deg);
  display: inline-block;
  border-radius: 2px;
}

.accent {
  position: relative;
  display: inline-block;
  color: var(--hot);
  transform: rotate(-1.5deg);
}
.accent::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -0.08em;
  height: 0.22em;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 Q 40 2 80 8 T 160 8 T 198 6' stroke='%230E0E0C' stroke-width='5' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  z-index: -1;
}
.on-green .accent::after,
.page-header .accent::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 Q 40 2 80 8 T 160 8 T 198 6' stroke='%23EFE6D0' stroke-width='5' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

/* Handwritten small label */
.hand {
  font-family: var(--f-marker);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2.5px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s;
  box-shadow: var(--shadow-ink-sm);
  position: relative;
  min-height: 48px;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn i, .btn svg { width: 18px; height: 18px; stroke-width: 2.5; }

.btn-primary {
  background: var(--hot);
  color: #FFF7E8;
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--hot-deep); color: #FFF7E8; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-block { width: 100%; }

/* Green-section variants (auto-swap) */
.on-green .btn-ghost,
.page-header .btn-ghost {
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 3px 3px 0 var(--paper);
}
.on-green .btn-ghost:hover,
.page-header .btn-ghost:hover {
  background: var(--paper);
  color: var(--green-deep);
}

/* ---------- SVG FILTERS (for rough-edge type) ---------- */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 2.5px solid var(--ink);
  transition: box-shadow 0.2s;
}
.nav.scrolled {
  box-shadow: 0 4px 0 var(--ink), 0 8px 20px rgba(0,0,0,0.15);
}
/* Torn-paper edge under nav */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'><path d='M0 0 L1200 0 L1200 6 Q1180 3 1160 9 T1120 6 T1080 11 T1040 5 T1000 9 T960 4 T920 10 T880 6 T840 11 T800 5 T760 9 T720 4 T680 10 T640 7 T600 12 T560 6 T520 10 T480 4 T440 9 T400 5 T360 11 T320 6 T280 10 T240 4 T200 9 T160 5 T120 11 T80 6 T40 10 T0 5 Z' fill='%23EFE6D0'/></svg>") center top/100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(14,14,12,0.55));
  z-index: 1;
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-brand { display: inline-flex; align-items: center; }
.nav-logo { height: 48px; width: auto; filter: drop-shadow(2px 2px 0 var(--ink)); transform: rotate(-1deg); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  padding: 8px 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: color 0.15s;
}
.nav-links a::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 3px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav-links a:hover::before,
.nav-links a.active::before { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 12px 18px; font-size: 0.82rem; min-height: 44px; }

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border: 2.5px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
}
.nav-toggle svg, .nav-toggle i { width: 22px; height: 22px; }

/* Mobile nav panel */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--paper);
  border-top: 2.5px solid var(--ink);
  flex-direction: column;
  padding: 24px 28px 40px;
  gap: 4px;
  overflow-y: auto;
  z-index: 99;
}
.nav-mobile.open,
.nav.open .nav-mobile { display: flex; }
.nav-mobile a {
  font-family: var(--f-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1.5px dashed rgba(14,14,12,0.2);
  filter: url(#rough-ink);
}
.nav-mobile a.active { color: var(--hot); }
.nav-mobile .btn { margin-top: 16px; font-size: 1rem; }
.mobile-contact {
  font-family: var(--f-marker);
  font-size: 1rem;
  color: var(--green);
  padding-top: 14px;
  text-align: center;
}

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta .btn:not(.nav-toggle):not([class*="toggle"]) { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Booking-page simplified nav */
.nav-booking .nav-cta,
.nav-booking .nav-links,
.nav-booking .nav-toggle,
.nav-booking .nav-mobile { display: none !important; }
.nav-booking .nav-inner { justify-content: center; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  background: var(--paper);
  padding: 80px 0 120px;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  /* Grid doodle pattern */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,14,12,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,14,12,0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: center;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 85% 70% at 60% 50%, black 40%, transparent 100%);
  z-index: 0;
}
.hero .container { position: relative; z-index: 4; }

.hero-bg {
  position: absolute;
  top: 40px; right: -2%; bottom: 60px;
  width: 56%;
  z-index: 2;
  pointer-events: none;
  clip-path: polygon(
    6% 2%, 14% 0%, 22% 3%, 30% 1%, 38% 4%, 46% 1%, 54% 3%, 62% 0%, 70% 2%, 78% 0%, 86% 3%, 94% 1%, 100% 4%,
    100% 96%, 94% 98%, 86% 99%, 78% 97%, 70% 100%, 62% 98%, 54% 100%, 46% 97%, 38% 99%, 30% 98%, 22% 100%, 14% 97%, 6% 98%, 2% 96%,
    0% 50%, 3% 22%);
  filter: drop-shadow(-8px 8px 0 var(--ink));
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(15%) contrast(1.05);
  background: var(--green-deep);
}
.hero-bg::after {
  /* Green tint over photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30, 74, 58, 0.2) 0%, rgba(200, 53, 30, 0.08) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero-content {
  max-width: 620px;
  position: relative;
}
.hero-kicker {
  display: inline-block;
  font-family: var(--f-marker);
  font-size: 1rem;
  color: var(--paper);
  background: var(--green);
  padding: 6px 16px;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 24px;
}

.hero h1.display {
  margin-bottom: 22px;
  color: var(--ink);
}

.hero .lead {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 52ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.hero-cta-block {
  margin-top: 8px;
  padding: 24px 26px 28px;
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  display: inline-block;
  max-width: 560px;
  position: relative;
  transform: rotate(-0.6deg);
}
.hero-cta-block::before {
  /* Tape strip */
  content: "";
  position: absolute;
  top: -14px; left: 8%;
  width: 90px; height: 22px;
  background: rgba(255, 238, 3, 0.85);
  transform: rotate(-3deg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  border: 1.5px solid var(--ink);
}
.hero-cta-kicker {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  color: var(--ink);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
  filter: url(#rough-ink);
}
.hero-cta-helper {
  font-family: var(--f-marker);
  font-size: 1.05rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.hero-cta-helper::after {
  content: "";
  flex: 1;
  height: 0;
  border-bottom: 2.5px dashed rgba(14,14,12,0.3);
}
.hero-cta-block .hero-ctas { margin-bottom: 0; }

@media (max-width: 540px) {
  .hero-cta-block { transform: none; padding: 20px 22px 24px; }
  .hero-cta-block::before { left: 4%; width: 70px; height: 18px; }
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 28px;
  padding-top: 28px;
  border-top: 2.5px dashed rgba(14,14,12,0.35);
}
.hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
.hero-meta-label {
  font-family: var(--f-marker);
  font-size: 0.82rem;
  color: var(--green);
  letter-spacing: 0.04em;
}
.hero-meta-value {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
}
.hero-meta-value a { color: var(--hot); text-decoration: none; }

/* Hero doodles — absolutely positioned SVG decorations */
.hero-doodle {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.hero-doodle.plane { top: 6%; left: 4%; width: 70px; transform: rotate(-12deg); color: var(--green); }
.hero-doodle.bolt  { top: 44%; right: 48%; width: 40px; transform: rotate(8deg); color: var(--hot); opacity: 0.9; }
.hero-doodle.spark { bottom: 22%; left: 48%; width: 70px; opacity: 0.65; color: var(--green); }
.hero-doodle.star  { top: 10%; right: 4%; width: 44px; transform: rotate(-14deg); color: var(--hot); }

/* Hand-stamped "NO-GI ONLY" seal — ink rubber-stamp, rotated, slightly faded */
.hero-stamp {
  position: absolute;
  top: 6%;
  right: 3%;
  width: 150px;
  height: 150px;
  z-index: 5;
  color: var(--ink);
  transform: rotate(-14deg);
  opacity: 0.95;
  pointer-events: none;
  filter:
    url(#rough-ink)
    drop-shadow(0 0 1.5px rgba(239, 230, 208, 0.7));
}
.hero-stamp svg { width: 100%; height: 100%; display: block; }
@media (max-width: 960px) {
  .hero-stamp { top: auto; bottom: 10%; right: 4%; width: 110px; height: 110px; }
}
@media (max-width: 540px) {
  .hero-stamp { width: 90px; height: 90px; bottom: 6%; right: 4%; }
}

@media (max-width: 960px) {
  .hero { padding: 60px 0 70px; }
  .hero-bg { position: relative; width: 100%; right: 0; top: 0; bottom: 0; height: 300px; margin-top: 40px; }
  .hero-content { max-width: 100%; }
  .hero-meta { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
  .hero-doodle.plane { width: 50px; top: 2%; left: 2%; }
  .hero-doodle.bolt, .hero-doodle.spark, .hero-doodle.star { display: none; }
}

/* ---------- MARQUEE (ink tape stripe) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 0;
  transform: rotate(-1.5deg);
  margin: -10px -40px;
  border-top: 2.5px solid var(--paper);
  border-bottom: 2.5px solid var(--paper);
  outline: 2.5px solid var(--ink);
  z-index: 5;
}
.marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: marq 38s linear infinite;
  white-space: nowrap;
  padding-left: 48px;
}
.marquee-track span {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  position: relative;
  padding-right: 48px;
  filter: url(#rough-ink-light);
}
.marquee-track span::after {
  content: "★";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hot);
  font-size: 1rem;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- SECTIONS ---------- */
.section {
  padding: 110px 0;
  position: relative;
}
.section-tight { padding: 80px 0; }

.section-light {
  background: var(--paper-warm);
}
.section-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(30, 74, 58, 0.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(200, 53, 30, 0.04) 0, transparent 40%);
  pointer-events: none;
}

/* Green section variant */
.section.on-green {
  background: var(--green);
  color: var(--paper);
}
.section.on-green h1,
.section.on-green h2,
.section.on-green h3,
.section.on-green .display { color: var(--paper); }
.section.on-green .lead,
.section.on-green p { color: rgba(243, 235, 211, 0.85); }
.section.on-green .eyebrow { color: var(--mustard); }
.section.on-green .eyebrow::before { background: var(--mustard); }

.section.on-green::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243,235,211,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,235,211,0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}

/* ---------- VALUE CARDS ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.value-card {
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  padding: 32px 28px;
  position: relative;
  box-shadow: var(--shadow-ink-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.value-card:nth-child(3n+1) { transform: rotate(-0.7deg); }
.value-card:nth-child(3n+2) { transform: rotate(0.3deg); }
.value-card:nth-child(3n+3) { transform: rotate(-0.2deg); }
.value-card:hover {
  transform: translate(-3px, -3px) rotate(0deg);
  box-shadow: 8px 8px 0 var(--ink);
}
.value-card-icon {
  width: 56px;
  height: 56px;
  background: var(--green);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 20px;
  transform: rotate(-3deg);
}
.value-card-icon i, .value-card-icon svg { width: 26px; height: 26px; }
.value-card h3 {
  font-family: var(--f-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  margin-bottom: 10px;
  filter: url(#rough-ink);
}
.value-card p {
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- STAT HUGE ---------- */
.stat-huge {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: 44px;
  align-items: center;
  position: relative;
}
.stat-huge-num {
  font-family: var(--f-display);
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: 0.85;
  color: var(--hot);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 8px 8px 0 var(--ink);
  filter: url(#rough-ink);
  text-align: center;
}
.stat-huge-copy h2 { margin-bottom: 14px; }
.stat-huge-copy p { color: var(--ink-soft); max-width: 56ch; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2.5px dashed var(--ink);
  border-bottom: 2.5px dashed var(--ink);
}
.stat-item {
  padding: 28px 16px;
  text-align: center;
  border-right: 2.5px dashed var(--ink);
}
.stat-item:last-child { border-right: 0; }
.on-green .stat-strip { border-color: rgba(243,235,211,0.4); }
.on-green .stat-item { border-right-color: rgba(243,235,211,0.4); }
.on-green .stat-num { color: var(--paper); }
.on-green .stat-label { color: var(--mustard); }
.on-green .stat-huge-num { color: var(--mustard); -webkit-text-stroke: 3px var(--ink); text-shadow: 8px 8px 0 var(--ink); }
.stat-num {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--ink);
  display: block;
  line-height: 1;
  filter: url(#rough-ink);
}
.stat-label {
  font-family: var(--f-marker);
  font-size: 1rem;
  color: var(--green);
  margin-top: 6px;
  display: block;
}
@media (max-width: 800px) {
  .stat-huge { grid-template-columns: 1fr; text-align: center; }
  .stat-huge-copy p { margin: 0 auto; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: 0; }
  .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 2.5px dashed var(--ink); }
}

/* ---------- PROGRAMS ---------- */
.program-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.program-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 2.5px solid var(--ink);
  overflow: hidden;
  cursor: pointer;
  background: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.program-card:nth-child(odd)  { transform: rotate(-0.6deg); }
.program-card:nth-child(even) { transform: rotate(0.5deg); }
.program-card:hover {
  transform: translate(-4px, -4px) rotate(0deg);
  box-shadow: 10px 10px 0 var(--ink);
}
.program-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.1) saturate(0.85);
  transition: transform 0.5s var(--ease);
}
.program-card:hover img { transform: scale(1.06); }
.program-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 48, 31, 0.15) 0%, rgba(14, 14, 12, 0.92) 78%);
  pointer-events: none;
}
.program-card-content {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  color: var(--paper);
}
.program-card-ages {
  align-self: flex-start;
  font-family: var(--f-marker);
  font-size: 0.85rem;
  background: var(--hot);
  color: var(--paper);
  padding: 4px 12px;
  letter-spacing: 0.06em;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--ink);
}
.program-card-title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 12px;
  line-height: 0.95;
  filter: url(#rough-ink-light);
}
.program-card-footer {
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mustard);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.program-card-footer i, .program-card-footer svg { width: 16px; height: 16px; transition: transform 0.2s; }
.program-card:hover .program-card-footer i,
.program-card:hover .program-card-footer svg { transform: translateX(4px); }

@media (max-width: 1000px) { .program-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .program-grid { grid-template-columns: 1fr; } }

/* ---------- TESTIMONIALS ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial {
  background: var(--paper) !important;
  border: 2.5px solid var(--ink) !important;
  padding: 32px 28px 28px;
  box-shadow: var(--shadow-ink-sm);
  position: relative;
  transition: transform 0.2s var(--ease);
}
.testimonial:nth-child(1) { transform: rotate(-1deg); }
.testimonial:nth-child(2) { transform: rotate(0.6deg); }
.testimonial:nth-child(3) { transform: rotate(-0.3deg); }
.testimonial:hover { transform: rotate(0deg) translateY(-3px); }

.testimonial::before {
  /* Tape strip at top-left */
  content: "";
  position: absolute;
  top: -12px; left: 18%;
  width: 70px; height: 24px;
  background: rgba(217, 164, 65, 0.82);
  transform: rotate(-4deg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  color: var(--hot);
  margin-bottom: 18px;
}
.testimonial-stars i, .testimonial-stars svg {
  width: 18px; height: 18px;
  fill: var(--hot);
  stroke: var(--hot);
}
.testimonial-quote {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink) !important;
  margin-bottom: 20px;
  font-style: italic;
}
.testimonial-quote::before { content: "“"; font-family: var(--f-display); font-size: 2.2rem; color: var(--green); line-height: 0; vertical-align: -0.3em; margin-right: 6px; }
.testimonial-name {
  font-family: var(--f-marker);
  font-size: 1.15rem;
  color: var(--green);
  display: block;
}

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

/* ---------- FOOTER ---------- */
.footer {
  background: var(--green-deep);
  color: var(--paper);
  padding: 110px 0 36px;
  position: relative;
  z-index: 5;
}
/* Torn top edge of footer */
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 40px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0 40 L0 28 Q30 18 60 30 T120 22 T180 30 T240 20 T300 28 T360 22 T420 32 T480 20 T540 28 T600 22 T660 30 T720 20 T780 32 T840 22 T900 28 T960 20 T1020 30 T1080 22 T1140 28 T1200 24 L1200 40 Z' fill='%2310301F'/></svg>") center top/100% 100% no-repeat;
  pointer-events: none;
}
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243,235,211,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,235,211,0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}
.footer .container { position: relative; z-index: 2; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 2.5px dashed rgba(243,235,211,0.2);
}
.footer-brand p {
  color: rgba(243,235,211,0.78);
  max-width: 38ch;
  margin-top: 16px;
  margin-bottom: 20px;
  font-size: 0.95rem;
}
.footer-logo img {
  max-width: 180px;
  transform: rotate(-1deg);
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 42px; height: 42px;
  border: 2px solid var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  transition: all 0.2s;
}
.footer-social a:hover {
  background: var(--mustard);
  color: var(--ink);
  border-color: var(--mustard);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--paper);
}
.footer-social i, .footer-social svg { width: 20px; height: 20px; }

.footer-col-title {
  font-family: var(--f-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--mustard);
  margin-bottom: 18px;
  filter: url(#rough-ink-light);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a, .footer-contact-item a {
  color: rgba(243,235,211,0.82);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.15s;
}
.footer-col a:hover, .footer-contact-item a:hover { color: var(--mustard); }

.footer-contact-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  color: rgba(243,235,211,0.85);
  font-size: 0.95rem;
}
.footer-contact-item i, .footer-contact-item svg { width: 18px; height: 18px; color: var(--mustard); flex: 0 0 18px; margin-top: 2px; }

.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  color: rgba(243,235,211,0.65);
}
.footer-bottom-meta { display: flex; gap: 18px; font-family: var(--f-marker); }
.footer-copy { margin: 0; }

.powered-by {
  font-family: var(--f-marker);
  color: rgba(243,235,211,0.7);
  font-size: 0.95rem;
  margin: 0;
}
.powered-by a { color: var(--mustard); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-header {
  position: relative;
  padding: 80px 0 100px;
  background: var(--green);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243,235,211,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,235,211,0.07) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}
.page-header::after {
  /* Torn bottom edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 38px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 38' preserveAspectRatio='none'><path d='M0 0 L1200 0 L1200 14 Q1170 26 1140 16 T1080 22 T1020 14 T960 24 T900 16 T840 22 T780 14 T720 24 T660 16 T600 22 T540 14 T480 24 T420 16 T360 22 T300 14 T240 24 T180 16 T120 22 T60 14 T0 22 Z' fill='%23EFE6D0'/></svg>") center bottom/100% 100% no-repeat;
  pointer-events: none;
  z-index: 2;
}
.page-header-bg { display: none; } /* Legacy hook */
.page-header-inner { position: relative; z-index: 3; max-width: 820px; }
.page-header-crumb {
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243,235,211,0.55);
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  line-height: 1;
}
.page-header-crumb a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(243,235,211,0.25);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.page-header-crumb a:hover { color: var(--yellow); border-color: var(--yellow); }
.page-header-crumb .sep {
  color: var(--yellow);
  opacity: 0.75;
  font-family: inherit;
  display: inline-block;
  transform: translateY(-1px);
}
.page-header-crumb .current {
  color: var(--paper);
  border-left: 3px solid var(--yellow);
  padding: 2px 0 2px 10px;
  font-weight: 700;
}
.page-header h1.display {
  color: var(--paper);
  filter: none;
  position: relative;
}
.page-header h1.display::after {
  content: "";
  display: block;
  width: clamp(96px, 14vw, 168px);
  height: 10px;
  background: var(--yellow);
  margin-top: 28px;
  transform: skewX(-10deg);
  box-shadow: 8px 8px 0 rgba(255,238,3,0.18);
}
.page-header-lead {
  font-size: 1.15rem;
  line-height: 1.55;
  color: rgba(243,235,211,0.82);
  max-width: 56ch;
  margin-top: 30px;
}

@media (max-width: 720px) {
  .page-header { padding: 60px 0 80px; }
  .page-header-crumb { font-size: 0.72rem; gap: 10px; margin-bottom: 26px; }
  .page-header h1.display::after { height: 8px; margin-top: 22px; }
  .page-header-lead { font-size: 1.05rem; margin-top: 24px; }
}

/* ---------- CLASSES / PROGRAM BLOCKS ---------- */
.program-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 2.5px dashed rgba(14,14,12,0.25);
}
.program-block:last-child { border-bottom: 0; }
.program-block.reverse .program-block-media { order: 2; }
.program-block-media {
  position: relative;
  border: 2.5px solid var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-ink);
  transform: rotate(-1deg);
}
.program-block.reverse .program-block-media { transform: rotate(1.2deg); }
.program-block-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
}
.program-block-copy .ages-badge {
  display: inline-block;
  background: var(--hot);
  color: var(--paper);
  font-family: var(--f-marker);
  padding: 6px 16px;
  transform: rotate(-2deg);
  margin-bottom: 18px;
  box-shadow: 3px 3px 0 var(--ink);
}
.program-block-copy h2 { margin-bottom: 18px; }
.program-block-copy p { color: var(--ink-soft); margin-bottom: 14px; }
.program-block-copy .program-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  color: var(--ink);
}
.program-block-copy .program-chip i, .program-block-copy .program-chip svg { width: 14px; height: 14px; color: var(--green); }
@media (max-width: 800px) {
  .program-block { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }
  .program-block.reverse .program-block-media { order: 0; }
}

/* ---------- SCHEDULE ---------- */
.schedule-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.schedule-day {
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  padding: 18px 14px;
  min-height: 260px;
  box-shadow: var(--shadow-ink-sm);
}
.schedule-day-name {
  font-family: var(--f-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2.5px solid var(--ink);
  filter: url(#rough-ink);
}
.schedule-session {
  padding: 10px 0;
  border-bottom: 1.5px dashed rgba(14,14,12,0.22);
}
.schedule-session:last-child { border-bottom: 0; }
.schedule-session-time {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
  display: block;
}
.schedule-session-class {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  display: block;
  line-height: 1.25;
  margin-top: 2px;
}
.schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
  font-family: var(--f-marker);
  color: var(--ink-soft);
}
.schedule-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.schedule-legend > span::before { content: ""; width: 16px; height: 16px; background: var(--green); }
@media (max-width: 1000px) { .schedule-days { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .schedule-days { grid-template-columns: repeat(2, 1fr); } }

/* ---------- INSTRUCTORS ---------- */
.instructor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.instructor-card {
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-ink-sm);
  overflow: hidden;
  position: relative;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.instructor-card:nth-child(3n+1) { transform: rotate(-0.8deg); }
.instructor-card:nth-child(3n+2) { transform: rotate(0.5deg); }
.instructor-card:nth-child(3n+3) { transform: rotate(-0.3deg); }
.instructor-card:hover {
  transform: translate(-3px, -3px) rotate(0deg);
  box-shadow: 8px 8px 0 var(--ink);
}
.instructor-card-media {
  aspect-ratio: 3/3.5;
  overflow: hidden;
  border-bottom: 2.5px solid var(--ink);
  background: var(--ink);
}
.instructor-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.1) saturate(0.8) grayscale(20%);
}
.instructor-card-body { padding: 20px 22px 24px; }
.instructor-card-rank {
  display: inline-block;
  font-family: var(--f-marker);
  font-size: 0.82rem;
  color: var(--paper);
  background: var(--green);
  padding: 3px 10px;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
  margin-bottom: 10px;
}
.instructor-card-name {
  font-family: var(--f-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
  filter: url(#rough-ink);
}
.instructor-card-role {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
@media (max-width: 900px) { .instructor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .instructor-grid { grid-template-columns: 1fr; } }

/* ---------- MEMBERSHIPS / PLANS ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.plan-card {
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  padding: 34px 28px 32px;
  box-shadow: var(--shadow-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.plan-card:nth-child(odd)  { transform: rotate(-0.6deg); }
.plan-card:nth-child(even) { transform: rotate(0.6deg); }
.plan-card:hover { transform: translate(-4px, -4px) rotate(0deg); box-shadow: 10px 10px 0 var(--ink); }
.plan-card.highlight {
  background: var(--ink);
  color: var(--paper);
}
.plan-card.highlight .plan-name,
.plan-card.highlight .plan-price-amount { color: var(--paper); }
.plan-card.highlight .plan-desc,
.plan-card.highlight .plan-features li,
.plan-card.highlight .plan-price-period,
.plan-card.highlight .plan-note { color: rgba(243,235,211,0.82); }
.plan-card.highlight::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--hot);
  color: var(--paper);
  font-family: var(--f-marker);
  padding: 4px 14px;
  letter-spacing: 0.05em;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.9rem;
  border: 2px solid var(--ink);
}
.plan-name {
  font-family: var(--f-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
  filter: url(#rough-ink);
}
.plan-desc { color: var(--ink-muted); margin-bottom: 22px; font-size: 0.95rem; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; }
.plan-price-amount {
  font-family: var(--f-display);
  font-size: 3rem;
  color: var(--ink);
  line-height: 1;
  filter: url(#rough-ink);
}
.plan-price-period {
  font-family: var(--f-marker);
  font-size: 1rem;
  color: var(--ink-muted);
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.plan-features li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--green-bright);
  font-family: var(--f-display);
  font-size: 1.1rem;
}
.plan-card.highlight .plan-features li::before { color: var(--mustard); }
.plan-note {
  font-family: var(--f-marker);
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: 14px;
  text-align: center;
}
@media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- TRIAL PAGE ---------- */
.trial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.trial-expect-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trial-expect-list li {
  display: flex;
  gap: 16px;
  padding: 18px 22px;
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-ink-sm);
  transform: rotate(-0.5deg);
}
.trial-expect-list li:nth-child(even) { transform: rotate(0.6deg); }
.te-num {
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--hot);
  line-height: 1;
  flex: 0 0 auto;
  filter: url(#rough-ink);
  -webkit-text-stroke: 1.5px var(--ink);
}
.te-body h4 {
  font-family: var(--f-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 4px;
  filter: url(#rough-ink);
}
.te-body p { font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 800px) { .trial-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- GALLERY ---------- */
.gallery-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.gallery-cat {
  padding: 10px 18px;
  font-family: var(--f-marker);
  font-size: 1rem;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
}
.gallery-cat:hover,
.gallery-cat.current {
  background: var(--green);
  color: var(--paper);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.gallery-item {
  border: 2.5px solid var(--ink);
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  aspect-ratio: 4/3;
  background: var(--ink);
}
.gallery-item:nth-child(3n+1) { transform: rotate(-0.8deg); }
.gallery-item:nth-child(3n+2) { transform: rotate(0.6deg); }
.gallery-item:nth-child(3n+3) { transform: rotate(-0.3deg); }
.gallery-item:hover { transform: rotate(0deg) translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
  transition: transform 0.5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.08); }
.caption {
  font-family: var(--f-marker);
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 20px;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ---------- CONTACT ---------- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.contact-info {
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  padding: 32px;
  box-shadow: var(--shadow-ink);
  transform: rotate(-0.6deg);
}
.contact-info h2 { margin-bottom: 18px; }
.contact-info-list { display: flex; flex-direction: column; gap: 20px; margin-top: 22px; }
.contact-info-list > div { display: flex; gap: 14px; align-items: flex-start; }
.ci-icon {
  width: 42px; height: 42px;
  background: var(--green);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--ink);
  flex: 0 0 42px;
  transform: rotate(-4deg);
}
.ci-icon i, .ci-icon svg { width: 20px; height: 20px; }
.ci-label {
  font-family: var(--f-marker);
  font-size: 0.9rem;
  color: var(--green);
  display: block;
}
.ci-value { font-weight: 700; font-size: 1rem; color: var(--ink); display: block; }
.ci-value a { color: var(--hot); text-decoration: none; }
.contact-map {
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-ink);
  overflow: hidden;
  aspect-ratio: 4/5;
  transform: rotate(0.8deg);
}
.contact-map iframe, .contact-map img { width: 100%; height: 100%; display: block; border: 0; }
@media (max-width: 800px) {
  .contact-split { grid-template-columns: 1fr; gap: 30px; }
  .contact-info, .contact-map { transform: none; }
}

/* ---------- VIDEOS ---------- */
.video-player {
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-ink);
  background: var(--ink);
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.video-player iframe { width: 100%; height: 100%; border: 0; }
.video-player-placeholder {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-deep);
  color: var(--paper);
  font-family: var(--f-marker);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.video-card {
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-ink-sm);
  overflow: hidden;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  text-decoration: none;
  color: inherit;
  display: block;
}
.video-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.video-card-thumb {
  aspect-ratio: 16/9;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  border-bottom: 2.5px solid var(--ink);
}
.video-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: var(--hot);
  color: var(--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--ink);
}
.video-card-play i, .video-card-play svg { width: 26px; height: 26px; fill: var(--paper); }
.video-card-body { padding: 18px 20px 22px; }
.video-card-title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 6px;
  filter: url(#rough-ink);
}
.video-card-desc { font-size: 0.9rem; color: var(--ink-soft); }
.video-card-meta {
  font-family: var(--f-marker);
  color: var(--green);
  font-size: 0.85rem;
  margin-top: 10px;
}
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .video-grid { grid-template-columns: 1fr; } }

/* ---------- BOOKING PAGE ---------- */
.booking-page { background: var(--paper); min-height: 100vh; }
.booking-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 40px 20px 0;
  flex-wrap: wrap;
}
.booking-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-marker);
  color: var(--ink-muted);
  font-size: 1rem;
}
.booking-step.done { color: var(--green); }
.booking-step.current { color: var(--hot); }
.booking-step-num {
  width: 36px; height: 36px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  font-weight: 800;
  font-family: var(--f-body);
  box-shadow: 2px 2px 0 var(--ink);
}
.booking-step.done .booking-step-num { background: var(--green); color: var(--paper); }
.booking-step.current .booking-step-num { background: var(--hot); color: var(--paper); }
.booking-connector {
  width: 40px; height: 3px;
  background: var(--ink);
  border-radius: 2px;
}
.booking-head {
  text-align: center;
  padding: 30px 20px 22px;
  max-width: 760px;
  margin: 0 auto;
}
.booking-head h1.display { margin-bottom: 14px; }
.booking-head p { color: var(--ink-soft); font-size: 1.08rem; }
.booking-body { padding: 20px 20px 60px; }
.booking-calendar-wrap {
  max-width: 900px;
  margin: 0 auto;
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-ink-lg);
  padding: 28px;
}
.booking-calendar {
  min-height: 520px;
  background: var(--paper);
  border: 2.5px dashed var(--ink);
  position: relative;
}
.calendar-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  min-height: 520px;
  padding: 30px;
  color: var(--ink-muted);
  text-align: center;
  font-family: var(--f-marker);
}
.program-switcher {
  padding: 24px;
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-ink-sm);
  max-width: 900px;
  margin: 28px auto 0;
}
.program-switcher-label {
  font-family: var(--f-marker);
  color: var(--green);
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
}
.program-switcher-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.program-switcher-chips button {
  padding: 8px 14px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}
.program-switcher-chips button:hover,
.program-switcher-chips button.current {
  background: var(--hot);
  color: var(--paper);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}

.booking-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 900px;
  margin: 36px auto 0;
}
.booking-trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-ink-sm);
}
.booking-trust-icon {
  width: 40px; height: 40px;
  background: var(--green);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}
.booking-trust-icon i, .booking-trust-icon svg { width: 18px; height: 18px; }
.booking-trust-copy strong {
  font-family: var(--f-display);
  font-size: 0.95rem;
  display: block;
  text-transform: uppercase;
  margin-bottom: 2px;
  filter: url(#rough-ink);
}
.booking-trust-copy span { font-size: 0.85rem; color: var(--ink-soft); }
.booking-contact-footer {
  text-align: center;
  margin: 30px auto 0;
  font-family: var(--f-marker);
  color: var(--ink-muted);
}
.booking-footer {
  text-align: center;
  padding: 30px 20px 40px;
  border-top: 2.5px dashed rgba(14,14,12,0.2);
  margin-top: 40px;
}
@media (max-width: 700px) {
  .booking-trust { grid-template-columns: 1fr; }
  .booking-connector { width: 24px; }
}

/* ---------- LEAD MODAL ---------- */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lead-modal.open { display: flex; }
.lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 12, 0.85);
  backdrop-filter: blur(4px);
}
.lead-modal__card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 12px 12px 0 var(--hot), 12px 12px 0 3px var(--ink);
  padding: 36px 32px 30px;
  transform: rotate(-0.8deg);
  max-height: 92vh;
  overflow-y: auto;
}
.lead-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--ink);
}
.lead-modal__close:hover { background: var(--hot); color: var(--paper); }
.lead-modal__kicker {
  display: inline-block;
  font-family: var(--f-marker);
  background: var(--green);
  color: var(--paper);
  padding: 4px 12px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--ink);
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.lead-modal__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  text-transform: uppercase;
  margin-bottom: 8px;
  filter: url(#rough-ink);
  line-height: 1;
}
.lead-modal__sub { font-size: 0.95rem; color: var(--ink-muted); margin-bottom: 22px; }
.lead-modal__form { display: flex; flex-direction: column; gap: 14px; }
.lead-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-modal__field { display: flex; flex-direction: column; gap: 6px; }
.lead-modal__label {
  font-family: var(--f-marker);
  color: var(--green);
  font-size: 0.92rem;
}
.lead-modal__field input,
.lead-modal__field select {
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  background: var(--paper-warm);
  border: 2.5px solid var(--ink);
  color: var(--ink);
  border-radius: 2px;
  outline: none;
  min-height: 48px;
}
.lead-modal__field input:focus,
.lead-modal__field select:focus {
  background: #FFFDF4;
  box-shadow: 3px 3px 0 var(--hot);
  transform: translate(-1px, -1px);
}
.lead-modal__submit {
  margin-top: 6px;
  width: 100%;
  padding: 16px;
  font-size: 0.95rem;
}
.lead-modal__legal {
  font-family: var(--f-marker);
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 4px;
}
@media (max-width: 520px) {
  .lead-modal__row { grid-template-columns: 1fr; }
  .lead-modal__card { transform: none; padding: 28px 22px; box-shadow: 6px 6px 0 var(--hot), 6px 6px 0 3px var(--ink); }
}

/* ---------- VIDEO MODAL (inline YouTube player) ---------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-modal.open { display: flex; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 12, 0.92);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.video-modal__card {
  position: relative;
  width: 100%;
  max-width: 1040px;
  background: var(--ink);
  border: 3px solid var(--yellow);
  box-shadow: 14px 14px 0 rgba(255,238,3,0.22), 14px 14px 0 3px var(--yellow);
  padding: 20px 20px 22px;
  transform: rotate(-0.3deg);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.video-modal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 48px;
  height: 48px;
  border: 2.5px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  z-index: 2;
}
.video-modal__close:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.video-modal__close i,
.video-modal__close svg { width: 22px; height: 22px; stroke-width: 3; }
.video-modal__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 4px 6px 0;
}
.video-modal__kicker {
  display: inline-block;
  font-family: var(--f-marker);
  background: var(--yellow);
  color: var(--ink);
  padding: 4px 12px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(255,238,3,0.35);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.video-modal__title {
  font-family: var(--f-display);
  color: var(--paper);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.video-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 2.5px solid var(--ink);
  outline: 1px solid rgba(255,238,3,0.15);
  overflow: hidden;
}
.video-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-modal__frame-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(243,235,211,0.5);
  font-family: var(--f-marker);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
}
@media (max-width: 720px) {
  .video-modal { padding: 14px; }
  .video-modal__card {
    transform: none;
    padding: 14px 14px 16px;
    box-shadow: 8px 8px 0 rgba(255,238,3,0.22), 8px 8px 0 3px var(--yellow);
  }
  .video-modal__close {
    top: -14px;
    right: -14px;
    width: 42px;
    height: 42px;
  }
  .video-modal__head { padding: 2px 2px 0; gap: 10px; }
  .video-modal__kicker { font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .video-modal__card { transform: none; }
  .video-modal__close { transition: none; }
}
/* Hide click-to-open affordance on cards when hovered to hint interactivity */
.video-card[data-video-id] { cursor: pointer; }

/* ---------- REVEAL / ANIM ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

.sep {
  display: block;
  height: 3px;
  background: var(--ink);
  width: 80px;
  transform: rotate(-2deg);
  margin: 14px 0;
}

/* ---------- DOODLE UTILITIES ---------- */
.doodle {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.doodle--tl { top: 24px; left: 18px; }
.doodle--tr { top: 36px; right: 24px; }
.doodle--bl { bottom: 32px; left: 20px; }
.doodle--br { bottom: 24px; right: 28px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Print */
@media print {
  .nav, .footer, .lead-modal { display: none; }
  body::before, body::after { display: none; }
}

/* ===========================================================
   BRAND OVERRIDES — BLACK + YELLOW (10P Pasadena core identity)
   Dark sections = ink black (not navy). Big headlines get the
   yellow-fill-with-black-outline fight-poster treatment so they
   pop on cream, on photos, and on black alike.
   =========================================================== */

/* Dark sections switch from navy to pure ink black */
.section.on-green { background: var(--ink); }
.section.on-green::before {
  background-image:
    linear-gradient(rgba(255,238,3,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,238,3,0.05) 1px, transparent 1px);
}
.page-header { background: var(--ink); }
.page-header::before {
  background-image:
    linear-gradient(rgba(255,238,3,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,238,3,0.05) 1px, transparent 1px);
}
.footer { background: var(--ink); }
.footer::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0 40 L0 28 Q30 18 60 30 T120 22 T180 30 T240 20 T300 28 T360 22 T420 32 T480 20 T540 28 T600 22 T660 30 T720 20 T780 32 T840 22 T900 28 T960 20 T1020 30 T1080 22 T1140 28 T1200 24 L1200 40 Z' fill='%230E0E0C'/></svg>") center top/100% 100% no-repeat;
}
.footer::after {
  background-image:
    linear-gradient(rgba(255,238,3,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,238,3,0.04) 1px, transparent 1px);
}

/* Big headline treatment — two-tone fight-poster stack.
   Base word(s): black ink with yellow drop-shadow (stamped-letter).
   .accent word: yellow fill with black outline (outlined pop). */
.hero h1.display {
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: 6px 6px 0 var(--yellow);
}
.hero h1.display .accent {
  color: var(--yellow);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-2deg);
  display: inline-block;
  padding: 0 0.05em;
}
.hero h1.display .accent::after { display: none; }

@media (max-width: 640px) {
  .hero h1.display { text-shadow: 4px 4px 0 var(--yellow); }
  .hero h1.display .accent { -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); }
}

/* Page-header / on-green display treatment — crisp cream on ink, zero halo.
   Contrast is doing the work here; the yellow signature bar under the h1
   (see .page-header h1.display::after) carries the brand energy without
   fighting the letterforms. */
.page-header h1.display,
.section.on-green h2.display,
.section.on-green .display.h-xl {
  color: var(--paper);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
/* Accent word keeps the stamped-yellow pop — single deliberate splash of color */
.page-header h1.display .accent,
.section.on-green h2.display .accent,
.section.on-green .display.h-xl .accent {
  color: var(--yellow);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-2deg);
  display: inline-block;
  padding: 0 0.05em;
}
.page-header h1.display .accent::after,
.section.on-green h2.display .accent::after,
.section.on-green .display.h-xl .accent::after { display: none; }

@media (max-width: 640px) {
  .page-header h1.display .accent,
  .section.on-green h2.display .accent,
  .section.on-green .display.h-xl .accent {
    -webkit-text-stroke: 2px var(--ink);
    text-shadow: 3px 3px 0 var(--ink);
  }
}

/* Text accents on cream paper — use ink black (not navy) for readability */
.accent { color: var(--ink); }
.hero-meta-value a { color: var(--ink); border-bottom: 3px solid var(--yellow); padding-bottom: 1px; }
.ci-value a { color: var(--ink); border-bottom: 3px solid var(--yellow); padding-bottom: 1px; }
.testimonial-stars { color: var(--yellow-deep); }
.testimonial-stars i, .testimonial-stars svg { fill: var(--yellow-deep); stroke: var(--yellow-deep); }
.testimonial-quote::before { color: var(--ink); }
.nav-links a::before {
  background: linear-gradient(90deg, #1E8A3D 0%, #0E0E0C 100%);
  height: 4px;
}

/* When yellow IS the background, ink text reads */
.btn-primary { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--yellow-deep); color: var(--ink); }

.program-card-ages { background: var(--yellow); color: var(--ink); font-weight: 800; }
.program-block-copy .ages-badge { background: var(--yellow); color: var(--ink); font-weight: 800; }
.video-card-play { background: var(--yellow); color: var(--ink); }
.video-card-play i, .video-card-play svg { fill: var(--ink); stroke: var(--ink); }
.plan-card.highlight::before { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.lead-modal__close:hover { background: var(--yellow); color: var(--ink); }

/* Hero kicker reads better as yellow-on-ink at this size */
.hero-kicker {
  background: var(--ink);
  color: var(--yellow);
  border: 2.5px solid var(--ink);
}
.lead-modal__kicker { background: var(--ink); color: var(--yellow); }

/* Doodle accent colors — black + yellow only */
.hero-doodle.plane { color: var(--ink); }
.hero-doodle.bolt  { color: var(--yellow-deep); }
.hero-doodle.spark { color: var(--ink); opacity: 0.5; }
.hero-doodle.star  { color: var(--yellow-deep); }

/* Stat-huge — yellow fill with ink stroke pops on cream */
.stat-huge-num { color: var(--yellow); -webkit-text-stroke: 3px var(--ink); }

/* Gallery chip hover — use navy for consistency */
.gallery-cat:hover,
.gallery-cat.current { background: var(--navy); color: var(--paper); }

/* Program-switcher current state — yellow CTA with ink */
.program-switcher-chips button:hover,
.program-switcher-chips button.current { background: var(--yellow); color: var(--ink); }

/* Trial numbers — yellow fill with ink stroke on cream-warm */
.trial-expect-list .te-num { color: var(--yellow); -webkit-text-stroke: 1.5px var(--ink); }

/* Eyebrow color on cream — ink black */
.eyebrow { color: var(--ink); font-weight: 700; }
.eyebrow::before { background: var(--ink); }

/* Page header eyebrow stays yellow on navy bg */
.section.on-green .eyebrow,
.page-header .page-header-crumb { color: var(--yellow); }
.section.on-green .eyebrow::before { background: var(--yellow); }

/* Footer — yellow titles on navy-deep */
.footer-col-title { color: var(--yellow); }
.footer-social a:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.footer-contact-item i, .footer-contact-item svg { color: var(--yellow); }
.footer-col a:hover, .footer-contact-item a:hover { color: var(--yellow); }
.powered-by a { color: var(--yellow); }

/* Nav logo shouldn't be stamped — it already has its own colors */
.nav-logo { filter: drop-shadow(2px 2px 0 var(--ink)); }

/* On-green (navy) stat tweaks */
.on-green .stat-huge-num { color: var(--yellow); -webkit-text-stroke: 3px var(--ink); text-shadow: 8px 8px 0 var(--ink); }
.on-green .stat-num { color: var(--yellow); }
.on-green .stat-label { color: var(--paper); }

/* Plan highlighted card — yellow accents for checks */
.plan-card.highlight .plan-features li::before { color: var(--yellow); }

/* CTA-band copy — bump the inline-accent span */
.on-green .accent { color: var(--yellow); }

/* Contact icon swap on cream */
.ci-icon { background: var(--ink); color: var(--yellow); }

/* Booking step-num current/done */
.booking-step.done .booking-step-num { background: var(--ink); color: var(--yellow); }
.booking-step.current .booking-step-num { background: var(--yellow); color: var(--ink); }
.booking-step.current { color: var(--ink); }
.booking-step.done { color: var(--ink); }

/* Instructor rank badge — ink bg with yellow text */
.instructor-card-rank { background: var(--ink); color: var(--yellow); }

/* Value card icon — ink bg, yellow icon */
.value-card-icon { background: var(--ink); color: var(--yellow); }

/* Schedule legend dot */
.schedule-legend > span::before { background: var(--ink); }

/* Booking trust icon */
.booking-trust-icon { background: var(--ink); color: var(--yellow); }

/* Gallery category chip active — ink + yellow */
.gallery-cat:hover,
.gallery-cat.current { background: var(--ink); color: var(--yellow); }

/* Marker label color in the hero-meta */
.hero-meta-label { color: var(--ink); }
.stat-label { color: var(--ink); }
.ci-label { color: var(--ink); }
.schedule-session-time { color: var(--ink); font-weight: 700; }
.testimonial-name { color: var(--ink); }
.program-switcher-label { color: var(--ink); }

/* Program-chip icon should go ink, not navy */
.program-block-copy .program-chip i,
.program-block-copy .program-chip svg { color: var(--ink); }

/* Plan feature check on cream — ink outlined */
.plan-features li::before { color: var(--ink); }

/* Hero kicker stays ink bg with yellow text — already set above */

/* Main-nav theme color should now read as ink (darker nav feel on mobile) */