/* =====================================================================
   Gracie Jiu-Jitsu Tokyo — design system
   Direction: cinematic black-and-white portraiture, Japanese minimalism,
   depth through quiet tonal layers ("a pond"). White and gray only.
   ===================================================================== */
:root{
  --ink:#141414; --ink-2:#3B3B3B; --muted:#6E6E6E; --faint:#9A9A9A;
  --paper:#FFFFFF; --gi:#F6F6F4; --gi-2:#ECECE9; --line:#E4E4E1; --line-2:#D6D6D2;
  --pond:#2F3D3B; --blue:var(--pond);            /* still-water accent: links, labels, hairlines */
  --serif:"Cormorant Garamond","Noto Serif JP",Georgia,"Times New Roman",serif;
  --sans:"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1240px; --text:720px;
  --ease:cubic-bezier(.22,.61,.36,1); --slow:1.1s;
  --b-white:#fff;--b-blue:#2B567E;--b-purple:#5E4A8C;--b-brown:#6B4A30;--b-black:#141414;--b-coral:#BF4A3C;
}
:root{color-scheme:only light}
html{background:var(--paper);scroll-behavior:smooth}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:400;letter-spacing:.005em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.serif{font-family:var(--serif)}
::selection{background:var(--gi-2)}

/* ---------- type ---------- */
h1,h2,h3,.hero h1{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(40px,6vw,88px);line-height:1.02}
h2{font-size:clamp(30px,3.8vw,52px);line-height:1.08}
h3{font-size:clamp(20px,2vw,26px);line-height:1.25}
em{font-style:italic}
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--pond);display:inline-block;opacity:.7}
.lede,.hero p.lede{font-family:var(--serif);font-size:clamp(19px,1.6vw,23px);line-height:1.55;color:var(--ink-2);font-weight:400}

/* ---------- scroll progress: a hairline of ink ---------- */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none}
.scrollbar i{display:block;height:100%;width:0;background:var(--ink);transition:width .1s linear}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(120%) blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px}
.brand img.logo{height:30px;width:auto;display:block}
.brand .bt{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.01em}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:22px;color:var(--ink);padding:10px 12px;margin:-10px -12px}

/* ---------- buttons: monochrome, quiet ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-trial{background:var(--ink);color:#fff;border-color:var(--ink);position:relative;overflow:hidden;box-shadow:0 18px 40px -20px rgba(0,0,0,.45)}
.btn-trial:hover{transform:translateY(-1px);box-shadow:0 22px 48px -20px rgba(0,0,0,.55)}
.btn-trial.big{font-size:13px;padding:18px 34px}
.btn-line,.btn-wa{border-radius:2px;text-transform:none;letter-spacing:.02em;font-size:15px}
.btn-line{background:#06C755;color:#06331A}.btn-line:hover{background:#05b34d;color:#06331A}
.btn-wa{background:#25D366;color:#0B3D1E}.btn-wa:hover{background:#1fbf5c;color:#0B3D1E}
.msg-ico{font-size:11px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.55);padding:3px 6px;border-radius:3px}

/* ---------- hero: full-bleed portrait, text rising out of white ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--gi)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media .slides{position:absolute;inset:0}
.hero-media .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  opacity:0;transition:opacity 2.4s var(--ease);filter:grayscale(1) contrast(1.05)}
.hero-media .slide.on{opacity:1;animation:drift 22s ease-in-out forwards}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.10)}}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.96) 100%),
             linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%)}
.hero-content{position:relative;z-index:2;padding-top:200px;padding-bottom:84px;max-width:var(--maxw);width:100%}
.hero h1{max-width:12ch;margin:22px 0 0}
.hero h1 em{font-style:italic;font-weight:300;color:var(--pond)}
.hero p.lede{max-width:52ch;margin:30px 0 40px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:13px;color:var(--muted);margin-top:26px;display:flex;align-items:center;gap:10px;letter-spacing:.01em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--pond);display:inline-block;opacity:.8}
.stat-row{display:flex;gap:44px;margin-top:42px;padding-top:26px;border-top:1px solid var(--line-2);max-width:640px}
.stat-row .s{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.stat-row .s b{display:block;font-family:var(--serif);font-size:26px;color:var(--ink);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.1;margin-bottom:6px}
.hdots{position:absolute;right:32px;bottom:40px;display:flex;gap:10px;z-index:3}
.hdots b{width:6px;height:6px;border-radius:50%;background:var(--faint);cursor:pointer;transition:all .4s var(--ease)}
.hdots b.on{background:var(--ink);width:26px;border-radius:3px}
/* the pond: faint concentric rings, barely there */
.ripple{position:absolute;right:-12vw;top:-10vh;width:70vmin;height:70vmin;z-index:1;pointer-events:none;
  fill:none;stroke:var(--ink);stroke-width:.6;opacity:.09;animation:ripple 14s ease-in-out infinite alternate}
@keyframes ripple{from{transform:scale(.96)}to{transform:scale(1.04)}}
.hero-photo,.floatbadge,.belt-strip{display:none}

/* ---------- credential strip ---------- */
.credstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.credstrip .wrap{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px}
.credstrip .c{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.credstrip svg{stroke:var(--pond)!important;opacity:.8}

/* ---------- sections: room to breathe ---------- */
section.blk{padding:128px 0}
.sec-head{max-width:760px;margin-bottom:64px}
.sec-head h2{margin:18px 0 0}
.sec-head p{color:var(--muted);font-size:17px;margin-top:20px;max-width:58ch;line-height:1.75}

/* ---------- benefits / quick links ---------- */
.benefits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.bcard{background:var(--paper);padding:36px 30px;transition:background .35s;display:flex;flex-direction:column}
.bcard:hover{background:var(--gi)}
.bcard .ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--pond);border:1px solid var(--line-2);border-radius:50%}
.bcard h3{font-size:21px;margin-bottom:10px}
.bcard p{font-size:15px;color:var(--muted);line-height:1.7;flex:1}
.bcard .more{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)!important;font-weight:500!important}

/* ---------- programs: editorial cards ---------- */
.prog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.prog{position:relative;background:transparent;border:0;border-radius:0;overflow:visible;display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.prog::before{display:none}
.prog .pphoto{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04);transition:filter .6s,transform .8s var(--ease)}
.prog:hover .pphoto{filter:grayscale(.85) contrast(1.06)}
.prog .pbody{padding:26px 0 0;display:flex;flex-direction:column;flex:1}
.prog .age{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.prog h3{font-size:clamp(24px,2.2vw,30px);margin:12px 0 12px}
.prog p{font-size:15.5px;color:var(--muted);line-height:1.7;flex:1}
.prog .more{margin-top:20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);display:inline-flex;gap:10px;align-items:center;transition:gap .3s}
.prog:hover .more{gap:16px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--paper);padding:38px 32px;position:relative}
.step b{display:block;font-family:var(--serif);font-size:44px;font-weight:300;color:var(--faint);line-height:1;margin-bottom:22px;width:auto;height:auto;background:none;border-radius:0}
.step h3{font-size:22px;margin-bottom:10px}
.step p{font-size:15px;color:var(--muted);line-height:1.7}

/* ---------- reassurance chips ---------- */
.assure{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:20px}
.assure span{font-size:12px;letter-spacing:.06em;color:var(--ink-2);background:transparent;border:1px solid var(--line-2);border-radius:2px;padding:7px 12px}

/* ---------- booking embed ---------- */
.book-wrap{position:relative;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff;padding:0;
  box-shadow:0 40px 80px -60px rgba(0,0,0,.35)}
.gymdesk-booking{min-height:360px;display:block}
.gymdesk-booking iframe{width:100%;border:0;display:block;background:#fff}
@media(max-width:720px){.gymdesk-booking{min-height:420px}}
.msg-cta{margin-top:26px}
.msg-cta-label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px;letter-spacing:.02em}
.msg-cta-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- gallery: a quiet contact sheet ---------- */
.gallery-band{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.gallery-band img{width:100%;height:190px;object-fit:cover;border-radius:2px;filter:grayscale(1) contrast(1.04);transition:filter .6s,transform .8s var(--ease)}
.gallery-band img:hover{filter:grayscale(.8);transform:translateY(-4px)}

/* ---------- singapore / split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .media img{width:100%;border-radius:2px;border:0;filter:grayscale(1) contrast(1.04)}
#singapore h2 em{color:var(--pond);font-weight:300}
#singapore p{font-size:16.5px}

/* ---------- articles ---------- */
.acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.acard{display:flex;flex-direction:column;background:var(--paper);padding:36px 30px;transition:background .35s}
.acard:hover{background:var(--gi)}
.acard .acat{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.acard h3,.acard h2{font-size:24px;margin:14px 0 12px;line-height:1.2}
.acard p{font-size:15px;color:var(--muted);line-height:1.7;flex:1}
.acard .more{margin-top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);display:inline-flex;gap:10px;transition:gap .3s}
.acard:hover .more{gap:16px}

/* ---------- final CTA: the pond, deepest layer ---------- */
.finalcta{position:relative;overflow:hidden;background:var(--gi-2);color:var(--ink);text-align:center}
.finalcta .ctabg{position:absolute;inset:0;z-index:0;overflow:hidden}
.finalcta .ctabg img{position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover;object-position:center 30%;filter:grayscale(1)}
.finalcta .ctabg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(236,236,233,.88),rgba(246,246,244,.94))}
.finalcta .wrap{position:relative;z-index:1;padding-top:40px;padding-bottom:40px}
.finalcta .belt-strip{display:none}
.finalcta h2{font-size:clamp(36px,5vw,68px);font-weight:300;margin-bottom:22px}
.finalcta h2 em{color:var(--pond)}
.finalcta p{color:var(--muted);font-size:17px;max-width:48ch;margin:0 auto 36px}
.finalcta .hero-cta{justify-content:center}
.finalcta .assure{justify-content:center}

/* ---------- footer: quiet ---------- */
footer.ft{background:var(--paper);color:var(--ink-2);padding:88px 0 36px;font-size:14px;border-top:1px solid var(--line)}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:48px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.ft h4,.ft .ft-h{font-family:var(--sans);color:var(--ink);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;font-weight:500}
.ft ul{list-style:none}.ft li{margin-bottom:10px}
.ft a{transition:color .25s}.ft a:hover{color:var(--ink)}
.ft-brand img.logo{height:44px;width:auto;display:block;opacity:.9;margin-bottom:18px}
.ft .blurb{color:var(--muted);font-family:var(--serif);font-size:17px;line-height:1.6;max-width:34ch}
.ft-soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ft-soc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.3s}
.ft-soc a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ft-soc .ft-line:hover{background:#06C755;border-color:#06C755;color:#06331A}
.ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;font-size:12px;color:var(--faint);letter-spacing:.04em}

/* ---------- floating buttons ---------- */
.fabs{position:fixed;right:18px;bottom:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fabs > *{pointer-events:auto}
.fab-msgs{display:flex;gap:10px}
.fab{position:static;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:600;transition:transform .3s var(--ease);box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.fab-wa{width:50px;height:50px;background:#25D366;flex:none}
.fab-line{width:50px;height:50px;background:#06C755;color:#06331A;font-size:11.5px;font-weight:800;letter-spacing:.02em;flex:none}
.fab-wa:hover,.fab-line:hover{transform:scale(1.06)}
.fab-book{background:var(--ink);color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:15px 22px;border-radius:2px;max-width:calc(100vw - 36px)}
.fab-book:hover{transform:translateY(-1px)}
body.page-book .fab-book{display:none}
@media(max-width:720px){
  .fabs{right:12px;bottom:12px;bottom:calc(12px + env(safe-area-inset-bottom));gap:9px}
  .fab-wa,.fab-line{width:46px;height:46px}.fab-line{font-size:11px}
  .fab-book{font-size:11px;padding:13px 16px}
}

/* ---------- sub-pages ---------- */
.page-banner{background:var(--paper);color:var(--ink);padding:120px 0 64px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.page-banner .eyebrow{color:var(--muted)}
.page-banner h1{margin:22px 0 0;max-width:16ch}
.page-banner h1 em{color:var(--pond);font-weight:300}
.page-banner p{color:var(--muted);font-size:18px;margin-top:22px;max-width:58ch;line-height:1.7;font-family:var(--serif);font-size:20px}
.breadcrumb{font-size:12px;letter-spacing:.06em;color:var(--faint);margin-bottom:10px}
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--ink)}
.page-banner .assure{margin-top:26px}
.prose{max-width:var(--text)}
.prose p{font-size:17px;color:var(--ink-2);line-height:1.85;margin-bottom:22px}
.prose h3,.prose h2{font-size:26px;margin:52px 0 14px;line-height:1.25}
.prose strong{color:var(--ink);font-weight:600}
.prose .lead{font-family:var(--serif);font-size:24px;line-height:1.5;color:var(--ink);margin-bottom:34px}

/* schedule */
.sched-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper);position:relative}
table.sched{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px}
table.sched th,table.sched td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
table.sched thead th{background:var(--gi);color:var(--ink);font-weight:500;letter-spacing:.14em;font-size:11px;text-transform:uppercase;position:sticky;top:0}
table.sched tbody th{background:var(--gi);font-weight:500;color:var(--ink-2);position:sticky;left:0;font-size:12px;letter-spacing:.06em}
table.sched td .cls{display:inline-block;border-radius:2px;padding:7px 10px;font-weight:500;font-size:12.5px;line-height:1.2;border:1px solid var(--line-2)}
.cls.adult{background:var(--paper);color:var(--ink)}
.cls.k1{background:var(--gi);color:var(--ink-2)}
.cls.k2{background:var(--gi-2);color:var(--ink-2)}
.cls .t{display:block;font-size:11px;font-weight:400;opacity:.85;margin-top:3px}
.sched-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.sched-legend i{display:inline-block;width:12px;height:12px;border:1px solid var(--line-2);border-radius:2px;margin-right:8px;vertical-align:-1px;background:transparent!important}
@media(max-width:720px){.sched-wrap::after{content:"swipe \2192";position:absolute;top:8px;right:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--paper);padding:3px 7px;border:1px solid var(--line);pointer-events:none}}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.price{background:var(--paper);padding:36px 30px;display:flex;flex-direction:column;position:relative;transition:background .35s}
.price:hover{background:var(--gi)}
.price.feat{background:var(--gi);border:0}
.price.feat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink)}
.price .tag{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.price h3{font-size:24px;margin:12px 0 6px}
.price .pp{font-family:var(--serif);font-size:38px;font-weight:300;letter-spacing:-.01em;margin-top:8px;color:var(--ink)}
.price .pp small{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.06em}
.price ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.price li{font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.price li::before{content:"";flex:none;width:14px;height:1px;background:var(--pond);margin-top:11px;opacity:.7}
.price-note{margin-top:26px;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 28px;letter-spacing:.02em}
.price-note b{color:var(--ink);font-weight:500}

/* instructors */
.inst-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.inst{background:transparent;border:0;border-radius:0;overflow:visible}
.inst img{width:100%;aspect-ratio:4/3.4;object-fit:cover;object-position:center 16%;filter:grayscale(1) contrast(1.05);transition:filter .6s}
.inst:hover img{filter:grayscale(.85)}
.inst .ib{padding:24px 0 0}
.inst .ib .role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.inst .ib h3{font-size:26px;margin:10px 0 12px}
.inst .ib p{font-size:15px;color:var(--muted);line-height:1.75}

/* heritage */
.heritage{background:var(--gi);color:var(--ink);position:relative;overflow:hidden}
.her-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.her-badge{aspect-ratio:1;max-width:360px;margin:0 auto;border-radius:50%;overflow:hidden;border:0;box-shadow:0 50px 90px -60px rgba(0,0,0,.4)}
.her-badge img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1) contrast(1.05)}
.heritage .eyebrow{color:var(--muted)}
.heritage h2{margin:16px 0 20px}
.heritage p{color:var(--ink-2);font-size:16.5px;line-height:1.8;max-width:56ch}
.heritage p+p{margin-top:16px}
.her-quote{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink);margin-top:26px;padding-left:22px;border-left:1px solid var(--pond);line-height:1.5}

/* faq */
.faq-cat{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:48px 0 14px}
.faq{border-top:1px solid var(--line);background:transparent;overflow:hidden}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 4px;font-family:var(--serif);font-weight:500;font-size:21px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:.3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:10px;height:1px}.faq summary .pm::after{width:1px;height:10px;transition:.3s}
.faq[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .a{padding:0 4px 26px;color:var(--muted);font-size:16px;line-height:1.8;max-width:64ch}
.faq .a p{margin-bottom:10px}

/* access / contact */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.loc{background:var(--paper);padding:40px 36px}
.loc .pin{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:10px}
.loc h3{font-size:28px;margin:14px 0 10px}
.loc address{font-style:normal;color:var(--ink-2);font-size:16px;line-height:1.7}
.loc .rows{margin-top:18px;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--ink-2)}
.loc .rows .r{display:flex;gap:12px;align-items:flex-start}
.loc .rows .r b{color:var(--ink);font-weight:500;min-width:64px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.loc a.maplink{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px}
.map-embed{margin-top:1px;border:1px solid var(--line);border-top:0;aspect-ratio:16/7;background:var(--gi)}
.map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.02)}
.contact-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.contact-cards.cc4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ccard{display:flex;gap:16px;align-items:flex-start;background:var(--paper);padding:26px 24px;transition:background .35s}
.ccard:hover{background:var(--gi)}
.ccard .ci{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--pond);background:transparent}
.ccard h4{font-size:15px;font-weight:500;margin-bottom:4px;letter-spacing:.02em}
.ccard a,.ccard span{font-size:13.5px;color:var(--muted)}

/* cta band */
.cta-band{background:var(--gi);color:var(--ink);border:0;padding:72px 48px;text-align:center;margin-top:8px}
.cta-band h2{font-size:clamp(30px,4vw,48px);font-weight:300;margin-bottom:14px}
.cta-band h2 em{color:var(--pond)}
.cta-band p{color:var(--muted);font-size:17px;max-width:48ch;margin:0 auto 30px;font-family:var(--serif);font-size:19px}
.cta-band .hero-cta{justify-content:center}

/* ---------- language toggle ---------- */
a.lang-toggle{text-decoration:none}
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.06em;border-radius:2px;padding:9px 14px;cursor:pointer;transition:border-color .25s,color .25s}
.lang-toggle:hover{border-color:var(--ink)}
.lang-mobile{display:none;margin-right:6px}

/* ---------- accessibility ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;font-size:13px;letter-spacing:.06em}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------- motion: slow, like water ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-parallax]{will-change:transform}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* ---------- japanese typography ---------- */
html[lang="ja"] body{font-feature-settings:"palt" 1;line-break:strict;word-break:normal;overflow-wrap:anywhere;line-height:1.9}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .hero h1{font-family:"Noto Serif JP",var(--serif);font-weight:400;letter-spacing:.02em;line-height:1.35}
html[lang="ja"] .hero h1{line-height:1.3;font-size:clamp(34px,5vw,72px)}
html[lang="ja"] h1 em,html[lang="ja"] h2 em{font-style:normal;font-weight:300}
html[lang="ja"] .lede,html[lang="ja"] .hero p.lede,html[lang="ja"] .prose .lead,html[lang="ja"] .her-quote,html[lang="ja"] .ft .blurb,html[lang="ja"] .cta-band p,html[lang="ja"] .page-banner p{font-family:"Noto Serif JP",serif;font-style:normal}
html[lang="ja"] .eyebrow,html[lang="ja"] .btn,html[lang="ja"] .nav-links a{letter-spacing:.12em}

/* ---------- responsive ---------- */
@media(max-width:980px){
  section.blk{padding:96px 0}
  .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inst-grid{grid-template-columns:1fr}
  .her-grid,.split,.loc-grid{grid-template-columns:1fr;gap:40px}
  .ft-grid{grid-template-columns:1fr 1fr}
  .acards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .hero-content{padding-top:150px}
}
@media(max-width:1180px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:22px 32px 26px;gap:20px}
  .nav-toggle{display:block}
  .lang-mobile{display:inline-flex}
  .nav-links .lang-toggle{display:none}
}
@media(max-width:720px){
  body{font-size:15.5px}
  .wrap{padding:0 20px}
  section.blk{padding:72px 0}
  .sec-head{margin-bottom:40px}
  .hero{min-height:88vh}
  .hero-content{padding-top:120px;padding-bottom:64px}
  .hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.35) 30%,rgba(255,255,255,.9) 62%,#fff 100%)}
  .hero h1{max-width:none}
  .hero-cta .btn{width:100%}
  .stat-row{gap:24px;flex-wrap:wrap}
  .hdots{right:20px;bottom:24px}
  .ripple{width:90vmin;height:90vmin;right:-30vw;top:-8vh}
  .prog-grid,.acards,.price-grid{grid-template-columns:minmax(0,1fr)}
  .gallery-band{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-band img{height:150px}
  .page-banner{padding:80px 0 48px}
  .cta-band{padding:52px 24px}
  .contact-cards.cc4{grid-template-columns:minmax(0,1fr)}
  .msg-cta-btns .btn{width:100%}
  .nav-inner{height:66px}.nav-links.open{top:66px}
}
@media(max-width:420px){
  .benefits-grid,.contact-cards,.gallery-band{grid-template-columns:minmax(0,1fr)}
  .wrap{padding:0 16px}
  .fab-book{font-size:10.5px;padding:12px 14px}
}

/* ---------- fixes: keep nav items on one line; calmer mobile hero ---------- */
.brand,.brand .bt,.nav-links a,.lang-toggle,.btn,.fab-book{white-space:nowrap}
.nav-inner{gap:24px}
.nav-links{gap:24px;flex-shrink:0}
.nav-links a{font-size:12px;letter-spacing:.1em}
.nav-links .btn{padding:12px 20px;font-size:11.5px}
.brand{flex-shrink:0}
@media(max-width:1200px){.nav-links{gap:18px}.nav-links a{font-size:11.5px;letter-spacing:.08em}}
@media(max-width:1060px){.nav-links a{letter-spacing:.06em}.nav-links{gap:14px}}
/* desktop: stronger left veil so the lede stays legible over the portrait */
.hero-veil{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,.6) 60%,rgba(255,255,255,.97) 100%),
                      linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.35) 36%,rgba(255,255,255,0) 60%)}
@media(max-width:720px){
  .stat-row{display:none}
  .hero{min-height:86vh}
  .hero-content{padding-top:150px;padding-bottom:56px}
  .hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.25) 28%,rgba(255,255,255,.86) 52%,#fff 100%)}
  .hero .eyebrow{font-size:10px}
  .hero p.lede{font-size:18px;margin:22px 0 28px}
}

@media(max-width:1180px){.lang-mobile{display:inline-flex}.nav-links .lang-toggle{display:none}.nav-toggle{display:block}}

.hero .eyebrow,.hero h1,.hero p.lede{text-shadow:0 0 22px rgba(255,255,255,.85),0 0 6px rgba(255,255,255,.6)}

/* specificity fixes + text that was too light */
.nav-links a.btn-trial{color:#fff}
.nav-links a.btn-trial:hover{color:#fff}
.ft-bottom{color:var(--muted)}
.breadcrumb{color:var(--muted)}
.finalcta p{color:var(--ink-2)}
.hdots b{background:#b5b5b5}
.step b{color:#8a8a8a}

/* =====================================================================
   Welcome screen — the dojo at night, then "Enter".
   Hidden unless the <head> script adds .splash-on to <html>.
   ===================================================================== */
.splash{display:none}
html.splash-on,html.splash-on body{overflow:hidden}
html.splash-on .splash{display:flex}
.splash{position:fixed;inset:0;z-index:1000;background:#0E0F0F;color:#fff;
  flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;overflow:hidden;
  transition:opacity 1.1s var(--ease) .2s,visibility 0s linear 1.3s}
.splash.leaving{opacity:0;visibility:hidden;pointer-events:none}
.splash:focus{outline:none}
.splash-media{position:absolute;inset:0;display:block;overflow:hidden}
.splash-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  opacity:0;transform-origin:center 30%;transition:opacity 1.8s var(--ease),transform 1.4s var(--ease)}
.splash-media img.loaded{opacity:1;animation:splashdrift 28s ease-out forwards}
.splash.leaving .splash-media img{transform:scale(1.08)}
@keyframes splashdrift{from{transform:scale(1)}to{transform:scale(1.05)}}
.splash-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,15,15,.25) 0%,rgba(14,15,15,0) 28%,rgba(14,15,15,.5) 58%,rgba(14,15,15,.93) 100%)}
.splash-inner{position:relative;z-index:2;width:100%;max-width:680px;
  padding:0 24px calc(52px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
.splash-brand{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.splash-title{display:flex;flex-direction:column;align-items:center;margin-top:16px;color:#fff}
.splash-title .w-en{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(58px,8.4vw,116px);line-height:1;letter-spacing:.01em}
.splash-title .w-ja{font-family:"Noto Serif JP",serif;font-weight:300;font-size:clamp(19px,2vw,26px);line-height:1.4;letter-spacing:.5em;padding-left:.5em;margin-top:16px}
html[lang="ja"] .splash-title .w-ja{order:-1;font-size:clamp(40px,6vw,78px);letter-spacing:.24em;padding-left:.24em;margin:0 0 14px}
html[lang="ja"] .splash-title .w-en{font-size:clamp(24px,2.6vw,34px);font-style:italic;letter-spacing:.04em}
.splash-tag{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:26px;padding-top:24px;position:relative;color:rgba(255,255,255,.8)}
.splash-tag::before{content:"";position:absolute;top:0;left:50%;width:40px;height:1px;background:rgba(255,255,255,.45);transform:translateX(-50%)}
.splash-tag .t-en{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:19px;line-height:1.4}
.splash-tag .t-ja{font-family:"Noto Serif JP",serif;font-weight:300;font-size:13px;letter-spacing:.12em;line-height:1.6;font-feature-settings:"palt"}
html[lang="ja"] .splash-tag .t-ja{order:-1;font-size:15px}
html[lang="ja"] .splash-tag .t-en{font-size:17px}
.splash-enter{margin-top:34px;min-width:210px;min-height:52px;padding:16px 44px;border:1px solid rgba(255,255,255,.9);border-radius:2px;
  background:transparent;color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
  cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.splash-enter:hover{background:#fff;color:var(--ink)}
.splash-enter:focus-visible,.splash .lang-splash:focus-visible{outline:2px solid #fff;outline-offset:5px}
.splash-lang{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.7);font-family:var(--sans)}
.splash-lang .cur{padding:10px 4px}
.splash-lang .sep{opacity:.5}
.splash .lang-splash{display:inline-flex;border:0;padding:10px 4px;background:none;color:#fff;font-size:12.5px;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px}
.splash .lang-splash:hover{text-decoration-color:#fff}
.splash-ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,255,255,.55);border-radius:50%;
  pointer-events:none;z-index:1;animation:splashring 1.5s var(--ease) forwards;opacity:0}
@keyframes splashring{0%{transform:scale(.4);opacity:.8}100%{transform:scale(30);opacity:0}}

/* portrait screens (phones, tablets upright): photo on top, words below */
@media(max-aspect-ratio:1/1){
  .splash-media{inset:0 0 auto 0;height:min(125vw,64vh)}
  .splash-media img{object-position:center top;transform-origin:center top}
  @keyframes splashdrift{from{transform:scale(1)}to{transform:scale(1.025)}}
  .splash-media::after{background:linear-gradient(180deg,rgba(14,15,15,0) 0%,rgba(14,15,15,0) 58%,rgba(14,15,15,.5) 82%,#0E0F0F 100%)}
  .splash-inner{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
}
/* short screens (small phones, phones held sideways) */
@media(max-height:700px){
  .splash-title .w-en{font-size:clamp(48px,7vw,80px)}
  .splash-tag{margin-top:18px;padding-top:18px}
  .splash-enter{margin-top:24px}
  .splash-lang{margin-top:12px}
}
@media(max-height:520px){
  .splash-tag{display:none}
  .splash-title{margin-top:8px}
  .splash-title .w-en{font-size:44px}
  html[lang="ja"] .splash-title .w-ja{font-size:34px;margin-bottom:6px}
  .splash-title .w-ja{margin-top:8px}
  .splash-enter{margin-top:18px;min-height:46px;padding:12px 36px}
  .splash-inner{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .splash,.splash-media img{transition:none}
  .splash-media img.loaded{animation:none}
}
.hero:focus,.hero:focus-visible{outline:none}

/* homepage Singapore block */
.sg-h2{margin:18px 0 22px}
.sg-h2 em{font-style:italic;font-weight:300;color:var(--pond)}
.sg-p{color:var(--ink-2);font-size:17px;line-height:1.75;max-width:56ch}
.sg-p+.sg-p{margin-top:14px}
html[lang="ja"] .sg-h2 em{font-style:normal}
/* very narrow phones (320–400px): keep logo, name, language and menu on one line */
@media(max-width:400px){
  .brand{gap:8px;min-width:0;flex-shrink:1}
  .brand img.logo{height:26px}
  .brand .bt{font-size:15.5px;overflow:hidden;text-overflow:ellipsis}
  .lang-mobile{padding:7px 9px;font-size:11.5px;margin-right:2px}
  .nav-inner{gap:8px}
}
/* soft pool of shadow behind the welcome words, so they stay calm over the lit doorway */
.splash-inner::before{content:"";position:absolute;left:50%;top:54%;width:min(860px,120%);height:112%;
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,15,15,.55),rgba(14,15,15,.28) 60%,rgba(14,15,15,0))}
@media(min-aspect-ratio:1/1){
  .splash-media::after{background:linear-gradient(180deg,rgba(14,15,15,0) 0%,rgba(14,15,15,0) 42%,rgba(14,15,15,.42) 62%,rgba(14,15,15,.9) 100%)}
  .splash-title .w-en{font-size:clamp(54px,6.6vw,100px)}
  .splash-tag{margin-top:20px;padding-top:20px}
  .splash-enter{margin-top:28px}
}

/* brighter welcome photo: the sign already names the dojo, so the small label goes;
   a soft shadow keeps the words crisp over the lit doorway */
.splash-brand{display:none}
.splash-title{margin-top:0}
.splash-title,.splash-tag,.splash-lang{text-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 22px rgba(0,0,0,.45)}
@media(min-aspect-ratio:1/1){
  .splash-inner::before{height:540px;background:radial-gradient(closest-side,rgba(14,15,15,.62),rgba(14,15,15,.32) 60%,rgba(14,15,15,0))}
}
/* short upright phones (e.g. iPhone SE): shorter photo so the words sit below the doorway */
@media(max-aspect-ratio:1/1) and (max-height:700px){
  .splash-media{height:min(125vw,46vh)}
}

/* final mobile polish: nothing under ~11px, and small inline links get a comfortable tap area */
@media(max-width:720px){
  .hero .eyebrow{font-size:11.5px;letter-spacing:.16em}
  .fab-book{font-size:11.5px}
}
a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding:4px 0;min-height:24px}
a[href="articles"]{display:inline-block;padding:6px 0}

main{display:block}
#main:focus{outline:none}

/* =====================================================================
   October revisions
   ===================================================================== */
/* headings a little smaller, closer to the body text */
h1{font-size:clamp(34px,4.8vw,66px)}
h2{font-size:clamp(27px,3vw,40px)}
.finalcta h2{font-size:clamp(30px,4vw,52px)}
.cta-band h2{font-size:clamp(26px,3vw,38px)}

/* welcome screen: the photo and a single Enter button */
.splash-inner{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.splash-inner::before{width:min(520px,110%)!important;height:240px!important;top:50%!important}
.splash-enter{margin-top:0;min-width:220px}
@media(max-aspect-ratio:1/1){
  .splash{justify-content:center}
  .splash-media{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;max-height:74vh;flex:none}
  .splash-media::after{background:linear-gradient(180deg,rgba(14,15,15,0) 0%,rgba(14,15,15,0) 70%,#0E0F0F 100%)}
  .splash-inner{padding:34px 24px calc(34px + env(safe-area-inset-bottom))}
  .splash-inner::before{display:none}
}
@media(max-aspect-ratio:1/1) and (max-height:700px){
  .splash-media{height:auto;max-height:70vh}
}

/* programme photos: the whole picture, on a quiet mount */
.prog .pphoto{aspect-ratio:1/1;object-fit:contain;background:var(--gi-2)}
@media(min-width:1181px){.prog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px}}

/* membership */
.page-banner p.banner-strong{font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--ink);max-width:62ch}
.page-banner p.banner-strong strong{font-weight:600}
.incl-all{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);max-width:780px}
.incl-all .incl-label{width:100%;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.incl-all .incl-item{font-family:var(--serif);font-size:clamp(20px,2vw,24px);color:var(--ink);line-height:1.4}
.incl-all .incl-item+.incl-item::before{content:"·";margin:0 14px;color:var(--muted)}
html[lang="ja"] .incl-all .incl-item{font-family:"Noto Serif JP",var(--serif);font-size:clamp(17px,1.7vw,20px)}
.price .price-name{font-size:24px;margin:12px 0 6px;line-height:1.2}
.price-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){.price-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.price-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.price-grid.five{grid-template-columns:minmax(0,1fr)}}
.join{margin-top:56px}
.join h2{font-size:26px;line-height:1.25;margin-bottom:22px}
.join-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.join-step{background:var(--paper);padding:28px 26px}
.join-step h3{font-size:21px;margin-bottom:14px}
.join-step ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.join-step li{font-size:14.5px;line-height:1.65;color:var(--ink-2);padding-left:16px;position:relative}
.join-step li::before{content:"";position:absolute;left:0;top:.82em;width:7px;height:1px;background:var(--pond)}
@media(max-width:1180px){.join-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.join-grid{grid-template-columns:minmax(0,1fr)}}
.price .pp,.price .price-name,.price li,.incl-all{font-variant-numeric:lining-nums}
.price-name .nw{white-space:nowrap}
@media(min-aspect-ratio:1/1){
  .splash-media::after{background:linear-gradient(180deg,rgba(14,15,15,0) 0%,rgba(14,15,15,0) 55%,rgba(14,15,15,.38) 78%,rgba(14,15,15,.82) 100%)}
}
@media(max-width:720px){
  .incl-all .incl-item{width:100%;padding-left:16px;position:relative}
  .incl-all .incl-item::before,.incl-all .incl-item+.incl-item::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:1px;margin:0;background:var(--pond)}
}
/* headings re-levelled for a clean outline; they keep their previous look */
h2.hx3{font-size:clamp(20px,2vw,26px);line-height:1.25}
.prose h2.hx3{font-size:26px}
.loc h2.hx3{font-size:28px;margin:14px 0 10px}
.inst .ib h2.hx3{font-size:26px;margin:10px 0 12px}
h3.hx4{font-family:var(--sans);font-size:15px;font-weight:500;margin-bottom:4px;letter-spacing:.02em;line-height:1.4;color:var(--ink)}
html[lang="ja"] h3.hx4{font-family:var(--sans);letter-spacing:.02em;line-height:1.4}
/* Japanese membership cards: wider cards so sentences don't break mid-word; ages as a smaller second line */
html[lang="ja"] .price-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){html[lang="ja"] .price-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){html[lang="ja"] .price-grid.five{grid-template-columns:minmax(0,1fr)}}
html[lang="ja"] .price .price-name{font-size:22px;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
html[lang="ja"] .price-name .nw{font-size:15px;letter-spacing:.04em;color:var(--ink-2)}
html[lang="ja"] .price li{font-size:14.5px;line-height:1.7}
/* 5 Japanese cards: 3 on top, 2 wider below, no empty cell */
html[lang="ja"] .price-grid.five{grid-template-columns:repeat(6,minmax(0,1fr))}
html[lang="ja"] .price-grid.five .price{grid-column:span 2}
html[lang="ja"] .price-grid.five .price:nth-child(n+4){grid-column:span 3}
@media(max-width:980px){
  html[lang="ja"] .price-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[lang="ja"] .price-grid.five .price,html[lang="ja"] .price-grid.five .price:nth-child(n+4){grid-column:auto}
  html[lang="ja"] .price-grid.five .price:last-child{grid-column:1/-1}
}
@media(max-width:720px){
  html[lang="ja"] .price-grid.five{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   Hero: words on the left, a framed photograph on the right
   (replaces the full-bleed background photo; Oct 12)
   ===================================================================== */
.hero{min-height:0;display:block;overflow:hidden;background:var(--gi)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(40px,5.5vw,88px);align-items:center;padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(72px,10vh,112px)}
.hero .hero-content{padding:0;max-width:none;width:auto}
.hero .eyebrow,.hero h1,.hero p.lede{text-shadow:none}
.hero h1{max-width:13ch}
.hero p.lede{max-width:46ch}
.hero-frame{position:relative;justify-self:end;width:100%;max-width:min(480px,calc((100vh - 230px) * .8))}
.hero-frame::before{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1px solid var(--line-2);pointer-events:none}
.hero-frame .hero-media{position:relative;inset:auto;z-index:1;aspect-ratio:4/5;overflow:hidden;background:var(--gi-2);
  box-shadow:0 30px 60px -34px rgba(20,20,20,.5)}
.hero-frame .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-frame .slide.on{animation:frame-drift 18s ease-in-out forwards}
@keyframes frame-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
.hero-frame .hdots{position:absolute;left:0;right:0;bottom:-38px;justify-content:center}
.hero .ripple{right:-16vw;top:-14vh;width:72vmin;height:72vmin;opacity:.07}
html[lang="ja"] .hero h1{font-size:clamp(32px,3.6vw,52px);max-width:none}

@media(max-width:1060px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px}
}
/* phones and small tablets: photo first, shorter, then the words */
@media(max-width:860px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:54px;padding-top:28px;padding-bottom:56px}
  .hero-frame{order:-1;justify-self:stretch;width:auto;max-width:none;margin-left:12px}
  .hero-frame::before{inset:-12px 12px 12px -12px}
  .hero-frame .hero-media{aspect-ratio:4/3}
  .hero-frame picture .slide{object-position:50% 25%}   /* phone crop hero-1-m.jpg */
  .hero-frame .slide:nth-child(2){object-position:50% 16%}
  .hero-frame .slide:nth-child(3){object-position:50% 28%}
  .hero-frame .hdots{bottom:-30px}
  .hero h1{max-width:none}
  html[lang="ja"] .hero h1{font-size:clamp(30px,7.4vw,40px)}
}
@media(max-width:420px){
  .hero-frame .hero-media{aspect-ratio:3/2}
}
/* Japanese hero: break only at punctuation, never mid-word (no lone 「を。」 or 「ル」) */
html[lang="ja"] .hero h1,html[lang="ja"] .hero .eyebrow{word-break:keep-all;overflow-wrap:anywhere}
/* always two lines (はじめよう、/柔術という道を。) whichever font is showing, so nothing jumps when the web font arrives */
html[lang="ja"] .hero h1{max-width:9em}
/* slides 2 and 3 download only after the page has loaded (main.js removes .later), so photo 1 loads first */
.hero-frame .slide.later{display:none}