/* DGTM — shared styles */
:root{
  --ink:#0b0b0b;
  --ink-2:#141414;
  --paper:#f4f1ea;     /* warm chalk white */
  --paper-dim:#cfc9bd;
  --maroon:#8a2634;    /* slightly punchier than source */
  --maroon-deep:#611823;
  --teal:#6cccdb;
  --teal-bright:#7fe0ef;
  --rule:rgba(244,241,234,.14);
  --mute:rgba(244,241,234,.55);
  --shadow:0 40px 120px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--paper);font-family:"Fahkwang","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden;font-size:17px;line-height:1.55}

/* ── Mobile overflow fixes (post-design patch) ──────────────────────
   Narrow viewports need tighter wrap padding, smaller minimum font sizes
   on display headings, and extra breathing room for select chevrons.
   Applies below the tablet breakpoint. */
@media (max-width: 640px){
  .wrap, .wrap-sm{ padding: 0 16px !important; }

  /* Grid children default to min-width: auto which lets content force the
     cell wider than the track — on mobile this causes the form to blow past
     the viewport. Letting children shrink fixes it. */
  .contact-grid > *,
  .intro-grid > *,
  .champions-stage > *,
  .row2 > *{ min-width: 0 !important; }

  .form{ padding: 28px 20px !important; width: 100% !important; max-width: 100% !important; }
  .field{ max-width: 100%; }
  .field input, .field select, .field textarea{ max-width: 100%; min-width: 0; }
  .field select{ padding-right: 18px !important; background-position: right 2px center !important; }

  .contact h2{ font-size: clamp(36px, 10vw, 64px) !important; line-height: 0.95 !important; }
  .display{ word-break: break-word; }
  /* Champions poster: min font-size was 80px which forces "CHAMPIONS." to
     overflow and get split mid-word by word-break. Scale it down on phones. */
  .champions h2{ font-size: clamp(52px, 14vw, 88px) !important; }
  .intro-stats{ grid-template-columns: 1fr !important; }
  section{ padding: 72px 0 !important; }

  /* Marquee: shrink font + tighten spacing + speed up scroll on narrow phones. */
  .marquee{ padding: 12px 0 !important; }
  .marquee-track{
    font-size: 13px !important;
    letter-spacing: .22em !important;
    gap: 32px !important;
    animation-duration: 22s !important;
  }
}

/* ── Short-height landscape (phones held sideways) ─────────────────
   The documentary hero assumes a tall viewport. When the viewport is
   short (≤500px tall) — typical of mobile landscape — its absolutely
   positioned captions, location chips, and CTAs stack and overlap.
   Pack everything into the available height. */
@media (max-height: 500px) and (orientation: landscape){
  /* Hero extends 55px past the viewport bottom so the marquee (at bottom:0
     of the hero, rendered ~55px tall in this breakpoint's large-font mode)
     sits just below the fold. User has to scroll a notch to reveal it;
     CTAs stay at the visible viewport bottom, uncrowded. */
  .hero, [data-hero="documentary"] .hero{ min-height: calc(100svh + 55px) !important; height: calc(100svh + 55px) !important; }

  /* Hide the location chips row (ON THE MATS · GRAND RAPIDS · …) —
     it collides with the caption/CTA stack on short screens. */
  [data-hero="documentary"] .doc-locs{ display: none !important; }

  /* Caption label in the top-left: keep compact, near the top. */
  [data-hero="documentary"] .doc-caption{
    position: absolute !important;
    top: 56px !important;
    bottom: auto !important;
    left: 12px !important; right: 12px !important;
    max-width: none !important;
  }
  [data-hero="documentary"] .doc-caption-label .txt{
    font-size: clamp(14px, 3.2vw, 20px) !important;
    line-height: 1.1 !important;
  }
  [data-hero="documentary"] .doc-caption-num{
    font-size: clamp(18px, 3.4vw, 22px) !important;
  }

  /* Hide the hero CTA pair on short landscape — the video has branded
     burn-in titles (MMA STRIKING, etc.) at the bottom of the frame that
     were getting chopped. Nav's GET STARTED and the Chat bubble cover
     conversion; the hero can run as a pure brand film here. */
  [data-hero="documentary"] .doc-ctas{ display: none !important; }

  /* Marquee takes less vertical space. */
  [data-hero="documentary"] .hero-marquee,
  .hero-marquee{ font-size: clamp(18px, 4.2vw, 28px) !important; padding: 6px 0 !important; }

  /* Brand/nav stays tight at the top. */
  .brand-nav{ padding-top: 6px !important; padding-bottom: 6px !important; }
}

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

/* Grain + vignette — provides the "spray paint" grit */
.grain{position:fixed;inset:0;pointer-events:none;z-index:80;mix-blend-mode:overlay;opacity:.35;transition:opacity .35s ease, mix-blend-mode .35s ease, filter .35s ease;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:79;background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);transition:opacity .35s ease}

/* Type */
.display{font-family:"Oswald","Fahkwang",Arial,sans-serif;font-weight:500;letter-spacing:.01em;text-transform:uppercase;line-height:.86}
.display.tight{line-height:.82;letter-spacing:-.01em}
.over{font-family:"Oswald",Arial,sans-serif;text-transform:uppercase;letter-spacing:.28em;font-size:12px;font-weight:500;color:var(--paper-dim)}
.eyebrow{font-family:"Oswald",Arial,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:13px;color:var(--teal);font-weight:500}
.italic-quote{font-family:"Fahkwang",serif;font-style:italic;font-weight:300}
em,.italic{font-family:"Fahkwang",serif;font-style:italic}
.num{font-family:"Oswald",Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* Chrome: nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;backdrop-filter:blur(14px) saturate(120%);background:rgba(8,8,8,.85);border-bottom:1px solid rgba(255,255,255,.06);transition:background .2s, border-color .2s}
.nav.solid{background:rgba(8,8,8,.95);border-bottom:1px solid var(--rule)}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand img{width:42px;height:42px}
.nav .brand-text{font-family:"Oswald",sans-serif;font-weight:500;letter-spacing:.12em;font-size:13px;line-height:1.1;text-transform:uppercase}
.nav .brand-text small{display:block;color:var(--teal);letter-spacing:.22em;font-size:10px}
.nav ul{list-style:none;display:flex;gap:34px}
.nav ul a{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:13px;color:var(--paper);position:relative;padding:6px 0}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--teal);transition:right .25s ease}
.nav ul a:hover::after,.nav ul a.active::after{right:0}
.nav ul a.active{color:var(--teal)}
.nav .cta{display:inline-flex;align-items:center;gap:10px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:12px;padding:11px 18px;background:var(--maroon);color:var(--paper);border:1px solid var(--maroon);transition:all .2s}
.nav .cta:hover{background:transparent;color:var(--teal);border-color:var(--teal)}
.nav .menu-btn{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:14px;padding:18px 28px;border:1px solid var(--paper);color:var(--paper);background:transparent;transition:all .25s;cursor:pointer}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn-primary{background:var(--maroon);border-color:var(--maroon)}
.btn-primary:hover{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.btn-ghost{border-color:var(--rule);color:var(--paper-dim)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:transparent}
.btn svg{width:14px;height:14px}

/* Containers */
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
.wrap-sm{max-width:1120px;margin:0 auto;padding:0 40px}
section{position:relative;padding:120px 0}
.section-label{display:flex;align-items:baseline;gap:14px;margin-bottom:44px}
.section-label .idx{font-family:"Oswald",sans-serif;color:var(--teal);font-size:13px;letter-spacing:.2em}
.section-label .lbl{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.26em;font-size:13px;color:var(--paper-dim)}
.section-label .rule{flex:1;height:1px;background:var(--rule)}

/* Rules */
hr.sep{border:0;height:1px;background:var(--rule);margin:0}

/* Marquee */
.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--ink-2);padding:22px 0}
.marquee-track{display:flex;gap:64px;white-space:nowrap;animation:slide 40s linear infinite;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.3em;font-size:22px;color:var(--paper-dim)}
.marquee-track span.hl{color:var(--teal)}
.marquee-track span.rd{color:var(--maroon)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Footer */
footer{padding:80px 0 40px;border-top:1px solid var(--rule);background:var(--ink-2)}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer .brand-lg{display:flex;gap:18px;align-items:flex-start}
footer .brand-lg img{width:72px;height:72px}
footer h5{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--teal);margin-bottom:16px}
footer li{list-style:none;margin-bottom:10px;color:var(--paper-dim);font-size:14px}
footer a:hover{color:var(--teal)}
footer .legal{margin-top:60px;padding-top:26px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-size:12px;color:var(--mute);font-family:"Oswald",sans-serif;letter-spacing:.18em;text-transform:uppercase}

/* Utility */
.stack{display:flex;flex-direction:column}
.row{display:flex}
.between{justify-content:space-between}
.center{align-items:center}
.gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}.gap-4{gap:40px}
.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:36px}.mt-4{margin-top:56px}.mt-5{margin-top:80px}
.mb-1{margin-bottom:12px}.mb-2{margin-bottom:24px}.mb-3{margin-bottom:36px}.mb-4{margin-bottom:56px}
.dim{color:var(--paper-dim)}.mute{color:var(--mute)}
.accent-t{color:var(--teal)}.accent-m{color:var(--maroon)}
.fg-paper{color:var(--paper)}

/* Spray slash accent — inline tag-like rule */
.tag{display:inline-block;padding:4px 10px 2px;background:var(--maroon);color:var(--paper);font-family:"Oswald",sans-serif;letter-spacing:.2em;text-transform:uppercase;font-size:11px;transform:skewX(-8deg)}
.tag.teal{background:var(--teal);color:var(--ink)}
.tag-underline{position:relative;display:inline-block}
.tag-underline::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-2px;height:10px;background:var(--maroon);opacity:.55;z-index:-1;transform:skewX(-10deg)}

/* Mobile */
@media (max-width: 900px){
  .nav ul{display:none}
  .nav .menu-btn{display:block}
  .wrap,.wrap-sm{padding:0 20px}
  section{padding:72px 0}
  footer .grid{grid-template-columns:1fr 1fr;gap:32px}
}

/* Mobile landscape — shrink the fixed nav + shift the documentary-hero
   content so the text doesn't collide with the nav in short viewports
   (phones rotated to landscape are typically ~400px tall). */
@media (max-width: 900px) and (orientation: landscape){
  .nav{padding:6px 16px}
  .nav .brand img{width:28px;height:28px}
  .nav .brand{gap:8px}
  .nav .brand-text{font-size:10px;line-height:1.05}
  .nav .brand-text small{font-size:8px;letter-spacing:.18em}
  .nav .cta{padding:6px 12px;font-size:10px;letter-spacing:.16em}
  [data-hero="documentary"]{--nav-height:40px}

  [data-hero="documentary"] .doc-locs{top:50px;font-size:8.5px;padding:5px 10px}
  [data-hero="documentary"] .doc-caption{bottom:100px}
  [data-hero="documentary"] .doc-caption-idx{font-size:9px;margin-bottom:5px}
  [data-hero="documentary"] .doc-caption-label .txt{font-size:16px;line-height:1.1}
  [data-hero="documentary"] .doc-caption-label .num{font-size:10px}
  /* Hide the hero CTA pair on mobile landscape — burned-in video titles
     at the bottom of each scene (MMA STRIKING, etc.) are branded content
     in their own right, and the overlay CTAs were chopping them. Nav's
     GET STARTED plus the Chat bubble keep conversion paths alive. */
  [data-hero="documentary"] .doc-ctas{display:none}
  [data-hero="documentary"] .doc-cta{padding:8px 14px;font-size:10px;letter-spacing:.14em}
  [data-hero="documentary"] .hero-marquee{font-size:9px;padding:4px 0}
  /* Extend the hero 23px past the viewport so the marquee (~23px tall
     here) sits below the fold. */
  [data-hero="documentary"] .hero{min-height:calc(100vh + 23px)}
}

/* ==========================================================================
   NEON VARIANT — activated with <body data-theme="neon">
   Inspired by the spray-paint mural on the gym wall: hot pink + cyan outlines
   ========================================================================== */
body[data-theme="neon"]{
  --teal:#00e8ff;
  --teal-bright:#7af7ff;
  --maroon:#ff2a6d;
  --maroon-deep:#d4105a;
  --rule:rgba(255,42,109,.22);
  --neon-cyan:#00e8ff;
  --neon-pink:#ff2a6d;
  --neon-glow-cy: 0 0 2px #00e8ff, 0 0 12px rgba(0,232,255,.7), 0 0 28px rgba(0,232,255,.35);
  --neon-glow-pk: 0 0 2px #ff2a6d, 0 0 12px rgba(255,42,109,.7), 0 0 28px rgba(255,42,109,.35);
}

/* Hero headline — outline + glow; "Premier Academy" is the hero of this look */
body[data-theme="neon"] .hero h1 .line1{
  color:transparent;
  -webkit-text-stroke:1.5px var(--neon-pink);
  text-shadow:var(--neon-glow-pk);
}
body[data-theme="neon"] .hero h1 .line2{
  color:transparent;
  -webkit-text-stroke:1.5px var(--neon-cyan);
  text-shadow:var(--neon-glow-cy);
}
body[data-theme="neon"] .hero h1 .line3{color:var(--paper-dim)}
body[data-theme="neon"] .hero h1 .line3 em{
  color:var(--neon-cyan);
  text-shadow:0 0 10px rgba(0,232,255,.4);
}

/* Hero supporting bits — dot pulses cyan, corner num glows pink */
body[data-theme="neon"] .hero-est .dot{
  background:var(--neon-cyan);
  box-shadow:0 0 10px var(--neon-cyan), 0 0 22px rgba(0,232,255,.6);
  animation:neonPulse 2s ease-in-out infinite;
}
body[data-theme="neon"] .hero-corner-num{
  color:transparent;
  -webkit-text-stroke:1px var(--neon-pink);
  opacity:.7;
  text-shadow:0 0 16px rgba(255,42,109,.4);
}
@keyframes neonPulse{
  0%,100%{opacity:1;box-shadow:0 0 10px var(--neon-cyan),0 0 22px rgba(0,232,255,.6)}
  50%{opacity:.6;box-shadow:0 0 4px var(--neon-cyan),0 0 10px rgba(0,232,255,.3)}
}

/* Nav — neon treatments */
body[data-theme="neon"] .nav ul a.active{
  color:var(--neon-cyan);
  text-shadow:0 0 8px rgba(0,232,255,.7);
}
body[data-theme="neon"] .nav .brand-text small{
  color:var(--neon-cyan);
  text-shadow:0 0 6px rgba(0,232,255,.5);
}
body[data-theme="neon"] .nav.solid{background:rgba(8,4,10,.85);border-bottom:1px solid rgba(255,42,109,.18)}

/* CTAs & buttons — outline neon buttons like the mural nav */
body[data-theme="neon"] .nav .cta{
  background:transparent;
  border:1px solid var(--neon-pink);
  color:var(--neon-pink);
  box-shadow:inset 0 0 0 0 var(--neon-pink), 0 0 10px rgba(255,42,109,.4);
  text-shadow:0 0 6px rgba(255,42,109,.4);
  transition:background .25s ease,color .25s ease,box-shadow .25s ease;
}
body[data-theme="neon"] .nav .cta:hover{
  background:var(--neon-pink);color:#0b0b0b;
  box-shadow:0 0 20px rgba(255,42,109,.6), 0 0 40px rgba(255,42,109,.25);
  text-shadow:none;
}
body[data-theme="neon"] .btn{
  border-color:var(--neon-cyan);
  color:var(--neon-cyan);
  text-shadow:0 0 6px rgba(0,232,255,.5);
  box-shadow:0 0 8px rgba(0,232,255,.15);
}
body[data-theme="neon"] .btn:hover{
  background:var(--neon-cyan);color:#0b0b0b;text-shadow:none;
  box-shadow:0 0 20px rgba(0,232,255,.5);
}
body[data-theme="neon"] .btn-primary{
  background:transparent;
  border-color:var(--neon-pink);
  color:var(--neon-pink);
  text-shadow:0 0 6px rgba(255,42,109,.5);
  box-shadow:0 0 10px rgba(255,42,109,.25);
}
body[data-theme="neon"] .btn-primary:hover{
  background:var(--neon-pink);color:#0b0b0b;text-shadow:none;
  border-color:var(--neon-pink);
  box-shadow:0 0 24px rgba(255,42,109,.6), 0 0 48px rgba(255,42,109,.25);
}

/* Section headings — alternating stroke & glow */
body[data-theme="neon"] h2.display,
body[data-theme="neon"] .display.tight{
  text-shadow:0 0 18px rgba(255,42,109,.08);
}
body[data-theme="neon"] .accent-t{
  color:var(--neon-cyan);
  text-shadow:0 0 10px rgba(0,232,255,.55);
}
body[data-theme="neon"] .accent-m{
  color:var(--neon-pink);
  text-shadow:0 0 10px rgba(255,42,109,.55);
}
body[data-theme="neon"] .section-label .idx{
  color:var(--neon-cyan);
  text-shadow:0 0 6px rgba(0,232,255,.5);
}
body[data-theme="neon"] .section-label .rule{background:rgba(0,232,255,.2)}
body[data-theme="neon"] .eyebrow{
  color:var(--neon-pink);
  text-shadow:0 0 6px rgba(255,42,109,.45);
}

/* Champions poster — stroke lines become neon */
body[data-theme="neon"] .champions h2 .stroke{-webkit-text-stroke-color:var(--neon-pink);color:transparent;text-shadow:var(--neon-glow-pk)}
body[data-theme="neon"] .champions h2 .filled{
  color:transparent;
  -webkit-text-stroke:1.5px var(--neon-cyan);
  text-shadow:var(--neon-glow-cy);
}
body[data-theme="neon"] .champions h2 .paint{color:var(--neon-pink);text-shadow:0 0 12px rgba(255,42,109,.5)}
body[data-theme="neon"] .lineage-step::before{background:var(--neon-pink)}
body[data-theme="neon"] .lineage-step .num{color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,232,255,.45)}

/* Stats — numbers glow cyan */
body[data-theme="neon"] .stat .n{
  color:transparent;
  -webkit-text-stroke:1.2px var(--neon-cyan);
  text-shadow:var(--neon-glow-cy);
}

/* Class cards */
body[data-theme="neon"] .class-num{color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,232,255,.5)}
body[data-theme="neon"] .class-meta .chip::before{background:var(--neon-pink);box-shadow:0 0 6px var(--neon-pink)}
body[data-theme="neon"] .class-card{transition:transform .3s ease, box-shadow .3s ease}
body[data-theme="neon"] .class-card:hover{box-shadow:0 0 0 1px rgba(0,232,255,.4), 0 0 30px rgba(0,232,255,.18)}

/* Marquee hl/rd -> cyan/pink with glow */
body[data-theme="neon"] .marquee-track span.hl{color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,232,255,.55)}
body[data-theme="neon"] .marquee-track span.rd{color:var(--neon-pink);text-shadow:0 0 6px rgba(255,42,109,.55)}

/* Tag underline swap */
body[data-theme="neon"] .tag-underline::after{background:var(--neon-pink);opacity:.7}
body[data-theme="neon"] .tag{background:var(--neon-pink);color:#0b0b0b;box-shadow:0 0 12px rgba(255,42,109,.4)}
body[data-theme="neon"] .tag.teal{background:var(--neon-cyan);color:#0b0b0b;box-shadow:0 0 12px rgba(0,232,255,.4)}

/* Footer */
body[data-theme="neon"] footer h5{color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,232,255,.4)}
body[data-theme="neon"] footer a:hover{color:var(--neon-cyan);text-shadow:0 0 6px rgba(0,232,255,.5)}

/* Hero video overlay — slightly more saturated dark to let neons pop */
body[data-theme="neon"] .hero-bg::after{
  background:
    linear-gradient(180deg, rgba(5,2,8,.55) 0%, rgba(5,2,8,.15) 30%, rgba(5,2,8,.55) 70%, rgba(5,2,8,.96) 100%),
    radial-gradient(1200px 600px at 18% 100%, rgba(255,42,109,.22), transparent 60%),
    radial-gradient(900px 500px at 82% 0%, rgba(0,232,255,.15), transparent 60%);
}
body[data-theme="neon"] .hero-bg img,
body[data-theme="neon"] .hero-bg video{
  filter:grayscale(.05) contrast(1.15) brightness(.5) saturate(1.15);
}
body[data-theme="neon"] .hero-marquee{background:rgba(5,2,8,.75);border-top:1px solid rgba(255,42,109,.22)}