/* =========================================================================
   Sozokan Academy of Martial Arts & Fitness – Phase 4 mockup stylesheet
   Implements 03-design/design-system.md exactly.
   Palette: kuro-obi charcoal + one tatami-straw accent. Motif: the Tatami Edge.
   Type: Zilla Slab (display) + Schibsted Grotesk (body). Radius: 0 everywhere.
   ========================================================================= */

/* ---- 1. Tokens (consolidated :root, section 11 of the design system) ---- */
:root {
  /* fonts */
  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* type scale (fluid) */
  --fs-display: clamp(2.125rem, 1.30rem + 3.7vw, 4rem);
  --fs-h1:      clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  --fs-h2:      clamp(1.5625rem, 1.30rem + 1.2vw, 2.25rem);
  --fs-h3:      clamp(1.3125rem, 1.18rem + 0.6vw, 1.6875rem);
  --fs-h4:      clamp(1.1875rem, 1.13rem + 0.2vw, 1.375rem);
  --fs-h5:      1.125rem;
  --fs-h6:      0.9375rem;
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --fs-small:   0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-overline:0.8125rem;

  /* raw palette */
  --ink: #1C1A17;
  --ink-soft: #3D3A34;
  --muted: #6E6A61;
  --bg: #F4F1E9;
  --surface: #FBF9F3;
  --surface-alt: #E9E4D7;
  --accent: #C7902F;
  --accent-deep: #9A6C1E;
  --accent-ink: #7C5616;
  --accent-tint: #F0E5CC;
  --line: #D7D0C0;
  --line-strong: #B7AE99;
  --on-dark: #F4F1E9;
  --on-dark-soft: #C4BEB0;
  --focus: #3A6EA5;

  /* semantic */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-alt: var(--surface-alt);
  --color-surface-dark: var(--ink);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-muted: var(--muted);
  --color-on-dark: var(--on-dark);
  --color-on-dark-soft: var(--on-dark-soft);
  --color-accent: var(--accent);
  --color-accent-text: var(--accent-deep);
  --color-accent-ink: var(--accent-ink);
  --color-accent-tint: var(--accent-tint);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);
  --color-success: #2F6B3C;
  --color-error: #9B2C2C;
  --color-focus: var(--focus);

  /* spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;

  /* layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 7vw, 6rem);
  --radius: 0;
  --border: 1px;
  --border-strong: 2px;
  --transition: 140ms cubic-bezier(0, 0, 0.2, 1);

  /* motif – the Tatami Edge */
  --motif-rule: 3px;
  --motif-rule-hover: 5px;
  --motif-mark-len: 40px;
  --motif-eyebrow-len: 24px;
  --motif-divider-seg: 56px;
  --motif-bullet: 8px;
}

/* ---- 2. Resets + constraint enforcement ---- */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: var(--radius) !important;  /* HARD CONSTRAINT: zero radius everywhere */
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); }
ul, ol { margin: 0; padding: 0; }

/* ---- 3. Typography ---- */
h1, h2, h3, h4,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.01em; font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.005em; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: 1.18; font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: 1.25; font-weight: 600; }

p, li, dd, label, input, textarea, select, button, td, th {
  font-family: var(--font-body);
}
p  { font-size: var(--fs-body); line-height: 1.6; margin: 0 0 var(--space-4); max-width: 68ch; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
small, .small { font-size: var(--fs-small); line-height: 1.5; }
.display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.01em; }

.overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-2);
}
/* motif job 1: tatami eyebrow rule */
.overline::before {
  content: "";
  display: inline-block;
  width: var(--motif-eyebrow-len);
  height: 3px;
  background: var(--accent);
  margin-right: 0.6em;
  flex: none;
}

/* motif job 2: H2 tatami heading mark */
.section-title {
  position: relative;
  padding-top: var(--space-3);
}
.section-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--motif-mark-len);
  height: var(--motif-rule);
  background: var(--accent);
}

/* ---- 4. Layout primitives ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark .lead { color: var(--on-dark-soft); }
.section--dark .overline { color: var(--accent); }
.section-head { max-width: 60ch; margin-bottom: var(--space-7); }
.section-head .lead { margin-top: var(--space-3); margin-bottom: 0; }
.stack-sm > * + * { margin-top: var(--space-3); }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* motif job 5: section divider */
.divider {
  position: relative;
  height: 1px;
  background: var(--line-strong);
  border: 0;
  margin: var(--space-9) 0;
}
.divider::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--motif-divider-seg);
  height: 3px;
  background: var(--accent);
}
.divider--plain { height: 1px; background: var(--line); border: 0; margin: var(--space-7) 0; }

/* motif job 6: square list marker (prose lists) */
.prose ul { list-style: none; padding-left: 0; }
.prose ul li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: var(--space-2);
  max-width: 68ch;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--motif-bullet);
  height: var(--motif-bullet);
  background: var(--accent);
}
.prose p { max-width: 68ch; }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose > :first-child { margin-top: 0; }

/* ---- 5. Accessibility affordances ---- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--accent);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- 6.1 Header / navigation ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: var(--border) solid var(--line);
  transition: box-shadow var(--transition), min-height var(--transition);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
  padding-block: var(--space-2);
}
/* condensed state added on scroll via JS */
.site-header.is-condensed { box-shadow: 0 1px 0 0 var(--line-strong); }
.site-header.is-condensed .site-header__inner { min-height: 60px; }

.site-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1.05;
}
.site-logo .mark { width: 14px; height: 14px; background: var(--accent); display: inline-block; flex: none; }
.site-logo .site-logo__sub { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.header-nav-wrap { display: flex; align-items: center; gap: var(--space-6); }

.nav { display: flex; align-items: center; gap: var(--space-5); list-style: none; }
.nav > li { display: flex; }
.nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: var(--motif-rule) solid transparent;
  transition: border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav a:hover { color: var(--accent-deep); }
.nav a[aria-current="page"],
.nav a.is-active { border-bottom-color: var(--accent); }  /* motif job 4 */

.nav-utility { display: flex; align-items: center; gap: var(--space-5); }
.nav-tel {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
.nav-tel:hover { color: var(--accent-deep); }
.nav-tel svg { width: 18px; height: 18px; flex: none; }

/* Classes dropdown */
.has-submenu { position: relative; }
.has-submenu > a { display: inline-flex; align-items: center; gap: 0.35em; }
.has-submenu > a::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  display: inline-block;
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-top: var(--motif-rule) solid var(--accent);
  padding: var(--space-2) 0;
  display: none;
  list-style: none;
  z-index: 60;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu { display: block; }
.submenu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 0;
  min-height: 44px;
  white-space: nowrap;
}
.submenu a:hover { background: var(--accent-tint); color: var(--ink); }

/* mobile toggle */
.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  background: transparent;
  border: var(--border) solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.nav-toggle .bar { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.nav-toggle .bar::before,
.nav-toggle .bar::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after { top: 7px; }

/* mobile drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--bg);
  border-top: var(--border) solid var(--line);
  padding: var(--space-5) var(--gutter) var(--space-10);
  overflow-y: auto;
  z-index: 55;
  opacity: 0;
  transition: opacity var(--transition);
}
.mobile-nav.is-open { display: block; opacity: 1; }
.mobile-nav ul { list-style: none; }
.mobile-nav a {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-4) 0;
  min-height: 44px;
  border-bottom: var(--border) solid var(--line);
}
.mobile-nav a:hover { color: var(--accent-deep); }
.mobile-nav .mobile-sub a { padding-left: var(--space-5); font-size: 1rem; font-weight: 500; color: var(--ink-soft); }
.mobile-nav .mobile-group-label {
  display: block; font-family: var(--font-body); font-weight: 700; font-size: 1.125rem;
  color: var(--ink); padding: var(--space-4) 0 var(--space-2); border-bottom: var(--border) solid var(--line);
}
.mobile-nav .btn { margin-top: var(--space-5); }
.mobile-nav .nav-tel { margin-top: var(--space-4); }

/* ---- 6.3 Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: var(--border-strong) solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bg); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--on-dark); }
.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn--ghost:hover { background: var(--on-dark); color: var(--ink); }
.btn--link {
  min-height: 44px;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  color: var(--accent-deep);
  font-weight: 600;
  gap: var(--space-1);
}
.btn--link::after { content: "\2192"; transition: transform var(--transition); }
.btn--link:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.btn--link:hover::after { transform: translateX(3px); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- 6.2 Hero ---- */
.hero {
  background: var(--ink);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  min-height: 560px;
}
.hero__content {
  padding: var(--space-9) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  max-width: 620px;
}
.hero__content .overline { color: var(--accent); }
.hero h1 { color: var(--on-dark); font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
.hero .lead { color: var(--on-dark-soft); margin: 0; }
.hero__media { position: relative; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__media::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--motif-rule);
  background: var(--accent);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

/* page hero (sub-pages) */
.page-hero {
  background: var(--surface-alt);
  border-bottom: var(--border) solid var(--line);
  padding-block: var(--space-8);
}
.page-hero .overline { color: var(--accent-ink); }
.page-hero h1 { color: var(--ink); margin-bottom: var(--space-3); }
.page-hero .lead { margin-bottom: 0; }
.breadcrumbs { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--space-3); }
.breadcrumbs a { color: var(--accent-deep); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }
.breadcrumbs .sep { color: var(--line-strong); margin: 0 0.4em; }

/* ---- 6.9 Trust strip ---- */
.trust-strip {
  background: var(--ink);
  color: var(--on-dark);
  border-top: var(--motif-rule) solid var(--accent);
}
.trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-6);
}
.trust-item { text-align: center; }
.trust-item .num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); color: var(--accent); display: block; line-height: 1.05; }
.trust-item .label { font-size: var(--fs-small); color: var(--on-dark-soft); display: block; margin-top: var(--space-2); }
.trust-item + .trust-item { border-left: var(--border) solid rgba(196,190,176,0.25); padding-left: var(--space-5); }

/* ---- 6.4 / 6.5 cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.card {
  position: relative;
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-top: var(--motif-rule) solid var(--accent);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-top-width var(--transition), background var(--transition);
}
.card:hover { border-top-width: var(--motif-rule-hover); background: var(--surface-alt); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition); }
.card:hover .card__media img { transform: scale(1.03); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--ink); margin: var(--space-3) 0 0; }
.card__ages { font-size: var(--fs-small); color: var(--accent-ink); font-weight: 600; letter-spacing: 0.02em; }
.card__body { font-size: var(--fs-body); color: var(--ink-soft); margin: 0; }
.card__link { margin-top: auto; }
.card a.stretched::after { content: ""; position: absolute; inset: 0; }

/* category cards: left-edge motif (the four streams as a hub) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.category-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-left: var(--motif-rule) solid var(--accent);
  transition: border-left-width var(--transition), background var(--transition);
}
.category-card:hover { border-left-width: var(--motif-rule-hover); background: var(--surface-alt); }
.category-card .chip {
  align-self: start;
  display: inline-block;
  margin: var(--space-4) 0 0 var(--space-5);
  padding: var(--space-1) var(--space-3);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.category-card h3 { padding: var(--space-3) var(--space-5) 0; margin-bottom: 0; }
.category-card p { padding: var(--space-2) var(--space-5) 0; color: var(--ink-soft); margin: 0; max-width: none; }
.category-card .btn--link { margin: var(--space-3) var(--space-5) var(--space-5); }
.category-card a.stretched::after { content: ""; position: absolute; inset: 0; }

/* ---- 6.8 Founder block ---- */
.founder {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
}
.founder__media { position: relative; }
.founder__media img { width: 100%; height: auto; display: block; }
.founder__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--motif-rule); background: var(--accent); }
.founder__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--space-1); }
.founder__role { font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: var(--space-4); }
.founder__creds { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.founder__creds li { position: relative; padding-left: 1.5em; font-size: var(--fs-small); color: var(--ink-soft); }
.founder__creds li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: var(--motif-bullet); height: var(--motif-bullet); background: var(--accent); }
.founder--dark .founder__name { color: var(--on-dark); }
.founder--dark p { color: var(--on-dark-soft); }
.founder--dark .founder__creds li { color: var(--on-dark-soft); }

/* ---- split / feature rows ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.split__media { position: relative; }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.split__media::after { content: ""; position: absolute; left: 0; bottom: 0; right: 0; height: var(--motif-rule); background: var(--accent); }
.split--reverse .split__media { order: 2; }

/* ---- 6.6 Timetable grid ---- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.filters__label { font-size: var(--fs-small); font-weight: 700; color: var(--ink); align-self: center; margin-right: var(--space-2); }
.chip-filter {
  min-height: 44px;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: var(--border) solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
  border-bottom: var(--motif-rule) solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.chip-filter:hover { background: var(--accent-tint); }
.chip-filter[aria-pressed="true"] { background: var(--accent-tint); border-bottom-color: var(--accent); }

.timetable-scroll { overflow-x: auto; }
.timetable { width: 100%; border-collapse: collapse; }
.timetable caption { text-align: left; font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--space-3); }
.timetable th, .timetable td {
  border: var(--border) solid var(--line);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-small);
}
.timetable thead th {
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-weight: 700;
  position: sticky;
  top: 72px;
  z-index: 5;
  white-space: nowrap;
}
.timetable tbody tr:nth-child(even) td { background: var(--surface-alt); }
.timetable .day-th { background: var(--surface-alt); color: var(--ink); font-weight: 700; white-space: nowrap; width: 1%; vertical-align: top; }
.timetable .slot { display: block; margin-bottom: var(--space-3); padding-left: var(--space-3); border-left: var(--motif-rule) solid var(--accent); }
.timetable .slot:last-child { margin-bottom: 0; }
.timetable .slot .time { font-weight: 700; color: var(--ink); }
.timetable .slot .style { display: block; font-weight: 400; color: var(--ink-soft); }
.timetable .slot.is-dim { opacity: 0.22; }
.timetable-empty { color: var(--muted); font-style: italic; }

@media (max-width: 768px) {
  .timetable, .timetable thead, .timetable tbody, .timetable tr, .timetable th, .timetable td { display: block; width: 100%; }
  .timetable thead { display: none; }
  .timetable tbody tr { border: var(--border) solid var(--line); border-top: var(--motif-rule) solid var(--accent); margin-bottom: var(--space-4); }
  .timetable td { border: 0; border-bottom: var(--border) solid var(--line); }
  .timetable td:last-child { border-bottom: 0; }
  .timetable .day-th { width: auto; background: var(--ink); color: var(--on-dark); }
  .timetable .day-th { border-bottom: var(--border) solid var(--line); }
}

/* ---- 6.7 Pricing ---- */
.pricing-hero {
  background: var(--ink);
  color: var(--on-dark);
  padding: var(--space-8);
  text-align: center;
  border-top: var(--motif-rule) solid var(--accent);
}
.pricing-hero .amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 8vw, 5rem); color: var(--accent); line-height: 1; display: block; }
.pricing-hero .amount-label { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h5); letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-soft); display: block; margin-bottom: var(--space-3); }
.pricing-hero .amount-note { font-size: var(--fs-lead); color: var(--on-dark-soft); margin: var(--space-3) auto 0; max-width: 40ch; }

.pricing-table { width: 100%; border-collapse: collapse; margin-top: var(--space-6); }
.pricing-table caption { text-align: left; font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--space-3); }
.pricing-table th, .pricing-table td {
  border-bottom: var(--border) solid var(--line);
  padding: var(--space-4);
  text-align: left;
  font-size: var(--fs-body);
  vertical-align: top;
}
.pricing-table thead th { background: var(--surface-alt); font-family: var(--font-body); font-weight: 700; }
.pricing-table .price { font-weight: 700; color: var(--ink); white-space: nowrap; }
.pricing-table td .muted { color: var(--muted); font-size: var(--fs-small); display: block; margin-top: var(--space-1); }

.pricing-note {
  background: var(--accent-tint);
  border-left: var(--motif-rule) solid var(--accent);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: var(--space-6);
}
.pricing-note strong { color: var(--ink); }

/* ---- callout / fact panel ---- */
.callout {
  background: var(--accent-tint);
  border-left: var(--motif-rule) solid var(--accent);
  padding: var(--space-5) var(--space-6);
  color: var(--ink-soft);
}
.callout strong { color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }

/* ---- 6.10 Reviews ---- */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.review {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-left: var(--motif-rule) solid var(--accent);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.review__quote { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: var(--fs-h4); line-height: 1.4; color: var(--ink); margin: 0; }
.review__attr { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); }
.review__source { font-size: var(--fs-xs); color: var(--muted); }

/* ---- style list (adult / kids classes) ---- */
.style-list { display: grid; gap: var(--space-5); }
.style-item {
  background: var(--surface);
  border: var(--border) solid var(--line);
  border-top: var(--motif-rule) solid var(--accent);
  padding: var(--space-5) var(--space-6);
}
.style-item h3 { margin-bottom: var(--space-2); }
.style-item p { margin-bottom: var(--space-3); }
.style-item p:last-child { margin-bottom: 0; }
.style-item .times { font-size: var(--fs-small); color: var(--ink-soft); }
.style-item .times strong { color: var(--accent-ink); font-weight: 600; }

/* ---- info two-column (contact, about how-we-teach) ---- */
.info-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; }
.def-list { display: grid; gap: var(--space-4); margin: 0; }
.def-list div { display: grid; gap: var(--space-1); }
.def-list dt { font-size: var(--fs-small); font-weight: 700; color: var(--accent-ink); letter-spacing: 0.02em; text-transform: uppercase; }
.def-list dd { margin: 0; color: var(--ink); }
.def-list dd a { color: var(--accent-deep); text-decoration: none; }
.def-list dd a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* hours table */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table caption { text-align: left; font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--space-3); }
.hours-table th, .hours-table td { border-bottom: var(--border) solid var(--line); padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--fs-body); }
.hours-table th { font-family: var(--font-body); font-weight: 700; color: var(--ink); white-space: nowrap; }
.hours-table td { color: var(--ink-soft); }
.hours-table .note-row td { font-size: var(--fs-small); color: var(--muted); border-bottom: 0; }

/* ---- 6.12 Forms ---- */
.form { max-width: 620px; }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-field label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.form-field .req { color: var(--accent-ink); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: var(--border) solid var(--line-strong);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  width: 100%;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--ink);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-actions { margin-top: var(--space-6); }
.form-note { font-size: var(--fs-small); color: var(--muted); margin-top: var(--space-4); }
.form-success {
  display: none;
  background: var(--accent-tint);
  border-left: var(--motif-rule) solid var(--color-success);
  color: var(--ink);
  font-weight: 600;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.form-success.is-visible { display: block; }

/* ---- map embed ---- */
.map-embed { border: var(--border) solid var(--line); border-top: var(--motif-rule) solid var(--accent); width: 100%; aspect-ratio: 16 / 10; display: block; }

/* ---- contact strip (home) ---- */
.contact-strip { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }

/* ---- 6.13 Footer ---- */
.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  border-top: var(--motif-rule) solid var(--accent);
  padding-block: var(--space-8) var(--space-6);
}
.site-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: var(--space-7); }
.site-footer h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h6); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); }
.site-footer p { color: var(--on-dark-soft); font-size: var(--fs-small); }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.site-footer__brand .mark { width: 14px; height: 14px; background: var(--accent); display: inline-block; margin-bottom: var(--space-3); }
.site-footer .footer-tel { font-weight: 700; font-size: var(--fs-h5); color: var(--on-dark); }
.site-footer .btn { margin-bottom: var(--space-4); }
.site-footer__legal {
  border-top: var(--border) solid rgba(196,190,176,0.25);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--on-dark-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

/* ---- 6.14 Sticky mobile action bar ---- */
.action-bar { display: none; }

/* ---- CTA band ---- */
.cta-band { background: var(--ink); color: var(--on-dark); border-top: var(--motif-rule) solid var(--accent); }
.cta-band h2 { color: var(--on-dark); }
.cta-band .lead { color: var(--on-dark-soft); }
.cta-band__inner { display: grid; gap: var(--space-5); max-width: 60ch; }

/* ---- scroll-reveal (IntersectionObserver, opt-in) ---- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 320ms cubic-bezier(0,0,0.2,1), transform 320ms cubic-bezier(0,0,0.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ===========================================================================
   Responsive – tested at 360 / 480 / 768 / 1080 / 1280 / 1440
   =========================================================================== */
@media (max-width: 1080px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .info-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { order: -1; aspect-ratio: 16 / 10; }
  .hero__media::after { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: var(--motif-rule); }
  .hero__content { padding: var(--space-7) var(--gutter); }
  .founder { grid-template-columns: 1fr; gap: var(--space-5); }
  .split, .split--reverse { grid-template-columns: 1fr; gap: var(--space-5); }
  .split--reverse .split__media { order: -1; }
  .contact-strip { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 768px) {
  /* collapse header to logo + hamburger */
  .header-nav-wrap .nav, .nav-utility .nav-tel, .nav-utility .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .timetable thead th { position: static; }

  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .trust-item + .trust-item { border-left: 0; padding-left: 0; }

  .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-6); }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* sticky mobile action bar */
  .action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    background: var(--ink);
    border-top: var(--motif-rule) solid var(--accent);
  }
  .action-bar a {
    min-height: 56px;
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body); font-weight: 600; text-decoration: none;
  }
  .action-bar .call { color: var(--on-dark); }
  .action-bar .book { background: var(--accent); color: var(--ink); }
  .action-bar a + a { border-left: var(--border) solid rgba(196,190,176,0.25); }
  body { padding-bottom: 56px; }
  .mobile-nav { padding-bottom: calc(var(--space-10) + 56px); }
}

@media (max-width: 480px) {
  .hero__content { padding: var(--space-6) var(--gutter); }
  .btn-row .btn, .hero__cta .btn { width: 100%; }
  .pricing-hero { padding: var(--space-6); }
}

@media (max-width: 360px) {
  .trust-strip__inner { grid-template-columns: 1fr; }
}

/* ---- reduced motion: kill interaction transitions ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---- 10. Print ---- */
@media print {
  .site-header, .mobile-nav, .action-bar, .nav-toggle, .hero__media, .skip-link, .cta-band, .site-footer .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; padding-bottom: 0; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .timetable th, .timetable td, .pricing-table th, .pricing-table td, .hours-table th, .hours-table td { border: 1px solid #000; }
  section { padding-block: 0.5cm; }
  .section--dark, .hero, .trust-strip, .pricing-hero { background: #fff !important; color: #000 !important; }
  .section--dark h1, .section--dark h2, .trust-item .num, .pricing-hero .amount { color: #000 !important; }
}