/* Layout concept: full-bleed photo hero (three crossfading banners, slow zoom), facts strip, photo class cards,
   a kata floor-pattern band, venue cards, a parallax community photo, Fit and Tai Chi, quotes, a sky call to action.
   A belt-colour bar across the top fills as the page is scrolled. */
:root{
  --bg:#f7f7f7; --surface:#ffffff; --fg:#323b44; --muted:#4f5e70; --line:#dde2e7;
  --slate:#4f5e70; --slate-deep:#323b44; --teal:#00bc96; --teal-ink:#0f1f1a; --link:#00725b;
  --card-shadow:0 1px 3px rgba(50,59,68,.12), 0 8px 24px rgba(50,59,68,.06);
  --font-display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-body:'Open Sans','Helvetica Neue',Arial,sans-serif;
  --font-kanji:'Hiragino Mincho ProN','Yu Mincho','Noto Serif CJK JP','Noto Serif JP','MS Mincho',serif;
  --ease-strike:cubic-bezier(.1,.9,.2,1);
  --ease-brush:cubic-bezier(.65,0,.25,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#13181d; --surface:#1c232a; --fg:#e7ebef; --muted:#a9b5c0; --line:#2c353e;
    --slate:#3a4755; --slate-deep:#232b34; --link:#3de0bd;
    --card-shadow:0 1px 2px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#13181d; --surface:#1c232a; --fg:#e7ebef; --muted:#a9b5c0; --line:#2c353e;
  --slate:#3a4755; --slate-deep:#232b34; --link:#3de0bd;
  --card-shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:17px;line-height:1.65;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--slate-deep)}
h1,h2,h3,p,ul{margin:0}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance}
a{color:inherit}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(56px,8vw,104px)}
.kicker{font:700 13px/1.2 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--link)}
.h2{font-weight:800;font-size:clamp(28px,4.2vw,44px);line-height:1.08;text-transform:uppercase;letter-spacing:-.005em}
.rule{display:block;width:64px;height:5px;background:var(--teal);margin-top:18px;transform-origin:left}
.lead{max-width:60ch;color:var(--muted);margin-top:18px}
.on-dark .kicker{color:#7de8d0}
.on-dark .lead{color:#d7dee5}

/* belt progress bar: fills with each belt colour as the page scrolls */
.belt{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:5px;z-index:70;background:rgba(0,0,0,.25);pointer-events:none}
.belt i{position:absolute;inset:0;clip-path:inset(0 100% 0 0);background:linear-gradient(90deg,#f4f4f2 0 11.1%,#f3d02f 11.1% 22.2%,#f08a24 22.2% 33.3%,#d6382f 33.3% 44.4%,#2f9e44 44.4% 55.5%,#2d6cdf 55.5% 66.6%,#7b4bb3 66.6% 77.7%,#7a4a28 77.7% 88.8%,#0b0b0b 88.8% 100%)}

/* header */
.hdr{position:fixed;left:0;right:0;top:calc(5px + env(safe-area-inset-top,0px));z-index:50;color:#fff;transition:background .35s,box-shadow .35s}
.hdr.solid{background:var(--slate);box-shadow:0 2px 14px rgba(0,0,0,.25)}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{font:800 25px/1 var(--font-display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.logo span{color:var(--teal)}
#nav{display:flex;gap:6px 26px;margin-left:auto;font:600 14px/1 var(--font-display)}
#nav a{text-decoration:none;padding:10px 0;position:relative}
#nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-strike)}
#nav a:hover::after,#nav a:focus-visible::after{transform:scaleX(1)}
.burger{display:none;margin-left:auto;background:transparent;border:2px solid #fff;color:#fff;font:700 13px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;padding:11px 14px;border-radius:3px;cursor:pointer}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 28px;border-radius:3px;border:2px solid transparent;font:700 14px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease-strike),background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--teal);color:var(--teal-ink)}
.btn-main:hover{background:#12d4ac}
.btn-ghost{border-color:#fff;color:#fff}
.btn-ghost:hover{background:#fff;color:var(--slate-deep)}
.btn-sm{min-height:42px;padding:11px 18px;font-size:13px}
/* kiai: shockwave rings leave the button */
.kiai::before,.kiai::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--teal);opacity:0;pointer-events:none}
.kiai:hover::before,.kiai:focus-visible::before,.kiai.pulse::before{animation:kiai .95s ease-out}
.kiai:hover::after,.kiai:focus-visible::after,.kiai.pulse::after{animation:kiai .95s .2s ease-out}
@keyframes kiai{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55,2.4);opacity:0}}

/* hero */
.hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(560px,84vh,780px);overflow:hidden;color:#fff;background:var(--slate-deep)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:var(--pos,50% 50%);opacity:0;transition:opacity 1.5s ease;transform-origin:var(--ox,50%) var(--oy,50%)}
.slide.on{opacity:1}
.slide.on,.slide.was{animation:kb 9s ease-out forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,31,38,.62) 0%,rgba(25,31,38,.05) 30%,rgba(25,31,38,.5) 62%,rgba(25,31,38,.9) 100%)}
.hero-in{position:relative;width:100%;padding-top:150px;padding-bottom:104px}
.eyebrow{font:700 13px/1.4 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:#7de8d0}
.hero h1{margin-top:16px;font-weight:800;font-size:clamp(40px,7.4vw,96px);line-height:.98;text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.ln{display:block;overflow:hidden;padding-bottom:.07em}
.ln>span{display:block;transform:translateY(108%);animation:rise 1.15s var(--ease-strike) forwards}
.ln:nth-child(2)>span{animation-delay:.16s}
@keyframes rise{to{transform:none}}
.lede{margin-top:22px;max-width:520px;font-size:clamp(17px,2vw,20px);color:#eef2f5;opacity:0;animation:fade 1.2s .7s ease forwards}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;opacity:0;animation:fade 1.2s .95s ease forwards}
.eyebrow{opacity:0;animation:fade 1.2s .2s ease forwards}
@keyframes fade{to{opacity:1}}
.hero-ui{position:absolute;left:0;right:0;bottom:30px;display:flex;align-items:center;gap:18px}
.dots{display:flex;gap:10px;flex:1;max-width:420px}
.dot{flex:1;height:26px;padding:10px 0;background:transparent;border:0;cursor:pointer}
.dot span{display:block;height:4px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.dot i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.dot.on i{animation:fill 7s linear forwards}
.dot.done i{transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.hero.paused .dot i,.hero.paused .slide{animation-play-state:paused}
.pause{background:transparent;border:2px solid rgba(255,255,255,.7);color:#fff;font:700 12px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border-radius:3px;cursor:pointer}
.cue{margin-left:auto;display:flex;align-items:center;gap:12px;font:700 12px/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:#dfe6ec}
.cue b{position:relative;width:2px;height:44px;background:rgba(255,255,255,.3);overflow:hidden}
.cue b::after{content:"";position:absolute;left:0;top:0;width:100%;height:16px;background:var(--teal);animation:chop 1.8s var(--ease-strike) infinite}
@keyframes chop{0%{transform:translateY(-16px)}70%,100%{transform:translateY(46px)}}

/* facts strip */
.facts{background:var(--teal);color:var(--teal-ink)}
.facts ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px 28px;padding-block:26px}
.facts strong{display:block;font:800 26px/1.1 var(--font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.facts span{display:block;font-size:14.5px;font-weight:600;line-height:1.35}

/* class cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:44px}
.card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--card-shadow);overflow:hidden;transition:transform .24s var(--ease-strike),box-shadow .24s}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-strike)}
.card:hover{transform:translateY(-8px);box-shadow:0 14px 34px rgba(50,59,68,.22)}
.card:hover::after{transform:scaleX(1)}
.ph{aspect-ratio:4/3;max-width:100%;overflow:hidden;background:var(--slate)}
.ph div{width:100%;height:100%;background-size:cover;background-position:var(--pos,50% 50%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph div{transform:scale(1.07)}
.card-b{display:flex;flex-direction:column;gap:8px;padding:22px 22px 26px;flex:1}
.card h3{font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.01em}
.card p{color:var(--muted);font-size:15.5px;line-height:1.55}
.card a.more{margin-top:auto;padding-top:10px;font:700 14px/1.2 var(--font-display);color:var(--link);text-decoration:none}
.card a.more:hover{text-decoration:underline}

/* kata band */
.kata{position:relative;overflow:hidden;background:var(--slate-deep);color:#fff}
.kata-in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 56px;align-items:center}
.pillars{display:grid;gap:18px;margin-top:30px}
.pillars li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:baseline;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.pillars b{font:800 20px/1 var(--font-display);text-transform:uppercase;color:#7de8d0}
.pillars span{color:#d7dee5;font-size:15.5px;line-height:1.5}
.pillars em{display:block;font-style:normal;font-weight:700;color:#fff}
.embusen{width:100%;height:auto;display:block;overflow:visible}
.embusen .ghost{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 10}
.embusen .trail{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.embusen .runner{fill:#fff;filter:drop-shadow(0 0 8px var(--teal))}
.embusen text{font:700 15px var(--font-display);letter-spacing:.2em;text-transform:uppercase;fill:#cfd8df}
.kanji{position:absolute;right:-1%;bottom:-18%;font:900 clamp(220px,34vw,420px)/1 var(--font-kanji);color:#fff;opacity:.06;pointer-events:none;user-select:none;white-space:nowrap}

/* venues */
.venues{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:44px}
.venue{min-width:0;background:var(--slate);color:#fff;padding:26px 24px 28px;display:flex;flex-direction:column;gap:6px;border-top:5px solid var(--teal);transition:transform .24s var(--ease-strike)}
.venue:hover{transform:translateY(-6px)}
.venue .day{font:700 12.5px/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:#7de8d0}
.venue h3{font-weight:800;font-size:25px;line-height:1.15}
.venue .at{color:#dbe3ea;font-size:15px;line-height:1.45;margin-bottom:10px}
.venue li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.18);font-size:14.5px;line-height:1.4}
.venue li b{font-weight:700;font-variant-numeric:tabular-nums}
.note{margin-top:28px;color:var(--muted);font-size:15px}
.note a{color:var(--link);font-weight:700}

/* community photo band */
.moment{position:relative;overflow:hidden;color:#fff;background:var(--slate-deep)}
.par{position:absolute;inset:-16% 0;background-size:cover;background-position:50% 40%;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.moment .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,31,38,.9) 0%,rgba(25,31,38,.72) 42%,rgba(25,31,38,.1) 100%)}
.moment-in{position:relative;padding-block:clamp(72px,11vw,150px)}
.moment-in .h2{max-width:14ch;color:#fff}
.moment-in p{max-width:46ch;margin-top:20px;color:#eaeff3}
.moment-in .btn{margin-top:28px}

/* fit and tai chi */
.fit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 64px;align-items:center}
.fit-ph{position:relative;margin:34px 34px 34px 0}
.fit-ph .ph{aspect-ratio:1/1}
.enso{position:absolute;right:-34px;top:-34px;width:min(62%,260px);height:auto;overflow:visible;pointer-events:none}
.enso path{fill:none;stroke:var(--teal);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.enso path.b{stroke-width:11}
.enso path.t{stroke-width:3;stroke:#fff;opacity:.7}
.enso.arm path{stroke-dashoffset:100;transition:none}
.enso.arm.go path{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease-brush)}
.enso.arm.go path.t{transition-duration:2.1s;transition-delay:.12s}
.fit h3{font-weight:800;font-size:20px;text-transform:uppercase;margin-top:28px}
.fit p.t{color:var(--muted);margin-top:8px}
.price{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:20px}
.price div{border-left:5px solid var(--teal);padding:2px 0 2px 14px}
.price b{display:block;font:800 22px/1.15 var(--font-display)}
.price span{font-size:14px;color:var(--muted)}

/* quotes */
.quotes{background:var(--surface);border-block:1px solid var(--line)}
.q-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px}
.q{min-width:0;padding-top:20px;border-top:4px solid var(--teal)}
.q p{font:600 21px/1.4 var(--font-display);text-wrap:pretty}
.q cite{display:block;margin-top:14px;font-style:normal;color:var(--muted);font-size:14.5px}

/* join */
.join{position:relative;overflow:hidden;color:#fff;background:#1d4f8f;text-align:center}
.join .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,32,60,.55),rgba(14,32,60,.72))}
.join-in{position:relative;padding-block:clamp(72px,11vw,140px);display:flex;flex-direction:column;align-items:center}
.join .ring{position:relative;display:grid;place-items:center;width:min(100%,640px);padding:clamp(40px,7vw,84px) 20px}
.join .enso{right:auto;top:0;left:50%;transform:translateX(-50%);width:100%;height:100%}
.join .enso path.b{stroke:#fff;stroke-width:5}
.join .enso path.t{stroke:var(--teal);stroke-width:2}
.join h2{position:relative;font-weight:800;font-size:clamp(34px,6vw,68px);line-height:1;text-transform:uppercase;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.join p{position:relative;max-width:44ch;margin-top:16px;font-size:18px;color:#f0f4f8}
.join-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.contact{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:center;margin-top:32px;font-size:16px}
.contact b{font:700 12px/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:#7de8d0;display:block;margin-bottom:6px}
.contact span{user-select:all}

/* footer */
.foot{background:var(--slate-deep);color:#cdd6de;font-size:14.5px}
.foot-in{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;align-items:center;padding-block:34px}
.foot a{color:#fff}
.foot .logo{font-size:20px;color:#fff}

/* scroll-driven reveals: content stays readable, it only drifts into place */
@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 220px}
  .rule{animation:ruleDraw linear both;animation-timeline:view();animation-range:entry 10% entry 200px}
}
@keyframes rv{from{opacity:.55;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes ruleDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:900px){
  .burger{display:inline-flex}
  .hdr-in .btn-sm{display:none}
  #nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));background:var(--slate);box-shadow:0 12px 24px rgba(0,0,0,.3)}
  #nav.open{display:flex}
  #nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .kata-in,.fit{grid-template-columns:minmax(0,1fr)}
  .cue{display:none}
  .moment .shade{background:linear-gradient(180deg,rgba(25,31,38,.55),rgba(25,31,38,.9))}
  .fit-ph{margin:30px 30px 20px 0}
}
@media (max-width:520px){
  .pillars li{grid-template-columns:minmax(0,1fr)}
  .venue li{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ln>span{transform:none}
  .lede,.cta-row,.eyebrow{opacity:1}
  .dot.on i{transform:scaleX(1)}
  .par{transform:none}
}

body.admin-bar .belt{top:calc(32px + env(safe-area-inset-top,0px))}
body.admin-bar .hdr{top:calc(37px + env(safe-area-inset-top,0px))}
@media (max-width:782px){body.admin-bar .belt{top:calc(46px + env(safe-area-inset-top,0px))}body.admin-bar .hdr{top:calc(51px + env(safe-area-inset-top,0px))}}
@media (max-width:600px){body.admin-bar .belt{top:env(safe-area-inset-top,0px)}body.admin-bar .hdr{top:calc(5px + env(safe-area-inset-top,0px))}#wpadminbar{position:absolute}}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--teal);color:var(--teal-ink);padding:12px 18px;font:700 14px var(--font-display);border-radius:3px;text-decoration:none}
.skip:focus{top:12px}