/* ==========================================================================
   WSKF Australia — sections.css (Version 2)
   Every section is composed individually. No shared "card" component.
   ========================================================================== */

/* ============ 01 HERO — one dominant photographic environment ============ */
.hero{
  position:relative; background:var(--ink); color:var(--paper);
  min-height:clamp(500px,74svh,700px);
  display:flex; align-items:flex-end; overflow:hidden;
}
/* Hero is composed in the V2.4 block at the end of this file. */

/* ============ 02 ENQUIRY — horizontal booking band on the hero seam ====== */
.enq{ position:relative; z-index:5; margin-top:0;
  padding-top:clamp(1.5rem,1.4rem + 1.7vw,4rem);
  /* The scrolling brand band must never look glued to the form border. */
  padding-bottom:clamp(1.25rem,1rem + .9vw,2.5rem); }
.enq__card{ background:var(--paper); border:1px solid rgba(0,0,0,.09); border-radius:4px; box-shadow:0 30px 70px rgba(0,0,0,.30); overflow:hidden; }
.enq__head{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.5rem; padding:1.1rem clamp(1.15rem,2.4vw,2.1rem); background:var(--ink); color:var(--paper); }
.enq__head h2{ font-size:clamp(1.4rem,2.3vw,1.95rem); color:var(--white); }
.enq__head .cap{ color:var(--on-ink); }
.steps{ display:flex; align-items:center; gap:.55rem; margin-left:auto; font-family:var(--display); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink); }
.steps span{ display:flex; align-items:center; gap:.45rem; }
.steps b{ width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--ink-line); font-size:.85rem; font-weight:700; }
.steps .on b{ background:var(--red); border-color:var(--red); color:#fff; }
.steps .on{ color:var(--paper); }
.steps .bar{ width:26px; height:1px; background:var(--ink-line); }
.enq__body{ padding:clamp(1.15rem,2.4vw,2rem); }

.fstep[hidden]{ display:none !important; }
.frow{ display:grid; gap:1.05rem 1.35rem; align-items:end; }
@media (min-width:900px){ .frow--1{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto; } }
@media (min-width:820px){ .frow--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1120px){ .frow--2{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.f-all{ grid-column:1/-1; }

.field{ display:grid; gap:.35rem; min-width:0; }
.field > label,.field__legend{ font-family:var(--display); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.field__hint{ font-size:.82rem; line-height:1.45; color:var(--muted); }
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%; min-height:52px; padding:.65rem .85rem; background:var(--white);
  border:1px solid rgba(0,0,0,.2); border-bottom:2px solid rgba(0,0,0,.45);
  border-radius:2px; font-family:var(--body); font-size:1rem; color:var(--ink);
}
.field textarea{ min-height:92px; resize:vertical; line-height:1.5; }
.field select{ appearance:none; padding-right:2.3rem; font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:0; }
.field__sel{ position:relative; }
.field__sel .i{ position:absolute; right:.9rem; top:50%; transform:translateY(-50%); width:.85rem; height:.85rem; pointer-events:none; color:var(--muted); }
.field input:focus,.field select:focus,.field textarea:focus{ border-bottom-color:var(--red); }
.field.err input,.field.err select,.field.err textarea{ border-color:var(--red); }
.field__error{ display:none; font-size:.85rem; color:var(--red-deep); font-weight:600; align-items:center; gap:.35rem; }
.field.err .field__error{ display:flex; }

.choices{ display:flex; flex-wrap:wrap; gap:.45rem; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.choice span{ display:inline-flex; align-items:center; gap:.4rem; min-height:46px; padding:.4rem .95rem; border:1px solid rgba(0,0,0,.22); background:var(--white); font-family:var(--display); font-weight:600; font-size:.86rem; letter-spacing:.01em; cursor:pointer; border-radius:2px; transition:background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease); }
.choice span:hover{ border-color:var(--ink); }
.choice input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.choice input:focus-visible + span{ outline:3px solid var(--red); outline-offset:3px; }
.choice input:checked + span .tick{ display:block; }
.choice .tick{ display:none; width:.85em; height:.85em; }

.checkline{ display:flex; gap:.65rem; align-items:flex-start; }
.checkline input{ width:22px; height:22px; margin-top:3px; flex:none; accent-color:var(--red); }
.checkline label{ font-size:.9rem; line-height:1.5; color:var(--muted); font-family:var(--body); text-transform:none; letter-spacing:0; font-weight:400; }

.enq__foot{ margin-top:1.35rem; padding-top:1.1rem; border-top:1px solid rgba(162,161,161,.6); }
.enq__footrow{ display:flex; flex-wrap:wrap; gap:.85rem 1.3rem; align-items:center; }
.enq__demo{ font-size:.84rem; line-height:1.45; color:var(--muted); max-width:44ch; border-left:2px solid var(--red); padding-left:.75rem; }
.enq__back{ margin-right:auto; }

.form-summary{ display:none; margin-bottom:1.1rem; padding:.9rem 1.05rem; background:#FDEBEC; border-left:3px solid var(--red); }
.form-summary.on{ display:block; }
.form-summary h3{ font-size:1.1rem; margin-bottom:.3rem; }
.form-summary ul{ margin:0; padding:0; list-style:none; display:grid; gap:.2rem; }
.form-summary a{ color:var(--red-deep); font-size:.92rem; }
.form-done{ display:grid; gap:.9rem; justify-items:start; }
.form-done__tick{ width:48px; height:48px; display:grid; place-items:center; background:var(--ink); color:var(--paper); border-radius:50%; }
.form-done__tick .i{ width:1.5rem; height:1.5rem; }
.form-done ul{ margin:0; padding:0; list-style:none; display:grid; gap:.3rem; font-size:.95rem; color:var(--muted); }
.form-done ul b{ color:var(--ink); font-family:var(--display); letter-spacing:.11em; text-transform:uppercase; }
.spin{ width:1.05em; height:1.05em; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.nojs-note{ display:none; }
html:not(.js) .nojs-note{ display:block; margin-top:1rem; padding:.85rem 1rem; background:var(--white); border:1px solid rgba(0,0,0,.18); font-size:.9rem; }
html:not(.js) #step-2{ display:block !important; }
html:not(.js) #foot-step-2{ display:flex !important; }
html:not(.js) .js-only{ display:none !important; }
html:not(.js) #step-indicator{ display:none; }

/* ============ 03 BRAND TRANSITION — scroll-shifted, not a marquee ======== */
.band{ background:var(--ink); color:var(--paper); overflow:hidden; padding-block:clamp(1.5rem,3vw,2.4rem); border-block:1px solid var(--ink-line); }
.band__track{ display:flex; align-items:center; gap:clamp(1.6rem,3.4vw,3.4rem); white-space:nowrap; will-change:transform; padding-inline:var(--gutter); }
.band__word{ font-family:var(--display-brush); font-weight:700; font-size:clamp(1.35rem,3.4vw,2.9rem); line-height:1; letter-spacing:-.02em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(162,161,161,.75); }
.band__word.hot{ color:var(--paper); -webkit-text-stroke:0; }
.band__rule{ width:1px; height:clamp(1.6rem,3.4vw,2.8rem); background:var(--red); flex:none; }

/* ============ 06 ON THE MAT — one bounded editorial feature module =======
   V2.10 replaces the full-bleed V2.9 treatment. That version let the copy and
   the clip drift to opposite ends of the viewport with a dead black field in
   between. The section is now a single centred, bounded module: a red upper
   plane carrying the Japanese conveyor, a black lower field grounding the
   copy, and the vertical training clip crossing the two. Height is driven by
   content, never by the viewport. Section-scoped: nothing here is global. */
.reel{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  padding-block:clamp(1.9rem,4vw,3.4rem);
}
.reel .c-page{ position:relative; z-index:2; }

.reel__module{
  --pad:clamp(1.15rem,3.2vw,2.9rem);      /* module inset */
  --plane:clamp(104px,15vw,168px);        /* height of the red upper plane */
  position:relative; isolation:isolate; min-width:0;
  width:100%; max-width:1000px; margin-inline:auto;
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,.09);
  border-radius:6px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}

/* The red plane is part of the module, so it can never widen the document. */
.reel__plane{
  position:absolute; left:0; right:0; top:0; height:var(--plane);
  background:var(--red); z-index:0; overflow:hidden;
  display:flex; align-items:center; pointer-events:none;
}

.reel__inner{
  position:relative; z-index:2; display:grid; padding:var(--pad); min-width:0;
}

/* One editorial stack on a single alignment edge, starting just below the
   red plane so the copy always sits on the black field. */
.reel__copy{
  display:grid; justify-items:start; align-content:start; gap:0;
  text-align:left; min-width:0;
  margin-top:calc(var(--plane) + 1.35rem - var(--pad));
}
.reel__chapter{ color:var(--white); }
.reel__copy .chapno{ color:var(--red); }
.mk--reel{ color:#fff; margin:.55rem 0 0; }
.reel__title{ color:var(--white); max-width:12ch; margin-top:.4rem; }
.reel__lede{
  color:var(--on-ink); font-size:clamp(1rem,1.25vw,1.09rem); line-height:1.6;
  max-width:42ch; margin-top:1.3rem;
}
.reel__kind{ color:var(--on-ink); margin-top:1rem; }
.reel__cta{ margin-top:1.15rem; }

.reel__stage{
  position:relative; width:min(82%,320px); aspect-ratio:9/16;
  margin-inline:auto; margin-top:clamp(1.5rem,5vw,2.1rem);
  border-radius:4px; overflow:hidden; background:var(--ink);
  box-shadow:0 22px 55px rgba(0,0,0,.5);
}
.reel__stage video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel__btn{
  position:absolute; right:10px; bottom:10px; width:48px; height:48px; min-width:44px; min-height:44px;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(0,0,0,.72); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.reel__btn:hover{ background:rgba(0,0,0,.88); }
.reel__btn .i{ width:1.15rem; height:1.15rem; }

/* ---- Laptop and up: left editorial column, right integrated clip ------- */
@media (min-width:760px){
  .reel__inner{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:clamp(2.6rem,4.2vw,4.25rem);
    align-items:stretch;
  }
  /* The stack is centred in the black field it sits on, so the column does
     not run out halfway up the clip and leave a dead foot of black. */
  .reel__copy{
    margin-top:0; align-content:center;
    padding-top:calc(var(--plane) + 1.6rem - var(--pad));
  }
  .reel__title{ font-size:clamp(2.15rem,3.4vw,3.1rem); }
  .reel__lede{ max-width:44ch; }
  /* The clip starts inside the red plane and runs down into the black field,
     so the two planes are bridged rather than stacked. */
  .reel__stage{
    width:clamp(285px,23.5vw,330px); margin:0; align-self:start;
    box-shadow:0 30px 70px rgba(0,0,0,.6);
  }
}

/* Between tablet and full laptop the page gutter alone would leave the module
   wide and the copy short, reopening a gap in the middle. Bound it tighter. */
@media (min-width:760px) and (max-width:1199px){
  .reel__module{ max-width:880px; }
}

/* ---- Phones: one clean vertical story, video last and centred ---------- */
@media (max-width:759px){
  .reel__module{ max-width:560px; }
  .reel__title{ font-size:clamp(1.95rem,8.6vw,2.45rem); max-width:14ch; }
  .reel__lede{ font-size:1rem; max-width:38ch; }
  .reel__stage{ width:min(84%,330px); }
}
@media (max-width:430px){
  .reel__module{ --plane:clamp(88px,24vw,104px); }
  .reel__stage{ width:min(86%,300px); }
}

/* ============ 07 PRINCIPLES — typographic list, photo responds =========== */
.prin{ position:relative; background:var(--paper); padding-block:clamp(2.4rem,4.4vw,4.75rem); overflow:hidden; }
.prin__grid{ display:grid; gap:clamp(1.6rem,3vw,3rem); }
@media (min-width:1000px){ .prin__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.62fr); align-items:start; } }
.prin__list{ display:grid; border-top:1px solid var(--grey-line); }
.prin__row{ border-bottom:1px solid var(--grey-line); }
.prin__link{
  display:flex; align-items:baseline; gap:1rem; padding:clamp(.7rem,1.5vw,1.05rem) .2rem;
  text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.75rem);
  line-height:1.15; text-transform:uppercase; letter-spacing:-.005em;
  transition:color .25s var(--ease), padding-left .3s var(--ease);
}
.prin__link .idx{ font-size:.68rem; color:var(--muted); font-weight:600; letter-spacing:.1em; flex:none; width:2.1rem; transition:color .25s var(--ease); }
.prin__row:hover .prin__link,.prin__link:focus-visible{ color:var(--red); padding-left:.8rem; }
.prin__row:hover .idx{ color:var(--red); }
.prin__aside{ position:relative; }
@media (min-width:1000px){ .prin__aside{ position:sticky; top:calc(var(--header-h) + 46px); } }
.prin__photo{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:2px; background:var(--paper-2); }
.prin__photo img{ width:100%; height:100%; object-fit:cover; }
.prin__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0) 55%); }
.prin__cap{ position:absolute; z-index:2; left:1.1rem; right:1.1rem; bottom:1.1rem; color:var(--paper); }
.prin__cap strong{ display:block; font-family:var(--display); font-weight:700; font-size:1.1rem; text-transform:uppercase; letter-spacing:.02em; }
.prin__cap span{ font-size:.86rem; color:rgba(244,243,241,.82); }

/* ============ 09 CLUBS — state-first discovery ========================== */
.clubs{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); padding-block:clamp(2.4rem,4.4vw,4.75rem); }
.clubs__grid{ display:grid; gap:clamp(1.6rem,3vw,3.2rem); }
@media (min-width:1000px){ .clubs__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; } }
.states{ display:grid; border-top:1px solid var(--ink-line); }
.state{
  display:flex; align-items:baseline; gap:1rem; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--ink-line); cursor:pointer;
  padding:clamp(.6rem,1.4vw,.95rem) .2rem; color:var(--on-ink);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2.05rem); line-height:1.1; letter-spacing:-.02em;
  transition:color .25s var(--ease), padding-left .3s var(--ease);
}
.state small{ font-size:.42em; letter-spacing:.12em; font-weight:500; color:var(--on-ink); }
.state:hover{ color:var(--paper); padding-left:.7rem; }
.state[aria-selected="true"]{ color:var(--white); padding-left:.7rem; }
.state[aria-selected="true"] small{ color:var(--red); }
.clubs__panel{ min-width:0; }
.clubs__count{ font-size:.85rem; color:var(--on-ink); margin-bottom:1rem; }
.clublist{ display:grid; border-top:1px solid var(--ink-line); }
.club{
  position:relative; display:grid; gap:.35rem; align-content:start; justify-items:start;
  padding:clamp(1rem,2vw,1.4rem) 0 clamp(1rem,2vw,1.4rem) 1.15rem;
  border-bottom:1px solid var(--ink-line); background:none;
}
.club::before{
  content:""; position:absolute; left:0; top:clamp(1rem,2vw,1.4rem); bottom:clamp(1rem,2vw,1.4rem);
  width:2px; background:var(--red); transform:scaleY(.34); transform-origin:top;
  transition:transform .35s var(--ease);
}
.club:hover::before,.club:focus-within::before{ transform:scaleY(1); }
.club[hidden]{ display:none !important; }
.club h3{ font-size:clamp(1.02rem,1.5vw,1.22rem); letter-spacing:-.015em; color:var(--white); }
.club h3 a{ text-decoration:none; }
.club h3 a:hover{ color:#FF6B70; }
.club p{ font-size:.88rem; color:var(--on-ink); }
.club__sub{ display:grid; margin-top:.2rem; }
.club__sub a{ font-size:.87rem; color:var(--on-ink); text-decoration:none; padding:.45rem .5rem; margin-left:-.5rem; min-height:44px; display:flex; align-items:center; }
.club__sub a:hover{ color:var(--white); background:rgba(244,243,241,.07); }
.club__act{ justify-self:start; align-self:start; margin-top:.55rem; }
.chip{ display:inline-flex; align-items:center; min-height:44px; padding:.4rem .95rem; border:1px solid var(--ink-line); text-decoration:none; font-family:var(--display); font-weight:600; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--paper); border-radius:2px; }
.chip:hover{ border-color:var(--paper); color:#FF6B70; }
.chip--ink{ color:var(--ink); border-color:rgba(0,0,0,.25); }
.chip--ink:hover{ border-color:var(--ink); color:var(--red); }

/* ============ 10 JAPAN — heritage ======================================= */
.japan{ position:relative; background:var(--ink); color:var(--paper); padding-block:clamp(2.4rem,4.4vw,4.75rem); overflow:hidden; }


.japan__grid{ position:relative; display:grid; gap:clamp(1.8rem,3.5vw,3.2rem); align-items:center; }
@media (min-width:960px){ .japan__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); } }
.japan__title{ display:flex; align-items:center; gap:clamp(.8rem,2vw,1.6rem); flex-wrap:wrap; }
.japan__title span{ color:var(--white); }
.japan__title .swap{ color:var(--red); font-size:.7em; }
.japan__rule{ width:64px; height:2px; background:var(--red); margin-block:clamp(1rem,2vw,1.5rem); }
.japan__links{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.japan__media{ position:relative; }
.japan__media .media{ aspect-ratio:4/5; border-radius:2px; }
.japan__media figcaption{ font-size:.8rem; color:var(--on-ink); margin-top:.55rem; }

/* ============ 14 PRE-FOOTER CTA ======================================== */
.finale{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); }
.finale__bg{ position:absolute; inset:0; }
.finale__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.finale__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(96deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.35) 100%); }
.finale__inner{ position:relative; z-index:2; padding-block:clamp(3.5rem,9vw,7rem); display:grid; gap:1.4rem; justify-items:start; }
.finale h2{ color:var(--white); max-width:14ch; }
.finale__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.5rem; }
.finale__phone{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,2.2vw,1.75rem); text-decoration:none; color:var(--white); font-variant-numeric:lining-nums tabular-nums; margin-top:.6rem; }
.finale__phone:hover{ color:#FF6B70; }
.finale__phone .i{ width:.78em; height:.78em; color:var(--red); }

/* ============ 15 FOOTER — concluding visual moment ====================== */
.footer{ position:relative; background:var(--ink); color:var(--paper); overflow:hidden; padding-top:clamp(1.6rem,2.6vw,2.2rem); }
.footer__wordmark{
  position:absolute; left:0; right:0; bottom:clamp(52px,7vw,86px); pointer-events:none;
  font-family:var(--display); font-weight:700; font-size:clamp(4rem,16.5vw,17rem); line-height:.8;
  text-transform:uppercase; letter-spacing:-.03em; white-space:nowrap; text-align:center;
  color:transparent; -webkit-text-stroke:1px rgba(244,243,241,.09);
}
.footer__inner{ position:relative; z-index:2; }
.footer__top{ display:grid; gap:1.6rem; }
.footer__brand{ display:grid; gap:.7rem; justify-items:start; }
.footer__brand .brand__mark{ width:56px; height:56px; }
.footer__brand p{ color:var(--on-ink); font-size:.9rem; }
.footer__addr{ font-style:normal; color:var(--on-ink); font-size:.9rem; line-height:1.6; }
.footer__phone{ font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--paper); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; font-variant-numeric:lining-nums tabular-nums; }
.footer__phone .i{ width:.72em; height:.72em; color:var(--red); }
.footer__col{ min-width:0; }
.footer__title{ overflow-wrap:normal; word-break:keep-all; font-family:var(--display); font-weight:700; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--red); padding-bottom:.5rem; margin-bottom:.35rem; border-bottom:1px solid var(--ink-line); }
.footer__links{ display:grid; }
.footer__links a{ font-size:.88rem; line-height:1.35; text-decoration:none; color:var(--paper); padding:.6rem .4rem; margin-left:-.4rem; border-radius:2px; min-height:44px; display:flex; align-items:center; }
.footer__links a:hover{ color:#FF6B70; background:rgba(244,243,241,.06); }
.footer__links--sub{ margin-left:.5rem; padding-left:.7rem; border-left:1px solid var(--ink-line); }
.footer__links--sub a{ font-size:.84rem; color:var(--on-ink); }
.footer__sub{ font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink); margin:.6rem 0 .1rem; }
.footer__strip{ position:relative; z-index:2; margin-top:clamp(1rem,2vw,1.5rem); background:var(--red); color:#fff; }
.footer__stripin{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; padding-block:.6rem; font-size:.8rem; }
.footer__social{ display:flex; gap:.5rem; margin-left:auto; }
.footer__social a{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.3rem .95rem; border:1px solid rgba(255,255,255,.5); text-decoration:none; color:#fff; font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; border-radius:2px; }
.footer__social a:hover{ background:#fff; color:var(--red); }

/* ==========================================================================
   ART-DIRECTION PASS — oversized typographic moments, mixed geometry,
   section continuity, photographic footer rail and brand finale.
   ========================================================================== */

/* ---- Stories: oversized background word, photograph crossing it --------- */
.stories{ position:relative; }
.stories__inner{ position:relative; z-index:2; }

/* ---- Japan: circular photograph as the rising-sun motif ---------------- */
.japan__media .media{ aspect-ratio:4/5; border-radius:14px; }
.japan__media{ position:relative; }

.japan__media figcaption{ margin-top:.7rem; }

/* ---- Continuity: let chapters lead into one another -------------------- */
.reel{ margin-top:-1px; }
.ages{ padding-bottom:clamp(2.6rem,4.6vw,5rem); }
.why{ position:relative; }
.why::before{
  content:""; position:absolute; left:0; right:0; top:0; height:clamp(40px,7vw,90px);
  background:var(--paper); clip-path:polygon(0 0,100% 0,100% 0,0 100%);
}
.prin{ margin-top:-1px; }
.journey{ position:relative; }
/* Community collage runs under the FAQ chapter edge */
.comm{ padding-bottom:clamp(2.6rem,4.4vw,4.75rem); }

/* ---- Oversized cropped chapter word for Principles --------------------- */
.prin__grid{ position:relative; z-index:2; }

/* ---- Photographic rail before the footer ------------------------------- */
.rail{ background:var(--ink); padding-top:clamp(1.2rem,2vw,1.6rem); overflow:hidden; }
.rail__head{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:baseline; margin-bottom:clamp(.7rem,1.4vw,1.1rem); }
.rail__strip{ display:flex; gap:clamp(.5rem,1vw,.9rem); align-items:flex-end; width:max-content; will-change:transform; }
.rail__strip img{ height:clamp(105px,11.5vw,165px); width:auto; object-fit:cover; flex:none; }
.rail__strip img:nth-child(3n){ border-radius:20px; }
.rail__strip img:nth-child(4n){ align-self:flex-start; }
.rail__strip img:nth-child(5n){ height:clamp(122px,13.5vw,195px); }

/* ---- Footer: structured grid with rules, then the brand finale --------- */

.footer__top{ padding-bottom:clamp(1.2rem,2.2vw,1.8rem); border-bottom:1px solid var(--ink-line); }

.brandfinale{ position:relative; overflow:hidden; padding-block:clamp(1rem,1.8vw,1.5rem) clamp(.4rem,1vw,.8rem); }
.brandfinale__clip{ overflow:hidden; }
.brandfinale__word{
  display:flex; align-items:center; justify-content:center; gap:clamp(.6rem,1.6vw,1.4rem);
  font-family:var(--display); font-weight:700; line-height:.78;
  font-size:clamp(1.5rem,7.6vw,7.2rem); letter-spacing:-.05em; text-transform:uppercase;
  color:var(--paper); white-space:nowrap;
  transform:translateY(14%);
  transition:transform 1s var(--ease);
}
.brandfinale.in .brandfinale__word{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .brandfinale__word{ transform:none; } }
.brandfinale__mark{ width:clamp(34px,7vw,96px); height:clamp(34px,7vw,96px); border-radius:50%; background:#fff; padding:2px; flex:none; }
.brandfinale__mark img{ width:100%; height:100%; border-radius:50%; }
.footer__wordmark{ display:none; }

/* Footer brand column: keep content grouped at the top and stop the CTA
   wrapping into a tall block in the narrow column. */
.footer__brand{ align-content:start; }
.footer__brand .btn{ white-space:nowrap; }
.footer__top{ align-items:start; }

/* Brand finale: give the glyphs room inside the reveal mask so nothing clips. */
.brandfinale__clip{ padding-block:.06em .1em; }
.brandfinale__word{ line-height:.86; }

/* ---- 200% zoom / narrow reflow: the oversized decorative words are nowrap,
   so keep them inside their own section box rather than the page. ---- */
.stories, .prin, .rail, .footer, .brandfinale, .band{ overflow-x:clip; }
@supports not (overflow-x:clip){ .stories,.prin,.rail,.footer,.brandfinale,.band{ overflow-x:hidden; } }
/* Clubs state tabs: small screens get a horizontal scroller, not a squeeze. */
@media (max-width:620px){
  .state{ font-size:clamp(1.15rem,5.5vw,1.6rem); }
  .state small{ display:block; font-size:.5em; margin-top:.15rem; }
  .state{ flex-direction:column; align-items:flex-start; gap:0; }
}
/* Journey on mobile: vertical path with the rule running down the numbers. */
@media (max-width:899px){
  .journey__track{ position:relative; }
  .journey__track::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--grey-line); }
  .jstep{ position:relative; padding-left:2rem; }
  .jstep__dot{ position:absolute; left:0; top:9px; margin:0; }
  .jstep__n{ margin-top:0; }
}
/* Why WSKF on mobile: normal flow, all statements open, image above. */
@media (max-width:999px){
  .why__stage{ aspect-ratio:16/10; }
  .why__item p{ max-height:none; opacity:1; }
  .why__item h3{ color:var(--white); }
}

/* Club and principle links: comfortable targets at every width. */
.club h3 a{ display:inline-flex; align-items:center; min-height:44px; }
.prin__link{ min-height:52px; }
@media (max-width:620px){ .prin__link{ padding-block:.85rem; } }

/* Phone links are primary actions: give them a full 44px target. */
.finale__phone, .footer__phone{ min-height:48px; }

/* ---- Footer groups: full columns on desktop, disclosures on mobile ------ */
.footer__disc{
  display:block; width:100%; text-align:left; background:none; cursor:default;
  overflow-wrap:normal; word-break:keep-all;
  font-family:var(--display); font-weight:700; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red);
  border:0; border-bottom:1px solid var(--ink-line);
  padding:0 0 .5rem; margin-bottom:.35rem;
  cursor:default;
}
/* Desktop headings are inert labels, not controls, so they need no hit area;
   mobile turns them into real 52px disclosure buttons below. */
@media (min-width:900px){ .footer__disc{ pointer-events:none; } }
.footer__disc .i{ display:none; }
@media (max-width:899px){
  .footer__disc{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    cursor:pointer; min-height:52px; padding:.9rem 0; margin-bottom:0;
  }
  .footer__disc .i{ display:block; width:.85rem; height:.85rem; color:var(--paper); transition:transform .25s var(--ease); }
  .footer__disc[aria-expanded="true"] .i{ transform:rotate(45deg); }
  .footer__group[hidden]{ display:none !important; }
  .footer__group{ padding-bottom:1rem; }
    .footer__col{ padding-inline:0; border-left:0; }
}

/* ---- Footer link density: tight on desktop, 44px targets kept on mobile -- */
@media (min-width:900px){
  .footer__links a{ min-height:32px; padding:.34rem .4rem; font-size:.82rem; line-height:1.25; }
  .footer__links--sub a{ font-size:.78rem; padding-block:.3rem; min-height:30px; }
  /* Clubs and More carry ~20 legacy destinations each. Flowing the whole
     group in two columns roughly halves the footer's height without hiding
     or removing a single link. */
  /* Clubs and More carry ~20 legacy destinations each. They get double-width
     tracks so long club names stay on one or two lines instead of wrapping to
     four. No link is hidden or removed. */
  .footer__disc{ padding-bottom:.35rem; margin-bottom:.25rem; }
}


/* ---- Ages: shorter crops on phones so the section is not 3700px tall ---- */
@media (max-width:640px){
  .age--b .age__media,.age--c .age__media,.age--d .age__media,
  .age--e .age__media,.age--f .age__media{ aspect-ratio:4/3; }
  .age--a .age__media{ aspect-ratio:3/2; }
  .ages__grid{ gap:1.5rem; }
}

/* ---- Japanese heritage watermark: 松濤館, from the WSKF logo ------------- */
.jp-mark{
  position:absolute; pointer-events:none; user-select:none;
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",
              "Source Han Serif JP","MS PMincho",serif;
  font-weight:400; line-height:.94; letter-spacing:.02em;
}
.japan .jp-mark{
  left:clamp(1rem,6vw,7rem); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:clamp(6rem,13vw,11rem);
  color:rgba(255,255,255,.055);
  z-index:0;
}
.japan__grid{ z-index:1; }
@media (max-width:900px){
  .japan .jp-mark{ left:50%; transform:translate(-50%,-50%); font-size:clamp(9rem,42vw,15rem); color:rgba(255,255,255,.05); }
}

/* Footer nav: give the two link-heavy legacy columns double width so their
   internal two-column flow has room to work instead of wrapping every name. */
/* 900-1119px: the two-column grid gives ~500px tracks, so internal
   two-column flow still has plenty of room. */

/* ==========================================================================
   MOKUTON — small expressive accent only. Never a headline, never background.
   Three controlled moments: hero eyebrow, video title accent, Japan accent.
   Montserrat carries every major heading.
   ========================================================================== */
.mk{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  letter-spacing:.01em; white-space:nowrap; line-height:1;
  display:inline-block;
}
.mk--hero{ font-size:clamp(1.5rem,2.9vw,2.7rem); color:var(--red); }
.mk--reel{ font-size:clamp(1.7rem,2.85vw,2.55rem); color:#fff; display:block; margin:.55rem 0 0; }
.mk--japan{ font-size:clamp(1.5rem,2.6vw,2.4rem); color:var(--red); display:block; margin-top:.9rem; }

/* Giant background words revert to Montserrat outline; Mokuton is never huge. */
.band__word{ font-family:var(--display); }
.band__word.mk{ font-family:var(--display); white-space:normal; display:inline; }

/* ==========================================================================
   V2.3 — rebuilt sections
   ========================================================================== */

/* ---- Hero trust strip: supplied icons, no dots ------------------------- */

/* ---- 04 AGES — navigator: one shared stage, six ruled links ------------ */
.ages{ background:var(--paper); padding-block:clamp(2.2rem,4vw,4.2rem); }
.ages__head{ display:grid; gap:.9rem; margin-bottom:clamp(1.5rem,2.6vw,2.2rem); }
@media (min-width:960px){ .ages__head{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:end; gap:2.5rem; } }
.ages__nav{ display:grid; gap:1.4rem; }
@media (min-width:900px){ .ages__nav{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:stretch; gap:clamp(1.5rem,3vw,3rem); } }
.agestage{ position:relative; overflow:hidden; border-radius:14px; background:var(--paper-2); aspect-ratio:4/3; }
@media (min-width:900px){ .agestage{ aspect-ratio:auto; min-height:100%; } }
.agestage__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s var(--ease); }
.agestage__img.on{ opacity:1; }
html:not(.js) .agestage__img{ opacity:0; }
html:not(.js) .agestage__img:first-child{ opacity:1; }
.agerows{ display:grid; align-content:center; border-top:1px solid var(--grey-line); margin:0; padding:0; list-style:none; }
.agerow{ border-bottom:1px solid var(--grey-line); }
.agerow__link{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline;
  column-gap:clamp(.9rem,2vw,1.6rem); row-gap:.2rem; padding:clamp(.75rem,1.5vw,1.05rem) .2rem;
  text-decoration:none; color:var(--ink); min-height:56px;
  transition:padding-left .3s var(--ease), color .25s var(--ease); }
.agerow__link:hover,.agerow__link:focus-visible{ padding-left:.7rem; color:var(--red); }
.agerow__n{ font-size:clamp(1.15rem,2vw,1.65rem); color:var(--red); letter-spacing:-.03em; min-width:4.4em; }
.agerow__name{ font-family:var(--display); font-weight:700; font-size:clamp(.82rem,1.2vw,.95rem);
  letter-spacing:.15em; text-transform:uppercase; }
.agerow__desc{ grid-column:2; font-size:.86rem; line-height:1.45; color:var(--muted); }
@media (max-width:520px){ .agerow__n{ min-width:0; } .agerow__link{ grid-template-columns:1fr; } .agerow__desc{ grid-column:1; } }
.ages__foot{ margin-top:clamp(1.4rem,2.6vw,2rem); display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; }

/* ---- 05 WHY — stable editorial, no sticky, no scroll state ------------- */
.why{ background:var(--ink); color:var(--paper); padding-block:clamp(2.2rem,4vw,4.2rem); }
.why::before{ display:none; }
.why__grid{ display:grid; gap:clamp(1.6rem,3vw,3rem); align-items:start; }
@media (min-width:1000px){ .why__grid{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); } }
.why__media{ position:relative; margin:0; border-radius:14px; overflow:hidden; }
.why__media img{ width:100%; height:auto; display:block; }
.why__stat{ position:absolute; left:0; bottom:0; background:var(--red); color:#fff; padding:.85rem 1.05rem; max-width:80%; }
.why__stat b{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1; display:block; }
.why__stat span{ display:block; font-size:.76rem; line-height:1.4; margin-top:.3rem; color:rgba(255,255,255,.92); }
.why__body h2{ color:var(--white); margin:.6rem 0 clamp(1.1rem,2vw,1.7rem); }
.why__list{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--ink-line); }
.why__item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.3rem 1.1rem;
  padding-block:clamp(.9rem,1.8vw,1.35rem); border-bottom:1px solid var(--ink-line); }
.why__item .idx{ font-size:clamp(.95rem,1.3vw,1.15rem); color:var(--red); padding-top:.15rem; }
.why__item h3{ font-size:clamp(1rem,1.5vw,1.28rem); color:var(--white); }
.why__item p{ font-size:.9rem; margin-top:.35rem; color:var(--on-ink); max-height:none; opacity:1; }

/* ---- 06 ON THE MAT — faint Japanese conveyor inside the red plane ------ */
.reel__jp{ display:flex; width:max-content; }
.reel__jp span{
  flex:none;
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  font-size:clamp(3rem,7.6vw,6.5rem); line-height:1; color:rgba(255,255,255,.085);
  white-space:nowrap; animation:jpDrift 46s linear infinite;
}
@keyframes jpDrift{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }
@media (prefers-reduced-motion:reduce){ .reel__jp span{ animation:none; } }

/* ---- 08 JOURNEY — one clean horizontal route --------------------------- */
.journey{ background:var(--white); padding-block:clamp(2.2rem,4vw,4.2rem); overflow:hidden; }
.journey__head{ display:grid; gap:.8rem; margin-bottom:clamp(1.4rem,2.4vw,2rem); max-width:44ch; }
.journey__track{ position:relative; display:grid; gap:1.4rem; margin:0 0 clamp(1.4rem,2.6vw,2rem); padding:0; list-style:none; }
.jstep{ position:relative; display:grid; gap:.3rem; align-content:start; min-width:0; }
.jstep__dot{ position:absolute; z-index:2; width:11px; height:11px; border-radius:50%;
  background:var(--red); border:0; }
.jstep__n{ font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.05em; color:var(--red);
  font-variant-numeric:lining-nums tabular-nums; }
.jstep h3{ font-size:clamp(.88rem,1.2vw,1rem); letter-spacing:.1em; text-transform:uppercase; }
.jstep p{ font-size:.87rem; color:var(--muted); max-width:32ch; }
@media (min-width:900px){
  .journey__track{ grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(1.2rem,2.4vw,2.4rem); }
  .journey__track::before{ content:""; position:absolute; left:0; right:0; top:5px; height:1px; background:var(--grey-line); }
  .journey__track::after{ content:""; position:absolute; left:0; top:5px; height:1px; background:var(--red);
    width:var(--j-w,100%); transition:width .7s var(--ease); }
  .jstep{ padding-top:2rem; }
  .jstep__dot{ top:0; left:0; }
}
@media (max-width:899px){
  .journey__track{ padding-left:1.9rem; gap:1.2rem; }
  .journey__track::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--grey-line); }
  .jstep__dot{ left:-1.9rem; top:7px; }
}
.journey__photo{ border-radius:14px; overflow:hidden; margin-bottom:clamp(1.2rem,2.4vw,1.8rem); }
.journey__photo img{ width:100%; height:auto; display:block; }
@media (max-width:899px){ .journey__photo{ margin-left:1.9rem; } }

/* ---- 09 CLUBS — horizontal state directory ---------------------------- */
.clubs{ padding-block:clamp(2.2rem,4vw,4.2rem); }
/* ONE rule system. A single quiet baseline; the active tab is a short red
   segment sitting on that baseline, never a second full-width line. */
.states{ display:flex; gap:clamp(.6rem,1.6vw,1.6rem); overflow-x:auto; scroll-snap-type:x mandatory;
  border-top:0; border-bottom:1px solid var(--ink-line);
  margin-bottom:clamp(1rem,1.8vw,1.4rem); padding-block:0; scrollbar-width:none; }
.states::-webkit-scrollbar{ display:none; }
.state{ scroll-snap-align:start; flex:0 0 auto; position:relative; width:auto;
  background:none; border:0; cursor:pointer; text-align:center;
  padding:.85rem .15rem .8rem; color:var(--on-ink);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(.95rem,1.35vw,1.14rem); line-height:1.1; letter-spacing:.06em; min-height:52px;
  transition:color .25s var(--ease); }
.state::after{ content:""; position:absolute; left:.15rem; right:.15rem; bottom:-1px;
  height:2px; background:var(--red); transform:scaleX(0); transform-origin:left center;
  transition:transform .28s var(--ease); }
.state:hover{ color:var(--paper); }
.state[aria-selected="true"]{ color:var(--white); }
.state[aria-selected="true"]::after{ transform:scaleX(1); }
.clubs__count{ font-family:var(--display); font-weight:600; font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink);
  margin-bottom:clamp(1rem,2vw,1.5rem); }
.clubs__count b{ color:var(--white); font-weight:700; }
.clublist{ display:grid; border-top:1px solid var(--ink-line); }
@media (min-width:820px){ .clublist{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,3vw,3rem); align-items:start; } }
.clubs__intl{ margin-top:clamp(1.4rem,2.6vw,2.2rem); padding-top:clamp(1rem,2vw,1.5rem);
  border-top:1px solid var(--ink-line); }
.clubs__intl .cap{ margin-bottom:clamp(.7rem,1.4vw,1rem); }
.destgrid{ display:grid; gap:1px; background:var(--ink-line);
  grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--ink-line); }
@media (min-width:700px){ .destgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1500px){ .destgrid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.dest{ display:flex; align-items:center; min-height:62px; padding:.85rem 1rem;
  background:var(--ink); color:var(--paper); text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.3;
  transition:background-color .22s var(--ease), color .22s var(--ease); }
.dest:hover{ background:#141414; color:#FF6B70; }
@media (max-width:420px){ .destgrid{ grid-template-columns:minmax(0,1fr); } }

/* ---- 11 STORIES — one featured story at a time ------------------------- */

/* ---- 12 COMMUNITY — equal 2x2 tiles ----------------------------------- */
.comm{ background:var(--white); padding-block:clamp(2.2rem,4vw,4.2rem); }
.comm__grid{ display:grid; gap:1rem; }
@media (min-width:760px){ .comm__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.comm__cell{ position:relative; display:block; overflow:hidden; border-radius:14px;
  aspect-ratio:16/10; text-decoration:none; color:var(--paper); background:var(--ink-2); }
.comm__cell img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.comm__cell:hover img{ transform:scale(1.04); }
.comm__cell--red::before{ content:""; position:absolute; inset:0; background:var(--red); opacity:.72; z-index:1; }
.comm__label{ position:absolute; z-index:2; inset:auto 0 0 0; padding:2.4rem 1.1rem 1rem;
  background:linear-gradient(to top,rgba(0,0,0,.9) 22%,rgba(0,0,0,0));
  font-family:var(--display); font-weight:700; font-size:.86rem; letter-spacing:.08em;
  text-transform:uppercase; line-height:1.15; }
.comm__cell--red .comm__label{ background:none; }
.comm__label small{ display:block; margin-top:.25rem; font-family:var(--body); font-weight:400;
  font-size:.78rem; letter-spacing:0; text-transform:none; color:rgba(244,243,241,.85); }

/* ---- 13 FAQ — photograph balances the accordion ----------------------- */

/* ---- Photo rail: one consistent geometry ------------------------------ */
.rail__strip img{ height:clamp(110px,12vw,170px); border-radius:14px; }
.rail__strip img:nth-child(3n),.rail__strip img:nth-child(5n){ border-radius:14px; height:clamp(110px,12vw,170px); }
.rail__strip img:nth-child(4n){ align-self:auto; }

/* Stories controls (restored after the section rebuild) */
.stories__head{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:end;
  justify-content:space-between; margin-bottom:clamp(1.2rem,2.2vw,1.8rem); position:relative; z-index:2; }
.stories__nav{ display:flex; align-items:center; gap:.6rem; }
.stories__count{ font-family:var(--display); font-weight:700; letter-spacing:.14em;
  font-size:.8rem; color:var(--muted); min-width:4.5rem; }
.rbtn{ width:48px; height:48px; min-width:48px; display:grid; place-items:center;
  border:1px solid var(--grey-line); background:var(--white); cursor:pointer;
  color:var(--ink); border-radius:50%; }
.rbtn:hover{ border-color:var(--ink); }
.rbtn .i{ width:1.1rem; height:1.1rem; }

/* ==========================================================================
   V2.4 — centred hero, premium Parent Stories, rebuilt FAQ, four-column
   footer, and one restrained contemporary Japanese editorial system.
   ========================================================================== */

/* ---- Anchor clearance for the fixed floating navbar -------------------- */
section[id], main[id]{ scroll-margin-top:calc(var(--header-h) + 30px); }

/* ---- Japanese system A: one thin red rule marks every chapter --------- */
/* One repeated editorial signature: a small red chapter index, then the
   chapter label. The decorative red leader rule was removed in V2.8 — the
   number, the typography and the whitespace carry the hierarchy instead. */
.cap--red{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.chapno{ color:var(--red); font-weight:700; letter-spacing:.14em;
  font-variant-numeric:lining-nums tabular-nums; }
.chapno::after{ content:" /"; color:var(--grey-line); font-weight:600; }

/* ---- Japanese system C: vertical micro-typography --------------------- */
.vlabel{
  position:absolute; top:50%; transform:translateY(-50%); right:max(.9rem,calc((100% - var(--w-page))/2 + .5rem)); z-index:1;
  writing-mode:vertical-rl; text-orientation:mixed; pointer-events:none; user-select:none;
  font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--grey-line); opacity:.75;
}
.vlabel::after{ content:""; display:block; width:1px; height:clamp(34px,5vw,64px); background:var(--red); margin:.9rem auto 0; }
@media (max-width:1180px){ .vlabel{ display:none; } }

/* ============ 01 HERO — V2.5 distributed editorial composition ==========
   The centred stack is gone. The canvas now carries four anchored zones:
   identifier top-left, headline bottom-left, supporting copy and CTAs
   bottom-right, and a thin trust strip closing the bottom edge. The
   photograph occupies the space between them rather than blank padding. */
.hero{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  display:flex; align-items:stretch;
  min-height:clamp(600px,88svh,880px);
  padding-block:calc(var(--header-h) + clamp(2.9rem,4.6vh,3.9rem)) clamp(1.9rem,3.4vh,2.9rem);
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 48%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.66) 0%, rgba(0,0,0,.26) 18%, rgba(0,0,0,.24) 40%,
      rgba(0,0,0,.62) 68%, rgba(0,0,0,.90) 100%),
    linear-gradient(to right,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.10) 34%,
      rgba(0,0,0,.10) 62%, rgba(0,0,0,.40) 100%);
}
.hero__inner{
  position:relative; z-index:2; width:100%;
  max-width:1560px; margin-inline:auto; padding-inline:var(--gutter);
  display:flex;
}
.hero__grid{ width:100%; display:grid; gap:clamp(1rem,2vh,1.7rem) clamp(1.5rem,3vw,3.5rem); }

.hero__eyebrow{ display:flex; align-items:center; gap:.8rem; color:var(--paper); max-width:none; }
.mk--hero{ margin-top:clamp(.55rem,1vw,.85rem); color:var(--red); }

.hero__h1{
  color:var(--white);
  font-size:clamp(1.75rem,3.4vw,3.15rem); line-height:1.04; letter-spacing:-.03em;
}
.hero__h1 em{ font-style:normal; display:block; }
.hero__lede{ color:rgba(244,243,241,.92); font-size:clamp(1rem,1.15vw,1.1rem); line-height:1.55; max-width:36ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:clamp(1rem,1.8vw,1.4rem); }

/* Trust strip: a thin concluding information rule, not a fifth content block. */
.trust{
  list-style:none; width:100%;
  margin-top:clamp(1.7rem,3.4vh,2.9rem);
  padding:clamp(.9rem,1.6vh,1.1rem) clamp(.9rem,1.6vw,1.4rem) clamp(1rem,1.8vh,1.25rem);
  background:rgba(0,0,0,.30); border-radius:3px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 1rem;
}
.trust li{
  display:flex; align-items:center; gap:.5rem; color:var(--paper);
  font-family:var(--display); font-weight:600; font-size:.68rem;
  letter-spacing:.11em; text-transform:uppercase; line-height:1.25;
}
.trust img{ width:21px; height:21px; flex:none; }

/* ---- Distributed composition from laptop width up ---------------------- */
@media (min-width:1000px){
  /* One typographic block on the left. The identifier, the Mokuton accent and
     the headline are a single unit; the free row sits ABOVE them so the
     photograph carries the empty space instead of a gap inside the type. */
  /* Identifier, Mokuton accent and headline are ONE block. The free space
     sits in row 1, above the type, so the photograph carries it instead of a
     meaningless gap inside the typography. */
  .hero__grid{
    grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
    grid-template-rows:1fr auto auto auto;
    row-gap:0;
  }
  .hero__id{     grid-column:1; grid-row:2; align-self:end; }
  .hero__h1{     grid-column:1; grid-row:3; margin-top:clamp(.55rem,1vw,1.05rem); }
  .hero__aside{  grid-column:2; grid-row:2 / 4; align-self:end; justify-self:end;
                 width:100%; padding-bottom:.3rem; }
  .trust{        grid-column:1/-1; grid-row:4; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem 1.5rem; }
  .trust li:nth-child(n+2){ justify-content:center; }
  .trust li:last-child{ justify-content:flex-end; }
}
@media (min-width:1000px) and (max-width:1279px){
  .hero__lede{ max-width:32ch; }
}

/* ---- Tablet: two stacked bands, still not one narrow column ------------ */
@media (min-width:761px) and (max-width:999px){
  .hero{ min-height:clamp(520px,64svh,680px); }
  .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); grid-template-rows:auto 1fr auto; }
  .hero__id{ grid-column:1/-1; grid-row:1; }
  .hero__h1{ grid-column:1; grid-row:2; align-self:end; }
  .hero__aside{ grid-column:2; grid-row:2; align-self:end; }
  .trust{ grid-column:1/-1; grid-row:3; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---- Phones: composed for the phone, not stacked from the desktop ------
   V2.9. The mobile hero is its own composition: a small identifier, a
   restrained Mokuton accent, a controlled headline, one short paragraph, a
   compact CTA pair and a quiet 2x2 trust grid. Proportions are tuned at
   393x852 and hold from 320px up. */
@media (max-width:760px){
  .hero{
    min-height:clamp(520px,74svh,660px); align-items:center;
    padding-block:calc(var(--header-h) + clamp(1.5rem,5vw,2.1rem)) clamp(1.3rem,4vw,1.8rem);
  }
  /* Art direction: the standing figure reads in the top third, the quiet
     floor carries the typography beneath it. */
  /* The portrait frame is taller than it is wide, so the whole standing
     figure is kept and the crop is horizontal. The scrim then deepens
     through the middle band, where the other students would otherwise
     compete with the headline. */
  .hero__bg img{ height:100%; object-position:50% 50%; }
  .hero__bg::after{
    background:linear-gradient(to bottom,
      rgba(0,0,0,.58) 0%, rgba(0,0,0,.24) 14%, rgba(0,0,0,.46) 30%,
      rgba(0,0,0,.72) 46%, rgba(0,0,0,.86) 62%, rgba(0,0,0,.94) 100%);
  }
  .hero__inner{ padding-inline:clamp(1.15rem,5vw,1.6rem); }
  .hero__grid{ justify-items:center; text-align:center; gap:0; }

  .hero__id{ display:grid; justify-items:center; }
  /* Two balanced lines, and "Karate-do" is never split across them. */
  .hero__eyebrow{
    justify-content:center; font-size:clamp(.6rem,2.6vw,.69rem);
    letter-spacing:.12em; line-height:1.45; max-width:min(34ch,100%);
    color:rgba(244,243,241,.74);
  }
  .mk--hero{ font-size:clamp(1.35rem,7.1vw,1.95rem); margin-top:.35rem; }

  /* Sized so "Stronger in body." always holds one line from 320px up. */
  .hero__h1{
    font-size:clamp(1.55rem,8.1vw,2.2rem); line-height:1.05; letter-spacing:-.032em;
    margin-top:clamp(.7rem,2.6vw,1rem); max-width:none;
  }
  .hero__aside{ display:grid; justify-items:center; width:100%; }
  .hero__lede{
    font-size:clamp(.94rem,4.15vw,1.05rem); line-height:1.46; max-width:30ch;
    color:rgba(244,243,241,.86); margin-top:clamp(.75rem,2.8vw,1rem);
  }
  .hero__actions{
    justify-content:center; width:min(330px,100%); gap:.55rem;
    margin-top:clamp(1.05rem,4vw,1.35rem);
  }
  .hero__actions .btn{
    width:100%; min-height:50px; font-size:.76rem; letter-spacing:.07em;
    padding-inline:1rem;
  }

  /* Quiet trust grid: a hairline, then four short facts. No panel, no blur. */
  .trust{
    background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    border-top:1px solid rgba(244,243,241,.22); border-radius:0;
    width:min(340px,100%); max-width:none;
    margin-top:clamp(1.3rem,4.6vw,1.7rem);
    padding:clamp(.85rem,3.2vw,1.05rem) 0 0;
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem .9rem;
  }
  .trust li{
    justify-content:flex-start; align-items:center; gap:.45rem; text-align:left;
    font-size:clamp(.62rem,2.8vw,.72rem); letter-spacing:.08em; line-height:1.25;
    color:rgba(244,243,241,.9);
  }
  .trust img{ width:19px; height:19px; }
}
/* The smallest phones, and any phone the reader has zoomed: the same
   composition, one step quieter. */
@media (max-width:360px){
  .hero{ min-height:clamp(500px,72svh,620px); }
  .hero__lede{ max-width:29ch; }
  .trust{ width:100%; gap:.6rem .7rem; }
}

/* ---- V2.10.1 — phone hero cleanup (≤600px, phones only) ---------------
   Client review on a physical iPhone: the first screen carried every brand
   message at once. On phones the hero is now identifier → Mokuton SHOTOKAN →
   one paragraph → two actions, and the photograph carries the rest.
   Nothing here applies above 600px: the 601–760px composition, the tablet
   band and the desktop hero are V2.10 untouched. */
@media (max-width:600px){
  /* The H1 is removed from the phone composition but kept in the document,
     so the page still has one H1 for assistive technology and for
     mobile-first indexing. It occupies no space and paints nothing. */
  .hero__h1{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  /* The four trust facts are a desktop information rule. On a phone they made
     the opening screen heavy, so the strip, its rule and its icons are out. */
  .trust{ display:none; }

  /* Height follows the shortened content: a calm photographic opening, with
     the enquiry section clearly beginning after it. No 100vh. */
  .hero{
    min-height:clamp(430px,60svh,540px);
    padding-block:calc(var(--header-h) + clamp(1.4rem,4.6vw,1.9rem)) clamp(1.4rem,4.4vw,2rem);
  }

  /* With two content groups gone the scrim can lift and the photograph can
     carry more of the frame. The lower band stays dark enough for the
     paragraph and the outlined action. */
  .hero__bg img{ object-position:50% 44%; }
  .hero__bg::after{
    background:
      /* A soft pool of depth behind the type only, so the Mokuton holds
         against a white gi while the rest of the frame stays open. */
      radial-gradient(115% 58% at 50% 36%,
        rgba(0,0,0,.52) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,0) 76%),
      linear-gradient(to bottom,
        rgba(0,0,0,.48) 0%, rgba(0,0,0,.14) 14%, rgba(0,0,0,.24) 30%,
        rgba(0,0,0,.50) 47%, rgba(0,0,0,.70) 66%, rgba(0,0,0,.86) 100%);
  }

  /* One visual axis, one focal point. */
  .hero__eyebrow{ font-size:clamp(.59rem,2.55vw,.66rem); color:rgba(244,243,241,.78); }
  .mk--hero{ font-size:clamp(1.3rem,6.8vw,1.85rem); margin-top:.6rem; }
  .hero__lede{
    font-size:clamp(.94rem,4vw,1.02rem); line-height:1.5; max-width:30ch;
    margin-top:1.3rem; color:rgba(244,243,241,.9);
  }
  .hero__actions{
    width:min(310px,100%); gap:.68rem; margin-top:1.45rem;
  }
  .hero__actions .btn{ min-height:48px; font-size:.74rem; letter-spacing:.07em; }
}
@media (max-width:360px){
  .hero{ min-height:clamp(432px,62svh,520px); }
  .hero__actions{ width:min(290px,100%); }
}

/* ---- Enquiry: a new chapter, never attached to the hero ---------------- */
.enq__card{ border:1px solid rgba(0,0,0,.10); box-shadow:0 18px 44px rgba(0,0,0,.18); }
.enq__head{ padding-block:.95rem; }
.enq__body{ padding-top:clamp(1.3rem,2.6vw,2.1rem); }



/* ============ 11 PARENT STORIES — fixed feature panel + moving wall =====
   Left panel is static. Right side carries two tracks of authentic parent
   cards that drift in opposite directions. Each track holds the real cards
   once, then an aria-hidden duplicate set purely so the loop has no seam. */
.stories{
  position:relative; background:var(--paper); overflow:hidden;
  padding-block:clamp(2.2rem,4vw,3.6rem);
}
.stories__grid{ display:grid; gap:clamp(1.2rem,2.4vw,2rem); align-items:stretch; }
@media (min-width:1000px){
  .stories__grid{ grid-template-columns:minmax(0,33fr) minmax(0,67fr); }
}

/* ---- Fixed feature panel ---------------------------------------------- */
.stories__feature{
  position:relative; overflow:hidden; border-radius:14px; background:var(--ink);
  display:grid; min-height:clamp(300px,52vw,340px);
}
@media (min-width:1000px){ .stories__feature{ min-height:clamp(420px,33vw,480px); } }
.stories__feature > picture{ display:contents; }
.stories__feature img{
  grid-area:1/1; width:100%; height:100%; object-fit:cover; object-position:50% 38%;
}
.stories__feature::after{
  content:""; grid-area:1/1; z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.92) 24%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.18) 100%);
}
.stories__featureIn{
  grid-area:1/1; z-index:2; align-self:end;
  padding:clamp(1.1rem,2.4vw,1.7rem); display:grid; justify-items:start; gap:.55rem;
}
.stories__featureIn h2{ color:var(--white); max-width:16ch; }
.stories__sub{ color:rgba(244,243,241,.86); font-size:.9rem; line-height:1.55; max-width:34ch; }
.stories__featureIn .btn{ margin-top:.35rem; }
.jp-mark--stories{
  grid-area:1/1; z-index:1; align-self:start; justify-self:end;
  writing-mode:vertical-rl; text-orientation:upright;
  margin:clamp(.6rem,1.6vw,1.2rem); font-size:clamp(3rem,7vw,5.5rem);
  color:rgba(255,255,255,.028); position:static;
}

/* ---- Moving testimonial wall ------------------------------------------ */
.stories__wall{ display:grid; gap:clamp(.7rem,1.4vw,1rem); align-content:center; min-width:0; }
.swall__row{
  overflow:hidden; min-width:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.swall__track{
  display:flex; width:max-content; will-change:transform;
}
/* Every card carries its own trailing gap, including the last one, so
   translating the track by exactly -50% lands on an identical frame and the
   loop has no seam. A flex `gap` would leave half a gap unaccounted for. */
.swall__track > .scard{ margin-right:clamp(.7rem,1.4vw,1rem); }
.swall__track--a{ animation:swallDrift 46s linear infinite; }
.swall__track--b{ animation:swallDrift 52s linear infinite reverse; }
@keyframes swallDrift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

.stories__wall:hover .swall__track,
.stories__wall:focus-within .swall__track{ animation-play-state:paused; }

.scard{
  flex:none; width:clamp(268px,25vw,330px); min-height:0;
  display:grid; align-content:start; gap:.5rem;
  padding:clamp(.95rem,1.7vw,1.25rem);
  background:#FBFAF9; border:1px solid rgba(0,0,0,.08); border-radius:8px;
}
.scard__kind{
  font-family:var(--display); font-weight:600; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.scard blockquote{
  margin:0; font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:.98rem; line-height:1.4; letter-spacing:-.005em;
}
.scard__body{ font-size:.88rem; line-height:1.55; color:var(--muted); }
.scard__who{
  font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink);
  padding-left:.65rem; border-left:2px solid var(--red); margin-top:.15rem;
}
.scard__who small{
  display:block; margin-top:.2rem; font-family:var(--body); font-weight:400;
  font-size:.76rem; letter-spacing:0; text-transform:none; color:var(--muted);
}
.scard__more{
  font-family:var(--display); font-weight:600; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); text-decoration:none;
  border-bottom:1.5px solid currentColor; justify-self:start; padding-bottom:2px;
}
.scard__more:hover{ color:var(--red-deep); }

/* Phones: one track only, and it stays swipeable. */
@media (max-width:999px){
  .swall__row:last-child{ display:none; }
  .scard{ width:clamp(250px,74vw,300px); }
}

/* Reduced motion: nothing moves. The wall becomes a quiet swipeable row. */
@media (prefers-reduced-motion:reduce){
  .swall__track{ animation:none !important; transform:none !important; }
  .swall__row{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:none; mask-image:none; }
  .swall__row::-webkit-scrollbar{ display:none; }
  .swall__row:last-child{ display:none; }
}



/* ============ 13 FAQ — rebuilt: bounded photograph, clean accordion ===== */
.faq{
  position:relative; background:var(--paper); overflow:hidden;
  padding-block:clamp(2.4rem,4.4vw,4.2rem);
}
.faq__grid{ position:relative; z-index:2; display:grid; gap:clamp(1.6rem,3vw,3.2rem); }
@media (min-width:980px){
  .faq__grid{ grid-template-columns:minmax(0,40fr) minmax(0,60fr); align-items:start; }
}
.faq__aside{ display:grid; align-content:start; gap:.6rem; }
.faq__aside h2{ margin-top:.15rem; }
.faq__help{ font-size:.92rem; color:var(--muted); margin-top:.2rem; }
.faq__help a{ color:var(--red); }

/* The crop is decided here. Intrinsic image size never sets section height. */
.faq__photo{
  margin:clamp(1rem,2vw,1.5rem) 0 0; border-radius:12px; overflow:hidden;
  background:var(--paper-2); height:clamp(220px,54vw,320px);
}
@media (min-width:980px){ .faq__photo{ height:clamp(280px,23vw,370px); } }
.faq__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 24%; }

.faq__list{ border-top:1px solid var(--grey-line); }
.faq__item{ border-bottom:1px solid var(--grey-line); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.3rem;
  list-style:none; cursor:pointer; min-height:58px;
  padding:clamp(.85rem,1.6vw,1.15rem) 0;
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:clamp(.95rem,1.2vw,1.08rem); line-height:1.35; letter-spacing:-.005em;
  transition:color .22s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::marker{ content:""; }
.faq__item summary:hover{ color:var(--red); }
.faq__q{ min-width:0; }
.faq__sign{ position:relative; width:15px; height:15px; flex:none; }
.faq__sign::before,.faq__sign::after{ content:""; position:absolute; background:var(--red); transition:transform .3s var(--ease); }
.faq__sign::before{ left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; }
.faq__sign::after{ top:0; bottom:0; left:50%; width:1.5px; margin-left:-.75px; }
.faq__item[open] summary{ color:var(--red); }
.faq__item[open] .faq__sign::after{ transform:scaleY(0); }
.faq__a{ padding:0 0 clamp(.95rem,1.8vw,1.3rem); max-width:66ch; }
.faq__a p{ font-size:.93rem; line-height:1.62; color:var(--muted); }
.faq__a p + p{ margin-top:.55rem; }
.faq__a a{ color:var(--red); }
.jp-mark--faq{
  left:var(--gutter); bottom:-.2em; z-index:0;
  font-size:clamp(6rem,13vw,10.5rem); color:rgba(0,0,0,.026); white-space:nowrap;
}
@media (max-width:979px){ .jp-mark--faq{ display:none; } }

/* ============ 15 FOOTER — four real columns across the full width ====== */
.footer__top{
  display:grid; gap:clamp(1.6rem,3vw,2.4rem);
  padding-bottom:clamp(1.4rem,2.4vw,2rem); border-bottom:1px solid var(--ink-line);
  align-items:start;
}
@media (min-width:640px){ .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.6rem,3vw,2.6rem); } }
@media (min-width:1000px){
  .footer__top{
    grid-template-columns:1.35fr 1fr 1fr 1fr;
    column-gap:clamp(1.8rem,3.2vw,3.4rem);
  }
}
.footer__brand{ display:grid; gap:.75rem; justify-items:start; align-content:start; max-width:38ch; }
.footer__brand p{ color:var(--on-ink); font-size:.9rem; line-height:1.6; }
.footer__col{ min-width:0; }
@media (min-width:1000px){
  .footer__col{ padding-left:clamp(1rem,2vw,1.8rem); border-left:1px solid var(--ink-line); }
}
.footer__title,.footer__disc{ font-size:.66rem; letter-spacing:.18em; }
.footer__links{ display:grid; }
.footer__links a{ overflow-wrap:normal; }
@media (min-width:900px){
  .footer__links a{ font-size:.9rem; line-height:1.45; padding:.36rem .4rem; min-height:34px; }
}
.footer__links--social{ margin-top:.1rem; }
.footer__sub{ margin:.85rem 0 .1rem; padding-top:.7rem; border-top:1px solid var(--ink-line); }

/* Brand finale: monumental, but it must not become another screen. */
.brandfinale{ padding-block:clamp(1rem,2vw,1.7rem) clamp(.5rem,1.1vw,.9rem); }
.brandfinale__word{ font-size:clamp(1.45rem,7vw,6.4rem); }

/* ---- Japanese system B: heritage watermark on the Principles chapter --- */
.prin{ position:relative; }
.jp-mark--prin{
  right:var(--gutter); bottom:-.2em; z-index:0;
  font-size:clamp(6rem,13vw,10.5rem); color:rgba(0,0,0,.03); white-space:nowrap;
}
@media (max-width:979px){ .jp-mark--prin{ display:none; } }




/* ==========================================================================
   V2.6 — enquiry console, watermark audit, divider discipline
   ========================================================================== */

/* ---- Two new heritage watermarks, plus a visibility audit -------------- */
.jp-mark--clubs{
  right:calc(-1 * clamp(1rem,3vw,4rem)); top:50%; transform:translateY(-50%); z-index:0;
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:clamp(8rem,17vw,15rem); color:rgba(255,255,255,.055);
}
.clubs > .c-page{ position:relative; z-index:1; }
@media (max-width:899px){ .jp-mark--clubs{ font-size:clamp(7rem,32vw,11rem); color:rgba(255,255,255,.045); } }
/* Below 600px it sat right behind the Japan/Worldwide grid, so it is pushed
   out of the content column and dropped to a whisper. */
@media (max-width:599px){
  .jp-mark--clubs{ right:calc(-1 * clamp(3rem,18vw,6rem)); top:34%;
    font-size:clamp(6rem,34vw,9rem); color:rgba(255,255,255,.028); }
}

.jp-mark--finale{
  right:calc(-1 * clamp(1rem,3vw,3.5rem)); top:50%; transform:translateY(-50%); z-index:1;
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:clamp(7rem,15vw,12.5rem); line-height:1;
  color:rgba(255,255,255,.055);
}
@media (max-width:760px){ .jp-mark--finale{ font-size:clamp(6rem,26vw,9rem); color:rgba(255,255,255,.05); } }
.finale__inner{ z-index:2; }

/* Audit: the light-canvas marks were effectively invisible on a real screen. */
.jp-mark--faq{ color:rgba(0,0,0,.038); }
.jp-mark--prin{ color:rgba(0,0,0,.042); }
.japan .jp-mark{ color:rgba(255,255,255,.065); }
.jp-mark--stories{ color:rgba(255,255,255,.04); }

/* ---- Divider discipline ------------------------------------------------
   Structural separator = one quiet grey line. Active indicator = a short red
   segment on that same line, never a second full-width rule beside it. ---- */
.japan__rule{ height:1px; background:var(--red); width:44px; }
.sslide cite, .scard__who{ border-left-width:2px; }

/* ---- Less generic roundness on informational surfaces ----------------- */
.scard{ border-radius:4px; }
.chip{ border-radius:2px; }

/* ==========================================================================
   ENQUIRY — a progressive console rather than a wall of controls
   ========================================================================== */
.enq__head{ padding-block:.8rem; align-items:center; }
.enq__head h2{ font-size:clamp(1.28rem,2vw,1.72rem); }
.enq__head .cap{ margin-top:.25rem; }
.steps{ gap:.5rem; }
.steps b{ width:24px; height:24px; }

.console{
  display:grid; gap:1px; background:rgba(0,0,0,.12);
  border:1px solid rgba(0,0,0,.14); border-radius:4px; overflow:visible;
}
@media (min-width:960px){
  .console{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.1fr) auto; align-items:stretch; }
}
.console__cell{ background:var(--white); padding:.7rem clamp(.75rem,1.4vw,1.1rem) .8rem; min-width:0; position:relative; }
.console__cell--go{ display:grid; align-items:end; background:var(--paper); }
.console__cell--go .btn{ width:100%; min-height:52px; }
.console .field{ gap:.3rem; }
.console .field > label,.console .field__legend{ font-size:.63rem; letter-spacing:.15em; }
.console .field select{ min-height:52px; border:1px solid rgba(0,0,0,.18); border-bottom-width:2px; }
.console .field__error{ margin-top:.15rem; font-size:.78rem; }

/* Unavailable steps are genuinely disabled, and say so in text as well as
   tone. Nothing that looks disabled is secretly operable. */
.console .field select:disabled{
  background:#F0EFED; color:#6B6B6B; border-color:rgba(0,0,0,.12);
  border-bottom-color:rgba(0,0,0,.18); cursor:not-allowed;
}
.console__cell:has(select:disabled) label{ color:#8A8A8A; }
.console__cell:has(select:disabled) .field__sel .i{ color:#A2A1A1; }
#to-step-2{ background:transparent; color:var(--ink); border-color:rgba(0,0,0,.28); }
#to-step-2:disabled,#to-step-2[disabled]{ opacity:1; color:#8A8A8A; border-color:rgba(0,0,0,.14); background:#F0EFED; cursor:not-allowed; }
#to-step-2.is-primary{ background:var(--red); color:#fff; border-color:var(--red); cursor:pointer; }
#to-step-2.is-primary:hover{ background:var(--red-deep); border-color:var(--red-deep); }

/* ---- Age picker: a real disclosure over a real fieldset ---------------- */
.agepick{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  width:100%; min-height:52px; padding:.65rem .85rem; cursor:pointer;
  background:var(--white); color:var(--ink); text-align:left;
  border:1px solid rgba(0,0,0,.18); border-bottom:2px solid rgba(0,0,0,.45); border-radius:2px;
  font-family:var(--display); font-weight:600; font-size:.95rem;
}
.agepick .i{ width:.85rem; height:.85rem; color:var(--muted); transition:transform .22s var(--ease); }
.agepick[aria-expanded="true"] .i{ transform:rotate(180deg); }
.agepick[aria-expanded="true"]{ border-bottom-color:var(--red); }
.agepick__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agepick__value.is-placeholder{ color:var(--muted); font-weight:500; }
.field.err .agepick{ border-color:var(--red); }

/* The age fieldset is a full-width row INSIDE the console. Opening it expands
   the enquiry section and pushes the brand band down, instead of floating a
   popover across the following section. */
.agepanel{
  grid-column:1 / -1; margin:0; border:0; background:var(--paper);
  /* ~11px of clear space between the console's row line and the hint text. */
  padding:clamp(.7rem,1.3vw,.85rem) clamp(.75rem,1.4vw,1.1rem) clamp(.9rem,1.6vw,1.15rem);
  display:grid; gap:.7rem; justify-items:start;
}
.js .agepanel[hidden]{ display:none !important; }
/* A rendered <legend> cuts a notch out of its fieldset's background box, and
   the console's 1px grid line showed through that notch. The legend is
   therefore taken out of flow (it is no longer the "rendered legend", so no
   notch is cut) and kept for assistive technology, while a visible hint
   carries the same words with real spacing below the structural line. */
.agepanel__legend{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.agepanel__hint{
  font-family:var(--display); font-weight:600; font-size:.63rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.agepanel .choices{ gap:.45rem; }
.agepanel .choice span{ min-height:46px; padding-inline:1rem; }
.agepanel__done{ justify-self:start; }

/* Desktop/laptop: the seven options use the whole row instead of clustering at
   the left, and Done sits at the end as a separate confirmation action. Same
   height, same behaviour, no extra card and no extra rows. */
@media (min-width:960px){
  .agepanel{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center; justify-items:stretch;
    column-gap:clamp(1rem,2.4vw,2.4rem); row-gap:.55rem;
  }
  .agepanel__hint{ grid-column:1 / -1; }
  .agepanel .choices{
    display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.5rem;
  }
  .agepanel .choice{ min-width:0; }
  .agepanel .choice span{ width:100%; justify-content:center; padding-inline:.45rem; text-align:center; }
  .agepanel__done{ justify-self:end; align-self:center; }
}
html:not(.js) .agepanel{ background:var(--white); }

.enq__relation{ margin-top:clamp(1rem,2vw,1.4rem); }
.enq__relation .field__hint{ margin-top:.3rem; }

/* ---- Step 2: a compact two-column grid, labels always visible ---------- */
@media (min-width:820px){ .frow--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1120px){ .frow--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.f-method .choices{ gap:.4rem; }

/* ---- One compact secondary information row ----------------------------- */
.enq__foot{ margin-top:clamp(1rem,2vw,1.4rem); padding-top:.9rem; border-top:1px solid rgba(162,161,161,.55); }
.enq__note{ font-size:.8rem; line-height:1.5; color:var(--muted); max-width:none; margin:0; }
.enq__note b{ color:var(--ink); font-weight:600; }
.enq__note a{ color:var(--red); }
#foot-step-2{ align-items:center; }
#foot-step-2 .enq__note{ flex:1; min-width:180px; }
.enq__demo{ display:none; }

@media (max-width:959px){
  /* Single column: the age row must sit directly under its own trigger and
     push Where, Club and Continue down, so flex ordering replaces the grid. */
  .console{ display:flex; flex-direction:column; }
  .console__cell--age{ order:1; }
  .agepanel{ order:2; }
  .console__cell:nth-child(2){ order:3; }
  .console__cell:nth-child(3){ order:4; }
  .console__cell--go{ order:5; padding-top:.9rem; }
}

/* ---- Enquiry console: one baseline across all four decisions ----------- */
.console #field-age{ display:block; }
.console #field-age .field__legend{ display:block; margin-bottom:.3rem; }
.console .field > label{ display:block; margin-bottom:.3rem; }
.console .field{ gap:0; }
.console .field__error{ margin-top:.3rem; }

/* ---- Trust ribbon: a little more air beneath it ------------------------ */
@media (min-width:1000px){ .trust{ margin-bottom:clamp(.2rem,.8vh,.6rem); } }

/* ==========================================================================
   V2.8 — responsive hardening
   Overflow is prevented at its source. There is deliberately NO
   `body{overflow-x:hidden}` anywhere: a global clip would hide the very
   defects this pass exists to fix.
   ========================================================================== */

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content and is the usual cause of a wide document on a phone. */
.console__cell,.console .field,.frow > *,.hero__grid > *,.hero__aside,
.stories__grid > *,.stories__wall,.swall__row,.clubs__grid > *,.clublist > *,
.faq__grid > *,.footer__top > *,.footer__col,.reel__inner > *,.reel__copy,
.comm__grid > *,.ages__nav > *,.why__grid > *,.prin__grid > *,.journey__track > *,
.destgrid > *,.agepanel,.agepanel .choices{ min-width:0; }

/* Long unbroken strings (club names, email addresses, legacy labels) must wrap
   rather than push the document wider. */
.club h3,.club p,.club__sub a,.dest,.footer__links a,.scard,.scard__body,
.faq__q,.faq__a,.enq__note,.sslide p,.reel__lede{ overflow-wrap:anywhere; }

/* Media never exceeds its box. */
img,video,picture,svg{ max-width:100%; }

/* Decorative watermarks and moving tracks are contained by their own section,
   so their transforms and overhang can never widen the document. */
.clubs,.finale,.reel,.stories,.prin,.faq,.japan,.band,.rail,.footer{ overflow-x:clip; }
@supports not (overflow-x:clip){
  .clubs,.finale,.reel,.stories,.prin,.faq,.japan,.band,.rail,.footer{ overflow-x:hidden; }
}
.jp-mark,.vlabel{ max-width:100vw; }

/* ---- Safe areas on fixed and full-bleed UI ----------------------------- */
.header{
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
}
.drawer__sheet{
  padding-right:env(safe-area-inset-right, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}

/* ---- iPhone-sized phones: keep the console and its age row honest ------ */
@media (max-width:600px){
  .agepanel .choices{ display:flex; flex-wrap:wrap; gap:.45rem; }
  .agepanel .choice{ flex:1 1 auto; }
  .agepanel .choice span{ width:100%; justify-content:center; }
  .agepanel__done{ justify-self:stretch; width:100%; }
  .console .field select,.agepick{ max-width:100%; }
  /* The persistent bottom bar is gone, so the strip only needs the device
     safe area beneath it. */
  .footer__strip{ padding-bottom:env(safe-area-inset-bottom,0px); }
  .footer__stripin{ row-gap:.9rem; }
}

/* The non-breaking span in the hero identifier is a wrapping aid only. */
.hero__eyebrow .nb{ white-space:nowrap; }

/* ==========================================================================
   V2.9 — mobile composition pass (phones and small tablets)
   Every rule here is scoped to a phone-width media query. Desktop and laptop
   composition is untouched. Tuned at 393x852, verified down to 320x568 and
   under enlarged-text conditions.
   ========================================================================== */

/* Keep the intended CSS typography stable if a mobile browser tries to
   inflate text on its own. This is the standards-compliant 100% value: it
   does NOT prevent pinch zoom, browser zoom or accessibility text sizing. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

@media (max-width:760px){

  /* ---- 02 ENQUIRY — the step indicator drops under its own heading so it
     cannot be clipped by the card when text is enlarged. --------------- */
  .enq__head{ gap:.45rem 1rem; }
  .steps{ margin-left:0; flex-wrap:wrap; row-gap:.35rem; }

  /* ---- 08 JOURNEY — vertical path, stacked actions -------------------- */
  .journey__track{ padding-left:1.75rem; gap:1.05rem; }
  /* The step markers are positioned against the track's own rule, so they
     must move with the padding or the section's clip swallows them. */
  .jstep__dot{ left:-1.75rem; top:9px; }
  .jstep__n{ font-size:1.75rem; letter-spacing:-.04em; }
  .jstep h3{ font-size:.82rem; letter-spacing:.11em; }
  .jstep p{ font-size:.87rem; max-width:none; }
  .journey__photo{ margin-left:1.75rem; }
  /* The button and the phone link crowded the right gutter on one row. */
  .journey__foot{ display:grid; justify-items:start; gap:.9rem; width:100%; }
  .journey__foot .btn{ width:100%; }
  .ages__foot{ display:grid; justify-items:start; gap:.9rem; }
  .ages__foot .btn{ width:100%; }

  /* ---- 10 AUSTRALIA / JAPAN — one editorial column -------------------- */
  .japan{ padding-block:clamp(2.2rem,7vw,2.8rem); }
  .japan__grid{ gap:1.4rem; }
  .japan__title{ gap:.7rem; }
  .japan__grid p{ font-size:.95rem; }
  .japan__links{ gap:.45rem; margin-top:1.2rem; }
  .japan__links .chip{ font-size:.72rem; padding:.4rem .8rem; }
  /* The 4:5 crop became a full-screen portrait on a phone. */
  .japan__media .media{ aspect-ratio:auto; height:clamp(230px,58vw,300px); }
  .japan__media figcaption{ font-size:.78rem; margin-top:.5rem; }
  .japan .jp-mark{ font-size:clamp(7rem,34vw,11rem); color:rgba(255,255,255,.045); }

  /* ---- 11 PARENT STORIES — one track, readable cards ------------------ */
  .stories{ padding-block:clamp(2.2rem,7vw,2.8rem); }
  .stories__feature{ min-height:clamp(260px,62vw,310px); }
  .stories__featureIn h2{ font-size:clamp(1.35rem,6.4vw,1.7rem); }
  .stories__sub{ font-size:.86rem; max-width:32ch; }
  .scard{ width:min(262px,72vw); padding:.95rem 1rem; }
  .scard blockquote{ font-size:.92rem; }
  .scard__body{ font-size:.85rem; }
  .swall__row{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
  }

  /* ---- 12 MORE THAN A CLASS — one column, equal geometry -------------- */
  .comm{ padding-block:clamp(2.2rem,7vw,2.8rem); }
  .comm__grid{ gap:.85rem; }
  .comm__cell{ aspect-ratio:16/10; border-radius:12px; }
  .comm__label{ padding:2rem .95rem .9rem; font-size:.8rem; letter-spacing:.07em; }
  .comm__label small{ font-size:.76rem; }

  /* ---- 13 FAQ — compact photograph, readable rows --------------------- */
  .faq{ padding-block:clamp(2.2rem,7vw,2.8rem); }
  .faq__photo{ height:clamp(170px,44vw,210px); margin-top:1rem; }
  .faq__item summary{ min-height:56px; gap:1rem; font-size:.98rem; padding-block:.9rem; }
  .faq__sign{ width:14px; height:14px; }
  .faq__a p{ font-size:.9rem; }
  .faq__help{ font-size:.88rem; }

  /* ---- 14 PRE-FOOTER CTA — mobile buttons, not desktop slabs ---------- */
  .finale__inner{ padding-block:clamp(2.6rem,10vw,3.4rem); gap:1rem; justify-items:stretch; }
  .finale h2{ font-size:clamp(1.7rem,8vw,2.15rem); max-width:none; }
  .finale__actions{ display:grid; gap:.55rem; margin-top:.3rem; }
  .finale__actions .btn{ width:100%; min-height:50px; font-size:.76rem; letter-spacing:.07em; }
  .finale__phone{ font-size:1.3rem; margin-top:.5rem; }

  /* ---- Photo rail: contained, and never wider than the document ------- */
  .rail{ padding-top:1.1rem; }
  .rail__head{ margin-bottom:.7rem; }
  .rail__strip img{ height:112px; }

  /* ---- 15 FOOTER — compact ending now the fixed bar is gone ----------- */
  .footer{ padding-top:1.4rem; }
  /* The last disclosure row already draws a rule, so the group border would
     read as a double line. */
  .footer__top{ gap:1.1rem; padding-bottom:.4rem; border-bottom:0; }
  .footer__brand{ gap:.6rem; }
  .footer__brand .brand__mark{ width:48px; height:48px; }
  .footer__brand p{ font-size:.87rem; }
  .footer__addr{ font-size:.87rem; }
  .footer__phone{ font-size:1.2rem; }
  .footer__brand .btn{ width:100%; white-space:normal; min-height:50px; font-size:.76rem; }
  .footer__col{ margin-top:-.2rem; }
  .footer__disc{ min-height:50px; padding:.7rem 0; }
  .footer__group{ padding-bottom:.6rem; }
  .footer__links a{ font-size:.86rem; }
  .brandfinale{ padding-block:.9rem .5rem; }
  .brandfinale__word{ font-size:clamp(1.35rem,7.4vw,2rem); gap:.5rem; }
  .brandfinale__mark{ width:32px; height:32px; }
  .footer__stripin{ padding-block:.75rem; font-size:.78rem; }
  .footer__social{ margin-left:0; }
  .footer__social a{ font-size:.72rem; padding:.3rem .8rem; }
}

/* Tablets keep the single-column heritage layout up to 959px, so the 4:5
   portrait would otherwise run taller than the whole screen there too. */
@media (min-width:761px) and (max-width:959px){
  .japan__media .media{ aspect-ratio:auto; height:clamp(300px,42vw,420px); }
}