/*
Theme Name: Arena Sunshine Coast
Author: LocalWise Media
Version: 1.2
Requires PHP: 8.0
Text Domain: arena
*/

/* ==========================================================================
   Arena - style.css
   Order follows the page. One block per component.
   Edit rules in place. Never append fixes to the bottom of this file.
   ========================================================================== */

/* ---- 00 Tokens ---- */
:root{
--black:#000;
--white:#fff;
--amber:#F7BD01;              /* fills only - never as text colour */
--font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
--font-display:"Oswald","Lato",sans-serif;
--step-0:1.0625rem;           /* 17px body */
--step-1:1.25rem;
--step-2:1.75rem;
--step-3:clamp(2rem,6vw,3.25rem);
--step-4:clamp(2.75rem,9vw,5.5rem);
--gutter:clamp(1.25rem,5vw,3rem);
--section-y:clamp(3.5rem,10vw,7rem);
--measure:62ch;
--bar-h:86px;
--band-h:76px;
/* class colours: audience, not belt rank */
--c-kids-a:#ff6a3d;
--c-kids-b:#12b5a5;
--c-gi:#f2f2f2;
--c-nogi:#9a9a9a;
--c-open:#7ac943;
}
@media (min-width:60rem){:root{--bar-h:80px;--band-h:80px}}

/* ---- 01 Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
img,picture,video,iframe{max-width:100%;display:block}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}

/* ---- 02 Base ---- */
body{
font-family:var(--font);
font-size:var(--step-0);
font-weight:400;
line-height:1.6;
color:var(--black);
background:var(--white);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.hero__h1{font-family:var(--font-display);font-weight:600;line-height:1;
letter-spacing:.01em;text-transform:uppercase}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
.coach__name,.lineage-belt__names,.values .wrap{font-family:var(--font-display)}
p{max-width:var(--measure)}
a{color:inherit}
[id]{scroll-margin-top:var(--bar-h)}
/* Amber alone is only 1.7:1 on white. The dark halo carries the ring on the light
   sections and is invisible (harmless) on the black ones, so one rule covers both. */
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;
box-shadow:0 0 0 6px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---- 03 Layout and utilities ---- */
.wrap{width:100%;max-width:75rem;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--invert{background:var(--black);color:var(--white)}
.section p + p{margin-top:1rem}
.section h2 + p,.section h2 + .lede{margin-top:1.25rem}
.lede{font-size:var(--step-1);margin-bottom:1.5rem}
.skip{
position:absolute;left:-9999px;top:0;z-index:999;
background:var(--amber);color:var(--black);
padding:.75rem 1.25rem;font-weight:700;
}
.skip:focus{left:0}
.visually-hidden{
position:absolute!important;left:0;width:1px;height:1px;
padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- 04 Buttons ---- */
.btn{
display:inline-block;
padding:1rem 2rem;
font-weight:900;
font-size:var(--step-0);
text-transform:uppercase;
letter-spacing:.04em;
text-decoration:none;
border:2px solid transparent;
min-height:48px;
}
.btn--primary{background:var(--amber);color:var(--black)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--black);color:var(--white)}

/* ---- 05 Bar ---- */
.bar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--bar-h);background:var(--black)}
.bar__in{display:grid;align-items:center;height:100%;width:100%;max-width:75rem;
margin-inline:auto;padding-inline:var(--gutter)}
.bar__logo{display:flex;align-items:center;text-decoration:none;justify-self:start}
.bar__mark{display:block;width:auto}
.bar__cta{display:inline-flex;align-items:center;justify-content:center;border-width:0}
.bar__nav a{color:var(--white);text-decoration:none;font-weight:700;text-transform:uppercase}
.bar__nav a:hover,.bar__nav a:focus-visible{color:var(--amber)}
.bar__toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:44px;
background:none;border:0;padding:0}
.bar__bars{position:relative}
.bar__bars,.bar__bars::before,.bar__bars::after{display:block;width:24px;height:2px;background:#fff;
transition:transform .15s ease}
.bar__bars::before,.bar__bars::after{content:"";position:absolute}
.bar__bars::before{transform:translateY(-7px)}
.bar__bars::after{transform:translateY(7px)}
.nav-open .bar__bars{background:transparent}
.nav-open .bar__bars::before{transform:rotate(45deg)}
.nav-open .bar__bars::after{transform:rotate(-45deg)}
@media (max-width:59.999rem){
.bar__in{grid-template-columns:auto 1fr auto auto;gap:.5rem}
.bar__mark{height:28px}
.bar__logo{min-height:44px}
.bar__cta{grid-column:3;justify-self:end;font-size:.625rem;letter-spacing:.04em;
padding:.7rem .85rem;min-height:44px}
.bar__toggle{grid-column:4}
.bar__nav{display:none;position:fixed;top:var(--bar-h);left:0;right:0;background:#000;
flex-direction:column;padding:1rem 0 2rem;border-top:1px solid #222}
.nav-open .bar__nav{display:flex}
.bar__nav a{display:block;padding:1rem 1.25rem;font-weight:900;font-size:1.125rem;letter-spacing:.1em}
}
@media (min-width:60rem){
.bar__in{grid-template-columns:1fr auto 1fr;gap:1.5rem}
.bar__mark{height:40px}
.bar__nav{grid-column:2;justify-self:center;display:flex;gap:2.5rem}
.bar__nav a{font-size:.8125rem;letter-spacing:.12em}
.bar__cta{grid-column:3;justify-self:end;font-size:.75rem;letter-spacing:.1em;
padding:.55rem 1.15rem;min-height:38px}
.bar__toggle{display:none}
}

/* ---- 06 Hero ---- */
.heroblock{min-height:100svh;display:flex;flex-direction:column;background:var(--black)}
.hero{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;
overflow:hidden;padding-block:0;color:var(--white)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__veil{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.5)}
.hero__in{position:relative;z-index:2;width:100%;padding-block:0 3rem}
.hero__h1{margin:0 0 1.5rem;max-width:none;font-size:clamp(1.75rem,8.5vw,6.5rem);
line-height:.98;letter-spacing:-.01em}
.hero__h1 span{display:block;white-space:nowrap}
.hero__outline{color:transparent;-webkit-text-stroke:2px #fff}
.hero__h1 span:first-child{margin-bottom:1.5rem}
.hero__solid{color:#fff}
.hero__sub{margin-bottom:.5rem;margin:0;max-width:52ch;font-size:clamp(1.0625rem,1.6vw,1.375rem);line-height:1.45;color:#fff}
.mbrk{display:inline}
@media (min-width:56rem){.mbrk{display:none}}
@media (min-width:60rem){
.hero__in{padding-block:0 4rem}
.hero__outline{-webkit-text-stroke-width:3px}
.hero__h1 span:first-child{margin-bottom:2rem}
}

/* ---- 07 Values band ---- */
.values{position:relative;z-index:2;height:var(--band-h);display:flex;align-items:center;
background:var(--black)}
.values .wrap{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;width:100%;
gap:.5rem .9rem;color:#fff;font-weight:700;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
.values .v{position:relative}
@media (min-width:60rem){
.values .wrap{gap:0;font-size:1.25rem;font-weight:700;letter-spacing:.26em}
.values .v{flex:1 1 0;text-align:center}
.values .v+.v::before{content:"";position:absolute;left:0;top:50%;width:1px;height:1.15em;
transform:translateY(-50%);background:rgba(255,255,255,.22)}
}

/* ---- 08 Fixed image band ---- */
.band{position:relative;height:62svh;clip-path:inset(0);background:var(--black)}
.band__img{position:fixed;top:0;left:0;width:100%;height:100vh;object-fit:cover;object-position:50% 35%}
@media (min-width:60rem){.band{height:78svh}}

/* ---- 09 Beginners (DOM order = mobile order) ---- */
.beginners__grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}
.beginners__left,.beginners__right{display:contents}
.beginners__h{margin:0;max-width:none}
.brk{display:none}
.beginners__lead{font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.4}
.beginners__left p{max-width:56ch;line-height:1.65;margin:0}
.beginners__media{display:flex;flex-direction:column;align-items:stretch;margin:.5rem 0 0}
.beginners__media figcaption{order:0;margin:0 0 1.5rem;max-width:56ch;font-size:var(--step-0);
line-height:1.65;color:inherit;text-align:left}
.beginners__cta{margin:2.5rem 0 0;text-align:left;max-width:none}
@media (min-width:56rem){
.beginners__grid{grid-template-columns:minmax(0,60fr) minmax(0,40fr);column-gap:4rem;row-gap:0}
.beginners__left{display:block;grid-column:1;grid-row:2;padding-bottom:5.5rem}
.beginners__right{display:block;grid-column:2;grid-row:2}
.beginners__h{grid-column:1 / -1;grid-row:1;margin:0 0 3rem;max-width:none}
.brk{display:inline}
.beginners__left p.beginners__lead{margin-bottom:2.25rem}
.beginners__left p:not(.beginners__lead){margin-bottom:1.75rem}
.beginners__left p:last-child{margin-bottom:0}
.beginners__media figcaption{max-width:340px}
.beginners__grid .beginners__cta{grid-column:1;grid-row:2;align-self:end;justify-self:start;
margin:0;text-align:left}
}

/* ---- 10 Video thumbnail and modal ---- */
.vthumb{order:1;position:relative;display:block;width:100%;max-width:none;aspect-ratio:1/1;
overflow:hidden;background:#111;border:0;padding:0;margin:0 0 .5rem;cursor:pointer}
.vthumb__play{position:absolute;top:50%;left:50%;width:4.25rem;height:4.25rem;
transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
background:#fff;transition:background .15s ease}
.vthumb__play::after{content:"";display:block;width:0;height:0;margin-left:.3rem;border-style:solid;
border-width:12px 0 12px 19px;border-color:transparent transparent transparent #111}
.vthumb:hover .vthumb__play,.vthumb:focus-visible .vthumb__play{background:#000}
.vthumb:hover .vthumb__play::after,.vthumb:focus-visible .vthumb__play::after{border-left-color:#fff}
.vthumb__label{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;
background:linear-gradient(transparent,rgba(0,0,0,.7));color:rgba(255,255,255,.85);
font-family:var(--font-display);font-weight:500;font-size:.6875rem;letter-spacing:.2em;
text-transform:uppercase;text-align:center}
@media (min-width:56rem){.vthumb{max-width:340px}}
.vmodal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:flex;
align-items:center;justify-content:center;padding:1.5rem}
.vmodal__video{max-width:100%;max-height:100%;width:auto;height:auto;background:#000}
.vmodal__close{position:absolute;top:1rem;right:1.25rem;width:44px;height:44px;background:none;
border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.vmodal__close:hover{color:var(--amber)}

/* ---- 11 Classes ---- */
.classes h2{margin-bottom:1.25rem}
.classes .lede{margin:0 0 3rem;max-width:62ch;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6}
.cards{display:grid;grid-template-columns:1fr;gap:1px;margin:0;padding:0;list-style:none;background:#e4e4e4}
.card{background:#fff;border-top:1px solid #111;padding:2rem 1.75rem;
display:flex;flex-direction:column;transition:background .15s ease}
.card::before{content:"";display:block;width:2.25rem;height:2px;background:#111;margin:0 0 1.25rem}
.card h3{margin:0 0 .75rem;font-size:var(--step-2)}
.card p{margin:0;max-width:none;font-size:1rem;line-height:1.6;color:#333}.card--kids{
	background:#0b0b0b;
	border-top-color:#fff;
}
.card--kids::before{background:#fff}
.card--kids h3{color:#fff}
.card--kids p{color:#cfcfcf}
.classes__close{margin:3rem 0 0;max-width:70ch;font-size:var(--step-0);line-height:1.65;color:#4a4a4a}
@media (min-width:48rem){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){
.cards{grid-template-columns:repeat(4,1fr)}
.card{padding:2.5rem 2rem}
}

/* ---- 12 Timetable ---- */
.timetable h2{margin-bottom:1.25rem}
.pad{position:relative;min-width:0;background:#191919;border:1px solid #3a3a3a;padding:3.25rem 0 0;
box-shadow:0 24px 60px rgba(0,0,0,.6)}
.pad__wire{position:absolute;top:0;left:0;right:0;height:3.25rem;pointer-events:none;
background-image:
radial-gradient(circle 5px at 22px 30px,#000 5px,transparent 6px),
linear-gradient(180deg,transparent 8px,#9a9a9a 8px,#d4d4d4 12px,#7a7a7a 18px,transparent 19px);
background-size:44px 100%,44px 100%;background-repeat:repeat-x}
.pad__wire::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#1c1c1c}
.pad__mark{display:block;width:clamp(150px,20vw,260px);height:auto;margin:.5rem auto 1rem;
opacity:.55;pointer-events:none}
.pad__title{margin:0 0 2rem;max-width:none;text-align:center;font-family:var(--font-display);
font-weight:600;font-size:clamp(1rem,1.8vw,1.25rem);letter-spacing:.3em;text-transform:uppercase;
color:#fff;opacity:.55}
.timetable__place{margin:0;
font-family:var(--font-display);font-weight:600;font-size:clamp(.9375rem,1.7vw,1.47rem);
letter-spacing:.12em;line-height:1;text-transform:uppercase;color:#bdbdbd;opacity:.65;padding-right:1.25rem}
.tt{min-width:0;overflow-x:auto;scrollbar-width:none;padding:0 1.25rem 1.5rem}
.tt::-webkit-scrollbar{display:none}
.tt__grid{display:grid;grid-template-columns:5.5rem repeat(7,minmax(6.5rem,1fr));
gap:.4rem;min-width:44rem;align-items:stretch}
.tt__day{display:flex;align-items:center;justify-content:center;padding:.5rem 0;
font-family:var(--font-display);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.tt__time{display:flex;align-items:center;justify-content:center;padding:.55rem .5rem;
background:#242424;border:1px solid #3a3a3a;
font-family:var(--font-display);font-size:.9375rem;letter-spacing:.04em;color:#fff}
.tt__cell{display:flex}
.chip{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;
padding:.55rem .5rem;font-size:.75rem;font-weight:700;line-height:1.25;
letter-spacing:.02em;text-transform:uppercase}
.chip--kids-a{background:var(--c-kids-a);color:#111}
.chip--kids-b{background:var(--c-kids-b);color:#052b27}
.chip--gi{background:var(--c-gi);color:#111}
.chip--nogi{background:var(--c-nogi);color:#111}
.chip--open{background:var(--c-open);color:#0e2405}
.chip--other{background:var(--amber);color:#111}
.timetable__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:1rem 2rem;margin-top:2rem}
.timetable__cta{position:relative;z-index:2;margin:0;max-width:none}
@media (min-width:40rem) and (max-width:63.999rem){.pad{padding-inline:1rem}}
@media (min-width:64rem){
.pad{max-width:none;margin-inline:0;padding-bottom:2.5rem;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.tt{padding:0 1.75rem 2rem}
.tt__grid{grid-template-columns:4.75rem repeat(7,minmax(6rem,1fr));gap:.4rem;min-width:0}
.tt__day{font-size:1.125rem}
.tt__time{font-size:1.0625rem}
.chip{font-size:.75rem;letter-spacing:.01em;padding:.75rem .4rem}
.timetable__foot{max-width:64rem;margin:2.5rem 0 0}
.timetable__place{padding-right:1.75rem}
}
@media (max-width:47.999rem){
.timetable__foot{justify-content:center;text-align:center}
.timetable__place{padding-right:0}
}

/* ---- 13 Coaches ---- */
.coaches h2{margin-bottom:2rem}
.lineage{margin:0 0 3.5rem}
.lineage__label,.coaches__label{margin:0 0 .75rem;font-family:var(--font-display);font-weight:600;
font-size:.8125rem;letter-spacing:.24em;text-transform:uppercase;color:#6b6b6b}
.lineage__note{margin:0 0 2rem;font-size:var(--step-0);color:#4a4a4a;max-width:none}
@media (min-width:56rem){.lineage__note{max-width:88ch}}
.coaches__label{margin-bottom:1.5rem}
.lineage-belt::-webkit-scrollbar{display:none}
.lineage-belt__names li.sep{color:#8f8f8f;font-size:1.5em;line-height:1;padding-block:0}
.lineage-belt__names li.lineage-belt__you{flex:0 0 auto;justify-content:center;margin-left:1.5rem;
background:#7d0f18;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
padding:1rem 2rem;min-width:9rem;box-shadow:inset 1px 0 0 rgba(0,0,0,.55);
background-image:
repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px),
linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.35))}
@media (max-width:47.999rem){
.lineage-belt ol.lineage-belt__names{padding-left:1.5rem}
.lineage-belt__names li.lineage-belt__you{margin-left:1.5rem;padding-inline:1.75rem;min-width:8rem}
}
@media (min-width:48rem){
.lineage-belt ol.lineage-belt__names{justify-content:space-between;padding-right:0}
.lineage-belt__names li.lineage-belt__you{flex:0 0 auto;min-width:0;padding-inline:3.25rem;margin-left:1.5rem}
}

.coaches__grid{display:grid;gap:3rem;list-style:none;margin:0;padding:0}
@media (min-width:48rem){.coaches__grid{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.coach{display:flex;flex-direction:column;min-width:0}
.coach__photo{margin:0 0 1.25rem;background:#ececec;aspect-ratio:4/5;overflow:hidden}
.coach__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;
filter:contrast(1.02) saturate(1.02)}
.coach__photo--empty{display:flex;align-items:center;justify-content:center}
.coach__photo--empty span{color:#8a8a8a;font-size:.6875rem;font-weight:700;letter-spacing:.24em}
.coach__body{margin-top:1.25rem}
.coach__name{margin:0 0 .25rem;font-size:var(--step-2)}
.coach__role{margin:0 0 1rem;max-width:none;color:#8a6a00;font-weight:700;font-size:.75rem;
letter-spacing:.14em;text-transform:uppercase}
.coach__bio p{margin-bottom:1rem;max-width:none}
.coach__bio p:last-child{margin-bottom:0}
.coach .belt__bar{display:block;flex:1 1 auto;height:100%;
background-image:
repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px),
linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.35))}
.coach .belt>span:last-child{flex:0 0 auto;display:flex;align-items:center;
padding:0 1.1rem;white-space:nowrap;box-shadow:inset 1px 0 0 rgba(0,0,0,.5)}
.coach .belt--black .belt__bar{background-color:#0b0b0b}
.coach .belt--black>span:last-child{background-color:#7d0f18}
/* Rank detail comes from the coach's "Rank detail" field. The hardcoded 5 degrees
   below is the fallback for a black belt saved before that field existed; once every
   black belt has the field filled in, this ::before rule can go. */
.coach .belt--black>span:last-child::before{content:"5\00B0";margin-right:.7rem;
font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:0}
.coach .belt.has-detail>span:last-child::before{content:none}
.belt__deg{font-style:normal;margin-right:.7rem;font-family:var(--font-display);
font-weight:600;font-size:1rem;letter-spacing:0}
.coach .belt--brown .belt__bar{background-color:#4a2c17}
.coach .belt--purple .belt__bar{background-color:#42225e}
.coach .belt--blue .belt__bar{background-color:#12356b}
.coach .belt--white .belt__bar{background-color:#e6e6e6}
.coach .belt--brown>span:last-child,
.coach .belt--purple>span:last-child,
.coach .belt--blue>span:last-child,
.coach .belt--white>span:last-child{background-color:#111}

/* ---- 14 Kids ---- */
.kidshero{position:relative;min-height:70svh;display:flex;align-items:flex-end;
overflow:hidden;clip-path:inset(0);background:#000}
.kidshero__img{position:fixed;top:0;left:0;width:100%;height:100vh;object-fit:cover;object-position:50% 42%}
.kidshero__veil{position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.75) 100%)}
.kidshero__in{position:relative;z-index:2;width:100%;padding-block:0 3rem;color:#fff}
.kidshero h2{margin:0 0 .75rem;color:#fff;font-size:clamp(2.25rem,6.5vw,4.5rem)}
.kidshero p{margin:0;max-width:44ch;font-size:clamp(1.0625rem,1.6vw,1.375rem);color:#f0f0f0}

.kids{padding-bottom:7rem}
.kids__grid{display:grid;grid-template-columns:1fr;gap:2rem;min-width:0}
.kids__col{min-width:0}
.kids__col p{margin:0 0 1.5rem;max-width:56ch;line-height:1.65}
.kids__col p:last-child{margin-bottom:0}
.kids .lede{font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.4}
.kids__lead{margin:0 0 2.5rem;max-width:none}
.kids__aside{margin:0 0 2rem;line-height:1.65;max-width:52ch}
.kids__media{margin:0}
.kids__grid>.kids__cta{margin-top:1.75rem}
@media (max-width:55.999rem){
.kids__media{margin:1.5rem 0 0}
.kids__note{margin-top:1.75rem}
}
@media (min-width:56rem){
.kidshero{min-height:78svh}
.kidshero__in{padding-block:0 4rem}
.kids__grid{grid-template-columns:minmax(0,58fr) minmax(0,42fr);column-gap:7rem;
grid-template-rows:auto auto auto auto;align-items:start}
.kids__lead{grid-column:1 / -1;grid-row:1;max-width:64ch;margin-bottom:3rem}
.kids__col:not(.kids__col--media){grid-column:1;grid-row:2}
.kids__col--media{grid-column:2;grid-row:2 / span 3;display:flex;flex-direction:column}
.kids__col--media .kids__media{margin-top:auto}
.kids__col--media .vthumb{max-width:340px;margin-left:auto}
.kids__aside{margin-bottom:2.5rem}
.kids__grid>.kids__note{grid-column:1;grid-row:3;margin:0}
.kids__grid>.kids__cta{grid-column:1;grid-row:4;margin:2rem 0 0;align-self:start}
}

/* kids schedule card */
.kcard{max-width:100%;background:#0b0b0b;padding:1.75rem 2rem 1.5rem;margin:0 0 2.5rem;
overflow-x:auto;scrollbar-width:none}
.kcard::-webkit-scrollbar{display:none}
.kcard__title{margin:0 0 1.5rem;text-align:center;font-family:var(--font-display);
font-weight:600;font-size:1.125rem;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.kgrid{display:grid;grid-template-columns:auto repeat(7,minmax(0,1fr));min-width:22rem;
align-items:center;gap:.45rem .2rem}
.kgrid__corner{border-bottom:1px solid #242424;align-self:stretch}
.kgrid__day{text-align:center;font-family:var(--font-display);font-size:.875rem;
letter-spacing:.06em;color:#8a8a8a;padding-bottom:.5rem;border-bottom:1px solid #242424}
.kgrid__day.is-on{color:#fff;font-weight:600}
.kgrid__label{display:block;padding:.5rem .9rem .5rem 0;white-space:nowrap;
font-family:var(--font-display);font-size:1.0625rem;color:#fff}
.kgrid__cell{display:flex;align-items:center;justify-content:center;min-height:2.2rem}
.kchip{display:flex;align-items:center;justify-content:center;width:100%;white-space:nowrap;
padding:.5rem .75rem;font-size:.75rem;font-weight:700;
line-height:1.1;letter-spacing:.01em;color:#111}
.kchip--kids-a{background:var(--c-kids-a)}
.kchip--kids-b{background:var(--c-kids-b);color:#052b27}
.kchip__pre{font-style:normal}
@media (max-width:47.999rem){
.kcard{padding-inline:1.25rem}
.kgrid{min-width:26rem;gap:.4rem .3rem}
.kgrid__label{font-size:.9375rem;padding-right:.6rem}
.kchip{padding:.5rem .55rem}
.kchip__pre{display:none}
}

/* ---- 15 What members say ---- */
.says{position:relative;background:#f4f4f4;color:var(--black);padding-block:5rem 4rem;overflow:hidden}
.says::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#e0e0e0}
.says::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:#e0e0e0}
.says__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 2rem;margin-bottom:2.5rem}
.says__head h2{margin:0;font-size:clamp(1.75rem,4vw,2.75rem)}
.says__score{margin:0;font-size:.9375rem;color:#4a4a4a}
.says__score strong{font-family:var(--font-display);font-size:1.375rem;color:#111}
.says__star{color:var(--amber);vertical-align:-.14em;margin:0 .35em 0 .12em}
.marquee__track{display:flex;width:max-content;gap:1px;background:#e0e0e0;
animation:says-scroll 60s linear infinite}

@keyframes says-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.marquee{overflow-x:auto}
.marquee__track{animation:none}
}
.say{flex:0 0 auto;width:min(21rem,78vw);margin:0;padding:2.25rem 2rem;background:#fff;
display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
.say__quote{margin:0;font-size:1.0625rem;line-height:1.6;color:#222}

.say__name{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b}
.says__foot{margin-top:3rem;padding-top:0;border-top:0}
.says__link{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:#111;text-decoration:none}
.says__link:hover{color:#8a6a00}
@media (min-width:56rem){
.says{padding-block:6rem 5rem}
.says__head{margin-bottom:3rem}
}

/* ---- 16 Questions ---- */
.faq h2{margin-bottom:2.5rem}
.faq__list{border-top:1px solid #262626;max-width:56rem}
.qa{border-bottom:1px solid #262626}
.qa summary{position:relative;display:flex;align-items:center;gap:1.5rem;
padding:1.5rem 3rem 1.5rem 0;cursor:pointer;list-style:none;
font-family:var(--font-display);font-weight:500;color:#fff;
font-size:clamp(1.0625rem,1.7vw,1.375rem);line-height:1.35;
transition:color .15s ease}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover,.qa summary:focus-visible{color:var(--amber)}
.qa summary::after{content:"";position:absolute;right:.25rem;top:50%;width:16px;height:2px;
background:currentColor;transform:translateY(-50%)}
.qa summary::before{content:"";position:absolute;right:.25rem;top:50%;width:16px;height:2px;
background:currentColor;transform:translateY(-50%) rotate(90deg);transition:transform .2s ease}
.qa[open] summary{color:var(--amber)}
.qa[open] summary::before{transform:translateY(-50%) rotate(0deg)}
.qa__body{padding:0 3rem 1.75rem 0;max-width:60ch}
.qa__body p{margin:0;color:#c4c4c4;line-height:1.65;max-width:none}
@media (min-width:56rem){
.qa summary{padding-block:1.75rem}
.qa__body{padding-bottom:2rem}
}

/* ---- 17 Book and visit ---- */
.book{background:var(--white);color:var(--black);padding-top:7rem}
.book__grid{display:grid;grid-template-columns:1fr;gap:3rem}
.book .lede{margin:0 0 2rem;max-width:44ch;font-size:clamp(1.125rem,1.8vw,1.375rem);
line-height:1.5;color:#333}
ul.ticks{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:1.75rem;color:#333;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;
background:var(--amber)}
.book__alt{margin:0 0 3rem;color:#4a4a4a}
.book__alt a{color:#111;text-decoration:underline;text-underline-offset:3px}
.visit{padding-top:2.5rem;border-top:1px solid #e4e4e4}
.visit__h{margin:0 0 1.25rem;font-size:.8125rem;letter-spacing:.24em;text-transform:uppercase;color:#6b6b6b}
.visit__line{margin:0 0 .5rem}
.visit__line a{color:#111;text-decoration:none}
.visit__line a:hover{color:#8a6a00}
.visit__hours{margin:1.25rem 0 1.5rem;color:#4a4a4a;font-size:.9375rem;line-height:1.6;max-width:46ch}
.visit__hours a{color:#111}
.visit__social{display:flex;gap:1.5rem;margin:0}
.visit__social a{color:#111;font-weight:700;font-size:.75rem;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none}
.visit__social a:hover{color:#8a6a00}

.book__widget{background:#0b0b0b;border:0;padding:2rem 1.75rem;color:#fff}
.lead__field{margin:0 0 1.25rem;max-width:none}
.lead__field label{display:block;margin-bottom:.5rem;font-size:.8125rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:#a8a8a8}
.lead__field input,.lead__field select{width:100%;padding:.85rem 1rem;background:#0b0b0b;
border:1px solid #2e2e2e;color:#fff;font:inherit;font-size:1rem}
.lead__field input:focus,.lead__field select:focus{outline:2px solid var(--amber);
outline-offset:0;border-color:var(--amber)}
.lead__trap{position:absolute!important;left:-9999px!important}
.lead__submit{width:100%;margin-top:.5rem}
.lead__note{margin:1rem 0 0;font-size:.875rem;color:#8a8a8a;text-align:center}
.lead__thanks{display:none}
#arena_sink{position:absolute;width:0;height:0;border:0;visibility:hidden;pointer-events:none}
@media (min-width:56rem){
.book__grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:5rem;align-items:start}
.book__widget{padding:2.5rem 2.25rem}
}

/* ---- 18 Footer ---- */
.site-footer{background:var(--black);color:#a8a8a8;padding-block:4rem 2rem}
.site-footer p{max-width:none}
.foot{display:grid;grid-template-columns:1fr;gap:2.5rem}
.foot__mark{display:block;width:190px;height:auto;margin:0 0 1rem}
.foot__tag{margin:0;max-width:34ch;font-size:.9375rem;line-height:1.6;color:#8a8a8a}
.foot__h{margin:0 0 1rem;font-size:.75rem;font-weight:700;letter-spacing:.22em;
text-transform:uppercase;color:#fff}
.foot__col p{margin:0 0 .65rem;font-size:.9375rem;line-height:1.6}
.foot a{color:#e4e4e4;text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--amber)}
/* Specificity, not !important: .foot__col p above would otherwise zero the top margin. */
.foot__col p.foot__social{display:flex;gap:1.25rem;margin-top:1rem;font-size:.75rem;
font-weight:700;letter-spacing:.14em;text-transform:uppercase}
ul.foot__nav{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;font-size:.9375rem}
.foot__base{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
justify-content:space-between;margin-top:3.5rem;padding-top:1.75rem;border-top:1px solid #1e1e1e}
.foot__legal{display:flex;flex-wrap:wrap;gap:1.5rem;margin:0}
.foot__legal a{font-size:.8125rem;color:#8a8a8a}
.foot__copy{margin:0;font-size:.875rem;color:#8f8f8f}
.foot__copy a{color:#8a8a8a;text-decoration:underline;text-underline-offset:3px}
@media (min-width:48rem){.foot{grid-template-columns:repeat(2,1fr);gap:3rem}}
@media (min-width:64rem){
.foot{grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:3rem}
.site-footer{padding-block:5rem 2rem}
}

/* ---- 19 Document pages (privacy, terms, thank you) ---- */
.doc{padding-block:calc(var(--bar-h) + 3rem) 5rem}
.doc__wrap{max-width:46rem}
.doc__head{margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:1px solid #e4e4e4}
.doc__mark{display:block;width:170px;height:auto;margin:0 0 2rem;filter:invert(1)}
.doc__title{margin:0;font-size:clamp(2rem,5vw,3.5rem)}
.doc__sub{margin:1rem 0 0;font-size:1.125rem;line-height:1.55;color:#4a4a4a;max-width:52ch}
.doc__body{font-size:1.0625rem;line-height:1.7}
.doc__body p{margin:0 0 1.25rem;max-width:none}
.doc__body h2{margin:2.5rem 0 1rem;font-size:1.5rem}
.doc__body h2:first-child{margin-top:0}
.doc__body h3{margin:2rem 0 .75rem;font-size:1.1875rem}
.doc__body ul,.doc__body ol{margin:0 0 1.5rem;padding-left:1.25rem}
.doc__body li{margin-bottom:.5rem}
.doc__body a{color:#111;text-decoration:underline;text-underline-offset:3px}
.doc__body strong{font-weight:700}
.doc__body .lead,.doc__body>p:first-child{font-size:1.25rem;line-height:1.55}

/* ---- 20 Touch targets (mobile, cross-section) ---- */
@media (max-width:59.999rem){
.says__link,.visit__line a,.visit__social a,.foot a,.foot__legal a{display:inline-block;padding-block:.35rem}
ul.foot__nav{gap:.35rem}
.foot__nav a{padding-block:.5rem}
.foot__col p.foot__social{gap:1.5rem}
}

/* pinned testimonial video, quotes fade out before reaching it */
.says__body{--sv:clamp(15rem,24vw,21.25rem);position:relative;padding-left:calc(max(0px, (100% - 1200px) / 2) + 3rem)}
.saysvid{position:absolute;top:50%;transform:translateY(-50%);left:calc(max(0px, (100% - 1200px) / 2) + 3rem);z-index:2;margin:0;width:var(--sv)}
.saysvid .vthumb{width:100%;height:auto}
.says__body .marquee{
-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--sv) + 1rem),#000 calc(var(--sv) + 9rem),#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--sv) + 1rem),#000 calc(var(--sv) + 9rem),#000 88%,transparent)}
@media (max-width:820px){
.says__body{padding-left:0}
.says__body .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
}

.say__stars{display:flex;gap:.15rem;margin:0 0 1.25rem;color:var(--amber);line-height:0}
@media (max-width:820px){.saysvid{
	position:static;
	width:min(21.25rem,80vw);
	margin:0 auto 1.5rem;
	transform:none;
}}
.coach h3.belt__bar{margin:0;display:flex;align-items:center;padding:0 1.1rem;
font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:#fff;overflow:hidden;white-space:nowrap}
.coach .belt--white h3.belt__bar{color:#111;text-shadow:none}.lineage-belt{
	position:relative;
	background:#0b0b0b;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.7);
	background-image:
repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 2px,rgba(0,0,0,.35) 2px 4px,transparent 4px 9px),
repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,rgba(0,0,0,.5) 2px 4px,transparent 4px 9px),
linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.45));
	height:3.2rem;
	display:flex;
	align-items:center;
}.lineage-belt ol.lineage-belt__names{
	display:flex;
	flex-wrap:nowrap;
	white-space:nowrap;
	width:100%;
	min-width:max-content;
	gap:0;
	margin:0;
	padding:0 0 0 2rem;
	list-style:none;
	font-weight:400;
	letter-spacing:.02em;
	font-size:clamp(.875rem,1.3vw,1.1875rem);
	color:#e8e8e8;
	align-items:center;
}.lineage-belt__names li{
	display:inline-flex;
	align-items:center;
	flex:0 0 auto;
	padding-block:0;
}

/* coach card rhythm: photo + belt + title read as one block, then a break */
.coach .coach__photo{margin-bottom:0}
.coach .coach__body{margin-top:.55rem}.coach .belt{
	display:flex;
	align-items:stretch;
	padding:0;
	font-size:.75rem;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#fff;
	height:2.5rem;
	margin:0 0 .45rem;
}
.coach .coach__role{margin:0 0 2.25rem}

/* mat band + kids band in black and white */
.band__img,
.kidshero__img{filter:grayscale(1)}

/* faded poster frame behind the play triangle */
.vthumb.has-poster{background-image:var(--poster);background-size:cover;
background-position:50% 22%;background-repeat:no-repeat;position:relative;isolation:isolate}
.vthumb.has-poster::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(rgba(10,10,10,.55),rgba(10,10,10,.78))}
.vthumb.has-poster .vthumb__play,
.vthumb.has-poster .vthumb__label{z-index:1}

/* hero: two halves side by side, text left, video right --------------- */
@media (min-aspect-ratio:1/1){
.heroblock{min-height:100svh}
.hero{display:block;overflow:hidden;padding:0;height:calc(100svh - var(--band-h))}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;
width:100%;max-width:none;padding:0;height:100%;align-items:stretch}
.hero__in{position:static;z-index:auto;width:auto;display:flex;flex-direction:column;
justify-content:center;padding:calc(var(--bar-h) + clamp(1.5rem,3vw,3rem)) clamp(2rem,5vw,4.5rem) calc(clamp(2rem,5vw,4.5rem) + 5rem)}
.hero__media{position:relative;inset:auto;z-index:auto;width:100%;height:100%;
aspect-ratio:auto;overflow:hidden;background:#0a0a0a}
.hero__video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__veil{display:none}
}

/* hero: mirrored ghost video behind the text -------------------------- */
.hero__ghost{display:none}
@media (min-aspect-ratio:1/1){
.hero__in{position:relative;overflow:hidden;container-type:inline-size}
.hero__h1{font-size:clamp(1.75rem,10cqi,6.5rem)}
.hero__ghost{display:block;position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;transform:scaleX(-1);opacity:.14;filter:blur(3px) grayscale(1);
z-index:0;pointer-events:none}
.hero__in > :not(.hero__ghost){position:relative;z-index:1}
}

/* hero: offer line up top, trust signals pinned low ------------------- */
.hero__offer{margin:2.75rem 0 0;display:flex;flex-wrap:wrap;gap:.55rem}
.hero__offer span{font-family:var(--font-display);font-size:.75rem;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
border:1px solid rgba(255,255,255,.24);padding:.45rem .85rem;line-height:1}
.hero__trust{margin:2.5rem 0 0;display:flex;flex-direction:column;gap:.3rem;
align-items:flex-start}
.hero__stars{display:flex;gap:.12rem;color:var(--amber);line-height:0}
.hero__rating{font-size:.8125rem;color:rgba(255,255,255,.88)}
.hero__rating strong{font-family:var(--font-display);font-weight:600;font-size:.9375rem}
@media (min-aspect-ratio:1/1){
.hero .hero__in>.hero__trust{position:absolute;z-index:3;left:clamp(2rem,5vw,4.5rem);right:clamp(2rem,5vw,4.5rem);bottom:clamp(2rem,5vw,4.5rem);margin:0;padding:0}
}
@media (max-aspect-ratio:1/1){
.hero__trust{margin-top:1rem}
.hero__offer>*:last-child{display:none}
}

/* hero video: keep some colour ---------------------------------------- */
.hero__video{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:50% 40%;
	filter:none;
}
@media (max-aspect-ratio:1/1){
.hero__video{filter:saturate(.85)}
}

/* timetable foot: CTA left, location right on desktop ---------------- */
@media (min-width:720px){
.timetable__cta{order:1}
.timetable__place{order:2}
}

/* kids: note sits under the video ------------------------------------- */
.kids__col--media{display:block}
.kids__col--media .kids__media{margin:0}.kids__note{
	color:#4a4a4a;
	margin:1.1rem 0 0;
	border-left:0;
	padding-left:0;
	text-align:center;
	max-width:none;
	width:100%;
}
.kids__col>.kids__cta{margin:4.5rem 0 0}
.kids__col>.kcard{margin-bottom:0}

/* kids: on narrow screens the CTA drops below the video ---------------- */
@media (max-width:820px){
.kids__grid{display:flex;flex-direction:column}
.kids__col{display:contents}
.kids__lead{order:1}
.kids__col>p:not(.kids__cta){order:2}
.kids__col>.kcard{order:3}
.kids__col--media{order:4;display:block}
.kids__col>.kids__cta{order:5;margin:2.5rem 0 0}
}

/* reviews marquee: swipeable, auto-scrolls, pauses while held --------- */
@media (hover:hover){.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}}.marquee{
	position:relative;
	width:100%;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
	overflow-x:auto;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior-x:contain;
}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-js .marquee__track{animation:none}


/* ---- horizontal swipe cue (timetable + lineage) ---- */
.hswipe{position:relative}
.hswipe__cue{position:absolute;top:50%;z-index:3;display:none;
align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;
background:rgba(0,0,0,.6);color:#fff;pointer-events:none;transform:translateY(-50%)}
.hswipe__cue--l{left:.5rem;animation:hswipeNudgeL 1.6s ease-in-out infinite}
.hswipe__cue--r{right:.5rem;animation:hswipeNudgeR 1.6s ease-in-out infinite}
.hswipe.is-less .hswipe__cue--l{display:flex}
.hswipe.is-more .hswipe__cue--r{display:flex}
.hswipe.is-less::before,.hswipe.is-more::after{content:"";position:absolute;
top:0;bottom:0;width:4rem;z-index:2;pointer-events:none}
.hswipe.is-less::before{left:0;background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.7))}
.hswipe.is-more::after{right:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.7))}
@keyframes hswipeNudgeL{0%,100%{transform:translateY(-50%) translateX(0)}
50%{transform:translateY(-50%) translateX(-5px)}}
@keyframes hswipeNudgeR{0%,100%{transform:translateY(-50%) translateX(0)}
50%{transform:translateY(-50%) translateX(5px)}}
@media (prefers-reduced-motion:reduce){.hswipe__cue{animation:none}}