/*
Theme Name: MK Martial Arts
Theme URI: https://www.miltonkeynesmartialarts.com
Author: Choi Kwang Do MK
Description: Custom WordPress theme for Milton Keynes Martial Arts - Choi Kwang Do
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mk-martial-arts
*/

/* ====================================================
   DESIGN SYSTEM � CINEMATIC DARK LUXURY
   ==================================================== */
:root {
  /* Colours � Royal Purple #5B0DA8 */
  --deep:        #07030f;
  --deep-2:      #0e0720;
  --deep-3:      #160c2e;
  --brand:       #5B0DA8;
  --brand-light: #8b3fd4;
  --brand-pale:  #ede5ff;
  --gold:        #d4a040;
  --gold-bright: #e8c340;
  --gold-dim:    #a8832e;
  --gold-glow:   rgba(212,160,64,0.45);
  --white:       #ffffff;
  --off:         #f8f4ff;
  --text:        #160c2e;
  --muted:       #6b5a85;
  --border:      rgba(255,255,255,0.08);
  --border-dark: rgba(22,12,46,0.10);

  /* Type */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;

  /* Space */
  --nav-h: 96px;
  --r:     3px;
  --r-lg:  8px;

  /* Shadows */
  --shadow:    0 4px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 16px 56px rgba(0,0,0,0.22);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.32);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t1: 0.25s;
  --t2: 0.45s;
  --t3: 0.65s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Prevent callout on long-press for iOS */
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
input, textarea { font-family: inherit; }

/* Minimum touch target size for accessibility (44�44px) */
.btn, .nav-link, .footer-link, .nav-drawer-link, .class-card-btn,
.footer-social-btn, .social-link-card {
  min-height: 44px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 10px; }

/* ====================================================
   LAYOUT
   ==================================================== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }

.section         { padding: 112px 0; }
.section-compact { padding: 72px 0; }
.section-hero    { padding: 0; }

/* Home: sit “Our Classes” closer to hero / marquee */
#classesSection { padding-top: 76px; }

/* Classes intro — readable width, balanced eyebrow, clear hierarchy */
#classesSection .classes-intro {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  padding: 0 0.25rem;
  padding-bottom: 0;
}
#classesSection .classes-intro > .eyebrow {
  margin-bottom: 14px;
  justify-content: center;
  gap: 14px;
}
#classesSection .classes-intro > .eyebrow::before {
  width: 28px;
}
#classesSection .classes-intro > .eyebrow::after {
  content: '';
  width: 28px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.88;
}
#classesSection .classes-intro > .h2 {
  color: var(--deep);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
#classesSection .classes-intro > .divider {
  margin-top: 20px;
  margin-bottom: 22px;
  width: 56px;
}
#classesSection .classes-intro > p.lead {
  margin: 0 auto;
  max-width: 36em;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  color: rgba(22, 12, 46, 0.78);
}

.grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-2-3  { display: grid; grid-template-columns: 2fr 3fr; gap: 64px; align-items: start; }

/* ====================================================
   TYPOGRAPHY
   ==================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}

.h1 { font-family: var(--sans); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; }
.h2 { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.h3 { font-family: var(--serif); font-size: clamp(1.6rem, 2.5vw, 2.4rem); font-weight: 700; line-height: 1.15; }
.h4 { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.h5 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }

.lead { font-size: 1.125rem; font-weight: 300; line-height: 1.8; color: var(--muted); }
.body { font-size: 0.9625rem; line-height: 1.75; color: var(--muted); }
.small { font-size: 0.85rem; line-height: 1.6; }

.text-white { color: var(--white); }
.text-gold  { color: var(--gold); }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.text-light { color: rgba(255,255,255,0.65); }

/* ====================================================
   DIVIDER
   ==================================================== */
.divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: 24px 0 36px;
}
.divider-center { margin-left: auto; margin-right: auto; }

/* ====================================================
   BUTTONS
   ==================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 36px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: var(--r);
  transition: all var(--t2) var(--ease);
  white-space: nowrap;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--t1);
}
.btn:hover::after { opacity: 1; }

.btn-gold {
  background: var(--gold);
  color: var(--deep);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--gold-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--deep);
  color: var(--white);
  border-color: var(--deep);
}
.btn-dark:hover {
  background: var(--deep-3);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.btn-outline-brand {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-brand:hover {
  background: var(--brand);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-sm { padding: 10px 24px; font-size: 0.75rem; letter-spacing: 1.5px; }
.btn-lg { padding: 18px 48px; font-size: 0.875rem; }

.btn-icon {
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Arrow icon inside buttons */
.btn .arrow {
  width: 16px; height: 16px;
  transition: transform var(--t1);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ====================================================
   PAGE SYSTEM
   ==================================================== */
.page { display: none; }
.page.active { display: block; }

/* ====================================================
   NAV
   ==================================================== */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 9999;
  transition: background var(--t2) var(--ease), box-shadow var(--t2) var(--ease), backdrop-filter var(--t2), border-color var(--t2);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
}
#nav.scrolled {
  background: rgba(10,8,14,0.94);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border-bottom-color: rgba(212,166,255,0.08);
  box-shadow: 0 4px 30px rgba(0,0,0,0.25);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}

/* Logo */
.nav-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  margin-left: -20px;
}
.nav-logo-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(212,166,255,0.2);
  filter: drop-shadow(0 0 8px rgba(212,166,255,0.35));
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), filter 0.35s, border-color 0.35s;
}
.nav-logo:hover .nav-logo-img {
  transform: rotate(6deg) scale(1.06);
  filter: drop-shadow(0 0 14px rgba(212,166,255,0.6));
  border-color: rgba(212,166,255,0.5);
}
.nav-logo-text-wrap {
  display: flex;
  flex-direction: column;
}
.nav-logo-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.nav-logo-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
  line-height: 1;
  margin-top: 3px;
}

/* Desktop links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  padding: 8px 16px;
  border-radius: 6px;
  transition: color var(--t1), background var(--t1);
  position: relative;
  cursor: pointer;
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 16px; right: 16px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t2) var(--ease);
}
.nav-link:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.nav-link.active { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* Dropdown indicator for nav links with sub-pages */
.nav-link.has-dropdown {
  padding-right: 24px;
}
.nav-link.has-dropdown::before {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--t1), border-color var(--t1);
}
.nav-link.has-dropdown:hover::before {
  border-top-color: var(--gold);
}

.nav-cta {
  margin-left: 20px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  border-color: var(--gold) !important;
  color: var(--deep) !important;
  box-shadow: 0 2px 16px var(--gold-glow);
  font-weight: 700;
}
.nav-cta:hover {
  background: linear-gradient(135deg, #f0d050, var(--gold-bright)) !important;
  box-shadow: 0 6px 28px rgba(212,160,64,0.6);
  transform: translateY(-2px);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--t2) var(--ease);
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* Mobile drawer backdrop */
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 3, 15, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 9997;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t2) var(--ease);
}
.nav-drawer-backdrop.open { opacity: 1; pointer-events: all; }

/* Mobile drawer - side panel */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: linear-gradient(160deg, var(--deep-3) 0%, var(--deep) 100%);
  border-left: 1px solid var(--border);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: env(safe-area-inset-top, 0px);
}
.nav-drawer.open { opacity: 1; pointer-events: all; transform: translateX(0); }

.nav-drawer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px 0 24px;
}
.nav-drawer-logo {
  padding: 0 20px 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* Drawer header */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.drawer-logo-badge {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.drawer-logo-text { display: flex; flex-direction: column; }
.drawer-logo-name {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.drawer-logo-tag {
  font-size: 0.65rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.4;
}
.drawer-close {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: rgba(255,255,255,0.75);
  transition: background var(--t1), transform var(--t1), color var(--t1);
  flex-shrink: 0;
}
.drawer-close:hover { background: rgba(255,255,255,0.12); color: var(--white); transform: rotate(90deg); }
.drawer-close svg { width: 16px; height: 16px; }

/* Drawer nav links */
.drawer-nav { flex: 1; padding: 8px 0; }
.drawer-nav .nav-drawer-link:nth-child(1) { --i: 0; }
.drawer-nav .nav-drawer-link:nth-child(2) { --i: 1; }
.drawer-nav .nav-drawer-link:nth-child(3) { --i: 2; }
.drawer-nav .nav-drawer-link:nth-child(4) { --i: 3; }
.drawer-nav .nav-drawer-link:nth-child(5) { --i: 4; }
.drawer-nav .nav-drawer-link:nth-child(6) { --i: 5; }
.drawer-nav .nav-drawer-link:nth-child(7) { --i: 6; }
.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 20px;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.01em;
  cursor: pointer;
  border-left: 3px solid transparent;
  opacity: 0;
  transform: translateX(18px);
  transition:
    color var(--t1),
    background-color var(--t1),
    border-color var(--t1),
    opacity 0.38s ease calc(var(--i, 0) * 0.055s + 0.08s),
    transform 0.38s ease calc(var(--i, 0) * 0.055s + 0.08s);
}
.nav-drawer.open .nav-drawer-link { opacity: 1; transform: translateX(0); }
.nav-drawer-link:hover {
  color: var(--gold);
  background-color: rgba(212,160,64,0.08);
  border-left-color: var(--gold);
}
.nav-drawer-link.active { color: var(--gold); border-left-color: var(--gold-dim); }
.drawer-icon { width: 19px; height: 19px; opacity: 0.65; flex-shrink: 0; transition: opacity var(--t1); }
.nav-drawer-link:hover .drawer-icon { opacity: 1; }

/* Drawer CTA section */
.drawer-cta {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}
.drawer-cta-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  font-size: 0.95rem;
  font-weight: 700;
}
.drawer-cta-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Drawer social icons */
.drawer-social { display: flex; align-items: center; justify-content: center; gap: 10px; }
.drawer-social-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: rgba(255,255,255,0.65);
  transition: background var(--t1), color var(--t1), border-color var(--t1);
}
.drawer-social-btn:hover {
  background: rgba(212,160,64,0.12);
  border-color: var(--gold-dim);
  color: var(--gold);
}
.drawer-social-btn svg { width: 19px; height: 19px; }

/* ====================================================
   HOME � HERO
   ==================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  background: var(--deep);
  width: 100%;
}

/* Single in-flow column: stretch to viewport; .container max-width still caps copy */
.hero > .container {
  width: 100%;
  flex: 0 1 auto;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: 56% 32%;
  opacity: 0.62;
  transform: scale(1.04);
  transform-origin: center center;
  will-change: transform;
}
/* Wide desktop: keep subject in frame (was 220% — pushed most of the image off-screen) */
@media (min-width: 1280px) {
  .hero-bg {
    background-position: 52% 30%;
    opacity: 0.64;
  }
}
@media (max-width: 767px) {
  .hero-bg {
    background-position: 56% 18%;
    transform: scale(1);
    opacity: 0.58;
  }
}

.hero-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(135deg, #07030f 0%, #160c2e 40%, #2a0a5e 70%, #07030f 100%);
  background-size: 300% 300%;
  animation:
    heroGradientShift 14s ease infinite,
    maFocusPulse 5s ease-in-out infinite;
}

.hero-gradient::before {
  content: '';
  position: absolute;
  inset: -8%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600'%3E%3Cg fill='none' stroke='rgba(139,63,212,0.2)' stroke-width='1.5'%3E%3Cellipse cx='200' cy='80' rx='32' ry='36'/%3E%3Cline x1='200' y1='116' x2='200' y2='260'/%3E%3Cline x1='200' y1='150' x2='110' y2='190'/%3E%3Cline x1='200' y1='150' x2='290' y2='120'/%3E%3Cline x1='200' y1='260' x2='150' y2='340'/%3E%3Cline x1='150' y1='340' x2='80' y2='280'/%3E%3Cline x1='200' y1='260' x2='205' y2='380'/%3E%3Cline x1='205' y1='380' x2='210' y2='420'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(212,160,64,0.14)' stroke-width='1'%3E%3Cellipse cx='320' cy='380' rx='22' ry='25'/%3E%3Cline x1='320' y1='405' x2='320' y2='500'/%3E%3Cline x1='320' y1='430' x2='260' y2='445'/%3E%3Cline x1='320' y1='430' x2='395' y2='415'/%3E%3Cline x1='320' y1='500' x2='295' y2='560'/%3E%3Cline x1='320' y1='500' x2='345' y2='560'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(139,63,212,0.12)' stroke-width='1'%3E%3Cellipse cx='75' cy='320' rx='18' ry='20'/%3E%3Cline x1='75' y1='340' x2='75' y2='420'/%3E%3Cline x1='75' y1='360' x2='35' y2='375'/%3E%3Cline x1='75' y1='360' x2='115' y2='355'/%3E%3Cline x1='75' y1='420' x2='55' y2='470'/%3E%3Cline x1='75' y1='420' x2='95' y2='470'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  animation: maSilhouetteMotion 9s ease-in-out infinite;
}

.hero-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 42% at 82% 18%, rgba(91,13,168,0.4) 0%, transparent 72%),
    radial-gradient(ellipse 48% 36% at 18% 82%, rgba(212,160,64,0.18) 0%, transparent 62%),
    radial-gradient(ellipse 42% 32% at 48% 48%, rgba(139,63,212,0.22) 0%, transparent 70%),
    repeating-linear-gradient(
      105deg,
      transparent 0,
      transparent 48px,
      rgba(212,160,64,0.04) 48px,
      rgba(212,160,64,0.04) 49px
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 200% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: maGlowDrift 7s ease-in-out infinite, maChiLines 11s linear infinite;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(7,3,15,0.88) 0%, rgba(7,3,15,0.35) 52%, transparent 100%),
    linear-gradient(to top, rgba(7,3,15,0.5) 0%, transparent 42%);
}

@keyframes heroGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes maFocusPulse {
  0%, 100% { filter: saturate(1) brightness(1); }
  50%      { filter: saturate(1.08) brightness(1.04); }
}

@keyframes maSilhouetteMotion {
  0%, 100% { transform: translate3d(-2%, 0, 0) rotate(-0.45deg) scale(1); opacity: 0.88; }
  33%      { transform: translate3d(2.5%, -10px, 0) rotate(0.35deg) scale(1.025); opacity: 1; }
  66%      { transform: translate3d(-1%, -16px, 0) rotate(-0.12deg) scale(1.035); opacity: 0.96; }
}

@keyframes maGlowDrift {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.02); }
}

@keyframes maChiLines {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 200% 0; }
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: calc(var(--nav-h) + 48px) 0 64px;
  max-width: 720px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(91,13,168,0.30);
  border: 1px solid rgba(212,166,255,0.6);
  border-radius: 100px;
  padding: 8px 18px 8px 12px;
  margin-bottom: 36px;
  box-shadow: 0 0 20px rgba(139,63,212,0.4), inset 0 0 12px rgba(212,166,255,0.08);
}
.hero-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.hero-badge span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.35rem, 5.5vw + 1rem, 6.2rem);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 8px;
  text-shadow: 0 0 40px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.5);
  text-wrap: balance;
}
.hero h1 .italic {
  font-style: italic;
  color: var(--gold-bright);
  display: block;
  text-shadow: 0 0 20px rgba(232,195,64,0.35), 0 0 40px rgba(212,160,64,0.2);
}

.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  margin: 28px 0 48px;
  max-width: 500px;
}

.hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  margin-bottom: 52px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 40px;
  margin-top: -14px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero-stat-divider {
  width: 1px;
  align-self: stretch;
  min-height: 2.5rem;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.hero-stat-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero-stat-num {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.hero-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
}

/* Home hero only: tighter stack so marquee sits higher (#page-home) */
#homeHero > .container.hero-content {
  padding-bottom: max(40px, calc(env(safe-area-inset-bottom, 0px) + 20px));
}
#homeHero > .container.hero-content > .eyebrow {
  margin-bottom: 10px;
}
#homeHero > .container.hero-content h1.h1 {
  margin-bottom: 4px;
  line-height: 1.05;
}
#homeHero > .container.hero-content > p.lead,
#homeHero > .container.hero-content > p.hero-lead {
  margin-top: 6px;
  margin-bottom: 0;
  line-height: 1.62;
  max-width: 38rem;
}
#homeHero > .container.hero-content .hero-btns {
  margin-top: 10px;
  margin-bottom: 38px;
}
#homeHero > .container.hero-content .hero-stats {
  margin-top: -20px;
  padding-top: 20px;
}

/* Desktop / tablet: less “empty” hero — was full viewport + vertical center */
@media (min-width: 768px) {
  #homeHero.hero {
    justify-content: flex-start;
    min-height: clamp(460px, 70dvh, 700px);
  }
  #homeHero > .container.hero-content {
    padding-top: calc(var(--nav-h) + 20px);
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  }
  #homeHero > .container.hero-content .hero-btns {
    margin-bottom: 22px;
  }
  #homeHero > .container.hero-content .hero-stats {
    margin-top: -12px;
    padding-top: 16px;
  }
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.3);
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
}
.hero-scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ====================================================
   HOME — MARQUEE (trust strip)
   ==================================================== */
.marquee-strip {
  position: relative;
  overflow: hidden;
  padding: 15px 0;
  background: linear-gradient(
    180deg,
    rgba(14, 7, 32, 0.98) 0%,
    rgba(91, 13, 168, 0.9) 45%,
    rgba(22, 12, 46, 0.98) 100%
  );
  border-top: 1px solid rgba(232, 195, 64, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.marquee-strip::before,
.marquee-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(56px, 8vw);
  z-index: 2;
  pointer-events: none;
}
.marquee-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--deep) 0%, transparent 100%);
}
.marquee-strip::after {
  right: 0;
  background: linear-gradient(270deg, var(--deep) 0%, transparent 100%);
}
.marquee-track {
  position: relative;
  z-index: 0;
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.marquee-dot {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--gold);
  opacity: 0.88;
  flex-shrink: 0;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(212, 160, 64, 0.45);
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }

/* ====================================================
   HOME � BENEFITS SECTION
   ==================================================== */
.benefits-section {
  background: var(--off);
}
.benefits-intro {
  max-width: 560px;
  margin-inline: auto;
}
.benefits-intro .h2 {
  color: var(--deep);
}
.benefits-intro .lead {
  color: var(--muted);
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
}
.benefit-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 36px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  border-bottom: 3px solid transparent;
  transition: all var(--t2) var(--ease);
  cursor: default;
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--gold);
}
.benefit-icon {
  width: 60px; height: 60px;
  background: var(--deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: background var(--t2) var(--ease);
}
.benefit-card:hover .benefit-icon { background: var(--gold); }
.benefit-icon svg { width: 26px; height: 26px; fill: var(--white); }
.benefit-card h4 { font-family: var(--serif); font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.benefit-card p { font-size: 0.83rem; color: var(--muted); line-height: 1.6; }

/* ====================================================
   HOME � ABOUT CKD
   ==================================================== */
.about-ckd {
  background: var(--white);
}

/* Stacked layout: headline → centred image → body + pillars */
.about-ckd-intro {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.about-ckd-intro .lead {
  margin-bottom: 0;
}
.about-ckd-media {
  max-width: 52rem;
  margin: clamp(28px, 5vw, 48px) auto;
}
.about-ckd-media .img-frame {
  margin-inline: auto;
}
.about-ckd .ckd-training-img {
  margin: 0 auto;
}
.about-ckd-media .img-badge {
  right: 16px;
  bottom: 24px;
}
.about-ckd-body {
  max-width: 52rem;
  margin-inline: auto;
}

.img-frame {
  position: relative;
  overflow: visible;
}
.img-frame img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}
.img-frame-accent {
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--gold);
  border-radius: var(--r-lg);
  z-index: -1;
  opacity: 0.4;
}
@keyframes img-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.img-frame.kids-animated img {
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  animation: img-float 5s ease-in-out infinite;
}
.img-frame.kids-animated:hover img {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 24px 56px rgba(91,13,168,0.22);
  animation-play-state: paused;
}
.img-badge {
  position: absolute;
  bottom: 28px;
  right: -28px;
  background: var(--gold);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.img-badge-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--deep);
  line-height: 1;
}
.img-badge-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(14,12,16,0.65);
  margin-top: 4px;
}

.ckd-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}
.pillar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--off);
  border-radius: var(--r-lg);
  transition: background var(--t1);
}
.pillar:hover { background: var(--brand-pale); }
.pillar-check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.pillar-check svg { width: 12px; fill: var(--deep); }
.pillar h6 { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.pillar p { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* ====================================================
   HOME � CLASSES SECTION
   ==================================================== */
.classes-section {
  background: var(--deep);
  position: relative;
  overflow: hidden;
}
.classes-section::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(91,13,168,0.35) 0%, transparent 70%);
  pointer-events: none;
}

.classes-header { text-align: center; margin-bottom: 64px; }

.classes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.class-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
  aspect-ratio: 3/4;
}
.class-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}
.class-card-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--t3) var(--ease);
}
.class-card:hover .class-card-img { transform: scale(1.06); }

.class-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(7, 3, 15, 0.98) 0%,
    rgba(7, 3, 15, 0.92) 38%,
    rgba(7, 3, 15, 0.55) 62%,
    rgba(7, 3, 15, 0.12) 100%
  );
}
.class-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 36px 32px;
}
.class-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 8px 14px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--deep);
  background: var(--gold-bright);
  border-radius: var(--r);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.class-card-body h3,
.class-card-body .class-card-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.9);
}
.class-card-age {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.class-card-body p,
.class-card-body .class-card-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.65;
  margin-bottom: 18px;
  opacity: 1;
  transform: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
  transition: color var(--t2) var(--ease);
}
.class-card-list {
  margin-bottom: 22px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}
.class-card-list li {
  margin-bottom: 6px;
  padding-left: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
@media (hover: hover) and (pointer: fine) {
  .class-card-body p,
  .class-card-body .class-card-desc {
    opacity: 0.88;
    transform: translateY(6px);
  }
  .class-card:hover .class-card-body p,
  .class-card:hover .class-card-body .class-card-desc {
    opacity: 1;
    transform: translateY(0);
  }
}

.class-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: gap var(--t1);
}
.class-card .btn-gold.class-card-btn {
  color: var(--deep);
}
.class-card-btn svg { width: 14px; fill: currentColor; }
.class-card:hover .class-card-btn { gap: 12px; }

/* ====================================================
   HOME � INSTRUCTORS
   ==================================================== */
.instructors-section { background: var(--off); margin-top: -80px; }
.instructors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}
.instructor-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 200px 1fr;
  transition: box-shadow var(--t2);
}
.instructor-card:hover { box-shadow: var(--shadow-lg); }
.instructor-img-wrap {
  position: relative;
  overflow: hidden;
}
.instructor-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 260px;
  display: block;
}
.instructor-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(91,13,168,0.45), rgba(7,3,15,0.25));
}
.instructor-rank {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--gold);
  padding: 10px 16px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--deep);
}
.instructor-info { padding: 32px; }
.instructor-info h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.instructor-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
}
.instructor-info p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.75;
}
.instructor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.badge {
  padding: 5px 12px;
  background: var(--deep);
  color: var(--gold);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ====================================================
   HOME � TESTIMONIALS
   ==================================================== */
.testimonials-section { background: var(--deep); overflow: hidden; position: relative; }
.testimonials-section::after {
  content: '"';
  position: absolute;
  top: -40px; right: 60px;
  font-family: var(--serif);
  font-size: 40rem;
  font-weight: 900;
  color: rgba(255,255,255,0.018);
  line-height: 1;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}
.testimonial-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-lg);
  padding: 36px;
  transition: all var(--t2) var(--ease);
}
.testimonial-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(200,164,90,0.3);
  transform: translateY(-4px);
}
.testimonial-stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 20px; letter-spacing: 2px; }
.testimonial-text {
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: rgba(255,255,255,0.8);
  line-height: 1.75;
  margin-bottom: 24px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.author-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}
.author-name { font-size: 0.88rem; font-weight: 600; color: var(--white); }
.author-role { font-size: 0.75rem; color: var(--gold); margin-top: 2px; }

/* ====================================================
   HOME � FREE TRIAL SECTION
   ==================================================== */
.trial-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}
.trial-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 1024px) {
  .trial-bg { background-attachment: scroll; }
}
@supports (-webkit-overflow-scrolling: touch) {
  .trial-bg { background-attachment: scroll; }
}
.trial-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(7,3,15,0.93), rgba(91,13,168,0.72));
}
.trial-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.trial-price-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--deep);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 8px 24px;
  border-radius: 100px;
  margin-bottom: 32px;
}
.trial-content h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 24px;
}
.trial-content p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  margin-bottom: 48px;
  font-weight: 300;
}
.trial-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.trial-contact {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
}
.contact-item svg { width: 20px; fill: var(--gold); flex-shrink: 0; }
.contact-item a { color: inherit; transition: color var(--t1); }
.contact-item a:hover { color: var(--gold); }

/* ====================================================
   HOME � SOCIAL MEDIA
   ==================================================== */
.social-section {
  position: relative;
  background:
    linear-gradient(180deg, #f3effb 0%, var(--off) 38%, #ebe4f7 100%);
  border-block: 1px solid rgba(91, 13, 168, 0.08);
  overflow: hidden;
}
.social-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 12% 0%, rgba(139, 63, 212, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 92% 100%, rgba(212, 160, 64, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
.social-section-inner {
  position: relative;
  z-index: 1;
}
.social-section-head {
  max-width: 520px;
  margin-inline: auto;
}
.social-section-title {
  color: var(--deep);
  margin-top: 6px;
}
.social-section-lead {
  color: var(--muted);
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 1.02rem;
  line-height: 1.65;
}
.social-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
  align-items: stretch;
}
.social-section .social-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 18px 20px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(22, 12, 46, 0.07), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
  text-decoration: none;
  border: 1px solid rgba(91, 13, 168, 0.1);
  text-align: left;
}
.social-section .social-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(91, 13, 168, 0.14);
  border-color: rgba(212, 160, 64, 0.55);
}
.social-section .social-link-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.social-link-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: transform var(--t2) var(--ease);
}
.social-link-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.social-link-card--facebook .social-link-icon {
  background: rgba(24, 119, 242, 0.12);
  color: #1877f2;
}
.social-link-card--instagram .social-link-icon {
  background: linear-gradient(145deg, rgba(228, 64, 95, 0.14), rgba(253, 168, 88, 0.16));
  color: #c13584;
}
.social-link-card--whatsapp .social-link-icon {
  background: rgba(37, 211, 102, 0.14);
  color: #128c7e;
}
.social-section .social-link-card:hover .social-link-icon {
  transform: scale(1.05);
}
.social-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.social-link-name {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.social-link-meta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep);
  line-height: 1.3;
  word-break: break-word;
}
.social-link-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(91, 13, 168, 0.35);
  transition: color var(--t1), transform var(--t1);
}
.social-link-arrow svg {
  width: 18px;
  height: 18px;
}
.social-section .social-link-card:hover .social-link-arrow {
  color: var(--gold);
  transform: translateX(3px);
}

/* ====================================================
   HOME � MAP SECTION
   ==================================================== */
.map-section { background: var(--white); }
.map-wrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 420px;
  position: relative;
  background: var(--brand-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-wrapper iframe { width: 100%; height: 100%; border: 0; }

/* ====================================================
   PAGE HEROES
   ==================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: calc(var(--nav-h) + 12px) 0 36px;
  overflow: hidden;
  background: var(--deep);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7,3,15,0.5) 0%, rgba(7,3,15,0.85) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 20px;
}
.page-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  font-weight: 300;
}

/* ====================================================
   ABOUT PAGE
   ==================================================== */
#page-about .page-hero-overlay { width: 992px; height: 430px; inset: auto; left: 50%; top: 1px; transform: translateX(-50%); margin-top: 1px; margin-bottom: 1px; padding-top: 13px; padding-bottom: 13px; }
#page-about .page-hero { padding-bottom: 24px; }
#page-kids .page-hero { padding-bottom: 0; }
.about-story { background: var(--white); }
.about-story .img-frame img { width: 734px; height: 496px; margin: -28px auto 0; display: block; object-fit: contain; }
.about-story .img-frame-accent { display: none; }
.about-philosophy { background: var(--deep-3); }
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 64px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.philosophy-item {
  background: rgba(255,255,255,0.04);
  padding: 48px 44px;
  transition: background var(--t2);
}
.philosophy-item:hover { background: rgba(200,164,90,0.08); }
.philosophy-num {
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(200,164,90,0.2);
  line-height: 1;
  margin-bottom: 16px;
}
.philosophy-item h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--gold); margin-bottom: 12px; }
.philosophy-item p { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.75; }

.values-section { background: var(--off); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.value-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
  transition: transform var(--t2), box-shadow var(--t2);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value-card h4 { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.value-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.7; }

/* ====================================================
   CLASS PAGES (Tigers / Kids / Teens)
   ==================================================== */
.program-overview { background: var(--white); }
.program-features { background: var(--off); }

.feature-list-big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
}
.feature-item-big {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: all var(--t2) var(--ease);
}
.feature-item-big:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-left: 3px solid var(--gold);
}
.feature-item-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  background: var(--deep);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-item-icon svg { width: 24px; fill: var(--gold); }
.feature-item-big h5 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.feature-item-big p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }

.curriculum-section { background: var(--white); }
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 40px;
}
.curriculum-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--off);
  border-radius: var(--r);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  transition: background var(--t1);
}
.curriculum-item:hover { background: var(--brand-pale); }
.curriculum-tick {
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.curriculum-tick svg { width: 11px; fill: var(--deep); }

.class-testimonial-panel {
  background: var(--deep);
  border-radius: var(--r-lg);
  padding: 48px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ====================================================
   CONTACT FORM — PREMIUM REDESIGN
   ==================================================== */
/* ====================================================
   CONTACT HUB — full-width centred layout
   ==================================================== */
.contact-hub-section {
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-3) 55%, #1a0840 100%);
  position: relative;
  overflow: hidden;
}
.chub-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.18;
}
.chub-bg-orb--1 { width: 600px; height: 600px; background: var(--brand); top: -120px; left: -100px; }
.chub-bg-orb--2 { width: 400px; height: 400px; background: var(--gold);  bottom: -80px; right: -60px; }
.chub-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
}
.chub-header .eyebrow { color: var(--gold); margin-bottom: 14px; }
.chub-header .h2 { color: var(--white); margin-bottom: 16px; }
.chub-subline { font-size: 1.05rem; color: rgba(255,255,255,0.65); line-height: 1.7; }
.chub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.chub-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 20px 22px;
  text-decoration: none;
  color: var(--white);
  transition: background var(--t1), border-color var(--t1), transform var(--t1), box-shadow var(--t1);
}
.chub-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0,0,0,0.30); }
.chub-card--phone:hover { border-color: var(--brand-light); background: rgba(91,13,168,0.18); }
.chub-card--wa:hover    { border-color: #25d366;            background: rgba(37,211,102,0.12); }
.chub-card--email:hover { border-color: var(--gold);        background: rgba(212,160,64,0.12); }
.chub-card-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chub-card-icon svg { width: 22px; height: 22px; fill: currentColor; }
.chub-card--phone .chub-card-icon { background: rgba(91,13,168,0.50); color: var(--brand-light); }
.chub-card--wa    .chub-card-icon { background: rgba(37,211,102,0.20); color: #25d366; }
.chub-card--email .chub-card-icon { background: rgba(212,160,64,0.18); color: var(--gold); }
.chub-card-body { flex: 1; min-width: 0; }
.chub-card-body strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 3px;
}
.chub-card-body span { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chub-card-arrow { font-size: 1.2rem; color: rgba(255,255,255,0.25); transition: color var(--t1), transform var(--t1); flex-shrink: 0; }
.chub-card:hover .chub-card-arrow { color: rgba(255,255,255,0.70); transform: translateX(4px); }
.chub-or {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
  color: rgba(255,255,255,0.30);
  font-size: 0.8rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.chub-or::before, .chub-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.10); }
.chub-form-wrap {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 44px 48px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.chub-form-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.chub-field { display: flex; flex-direction: column; gap: 8px; }
.chub-field--full { margin-bottom: 24px; }
.chub-field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.chub-field input,
.chub-field select,
.chub-field textarea {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--white);
  transition: border-color var(--t1), background var(--t1), box-shadow var(--t1);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.chub-field input::placeholder,
.chub-field textarea::placeholder { color: rgba(255,255,255,0.28); }
.chub-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8a84b' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.chub-field select option { background: var(--deep-3); color: var(--white); }
.chub-field input:focus,
.chub-field select:focus,
.chub-field textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(212,160,64,0.15);
}
.chub-field textarea { resize: vertical; min-height: 100px; }
.chub-form-footer { display: flex; align-items: center; gap: 20px; }
.chub-form-footer .btn { flex-shrink: 0; font-size: 1rem; padding: 15px 36px; }
.chub-form-note { font-size: 0.78rem; color: rgba(255,255,255,0.40); line-height: 1.5; }
.chub-form-note svg { width: 13px; height: 13px; fill: var(--gold); vertical-align: -1px; margin-right: 3px; }

/* ====================================================
   FOOTER � PREMIUM REDESIGN
   ==================================================== */
#footer {
  background: linear-gradient(180deg, #0a0418 0%, #07030f 100%);
  color: var(--white);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Top decorative bar */
#footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gold), var(--brand-light), var(--gold), transparent);
}

/* Subtle background glow */
#footer::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 900px; height: 400px;
  background: radial-gradient(ellipse at center top, rgba(91,13,168,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  padding: 72px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 56px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Brand column */
.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.footer-logo-img {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: contain;
  border: 2px solid rgba(212,166,255,0.2);
  filter: drop-shadow(0 0 10px rgba(212,166,255,0.3));
  flex-shrink: 0;
}
.footer-logo-text h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 3px;
}
.footer-brand-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-dim);
  line-height: 1;
}
.footer-brand > p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.85;
  max-width: 310px;
  margin-bottom: 28px;
}

/* Social buttons */
.footer-socials {
  display: flex;
  gap: 10px;
}
.footer-social-btn {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t2) var(--ease);
  color: rgba(255,255,255,0.6);
}
.footer-social-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--deep);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(212,160,64,0.35);
}
.footer-social-btn svg { width: 17px; height: 17px; fill: currentColor; }

/* Column headings */
.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 14px;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 28px; height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  opacity: 0.5;
}

/* Nav links */
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-link {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.42);
  cursor: pointer;
  transition: color var(--t1), padding-left var(--t1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-link:hover {
  color: var(--white);
  padding-left: 4px;
}
.footer-link span { color: rgba(255,255,255,0.22); font-size: 0.75rem; }

/* Contact column */
.footer-contact-list { display: flex; flex-direction: column; gap: 16px; }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.6;
}
.footer-contact-icon {
  width: 32px; height: 32px;
  background: rgba(212,160,64,0.1);
  border: 1px solid rgba(212,160,64,0.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.footer-contact-icon svg { width: 15px; height: 15px; fill: var(--gold); }
.footer-contact-item a { color: inherit; transition: color var(--t1); }
.footer-contact-item a:hover { color: var(--white); }
.footer-contact-hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
}
.footer-contact-hours-dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(74,222,128,0.7);
  animation: pulse 2s ease-in-out infinite;
}

/* CTA button in footer */
.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--r);
  transition: all var(--t2) var(--ease);
  width: 100%;
  text-align: center;
  border: none;
}
.footer-cta-btn:hover {
  background: linear-gradient(135deg, #f0d050, var(--gold-bright));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,160,64,0.4);
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.22); }
.footer-bottom-links {
  display: flex;
  gap: 24px;
}
.footer-bottom-links a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.22);
  transition: color var(--t1);
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.55); }

/* ====================================================
   TIMETABLE SECTION
   ==================================================== */
.timetable-section { background: var(--off); padding: 0; }
.timetable-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.timetable-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--t2) var(--ease), box-shadow var(--t2);
}
.timetable-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.timetable-card-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.timetable-card-header {
  background: var(--deep);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.timetable-card-header .age-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212,160,64,0.12);
  border: 1px solid rgba(212,160,64,0.3);
  border-radius: 100px;
  padding: 4px 12px;
  white-space: nowrap;
}
.timetable-card-header h4 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
}
.timetable-card-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.timetable-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.timetable-sessions-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.timetable-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-dark);
  gap: 16px;
}
.timetable-row:last-child { border-bottom: none; }
.timetable-day {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  min-width: 70px;
}
.timetable-time {
  font-size: 0.85rem;
  color: var(--muted);
  flex: 1;
}
.timetable-level {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-pale);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.timetable-duration {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--off);
  border: 1px solid var(--border-dark);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.timetable-cta {
  display: block;
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
  background: var(--brand);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r);
  padding: 12px 20px;
  margin-top: 20px;
  transition: background var(--t2) var(--ease), transform var(--t2);
}
.timetable-cta:hover { background: var(--deep); transform: translateY(-1px); }
.timetable-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 40px;
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-left: 4px solid var(--gold);
  border-radius: var(--r);
  padding: 16px 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.timetable-notice-icon {
  font-size: 1.1rem;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.timetable-notice p {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ====================================================
   PRICING SECTION
   ==================================================== */
.pricing-section { background: var(--white); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.pricing-card {
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border-dark);
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: transform var(--t2) var(--ease), box-shadow var(--t2);
  background: var(--white);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-card.featured {
  background: var(--deep);
  border-color: var(--gold);
  transform: scale(1.04);
}
.pricing-card.featured:hover { transform: scale(1.04) translateY(-6px); }
.pricing-featured-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--deep);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 100px;
  white-space: nowrap;
}
.pricing-icon { font-size: 2.4rem; margin-bottom: 16px; display: block; }
.pricing-card h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.pricing-card .pricing-who {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.pricing-card.featured h4 { color: var(--white); }
.pricing-card.featured .pricing-who { color: rgba(255,255,255,0.55); }
.pricing-price {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
}
.pricing-card.featured .pricing-price { color: var(--gold); }
.pricing-period { font-size: 0.82rem; color: var(--muted); margin-bottom: 28px; }
.pricing-card.featured .pricing-period { color: rgba(255,255,255,0.5); }
.pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
.pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.75); }
.pricing-features li::before {
  content: '?';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}
.pricing-note {
  margin-top: 40px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 1023px) {
  .timetable-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  .pricing-card.featured { transform: scale(1); }
  .pricing-card.featured:hover { transform: translateY(-6px); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .timetable-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .timetable-card-body { padding: 18px 20px; }
  .pricing-card { padding: 32px 24px; }
  .timetable-notice { padding: 14px 16px; }
}

/* ====================================================
   ANIMATIONS
   ==================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }

/* ====================================================
   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;
  }
  .marquee-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
/* ====================================================
   RESPONSIVE � 5-BREAKPOINT SYSTEM
   1. Large Desktop  1280px+  (base styles above)
   2. Desktop        1024px�1279px
   3. iPad / Tablet   768px�1023px
   4. Mobile Large    480px�767px
   5. Mobile Small    0px�479px
   ==================================================== */

/* -- 2. DESKTOP (=1280px) -- */
@media (max-width: 1280px) {
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid   { grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
  .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
}

/* -- 3. iPAD / TABLET (768px � 1023px) -- */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Layout */
  :root { --nav-h: 88px; }
  .container { padding: 0 28px; }
  .section { padding: 80px 0; }
  .section-compact { padding: 52px 0; }

  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-img { width: 80px; height: 80px; }

  /* Grids */
  .grid-2, .grid-2-3 { grid-template-columns: 1fr; gap: 48px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Hero */
  .hero { min-height: 100svh; align-items: stretch; justify-content: center; }
  .hero .container { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 56px; }
  .hero h1 { font-size: clamp(2.8rem, 5.5vw, 4.2rem); }
  .hero-sub { font-size: 1rem; max-width: 480px; }
  .hero-stats { gap: 28px; flex-wrap: wrap; }
  .hero-stat-num { font-size: 1.9rem; }
  .hero-btns { gap: 14px; }
  .hero-scroll-indicator { display: none; }

  /* Benefits */
  .benefits-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .benefit-card { padding: 28px 18px; }

  /* Classes */
  .classes-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .class-card { aspect-ratio: 4/5; }
  .class-card-body p { opacity: 1; transform: translateY(0); }
  .class-card-body h3 { font-size: 1.5rem; }

  /* About CKD */
  .img-frame img { height: 420px; }
  .img-badge { right: -12px; bottom: 16px; }
  .ckd-pillars { grid-template-columns: 1fr; }

  /* Instructors */
  .instructors-grid { grid-template-columns: 1fr; gap: 24px; }
  .instructor-card { grid-template-columns: 180px 1fr; }
  .instructor-img-wrap img { min-height: 240px; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .testimonials-section::after { display: none; }

  /* Trial */
  .trial-section { padding: 88px 0; }
  .trial-content h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
  .trial-btns { gap: 14px; }
  .trial-contact { gap: 28px; }

  /* Social */
  .social-links-grid { gap: 14px; margin-top: 28px; }
  .social-section .social-link-card { padding: 16px 14px; }
  .social-link-icon { width: 44px; height: 44px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand > p { max-width: 100%; }

  /* About page */
  .philosophy-grid { grid-template-columns: 1fr; gap: 2px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Class pages */
  .feature-list-big { grid-template-columns: repeat(2, 1fr); }
  .curriculum-grid { grid-template-columns: 1fr; }
  .class-testimonial-panel { padding: 36px; }

  /* Map */
  .map-wrapper { height: 360px; }
}

/* -- 4. MOBILE LARGE (480px � 767px) -- */
@media (min-width: 480px) and (max-width: 767px) {

  :root { --nav-h: 82px; }
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .section-compact { padding: 44px 0; }

  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-img { width: 74px; height: 74px; }
  .nav-logo-name { font-size: 1rem; }
  .nav-logo-tag { font-size: 0.58rem; }

  /* Hero — content height on phones (avoid full-viewport wall of image) */
  .hero { min-height: fit-content; align-items: flex-start; }
  .hero .container { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 48px; }
  .hero h1 { font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1.05; }
  .hero-sub { font-size: 0.97rem; margin: 20px 0 36px; }
  .hero-btns { flex-direction: column; gap: 12px; }
  .hero-btns .btn { width: 100%; justify-content: center; padding: 15px 28px; }
  .hero-stats { gap: 20px; flex-wrap: wrap; padding-top: 20px; }
  .hero-stat-num { font-size: 1.7rem; }
  .hero-stat-label { font-size: 0.65rem; }
  .hero-scroll-indicator { display: none; }
  .hero-badge span { font-size: 0.68rem; letter-spacing: 1.5px; }

  /* Grids */
  .grid-2, .grid-2-3 { grid-template-columns: 1fr; gap: 36px; }
  .grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Benefits */
  .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .benefit-card { padding: 24px 16px; }
  .benefit-icon { width: 52px; height: 52px; margin-bottom: 14px; }

  /* Classes */
  .classes-grid { grid-template-columns: 1fr; gap: 16px; }
  .class-card { aspect-ratio: 16/9; }
  .class-card-body p { opacity: 1; transform: translateY(0); }
  .class-card-body { padding: 24px 20px; }
  .class-card-body h3 { font-size: 1.5rem; margin-bottom: 8px; }
  .class-card-btn { display: inline-flex; }

  /* Img frame */
  .img-frame img { height: 300px; }
  .img-frame-accent { display: none; }
  .img-badge { right: 0; bottom: 12px; padding: 14px 18px; }
  .img-badge-num { font-size: 1.8rem; }

  /* CKD pillars */
  .ckd-pillars { grid-template-columns: 1fr; gap: 10px; }

  /* Instructors */
  .instructors-grid { grid-template-columns: 1fr; gap: 20px; }
  .instructor-card { grid-template-columns: 1fr; }
  .instructor-img-wrap img { min-height: 200px; max-height: 220px; object-position: top; }
  .instructor-info { padding: 24px; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; gap: 16px; }
  .testimonials-section::after { display: none; }
  .testimonial-card { padding: 28px 24px; }

  /* Trial */
  .trial-section { padding: 72px 0; }
  .trial-content h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .trial-content p { font-size: 0.95rem; }
  .trial-btns { flex-direction: column; align-items: stretch; gap: 12px; }
  .trial-btns .btn { width: 100%; justify-content: center; }
  .trial-contact { flex-direction: column; align-items: center; gap: 16px; }

  /* Social */
  .social-links-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }

  /* Map */
  .map-wrapper { height: 300px; }

  /* Footer */
  .footer-inner { padding: 56px 0 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-socials { gap: 10px; }
  .footer-brand { grid-column: 1 / -1; }

  /* About page */
  .philosophy-item { padding: 32px 28px; }
  .philosophy-num { font-size: 2.5rem; }
  .values-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Class pages */
  .feature-list-big { grid-template-columns: 1fr; gap: 14px; }
  .feature-item-big { padding: 20px; gap: 16px; }
  .curriculum-grid { grid-template-columns: 1fr; gap: 10px; }
  .class-testimonial-panel { padding: 28px 24px; margin-top: 0; }

  /* Page hero */
  .page-hero { padding: calc(var(--nav-h) + 56px) 0 72px; }
  .page-hero h1 { font-size: clamp(2.2rem, 7vw, 3rem); }
  .page-hero p { font-size: 0.97rem; }

  /* Marquee */
  .marquee-item { padding: 0 22px; font-size: 0.74rem; letter-spacing: 0.12em; }

  /* Eyebrow */
  .eyebrow { font-size: 10px; }

  /* Headings */
  .h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .h3 { font-size: clamp(1.4rem, 5vw, 2rem); }
}

/* -- 5. MOBILE SMALL (=479px) -- */
@media (max-width: 479px) {

  :root { --nav-h: 76px; }
  .container { padding: 0 16px; }
  .section { padding: 56px 0; }
  .section-compact { padding: 40px 0; }

  /* Nav */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-img { width: 68px; height: 68px; }
  .nav-logo-name { font-size: 0.88rem; }
  .nav-logo-tag { display: none; }

  /* Hero — content height on small phones */
  .hero { min-height: fit-content; align-items: stretch; justify-content: flex-start; }
  .hero .container { padding-top: calc(var(--nav-h) + 24px); padding-bottom: 32px; }
  .hero h1 { font-size: clamp(2rem, 9.5vw, 2.8rem); line-height: 1.08; }
  .hero h1 .italic { margin-top: 4px; }
  .hero-badge { padding: 6px 14px 6px 10px; margin-bottom: 24px; }
  .hero-badge span { font-size: 0.64rem; letter-spacing: 1px; }
  .hero-badge-dot { width: 6px; height: 6px; }
  .hero-sub { font-size: 0.92rem; margin: 16px 0 28px; line-height: 1.7; }
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 0.78rem; }
  .hero-stats { gap: 16px; flex-wrap: wrap; padding-top: 18px; }
  .hero-stat-num { font-size: 1.55rem; }
  .hero-stat-label { font-size: 0.62rem; letter-spacing: 1px; }
  .hero-scroll-indicator { display: none; }

  /* Typography */
  .h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .h3 { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
  .h4 { font-size: 1.1rem; }
  .lead { font-size: 0.97rem; }
  .eyebrow { font-size: 10px; letter-spacing: 2.5px; }

  /* Grids � all single column */
  .grid-2, .grid-2-3, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 20px; }
  .benefits-grid   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .classes-grid    { grid-template-columns: 1fr; gap: 14px; }
  .values-grid     { grid-template-columns: 1fr; gap: 12px; }
  .testimonials-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature-list-big  { grid-template-columns: 1fr; gap: 12px; }
  .curriculum-grid   { grid-template-columns: 1fr; gap: 8px; }
  .instructors-grid  { grid-template-columns: 1fr; gap: 16px; }
  .philosophy-grid   { grid-template-columns: 1fr; gap: 2px; }

  /* Benefits */
  .benefit-card { padding: 20px 14px; }
  .benefit-icon { width: 46px; height: 46px; margin-bottom: 12px; }
  .benefit-icon svg { width: 20px; height: 20px; }
  .benefit-card h4 { font-size: 0.92rem; }
  .benefit-card p { font-size: 0.78rem; }

  /* Classes */
  .class-card { aspect-ratio: 4/3; }
  .class-card-body p { opacity: 1; transform: translateY(0); }
  .class-card-body { padding: 20px 18px; }
  .class-card-body h3 { font-size: 1.35rem; margin-bottom: 6px; }
  .class-card-age { font-size: 0.65rem; margin-bottom: 6px; }

  /* Img frame */
  .img-frame img { height: 260px; border-radius: 6px; }
  .img-frame-accent { display: none; }
  .img-badge { display: none; }

  /* CKD pillars */
  .ckd-pillars { grid-template-columns: 1fr; gap: 8px; }
  .pillar { padding: 12px; }
  .pillar h6 { font-size: 0.83rem; }
  .pillar p { font-size: 0.75rem; }

  /* Instructors */
  .instructor-card { grid-template-columns: 1fr; }
  .instructor-img-wrap img { min-height: 180px; max-height: 200px; object-position: top center; }
  .instructor-rank { font-size: 0.62rem; padding: 8px 12px; }
  .instructor-info { padding: 20px; }
  .instructor-info h3 { font-size: 1.25rem; }
  .instructor-badges { gap: 6px; }
  .badge { font-size: 0.68rem; padding: 4px 10px; }

  /* Testimonials */
  .testimonial-card { padding: 24px 20px; }
  .testimonials-section::after { display: none; }
  .testimonial-text { font-size: 0.9rem; }

  /* Trial */
  .trial-section { padding: 64px 0; }
  .trial-price-badge { font-size: 0.68rem; padding: 6px 16px; letter-spacing: 2px; }
  .trial-content h2 { font-size: clamp(1.6rem, 7.5vw, 2.2rem); margin-bottom: 16px; }
  .trial-content p { font-size: 0.9rem; margin-bottom: 28px; }
  .trial-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .trial-btns .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 0.8rem; }
  .trial-contact { flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 28px; margin-top: 28px; }
  .contact-item { font-size: 0.83rem; }

  /* Social */
  .social-links-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .social-section .social-link-card { padding: 14px 16px; min-height: 48px; }
  .social-link-icon { width: 42px; height: 42px; }
  .social-link-icon svg { width: 22px; height: 22px; }
  .social-link-meta { font-size: 0.88rem; }

  /* Map */
  .map-wrapper { height: 260px; border-radius: 6px; }

  /* Footer */
  .footer-inner { padding: 48px 0 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: 1; }
  .footer-logo-text h3 { font-size: 1.15rem; }
  .footer-brand > p { font-size: 0.82rem; }
  .footer-col h4 { font-size: 0.68rem; margin-bottom: 14px; }
  .footer-link { font-size: 0.82rem; }
  .footer-contact-item { font-size: 0.82rem; }
  .footer-socials { gap: 8px; }
  .footer-social-btn { width: 36px; height: 36px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; padding: 20px 0; }
  .footer-bottom p { font-size: 0.72rem; }
  .footer-bottom-links { justify-content: center; }

  /* Buttons global */
  .btn { padding: 13px 24px; font-size: 0.78rem; letter-spacing: 1.5px; }
  .btn-lg { padding: 14px 28px; font-size: 0.82rem; }
  .btn-sm { padding: 9px 18px; font-size: 0.72rem; }

  /* About page */
  .philosophy-item { padding: 28px 22px; }
  .philosophy-num { font-size: 2rem; }
  .value-card { padding: 24px 20px; }
  .value-card h4 { font-size: 1.05rem; }
  .value-card p { font-size: 0.83rem; }

  /* Class pages */
  .feature-item-big { padding: 18px; gap: 14px; }
  .feature-item-icon { width: 44px; height: 44px; flex-shrink: 0; }
  .feature-item-icon svg { width: 20px; }
  .feature-item-big h5 { font-size: 1rem; }
  .feature-item-big p { font-size: 0.82rem; }
  .curriculum-item { padding: 12px 16px; font-size: 0.83rem; }
  .curriculum-tick { width: 20px; height: 20px; }
  .class-testimonial-panel { padding: 24px 20px; border-radius: 6px; }

  /* Page hero */
  .page-hero { padding: calc(var(--nav-h) + 48px) 0 64px; }
  .page-hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.8rem); }
  .page-hero p { font-size: 0.93rem; }

  /* Marquee */
  .marquee-strip { padding: 13px 0; }
  .marquee-item { padding: 0 18px; font-size: 0.72rem; letter-spacing: 0.11em; gap: 14px; }

  /* Divider */
  .divider { margin: 16px 0 24px; }

  /* Mobile drawer: ensure full height & scrollable */
  .nav-drawer { width: min(300px, 92vw); }
}

/* ====================================================
   UPGRADES & NEW ANIMATIONS
   ==================================================== */

/* Floating particles in hero */
.hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.particle {
  position:absolute;
  border-radius:50%;
  opacity:0;
  animation: floatUp var(--dur,8s) var(--delay,0s) ease-in-out infinite;
}
@keyframes floatUp {
  0%   { transform:translateY(100vh) scale(0); opacity:0; }
  10%  { opacity:var(--op,0.25); }
  90%  { opacity:var(--op,0.25); }
  100% { transform:translateY(-10vh) scale(1.2); opacity:0; }
}

/* 3D tilt on cards */
.tilt-card { transform-style:preserve-3d; will-change:transform; }

/* -- TINY TIGERS � PLAYFUL UPGRADES -- */
.tigers-hero-emoji {
  position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden;
}
.tiger-float {
  position:absolute;
  font-size:2.2rem;
  animation: tigerFloat var(--td,6s) var(--tdel,0s) ease-in-out infinite;
  opacity:0;
  -webkit-user-select:none;
  user-select:none;
}
@keyframes tigerFloat {
  0%   { transform:translateY(60px) rotate(-10deg); opacity:0; }
  15%  { opacity:0.55; }
  50%  { transform:translateY(-20px) rotate(8deg); }
  85%  { opacity:0.55; }
  100% { transform:translateY(60px) rotate(-10deg); opacity:0; }
}

/* Fun stats row � tigers */
.fun-stats {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin:36px 0;
}
.fun-stat-bubble {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:110px; height:110px;
  border-radius:50%;
  background:var(--brand);
  border:3px solid var(--gold);
  box-shadow: 0 0 0 0 rgba(212,166,255,0.5);
  animation: bubblePulse 3s ease-in-out infinite;
  cursor:default;
  transition:transform 0.3s;
}
.fun-stat-bubble:nth-child(2) { animation-delay:0.6s; background:var(--deep-3); }
.fun-stat-bubble:nth-child(3) { animation-delay:1.2s; background:var(--brand-light); }
.fun-stat-bubble:hover { transform:scale(1.12) rotate(-4deg); }
@keyframes bubblePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(212,166,255,0.45); }
  50%      { box-shadow:0 0 0 14px rgba(212,166,255,0); }
}
.fun-stat-bubble .fsb-num {
  font-family:var(--serif);
  font-size:1.6rem; font-weight:900;
  color:var(--gold); line-height:1;
}
.fun-stat-bubble .fsb-label {
  font-size:0.62rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  text-align:center; margin-top:4px;
  padding:0 8px;
}

/* Bouncing paw prints trail */
.paw-trail {
  display:flex; gap:8px; align-items:center;
  margin:20px 0;
}
.paw {
  font-size:1.4rem;
  animation: pawBounce 1.2s ease-in-out infinite;
  display:inline-block;
}
.paw:nth-child(2) { animation-delay:0.15s; }
.paw:nth-child(3) { animation-delay:0.3s; }
.paw:nth-child(4) { animation-delay:0.45s; }
.paw:nth-child(5) { animation-delay:0.6s; }
@keyframes pawBounce {
  0%,100% { transform:translateY(0) scale(1); }
  40%     { transform:translateY(-10px) scale(1.15); }
}

/* Belt progress bar � kids & tigers */
.belt-progress-section { background:var(--deep); padding:80px 0; }
.belt-track {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0;
  position:relative;
  margin-top:64px;
  padding-bottom:8px;
}
.belt-track::before {
  content:'';
  position:absolute;
  top:26px; left:0; right:0;
  height:3px;
  background:rgba(255,255,255,0.08);
  z-index:0;
}
.belt-track-fill {
  position:absolute;
  top:26px; left:0;
  height:3px;
  background:linear-gradient(to right, #fff9e6, #D4AF37, #c0392b, #1a1a1a);
  z-index:1;
  width:0%;
  transition:width 1.8s cubic-bezier(0.4,0,0.2,1) 0.3s;
  border-radius:2px;
}
.belt-node {
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; gap:10px;
  flex:1;
  cursor:default;
}
.belt-circle {
  width:52px; height:52px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  font-size:0;
  transition:all 0.5s ease;
  transform:scale(0.8);
  opacity:0.35;
  position:relative;
}
/* Belt colours */
.belt-circle[data-color="white"]  { background:#f0f0f0; border-color:#cccccc; }
.belt-circle[data-color="yellow"] { background:#FFD700; border-color:#e6c200; }
.belt-circle[data-color="gold"]   { background:#D4AF37; border-color:#b8922a; }
.belt-circle[data-color="orange"] { background:#FF7518; border-color:#e05e00; }
.belt-circle[data-color="green"]  { background:#2E8B57; border-color:#236b42; }
.belt-circle[data-color="blue"]   { background:#1565C0; border-color:#0d4f9e; }
.belt-circle[data-color="purple"] { background:#6A0DAD; border-color:#520a87; }
.belt-circle[data-color="red"]    { background:#C0392B; border-color:#96291e; }
.belt-circle[data-color="brown"]  { background:#6B3A2A; border-color:#4e2b1e; }
.belt-circle[data-color="black"]  { background:#1a1a1a; border-color:#444444; }
/* Black stripe accent */
.belt-circle[data-color="black"]::after {
  content:'';
  position:absolute;
  bottom:10px; left:50%; transform:translateX(-50%);
  width:60%; height:3px;
  background:#D4AF37;
  border-radius:2px;
}
.belt-node.active .belt-circle {
  border-color:rgba(255,255,255,0.7);
  box-shadow:0 0 0 5px rgba(255,255,255,0.08), 0 6px 24px rgba(0,0,0,0.45);
  transform:scale(1.15);
  opacity:1;
  animation:beltPop 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes beltPop {
  0%  { transform:scale(0.5); opacity:0; }
  100%{ transform:scale(1.15); opacity:1; }
}
.belt-label {
  font-size:0.62rem; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  text-align:center;
  transition:color 0.4s;
  white-space:nowrap;
}
.belt-node.active .belt-label { color:rgba(255,255,255,0.9); }

/* Kids � animated achievement counter cards */
.achievement-section { background:var(--off); }
.achievement-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:56px;
}
.achievement-card {
  background:var(--white);
  border-radius:var(--r-lg);
  padding:36px 24px;
  text-align:center;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  transition:transform 0.4s var(--ease), box-shadow 0.4s;
}
.achievement-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  opacity:0;
  transition:opacity 0.4s;
}
.achievement-card:hover { transform:translateY(-8px) scale(1.03); box-shadow:var(--shadow-xl); }
.achievement-card:hover::before { opacity:1; }
.achievement-card:hover .ach-num,
.achievement-card:hover .ach-label,
.achievement-card:hover .ach-icon { color:var(--white); filter:none; }
.ach-icon {
  font-size:2.4rem;
  margin-bottom:12px;
  display:block;
  transition:transform 0.4s, color 0.4s;
  position:relative; z-index:1;
}
.achievement-card:hover .ach-icon { transform:scale(1.3) rotate(-8deg); }
.ach-num {
  font-family:var(--serif);
  font-size:2.8rem; font-weight:900;
  color:var(--brand);
  line-height:1; position:relative; z-index:1;
  transition:color 0.4s;
}
.ach-label {
  font-size:0.78rem; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--muted);
  margin-top:8px; position:relative; z-index:1;
  transition:color 0.4s;
}

/* Kids � fun skill tags cloud */
.skill-cloud {
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:40px;
}
.skill-tag {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  background:var(--white);
  border:2px solid var(--brand-pale);
  border-radius:100px;
  font-size:0.82rem; font-weight:600;
  color:var(--brand);
  cursor:default;
  transition:all 0.3s var(--ease);
  animation:tagFloat var(--tfd,4s) var(--tfdel,0s) ease-in-out infinite;
}
.skill-tag:hover {
  background:var(--brand);
  color:var(--white);
  border-color:var(--brand);
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 8px 24px rgba(91,13,168,0.3);
}
.skill-tag .tag-emoji { font-size:1rem; }
@keyframes tagFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-5px); }
}

/* Animated countdown / age-group banner */
.age-banner {
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 60%, var(--deep-3) 100%);
  border-radius:var(--r-lg);
  padding:40px 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  overflow:hidden;
  position:relative;
  margin:0 0 64px;
}
.age-banner::after {
  content:'';
  position:absolute;
  top:-60px; right:-60px;
  width:240px; height:240px;
  border-radius:50%;
  background:rgba(255,255,255,0.07);
  pointer-events:none;
}
.age-banner-text h3 {
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:700; color:var(--white);
}
.age-banner-text p {
  font-size:0.9rem; color:rgba(255,255,255,0.7);
  margin-top:8px;
}
.age-pills { display:flex; gap:12px; flex-wrap:wrap; }
.age-pill {
  padding:10px 22px;
  background:rgba(255,255,255,0.15);
  border:2px solid rgba(255,255,255,0.3);
  border-radius:100px;
  font-size:0.82rem; font-weight:700;
  letter-spacing:1px;
  color:var(--white);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:all 0.3s;
  cursor:default;
}
.age-pill:hover {
  background:var(--gold); border-color:var(--gold);
  color:var(--deep); transform:translateY(-2px);
}

/* Shaking fist animation for kids hero */
.fist-anim {
  display:inline-block;
  animation:fistShake 2.5s ease-in-out infinite;
}
@keyframes fistShake {
  0%,100% { transform:rotate(0deg) scale(1); }
  20%     { transform:rotate(-12deg) scale(1.1); }
  40%     { transform:rotate(10deg) scale(1.08); }
  60%     { transform:rotate(-8deg) scale(1.05); }
  80%     { transform:rotate(6deg) scale(1.02); }
}

/* Glowing CTA pulse */
.btn-glow {
  animation:ctaGlow 2.8s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(212,166,255,0.5); }
  50%     { box-shadow:0 0 0 16px rgba(212,166,255,0); }
}

/* Stars rating animated */
.star-pop {
  display:inline-block;
  animation:starPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.star-pop:nth-child(1){animation-delay:0.05s}
.star-pop:nth-child(2){animation-delay:0.15s}
.star-pop:nth-child(3){animation-delay:0.25s}
.star-pop:nth-child(4){animation-delay:0.35s}
.star-pop:nth-child(5){animation-delay:0.45s}
@keyframes starPop {
  0%  { transform:scale(0) rotate(-30deg); opacity:0; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

/* Stagger bounce for curriculum items */
.bounce-in {
  opacity:0;
  transform:translateX(-20px);
  transition:opacity 0.45s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.bounce-in.in { opacity:1; transform:translateX(0); }

/* Page transition ripple */
.page-enter {
  animation:pageEnter 0.5s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes pageEnter {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Floating glow orbs background */
.orb-bg {
  position:absolute; pointer-events:none; overflow:hidden; inset:0; z-index:0;
}
.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  animation:orbDrift var(--od,14s) var(--oddel,0s) ease-in-out infinite alternate;
}
@keyframes orbDrift {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(var(--dx,40px), var(--dy,-30px)) scale(1.15); }
}

/* Responsive � achievement grid */
@media (max-width:900px) {
  .achievement-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:479px) {
  .achievement-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .fun-stats { gap:12px; }
  .fun-stat-bubble { width:90px; height:90px; }
  .fun-stat-bubble .fsb-num { font-size:1.3rem; }
  .belt-circle { width:34px; height:34px; }
  .belt-label { font-size:0.52rem; letter-spacing:0.8px; }
  .age-banner { padding:28px 24px; }
  .skill-cloud { gap:8px; }
  .skill-tag { padding:8px 14px; font-size:0.78rem; }
}


/* =============================================
   TINY TIGERS � FULL PLAYFUL REDESIGN
   ============================================= */

/* -- Confetti rain -- */
.confetti-wrap { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.confetti-piece {
  position:absolute;
  top:-20px;
  width:10px; height:14px;
  border-radius:2px;
  opacity:0;
  animation: confettiFall var(--cf-dur,4s) var(--cf-del,0s) ease-in infinite;
}
@keyframes confettiFall {
  0%   { transform:translateY(-20px) rotate(0deg);   opacity:1; }
  80%  { opacity:0.9; }
  100% { transform:translateY(105vh) rotate(720deg); opacity:0; }
}

/* -- Rainbow title glow -- */
@keyframes rainbowGlow {
  0%   { text-shadow:0 0 24px #ff6b6b, 0 0 48px #ff6b6b; color:#ff6b6b; }
  20%  { text-shadow:0 0 24px #ffd93d, 0 0 48px #ffd93d; color:#ffd93d; }
  40%  { text-shadow:0 0 24px #6bcb77, 0 0 48px #6bcb77; color:#6bcb77; }
  60%  { text-shadow:0 0 24px #4d96ff, 0 0 48px #4d96ff; color:#4d96ff; }
  80%  { text-shadow:0 0 24px #c77dff, 0 0 48px #c77dff; color:#c77dff; }
  100% { text-shadow:0 0 24px #ff6b6b, 0 0 48px #ff6b6b; color:#ff6b6b; }
}
.rainbow-text { animation: rainbowGlow 3s ease-in-out infinite; }

/* -- Tiger mascot bounce -- */
.tiger-mascot {
  font-size:clamp(5rem,14vw,9rem);
  display:block;
  text-align:center;
  animation: tigerMascot 2s cubic-bezier(0.34,1.56,0.64,1) infinite;
  filter:drop-shadow(0 8px 24px rgba(255,107,107,0.5));
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  line-height:1;
}
@keyframes tigerMascot {
  0%,100% { transform:translateY(0) scale(1) rotate(-3deg); }
  30%     { transform:translateY(-22px) scale(1.12) rotate(4deg); }
  60%     { transform:translateY(-10px) scale(1.06) rotate(-2deg); }
}
.tiger-mascot:hover { animation-duration:0.5s; }

/* -- Floating stars field -- */
.stars-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.star-dot {
  position:absolute;
  border-radius:50%;
  animation: starTwinkle var(--sd,2.5s) var(--sdel,0s) ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100% { transform:scale(1); opacity:var(--sop,0.6); }
  50%     { transform:scale(1.8); opacity:1; }
}

/* -- Tigers hero wrapper -- */
.tigers-hero-new {
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
  background:linear-gradient(160deg, #1a0535 0%, #2d0a6b 35%, #5B0DA8 65%, #8b1fce 100%);
  padding:calc(var(--nav-h) + 40px) 20px 60px;
  text-align:center;
}

.tigers-hero-title {
  font-family:var(--serif);
  font-size:clamp(3.5rem,10vw,7rem);
  font-weight:900;
  color:#fff;
  line-height:1;
  margin:24px 0 16px;
  letter-spacing:-0.02em;
}

.tigers-hero-sub {
  font-size:clamp(1.1rem,2.5vw,1.4rem);
  color:rgba(255,255,255,0.8);
  max-width:560px;
  line-height:1.65;
  font-weight:300;
  margin:0 auto 36px;
}

/* -- Wave divider -- */
.wave-divider { display:block; width:100%; overflow:hidden; line-height:0; }
.wave-divider svg { display:block; width:100%; height:80px; }

/* -- CARD GRID � big fun cards -- */
.tigers-card-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-top:48px;
}
.tigers-card {
  border-radius:20px;
  padding:40px 32px;
  text-align:center;
  position:relative;
  overflow:hidden;
  cursor:default;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s;
}
.tigers-card:hover { transform:translateY(-10px) scale(1.03); box-shadow:0 24px 60px rgba(91,13,168,0.35); }
.tigers-card-1 { background:linear-gradient(135deg,#ff6b6b,#ff8e53); }
.tigers-card-2 { background:linear-gradient(135deg,#ffd93d,#ff9a3c); }
.tigers-card-3 { background:linear-gradient(135deg,#6bcb77,#4d9e5a); }
.tigers-card-4 { background:linear-gradient(135deg,#4d96ff,#2563eb); }

.tigers-card-emoji {
  font-size:3.5rem;
  display:block;
  margin-bottom:16px;
  animation:cardEmojiWobble 3s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.tigers-card:nth-child(2) .tigers-card-emoji { animation-delay:0.4s; }
.tigers-card:nth-child(3) .tigers-card-emoji { animation-delay:0.8s; }
.tigers-card:nth-child(4) .tigers-card-emoji { animation-delay:1.2s; }
@keyframes cardEmojiWobble {
  0%,100% { transform:scale(1) rotate(-5deg); }
  50%     { transform:scale(1.2) rotate(5deg); }
}

.tigers-card h3 {
  font-family:var(--serif);
  font-size:1.5rem; font-weight:700;
  color:#fff; margin-bottom:10px;
}
.tigers-card p { font-size:0.9rem; color:rgba(255,255,255,0.88); line-height:1.6; }

/* -- RAINBOW BELT ROW -- */
.belt-rainbow-section {
  background:#fff;
  padding:80px 0;
  text-align:center;
  overflow:hidden;
}
.belt-rainbow-title {
  font-family:var(--serif);
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;
  color:var(--deep);
  margin-bottom:8px;
}
.belt-rainbow-sub {
  font-size:1rem; color:var(--muted);
  margin-bottom:48px;
}
.belt-rainbow-row {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  position:relative;
}
.belt-rainbow-row::before {
  content:'';
  position:absolute;
  bottom:36px; left:5%; right:5%;
  height:6px;
  background:linear-gradient(to right,#f0f0f0,#f5d020,#c8a800,#e87722,#2e8b4a,#1565c0,#6a1b9a,#c62828,#5d3a1a,#1a1a1a);
  border-radius:6px;
  z-index:0;
}
.belt-white  { background:#f0f0f0; border-color:#ccc !important; }
.belt-yellow { background:#f5d020; border-color:#c8a800 !important; }
.belt-gold   { background:#c8a800; border-color:#9a7d00 !important; }
.belt-orange { background:#e87722; border-color:#c45a00 !important; }
.belt-green  { background:#2e8b4a; border-color:#1e6333 !important; }
.belt-blue   { background:#1565c0; border-color:#0d47a1 !important; }
.belt-purple { background:#6a1b9a; border-color:#4a0072 !important; }
.belt-red    { background:#c62828; border-color:#8e0000 !important; }
.belt-brown  { background:#5d3a1a; border-color:#3e2412 !important; }
.belt-black  { background:#1a1a1a; border-color:#000 !important; box-shadow:0 4px 20px rgba(0,0,0,0.5); }
.belt-item {
  display:flex; flex-direction:column;
  align-items:center; gap:12px;
  flex:1; max-width:90px;
  position:relative; z-index:1;
  cursor:default;
}
.belt-circle-big {
  width:64px; height:64px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.9);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:0 4px 20px rgba(0,0,0,0.18);
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
  opacity:0;
  transform:translateY(30px) scale(0.7);
}
.belt-circle-big.pop {
  opacity:1;
  transform:translateY(0) scale(1);
}
.belt-item:hover .belt-circle-big {
  transform:translateY(-12px) scale(1.2) rotate(8deg);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
}
.belt-name {
  font-size:0.7rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); transition:color 0.3s;
}
.belt-item:hover .belt-name { color:var(--brand); }

/* -- WHAT HAPPENS IN CLASS -- */
.class-activities-section {
  background:var(--off);
  padding:80px 0;
}
.activities-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:48px;
}
.activity-card {
  background:#fff;
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  box-shadow:0 4px 20px rgba(91,13,168,0.08);
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s;
  border-bottom:4px solid transparent;
  position:relative;
  overflow:hidden;
}
.activity-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--ac-color, var(--brand));
}
.activity-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 48px rgba(91,13,168,0.2);
}
.activity-card:hover .activity-emoji { animation-duration:0.4s; }
.activity-emoji {
  font-size:2.8rem;
  display:block; margin-bottom:16px;
  animation:actEmoji 4s ease-in-out infinite;
}
.activity-card:nth-child(2) .activity-emoji { animation-delay:0.5s; }
.activity-card:nth-child(3) .activity-emoji { animation-delay:1s; }
.activity-card:nth-child(4) .activity-emoji { animation-delay:1.5s; }
.activity-card:nth-child(5) .activity-emoji { animation-delay:2s; }
.activity-card:nth-child(6) .activity-emoji { animation-delay:2.5s; }
@keyframes actEmoji {
  0%,90%,100% { transform:scale(1) rotate(0deg); }
  95%         { transform:scale(1.25) rotate(-8deg); }
}
.activity-card h4 {
  font-family:var(--serif);
  font-size:1.1rem; font-weight:700;
  color:var(--text); margin-bottom:8px;
}
.activity-card p { font-size:0.85rem; color:var(--muted); line-height:1.6; }

/* -- PARENT QUOTES -- */
.parent-quotes-section {
  background:linear-gradient(135deg, var(--deep) 0%, #2d0a6b 100%);
  padding:80px 0;
  position:relative; overflow:hidden;
}
.parent-quotes-section::before {
  content:'??';
  position:absolute;
  font-size:28rem;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  opacity:0.03;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
.quotes-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:48px;
}
.quote-card {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:32px;
  transition:all 0.35s;
  position:relative;
}
.quote-card:hover {
  background:rgba(255,255,255,0.1);
  border-color:rgba(212,166,255,0.4);
  transform:translateY(-6px);
}
.quote-card::before {
  content:'"';
  font-family:var(--serif);
  font-size:5rem; font-weight:900;
  color:var(--gold);
  opacity:0.3;
  position:absolute;
  top:8px; left:20px;
  line-height:1;
}
.quote-stars { font-size:1.1rem; letter-spacing:3px; margin-bottom:14px; }
.quote-text { font-size:0.92rem; color:rgba(255,255,255,0.8); line-height:1.75; font-style:italic; margin-bottom:20px; }
.quote-who { display:flex; align-items:center; gap:12px; }
.quote-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--brand); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.1rem; font-weight:700; color:#fff;
  flex-shrink:0;
}
.quote-name { font-size:0.85rem; font-weight:600; color:#fff; }
.quote-role { font-size:0.75rem; color:var(--gold); }

/* -- GIANT CTA -- */
.tigers-cta-section {
  background:linear-gradient(135deg,#ff6b6b 0%,#ffd93d 40%,#6bcb77 70%,#4d96ff 100%);
  padding:80px 0;
  text-align:center;
  position:relative; overflow:hidden;
}
.tigers-cta-section::before {
  content:'??';
  position:absolute;
  font-size:22rem;
  right:-3rem; bottom:-4rem;
  opacity:0.12;
  pointer-events:none;
  animation:bgTigerSpin 20s linear infinite;
}
@keyframes bgTigerSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
.tigers-cta-section h2 {
  font-family:var(--serif);
  font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:900; color:#fff;
  text-shadow:0 4px 16px rgba(0,0,0,0.2);
  margin-bottom:16px;
}
.tigers-cta-section p {
  font-size:1.1rem; color:rgba(255,255,255,0.9);
  max-width:520px; margin:0 auto 40px;
  font-weight:400; line-height:1.7;
}
.btn-tigers-cta {
  display:inline-flex; align-items:center; gap:12px;
  padding:20px 48px;
  background:#fff;
  color:var(--brand);
  border-radius:100px;
  font-family:var(--sans);
  font-size:1rem; font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 8px 32px rgba(0,0,0,0.25);
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  text-decoration:none;
  animation:ctaBigPulse 2.5s ease-in-out infinite;
}
.btn-tigers-cta:hover {
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 20px 56px rgba(0,0,0,0.35);
}
@keyframes ctaBigPulse {
  0%,100% { box-shadow:0 8px 32px rgba(0,0,0,0.2), 0 0 0 0 rgba(255,255,255,0.5); }
  50%     { box-shadow:0 8px 32px rgba(0,0,0,0.2), 0 0 0 18px rgba(255,255,255,0); }
}

/* -- FREE BADGE -- */
.free-badge {
  display:inline-block;
  background:#fff;
  color:var(--brand);
  font-size:0.78rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  padding:8px 24px;
  border-radius:100px;
  margin-bottom:28px;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
  animation:badgeWiggle 4s ease-in-out infinite;
}
@keyframes badgeWiggle {
  0%,85%,100% { transform:rotate(0deg); }
  88%         { transform:rotate(-3deg); }
  92%         { transform:rotate(3deg); }
  96%         { transform:rotate(-2deg); }
}

/* -- Kids Photo Gallery -- */
.kids-gallery-section {
  background:var(--off);
  padding:80px 0;
}
.kids-gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:20px;
  margin-top:48px;
}
.kids-gallery-item {
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(91,13,168,0.12);
  aspect-ratio:1/1;
  cursor:pointer;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s;
}
.kids-gallery-item:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 56px rgba(91,13,168,0.22);
}
.kids-gallery-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
}
.kids-gallery-item:hover img {
  transform:scale(1.08);
}
.kids-gallery-item::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(91,13,168,0.35) 100%);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.4s;
}
.kids-gallery-item:hover::after {
  opacity:1;
}
.kids-gallery-caption {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:20px 24px;
  color:#fff;
  font-family:var(--serif);
  font-size:1rem;
  font-weight:600;
  z-index:2;
  opacity:0;
  transform:translateY(10px);
  transition:all 0.4s;
}
.kids-gallery-item:hover .kids-gallery-caption {
  opacity:1;
  transform:translateY(0);
}

/* -- Responsive tigers -- */
@media(max-width:768px){
  .tigers-card-grid  { grid-template-columns:1fr; }
  .activities-grid   { grid-template-columns:repeat(2,1fr); }
  .quotes-grid       { grid-template-columns:1fr; }
  .belt-rainbow-row  { gap:4px; overflow-x:auto; padding:0 12px 20px; justify-content:flex-start; }
  .belt-circle-big   { width:50px; height:50px; font-size:1.3rem; }
  .belt-item         { min-width:56px; }
  .tigers-card       { padding:28px 20px; }
  .kids-gallery-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media(max-width:479px){
  .tigers-card-grid  { grid-template-columns:1fr; gap:16px; }
  .activities-grid   { grid-template-columns:1fr 1fr; gap:14px; }
  .activity-card     { padding:24px 16px; }
  .activity-emoji    { font-size:2.2rem; }
  .tigers-cta-section::before { display:none; }
  .btn-tigers-cta    { padding:16px 32px; font-size:0.88rem; width:100%; justify-content:center; }
  .kids-gallery-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .kids-gallery-item { border-radius:14px; }
}

/* ====================================================
   CONTACT SECTION
   ==================================================== */
.contact-new-section { background: var(--deep-2); }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 48px 0 40px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: var(--white);
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.contact-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

.contact-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-card-icon svg { width: 24px; height: 24px; }

.contact-card--whatsapp .contact-card-icon  { background: rgba(37,211,102,0.15); color: #25d366; }
.contact-card--whatsapp:hover               { border-color: rgba(37,211,102,0.4); }
.contact-card--call .contact-card-icon      { background: rgba(212,160,64,0.15); color: var(--gold); }
.contact-card--call:hover                   { border-color: rgba(212,160,64,0.4); }
.contact-card--email .contact-card-icon     { background: rgba(91,13,168,0.25); color: var(--brand-light); }
.contact-card--email:hover                  { border-color: rgba(139,63,212,0.4); }
.contact-card--facebook .contact-card-icon  { background: rgba(24,119,242,0.15); color: #1877f2; }
.contact-card--facebook:hover               { border-color: rgba(24,119,242,0.4); }
.contact-card--instagram .contact-card-icon { background: rgba(228,64,95,0.15); color: #e4405f; }
.contact-card--instagram:hover              { border-color: rgba(228,64,95,0.4); }
.contact-card--location .contact-card-icon  { background: rgba(255,255,255,0.08); color: var(--white); }
.contact-card--location:hover               { border-color: rgba(255,255,255,0.25); }

.contact-card-body { flex: 1; min-width: 0; }
.contact-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.contact-card-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-card-arrow {
  font-size: 1.2rem;
  color: var(--muted);
  transition: color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.contact-card:hover .contact-card-arrow { color: var(--white); transform: translateX(4px); }

.contact-map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 1023px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card-value { font-size: 0.82rem; }
}

/* Background image classes - URLs injected via functions.php */
.img-frame-accent-hidden { display: none; }
.ckd-training-img { margin-top: 40px; margin-left: 23px; }

/* ====================================================
   RESPONSIVE POLISH — ALL DEVICES
   ==================================================== */

/* -- BASE: ensure all images & embeds never overflow -- */
img, video, iframe, embed, object { max-width: 100%; height: auto; display: block; }
.map-wrapper iframe { width: 100%; height: 100%; }

/* -- NAV: always correct height & safe-area on notch phones -- */
.nav-inner {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.hero-content { padding-top: 0; }

/* Tablet & phone: stat dividers are layout noise in grid/flex-wrap */
@media (max-width: 1023px) {
  .hero-stat-divider {
    display: none;
  }
}

/* -- TOUCH: minimum 44px tap targets on all interactive elements -- */
.btn, .nav-link, .nav-drawer-link, .footer-link,
.class-card-btn, .btn-tigers-cta, .footer-cta-btn,
.social-link-card, .footer-social-btn {
  -webkit-tap-highlight-color: transparent;
}
.footer-social-btn { min-width: 44px; min-height: 44px; }
.nav-hamburger { min-width: 44px; min-height: 44px; }

/* -- CLASS CARDS: images always fill properly -- */
.class-card-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* -- INSTRUCTOR IMAGES: never overflow card -- */
.instructor-img-wrap { overflow: hidden; }
.instructor-img-wrap img { width: 100%; object-fit: cover; }

/* ── TABLET (768px – 1023px) extra polish ───────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Hero (non-home pages still tall); #homeHero overrides below */
  .hero { min-height: 100svh; align-items: stretch; justify-content: center; }
  .hero .container { padding-top: calc(var(--nav-h) + 32px); padding-bottom: 56px; }
  #homeHero.hero {
    min-height: clamp(460px, 72dvh, 680px);
    justify-content: flex-start;
  }
  #homeHero > .container.hero-content {
    padding-top: calc(var(--nav-h) + 18px);
    padding-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  }
  .hero-content { max-width: 600px; }

  /* Stats: three columns (dividers hidden ≤1023px) */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 20px 16px;
    padding-top: 22px;
  }
  .hero-stat { align-items: center; text-align: center; }

  /* Classes: 3 columns on tablet so all 3 cards show */
  .classes-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .class-card { aspect-ratio: 3/4; }

  /* Benefits: always 3 cols */
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }

  /* Testimonials: 2 cols */
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: 3 cols on tablet */
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  /* Instructor card: side-by-side */
  .instructor-card { grid-template-columns: 200px 1fr; }

  /* Page hero padding */
  .page-hero { padding: calc(var(--nav-h) + 64px) 0 88px; }

  /* Form */
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Contact hub: stack cards on tablet */
  .chub-cards { grid-template-columns: 1fr; }
  .chub-form-top { grid-template-columns: 1fr 1fr; }
  .chub-form-wrap { padding: 32px 28px; }

  /* Timetable 2 cols */
  .timetable-grid { grid-template-columns: repeat(2, 1fr); }

  #classesSection { padding-top: 46px; }
}

/* ── MOBILE (≤767px) extra polish ───────────────── */
@media (max-width: 767px) {
  /* Prevent horizontal scroll */
  body { overflow-x: hidden; }

  /* Hero: natural height on phones so more of the page is visible below the fold */
  .hero { min-height: fit-content; align-items: stretch; justify-content: flex-start; }
  .hero .container { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 40px; }
  .hero-content { max-width: 100%; }

  #homeHero > .container.hero-content {
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  }

  /* Stats: one row of three (dividers hidden) */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
    padding-top: 16px;
  }
  .hero-stat,
  .hero-stat-item {
    text-align: center;
    align-items: center;
  }

  #homeHero .hero-btns {
    flex-direction: column;
  }
  #homeHero .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }

  /* Nav drawer: full height on mobile */
  .nav-drawer { height: 100dvh; }

  /* Section headings: more breathing room */
  .classes-header, .section > .container > *:first-child { padding-bottom: 8px; }

  /* Home class cards: tall vertical stack (photo band + solid text block) — phones */
  #classesSection {
    padding-top: 26px;
    padding-bottom: 72px;
  }
  #classesSection .classes-grid,
  #classesSection .grid-3.class-cards-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  #classesSection .class-card {
    display: flex;
    flex-direction: column;
    aspect-ratio: unset;
    min-height: unset;
  }
  #classesSection .class-card-img {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(200px, 56vw, 288px);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
  }
  #classesSection .class-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: clamp(200px, 56vw, 288px);
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(7, 3, 15, 0.28) 50%,
      rgba(7, 3, 15, 0.85) 100%
    );
  }
  #classesSection .class-card-body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #1a1520 0%, var(--deep) 36%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  #classesSection .class-card-body h3,
  #classesSection .class-card-body .class-card-title {
    font-size: clamp(1.38rem, 4.6vw, 1.65rem);
    margin-bottom: 10px;
    line-height: 1.22;
    text-shadow: none;
    color: var(--white);
  }
  #classesSection .class-card-age {
    text-shadow: none;
    font-size: 0.72rem;
    letter-spacing: 2.5px;
    margin-bottom: 8px;
  }
  #classesSection .class-card-body p,
  #classesSection .class-card-body .class-card-desc {
    opacity: 1;
    transform: none;
    font-size: 1rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 16px;
    text-shadow: none;
  }
  #classesSection .class-card-list {
    font-size: 0.9rem;
    line-height: 1.62;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.93);
  }
  #classesSection .class-card-list li {
    text-shadow: none;
    margin-bottom: 8px;
  }
  #classesSection .class-card .btn-gold.class-card-btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    margin-top: auto;
    font-size: 16px;
  }

  /* Benefit cards: 2 columns */
  .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Instructors: clear vertical stack (photo + text) — fixes overlay / text overlap on phones */
  .instructors-section .instructor-card {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
  }
  /* Full portrait visible: scale by width, natural height (source 480×560) — no cover crop */
  .instructors-section .instructor-img-wrap {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--off);
  }
  .instructors-section .instructor-img-wrap img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center top;
    display: block;
  }
  .instructors-section .instructor-img-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }
  .instructors-section .instructor-rank {
    z-index: 2;
  }
  .instructors-section .instructor-info {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    padding: 24px 20px 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }
  .instructors-section .instructor-info p {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  /* Trial buttons: full width */
  .trial-btns { flex-direction: column; }
  .trial-btns .btn { width: 100%; justify-content: center; }
  .trial-contact { flex-direction: column; gap: 12px; }

  /* Footer CTA button */
  .footer-cta-btn { width: 100%; text-align: center; justify-content: center; display: flex; }

  /* Timetable: single col */
  .timetable-grid { grid-template-columns: 1fr; }

  /* Form fields: full width */
  .form-row { grid-template-columns: 1fr; }
  input, select, textarea { width: 100%; box-sizing: border-box; font-size: 16px; } /* 16px prevents iOS zoom */

  /* Contact hub: mobile */
  .chub-form-top { grid-template-columns: 1fr; }
  .chub-form-wrap { padding: 24px 20px; }
  .chub-form-footer { flex-direction: column; align-items: flex-start; }
  .chub-form-footer .btn { width: 100%; justify-content: center; }

  /* Tigers page */
  .tigers-card-grid { grid-template-columns: 1fr; }
  .activities-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes-grid { grid-template-columns: 1fr; }

  /* Marquee: keep readable on small phones */
  .marquee-item { font-size: 0.72rem; letter-spacing: 0.1em; }

  /* About page */
  .philosophy-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card.featured { transform: none; }

  /* Scroll padding for anchor links */
  html { scroll-padding-top: var(--nav-h); }
}

/* ── MOBILE SMALL (≤ 479px) extra polish ─────────── */
@media (max-width: 479px) {
  .container { padding: 0 16px; }

  /* Hero: tighter spacing */
  .hero .container { padding-top: calc(var(--nav-h) + 20px); }
  .hero-badge { margin-bottom: 20px; }
  .hero-content { padding-bottom: 24px; }
  #homeHero > .container.hero-content {
    padding-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  }

  /* Stats: tighter */
  .hero-stats { gap: 8px 6px; }
  .hero-stat-num { font-size: 1.4rem; }
  .hero-stat-label { font-size: 0.6rem; }

  /* Section */
  .section { padding: 52px 0; }
  #classesSection { padding-top: 20px; }
  .h2 { font-size: clamp(1.55rem, 7vw, 2rem); }

  /* Benefits: 2 compact cols */
  .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .benefit-card { padding: 18px 12px; }
  .benefit-card h4 { font-size: 0.88rem; }
  .benefit-card p { font-size: 0.76rem; }

  /* Home class cards: slightly shorter image band on small phones */
  #classesSection .class-card-img,
  #classesSection .class-card-overlay {
    height: clamp(176px, 52vw, 260px);
  }
  #classesSection .class-card-body {
    padding: 20px 18px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
  #classesSection .class-card-body .class-card-desc {
    font-size: 0.95rem;
  }
  #classesSection .class-card-list {
    font-size: 0.86rem;
  }

  .instructors-section .instructor-info {
    padding: 22px 18px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }

  /* Footer: single col */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 6px; }

  /* Buttons */
  .btn-lg { padding: 14px 20px; font-size: 0.8rem; }
}

/* ── LARGE DESKTOP (≥ 1280px) ────────────────────── */
@media (min-width: 1280px) {
  .container { padding: 0 40px; }
  .hero-content { max-width: 780px; }
  #homeHero.hero {
    min-height: clamp(420px, 58dvh, 620px);
  }
  .hero-stats { gap: 40px; }
  .classes-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .instructors-grid { grid-template-columns: 1fr; gap: 32px; }
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
  .timetable-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 48px; }
  .footer-brand { grid-column: auto; }
}

/* ── SAFE AREA: iPhone notch & home bar ─────────── */
@supports (padding: max(0px)) {
  .nav-inner {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .hero .container,
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  @media (min-width: 480px) {
    .container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  }
  @media (min-width: 768px) {
    .container { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); }
  }
  @media (min-width: 1024px) {
    .container { padding-left: max(32px, env(safe-area-inset-left)); padding-right: max(32px, env(safe-area-inset-right)); }
  }
}

/* ── WORDPRESS ADMIN BAR (logged-in) ─────────────── */
body.admin-bar #nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar #nav {
    top: 46px;
  }
}

