/* =====================================================
   ZEN BRAZILIAN JIU-JITSU — Global Stylesheet
   ===================================================== */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@300;400;600;700&family=Montserrat:wght@700;900&display=swap');

/* --- CSS Variables --- */
:root {
  --black:       #0d0d0d;
  --charcoal:    #111111;
  --dark:        #1a1a1a;
  --dark-card:   #1f1f1f;
  --mid-dark:    #252525;
  --red:         #CC0000;
  --red-hover:   #aa0000;
  --red-light:   rgba(204, 0, 0, 0.15);
  --white:       #ffffff;
  --light-gray:  #e0e0e0;
  --mid-gray:    #aaaaaa;
  --gold:        #f5c518;
  --nav-height:  70px;
  --font-head:   'Bebas Neue', 'Montserrat', sans-serif;
  --font-body:   'Open Sans', sans-serif;
  --transition:  0.3s ease;
  --shadow:      0 4px 24px rgba(0,0,0,0.5);
  --shadow-red:  0 4px 24px rgba(204,0,0,0.25);
  --radius:      6px;
  --radius-lg:   12px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--charcoal);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --- Typography --- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  line-height: 1.1;
}
h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
p  { font-size: 1rem; color: var(--light-gray); line-height: 1.75; }

/* --- Utility --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-pad { padding: 80px 0; }
.text-red { color: var(--red); }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.btn-red {
  background: var(--red);
  color: var(--white);
}
.btn-red:hover, .btn-red:focus {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-red);
  outline: none;
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--charcoal);
}
/* Secondary CTA — formerly red-outline, now adapts to surface.
   On dark surfaces (default): white outline + white text.
   On light surfaces (About section, or any element with .is-dark modifier):
   charcoal outline + charcoal text. Class name kept for HTML compatibility. */
.btn-outline-red {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
.btn-outline-red:hover {
  background: var(--white);
  color: var(--charcoal);
}
/* Light-surface variant — auto-applied inside .about-section or via .is-dark modifier */
.about-section .btn-outline-red,
.btn-outline-red.is-dark {
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.about-section .btn-outline-red:hover,
.btn-outline-red.is-dark:hover {
  background: var(--charcoal);
  color: var(--white);
  border-color: var(--charcoal);
}

/* Pulsing CTA */
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,0,0,0.6); }
  50%       { box-shadow: 0 0 0 12px rgba(204,0,0,0); }
}
.btn-pulse { animation: pulse-red 2.2s infinite; }

/* =====================================================
   NAVIGATION
   ===================================================== */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9998; /* Above cursor glow (9997) */
  height: var(--nav-height);
  background: rgba(13,13,13,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--red);
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition);
}
#navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.7); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  overflow: hidden;
  max-height: var(--nav-height);
}
.nav-logo-wrap {
  display: flex;
  align-items: center;
  height: 52px;
  max-height: 52px;
  overflow: hidden;
  flex-shrink: 0;
}
#navbar .nav-logo-img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 160px !important;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 1200px) {
  #navbar .nav-logo-img { height: 46px !important; max-height: 46px !important; max-width: 140px !important; }
  .nav-logo-wrap { height: 46px; max-height: 46px; }
}
@media (max-width: 768px) {
  #navbar .nav-logo-img { height: 38px !important; max-height: 38px !important; max-width: 120px !important; }
  .nav-logo-wrap { height: 38px; max-height: 38px; }
}

/* Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--light-gray);
  padding: 6px 10px;
  border-radius: var(--radius);
  transition: color var(--transition);
  position: relative;
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10px; right: 10px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links .nav-cta {
  background: var(--red);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--radius);
  margin-left: 8px;
  font-size: 0.78rem;
}
.nav-links .nav-cta::after { display: none; }
.nav-links .nav-cta:hover { background: var(--red-hover); color: var(--white); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  aria-label: "Toggle menu";
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  transition: var(--transition);
  border-radius: 2px;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Drawer */
.nav-drawer {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  background: var(--black);
  border-top: 1px solid #222;
  z-index: 9998; /* Above cursor glow (9997) */
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  padding: 20px;
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--light-gray);
  padding: 14px 0;
  border-bottom: 1px solid #222;
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a.active, .nav-drawer a:hover { color: var(--red); }
.nav-drawer .drawer-cta {
  display: block;
  background: var(--red);
  color: var(--white);
  text-align: center;
  padding: 14px;
  border-radius: var(--radius);
  margin-top: 16px;
  border-bottom: none !important;
}

/* =====================================================
   PROGRAMS DROPDOWN (DESKTOP)
   ===================================================== */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--light-gray);
  padding: 6px 10px;
  border-radius: var(--radius);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-dropdown-toggle::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10px; right: 10px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown-toggle.active { color: var(--white); }
.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown-toggle.active::after { transform: scaleX(1); }
.nav-chevron { width: 10px; height: 7px; transition: transform 0.3s ease; flex-shrink: 0; }
.nav-dropdown:hover .nav-chevron { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: #1a1a1a;
  border-top: 2px solid #CC0000;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1001;
}
/* Transparent bridge fills the 8px gap so :hover never breaks mid-travel */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-menu a {
  display: block;
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--light-gray);
  padding: 12px 24px;
  border-left: 3px solid transparent;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active {
  color: var(--white);
  background: #2a2a2a;
  border-left-color: #CC0000;
}

/* Programs accordion (mobile drawer) */
.drawer-programs { border-bottom: 1px solid #222; }
.drawer-programs-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-head);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--light-gray);
  padding: 14px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.drawer-programs-toggle:hover, .drawer-programs-toggle.active { color: var(--red); }
.drawer-chevron { width: 12px; height: 8px; transition: transform 0.3s ease; flex-shrink: 0; }
.drawer-programs.open .drawer-chevron { transform: rotate(180deg); }
.drawer-programs-sub { padding: 0 0 8px 16px; }
.drawer-programs-sub a {
  display: block;
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--light-gray);
  padding: 10px 0;
  border-bottom: none;
}
.drawer-programs-sub a:hover, .drawer-programs-sub a.active { color: var(--red); }

/* =====================================================
   POP-UP / MODAL
   ===================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999; /* Above cursor glow (9997) and navbar (9998) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.modal-card {
  background: var(--dark);
  border: 2px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  max-width: 520px;
  width: 100%;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.active .modal-card { transform: translateY(0); }
.modal-close {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition);
}
.modal-close:hover { color: var(--red); }
.modal-logo {
  text-align: center;
  margin-bottom: 20px;
}
.modal-logo .zen-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto 8px;
}
.modal-logo h3 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--white);
}
.modal-logo p { font-size: 0.85rem; color: var(--mid-gray); margin-top: 4px; }

.modal-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-form .form-group {
  margin-bottom: 14px;
}
.modal-form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--mid-gray);
  margin-bottom: 5px;
  font-family: var(--font-head);
  text-transform: uppercase;
}
.modal-form input:not([type="checkbox"]),
.modal-form select,
.modal-form textarea {
  width: 100%;
  background: var(--mid-dark);
  border: 1px solid #333;
  border-radius: var(--radius);
  padding: 11px 14px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color var(--transition);
  appearance: none;
}
.modal-form input:not([type="checkbox"]):focus,
.modal-form select:focus,
.modal-form textarea:focus {
  outline: none;
  border-color: var(--red);
}
.modal-form select option { background: var(--dark); color: var(--white); }
.modal-form .btn-red { width: 100%; margin-top: 6px; font-size: 1rem; padding: 15px; }
.required-star { color: #CC0000; }
/* Program dropdown */
#modalProgram {
  width: 100%;
  padding: 12px 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: #333333;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
#modalProgram:focus { outline: 2px solid #CC0000; outline-offset: 0; border-color: transparent; }
#modalProgram option { background: #fff; color: #333; }
/* Popup privacy link */
.popup-privacy-link { font-size: 10px; color: #888888; text-align: center; margin-top: 12px; }
.popup-privacy-link a { color: #CC0000; text-decoration: underline; cursor: pointer; }
.popup-privacy-link a:hover { color: #ff0000; }
/* Consent checkboxes */
.consent-item { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.consent-item input[type="checkbox"] { appearance: checkbox; -webkit-appearance: checkbox; width: 14px; height: 14px; min-width: 14px; margin-top: 2px; accent-color: #CC0000; cursor: pointer; flex-shrink: 0; pointer-events: all !important; position: relative; z-index: 1000001; }
.consent-item label { font-size: 10px; line-height: 1.4; color: #888888; cursor: pointer; font-weight: normal; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }

/* =====================================================
   HERO (shared)
   ===================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,13,13,0.92) 0%, rgba(13,13,13,0.6) 50%, rgba(13,13,13,0.85) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: calc(var(--nav-height) + var(--zk-banner-h, 0px) + 60px) 20px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Animations */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-left  { animation: fadeInLeft  0.8s ease forwards; }
.fade-right { animation: fadeInRight 0.8s ease 0.2s forwards; opacity: 0; }
.fade-up    { animation: fadeInUp    0.8s ease 0.4s forwards; opacity: 0; }

/* Page hero (inner pages, smaller) */
.page-hero {
  position: relative;
  padding: calc(var(--nav-height) + var(--zk-banner-h, 0px) + 60px) 0 60px;
  background: var(--black);
  text-align: center;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.01) 2px,
    rgba(255,255,255,0.01) 4px
  );
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--red);
}
.page-hero h1 {
  position: relative;
  z-index: 1;
  color: var(--white);
}
.page-hero p {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 16px auto 0;
  color: var(--mid-gray);
  font-size: 1.1rem;
}

/* Red accent on word */
.accent-red { color: var(--red); }

/* =====================================================
   BREADCRUMB
   ===================================================== */
.breadcrumb {
  background: var(--dark);
  padding: 10px 0;
  border-bottom: 1px solid #222;
}
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--mid-gray);
}
.breadcrumb ol li + li::before { content: '›'; margin-right: 8px; }
.breadcrumb ol a { color: var(--mid-gray); transition: color var(--transition); }
.breadcrumb ol a:hover { color: var(--red); }
.breadcrumb ol li:last-child { color: var(--white); }

/* =====================================================
   SECTION: PROGRAMS CARDS
   ===================================================== */
.programs-section {
  background: var(--dark);
  padding: 80px 0;
}
.programs-section h2 {
  text-align: center;
  margin-bottom: 50px;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.program-card {
  background: var(--dark-card);
  border-top: 4px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover !important;
  background-position: center !important;
}
.program-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(204,0,0,0.08), transparent);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 1;
}
.program-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.program-card:hover::before { opacity: 1; }
.program-card h3 { color: var(--white); margin-bottom: 12px; position: relative; z-index: 2; }
.program-card p { font-size: 0.9rem; margin-bottom: 22px; position: relative; z-index: 2; }
.program-card .btn { font-size: 0.85rem; padding: 10px 22px; position: relative; z-index: 2; align-self: center; }

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testimonials-section {
  background: var(--charcoal);
  padding: 80px 0;
}
.testimonials-section h2 {
  text-align: center;
  margin-bottom: 12px;
}
.testimonials-section .section-sub {
  text-align: center;
  color: var(--mid-gray);
  margin-bottom: 50px;
  font-size: 0.95rem;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition);
}
.review-card:hover { transform: translateY(-4px); }
.review-card .watermark {
  position: absolute;
  bottom: -10px; right: -10px;
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.04);
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 1.1rem;
  pointer-events: none;
  user-select: none;
}
.stars { color: var(--gold); font-size: 1.1rem; margin-bottom: 14px; }
.review-text { font-size: 0.9rem; font-style: italic; margin-bottom: 16px; line-height: 1.7; }
.reviewer-name { font-family: var(--font-head); font-size: 1rem; color: var(--red); letter-spacing: 0.05em; }
.reviewer-label { font-size: 0.78rem; color: var(--mid-gray); margin-top: 2px; }

/* =====================================================
   CTA BANNER
   ===================================================== */
.cta-banner {
  background: var(--red);
  padding: 50px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '禅';
  position: absolute;
  font-size: 20rem;
  color: rgba(0,0,0,0.08);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: serif;
  line-height: 1;
}
.cta-banner h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--white);
  margin-bottom: 20px;
  position: relative;
}
.cta-banner .btn {
  background: var(--white);
  color: var(--red);
  font-size: 1.1rem;
  position: relative;
}
.cta-banner .btn:hover { background: var(--charcoal); color: var(--white); }

/* =====================================================
   ABOUT SECTION (Home)
   ===================================================== */
.about-section {
  background: #f4f4f4;
  padding: 80px 0;
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.about-mosaic img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform var(--transition);
}
.about-mosaic img:hover { transform: scale(1.03); }
.about-text h2 { color: var(--charcoal); font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 20px; }
.about-text p { color: #444; margin-bottom: 16px; }
.about-text .btn { margin-top: 10px; }

/* =====================================================
   JOURNEY / CTA SECTION
   ===================================================== */
.journey-section {
  background: var(--dark);
  padding: 80px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.journey-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(204,0,0,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(204,0,0,0.05) 0%, transparent 50%);
}
.journey-section h2 { position: relative; margin-bottom: 16px; font-size: clamp(2rem, 5vw, 3.5rem); }
.journey-section p { position: relative; max-width: 600px; margin: 0 auto 30px; }
.journey-section .btn { position: relative; }

/* =====================================================
   BENEFITS GRID
   ===================================================== */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.benefit-card {
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  border-bottom: 3px solid var(--red);
  transition: transform var(--transition);
}
.benefit-card:hover { transform: translateY(-4px); }
.benefit-card .icon { font-size: 2.2rem; margin-bottom: 12px; }
.benefit-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.benefit-card p { font-size: 0.85rem; color: var(--mid-gray); }

/* =====================================================
   FAQ
   ===================================================== */
.faq-section { padding: 80px 0; background: var(--dark); }
.faq-section h2 { text-align: center; margin-bottom: 40px; }
.faq-item {
  border-bottom: 1px solid #2a2a2a;
  padding: 0;
  margin-bottom: 0;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 20px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition);
}
.faq-question:hover { color: var(--red); }
.faq-question .faq-icon {
  width: 24px;
  height: 24px;
  border: 1px solid var(--mid-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: var(--transition);
}
.faq-item.open .faq-icon {
  background: var(--red);
  border-color: var(--red);
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: var(--mid-gray);
  font-size: 0.92rem;
  line-height: 1.75;
}
.faq-item.open .faq-answer { max-height: 300px; padding-bottom: 18px; }

/* =====================================================
   SCHEDULE
   ===================================================== */
.schedule-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.schedule-tab {
  padding: 10px 20px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  background: var(--dark-card);
  border: 1px solid #333;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--mid-gray);
  cursor: pointer;
  transition: var(--transition);
}
.schedule-tab:hover { color: var(--white); border-color: #555; }
.schedule-tab.active {
  background: var(--mid-dark);
  border-color: #444;
  border-bottom-color: var(--red); /* small red accent indicates active tab */
  color: var(--white);
}
.schedule-content { display: none; }
.schedule-content.active { display: block; }
.schedule-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--dark-card);
  border-radius: var(--radius);
  margin-bottom: 10px;
  border: 1px solid #2a2a2a;
  transition: transform var(--transition), border-color var(--transition);
}
.schedule-item:hover {
  transform: translateX(4px);
  border-color: #3a3a3a;
}
/* Category indication is now carried by the existing badge + program-name label,
   not by colored side stripes. Multi-color stripes violate the one-color brand. */
.schedule-time {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--white);
  min-width: 160px;
  white-space: nowrap;
}
.schedule-name { font-weight: 600; font-size: 0.95rem; }
.schedule-level { font-size: 0.8rem; color: var(--mid-gray); }
.schedule-badge {
  margin-left: auto;
  font-size: 0.7rem;
  font-family: var(--font-head);
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
}
/* Badges use a single neutral treatment. Adult gets the brand red as a small accent;
   the rest stay neutral so the page reads as one-color. */
.schedule-item .schedule-badge          { background: var(--mid-dark); color: var(--light-gray); border: 1px solid #333; }
.schedule-item.adult .schedule-badge    { background: rgba(204,0,0,0.2); color: #ff6666; border-color: rgba(204,0,0,0.35); }
.schedule-item.kids .schedule-badge     { background: var(--mid-dark); color: var(--light-gray); border-color: #333; }
.schedule-item.judo .schedule-badge     { background: var(--mid-dark); color: var(--light-gray); border-color: #333; }
.schedule-item.openmat .schedule-badge  { background: var(--mid-dark); color: var(--mid-gray);   border-color: #333; }

.schedule-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--mid-gray);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
/* Legend dots: red marks the primary "Adult" category as a subtle brand accent;
   other categories are neutral. No blue/green/gray creep. */
.legend-dot.adult   { background: var(--red); }
.legend-dot.kids    { background: var(--light-gray); }
.legend-dot.judo    { background: var(--mid-gray); }
.legend-dot.openmat { background: #555; }

/* No class day */
.no-class {
  text-align: center;
  padding: 40px;
  color: var(--mid-gray);
  font-style: italic;
}

/* =====================================================
   GALLERY
   ===================================================== */
.gallery-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  justify-content: center;
}
.filter-btn {
  padding: 8px 20px;
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  background: var(--dark-card);
  border: 1px solid #333;
  border-radius: 30px;
  color: var(--mid-gray);
  cursor: pointer;
  transition: var(--transition);
}
.filter-btn:hover { color: var(--white); border-color: #555; }
.filter-btn.active {
  background: var(--mid-dark);
  border-color: var(--white);
  color: var(--white);
}
.gallery-grid {
  columns: 3;
  column-gap: 16px;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay svg { width: 36px; height: 36px; fill: none; stroke: white; stroke-width: 2; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
}

/* =====================================================
   INSTRUCTOR CARDS
   ===================================================== */
.instructors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.instructor-card {
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.instructor-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.instructor-img {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: var(--mid-dark);
}
.instructor-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity var(--transition);
}
.instructor-card:hover .instructor-img img { opacity: 1; }
.instructor-banner {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
}
.instructor-banner .meet { font-size: 0.7rem; letter-spacing: 0.15em; color: var(--mid-gray); font-family: var(--font-head); }
.instructor-banner h3 { color: var(--white); font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.belt-badge {
  display: inline-block;
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(204, 0, 0, 0.55);
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 4px;
}
.instructor-body { padding: 22px 24px; }
.instructor-body p { font-size: 0.88rem; color: var(--light-gray); line-height: 1.7; }

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.contact-info h2 { margin-bottom: 24px; font-size: 2rem; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.contact-detail .icon-wrap {
  width: 44px;
  height: 44px;
  background: var(--red-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(204,0,0,0.3);
}
.contact-detail .icon-wrap svg { width: 20px; height: 20px; stroke: var(--red); fill: none; stroke-width: 2; }
.contact-detail a { color: var(--light-gray); transition: color var(--transition); }
.contact-detail a:hover { color: var(--red); }
.contact-detail strong { display: block; font-family: var(--font-head); letter-spacing: 0.05em; margin-bottom: 2px; }
.social-icons-row { display: flex; gap: 12px; margin-top: 20px; }
.social-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dark-card);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.social-circle:hover { background: var(--red); border-color: var(--red); transform: scale(1.1); }
.social-circle svg { width: 20px; height: 20px; fill: var(--white); }

/* Contact Form */
.contact-form { background: var(--dark-card); padding: 36px; border-radius: var(--radius-lg); border: 1px solid #2a2a2a; }
.contact-form h2 { margin-bottom: 24px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--mid-gray);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--mid-dark);
  border: 1px solid #333;
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color var(--transition);
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--red); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-success {
  display: none;
  background: rgba(34,197,94,0.1);
  border: 1px solid #22c55e;
  border-radius: var(--radius);
  padding: 16px;
  color: #86efac;
  text-align: center;
  margin-top: 12px;
  font-size: 0.92rem;
}

/* Business Hours */
.hours-table { width: 100%; margin-top: 30px; }
.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #222;
  font-size: 0.9rem;
}
.hours-row:last-child { border-bottom: none; }
.hours-day { color: var(--mid-gray); }
.hours-time { color: var(--white); font-weight: 600; }

/* =====================================================
   MAP FACADE (LAZY LOAD)
   ===================================================== */
.map-section {
  padding: 0;
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}
.map-container {
  height: 400px; overflow: hidden; position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}
.map-facade {
  width: 100%; height: 100%; cursor: pointer; position: relative;
  background-color: #1e2124;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  display: flex; align-items: center; justify-content: center;
}
.map-facade-overlay {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 24px 36px;
  background: rgba(0,0,0,0.5); border-radius: 8px;
  text-align: center;
}
.map-facade:hover .map-facade-overlay { background: rgba(0,0,0,0.3); }
.map-facade-pin { width: 48px; height: 48px; fill: #CC0000; animation: none; transform: none; }
.map-facade-text { color: #fff; font-family: var(--font-head); font-size: 0.9rem; letter-spacing: 0.12em; background: rgba(0,0,0,0.6); padding: 6px 14px; border-radius: 20px; white-space: nowrap; }
.map-facade iframe { width: 100%; height: 100%; border: 0; transition: none; }
/* Disable all animations/transitions/will-change on map area */
.map-section, .map-section *,
.map-container, .map-container *,
.map-facade, .map-facade * {
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* =====================================================
   FOOTER
   ===================================================== */
footer {
  background: var(--black);
  border-top: 2px solid var(--red);
  padding: 60px 0 30px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid #1e1e1e;
}
.footer-brand .footer-logo {
  display: block;
  margin-bottom: 16px;
  text-decoration: none;
}
.footer-logo-img {
  height: 60px;
  width: auto;
  display: block;
  object-fit: contain;
}
.footer-brand p { font-size: 0.85rem; color: var(--mid-gray); max-width: 280px; }
.footer-col h4 {
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 18px;
  text-transform: uppercase;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  transition: color var(--transition), opacity var(--transition);
}
.footer-col ul a:hover { color: var(--red); opacity: 1; }
.footer-col .contact-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--mid-gray);
}
.footer-col .contact-line a { color: var(--mid-gray); }
.footer-col .contact-line a:hover { color: var(--white); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
/* Footer bottom bar */
.footer-bottom-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
  margin-top: 28px;
}
.footer-bottom-bar p { color: #aaaaaa; font-size: 13px; margin: 0; }
.footer-bottom-bar a { color: #aaaaaa; font-size: 13px; text-decoration: none; transition: color 0.2s ease; white-space: nowrap; }
.footer-bottom-bar a:hover { color: #CC0000; }
@media (max-width: 768px) {
  .footer-bottom-bar { flex-direction: column; gap: 8px; text-align: center; }
}

/* =====================================================
   MOBILE BOTTOM BAR
   ===================================================== */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9998; /* Above cursor glow (9997) */
  background: var(--black);
  border-top: 1px solid #2a2a2a;
  padding: 10px 16px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mobile-bar .call-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--dark-card);
  border: 1px solid #333;
  border-radius: var(--radius);
  padding: 11px 18px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  flex: 1;
  justify-content: center;
}
.mobile-bar .call-btn svg { width: 18px; height: 18px; stroke: var(--red); fill: none; stroke-width: 2; }
.mobile-bar .free-btn {
  flex: 1.2;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 11px 18px;
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
}

/* =====================================================
   AGE GROUP CARDS (Kids page)
   ===================================================== */
.age-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.age-card {
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  border-top: 4px solid var(--red);
  transition: transform var(--transition);
}
.age-card:hover { transform: translateY(-6px); }
.age-card .age-icon { font-size: 2.5rem; margin-bottom: 14px; }
.age-card h3 { margin-bottom: 8px; }
.age-card .age-range {
  display: inline-block;
  background: var(--red-light);
  color: var(--red);
  font-size: 0.75rem;
  font-family: var(--font-head);
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  border: 1px solid rgba(204,0,0,0.3);
}
.age-card p { font-size: 0.85rem; color: var(--mid-gray); }

/* Steps section */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.step-card {
  text-align: center;
  padding: 28px 18px;
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  position: relative;
}
.step-number {
  width: 48px;
  height: 48px;
  background: var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1.3rem;
  margin: 0 auto 16px;
}
.step-card h3 { font-size: 1rem; margin-bottom: 8px; }
.step-card p { font-size: 0.82rem; color: var(--mid-gray); }

/* Judo technique grid */
.technique-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.technique-card {
  background: var(--dark-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-left: 4px solid var(--red);
}
.technique-card .tnum {
  font-family: var(--font-head);
  font-size: 2rem;
  color: rgba(204,0,0,0.3);
  line-height: 1;
  flex-shrink: 0;
}
.technique-card h3 { font-size: 1rem; margin-bottom: 6px; }
.technique-card p { font-size: 0.85rem; color: var(--mid-gray); }

/* Callout box */
.callout-box {
  background: var(--red-light);
  border: 1px solid rgba(204,0,0,0.3);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 24px 0;
  color: var(--light-gray);
  font-size: 0.92rem;
}
.callout-box strong { color: var(--red); }

/* Section divider */
.divider {
  width: 60px;
  height: 4px;
  background: var(--red);
  margin: 16px 0 30px;
}
.divider.center { margin-left: auto; margin-right: auto; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .instructors-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .gallery-grid { columns: 2; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .age-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-drawer { display: block; }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-bottom: 120px;
  }
  .hero-inner .hero-right { text-align: center; }

  .about-inner { grid-template-columns: 1fr; }
  .about-mosaic { grid-template-columns: 1fr 1fr; }

  .programs-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .gallery-grid { columns: 1; }
  .instructors-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .age-cards { grid-template-columns: 1fr; }
  .technique-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .modal-form .form-row { grid-template-columns: 1fr; }

  .mobile-bar { display: flex; }
  body { padding-bottom: 70px; }
}

@media (max-width: 480px) {
  .steps-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .schedule-tabs { gap: 4px; }
  .schedule-tab { padding: 8px 12px; font-size: 0.82rem; }
  .about-mosaic { grid-template-columns: 1fr; }
}

/* =====================================================
   SITE-WIDE ANIMATIONS
   ===================================================== */

/* ── Hero Ken Burns ── */
@keyframes kenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}
.hero-kbg {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 0;
  animation: kenBurns 14s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-overlay-dark {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Navbar on-load animations ── */
@keyframes navLogoSlide {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes navLinkDrop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-logo { animation: navLogoSlide 0.6s ease both; }
.nav-links a:nth-child(1)  { animation: navLinkDrop 0.4s ease 0.08s  both; }
.nav-links a:nth-child(2)  { animation: navLinkDrop 0.4s ease 0.16s  both; }
.nav-links .nav-dropdown   { animation: navLinkDrop 0.4s ease 0.24s  both; }
.nav-links a:nth-child(3)  { animation: navLinkDrop 0.4s ease 0.24s  both; }
.nav-links a:nth-child(4)  { animation: navLinkDrop 0.4s ease 0.32s  both; }
.nav-links a:nth-child(5)  { animation: navLinkDrop 0.4s ease 0.40s  both; }
.nav-links a:nth-child(6)  { animation: navLinkDrop 0.4s ease 0.48s  both; }
.nav-links a:nth-child(7)  { animation: navLinkDrop 0.4s ease 0.56s  both; }
.nav-links a:nth-child(8)  { animation: navLinkDrop 0.4s ease 0.64s  both; }
.nav-links .nav-cta        { animation: navLinkDrop 0.4s ease 0.72s  both; }

/* Nav CTA red-glow pulse (3s loop) */
@keyframes navCtaGlow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(204,0,0,0.65); }
  50%       { box-shadow: 0 0 0 8px rgba(204,0,0,0); }
}
.nav-links .nav-cta { animation: navLinkDrop 0.4s ease 0.72s both, navCtaGlow 3s ease 1.2s infinite; }

/* ── CTA Banner shimmer ── */
@keyframes ctaShimmer {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
.cta-banner {
  background: linear-gradient(270deg, #CC0000, #990000, #BB1111, #aa0000, #CC0000);
  background-size: 300% 300%;
  animation: ctaShimmer 7s ease infinite;
}

/* CTA banner button scale on hover */
.cta-banner .btn { transition: transform 0.2s ease, background 0.2s ease; }
.cta-banner .btn:hover { transform: scale(1.05); }

/* ── Program card hover: clean black lift, no red glow (red glow competes with primary CTA) ── */
.program-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}
/* LEARN MORE smooth fill on hover (white invert, matches the new secondary CTA) */
.program-card .btn-outline-red {
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.program-card .btn-outline-red:hover {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--white);
}

/* ── Instructor card: photo zoom on hover ── */
.instructor-img img {
  transition: transform 0.4s ease, opacity var(--transition);
}
.instructor-card:hover .instructor-img img {
  transform: scale(1.03);
}

/* ── Footer social icon: rotate + brighten on hover ── */
.footer-social .social-circle,
.social-icons-row .social-circle {
  transition: transform 0.3s ease, filter 0.3s ease, background 0.3s ease;
}
.footer-social .social-circle:hover,
.social-icons-row .social-circle:hover {
  transform: rotate(8deg) scale(1.1);
  filter: brightness(1.25);
}

/* ── Star twinkle (sequential via nth-child) ── */
@keyframes starPop {
  0%  { transform: scale(1);    opacity: 0.6; }
  50% { transform: scale(1.25); opacity: 1;   }
  100%{ transform: scale(1);    opacity: 1;   }
}
.review-card .stars { letter-spacing: 2px; }

/* ── GPU acceleration hints ── */
.hero-kbg,
.program-card,
.instructor-card,
.review-card,
[data-aos] {
  will-change: transform, opacity;
}

/* =====================================================
   REVIEWS CAROUSEL
   ===================================================== */

.reviews-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.reviews-carousel {
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.reviews-track {
  display: flex;
  gap: 24px;
  will-change: transform;
  /* transition set by JS for precise control */
}

/* Cards in the track are sized by JS — override grid layout */
.reviews-track .review-card {
  flex-shrink: 0;
  /* flex-basis set dynamically */
}

/* Arrow buttons */
.carousel-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(204,0,0,0.82);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform 0.2s ease;
  z-index: 10;
}
.carousel-btn:hover  { background: var(--red); transform: scale(1.1); }
.carousel-btn:focus  { outline: 2px solid var(--red); outline-offset: 2px; }
.carousel-btn svg    { width: 20px; height: 20px; }

/* Dot indicators */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3a3a;
  border: 1px solid #444;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), transform 0.2s ease, border-color var(--transition);
}
.carousel-dot.active {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.3);
}
.carousel-dot:focus { outline: 2px solid var(--red); outline-offset: 2px; }

/* Mobile: hide arrows since swipe works natively */
@media (max-width: 540px) {
  .carousel-btn { display: none; }
  .reviews-carousel-wrapper { gap: 0; }
}

/* =====================================================
   PROGRAM CARDS — EXPAND / UN-BLUR INTERACTION
   ===================================================== */

/* Flex container replaces CSS grid for expansion effect */
.programs-grid {
  display: flex !important;
  gap: 16px;
  align-items: stretch;
}

/* Card base: flex item, no background (image lives in .card-bg) */
.program-card {
  flex: 1;
  min-width: 0;
  background: none !important;
  background-size: unset !important;
  background-position: unset !important;
  padding: 0;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border-top: 4px solid var(--red);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: flex 0.5s ease, box-shadow 0.5s ease;
}

/* Blurred background image layer */
.program-card .card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(3px);
  transform: scale(1.07); /* overshoot prevents blur edge bleed */
  transition: filter 0.5s ease, transform 0.5s ease;
  z-index: 0;
}

/* Dark gradient overlay — replaces old ::before red accent */
.program-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.50), rgba(0,0,0,0.80));
  z-index: 1;
  opacity: 1 !important;
  transition: background 0.5s ease;
}

/* Content sits above overlay */
.program-card .card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  width: 100%;
}

.program-card h3 {
  color: var(--white);
  margin-bottom: 8px;
  transition: transform 0.4s ease;
  position: relative;
  z-index: 2;
}

/* Age / level badge */
.card-badge {
  display: inline-block;
  background: rgba(204,0,0,0.75);
  color: rgba(255,255,255,0.92);
  font-size: 0.72rem;
  font-family: var(--font-head);
  letter-spacing: 0.09em;
  padding: 2px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
  opacity: 0.85;
}

/* Description: hidden at rest, revealed on hover */
.card-desc {
  font-size: 0.9rem;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  position: relative;
  z-index: 2;
}

.program-card .btn {
  font-size: 0.85rem;
  padding: 10px 22px;
  position: relative;
  z-index: 2;
  align-self: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ── Container hover: shrink non-active cards ── */
.programs-grid:hover .program-card          { flex: 0.7; }
.programs-grid:hover .program-card:hover    { flex: 1.6; box-shadow: 0 0 28px rgba(204,0,0,0.3), 0 20px 50px rgba(0,0,0,0.6); }

/* Un-blur image on hovered card */
.programs-grid:hover .program-card:hover .card-bg {
  filter: blur(0px);
  transform: scale(1.0);
}

/* Lighten overlay when card is active */
.programs-grid:hover .program-card:hover::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0.52));
}

/* Title slides up on hover */
.programs-grid:hover .program-card:hover h3 { transform: translateY(-5px); }

/* Description fades in on hover */
.programs-grid:hover .program-card:hover .card-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Neutralize old translateY hover (now handled by flex) */
.program-card:hover { transform: none; }

/* ── Mobile: stack vertically, disable expand/blur ── */
@media (max-width: 768px) {
  .programs-grid {
    flex-direction: column !important;
    gap: 20px;
  }
  .program-card {
    flex: unset !important;
    width: 100% !important;
    min-height: 320px;
  }
  .program-card .card-bg {
    filter: blur(0px) !important;
    transform: scale(1.0) !important;
  }
  .program-card::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(0,0,0,0.72)) !important;
  }
  .card-desc {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important;
  }
  .programs-grid:hover .program-card { flex: unset; }
}

@media (max-width: 768px) {
  .schedule-time { font-size: 1.1rem; }
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
  /* AOS override */
  [data-aos] {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }
  [data-aos].aos-animate {
    opacity:   1 !important;
    transform: none !important;
  }
}

/* =====================================================
   CUSTOM CURSOR GLOW & TAP BURST
   ===================================================== */

/* Glow blob only — no dot, no ring */
#cursor-glow {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204,0,0,0.15) 0%, rgba(204,0,0,0.05) 40%, transparent 70%);
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9997;
  transition: opacity 0.25s ease, width 0.3s ease, height 0.3s ease;
}
#cursor-glow.glow-active {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(204,0,0,0.28) 0%, rgba(204,0,0,0.10) 40%, transparent 70%);
}

/* Mobile tap burst */
.tap-burst {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204,0,0,0.5), transparent);
  position: fixed;
  transform: translate(-50%, -50%) scale(0.3);
  pointer-events: none;
  z-index: 9999;
  animation: tapGlow 0.6s ease-out forwards;
}
@keyframes tapGlow {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #cursor-glow, .tap-burst { display: none !important; }
}

/* =====================================================
   MOBILE IMAGE LAYOUT — Program Pages
   ===================================================== */

/* Mobile image strip — hidden on desktop */
.mobile-image-strip {
  display: none;
}

@media (max-width: 768px) {
  /* Stack two-column text+image layouts into a single column */
  .two-col-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Text div fills full width */
  .two-col-section > div:first-child {
    width: 100% !important;
  }

  /* Image div: full width, fixed height, cover crop */
  .two-col-section > div:last-child {
    width: 100% !important;
  }

  .two-col-section > div:last-child img {
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Show mobile horizontal image strip */
  .mobile-image-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    scrollbar-width: none;
    background: #111;
  }

  .mobile-image-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-image-strip img {
    width: 260px !important;
    min-width: 260px !important;
    height: 180px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px !important;
    scroll-snap-align: start;
    flex-shrink: 0;
    margin: 0 !important;
    display: block !important;
  }
}


/* =====================================================
   ENHANCED PAGE-HERO + STANDALONE PAGE-TICKER
   Lighter upgrade for info pages (schedule, contact, gallery, etc.)
   Enhancements opt in via data-glyph="..." on .page-hero.
   ===================================================== */
.page-hero {
  /* layered noise-grain texture on top of the existing black */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0.32 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  background-color: var(--black);
}

/* Drift-glyph background — opt in by setting data-glyph="禅" (or any character) on .page-hero */
.page-hero[data-glyph]::before {
  content: attr(data-glyph);
  background: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Times New Roman', serif;
  font-size: clamp(18rem, 30vw, 36rem);
  color: rgba(255, 255, 255, 0.03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-weight: 400;
  animation: ph-zen-drift 22s ease-in-out infinite;
}
.page-hero[data-glyph] h1,
.page-hero[data-glyph] p {
  position: relative;
  z-index: 1;
}

/* Animated underline-draw under the accent-red word — opt in via data-glyph */
.page-hero[data-glyph] h1 .accent-red {
  position: relative;
  display: inline-block;
}
.page-hero[data-glyph] h1 .accent-red::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--red) 8%, var(--red) 92%, transparent);
  transform: skewY(-1.4deg) scaleX(0);
  transform-origin: left center;
  animation: ph-accent-draw 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Standalone page-ticker — drop in above any .page-hero for a marquee strip.
   --zk-banner-h is 0px by default (no banner). When body.has-zk-banner is set,
   it expands to 42px desktop / 64–68px mobile, so the ticker shifts down
   automatically to clear both the announcement banner AND the navbar. */
.page-ticker {
  position: relative;
  margin-top: calc(var(--nav-height) + var(--zk-banner-h, 0px));
  padding: 13px 0;
  border-bottom: 1px solid #1f1f1f;
  background:
    linear-gradient(90deg, var(--black), transparent 8%, transparent 92%, var(--black)),
    linear-gradient(90deg, transparent, rgba(204, 0, 0, 0.06), transparent),
    var(--black);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.page-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  white-space: nowrap;
  animation: ph-ticker-scroll 42s linear infinite;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--light-gray);
  will-change: transform;
}
.page-ticker-track > span {
  display: inline-flex;
  align-items: center;
  gap: 38px;
}
.page-ticker-track .ti-dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
}
.page-ticker-track .ti-accent { color: var(--red); }
.page-ticker-track .ti-star { color: var(--gold); letter-spacing: 0.08em; }

/* When ticker sits above page-hero, page-hero already starts after the nav */
.page-ticker + .page-hero { padding-top: 56px; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .page-hero[data-glyph]::before,
  .page-ticker-track,
  .page-hero[data-glyph] h1 .accent-red::after { animation: none !important; }
  .page-hero[data-glyph] h1 .accent-red::after { transform: skewY(-1.4deg) scaleX(1); }
}

/* =====================================================
   ADULT BJJ HERO — "Field Manual"
   Full-bleed cinematic cover. Single dominant photograph.
   No ticker, no stamp, no drift glyph. Title-card billing block.
   ===================================================== */
@keyframes fm-shutter-open {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes fm-scanline {
  0%   { transform: translateX(-110%); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { transform: translateX(110%);  opacity: 0; }
}
@keyframes fm-billing-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fm-cta-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,0,0,0.55); }
  50%      { box-shadow: 0 0 0 14px rgba(204,0,0,0); }
}

.fm-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  color: var(--white);
  padding-top: calc(var(--nav-height) + var(--zk-banner-h, 0px));
}

/* Photograph — fills the entire viewport, then a shutter pull on scroll */
.fm-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fm-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 68%;
  transform: scale(1.06);
  animation: fm-shutter-open 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  /* Scroll-driven zoom-out for browsers that support it */
  animation-timeline: scroll();
  animation-range: 0 600px;
}
@supports (animation-timeline: scroll()) {
  .fm-hero__photo img {
    animation: fm-shutter-pull linear both;
    animation-timeline: scroll();
    animation-range: 0 600px;
  }
}
@keyframes fm-shutter-pull {
  from { transform: scale(1.06); }
  to   { transform: scale(1.00); }
}

/* Scrim — diagonal + left-column. Three layered gradients:
   (1) heavy left half so the billing block always reads,
   (2) strong top so any bright wall behind the slate is killed,
   (3) strong bottom so the meta strip stays anchored.
   The right side stays cleaner to let the action photo breathe. */
.fm-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(13,13,13,0.92) 0%,
      rgba(13,13,13,0.74) 30%,
      rgba(13,13,13,0.32) 58%,
      rgba(13,13,13,0.10) 82%,
      rgba(13,13,13,0.05) 100%),
    linear-gradient(180deg,
      rgba(13,13,13,0.78) 0%,
      rgba(13,13,13,0.45) 14%,
      rgba(13,13,13,0.10) 32%,
      rgba(13,13,13,0.10) 52%,
      rgba(13,13,13,0.65) 76%,
      rgba(13,13,13,0.95) 100%),
    radial-gradient(ellipse 60% 50% at 22% 78%, rgba(13,13,13,0.55), transparent 70%);
  pointer-events: none;
}

/* Film grain — SVG noise, ultra-fine */
.fm-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.6 0'/></filter><rect width='280' height='280' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* Slow scanline — drifts across once per cycle */
.fm-hero__scanline {
  position: absolute;
  left: 0; right: 0;
  bottom: 32%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  z-index: 3;
  animation: fm-scanline 7s ease-in-out 2.2s infinite;
  pointer-events: none;
}

/* Inner content — top eyebrow, lower-left billing block, bottom metadata strip */
.fm-hero__inner {
  position: relative;
  z-index: 4;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 0;
  min-height: calc(100vh - var(--nav-height) - var(--zk-banner-h, 0px));
  min-height: calc(100dvh - var(--nav-height) - var(--zk-banner-h, 0px));
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 24px;
}

/* Top eyebrow — film slate label, contained dark backing for its own contrast floor */
.fm-hero__slate {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px 9px 14px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-gray);
  background: rgba(13,13,13,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  animation: fm-shutter-open 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fm-hero__slate::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--red);
}
.fm-hero__slate-vol {
  color: var(--white);
}
.fm-hero__slate-sep {
  width: 4px; height: 4px;
  background: var(--mid-gray);
  border-radius: 50%;
}

/* Spacer */
.fm-hero__spacer { min-height: 0; }

/* Billing block — lower-left poster credit. H1 + offer + CTA + phone */
.fm-hero__billing {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fm-shutter-open 1.1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fm-hero__title {
  font-family: var(--font-head);
  font-size: clamp(3.2rem, 9.5vw, 8rem);
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  /* Layered shadow stack — crisp 1px edge, mid halo, wide atmosphere.
     Guarantees legibility even if a bright photo region drifts under the type. */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.85),
    0 2px 6px rgba(0,0,0,0.75),
    0 6px 22px rgba(0,0,0,0.65),
    0 0 60px rgba(0,0,0,0.45);
}
.fm-hero__title-row {
  display: block;
}
.fm-hero__title-row + .fm-hero__title-row {
  margin-top: -0.06em;
}
.fm-hero__title-tail {
  font-size: 0.46em;
  letter-spacing: 0.18em;
  display: inline-block;
  margin-left: 0.6em;
  vertical-align: 0.62em;
  color: var(--light-gray);
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.6);
}
.fm-hero__rule {
  width: 120px;
  height: 2px;
  background: var(--red);
  transform-origin: left;
  animation: fm-billing-rule 0.7s 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fm-hero__offer {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  color: var(--light-gray);
  max-width: 560px;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.6);
}
.fm-hero__offer strong {
  color: var(--white);
  font-weight: 700;
}
.fm-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 6px;
}
.fm-hero__cta {
  /* identical .btn .btn-red treatment + pulse halo */
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), transform var(--transition);
  animation: fm-cta-halo 2.2s ease-in-out 1.6s infinite;
}
.fm-hero__cta:hover, .fm-hero__cta:focus-visible {
  background: var(--red-hover);
  transform: translateY(-2px);
  outline: none;
}
.fm-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.fm-hero__phone svg {
  width: 16px; height: 16px;
  fill: currentColor;
}
.fm-hero__phone:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.06);
}
.fm-hero__fineprint {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--mid-gray);
  margin: 0;
}
.fm-hero__fineprint .dot {
  width: 3px; height: 3px;
  background: var(--mid-gray);
  border-radius: 50%;
  display: inline-block;
}

/* Bottom metadata strip — film leader credits */
.fm-hero__meta {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 18px 0 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  animation: fm-shutter-open 1s 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fm-hero__meta-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fm-hero__meta-key {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.fm-hero__meta-val {
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.fm-hero__meta-val .star {
  color: var(--gold);
  margin-right: 4px;
}

/* Tablet */
@media (max-width: 1024px) {
  .fm-hero__inner { padding: 28px 24px 0; gap: 18px; }
  .fm-hero__title { font-size: clamp(3rem, 11vw, 6rem); }
  .fm-hero__meta { grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
}

/* Mobile */
@media (max-width: 640px) {
  .fm-hero { min-height: 92vh; min-height: 92dvh; }
  .fm-hero__inner { padding: 22px 18px 0; }
  .fm-hero__slate { font-size: 0.7rem; letter-spacing: 0.18em; gap: 10px; }
  .fm-hero__slate::before { width: 18px; }
  .fm-hero__title { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .fm-hero__title-tail { font-size: 0.5em; vertical-align: 0.5em; margin-left: 0.4em; }
  .fm-hero__offer { font-size: 0.98rem; }
  .fm-hero__cta-row { width: 100%; }
  .fm-hero__cta { width: 100%; }
  .fm-hero__phone { width: 100%; justify-content: center; }
  .fm-hero__meta {
    grid-template-columns: repeat(2, 1fr);
    padding: 14px 0 18px;
    gap: 12px 14px;
  }
  .fm-hero__meta-key { font-size: 0.62rem; }
  .fm-hero__meta-val { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-hero__photo img,
  .fm-hero__slate,
  .fm-hero__billing,
  .fm-hero__rule,
  .fm-hero__meta,
  .fm-hero__cta,
  .fm-hero__scanline {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .fm-hero__photo img { transform: scale(1.0); }
}

/* =====================================================
   ADULT BJJ — CLASS ANATOMY (60-min timeline) + DAY-PROGRESSION TRIPTYCH
   Replaces the 4-step "What to Expect" cards and 6-card "Benefits" grid.
   ===================================================== */
.anatomy {
  background: var(--charcoal);
  padding: 100px 0 110px;
  position: relative;
}
.anatomy__head {
  max-width: 1280px;
  margin: 0 auto 56px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: end;
}
.anatomy__eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid-gray);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.anatomy__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--red);
}
.anatomy__title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  text-align: right;
}

.anatomy__bar-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.anatomy__scale {
  display: grid;
  grid-template-columns: 25% 35% 25% 15%;
  gap: 0;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--mid-gray);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.anatomy__scale span {
  border-left: 1px solid rgba(255,255,255,0.12);
  padding: 0 0 6px 12px;
}
.anatomy__scale span:first-child { border-left: none; padding-left: 0; }

.anatomy__bar {
  display: grid;
  grid-template-columns: 25% 35% 25% 15%;
  gap: 0;
  height: 6px;
  background: var(--dark-card);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 28px;
}
.anatomy__bar > span {
  display: block;
  height: 100%;
  background: var(--mid-dark);
  border-right: 1px solid var(--charcoal);
}
.anatomy__bar > span:nth-child(1) { background: #2e2e2e; }
.anatomy__bar > span:nth-child(2) { background: #404040; }
.anatomy__bar > span:nth-child(3) { background: #2e2e2e; }
.anatomy__bar > span:nth-child(4) { background: #1f1f1f; }
.anatomy__bar > span:last-child { border-right: none; }

.anatomy__row {
  display: grid;
  grid-template-columns: 25% 35% 25% 15%;
  gap: 0;
}
.anatomy__cell {
  padding: 24px 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.anatomy__cell:first-child { border-left: none; padding-left: 0; }
.anatomy__cell:not(:first-child) { padding-left: 24px; }
.anatomy__num {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--red);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.anatomy__phase {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 10px;
  line-height: 1.05;
}
.anatomy__copy {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--mid-gray);
  margin: 0;
}

/* Day Progression triptych */
.daylog {
  background: var(--dark);
  padding: 100px 0 110px;
}
.daylog__head {
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 32px;
  text-align: center;
}
.daylog__eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid-gray);
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--red);
  margin-bottom: 22px;
}
.daylog__title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.0;
  margin: 0 0 14px;
}
.daylog__deck {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--mid-gray);
  max-width: 540px;
  margin: 0 auto;
}

.daylog__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.daylog__col {
  padding: 0 32px;
  border-left: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
}
.daylog__col:first-child { border-left: none; padding-left: 0; }
.daylog__col:last-child { padding-right: 0; }
.daylog__stamp {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.daylog__stamp em {
  font-style: normal;
  color: var(--red);
}
.daylog__day {
  font-family: var(--font-head);
  font-size: clamp(4rem, 8vw, 7rem);
  letter-spacing: 0;
  color: var(--white);
  line-height: 0.85;
  margin: 0 0 24px;
}
.daylog__day-tail {
  font-size: 0.32em;
  letter-spacing: 0.16em;
  display: block;
  color: var(--mid-gray);
  margin-top: 14px;
}
.daylog__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
  border-radius: 2px;
}
.daylog__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.18) contrast(1.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.daylog__col:hover .daylog__photo img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.05);
}
.daylog__head3 {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 12px;
  line-height: 1.1;
}
.daylog__copy {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--light-gray);
  margin: 0 0 14px;
}
.daylog__copy + .daylog__copy { color: var(--mid-gray); font-size: 0.88rem; }

@media (max-width: 980px) {
  .anatomy__head { grid-template-columns: 1fr; gap: 14px; }
  .anatomy__title { text-align: left; }
  .anatomy__scale,
  .anatomy__bar,
  .anatomy__row { grid-template-columns: 1fr 1fr; }
  .anatomy__cell {
    padding: 22px 16px 0;
    border-left: 1px solid rgba(255,255,255,0.08);
  }
  .anatomy__cell:first-child { padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.08); }
  .anatomy__cell:nth-child(odd) { border-left: none; padding-left: 0; }

  .daylog__grid { grid-template-columns: 1fr; gap: 56px; }
  .daylog__col { border-left: none; padding: 0; }
}
@media (max-width: 540px) {
  .anatomy { padding: 70px 0 80px; }
  .daylog  { padding: 70px 0 80px; }
  .anatomy__head, .anatomy__bar-wrap { padding: 0 18px; }
  .daylog__head, .daylog__grid { padding-left: 18px; padding-right: 18px; }
  .anatomy__scale, .anatomy__bar, .anatomy__row { grid-template-columns: 1fr; }
  .anatomy__cell:first-child { border-left: none; padding-left: 0; }
  .anatomy__cell { border-left: none; padding-left: 0; }
}

/* =====================================================
   JUDO HERO — "Throw Sequence" cinematic triptych
   Three sequential photos in a rigid 1fr/1fr/1fr filmstrip.
   Horizontal parallax on scroll. Center-frame kanji reveal on hover.
   ===================================================== */
@keyframes ts-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ts-rule-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes ts-cta-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,0,0,0.55); }
  50%      { box-shadow: 0 0 0 14px rgba(204,0,0,0); }
}

.ts-hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  padding-top: calc(var(--nav-height) + var(--zk-banner-h, 0px));
  overflow: hidden;
  isolation: isolate;
}

/* Top type stack — H1 + kanji watermark */
.ts-hero__top {
  position: relative;
  text-align: center;
  padding: 56px 24px 38px;
  max-width: 1280px;
  margin: 0 auto;
}
.ts-hero__kanji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -42%);
  font-family: serif;
  font-weight: 400;
  font-size: clamp(20rem, 38vw, 38rem);
  line-height: 0.8;
  color: rgba(255, 255, 255, 0.025);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ts-hero__eyebrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 0 0 18px;
  animation: ts-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ts-hero__eyebrow::before,
.ts-hero__eyebrow::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--red);
}
.ts-hero__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: clamp(3rem, 9vw, 7.5rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.95;
  margin: 0;
  animation: ts-rise 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ts-hero__title .alt {
  display: block;
  font-size: 0.32em;
  letter-spacing: 0.42em;
  color: var(--light-gray);
  margin-top: 14px;
  font-weight: 400;
}

/* Filmstrip — 3 frames, rigid grid with hairline dividers */
.ts-hero__strip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  height: clamp(360px, 56vh, 600px);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: var(--black);
  animation: ts-rise 1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ts-hero__frame {
  position: relative;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,0.12);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.ts-hero__frame:first-child { border-left: none; }
.ts-hero__frame img {
  position: absolute;
  inset: 0;
  width: 110%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(0.12) contrast(1.05);
  will-change: transform;
}
.ts-hero__frame:nth-child(1) img { left: -2%; }
.ts-hero__frame:nth-child(2) img { left: -5%; }
.ts-hero__frame:nth-child(3) img { left: -8%; }

/* Horizontal parallax — scroll-driven where supported */
@supports (animation-timeline: scroll()) {
  .ts-hero__frame:nth-child(1) img {
    animation: ts-pan-l linear both;
    animation-timeline: scroll();
    animation-range: 0 700px;
  }
  .ts-hero__frame:nth-child(3) img {
    animation: ts-pan-r linear both;
    animation-timeline: scroll();
    animation-range: 0 700px;
  }
}
@keyframes ts-pan-l { to { transform: translateX(-3%); } }
@keyframes ts-pan-r { to { transform: translateX(3%); } }

/* Frame number stamps */
.ts-hero__frame-num {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--white);
  background: rgba(13,13,13,0.78);
  padding: 6px 10px;
  z-index: 3;
  text-transform: uppercase;
}
.ts-hero__frame-cap {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--white);
  text-transform: uppercase;
  z-index: 3;
  text-shadow: 0 1px 16px rgba(0,0,0,0.7);
}
.ts-hero__frame-cap em {
  display: block;
  font-style: normal;
  color: var(--mid-gray);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  margin-bottom: 2px;
}

/* Center-frame kanji reveal — fires on hover of strip */
.ts-hero__reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ts-hero__reveal-kanji {
  font-family: serif;
  font-size: clamp(8rem, 18vw, 16rem);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
  transform: translateY(8px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ts-hero__reveal-tag {
  position: absolute;
  bottom: 22%;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: var(--white);
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0,0,0,0.8);
}
.ts-hero__strip:hover .ts-hero__frame { filter: brightness(0.55); }
.ts-hero__strip:hover .ts-hero__reveal { opacity: 1; }
.ts-hero__strip:hover .ts-hero__reveal-kanji { transform: translateY(0); }
.ts-hero__strip:hover .ts-hero__frame:nth-child(2) {
  filter: brightness(0.85);
}

/* Below-strip — metadata bar + CTA */
.ts-hero__deck {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.ts-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-head);
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-gray);
}
.ts-hero__meta .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--red);
  border-radius: 50%;
  margin: 0 4px;
  vertical-align: middle;
}
.ts-hero__deck-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ts-hero__cta {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  animation: ts-cta-halo 2.2s ease-in-out 1.4s infinite;
}
.ts-hero__cta:hover, .ts-hero__cta:focus-visible {
  background: var(--red-hover);
  transform: translateY(-2px);
  outline: none;
}
.ts-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.ts-hero__phone:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
.ts-hero__phone svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 900px) {
  .ts-hero__top { padding: 40px 20px 28px; }
  .ts-hero__strip { height: clamp(280px, 60vh, 520px); }
  .ts-hero__deck { grid-template-columns: 1fr; padding: 24px 20px 50px; gap: 18px; }
  .ts-hero__deck-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .ts-hero__cta { width: 100%; }
  .ts-hero__phone { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .ts-hero__strip { grid-template-columns: 1fr; height: auto; }
  .ts-hero__frame { height: 56vw; min-height: 240px; border-left: none; border-top: 1px solid rgba(255,255,255,0.12); }
  .ts-hero__frame:first-child { border-top: none; }
  .ts-hero__frame:nth-child(1) img,
  .ts-hero__frame:nth-child(2) img,
  .ts-hero__frame:nth-child(3) img { left: 0; width: 100%; }
  .ts-hero__title { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .ts-hero__title .alt { font-size: 0.42em; letter-spacing: 0.32em; }
  .ts-hero__meta { font-size: 0.74rem; gap: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-hero__eyebrow,
  .ts-hero__title,
  .ts-hero__strip,
  .ts-hero__cta { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ts-hero__frame img { transform: none !important; }
}

/* =====================================================
   JUDO — Lineage column + Tale of the Tape + Throw Taxonomy
   ===================================================== */
.lineage {
  background: var(--charcoal);
  padding: 100px 0 110px;
}
.lineage__head {
  max-width: 1280px;
  margin: 0 auto 56px;
  padding: 0 32px;
}
.lineage__eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--mid-gray);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lineage__eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--red);
}
.lineage__title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.0;
  margin: 0;
}

.lineage__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.lineage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.lineage__row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  align-items: baseline;
}
.lineage__year {
  font-family: var(--font-head);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  color: var(--mid-gray);
  text-transform: uppercase;
}
.lineage__name {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  letter-spacing: 0.04em;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.05;
}
.lineage__name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mid-gray);
  margin-top: 4px;
  line-height: 1.5;
}
.lineage__rank {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--mid-gray);
  text-transform: uppercase;
  text-align: right;
}
.lineage__row.is-here {
  background: rgba(204,0,0,0.04);
}
.lineage__row.is-here .lineage__name { color: var(--white); }
.lineage__row.is-here .lineage__year,
.lineage__row.is-here .lineage__rank { color: var(--red); }

.lineage__copy {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--light-gray);
}
.lineage__copy p + p { margin-top: 16px; }
.lineage__copy strong { color: var(--white); font-weight: 700; }
.lineage__photo {
  margin-top: 28px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
}
.lineage__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.18) contrast(1.05);
}

/* Tale of the Tape — instructor diptych */
.tape {
  background: var(--dark);
  padding: 100px 0 110px;
  position: relative;
}
.tape__head {
  max-width: 1280px;
  margin: 0 auto 56px;
  padding: 0 32px;
  text-align: center;
}
.tape__eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--red);
  border-top: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
  padding: 8px 16px;
  margin: 0 0 22px;
}
.tape__title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  line-height: 1.0;
}
.tape__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 48px;
  align-items: stretch;
}
.tape__divider {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
}
.tape__col { display: flex; flex-direction: column; }
.tape__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 24px;
  position: relative;
  background: var(--charcoal);
}
.tape__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(0.18) contrast(1.05);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
}
.tape__col:hover .tape__photo img {
  transform: scale(1.03);
  filter: grayscale(0) contrast(1.05);
}
.tape__name {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 4px;
  line-height: 1;
}
.tape__role {
  font-family: var(--font-head);
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 24px;
}
.tape__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tape__stat {
  padding: 14px 14px 14px 0;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.tape__stat:last-child { border-right: none; padding-left: 14px; padding-right: 0; }
.tape__stat-key {
  display: block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--mid-gray);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.tape__stat-val {
  font-family: var(--font-head);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.05;
}
.tape__bio {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--light-gray);
  margin: 0;
}

/* Throw Taxonomy — horizontal scrolling band */
.taxonomy {
  background: var(--charcoal);
  padding: 100px 0 110px;
  overflow: hidden;
}
.taxonomy__head {
  max-width: 1280px;
  margin: 0 auto 48px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}
.taxonomy__title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  line-height: 1;
}
.taxonomy__hint {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--mid-gray);
  text-transform: uppercase;
}
.taxonomy__hint::after {
  content: " →";
  color: var(--red);
}
.taxonomy__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 32px 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
}
.taxonomy__rail::-webkit-scrollbar { height: 4px; }
.taxonomy__rail::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }
.taxonomy__rail::-webkit-scrollbar-thumb { background: var(--red); }
.taxonomy__card {
  scroll-snap-align: start;
  border-right: 1px solid rgba(255,255,255,0.1);
  padding: 38px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  position: relative;
}
.taxonomy__card:first-child { padding-left: 0; }
.taxonomy__num {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.taxonomy__jp {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0.04em;
  color: var(--white);
  text-transform: uppercase;
  margin: 0 0 6px;
  line-height: 1;
}
.taxonomy__en {
  font-family: var(--font-head);
  font-size: 0.84rem;
  letter-spacing: 0.22em;
  color: var(--mid-gray);
  text-transform: uppercase;
  margin: 0 0 22px;
}
.taxonomy__desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--light-gray);
  margin: 0;
}

@media (max-width: 900px) {
  .lineage__grid { grid-template-columns: 1fr; gap: 48px; }
  .tape__grid { grid-template-columns: 1fr; gap: 48px; }
  .tape__divider { display: none; }
  .taxonomy__head { grid-template-columns: 1fr; }
  .taxonomy__rail { grid-auto-columns: minmax(72%, 80%); }
}
@media (max-width: 540px) {
  .lineage, .tape, .taxonomy { padding: 70px 0 80px; }
  .lineage__head, .lineage__grid,
  .tape__head, .tape__grid,
  .taxonomy__head { padding-left: 18px; padding-right: 18px; }
  .lineage__row { grid-template-columns: 60px 1fr; }
  .lineage__rank { grid-column: 2; padding-top: 6px; text-align: left; }
}

/* =====================================================
   KIDS BJJ HERO — "Family Wall"
   Asymmetric editorial column on the left + loose 4-photo
   polaroid cluster on the right. One precision-aligned red CTA.
   ===================================================== */
@keyframes fw-rise { from { opacity: 0; transform: translateY(14px);} to { opacity: 1; transform: translateY(0);} }
@keyframes fw-tilt-1 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-2.4deg) translateY(-4px); }
}
@keyframes fw-tilt-2 {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(2.6deg) translateY(-3px); }
}
@keyframes fw-tilt-3 {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-2px); }
}
@keyframes fw-tilt-4 {
  0%, 100% { transform: rotate(2.6deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-5px); }
}
@keyframes fw-cta-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,0,0,0.55); }
  50%      { box-shadow: 0 0 0 14px rgba(204,0,0,0); }
}

.fw-hero {
  position: relative;
  background: var(--charcoal);
  color: var(--white);
  padding-top: calc(var(--nav-height) + var(--zk-banner-h, 0px) + 32px);
  padding-bottom: 90px;
  overflow: hidden;
}
.fw-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(380px, 0.85fr) minmax(420px, 1fr);
  gap: 64px;
  align-items: center;
  min-height: calc(100vh - var(--nav-height) - var(--zk-banner-h, 0px) - 122px);
  min-height: calc(100dvh - var(--nav-height) - var(--zk-banner-h, 0px) - 122px);
}

/* LEFT COLUMN — calm editorial */
.fw-hero__col {
  position: relative;
  z-index: 2;
  animation: fw-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fw-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--mid-gray);
  margin: 0 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.fw-hero__eyebrow::before {
  content: "";
  display: block;
  width: 22px; height: 1px;
  background: var(--red);
}
.fw-hero__title {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 6.4vw, 5.8rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--white);
  margin: 0 0 24px;
}
.fw-hero__title-tail {
  display: block;
  color: var(--light-gray);
  font-size: 0.86em;
}
.fw-hero__lead {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--light-gray);
  max-width: 520px;
  margin: 0 0 28px;
}
.fw-hero__lead strong { color: var(--white); font-weight: 700; }
.fw-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin-bottom: 28px;
}
.fw-hero__chip {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light-gray);
  background: var(--dark-card);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
}
.fw-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
.fw-hero__cta {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  animation: fw-cta-halo 2.2s ease-in-out 1.4s infinite;
}
.fw-hero__cta:hover, .fw-hero__cta:focus-visible {
  background: var(--red-hover);
  transform: translateY(-2px);
  outline: none;
}
.fw-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.fw-hero__phone:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
.fw-hero__phone svg { width: 16px; height: 16px; fill: currentColor; }
.fw-hero__fineprint {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--mid-gray);
  margin: 0;
}

/* RIGHT COLUMN — polaroid wall */
.fw-hero__wall {
  position: relative;
  height: 600px;
  animation: fw-rise 1.1s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fw-poly {
  position: absolute;
  background: #f4f1ea;
  padding: 14px 14px 60px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 18px 36px rgba(0,0,0,0.45),
    0 4px 10px rgba(0,0,0,0.35);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease, box-shadow 0.6s ease, z-index 0s;
  z-index: 1;
  will-change: transform;
}
.fw-poly__img {
  width: 100%;
  height: calc(100% - 46px);
  overflow: hidden;
  background: #1a1a1a;
}
.fw-poly__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.05) contrast(1.04) saturate(0.9);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fw-poly__label {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 14px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2a2a2a;
  text-align: center;
}
.fw-poly__label small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #6e6e6e;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 400;
}
/* tape strip on top edge */
.fw-poly::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 70px; height: 18px;
  background: rgba(245, 240, 220, 0.6);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  pointer-events: none;
}
.fw-poly:hover {
  transform: rotate(0deg) translateY(-12px) scale(1.04) !important;
  filter: brightness(1.05);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 28px 50px rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.4);
  z-index: 5;
  animation: none !important;
}
.fw-poly:hover .fw-poly__img img { transform: scale(1.05); }

/* placement — desktop wall */
.fw-poly--1 {
  top: 0; left: 4%;
  width: 46%; aspect-ratio: 4/5;
  animation: fw-tilt-1 7s ease-in-out 0.6s infinite;
  z-index: 3;
}
.fw-poly--2 {
  top: 6%; right: 0;
  width: 42%; aspect-ratio: 1/1;
  animation: fw-tilt-2 8.4s ease-in-out 0.9s infinite;
  z-index: 4;
}
.fw-poly--3 {
  bottom: 8%; left: 0;
  width: 40%; aspect-ratio: 1/1;
  animation: fw-tilt-3 7.8s ease-in-out 0.3s infinite;
  z-index: 2;
}
.fw-poly--4 {
  bottom: 0; right: 8%;
  width: 44%; aspect-ratio: 4/5;
  animation: fw-tilt-4 9s ease-in-out 1.2s infinite;
  z-index: 3;
}

/* very faint hand-marker arrow between two photos for decoration */
.fw-hero__wall::after {
  content: "";
  position: absolute;
  top: 48%; left: 42%;
  width: 80px; height: 80px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 70%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .fw-hero__inner { gap: 40px; }
  .fw-hero__wall { height: 540px; }
}
@media (max-width: 860px) {
  .fw-hero { padding-bottom: 60px; }
  .fw-hero__inner { grid-template-columns: 1fr; gap: 56px; min-height: 0; }
  .fw-hero__wall { height: 520px; max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 540px) {
  .fw-hero { padding-top: calc(var(--nav-height) + var(--zk-banner-h, 0px) + 24px); }
  .fw-hero__inner { padding: 0 18px; gap: 44px; }
  .fw-hero__title { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .fw-hero__lead { font-size: 1rem; }
  .fw-hero__cta-row { width: 100%; flex-direction: column; align-items: stretch; }
  .fw-hero__cta { width: 100%; }
  .fw-hero__phone { width: 100%; justify-content: center; }
  .fw-hero__wall { height: 460px; max-width: 100%; }
  .fw-poly--1 { width: 54%; }
  .fw-poly--2 { width: 52%; }
  .fw-poly--3 { width: 50%; }
  .fw-poly--4 { width: 54%; }
}

@media (prefers-reduced-motion: reduce) {
  .fw-hero__col,
  .fw-hero__wall,
  .fw-poly,
  .fw-hero__cta {
    animation: none !important;
    opacity: 1 !important;
  }
  .fw-poly { transform: rotate(0deg) !important; }
}

/* =====================================================
   KIDS BJJ — Benefit ledger + Age vignettes + Hero Quote
   ===================================================== */
.ledger {
  background: var(--about-cream, #f4f4f4);
  padding: 100px 0 110px;
  color: #111;
}
:root { --about-cream: #f4f4f4; }
.ledger__head {
  max-width: 1080px;
  margin: 0 auto 48px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: end;
}
.ledger__eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #666;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ledger__eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--red);
}
.ledger__title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111;
  margin: 0;
  text-align: right;
  line-height: 1;
}
.ledger__list {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  list-style: none;
  border-top: 1px solid rgba(0,0,0,0.18);
}
.ledger__row {
  display: grid;
  grid-template-columns: 64px 1fr 1.2fr;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  align-items: baseline;
  transition: background 0.3s ease;
}
.ledger__row:hover { background: rgba(0,0,0,0.03); }
.ledger__num {
  font-family: var(--font-head);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
}
.ledger__name {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
  margin: 0;
  line-height: 1.1;
}
.ledger__proof {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* AGE VIGNETTES */
.ages {
  background: var(--charcoal);
  padding: 100px 0 60px;
}
.ages__head {
  max-width: 1280px;
  margin: 0 auto 64px;
  padding: 0 32px;
  text-align: center;
}
.ages__eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--mid-gray);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--red);
}
.ages__title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  letter-spacing: 0.02em;
  color: var(--white);
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.ages__vignette {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ages__vignette:nth-child(even) > .ages__copy { order: 2; }
.ages__vignette:nth-child(even) > .ages__photo { order: 1; }
.ages__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
}
.ages__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.04);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ages__vignette:hover .ages__photo img { transform: scale(1.04); }
.ages__copy { padding: 0; }
.ages__chapter {
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.ages__chapter em {
  font-style: normal;
  color: var(--mid-gray);
  font-size: 0.92em;
}
.ages__name {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.04em;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 10px;
}
.ages__range {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.22em;
  color: var(--light-gray);
  text-transform: uppercase;
  margin-bottom: 22px;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ages__body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--light-gray);
  margin: 0;
}

/* HERO QUOTE — single oversized parent quote */
.heroquote {
  background: var(--dark);
  padding: 110px 0 120px;
  position: relative;
  overflow: hidden;
}
.heroquote__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: left;
  position: relative;
}
.heroquote__mark {
  position: absolute;
  top: -30px; left: 14px;
  font-family: serif;
  font-size: 14rem;
  line-height: 0.9;
  color: rgba(204,0,0,0.18);
  user-select: none;
  pointer-events: none;
}
.heroquote__eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--mid-gray);
  text-transform: uppercase;
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.heroquote__eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--red);
}
.heroquote__body {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: var(--white);
  text-transform: none;
  margin: 0 0 32px;
  max-width: 920px;
}
.heroquote__body span { color: var(--red); }
.heroquote__attrib {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.heroquote__rule {
  width: 42px; height: 1px;
  background: var(--red);
}
.heroquote__attrib-name {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.18em;
  color: var(--white);
  text-transform: uppercase;
}
.heroquote__attrib-role {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--mid-gray);
}

@media (max-width: 860px) {
  .ledger__head { grid-template-columns: 1fr; gap: 12px; }
  .ledger__title { text-align: left; }
  .ledger__row { grid-template-columns: 50px 1fr; gap: 16px; }
  .ledger__proof { grid-column: 1 / -1; padding-left: 66px; margin-top: -10px; }
  .ages__vignette { grid-template-columns: 1fr; gap: 28px; padding: 48px 32px; }
  .ages__vignette:nth-child(even) > .ages__copy { order: 0; }
  .ages__vignette:nth-child(even) > .ages__photo { order: 0; }
}
@media (max-width: 540px) {
  .ledger, .ages, .heroquote { padding-left: 0; padding-right: 0; }
  .ledger { padding: 70px 0 80px; }
  .ages   { padding: 70px 0 30px; }
  .heroquote { padding: 80px 0 90px; }
  .ledger__head, .ledger__list,
  .ages__head, .ages__vignette,
  .heroquote__inner { padding-left: 18px; padding-right: 18px; }
  .ledger__proof { padding-left: 0; }
  .ledger__row { padding: 20px 0; }
  .heroquote__mark { font-size: 9rem; top: -10px; }
}

/* =====================================================
   SITEWIDE ANNOUNCEMENT BANNER  (Kickboxing launch)
   Aesthetic: "Ring-Tape" — a bone-white field with thin
   charcoal hazard stripes that reads like the tape wrapped
   around boxing-ring corner posts. Inverts the dark page
   so the strip pops instantly. Uses ZERO red so the brand's
   conversion color stays unmistakable.
   ===================================================== */
:root { --zk-banner-h: 0px; }
body.has-zk-banner { --zk-banner-h: 46px; }
body.has-zk-banner #navbar { top: var(--zk-banner-h); }

.zk-announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999; /* above navbar (9998) */
  height: var(--zk-banner-h);
  background: #f4f1ea; /* warm bone, slightly off-white so it doesn't feel digital */
  color: #0d0d0d;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid #0d0d0d;
  box-shadow: 0 6px 22px rgba(0,0,0,0.55);
}
/* Diagonal hazard stripes — subtle, slow drift */
.zk-announce::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -120px; right: -120px;
  background: repeating-linear-gradient(
    -58deg,
    transparent 0 22px,
    #0d0d0d 22px 23px,
    transparent 23px 45px
  );
  opacity: 0.08;
  pointer-events: none;
  animation: zk-drift 26s linear infinite;
}
@keyframes zk-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(90px); }
}
@media (prefers-reduced-motion: reduce) {
  .zk-announce::before { animation: none; }
}
/* Top + bottom inner hairlines for "ring-tape" structural feel */
.zk-announce::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 3px;
  background:
    linear-gradient(90deg, transparent 0%, #0d0d0d 12%, #0d0d0d 88%, transparent 100%);
  opacity: 0.85;
  pointer-events: none;
}

.zk-announce__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  z-index: 1;
}

/* The "STAMP" — black filled rect with white serif character.
   Reads as a hand-stamped ink mark, not a UI badge. */
.zk-announce__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #0d0d0d;
  color: #f4f1ea;
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  padding: 5px 11px 4px;
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
  transform: rotate(-1.5deg); /* hand-stamped tilt */
  box-shadow: 2px 2px 0 rgba(0,0,0,0.12);
}
.zk-announce__badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(204,0,0,0.7);
  animation: zk-pulse 2.4s ease-out infinite;
}
@keyframes zk-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(204,0,0,0.7); }
  60%  { box-shadow: 0 0 0 7px rgba(204,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(204,0,0,0); }
}

/* The message — centered, charcoal type on bone, with the
   date as a heavy underlined accent. No red allowed here. */
.zk-announce__msg {
  font-family: var(--font-head);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: #0d0d0d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  flex: 0 1 auto;
  min-width: 0;
}
.zk-announce__msg em {
  font-style: normal;
  display: inline-block;
  background: #0d0d0d;
  color: #f4f1ea;
  padding: 2px 9px 1px;
  margin: 0 4px;
  letter-spacing: 0.16em;
  border-radius: 2px;
  transform: translateY(-1px);
}
.zk-announce__msg .zk-dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: #0d0d0d;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 14px 3px;
  opacity: 0.6;
}
.zk-announce__msg .zk-soft {
  color: #555;
  letter-spacing: 0.1em;
  font-size: 0.86rem;
}

/* The CTA — solid black pill, weight against the bone field.
   Inverts to bone-on-black on hover. Distinct from any red
   primary CTA on the site. */
.zk-announce__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: #f4f1ea;
  background: #0d0d0d;
  border: 1px solid #0d0d0d;
  border-radius: 3px;
  padding: 7px 16px 6px;
  flex-shrink: 0;
  transition: 0.2s ease;
  text-transform: uppercase;
  position: relative;
}
.zk-announce__cta:hover,
.zk-announce__cta:focus {
  background: #f4f1ea;
  color: #0d0d0d;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.zk-announce__cta svg { width: 10px; height: 10px; transition: transform 0.2s ease; }
.zk-announce__cta:hover svg { transform: translateX(3px); }

@media (max-width: 980px) {
  .zk-announce__msg { font-size: 0.85rem; letter-spacing: 0.1em; }
  .zk-announce__inner { gap: 12px; }
}
@media (max-width: 820px) {
  body.has-zk-banner { --zk-banner-h: 64px; }
  .zk-announce__inner {
    gap: 8px 12px;
    padding: 0 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .zk-announce__msg {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    white-space: normal;
    line-height: 1.2;
    width: 100%;
    order: 2;
  }
  .zk-announce__msg .zk-soft,
  .zk-announce__msg .zk-dot { display: none; }
  .zk-announce__badge { order: 1; }
  .zk-announce__cta {
    order: 3;
    font-size: 0.7rem;
    padding: 5px 12px 4px;
    letter-spacing: 0.12em;
  }
  .zk-announce__cta svg { display: none; }
}
@media (max-width: 480px) {
  body.has-zk-banner { --zk-banner-h: 68px; }
  .zk-announce__badge {
    font-size: 0.66rem;
    padding: 4px 9px 3px;
    letter-spacing: 0.18em;
  }
  .zk-announce__msg { font-size: 0.74rem; }
}

/* =====================================================
   KICKBOXING LANDING  (Field Manual · Vol. 02)
   Page-scoped class prefix: .kx-
   Reuses .anatomy / .daylog / .cta-banner from BJJ pages.
   ===================================================== */

/* ---------- Image placeholder utility (replace later) ---------- */
.kx-ph {
  position: relative;
  background:
    linear-gradient(135deg, #161616 0%, #1f1f1f 50%, #161616 100%);
  border: 1px dashed rgba(204,0,0,0.55);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255,255,255,0.55);
  overflow: hidden;
  isolation: isolate;
}
.kx-ph::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(204,0,0,0.05) 14px 15px),
    radial-gradient(circle at 30% 20%, rgba(204,0,0,0.08), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.kx-ph__tag {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--white);
}
.kx-ph__sub {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mid-gray);
  text-align: center;
  padding: 0 14px;
}
.kx-ph__corner {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--red);
  border: 1px solid rgba(204,0,0,0.6);
  padding: 3px 7px 2px;
  border-radius: 3px;
}
.kx-ph__corner--alt { left: auto; right: 12px; color: var(--mid-gray); border-color: rgba(255,255,255,0.18); }

/* ---------- HERO ---------- */
.kx-hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.78) 0%, rgba(13,13,13,0.72) 55%, rgba(17,17,17,0.88) 100%),
    url('../kickboxing-images/hero.png') center 38% / cover no-repeat,
    var(--black);
  padding: calc(var(--nav-height) + 50px) 0 70px;
  overflow: hidden;
  isolation: isolate;
}
/* Brand red glow + grid overlay ON TOP of the photo */
.kx-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 0%, rgba(204,0,0,0.22), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(204,0,0,0.10), transparent 50%);
  z-index: -2;
  pointer-events: none;
}
.kx-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,0.025) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,0.018) 79px 80px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}
.kx-hero__slate {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  color: var(--mid-gray);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 8px 16px 7px;
  margin-bottom: 36px;
}
.kx-hero__slate em {
  font-style: normal;
  color: var(--red);
}
.kx-hero__slate-sep {
  width: 1px; height: 12px;
  background: rgba(255,255,255,0.25);
  display: inline-block;
}
.kx-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: start;
}
.kx-hero__left { position: relative; }
.kx-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(204,0,0,0.12);
  border: 1px solid rgba(204,0,0,0.55);
  color: var(--red);
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  padding: 6px 12px 5px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.kx-hero__pill::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(204,0,0,0.6);
  animation: zk-pulse 2.2s ease-out infinite;
}
.kx-hero__title {
  font-family: var(--font-head);
  color: var(--white);
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.kx-hero__title .kx-mark {
  position: relative;
  display: inline-block;
  color: var(--white);
}
.kx-hero__title .kx-mark::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%;
  bottom: 0.06em;
  height: 0.18em;
  background: var(--red);
  z-index: -1;
  transform: skewX(-8deg);
}
.kx-hero__rule {
  display: block;
  width: 80px;
  height: 3px;
  background: var(--red);
  margin-bottom: 22px;
}
.kx-hero__deck {
  font-size: 1.05rem;
  color: var(--light-gray);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 26px;
}
.kx-hero__deck strong { color: var(--white); font-weight: 600; }
.kx-hero__bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--mid-gray);
  margin-bottom: 30px;
}
.kx-hero__bullets li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kx-hero__bullets li::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--red);
  display: inline-block;
  transform: rotate(45deg);
}

/* Countdown — compact "ticker" variant living above the form */
.kx-count {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.kx-count__cell {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 14px 8px 10px;
  text-align: center;
}
.kx-count__num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kx-count__lbl {
  display: block;
  font-family: var(--font-head);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--mid-gray);
  margin-top: 6px;
}

/* Form-mounted variant: tighter, with eyebrow + a hairline tying it to the form */
.kx-count--form {
  display: block;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.kx-count--form .kx-count__eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--red);
  margin-bottom: 10px;
}
.kx-count--form .kx-count__cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.kx-count--form .kx-count__cell {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px 4px 7px;
  position: relative;
}
.kx-count--form .kx-count__cell::after {
  /* center seam — looks like a flip-clock divider */
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  top: 52%;
  height: 1px;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.kx-count--form .kx-count__num {
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  letter-spacing: 0.06em;
}
.kx-count--form .kx-count__lbl {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  margin-top: 4px;
}

/* Hero form card (right column) */
.kx-form {
  position: relative;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 4px solid var(--red);
  border-radius: 12px;
  padding: 32px 30px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.kx-form__stamp {
  position: absolute;
  top: -14px; right: 22px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  padding: 5px 12px 4px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(204,0,0,0.35);
}
.kx-form__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.kx-form__title {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.kx-form__counter {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--red);
  white-space: nowrap;
}
.kx-form__sub {
  font-size: 0.86rem;
  color: var(--mid-gray);
  line-height: 1.55;
  margin-bottom: 18px;
}
.kx-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.kx-form__field { display: flex; flex-direction: column; }
.kx-form__field label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--mid-gray);
  margin-bottom: 5px;
}
.kx-form__field label span { color: var(--red); margin-left: 2px; }
.kx-form__field input,
.kx-form__field select {
  background: var(--mid-dark);
  color: var(--white);
  border: 1px solid #333;
  border-radius: 6px;
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.18s ease;
}
.kx-form__field input:focus,
.kx-form__field select:focus {
  outline: none;
  border-color: var(--red);
}
.kx-form__field--full { grid-column: 1 / -1; }
.kx-form__cta {
  width: 100%;
  margin-top: 14px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.14em;
  padding: 14px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.kx-form__cta:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(204,0,0,0.32);
}
.kx-form__cta svg { width: 14px; height: 14px; }
.kx-form__consent {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: flex-start;
}
.kx-form__consent input { margin-top: 3px; flex-shrink: 0; }
.kx-form__consent label {
  font-size: 0.72rem;
  color: var(--mid-gray);
  line-height: 1.45;
}
.kx-form__fineprint {
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--mid-gray);
  line-height: 1.5;
  text-align: center;
}
.kx-form__fineprint a { color: var(--light-gray); text-decoration: underline; }
.kx-form__success {
  display: none;
  text-align: center;
  padding: 26px 6px 8px;
}
.kx-form__success h3 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--white);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.kx-form__success p {
  color: var(--light-gray);
  font-size: 0.95rem;
}
.kx-form.is-submitted .kx-form__body { display: none; }
.kx-form.is-submitted .kx-form__success { display: block; }

@media (max-width: 980px) {
  .kx-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .kx-hero { padding-top: calc(var(--nav-height) + 36px); padding-bottom: 50px; }
  .kx-hero__slate { font-size: 0.72rem; letter-spacing: 0.18em; padding: 6px 12px; }
}
@media (max-width: 540px) {
  .kx-form { padding: 26px 22px 22px; }
  .kx-form__row { grid-template-columns: 1fr; }
  .kx-form__head { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- FOUNDING-MEMBER VALUE STRIP ---------- */
.kx-founding {
  background: var(--dark);
  padding: 80px 0 70px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.kx-founding__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.kx-founding__eyebrow {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  color: var(--red);
  display: inline-block;
  margin-bottom: 14px;
}
.kx-founding__title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.kx-founding__title em { font-style: normal; color: var(--red); }
.kx-founding__deck {
  color: var(--mid-gray);
  font-size: 1rem;
}
.kx-founding__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.kx-perk {
  background: var(--dark-card);
  border-radius: 12px;
  padding: 28px 22px 26px;
  border-bottom: 3px solid var(--red);
  position: relative;
  overflow: hidden;
}
.kx-perk__num {
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--mid-gray);
  margin-bottom: 14px;
  display: block;
}
.kx-perk__title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--white);
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.kx-perk__copy {
  font-size: 0.88rem;
  color: var(--light-gray);
  line-height: 1.6;
}
.kx-perk__strike {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--mid-gray);
  text-decoration: line-through;
  text-decoration-color: rgba(204,0,0,0.6);
  margin-right: 8px;
}
@media (max-width: 980px) {
  .kx-founding__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .kx-founding__grid { grid-template-columns: 1fr; }
}

/* ---------- "WHAT IS A KX CLASS" — light interlude ---------- */
.kx-explain {
  background: #f4f4f4;
  color: #111;
  padding: 90px 0;
}
.kx-explain__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.kx-explain__eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--red);
  margin-bottom: 12px;
  display: block;
}
.kx-explain h2 {
  color: #111;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 14px;
}
.kx-explain h2 em { font-style: normal; color: var(--red); }
.kx-explain__rule {
  width: 60px; height: 3px;
  background: var(--red);
  margin-bottom: 20px;
}
.kx-explain p { color: #444; margin-bottom: 14px; line-height: 1.75; font-size: 1.02rem; }
.kx-explain p strong { color: #111; }
.kx-explain__photo {
  border-radius: 12px;
  min-height: 440px;
}
/* Real <img> variant of .kx-explain__photo */
img.kx-explain__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}
/* Override placeholder colors for light surface */
.kx-explain .kx-ph {
  background: linear-gradient(135deg, #e6e6e6 0%, #d6d6d6 50%, #e6e6e6 100%);
  border-color: rgba(204,0,0,0.4);
  color: #555;
}
.kx-explain .kx-ph::before {
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(204,0,0,0.06) 14px 15px),
    radial-gradient(circle at 30% 20%, rgba(204,0,0,0.06), transparent 55%);
}
.kx-explain .kx-ph__tag { color: #111; }
.kx-explain .kx-ph__sub  { color: #666; }
.kx-explain .kx-ph__corner { color: var(--red); }
.kx-explain .kx-ph__corner--alt { color: #666; border-color: rgba(0,0,0,0.18); }
@media (max-width: 880px) {
  .kx-explain__grid { grid-template-columns: 1fr; gap: 36px; }
  .kx-explain__photo { min-height: 280px; }
  .kx-explain { padding: 60px 0; }
}

/* ---------- COACH STRIP ---------- */
.kx-coach {
  background: var(--charcoal);
  padding: 90px 0;
}
.kx-coach__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.kx-coach__photo { min-height: 460px; border-radius: 12px; }
.kx-coach__eyebrow {
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--red);
  display: block;
  margin-bottom: 12px;
}
.kx-coach h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 12px;
}
.kx-coach__rule { width: 60px; height: 3px; background: var(--red); margin-bottom: 20px; }
.kx-coach p { color: var(--light-gray); margin-bottom: 14px; line-height: 1.75; }
.kx-coach__credits {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 28px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.kx-coach__credit {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--white);
  display: flex; align-items: baseline; gap: 10px;
}
.kx-coach__credit em {
  font-style: normal;
  color: var(--mid-gray);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}
@media (max-width: 880px) {
  .kx-coach__grid { grid-template-columns: 1fr; gap: 36px; }
  .kx-coach__photo { min-height: 320px; }
  .kx-coach { padding: 60px 0; }
}

/* ---------- IMAGE TRIPTYCH STRIP ---------- */
.kx-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--black);
}
.kx-strip__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: grayscale(0.12) contrast(1.04);
  transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.kx-strip__img:hover {
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.02);
}
@media (max-width: 720px) {
  .kx-strip__img { aspect-ratio: 16 / 10; }
}
.kx-strip .kx-ph {
  border-radius: 0;
  border: none;
  border-right: 1px solid #0a0a0a;
  min-height: 280px;
}
.kx-strip .kx-ph:last-child { border-right: none; }
@media (max-width: 720px) {
  .kx-strip { grid-template-columns: 1fr; gap: 2px; }
  .kx-strip .kx-ph { min-height: 200px; border-right: none; border-bottom: 1px solid #0a0a0a; }
}

/* ---------- SCHEDULE PREVIEW (page-scoped) ---------- */
.kx-sched {
  background: var(--dark);
  padding: 80px 0;
}
.kx-sched__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.kx-sched__head h2 {
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 10px;
}
.kx-sched__head p { color: var(--mid-gray); }
.kx-sched__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kx-sched__row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 18px;
  background: var(--dark-card);
  padding: 18px 22px;
  border-radius: 8px;
  border-left: 1px solid rgba(204,0,0,0.5);
  transition: 0.2s ease;
}
.kx-sched__row:hover { transform: translateX(4px); border-left-color: var(--red); }
.kx-sched__time {
  font-family: var(--font-head);
  font-size: 0.94rem;
  letter-spacing: 0.08em;
  color: var(--white);
}
.kx-sched__name {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--white);
}
.kx-sched__name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--mid-gray);
  margin-top: 4px;
}
.kx-sched__tag {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--red);
  border: 1px solid rgba(204,0,0,0.5);
  padding: 4px 10px 3px;
  border-radius: 3px;
}
.kx-sched__note {
  margin-top: 22px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--mid-gray);
  font-style: italic;
}
@media (max-width: 640px) {
  .kx-sched__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .kx-sched__tag { justify-self: start; }
}

/* ---------- FINAL SCARCITY CTA ---------- */
.kx-final {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(204,0,0,0.18), transparent 55%),
    linear-gradient(180deg, var(--charcoal) 0%, var(--black) 100%);
  padding: 90px 20px 100px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.kx-final::before {
  content: '禅';
  position: absolute;
  font-family: serif;
  font-size: 28rem;
  color: rgba(204,0,0,0.05);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  line-height: 1;
}
.kx-final__eyebrow {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  color: var(--red);
  margin-bottom: 16px;
  display: block;
}
.kx-final h2 {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 16px;
}
.kx-final p {
  max-width: 580px;
  margin: 0 auto 28px;
  color: var(--light-gray);
  font-size: 1.05rem;
}
.kx-final__row {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.kx-final__row .btn { padding: 16px 36px; font-size: 1.05rem; }
.kx-final__meter {
  margin: 0 auto 28px;
  max-width: 360px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--mid-gray);
}
.kx-final__bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.kx-final__bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 32%;
  background: linear-gradient(90deg, var(--red) 0%, #ff4040 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(204,0,0,0.6);
}