/* KS Dance Osaka — "Morning Studio" direction, Apple-grade finish.
   Ivory and linen backgrounds, logo navy for text, leaf and oak accents, champagne hairlines.
   Depth comes from soft layered shadows and translucent materials; motion from springs. */
:root {
  --ivory: #F8F4EB;      /* logo ivory, main background */
  --linen: #EFE9DD;      /* alternate sections */
  --navy: #0F1B3C;       /* logo navy: text, buttons, booking + footer */
  --navy-2: #1A2850;
  --leaf: #4E6347;       /* labels (6.0:1 on ivory) */
  --oak: #835C35;        /* English follow lines, wit, TBC (5.4:1 on ivory, 4.9:1 on linen) */
  --muted: #545049;      /* secondary text (7.3:1 on ivory) */
  --champ: #CDB891;      /* logo champagne: hairlines, accents on navy */
  --on-navy-muted: #B9BFCC;
  --on-navy-body: #DCDFE6;
  --line: #DCD3C2;

  --font-ja: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-latin: "Bodoni Moda", Georgia, serif;
  --font-body: "Figtree", "Figtree Fallback", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;

  --ease-out: cubic-bezier(.22, .61, .36, 1);   /* opacity and colour only */
  --ease-arrive: cubic-bezier(.16, 1, .3, 1);

  /* Critically damped spring (damping 1.0, no overshoot) sampled into linear().
     The same curve at three "responses": press 0.27s, UI 0.48s, soft 0.68s. */
  --spring: linear(0, .05, .159, .288, .415, .53, .628, .71, .776, .828, .87, .901, .926, .945, .959, .969, .977, .983, .988, .991, .993, .995, .997, .999, 1);
  --t-press: .27s;
  --t-ui: .48s;
  --t-soft: .68s;

  /* Motion tokens (transitions.dev scale). Values are referenced by usage, not by nearest number.
     Not imported: --ease-out (this file already defines it for opacity/colour) and the bounce
     curves (DESIGN.md: no bounce). */
  --duration-stagger: 40ms;    /* per-item stagger offset */
  --duration-micro: 80ms;      /* intent delay, sequencing beat */
  --duration-quick: 150ms;     /* dropdown close, text swap */
  --duration-fast: 250ms;      /* hover in, icon swap, accordion, focus */
  --duration-medium: 350ms;    /* panel close, hover out */
  --duration-slow: 400ms;      /* panel open */
  --duration-very-slow: 500ms; /* emphasis, text reveal */
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);  /* surface open + close */
  --ease-in-out: ease-in-out;
  --ease-linear: linear;
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;        /* menu rows, page slide */
  --distance-medium: 12px;     /* text / section reveal */
  --distance-large: 30px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;         /* hover surface */
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;          /* reveal */
  --blur-large: 8px;

  /* Surfaces: continuous-feeling corners and low, layered ambient shadows (never one hard drop). */
  --r-photo: 14px;
  --r-card: 20px;
  --r-field: 12px;
  --shadow-1: 0 1px 1px rgb(15 27 60 / .03), 0 2px 10px -4px rgb(15 27 60 / .08);
  --shadow-2: 0 1px 2px rgb(15 27 60 / .04), 0 8px 24px -10px rgb(15 27 60 / .10), 0 32px 64px -32px rgb(15 27 60 / .16);
  --shadow-photo: 0 1px 2px rgb(15 27 60 / .05), 0 14px 32px -14px rgb(15 27 60 / .20), 0 44px 88px -44px rgb(15 27 60 / .26);
  --material: rgb(248 244 235 / .72);
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
}

/* Arial, nudged to Figtree's width, stands in for Latin text until Figtree loads (no reflow).
   Japanese characters still fall through to Hiragino Sans. */
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 101%; unicode-range: U+0000-024F, U+2000-206F; }

*, *::before, *::after { box-sizing: border-box; }
:where(a, button, summary, label) { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font: 400 1.0625rem/1.85 var(--font-body);
  overflow-x: clip;
}
body:lang(en) { line-height: 1.65; }   /* Figtree needs less leading than Japanese Gothic */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; }

/* Line breaking: headings balance their lines; Japanese text breaks strictly (no 。 starting a line)
   and, where supported, only between phrases, so paragraphs don't end on a lone 「す。」. */
h1, h2, h3, .follow, .intro-text, .wit { text-wrap: balance; }
:lang(ja) :is(p, li, dd, summary, h3) { line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
:lang(ja) :is(.follow, .intro-text, .wit) { text-wrap: balance; }
:lang(en) :is(p, li, dd, summary):not(.follow, .intro-text, .wit) { text-wrap: pretty; }   /* no one-word last lines */

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.band-linen { background: var(--linen); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--navy); color: var(--ivory); padding: 10px 16px; border-radius: var(--r-field);
}
.skip:focus { top: 16px; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- Type helpers ---------- */

.eyebrow {
  margin: 0 0 18px;
  font: 500 .95rem/1.5 var(--font-ja);
  letter-spacing: .14em;
  color: var(--leaf);
}
.eyebrow span {
  display: block;
  font: italic 400 .875rem/1.4 var(--font-latin);
  letter-spacing: .02em;
  color: var(--muted);
}
:lang(en) .eyebrow { font: 600 .875rem/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
:lang(en) .eyebrow span[lang="ja"] { font: 500 .85rem/1.5 var(--font-ja); letter-spacing: .08em; text-transform: none; }

h2 {
  margin: 0;
  font: 500 clamp(1.75rem, 3.6vw, 2.75rem)/1.45 var(--font-ja);
  letter-spacing: .02em;
}
h2 > span { display: inline-block; }
/* Headlines stand alone now (no partner line under them), so they carry their own space below. */
h2 { margin-bottom: 1.5rem; }
h2:has(+ .follow), .section-head > h2:last-child { margin-bottom: 0; }
:lang(en) h2 { font: 500 clamp(1.9rem, 3.8vw, 3rem)/1.12 var(--font-latin); letter-spacing: -.015em; }

.follow {
  margin: .5rem 0 1.75rem;
  font: italic 400 clamp(1.05rem, 1.7vw, 1.3rem)/1.4 var(--font-latin);
  color: var(--oak);
}
.follow:lang(ja) { font: 500 clamp(1rem, 1.5vw, 1.15rem)/1.7 var(--font-ja); font-style: normal; letter-spacing: .03em; }
.follow:lang(ja) span { display: inline-block; }

.lead { color: var(--muted); margin: 0 0 1.75rem; }
.wit {
  margin: 1.5rem 0 0;
  font: italic 400 1.15rem/1.4 var(--font-latin);
  color: var(--oak);
}
.wit:lang(ja) { font: 500 1.05rem/1.6 var(--font-ja); font-style: normal; letter-spacing: .03em; }
.wit span { display: inline-block; }
.small { font-size: .95rem; color: var(--muted); margin: 1.25rem 0 0; }
.tbc { color: var(--oak); font-size: .92em; }
.nw { white-space: nowrap; }

.text-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--champ);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  padding: 8px 0;
  transition: text-decoration-color var(--duration-medium) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.text-link:hover { text-decoration-color: var(--navy); transition-duration: var(--duration-fast); }

/* Touch-down feedback: links dim the instant they're pressed, and recover softly. */
:is(.text-link, .site-nav a, .menu-links a, .menu-tel, .contact a, .site-footer a, .lang):active { opacity: .55; transition-duration: 0s; }
:is(.site-nav a, .menu-links a, .menu-tel, .contact a, .site-footer a, .lang) { transition: opacity var(--duration-fast) var(--ease-out); }

.btn {
  display: inline-block;
  padding: 1rem 2.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: var(--ivory);
  font: 600 1rem/1.4 var(--font-body);
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--duration-medium) var(--ease-out), color var(--duration-medium) var(--ease-out), transform var(--t-ui) var(--spring);
}
.btn:hover { background: var(--navy-2); transition-duration: var(--duration-fast), var(--duration-fast), var(--t-ui); }
/* The global ring is currentColor, which is Ivory on a navy button and vanishes on the light page.
   Navy on light surfaces; Champagne while the header sits over the dark hero. */
.btn:focus-visible { outline-color: var(--navy); }
.site-header:not(.is-solid) .btn:focus-visible { outline-color: var(--champ); }
/* Press: shrinks the moment a finger lands (100ms), springs back on release. */
.btn:active { transform: scale(var(--scale-medium)); transition-duration: var(--duration-fast), var(--duration-fast), .1s; filter: brightness(1.08); }
.btn-small { padding: .7rem 1.2rem; font-size: .95rem; min-height: 44px; }

/* Sections fade in gently the first time they come into view. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--distance-medium));
  filter: blur(var(--blur-medium));
  transition: opacity var(--duration-very-slow) var(--ease-out), filter var(--duration-very-slow) var(--ease-out), transform var(--t-soft) var(--spring);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
/* A block whose items arrive one after another only fades; the items carry the rise.
   (Otherwise each item travels twice as far and the whole panel, photo included, is blurred.) */
.js [data-reveal]:has(.way, .family, .steps li, .trial-body) { transform: none; filter: none; }
.js [data-reveal] :is(.steps li, .way) { opacity: 0; transform: translateY(var(--distance-medium)); transition: opacity var(--duration-very-slow) var(--ease-out), transform var(--t-soft) var(--spring); }
.js [data-reveal].is-in :is(.steps li, .way) { opacity: 1; transform: none; }
.js [data-reveal].is-in :is(.steps li, .way):nth-child(2) { transition-delay: var(--duration-stagger); }
.js [data-reveal].is-in :is(.steps li, .way):nth-child(3) { transition-delay: calc(var(--duration-stagger) * 2); }
.js [data-reveal].is-in .steps li:nth-child(4) { transition-delay: calc(var(--duration-stagger) * 3); }
.js [data-reveal].is-in .steps li:nth-child(5) { transition-delay: calc(var(--duration-stagger) * 4); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gutter);
  color: var(--ivory);
  transition: background-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}
/* Past the hero the header becomes a translucent material: content scrolls softly underneath,
   and a faint scroll-edge shadow replaces a hard divider. */
.site-header.is-solid {
  background: rgb(248 244 235 / .96);
  color: var(--navy);
  box-shadow: 0 1px 0 rgb(15 27 60 / .05), 0 12px 32px -20px rgb(15 27 60 / .22);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .site-header.is-solid { background: var(--material); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
}
.brand { display: block; width: 48px; flex: none; position: relative; }
.brand img { width: 48px; height: auto; transition: opacity var(--duration-slow) var(--ease-out); }
.brand .logo-on-light { position: absolute; inset: 0; opacity: 0; }
.is-solid .brand .logo-on-dark { opacity: 0; }
.is-solid .brand .logo-on-light { opacity: 1; }

.site-nav { display: flex; gap: clamp(16px, 2.4vw, 32px); margin-left: auto; font-size: .95rem; }
.site-nav a { text-decoration: none; white-space: nowrap; padding: 12px 0; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--champ); }
.header-actions { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.lang { font: 500 .9rem/1 var(--font-body); text-decoration: none; letter-spacing: .08em; padding: 8px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.lang:lang(ja) { font-family: var(--font-ja); letter-spacing: .04em; }
.site-header:not(.is-solid) .btn { background: var(--ivory); color: var(--navy); }
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 420px) {
  .site-header { gap: 12px; }
  .header-actions { gap: 6px; }
  .btn-small { padding-inline: .9rem; }
}
/* Longer text (e.g. a phone's automatic translation) wraps inside the button
   instead of pushing the language link and menu button off the screen. */
.header-actions { min-width: 0; }
.header-actions > :not(.btn) { flex: none; }
.header-actions .btn-small { min-width: 0; white-space: normal; text-align: center; line-height: 1.15; }

/* ---------- Phone menu ---------- */

.menu-btn {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 0; background: none; color: inherit; cursor: pointer;
}
.menu-btn span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: currentColor; border-radius: 1px;
  transition: transform var(--duration-fast) var(--spring);
}
.menu-btn { touch-action: manipulation; transition: opacity var(--duration-fast) var(--ease-out); }
.menu-btn:active { opacity: .55; transition-duration: 0s; }
.menu-btn span:first-child { top: 18px; }
.menu-btn span:last-child { top: 25px; }
.menu-open .menu-btn span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu-panel, .menu-scrim { display: none; }
@media (max-width: 1000px) {
  .menu-btn { display: block; }
  .menu-panel, .menu-scrim { display: block; }
}

/* The panel unrolls from under the header; links follow a beat behind. */
.menu-panel {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  padding: 4px var(--gutter) 28px;
  background: rgb(248 244 235 / .97);
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: var(--shadow-2);
  color: var(--navy);
  clip-path: inset(0 0 100% 0 round 0 0 var(--r-card) var(--r-card));
  visibility: hidden;
  transition: clip-path var(--duration-medium) var(--ease-smooth-out), visibility 0s linear var(--duration-medium);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .menu-panel { background: rgb(248 244 235 / .8); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
}
.menu-open .menu-panel {
  clip-path: inset(0 0 -60px 0 round 0 0 var(--r-card) var(--r-card));
  visibility: visible;
  transition: clip-path var(--duration-slow) var(--spring), visibility 0s;
}
.menu-links { display: grid; }
.menu-links a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid rgb(15 27 60 / .08);
  font: 500 1.2rem/1.4 var(--font-ja); letter-spacing: .02em;
  text-decoration: none;
}
:lang(en) .menu-links a { font: 500 1.35rem/1.3 var(--font-latin); letter-spacing: -.01em; }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 24px; }
.menu-tel { padding: 10px 0; font-weight: 500; text-underline-offset: 5px; text-decoration-color: var(--champ); }
.menu-links a, .menu-foot {
  opacity: 0; transform: translateY(calc(-1 * var(--distance-base)));
  transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-smooth-out);
}
.menu-open :is(.menu-links a, .menu-foot) {
  opacity: 1; transform: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--t-ui) var(--spring);
}
.menu-open .menu-links a:nth-child(1) { transition-delay: var(--duration-stagger); }
.menu-open .menu-links a:nth-child(2) { transition-delay: calc(var(--duration-stagger) * 2); }
.menu-open .menu-links a:nth-child(3) { transition-delay: calc(var(--duration-stagger) * 3); }
.menu-open .menu-links a:nth-child(4) { transition-delay: calc(var(--duration-stagger) * 4); }
.menu-open .menu-links a:nth-child(5) { transition-delay: calc(var(--duration-stagger) * 5); }
.menu-open .menu-links a:nth-child(6) { transition-delay: calc(var(--duration-stagger) * 6); }
.menu-open .menu-foot { transition-delay: calc(var(--duration-stagger) * 7); }
/* While open, a press dims instantly, with no stagger delay in the way. */
.menu-open .menu-links a:active { transition-delay: 0s; }

.menu-scrim {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 48;
  background: rgb(15 27 60 / .28);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-medium) var(--ease-smooth-out);
}
.menu-open .menu-scrim { opacity: 1; pointer-events: auto; transition: opacity var(--duration-slow) var(--ease-out); }

/* ---------- Scroll-expansion hero ---------- */

.xp {
  --p: 0;                 /* scroll progress 0 → 1, set by JS */
  position: relative;
  height: 170vh;
  background: var(--navy);
}
/* Phones: a shorter run, so the first words after the photo arrive sooner. */
@media (max-width: 600px) { .xp { height: 140vh; } }
.xp-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
  display: grid;
  place-items: center;
}
/* AVIF wrapper: the img inside keeps its own layout. */
picture { display: contents; }
/* Without this, the <source> tag becomes an empty grid cell and pushes the photo and text out of place. */
picture > source { display: none; }
.xp-bg, .xp-card, .xp-title { grid-area: 1 / 1; }
.xp-bg { position: absolute; inset: 0; opacity: calc(1 - var(--p)); }
.xp-bg img { width: 100%; height: 100%; object-fit: cover; }
.xp-bg::after { content: ""; position: absolute; inset: 0; background: rgb(15 27 60 / .8); }   /* the room stays dim so the photo card reads as a lit window */

.xp-card {
  position: relative;
  width: 95vw;
  height: 85vh;
  height: 85dvh;
  overflow: hidden;
  clip-path: inset(var(--inset-y, 30%) var(--inset-r, var(--inset-x, 30%)) var(--inset-y, 30%) var(--inset-l, var(--inset-x, 30%)) round var(--radius, 24px));
  will-change: clip-path;
}
.xp-media {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 38%;
  transform: scale(calc(1.14 - var(--p) * .14));
  transform-origin: 50% 45%;
}
.xp-scrim { position: absolute; inset: 0; background: var(--navy); opacity: calc(.64 - var(--p) * .52); }

.xp-title {
  position: relative; z-index: 2;
  text-align: center; color: var(--ivory);
  padding: 0 16px;
  text-shadow: 0 1px 24px rgb(15 27 60 / .45);
  pointer-events: none;
  transform: translateX(var(--shift, 0px));   /* stays centred on the opening card (wide screens) */
}
.xp-title h1 { margin: 0; font: 500 clamp(2.4rem, 6.2vw, 4.75rem)/1.3 var(--font-ja); letter-spacing: .02em; }
.xp-title h1:lang(en) { font: 400 clamp(2.6rem, 7.4vw, 6rem)/1.02 var(--font-latin); letter-spacing: -.02em; }
.xp-title h1:lang(en) .xp-right { font-style: italic; }
/* The two halves drift apart a little and soften away, instead of sliding off the screen. */
.xp-line {
  display: block;
  will-change: transform, opacity, filter;
  opacity: calc(1 - var(--p) * 3.2);   /* gone before the blur can smear across the faces */
  filter: blur(calc(var(--p) * 6px));
}
.xp-left  { transform: translateX(calc(var(--p) * -8vw)); }
.xp-right { transform: translateX(calc(var(--p) *  8vw)); }
.xp-en {
  margin: .9em 0 0;
  font: italic 400 clamp(1.1rem, 2.2vw, 1.6rem)/1.3 var(--font-latin);
  opacity: calc(1 - var(--p) * 2.2);
}
.xp-en:lang(ja) { font: 500 clamp(1rem, 1.9vw, 1.35rem)/1.5 var(--font-ja); font-style: normal; letter-spacing: .1em; }
.xp-en span, .xp-note span, .xp-kicker span { display: inline-block; }
/* What and where, above the motto: the first screen says it's a ballroom studio in Honmachi. */
.xp-kicker {
  display: block;
  margin: 0 0 clamp(14px, 2.4vh, 24px);
  font: 500 clamp(.95rem, 1.3vw, 1.1rem)/1.5 var(--font-ja);
  letter-spacing: .14em;
  opacity: calc(1 - var(--p) * 2.6);
}
.xp-kicker:lang(en), :lang(en) .xp-kicker { font: 600 clamp(.8rem, 1.1vw, .9rem)/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }

/* The practical promise, readable before any scrolling. */
.xp-note {
  margin: clamp(20px, 3.2vh, 32px) auto 0;
  padding-top: clamp(14px, 2vh, 20px);
  max-width: 34rem;
  border-top: 1px solid rgb(205 184 145 / .7);
  font: 500 clamp(.95rem, 1.5vw, 1.05rem)/1.7 var(--font-body);
  letter-spacing: .06em;
  opacity: calc(1 - var(--p) * 2.6);
}
.xp-note span + span { margin-left: .9em; }
:lang(en) .xp-note { letter-spacing: .02em; }
@media (max-width: 600px) { .xp-note span { display: block; } .xp-note span + span { margin-left: 0; } }

.xp-cue {
  position: absolute; bottom: clamp(20px, 4vh, 40px); left: 50%;
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, transparent, rgb(248 244 235 / .8));
  opacity: calc(1 - var(--p) * 4);
  animation: cue 2.4s var(--ease-out) infinite;
}
/* Once the photo starts to open the cue has faded out, so its loop stops too. */
.xp.is-opening .xp-cue { animation-play-state: paused; }
@keyframes cue {
  0%   { transform: translateY(-12px) scaleY(.4); transform-origin: top; }
  60%  { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(0) scaleY(1); opacity: 0; }
}

/* ---------- Intro ---------- */

.intro {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(72px, 10vw, 136px);
  text-align: center;
}
.intro-text { margin: 0 0 2.25rem; font: 500 clamp(1.2rem, 2.5vw, 1.6rem)/2 var(--font-ja); letter-spacing: .03em; }
.intro-text:lang(en) { font: 400 clamp(1.35rem, 2.6vw, 1.85rem)/1.45 var(--font-latin); letter-spacing: -.01em; }
.intro-text span { display: inline-block; }
.intro-note { margin: .9rem 0 0; color: var(--muted); font-size: .95rem; letter-spacing: .04em; }
.intro-note span { display: inline-block; }
.intro-note span + span::before { content: "·"; margin: 0 .6em; }
@media (max-width: 600px) { .intro-note span { display: block; } .intro-note span + span::before { content: none; } }

/* ---------- Lessons ---------- */

.lessons, .first { padding: clamp(80px, 11vw, 150px) 0; }
.section-head { max-width: 40rem; margin-bottom: clamp(32px, 5vw, 56px); }

.trial {
  display: grid;
  background: var(--ivory);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.trial-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 40% 30%; }
.trial-body { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 860px) {
  .trial { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .trial-photo { height: 100%; aspect-ratio: auto; min-height: 380px; }
}
.trial h3 { margin: 0 0 .5rem; font: 500 clamp(1.5rem, 2.4vw, 1.75rem)/1.5 var(--font-ja); letter-spacing: .04em; }
.trial h3:lang(en), :lang(en) .trial h3 { font: 500 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--font-latin); letter-spacing: -.01em; }
.trial h3 span { display: inline-block; }
.trial p { margin: 0; }
.trial .wit { margin-top: .75rem; }
.trial-tag { font-size: .9rem; letter-spacing: .12em; color: var(--leaf); margin-bottom: .5rem !important; font-weight: 600; }
:lang(en) .trial-tag { text-transform: uppercase; }
.trial-price {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid rgb(15 27 60 / .08);
}

.price { margin: 0; font: 400 clamp(1.6rem, 2.4vw, 2rem)/1 var(--font-latin); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.price span { font: 400 1rem/1 var(--font-body); color: var(--muted); margin-left: .3em; letter-spacing: 0; }
.trial .price { font-size: clamp(2.4rem, 4.4vw, 3.4rem); letter-spacing: -.02em; }
.price-note { margin: .5rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }
/* The beginner's way in leads its price notes: Navy and a touch heavier than the plain notes beneath. */
.price-note.price-lead { color: var(--navy); font-weight: 600; }
/* Under the trial button: a pointer to the practical rules, which live once in Booking. */
.policy-link { margin: 1rem 0 0 !important; }
:lang(ja) .policy-link .way-more { font-size: 1rem; }

/* The other ways in: a quiet priced list, one row each. */
/* Grouped inset list: one quiet surface, rows divided by inset hairlines. */
.ways {
  background: rgb(248 244 235 / .7);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: 0 clamp(20px, 3vw, 36px);
}
.way {
  display: grid;
  gap: .4rem 48px;
  padding: clamp(22px, 3vw, 32px) 0;
}
.way + .way { border-top: 1px solid rgb(15 27 60 / .08); }
@media (min-width: 700px) {
  .way { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .way-desc { grid-column: 1 / -1; grid-row: 2; }
  .way-price { grid-column: 2; grid-row: 1; text-align: right; }
}
@media (min-width: 1100px) {
  .way { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 19rem); gap: .4rem 40px; }
  .way-desc { grid-column: 2; grid-row: 1; }
  .way-price { grid-column: 3; }
}
.way :is(h3, h4) { margin: 0; font: 500 1.35rem/1.5 var(--font-ja); letter-spacing: .04em; }
:lang(en) .way :is(h3, h4) { font: 500 1.55rem/1.25 var(--font-latin); letter-spacing: -.01em; }
.way p { margin: 0; }
.dances { font-size: .95rem; color: var(--leaf); font-weight: 500; margin-top: .25rem !important; letter-spacing: .02em; }
.way .price-note { margin-top: .35rem; }
.way-desc { max-width: 36rem; }
@media (max-width: 699px) { .way-desc { line-height: 1.8; } }
.way-price { margin-top: .5rem; }
/* Home, phones: each row reads name → description → price, and its "see more" link comes last. */
@media (max-width: 699px) {
  .xp ~ .lessons .way-name { display: contents; }
  .xp ~ .lessons .way-more { order: 1; justify-self: start; margin-top: .25rem; }
}
@media (min-width: 700px) { .way-price { margin-top: 0; } }
.price-foot { margin: clamp(20px, 2.6vw, 28px) 0 0; padding-left: clamp(20px, 3vw, 36px); font-size: .95rem; color: var(--muted); }

/* ---------- About ---------- */

.about { padding: clamp(80px, 11vw, 150px) 0; }
.about-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 760px) { .about-grid { grid-template-columns: auto 1fr; gap: clamp(40px, 7vw, 96px); } }
@media (min-width: 760px) and (max-width: 979px) { .about-portrait img { width: 260px; } }
@media (max-width: 759px) { .about-text { order: -1; } }

.about-portrait { margin: 0; display: flex; align-items: flex-start; gap: 20px; }
.about-portrait img {
  width: min(360px, 66vw);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--r-photo);
  box-shadow: var(--shadow-photo);
}
.name-line { width: 1px; align-self: stretch; background: var(--champ); }
.name-tate {
  writing-mode: vertical-rl;
  font: 500 1.7rem/1 var(--font-ja);
  letter-spacing: .35em;
  padding-top: 4px;
}
.name-tate small { font: 400 .875rem/1 var(--font-ja); letter-spacing: .3em; color: var(--muted); margin-top: 1.2em; }
/* English: the name is turned on its side along the same line. */
.name-tate:lang(en), :lang(en) .name-tate {
  text-orientation: sideways;
  font: 500 1.6rem/1 var(--font-latin);
  letter-spacing: .06em;
}
:lang(en) .name-tate small { font: 500 .875rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; margin-top: 1.4em; }

.about-text { max-width: 36rem; }
.about-text > p:not(.eyebrow):not(.follow) { margin: 0; }
:lang(en) .about-text > p:not(.eyebrow):not(.follow) { max-width: 33rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 1.5rem 0 0; padding: 0; }
.chips li { background: var(--linen); border-radius: 999px; padding: 5px 14px; font-size: .95rem; }

/* ---------- First visit ---------- */

.first-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .first-grid { grid-template-columns: 1.1fr .9fr; gap: 72px; } }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.25rem 3.25rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.15em;
  font: italic 400 1.6rem/1 var(--font-latin);
  color: var(--oak);
}
.steps strong { display: block; font: 500 1.25rem/1.6 var(--font-ja); letter-spacing: .04em; margin-bottom: .15rem; }
:lang(en) .steps strong { font: 600 1.125rem/1.6 var(--font-body); letter-spacing: 0; }
.first-photo { margin: 0; }
.first-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-photo); box-shadow: var(--shadow-photo); }
@media (max-width: 899px) { .first-photo img { aspect-ratio: 16 / 9; } }

.faq { margin-top: clamp(64px, 8vw, 104px); max-width: 52rem; }
.events-faq .faq { margin-top: 0; }
.faq h3, .reviews h3 { margin: 0 0 1rem; font: 500 1.5rem/1.5 var(--font-ja); letter-spacing: .04em; }
:lang(en) :is(.faq, .reviews) h3 { font: 500 1.75rem/1.3 var(--font-latin); }
.faq h3 span, .reviews h3 span { display: block; font: italic 400 1rem/1.4 var(--font-latin); color: var(--oak); }
:lang(en) .faq h3 span { font: 500 .95rem/1.6 var(--font-ja); font-style: normal; }
.faq-group {
  background: var(--ivory);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: 0 clamp(18px, 3vw, 32px);
}
.faq details + details { border-top: 1px solid rgb(15 27 60 / .08); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 600;
  touch-action: manipulation;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.faq summary:active { opacity: .55; transition-duration: 0s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--duration-fast) var(--spring);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 1.25rem; color: var(--muted); max-width: 44rem; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height var(--duration-fast) var(--spring), opacity var(--duration-fast) var(--ease-out), content-visibility var(--duration-fast) allow-discrete;
  }
  .faq details[open]::details-content { height: auto; opacity: 1; }
}
:lang(en) .faq details p { max-width: 34rem; }

/* ---------- Access ---------- */

.access { padding: clamp(64px, 8vw, 112px) 0; }
.access-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 860px) { .access-grid { grid-template-columns: 1fr 1.2fr; gap: 72px; } }
address { font-style: normal; font-size: 1.0625rem; line-height: 1.8; }
.facts-list { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgb(15 27 60 / .1); display: grid; gap: .75rem; }
.facts-list div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; }
.facts-list dt { color: var(--muted); font-size: .95rem; }
.facts-list dd { margin: 0; }
.access-photo { margin: 0; }
.access-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-photo); box-shadow: var(--shadow-photo); }
@media (min-width: 860px) { .access-grid { align-items: stretch; } .access-photo img { height: 100%; aspect-ratio: auto; min-height: 420px; } }

/* ---------- Booking (navy) ---------- */

.booking { background: var(--navy); color: var(--ivory); padding: clamp(80px, 11vw, 150px) 0; }
/* Light text on navy: a hair more tracking and smoother rendering. */
.booking-info, .site-footer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: .01em; }
.booking .eyebrow { color: var(--champ); }
.booking .eyebrow span { color: var(--on-navy-muted); }
.booking .follow { color: var(--champ); }
.booking .small { color: var(--on-navy-muted); font-size: 1rem; }
.booking .tbc { color: var(--champ); }
.booking-inner { display: grid; gap: 40px; }
.booking-form { width: 100%; max-width: 40rem; }
@media (min-width: 940px) {
  .booking-inner {
    grid-template-columns: 1fr 1.15fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "info form" "contact form";
    gap: 0 72px;
    align-items: start;
  }
  .booking-info { grid-area: info; }
  .booking-form { grid-area: form; max-width: none; }
  .booking-contact { grid-area: contact; }
}

.reassure { list-style: none; margin: 0; padding: 0; }
.reassure li { position: relative; padding: 0 0 1.1rem 1.9rem; font-size: 1rem; line-height: 1.75; color: var(--on-navy-body); }
.reassure li::before {
  content: "";
  position: absolute; left: 2px; top: .5em;
  width: .7em; height: .38em;
  border-left: 2px solid var(--champ); border-bottom: 2px solid var(--champ);
  transform: rotate(-45deg);
}
.reassure strong { display: block; font-weight: 600; color: var(--ivory); }
.reassure li > span { display: inline-block; }

.contact { margin: 0; padding-top: 1.25rem; border-top: 1px solid rgb(205 184 145 / .35); display: grid; gap: 0; }
.contact div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; align-items: center; }
.contact dt { color: var(--on-navy-muted); font-size: .95rem; }
.contact dd { margin: 0; overflow-wrap: anywhere; }
.contact a { display: inline-block; padding: 10px 0; text-underline-offset: 4px; text-decoration-color: var(--champ); }

.booking-form {
  background: #fff;
  color: var(--navy);
  border-radius: var(--r-card);
  box-shadow: 0 2px 4px rgb(5 10 25 / .2), 0 24px 48px -16px rgb(5 10 25 / .45), 0 60px 120px -60px rgb(5 10 25 / .6);
  padding: clamp(20px, 4vw, 40px);
  display: grid;
  gap: 20px;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; gap: 20px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.booking-form label, .booking-form legend { font-weight: 600; font-size: .95rem; }
.opt { font-weight: 400; color: var(--muted); }
.booking-form input, .booking-form select, .booking-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #8C877C;
  border-radius: var(--r-field);
  background: #fff;
  color: var(--navy);
  font: 400 1rem/1.5 var(--font-body);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--spring);
}
.booking-form textarea { resize: vertical; }
/* Focus: a soft navy halo grows around the field, plus a crisp border. */
.booking-form :is(input, select, textarea):focus-visible { outline: 2px solid transparent; border-color: var(--navy); box-shadow: 0 0 0 4px rgb(15 27 60 / .14); }
.booking-form [aria-invalid="true"] { border-color: #A3261B; border-width: 2px; }
.times { border: 0; margin: 0; padding: 0; gap: 6px; }
.times legend { padding: 0; margin-bottom: 6px; }
.field-hint { margin: -2px 0 4px; font-size: .95rem; line-height: 1.6; color: var(--muted); }
/* Under the send button: what happens next, before anyone presses it. */
.submit-note { margin: -4px 0 0; font-size: .95rem; line-height: 1.6; color: var(--muted); text-align: center; }
.times label { font-weight: 400; margin-top: 6px; }
.times input { min-width: 0; max-width: 100%; }
/* Sunday-only bookings: the date and its start time sit side by side. */
.sunday-pick, .time-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8.5rem); gap: 8px; }
.times .other-day { margin: 10px 0 0; }
.btn-block { width: 100%; font-size: 1.05rem; padding: 1.05rem; }
.btn-block:disabled { opacity: .6; cursor: progress; }
/* Under the fields, just above the send button: what the details are used for. */
.form-privacy { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--muted); }
.form-privacy a { color: var(--navy); text-underline-offset: 4px; }
.form-status { margin: 0; font-size: .95rem; line-height: 1.7; }
.form-status:empty { display: none; }
.form-status[data-state] { padding: 12px 14px; border-radius: var(--r-field); background: #F4F1E8; }
.form-status:is([data-state="invalid"], [data-state="error"]) { background: #FBEDEA; color: #8A1F16; }
.form-status[data-state="sent"] { background: #EAF2E6; color: #26401F; }
/* A status message settles in rather than popping: the answer to "did it work?" arrives gently. */
.form-status[data-state] { animation: status-in var(--duration-fast) var(--ease-arrive); }
@keyframes status-in { from { opacity: 0; transform: translateY(calc(-1 * var(--distance-micro))); } }
@media (prefers-reduced-motion: reduce) { @keyframes status-in { from { opacity: 0; } } }
.booking-form .form-alert { scroll-margin-top: calc(var(--header-h) + 16px); }

/* After a trial button is tapped, the form card greets the eye with one soft champagne ring. */
.booking-form { outline: 2px solid transparent; outline-offset: 2px; }
.booking-form :is(input, select, textarea) { -webkit-appearance: none; appearance: none; }
.booking-form select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F1B3C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
.booking-form.is-arriving { animation: form-arrive .8s var(--ease-arrive); }   /* deliberately between tokens: a greeting, not a flash */
@keyframes form-arrive {
  0%   { outline-color: rgb(205 184 145 / 0);  outline-offset: 2px; }
  25%  { outline-color: rgb(205 184 145 / .9); outline-offset: 6px; }
  100% { outline-color: rgb(205 184 145 / 0);  outline-offset: 16px; }
}

/* ---------- Lessons & prices: motion and hover ---------- */

/* A short champagne rule draws in under the section heading as it arrives. */
.lessons .section-head::after {
  content: ""; display: block; width: 56px; height: 1px; margin-top: 22px;
  background: var(--champ);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-very-slow) var(--spring) var(--duration-micro);
}
.js .lessons .section-head.is-in::after, html:not(.js) .lessons .section-head::after { transform: scaleX(1); }

/* Trial panel: the photo settles from a slight zoom on the same soft spring as the reveal;
   the text follows one stagger beat apart. */
.trial-photo { transition: transform var(--t-soft) var(--spring); }
.js .trial[data-reveal] .trial-photo { transform: scale(1.03); }
.js .trial[data-reveal].is-in .trial-photo { transform: none; }
.js .trial[data-reveal] .trial-body > * { opacity: 0; transform: translateY(var(--distance-medium)); transition: opacity var(--duration-very-slow) var(--ease-out), transform var(--t-soft) var(--spring); }
.js .trial[data-reveal].is-in .trial-body > * { opacity: 1; transform: none; }
.js .trial[data-reveal].is-in .trial-body > :nth-child(2) { transition-delay: calc(var(--duration-stagger) * 1); }
.js .trial[data-reveal].is-in .trial-body > :nth-child(3) { transition-delay: calc(var(--duration-stagger) * 2); }
.js .trial[data-reveal].is-in .trial-body > :nth-child(4) { transition-delay: calc(var(--duration-stagger) * 3); }
.js .trial[data-reveal].is-in .trial-body > :nth-child(5) { transition-delay: calc(var(--duration-stagger) * 4); }
.js .trial[data-reveal].is-in .trial-body > :nth-child(6) { transition-delay: calc(var(--duration-stagger) * 5); }

/* Price rows and the trial panel are information, not links: they have no hover state at all.
   Only real controls (buttons, links) respond to the pointer. */


/* ---------- Inner pages: calm page header (The One Wow Rule) ---------- */

.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--champ); text-decoration-thickness: 2px; }
.menu-links a[aria-current="page"] { color: var(--leaf); }

.page-head { padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(64px, 9vw, 120px); }
.page-head-text { max-width: 40rem; margin-bottom: clamp(36px, 5vw, 56px); }
.page-head h1 {
  margin: 0 0 1.5rem;
  font: 500 clamp(2rem, 4.6vw, 3.4rem)/1.4 var(--font-ja);
  letter-spacing: .02em;
}
.page-head h1 > span { display: inline-block; }
/* English pages: the eyebrow sits inside the h1, so the heading says what and where for search. */
.page-head h1 > .h1-kicker { display: block; }
:lang(en) .page-head h1 { font: 500 clamp(2.2rem, 5vw, 3.75rem)/1.08 var(--font-latin); letter-spacing: -.018em; }
:lang(en) .page-head h1 em { font-weight: 400; }
.page-head .lead { color: var(--navy); margin: 0; max-width: 36rem; }
:lang(en) .page-head .lead { max-width: 33rem; }
.page-head .text-link { margin-top: 1rem; }
/* The practical promise, on the first screen: what a first visit costs and who it's for. */
.page-promise {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
  margin: 1.75rem 0 0; padding-top: 1.1rem; max-width: 34rem;
  border-top: 1px solid var(--champ);
  font-size: 1rem; line-height: 1.6; letter-spacing: .04em;
}
:lang(en) .page-promise { letter-spacing: .01em; }
.page-promise span { display: inline-block; }

.page-photo { margin: 0; }
.page-photo img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 35%;
  border-radius: var(--r-photo); box-shadow: var(--shadow-photo);
}
@media (min-width: 960px) {
  .page-head { padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px)); }
  .page-head .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(48px, 6vw, 88px); align-items: center; }
  .page-head-text { margin-bottom: 0; }
  .page-photo img { aspect-ratio: 4 / 3.4; }
}

/* Lessons page: the longer price list staggers on, and the practical notes sit under it. */
.js [data-reveal].is-in .way:nth-child(4) { transition-delay: calc(var(--duration-stagger) * 3); }
.js [data-reveal].is-in .way:nth-child(5) { transition-delay: calc(var(--duration-stagger) * 4); }
.way-price .tbc { font-size: 1rem; line-height: 1.6; }
.tbc-line, .reassure .tbc-line { display: block; margin-top: .25rem; font-size: .9rem; }

/* Prices as a beginner's path: 01 the trial, 02 keep going, 03 learning in a group (open to all),
   then a separate group for people who came with a specific occasion in mind. */
.step-num { font: italic 400 1.45rem/1 var(--font-latin); color: var(--oak); letter-spacing: 0; text-transform: none; margin-right: .6rem; }
/* On the Lessons page the trial's tag is step 01 of the path, so it takes the step-label role. */
.trial-tag:has(.step-num) { display: flex; align-items: baseline; font: 500 1.1rem/1.5 var(--font-ja); letter-spacing: .06em; color: var(--navy); }
:lang(en) .trial-tag:has(.step-num) { font: 600 1rem/1.5 var(--font-body); letter-spacing: .02em; text-transform: none; }
.path { display: grid; gap: clamp(32px, 4vw, 44px); }
.path-label {
  display: flex; align-items: baseline;
  margin: 0 0 .85rem; padding-left: clamp(20px, 3vw, 36px);
  font: 500 1.1rem/1.5 var(--font-ja); letter-spacing: .06em;
}
:lang(en) .path-label { font: 600 1rem/1.5 var(--font-body); letter-spacing: .02em; }
.path-aside { margin-top: clamp(56px, 7vw, 80px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid rgb(15 27 60 / .1); }
.path-aside .path-label { padding-left: 0; color: var(--leaf); }
.dances a { text-decoration: underline; text-decoration-color: var(--champ); text-underline-offset: 4px; }
/* A row that has its own page says so in words, as a plain text link under the name. */
.way-more {
  display: inline-block; margin-top: .35rem; padding: 10px 0; margin-bottom: -10px;
  font-size: .95rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--champ);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: text-decoration-color var(--duration-medium) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.way-more:hover { text-decoration-color: var(--navy); transition-duration: var(--duration-fast); }
.way-more:active { opacity: .55; transition-duration: 0s; }
/* Inline padding widens the tap area to ~44px without moving the line. */
.checks a { padding-block: 8px; text-decoration: underline; text-decoration-color: var(--champ); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color var(--duration-medium) var(--ease-out); }
.checks a:hover { text-decoration-color: var(--navy); transition-duration: var(--duration-fast); }

/* Reassurance ticks inside the trial panel. */
.checks { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.checks li { position: relative; padding: .3rem 0 .3rem 1.75rem; line-height: 1.65; }
:lang(ja) .checks li { line-height: 1.8; }
.checks li::before {
  content: ""; position: absolute; left: 2px; top: .85em;
  width: .7em; height: .38em;
  border-left: 1.5px solid var(--leaf); border-bottom: 1.5px solid var(--leaf);
  transform: rotate(-45deg);
}

/* Small print under the price headline. */
.price-tax { margin: 0; font-size: .95rem; color: var(--muted); }

/* The 20-lesson package sits in the path, but its price speaks a step quieter than a single lesson. */
.way-quiet .price { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }

/* The trial's 45 minutes, as a quiet band across the foot of the trial panel:
   four beats joined by a champagne line (a row on wide screens, a timeline on phones). */
.trial-flow {
  grid-column: 1 / -1;
  padding: clamp(22px, 3vw, 32px) clamp(24px, 4vw, 48px) clamp(24px, 3.4vw, 36px);
  border-top: 1px solid rgb(15 27 60 / .08);
  background: rgb(239 233 221 / .45);
}
.trial-flow-label { margin: 0 0 1rem; font: 500 1.05rem/1.5 var(--font-ja); letter-spacing: .06em; }
:lang(en) .trial-flow-label { font: italic 400 1.2rem/1.4 var(--font-latin); letter-spacing: 0; }
.trial-flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.trial-flow li { position: relative; padding: 0 0 1rem 1.6rem; font-size: 1rem; line-height: 1.65; color: var(--muted); }
:lang(ja) .trial-flow li { line-height: 1.8; }
.trial-flow li strong { display: block; color: var(--navy); font-weight: 600; font-size: 1.0625rem; }
.trial-flow li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ivory); box-shadow: 0 0 0 1.5px var(--oak);
}
.trial-flow li::after { content: ""; position: absolute; left: 3px; top: calc(.5em + 10px); bottom: -2px; width: 1px; background: var(--champ); }
.trial-flow li:last-child { padding-bottom: 0; }
.trial-flow li:last-child::after { display: none; }
@media (min-width: 760px) {
  .trial-flow ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 28px); }
  .trial-flow li { padding: 1.25rem 0 0; }
  .trial-flow li::before { top: 0; }
  .trial-flow li::after { left: 12px; right: calc(-1 * clamp(16px, 2.4vw, 28px)); top: 3px; bottom: auto; width: auto; height: 1px; }
}

/* Dances you can learn: a coda to the prices, three families each a short run of chips. */
.dances-block { margin-top: clamp(64px, 8vw, 104px); }
.dances-title { margin: 0 0 1.5rem; font: 500 clamp(1.6rem, 2.6vw, 1.9rem)/1.45 var(--font-ja); letter-spacing: .04em; }
:lang(en) .dances-title { font: 500 clamp(1.9rem, 3vw, 2.25rem)/1.15 var(--font-latin); letter-spacing: -.015em; }
.dances-lead { max-width: 40rem; margin: -.5rem 0 clamp(28px, 3.5vw, 40px); }
.families { display: grid; gap: clamp(28px, 4vw, 40px); }
@media (min-width: 900px) { .families { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.family { padding-top: 1.25rem; border-top: 1px solid var(--champ); }
.family h4 { margin: 0 0 .9rem; font: 500 1.1rem/1.5 var(--font-ja); letter-spacing: .06em; }
:lang(en) .family h4 { font: 600 1rem/1.5 var(--font-body); letter-spacing: .02em; }
.family .chips { margin: 0; }
.family-desc { margin: -.4rem 0 1rem; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.chip-tag { margin-left: .2em; font-size: .875rem; color: var(--muted); letter-spacing: .02em; }
.styles-note { max-width: 44rem; margin: clamp(28px, 3.5vw, 40px) 0 0; font-size: .95rem; line-height: 1.7; }
.styles-note strong { display: block; margin-bottom: .25rem; }
.family .chips li { background: var(--ivory); }
.dances-block .wit { margin-top: clamp(28px, 3.5vw, 40px); }
/* The full list is optional reading: it waits behind one quiet opener, so the path from prices to the form stays short. */
.dances-more > summary {
  display: inline-flex; align-items: center; gap: .75rem; min-height: 44px;
  list-style: none; cursor: pointer; touch-action: manipulation;
  font-weight: 600; color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--champ); text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-decoration-color var(--duration-medium) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.dances-more > summary::-webkit-details-marker { display: none; }
.dances-more > summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--duration-fast) var(--spring);
}
.dances-more[open] > summary::after { transform: translateY(20%) rotate(-135deg); }
.dances-more > summary:hover { text-decoration-color: var(--navy); transition-duration: var(--duration-fast); }
.dances-more > summary:active { opacity: .55; transition-duration: 0s; }
.dances-more .families { margin-top: clamp(24px, 3vw, 36px); }
@supports (interpolate-size: allow-keywords) {
  .dances-more { interpolate-size: allow-keywords; }
  /* Closing is a beat quicker than opening, on the smooth surface curve (like the phone menu). */
  .dances-more::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height var(--duration-medium) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-out), content-visibility var(--duration-medium) allow-discrete;
  }
  .dances-more[open]::details-content {
    height: auto; opacity: 1;
    transition: height var(--duration-slow) var(--spring), opacity var(--duration-very-slow) var(--ease-out), content-visibility var(--duration-slow) allow-discrete;
  }
}
/* A title split into phrases (特別な日のための｜レッスン) keeps each phrase whole. */
.way-name h4 > span { display: inline-block; }
.js [data-reveal] .family { opacity: 0; transform: translateY(var(--distance-medium)); transition: opacity var(--duration-very-slow) var(--ease-out), transform var(--t-soft) var(--spring); }
.js [data-reveal].is-in .family { opacity: 1; transform: none; }
.js [data-reveal].is-in .family:nth-child(2) { transition-delay: var(--duration-stagger); }
.js [data-reveal].is-in .family:nth-child(3) { transition-delay: calc(var(--duration-stagger) * 2); }

@media (prefers-reduced-motion: reduce) {
  .dances-more > summary::after { transition: none; }
  .dances-more::details-content, .dances-more[open]::details-content { transition: opacity .2s linear, content-visibility .2s allow-discrete; }
  .js [data-reveal] .family { transform: none; transition: opacity .3s linear; transition-delay: 0s !important; }
}

/* ---------- Group Classes page ---------- */

.classes { padding: clamp(80px, 11vw, 150px) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.inline-link { text-decoration: underline; text-decoration-color: var(--champ); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color var(--duration-fast) var(--ease-out); }
.inline-link:hover { text-decoration-color: var(--navy); }

/* The two weekly slots: a quiet pair under champagne rules, times in Bodoni. */
/* The two evenings, each with its own rhythm: Wednesday keeps one theme all month, Friday changes weekly. */
.weekly { display: grid; gap: clamp(28px, 4vw, 48px); margin-bottom: clamp(44px, 5.5vw, 64px); }
@media (min-width: 640px) { .weekly { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot-theme { margin-top: .9rem !important; max-width: 26rem; line-height: 1.7; }
.slot-kind { display: block; font-size: .95rem; font-weight: 600; color: var(--leaf); letter-spacing: .04em; }
:lang(en) .slot-kind { letter-spacing: .01em; }
.section-note { margin: 0; font-size: .95rem; color: var(--muted); }
.slot { padding-top: 1.1rem; border-top: 1px solid var(--champ); }
.slot p { margin: 0; }
.slot-day { font: 500 1.1rem/1.5 var(--font-ja); letter-spacing: .06em; }
:lang(en) .slot-day { font: 600 1rem/1.5 var(--font-body); letter-spacing: .02em; }
.slot-time { margin-top: .35rem !important; font: 400 clamp(1.6rem, 2.4vw, 2rem)/1 var(--font-latin); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.slot-time span { font: 400 1rem/1 var(--font-body); color: var(--muted); margin-left: .2em; letter-spacing: 0; }

/* This month's classes: one grouped list, a dated row per class. */
.dates { list-style: none; margin: 0; }
.date-row { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: .25rem 20px; align-items: baseline; padding: clamp(20px, 2.6vw, 26px) 0; }
.date-row + .date-row { border-top: 1px solid rgb(15 27 60 / .08); }
.date { margin: 0; display: grid; gap: .35rem; }
.date-num { font: 400 clamp(1.6rem, 2.4vw, 2rem)/1 var(--font-latin); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.date-day { font-size: .95rem; line-height: 1.2; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.date-what h3 { margin: 0; font: 500 1.2rem/1.5 var(--font-ja); letter-spacing: .04em; }
:lang(en) .date-what h3 { font: 500 1.45rem/1.25 var(--font-latin); letter-spacing: -.01em; }
.date-what p { margin: 0; }
.date-row .text-link { grid-column: 2; margin-top: .25rem; font-size: 1rem; }
@media (min-width: 700px) {
  .date-row { grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: .25rem 32px; align-items: center; }
  .date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: .6rem; }
  .date-row .text-link { grid-column: 3; margin-top: 0; }
}
/* Phones: date on its own line, the dance across the full width, then time and link share a line,
   so six classes read as one short list instead of a long scroll. */
@media (max-width: 699px) {
  .date-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date date" "title title" "time link"; gap: .3rem 16px; padding: 18px 0 14px; }
  .date { grid-area: date; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: .6rem; }
  .date-what { display: contents; }
  .date-what h3 { grid-area: title; }
  .date-what .dances { grid-area: time; align-self: center; margin-top: 0 !important; }
  .date-row .text-link { grid-area: link; margin-top: 0; justify-self: end; }
}
/* A class already in the request says so in the list, in Leaf, with a drawn tick. */
.date-row .text-link { transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
.date-row.is-picked .text-link { color: var(--leaf); text-decoration-color: rgb(78 99 71 / .35); }
.picked-mark {
  display: inline-block; width: 11px; height: 6px; margin: 0 .6em 0 .1em;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.28em) rotate(-45deg);
  animation: picked-in var(--duration-fast) var(--spring) both;
}
@keyframes picked-in { from { opacity: 0; transform: translateY(-.28em) rotate(-45deg) scale(.4); } }
.dates-empty { margin: 0; padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px); background: rgb(248 244 235 / .7); border-radius: var(--r-card); box-shadow: var(--shadow-1); color: var(--muted); }
.classes > .container > .wit { margin-top: clamp(24px, 3vw, 32px); }

/* Recent themes: a coda of chips under a champagne rule. */
.recent { margin-top: clamp(56px, 7vw, 88px); padding-top: 1.25rem; border-top: 1px solid var(--champ); max-width: 52rem; }
.recent-title { margin: 0 0 .9rem; font: 500 1.1rem/1.5 var(--font-ja); letter-spacing: .06em; }
:lang(en) .recent-title { font: 600 1rem/1.5 var(--font-body); letter-spacing: .02em; }
.recent .chips { margin: 0; }
.recent .chips li { background: var(--ivory); }

/* The dated rows stagger on like the lesson rows; prices sit under a list with their note. */
.js [data-reveal]:has(.date-row) { transform: none; filter: none; }
.js [data-reveal] .date-row { opacity: 0; transform: translateY(var(--distance-medium)); transition: opacity var(--duration-very-slow) var(--ease-out), transform var(--t-soft) var(--spring); }
.js [data-reveal].is-in .date-row { opacity: 1; transform: none; }
.js [data-reveal].is-in .date-row:nth-child(2) { transition-delay: .04s; }
.js [data-reveal].is-in .date-row:nth-child(3) { transition-delay: .08s; }
.js [data-reveal].is-in .date-row:nth-child(4) { transition-delay: .12s; }
.js [data-reveal].is-in .date-row:nth-child(5) { transition-delay: .16s; }
.js [data-reveal].is-in .date-row:nth-child(n+6) { transition-delay: .2s; }
.classes .section-head::after {
  content: ""; display: block; width: 56px; height: 1px; margin-top: 22px;
  background: var(--champ);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-very-slow) var(--spring) var(--duration-micro);
}
.js .classes .section-head.is-in::after, html:not(.js) .classes .section-head::after { transform: scaleX(1); }
.price-foot { max-width: 44rem; line-height: 1.75; }
:lang(en) .price-foot { max-width: 36rem; }
.price-foot + .wit { margin-top: 1rem; padding-left: clamp(20px, 3vw, 36px); }
.first .steps .tbc-line { font-size: .95rem; }
/* The shoes are the subject: a squarer crop keeps the floor and both pairs of feet in view. */
.first-photo .photo-feet { aspect-ratio: 1; object-position: 66% 100%; }
@media (max-width: 899px) { .first-photo .photo-feet { aspect-ratio: 16 / 9; object-position: 60% 92%; } }

/* Class picks in the form: tick boxes built from the date list. The chosen ones read as a quiet
   confirmation ("this is what you asked for"); a box chosen from the list greets the eye once. */
.picks { border: 0; margin: 0; padding: 0; gap: 6px; }
.picks legend { padding: 0; margin-bottom: 6px; }
.pick-list { display: grid; gap: 8px; }
.pick-list:empty { display: none; }
:lang(ja) .pick span { line-break: strict; word-break: auto-phrase; }
.pick {
  position: relative;
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  min-height: 48px; padding: 12px 14px;
  border: 1px solid #8C877C; border-radius: var(--r-field);
  font-weight: 400 !important; font-size: 1rem !important; line-height: 1.5;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.pick:hover { border-color: var(--navy); }
/* When on the first line, the dance beneath it, so the list scans by date. */
.pick-when { display: block; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pick-what { display: block; }
.pick input {
  -webkit-appearance: none; appearance: none;
  width: 22px !important; min-height: 0 !important; height: 22px; margin: 0; padding: 0 !important;
  border: 1.5px solid var(--navy) !important; border-radius: 6px !important; background: #fff;
  display: grid; place-items: center;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.pick input::after {
  content: ""; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--ivory); border-bottom: 2px solid var(--ivory);
  transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: transform var(--duration-fast) var(--spring), opacity var(--duration-quick) var(--ease-out);
}
.pick input:checked { background: var(--navy); }
.pick input:checked::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.pick:has(input:checked) { background: #F4F1E8; border-color: var(--navy); }
.pick:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.pick input:focus-visible { outline: none; box-shadow: none !important; }
.picks.is-invalid .pick { border-color: #A3261B; }
.pick.is-just-picked { animation: pick-arrive 1s var(--ease-arrive) .35s; }
@keyframes pick-arrive {
  0%   { box-shadow: 0 0 0 0 rgb(205 184 145 / 0); }
  30%  { box-shadow: 0 0 0 4px rgb(205 184 145 / .9); }
  100% { box-shadow: 0 0 0 10px rgb(205 184 145 / 0); }
}
.picks + .field, .picks { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Browser surfaces in the palette. */
::selection { background: rgb(205 184 145 / .5); color: var(--navy); }
.booking ::selection { background: rgb(205 184 145 / .45); color: var(--ivory); }
.booking-form ::selection { color: var(--navy); }
.booking-form { caret-color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .date-row { transform: none; transition: opacity .3s linear; transition-delay: 0s !important; }
  .pick, .pick input, .pick input::after { transition: none; }
  .picked-mark { animation: none; }
  @keyframes pick-arrive { 0%, 100% { box-shadow: 0 0 0 4px rgb(205 184 145 / 0); } 30% { box-shadow: 0 0 0 4px rgb(205 184 145 / .9); } }
  .classes .section-head::after { transform: scaleX(1); transition: none; }
}
@media (prefers-contrast: more) { .dates-empty { box-shadow: none; border: 1px solid var(--navy); } }

/* ---------- Champagne buttons ----------
   Magic UI "Shimmer Button", finished like a metallic button and rewritten in plain CSS:
   a navy face set in a fine champagne rim, resting on soft layered shadows. On hover a soft
   highlight drifts once around the rim; on press the face sinks a pixel and a faint glow opens
   where the finger landed. Nothing loops. */
@property --btn-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.btn:not(.btn-small) {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #1C2A53 0%, var(--navy) 58%, #0D1835 100%);
  text-shadow: 0 1px 1px rgb(5 10 25 / .35);
  box-shadow:
    0 0 0 1px rgb(205 184 145 / .32),
    inset 0 1px 0 rgb(248 244 235 / .14),
    inset 0 -8px 14px rgb(248 244 235 / .04),
    0 1px 2px rgb(15 27 60 / .16),
    0 6px 12px -4px rgb(15 27 60 / .16),
    0 18px 30px -16px rgb(15 27 60 / .24);
  transition: box-shadow var(--duration-medium) var(--ease-out), transform var(--t-ui) var(--spring), filter var(--duration-fast) var(--ease-out);
}
/* Face light: a soft glow from the top that warms in on hover (keeps the gradient, no colour jump). */
.btn:not(.btn-small)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% -20%, rgb(241 228 198 / .16), transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-medium) var(--ease-out);
}
/* The drifting highlight: wide, soft and low-contrast, painted only on the 1px rim. */
.btn:not(.btn-small)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--btn-angle),
    transparent 0 38%,
    rgb(205 184 145 / .18) 55%,
    rgb(246 236 212 / .85) 72%,
    rgb(205 184 145 / .18) 88%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}
.btn:not(.btn-small):is(:hover, :focus-visible, .is-glint)::before { animation: btn-drift 2.8s cubic-bezier(.65, 0, .35, 1) 1; }
@keyframes btn-drift {
  0%   { --btn-angle: -40deg; opacity: 0; }
  22%  { opacity: 1; }
  74%  { opacity: 1; }
  100% { --btn-angle: 320deg; opacity: 0; }
}
.btn:not(.btn-small):hover {
  background: linear-gradient(180deg, #1C2A53 0%, var(--navy) 58%, #0D1835 100%);
  box-shadow:
    0 0 0 1px rgb(205 184 145 / .5),
    inset 0 1px 0 rgb(248 244 235 / .18),
    inset 0 -8px 14px rgb(248 244 235 / .06),
    0 1px 2px rgb(15 27 60 / .2),
    0 4px 8px -3px rgb(15 27 60 / .2),
    0 10px 18px -10px rgb(15 27 60 / .24);
  transition-duration: var(--duration-fast), var(--t-ui), var(--duration-fast);
}
.btn:not(.btn-small):hover::after { opacity: 1; transition-duration: var(--duration-fast); }
/* Press: the face sinks (1px down, 98%) with a soft inner shadow, at once. */
.btn:not(.btn-small):active {
  transform: translateY(1px) scale(.98);
  filter: none;
  box-shadow:
    0 0 0 1px rgb(205 184 145 / .45),
    inset 0 2px 4px rgb(5 10 25 / .4),
    inset 0 1px 2px rgb(5 10 25 / .3),
    0 1px 2px rgb(15 27 60 / .2);
  transition-duration: .1s, .1s, .1s;
}
.btn-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(246 236 212 / .32) 0%, rgb(246 236 212 / 0) 70%);
  animation: btn-glow .7s var(--ease-arrive) forwards;
}
@keyframes btn-glow { from { transform: scale(0); opacity: 1; } to { transform: scale(7); opacity: 0; } }

/* ---------- Privacy policy: one calm reading column ---------- */

.policy-band { padding: clamp(56px, 8vw, 104px) 0; }
.policy { max-width: 44rem; }
.policy h2 { margin: 2.75rem 0 .75rem; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.5; }
.policy h2:first-child { margin-top: 0; }
:lang(en) .policy h2 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.25; }
.policy p, .policy ul { margin: 0 0 1rem; }
.policy ul { padding-left: 1.25rem; }
.policy li + li { margin-top: .5rem; }
.policy a { text-underline-offset: 4px; overflow-wrap: anywhere; }
.policy-date { margin-top: 3rem !important; color: var(--muted); font-size: .95rem; }

/* ---------- Footer ---------- */

.site-footer { background: #0B1530; color: var(--on-navy-muted); padding: 64px 0 32px; font-size: 1rem; }
.footer-grid { display: grid; gap: 32px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-grid > :first-child { grid-column: auto; } }
.footer-logo { width: 64px; margin-bottom: 16px; }
.site-footer p { margin: 0; }
.site-footer nav { display: grid; gap: 0; align-content: start; }
.site-footer nav a, .footer-links a { padding: 8px 0; }
.footer-links { display: grid; align-content: start; }
.footer-links a { justify-self: start; }
.site-footer a { color: var(--ivory); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--champ); text-underline-offset: 5px; }
.copyright { margin-top: 48px !important; padding-top: 20px; border-top: 1px solid rgb(205 184 145 / .25); font-size: .9rem; }
.copyright { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.copyright a { padding: 10px 0; margin: -10px 0; }   /* a comfortable tap target without changing the line */

/* ---------- Reduced motion: show the opened hero, nothing moves ---------- */

@media (prefers-reduced-motion: reduce) {
  .xp { height: auto; }
  .xp-stage { position: relative; height: auto; min-height: 100dvh; padding: calc(var(--header-h) + 3vh) 0 7.5vh; }
  .xp-bg, .xp-cue { display: none; }
  .xp-card { clip-path: none; }
  .xp-media { transform: none; }
  .xp-scrim { opacity: .62; }
  .xp-left, .xp-right { transform: none; opacity: 1; filter: none; }
  .xp-title { transform: none; }
  .xp-en, .xp-note, .xp-kicker { opacity: 1; }
  .btn, .text-link, .site-header, .brand img { transition: background-color .2s linear, color .2s linear, opacity .2s linear; }
  .btn:active { transform: none; }
  /* Lessons + buttons: no zoom, lift, rim drift or press glow; shadows and colour still respond. */
  .lessons .section-head::after { transform: scaleX(1); transition: none; }
  .trial-photo, .js .trial[data-reveal] .trial-photo { transform: none !important; transition: none; }
  .js .trial[data-reveal] .trial-body > * { transform: none; transition: opacity .3s linear; transition-delay: 0s !important; }
  .btn:not(.btn-small)::before { animation: none !important; }
  .btn:not(.btn-small):active { transform: none; }
  .btn-glow { display: none; }
  /* Reveals become a plain cross-fade: no movement, no blur. */
  .js [data-reveal], .js [data-reveal] :is(.steps li, .way) { transform: none; filter: none; transition: opacity .3s linear; transition-delay: 0s !important; }
  .faq summary::after { transition: none; }
  .faq details::details-content { transition: none; }
  /* Menu: a quick fade instead of unrolling; the form ring fades without growing. */
  .menu-panel, .menu-open .menu-panel { clip-path: none; transition: opacity .2s linear, visibility 0s linear .2s; opacity: 0; }
  .menu-open .menu-panel { opacity: 1; transition: opacity .2s linear, visibility 0s; }
  .menu-links a, .menu-foot, .menu-open :is(.menu-links a, .menu-foot) { opacity: 1; transform: none; transition: none; }
  .menu-btn span { transition: none; }
  @keyframes form-arrive {
    0%, 100% { outline-color: rgb(205 184 145 / 0); outline-offset: 6px; }
    30% { outline-color: rgb(205 184 145 / .9); outline-offset: 6px; }
  }
}

/* Reduced transparency: materials turn solid. Higher contrast: surfaces get a real edge. */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-solid, .menu-panel { background: var(--ivory) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  .site-header.is-solid, .menu-panel { background: var(--ivory) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 1px 0 var(--navy); }
  .trial, .ways, .faq-group { box-shadow: none; border: 1px solid var(--navy); }
}

/* ---------- Couple Experience page ---------- */

/* The panel photo is a smile seen over a shoulder: keep her face in frame at every crop. */
.couple-photo { object-position: 22% 40%; }
/* Who it suits: the reassurance ticks with a short title on each line. */
.couple-for { margin-top: 0; }
.couple-for li { padding-bottom: .9rem; }
.couple-for strong { display: block; font: 500 1.2rem/1.6 var(--font-ja); letter-spacing: .04em; }
:lang(en) .couple-for strong { font: 600 1.0625rem/1.6 var(--font-body); letter-spacing: 0; }
.couple-for li::before { top: 1.05em; }
.couple-aside { margin: 1.5rem 0 0; font-size: .95rem; color: var(--muted); max-width: 34rem; }
/* The FAQ is its own section here, so it needs no gap above it. */
.couple-faq { margin-top: 0; }
/* The hands detail: crop to the hand and shoulder, never half a face. The source is landscape with
   her mouth near the top, so cover alone always keeps it; the frame clips and the photo is drawn
   in a step, anchored at the bottom edge, until the crop starts below the chin. */
.first-photo:has(.photo-hands) { overflow: hidden; border-radius: var(--r-photo); box-shadow: var(--shadow-photo); }
.first-photo .photo-hands { border-radius: 0; box-shadow: none; aspect-ratio: 1; object-position: 25% 100%; scale: 1.51; transform-origin: 44% 100%; }
@media (max-width: 899px) { .first-photo .photo-hands { aspect-ratio: 16 / 9; scale: 1.27; transform-origin: 0 100%; } }
/* The section's light line closes the panel above it, so it sits centred under it with room to breathe. */
.couple-close { margin-top: clamp(28px, 3.5vw, 40px); text-align: center; }
/* The 45 minutes play out in order as the panel arrives: each beat rises 40ms after the last,
   and the champagne line draws on to the next beat (across on wide screens, down on phones). */
.js .trial[data-reveal] .couple-flow li { opacity: 0; transform: translateY(var(--distance-base)); transition: opacity var(--duration-very-slow) var(--ease-out), transform var(--t-soft) var(--spring); }
.js .trial[data-reveal] .couple-flow li::after { transform: scaleY(0); transform-origin: top; transition: transform var(--duration-very-slow) var(--ease-smooth-out); }
@media (min-width: 760px) { .js .trial[data-reveal] .couple-flow li::after { transform: scaleX(0); transform-origin: left; } }
.js .trial[data-reveal].is-in .couple-flow li, .js .trial[data-reveal].is-in .couple-flow li::after { opacity: 1; transform: none; }
.js .trial[data-reveal].is-in .couple-flow li:nth-child(1) { transition-delay: .12s; }
.js .trial[data-reveal].is-in .couple-flow li:nth-child(2) { transition-delay: .16s; }
.js .trial[data-reveal].is-in .couple-flow li:nth-child(3) { transition-delay: .2s; }
.js .trial[data-reveal].is-in .couple-flow li:nth-child(4) { transition-delay: .24s; }
.js .trial[data-reveal].is-in .couple-flow li:nth-child(1)::after { transition-delay: .2s; }
.js .trial[data-reveal].is-in .couple-flow li:nth-child(2)::after { transition-delay: .24s; }
.js .trial[data-reveal].is-in .couple-flow li:nth-child(3)::after { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .js .trial[data-reveal] .couple-flow li { transform: none; transition: opacity .3s linear; transition-delay: 0s !important; }
  .js .trial[data-reveal] .couple-flow li::after { transform: none !important; transition: none; }
}

/* ---------- Events page ---------- */

/* Events are an invitation: a short paragraph under each headline, kept to a reading width. */
.event-text { margin: 1.25rem 0 0; max-width: 34rem; }
.first .event-text + .checks { margin-top: 1rem; }
.first .facts-list { max-width: 34rem; }
.first .wit { margin-top: clamp(20px, 2.6vw, 28px); }
/* "No extra charge" sits where a price would, in the price's own voice but a step quieter. */
.price-free { margin: 0; font: 500 1.15rem/1.5 var(--font-ja); letter-spacing: .04em; color: var(--navy); }
:lang(en) .price-free { font: 400 clamp(1.3rem, 1.8vw, 1.55rem)/1.2 var(--font-latin); letter-spacing: -.01em; }
.event-close { margin-top: clamp(28px, 3.5vw, 40px); text-align: center; }
/* Page head on Events: two in-page links side by side (the list, and the wedding section further down). */
.head-links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 1rem 0 0; }
.head-links .text-link { margin-top: 0; }
.way-price .text-link { margin-top: .35rem; }
/* The beginner's way in: one quiet line under the wit, pointing to the trial lesson. */
.event-start { margin: 1rem 0 0; text-align: center; }
.event-start span { display: inline-block; }
.event-start .text-link { margin-top: 0; }
/* The wide ballroom: a tall frame cropped to the band where the couple and the guests' tables meet. */
.event-head-photo img { object-position: 46% 64%; }
/* The ballroom photo is tall: let the chandeliers and the couple share the frame. */
.first-photo .photo-chandelier { object-position: 50% 30%; }
/* First dance: no photo yet, so the facts sit in a quiet panel, like the trial panel without its photo. */
.occasion {
  background: var(--ivory);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  padding: clamp(24px, 4vw, 44px);
}
.occasion h3 { margin: 0; font: 500 clamp(1.4rem, 2.2vw, 1.6rem)/1.5 var(--font-ja); letter-spacing: .04em; }
:lang(en) .occasion h3 { font: 500 clamp(1.5rem, 2.6vw, 1.9rem)/1.2 var(--font-latin); letter-spacing: -.01em; }
.occasion .facts-list { margin-bottom: clamp(24px, 3vw, 32px); }
.occasion .facts-list div { grid-template-columns: 4.5rem 1fr; }
:lang(en) .occasion .facts-list div { grid-template-columns: 6rem 1fr; }
/* Hotel party: the practical answers sit in a short facts list; a quiet link to ask closes the column. */
.first .wit + .text-link { margin-top: 1.25rem; }
/* "After group class" is a link on its own line: give it a full-size tap target without moving the text. */
.ways .dances a { display: inline-block; padding: 11px 0; margin: -11px 0; }
/* Events form: preferred times unfold only for a lesson request (first dance or trial). The block opens on the
   menu's spring (400ms) and folds a little faster (350ms) on the smooth curve; the fields fade in a beat behind. */
/* The 20px field gap lives inside the folding part, so it folds away with the fields; 4px extra keeps the focus halo. */
.times-reveal > div { min-height: 0; overflow: hidden; padding: 0 4px; margin: 0 -4px; }
.times-reveal .times { margin: 20px 0 4px; }
.times-reveal { margin-bottom: -4px; }   /* the halo's 4px stays inside the usual 20px gap */
.js .times-reveal:not(.is-open) { margin-bottom: 0; }
.js .times-reveal {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--duration-medium) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-out);
}
.js .times-reveal.is-open {
  grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows var(--duration-slow) var(--spring), opacity var(--duration-fast) var(--ease-out) var(--duration-micro);
}
@media (prefers-reduced-motion: reduce) {
  .js .times-reveal, .js .times-reveal.is-open { transition: opacity .2s linear; }
}
/* The footer marks the page you're on, the same way the header nav does. */
.site-footer a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--champ); text-underline-offset: 5px; }

/* ---------- About Koji page ---------- */

/* Page header: the portrait with the vertical name takes the photo's place (The Vertical Name signature). */
.head-portrait { justify-content: center; }
.head-portrait img { width: min(400px, 68vw); object-position: 50% 20%; }
@media (min-width: 960px) {
  .about-head .container { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .head-portrait { justify-self: center; }
}

.story, .about-section { padding: clamp(80px, 11vw, 150px) 0; }

/* His story: a reading column; on wide screens the heading stays beside it while it is read. */
.story-grid { display: grid; gap: clamp(28px, 7vw, 40px); }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 96px); align-items: start; }
  .story-head { position: sticky; top: calc(var(--header-h) + 40px); }
}
.story-head .wit { margin-top: 0; }
.story-text { max-width: 38rem; }
:lang(en) .story-text { max-width: 34rem; }
.story-text > p { margin: 0 0 1.35em; }
.story-text > p:first-child { font-size: 1.15rem; }
/* The one line he never forgot: set apart between two champagne rules, in the display face. */
.story-quote { margin: clamp(32px, 4.5vw, 48px) 0; padding: clamp(22px, 3vw, 30px) 0; border-block: 1px solid var(--champ); }
.story-quote p { margin: 0; font: 500 clamp(1.45rem, 2.6vw, 1.9rem)/1.6 var(--font-ja); letter-spacing: .04em; }
.story-quote p span { display: inline-block; }
:lang(en) .story-quote p { font: italic 400 clamp(1.6rem, 3vw, 2.25rem)/1.25 var(--font-latin); letter-spacing: -.01em; }
/* The page's one authored moment: as the line he never forgot comes into view, its two champagne
   rules draw across like a pen stroke, then the words settle between them. */
.story-quote { position: relative; border-block: 0; }
.story-quote::before, .story-quote::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--champ); transform-origin: left; }
.story-quote::before { top: 0; }
.story-quote::after { bottom: 0; }
.js .story-quote[data-reveal] { opacity: 1; transform: none; filter: none; }
.js .story-quote[data-reveal]::before, .js .story-quote[data-reveal]::after { transform: scaleX(0); transition: transform var(--t-soft) var(--ease-smooth-out); }
.js .story-quote[data-reveal]::after { transition-delay: var(--duration-micro); }
.js .story-quote[data-reveal] p { opacity: 0; transform: translateY(var(--distance-small)); transition: opacity var(--duration-very-slow) var(--ease-out) calc(2 * var(--duration-micro)), transform var(--t-soft) var(--spring) calc(2 * var(--duration-micro)); }
.js .story-quote[data-reveal].is-in::before, .js .story-quote[data-reveal].is-in::after { transform: none; }
.js .story-quote[data-reveal].is-in p { opacity: 1; transform: none; }
/* His story is a tall column: it rises and fades, but is never blurred as one big surface. */
.js .story-text[data-reveal] { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .js .story-quote[data-reveal]::before, .js .story-quote[data-reveal]::after { transform: none; transition: none; }
  .js .story-quote[data-reveal] p { transform: none; transition: opacity .3s linear; }
}
.story-sign { margin: 1.75rem 0 0 !important; font: 500 1.2rem/1.5 var(--font-ja); letter-spacing: .3em; text-align: right; }
.story-sign::before { content: ""; display: inline-block; width: 2.5rem; height: 1px; margin-right: 1rem; vertical-align: middle; background: var(--champ); }
:lang(en) .story-sign { font: italic 400 1.45rem/1.4 var(--font-latin); letter-spacing: 0; }

/* Teaching: text beside a photo of a lesson. */
.teach-grid { align-items: start; }
/* The facts about Koji sit straight under the heading, so a skimming reader gets them first. */
.teach-grid .chips { margin: 0 0 1.75rem; }
.teach-grid .wit { margin-top: 1.75rem; }
.teach-text p { margin: 0 0 1.1em; max-width: 36rem; }
:lang(en) .teach-text p { max-width: 33rem; }
.teach-text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .teach-photo { position: sticky; top: calc(var(--header-h) + 40px); } }
.teach-photo img { object-position: 45% 40%; }

/* The studio: why ballroom, then four values under champagne rules. */
.studio-text { margin: 0; max-width: 36rem; }
:lang(en) .studio-text { max-width: 33rem; }
.values-block { margin-top: clamp(64px, 8vw, 104px); }
@media (min-width: 560px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.values p { margin: 0; color: var(--muted); line-height: 1.75; }
/* Each value reads as a title over its line, not as a label the same size as the text. */
.values .family h4 { margin-bottom: .6rem; font: 500 1.3rem/1.5 var(--font-ja); letter-spacing: .04em; color: var(--navy); }
:lang(en) .values .family h4 { font: 500 1.45rem/1.2 var(--font-latin); letter-spacing: -.01em; }
.values .family h4 span { display: inline-block; }
/* Where to go next, once the story is read. */
.about-next { display: flex; flex-wrap: wrap; gap: 0 2.5rem; margin-top: clamp(40px, 5vw, 64px); }
.about-next .text-link { margin-top: 0; }
/* Phones: the sideways English name ends with the portrait instead of running past it. */
@media (max-width: 559px) {
  .head-portrait img { width: min(400px, 72vw); }
  :lang(en) .head-portrait .name-tate { font-size: 1.35rem; letter-spacing: .04em; }
  :lang(en) .head-portrait .name-tate small { margin-top: .8em; letter-spacing: .12em; }
}
.js [data-reveal].is-in .family:nth-child(4) { transition-delay: calc(var(--duration-stagger) * 3); }

/* ---------- Japanese site: comfort for readers aged 40–70 (PRODUCT.md, 2026-10-13) ---------- */
/* A step larger body text and small print, roomier form fields, and phone/LINE beside the main buttons. */
body:lang(ja) { font-size: 1.125rem; }
:lang(ja) :is(.small, .submit-note, .price-note, .intro-note, .field-hint, .price-tax, .section-note, .facts-list dt, .opt, .dances, .price-foot, .way-more, .family-desc, .styles-note, .chips li, .chip-tag, .contact dt) { font-size: 1rem; }
:lang(ja) .booking-form :is(label, legend) { font-size: 1.05rem; }
/* Reading text, not small print: the reassurance at the request moment and the trial's 45 minutes stay at body size. */
:lang(ja) :is(.reassure li, .trial-flow li) { font-size: 1.125rem; }
:lang(ja) .trial-flow li strong { font-size: 1.1875rem; }
/* On navy, the phone/LINE line under the reassurance list (Lessons page): links in Ivory. */
.cta-call.booking-call { margin: .5rem 0 0; color: var(--on-navy-body); }
.cta-call.booking-call a { color: var(--ivory); }
:lang(ja) .booking-form :is(input, select, textarea) { min-height: 54px; padding: 12px 16px; font-size: 1.125rem; }
.cta-call { margin: 1rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--muted); }
.trial-price .cta-call, .occasion .cta-call { flex-basis: 100%; margin: 0; }
.occasion .cta-call { margin-top: 1rem; }
.cta-call a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .15rem;
  color: var(--navy); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--champ); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.cta-sep { margin: 0 .5rem; }
.access-photo figcaption { margin-top: .75rem; font-size: 1rem; line-height: 1.7; color: var(--muted); }
@media (min-width: 860px) {
  .access-photo:has(figcaption) { display: flex; flex-direction: column; }
  .access-photo:has(figcaption) img { flex: 1; height: auto; }
}
@media (max-width: 519px) {
  .cta-sep { display: none; }
  .cta-call a { display: flex; width: fit-content; }
  .intro .cta-call a { margin-inline: auto; }
}

/* ---------- Student reviews (real Google reviews, first letter only) ---------- */
/* Grouped like the FAQ: Ivory cards on Linen, one soft shadow, no hover (they aren't clickable). */
.reviews { margin-top: clamp(64px, 8vw, 104px); max-width: 60rem; }
.first-grid + .reviews, .section-head + .reviews { margin-top: clamp(40px, 5vw, 64px); }
.reviews + .faq { margin-top: clamp(48px, 6vw, 72px); }
.review-list { display: grid; gap: 16px; }
@media (min-width: 760px) { .review-list:has(.review + .review) { grid-template-columns: 1fr 1fr; } }
.review {
  margin: 0; position: relative;
  background: var(--ivory); border-radius: var(--r-card); box-shadow: var(--shadow-1);
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) clamp(20px, 2.4vw, 26px);
}
.review::before { content: "\201C"; content: "\201C" / ""; display: block; height: .55em; font: 400 3rem/1 var(--font-latin); color: var(--champ); }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; }
.review figcaption { margin-top: 1rem; font-weight: 600; color: var(--navy); }
.review figcaption span { display: block; margin-top: .15rem; font-weight: 400; font-size: .95rem; color: var(--muted); }
:lang(ja) .review figcaption span { font-size: 1rem; }
.reviews .text-link { margin-top: 1.25rem; }

/* Group Classes header: its own shape, so it never reads like the Couple Experience page.
   The words sit as on every inner page; the photo becomes one wide strip of the floor below them. */
.page-photo .photo-feet-wide { object-position: 62% 92%; }
@media (min-width: 960px) {
  .page-head--wide .container { display: block; }
  .page-head--wide .page-head-text { margin-bottom: clamp(40px, 5vw, 64px); }
  .page-head--wide .page-photo img { aspect-ratio: 21 / 8; object-position: 62% 94%; }
}
/* Group Classes, What to Expect: an upright photo, so all three people stay in frame. */
.first-photo .photo-class { object-position: 50% 40%; }
@media (max-width: 899px) { .first-photo .photo-class { object-position: 50% 24%; } }