/* JT Dance base styles + components (#1002210). Tokens live in tokens.css.
   Components: buttons · header/nav · breadcrumbs · hero / page-hero · sections · USPs · class cards ·
   timetable · steps · notices · FAQ accordion · CTA band · forms · split/media · placeholders · footer ·
   sticky mobile Call + WhatsApp bar · 404. Component demo page /styleguide/ removed before launch (#1002219): git show 4f72c4a:_src/pages/styleguide.html */
/* Self-hosted fonts, latin subset (#1002243): Poppins 500/600 + Bitter variable 400–700. No Poppins 400/700 file —
   400 renders as 500, 700 as 600. layout.html preloads all three (~50KB; all are above the fold — 500 = eyebrows/nav/hero chips, which shifted when it
   arrived late, #1002243). */
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/poppins-latin-500.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/poppins-latin-600.woff2) format("woff2"); }
@font-face { font-family: Bitter; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/fonts/bitter-latin-var.woff2) format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; font: 16px/1.7 var(--font-body); color: var(--text); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-ink); }
a[href^="tel:"] { white-space: nowrap; }
/* Two-tone focus ring (#1002236): navy ring + white halo on light; white ring on dark bands. Both >=3:1. */
:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 2px; box-shadow: 0 0 0 7px #fff; }
:is(.site-header, .hero, .page-hero, .cta-band, .section-brand, .site-footer, .mobile-bar) :focus-visible { outline-color: #fff; box-shadow: 0 0 0 7px var(--brand-ink); }
@media (max-width: 1080px) { .site-nav :focus-visible { outline-color: var(--brand-deep); box-shadow: 0 0 0 7px #fff; } } /* mobile menu panel is white */
p, ul, ol, dl { margin: 0 0 1em; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 600; line-height: 1.25; color: var(--heading); margin: 0 0 .6em; }
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.625rem; }
h4 { font-size: 1.375rem; } h5 { font-size: 1.125rem; } h6 { font-size: 1rem; }
@media (max-width: 991px) { h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.25rem; } }
@media (max-width: 767px) { h1 { font-size: 1.625rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; } }
/* No one-word last lines (#1002237 T1). Chrome 114+ / Safari 17.5+; harmless elsewhere. */
h1, h2, h3, h4, .faq-item summary { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
/* Narrow column shares the wide container's left edge, so hero H1, breadcrumbs and body line up (#1002238 L4).
   Centred bands (.center) and the 404 stay centred. */
.narrow { max-width: 760px; margin-left: max(0px, calc((100% - var(--container)) / 2)); }
.narrow.center, .notfound .narrow { margin-left: auto; }
.eyebrow { font: 500 .8125rem/1.4 var(--font-head); text-transform: uppercase; letter-spacing: 3px; color: var(--brand); margin-bottom: .75rem; }
.eb { white-space: nowrap; } /* 'A · B' eyebrow parts (build.py split_eyebrows) */
@media (max-width: 767px) { .eyebrow { letter-spacing: 2px; } .eb-sep { display: none; } .eb { display: block; white-space: normal; } }
.lead { font-size: 1.125rem; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 12px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font: 600 .875rem/1 var(--font-head); letter-spacing: 1px; padding: 13px 32px;
  border-radius: var(--radius-btn); border: 2px solid transparent; text-decoration: none; text-align: center; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.btn-primary { background: var(--sky); border-color: var(--sky); color: var(--brand-deep); } /* AA: navy on sky 4.65 */
.btn-primary:hover { background: transparent; color: var(--brand-deep); }
.hero .btn-primary:hover, .page-hero .btn-primary:hover, .cta-band .btn-primary:hover { color: var(--sky); }
.section-brand .btn-primary:hover { color: #fff; } /* sky on --brand is only 2.8:1 */
.site-header .btn-primary:hover { background: #fff; border-color: #fff; color: var(--brand-deep); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn-outline { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-ghost { background: transparent; border-color: #fff; color: #fff; }  /* dark backgrounds only */
.btn-ghost:hover { background: #fff; color: var(--brand-deep); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }
/* Phones: every stacked button pair is full width, same as the home hero (#1002238 L2) */
@media (max-width: 480px) { .btn-row .btn, .cta-band-actions, .cta-band-actions .btn { flex: 1 1 100%; } }
/* Icons (#1002277): build.py add_icons() puts one before every .btn and nav label, colour follows the text */
.ico { width: 1.3em; height: 1.3em; flex: none; }
.btn .ico { margin-left: -4px; }

/* ---------- Header + nav ---------- */
/* Big logo at the top, 58px once scrolled (#1002270). The bar is --hdr-grow taller than the 76px strip and sticks at
   top: -grow, so scrolling slides the extra off naturally: the header's size never changes (no CLS, no jitter loop).
   html.hdr-top (head script, cleared by site.js once scrolled) lifts the logo + nav into the middle of the tall bar
   and scales the logo up. Transform only. No JS = no html.hdr-top = today's 76px look. */
.site-header { --hdr-grow: 32px; --logo-grow: 1.4; --logo-box: 56px; background: var(--brand); box-shadow: var(--shadow-nav);
  position: sticky; top: calc(-1 * var(--hdr-grow)); z-index: 50; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: calc(80px + var(--hdr-grow));
  padding-top: var(--hdr-grow); gap: 20px; }
/* Logo breathing room (#1002377, Mike: "touching the container"): 56px circle in an 80px strip = 12px above + below
   scrolled, 78px in the 112px top bar = 17px. Change --logo-box / --hdr-grow / --logo-grow together. */
.site-header .logo { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; color: #fff;
  transition: transform var(--motion-base) var(--ease-graceful); }
.site-header .logo img { width: calc(var(--logo-box) - 6px); height: calc(var(--logo-box) - 6px); box-sizing: content-box;
  background: #fff; border-radius: 50%; padding: 3px; transform-origin: left center; transition: transform var(--motion-base) var(--ease-graceful); }
/* Wordmark next to the logo (#1002377): fills the empty bar on phones/tablets. Small line hidden on the smallest phones */
.wordmark { display: flex; flex-direction: column; line-height: 1.1; transition: transform var(--motion-base) var(--ease-graceful); }
.wordmark b { font: 600 1.375rem/1.1 var(--font-head); letter-spacing: .3px; white-space: nowrap; }
.wordmark small { font: 500 .8125rem/1.3 var(--font-head); color: var(--eyebrow-on-dark); letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: 3px; white-space: nowrap; }
.site-header .logo:hover .wordmark b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; transition: transform var(--motion-base) var(--ease-graceful); }
.hdr-cta { padding: 11px 22px; }
.site-header .site-nav { transition: transform var(--motion-base) var(--ease-graceful); }
html.hdr-top .site-header .logo, html.hdr-top .site-header .hdr-actions { transform: translateY(calc(var(--hdr-grow) / -2)); }
html.hdr-top .site-header .logo img { transform: scale(var(--logo-grow)); }
html.hdr-top .site-header .wordmark { transform: translateX(calc(var(--logo-box) * (var(--logo-grow) - 1))); }
@media (min-width: 1081px) { html.hdr-top .site-header .site-nav { transform: translateY(calc(var(--hdr-grow) / -2)); }
  .hdr-actions { display: none; } }
/* Desktop: the full nav already fills the bar and needs the room → name only, and only once it fits beside the nav */
@media (min-width: 1081px) { .wordmark small { display: none; } }
@media (min-width: 1081px) and (max-width: 1239px) { .wordmark { display: none; } }
@media (max-width: 767px) { .site-header { --hdr-grow: 20px; --logo-grow: 1.25; --logo-box: 52px; } .site-header .container { min-height: calc(76px + var(--hdr-grow)); }
  .hdr-cta { display: none; } }
@media (max-width: 420px) { .wordmark small { display: none; } .wordmark b { font-size: 1.2rem; } }
.site-header a.tel { color: #fff; font: 600 .9375rem var(--font-head); text-decoration: none; } /* holding page */
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.site-nav ul a { display: flex; align-items: center; gap: 6px; color: #fff; font: 500 .9375rem/1 var(--font-head); text-decoration: none; padding: 10px 11px; border-radius: var(--radius); }
.site-nav ul a:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Desktop nav = text only: stacked icons looked cluttered (Mike, #1002279). Icons stay in the phone menu + on buttons */
@media (min-width: 1081px) { .site-nav ul a { white-space: nowrap; } .site-nav ul .ico { display: none; } }
.site-nav ul a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sky); }
.nav-cta { padding: 12px 24px; }
.nav-cta[aria-current="page"] { box-shadow: 0 0 0 2px #fff; }
.nav-toggle, .nav-mobile-ctas, .nav-backdrop { display: none; }
@media (max-width: 1080px) {
  /* Outlined pill with a visible "Menu" label (#1002377): a bare round icon didn't read as a menu. Icon only ≤420px */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px 0 16px;
    border: 2px solid rgba(255,255,255,.6); border-radius: 999px; background: transparent; color: #fff; cursor: pointer;
    font: 600 .9375rem/1 var(--font-head); transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
  .nav-toggle:hover { background: rgba(255,255,255,.12); border-color: #fff; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 20px; height: 2px; background: #fff;
    position: relative; transition: transform var(--motion-fast) var(--ease-out); }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column;
    align-items: stretch; gap: 0; padding: 8px 0 20px; box-shadow: var(--shadow-nav); max-height: calc(100vh - 80px - var(--hdr-grow)); overflow-y: auto; }
  .nav-open .site-nav { display: flex; }
  /* Dimmed page under the open menu (#1002238 L6): .nav-backdrop is added by site.js, sits below the sticky header (z 50) */
  .nav-open { overflow: hidden; }
  .nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(20,40,85,.55); cursor: pointer; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { color: var(--heading); font-size: 1.15rem; gap: 12px; padding: 14px 20px; border-radius: 0; border-bottom: 1px solid rgba(0,0,0,.06); }
  .site-nav ul a:hover { background: rgba(79,182,194,.08); color: var(--brand-ink); }
  .site-nav ul .ico { color: var(--brand); }
  .site-nav ul a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--sky); color: var(--brand); }
  .nav-cta { margin: 16px 20px 0; border-radius: var(--radius-card); }
  .nav-cta[aria-current="page"] { box-shadow: none; }
  .nav-mobile-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 20px 0; }
  .nav-mobile-ctas .btn { border-radius: var(--radius-card); padding: 13px 10px; }
}
@media (max-width: 420px) { .nav-toggle { width: 44px; padding: 0; } .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { background: var(--surface); border-bottom: 1px solid var(--border); font: .8125rem/1.4 var(--font-head); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 10px 0; }
.breadcrumbs li + li::before { content: "›"; color: var(--teal); margin: 0 8px; }
.breadcrumbs a { color: var(--brand); text-decoration: none; }
.breadcrumbs [aria-current] { color: var(--muted); }
@media (max-width: 767px) { .breadcrumbs ol { padding: 0; } .breadcrumbs li { display: flex; align-items: center; }
  .breadcrumbs a, .breadcrumbs [aria-current] { display: inline-block; padding: 13px 0; } .breadcrumbs a { min-width: 44px; } } /* 44px tap rows (#1002238 L1) */

/* ---------- Hero (home) ---------- */
.hero { position: relative; background: var(--brand-ink); padding: 6.5rem 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .container { position: relative; z-index: 2; }
/* Placeholder mark lives top-left of the hero, never under the box; disappears when a real photo replaces the slot */
.hero:has(> img[data-placeholder])::after { content: "PLACEHOLDER IMAGE · slot: " attr(data-ph); position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--brand-ink); color: #fff; font: 600 .75rem/1 var(--font-head); letter-spacing: 1px; padding: 6px 10px; border-radius: var(--radius); pointer-events: none; }
/* Glass box (#1002264): photo shows through. No scrim over the photo (#1002267, Mike: "looks dull"), so the box alone
   carries AA — alphas are the floor, worst case (pure-white photo) white text 4.9; --eyebrow-on-dark drops to 3.9 here,
   so the eyebrow + lead are plain white. Lower an alpha = re-run fix-1002264/glass.py */
.hero-box { background: linear-gradient(135deg, rgba(30,58,115,.72), rgba(30,58,115,.78) 50%, rgba(20,40,85,.84)); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-box);
  box-shadow: var(--shadow-hero), inset 0 1px 0 rgba(255,255,255,.18); padding: 4rem 2rem; text-align: center; color: #fff; max-width: 820px; margin: 0 auto;
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }
.hero-box h1 { color: #fff; }
.hero-box .eyebrow { color: #fff; margin-bottom: 1rem; } /* sky fails AA here (2.55), --eyebrow-on-dark 3.9 on the glass */
.hero-box p { color: #fff; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 2rem; }
.hero-ctas .btn { min-width: 200px; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 1.5rem 0 0; padding: 0; }
.hero-chips a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font: 500 .8125rem/1 var(--font-head); padding: 13px 16px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
.hero-chips a:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 767px) { .hero { padding: 24px 0; } .hero-box { padding: 2.5rem 1.25rem calc(2.5rem + 8px); } /* even 24px gaps, room under chips (#1002239 P2) */
  .hero:has(> img[data-placeholder])::after { top: 4px; left: 8px; font-size: .625rem; padding: 3px 8px; } .hero-ctas .btn { min-width: 0; flex: 1 1 100%; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--hero-gradient), var(--brand-deep); color: #fff; padding: 56px 0 60px; }
.page-hero h1, .page-hero h2 { color: #fff; max-width: 820px; }
.page-hero .eyebrow, .cta-band .eyebrow, .section-brand .eyebrow { color: var(--eyebrow-on-dark); }
.page-hero .hero-links { margin-top: 1.25rem; }
.page-hero .hero-links a:not(.btn) { color: #fff; }
.page-hero p { color: rgba(255,255,255,.92); max-width: 720px; }
.page-hero .btn-row { margin-top: 1.5rem; }
.page-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.page-hero-grid img { border-radius: var(--radius-card); box-shadow: var(--shadow-hero); }
@media (max-width: 860px) { .page-hero-grid { grid-template-columns: 1fr; } .page-hero { padding: 36px 0 40px; } }
/* Phones: hero photo becomes a short strip so the first section starts on screen one (#1002238 L5) */
@media (max-width: 767px) { .page-hero { padding: 28px 0 32px; } .page-hero .btn-row { margin-top: 1.25rem; } .page-hero-grid { gap: 20px; }
  .page-hero-grid > img { width: 100%; aspect-ratio: 16 / 9; max-height: 120px; object-fit: cover; object-position: center 30%; }
  /* …except Jenna's portrait: a strip cuts her face, so a small round head-and-shoulders instead (#1002247) */
  .page-hero-grid > img:is([data-art="about-jenna"], [data-photo="about-jenna"]) { width: 150px; aspect-ratio: 1; max-height: none; border-radius: 50%; object-position: center 20%; } }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section-alt { background: var(--surface); }
.section-brand { background: var(--brand); color: #fff; }
.section-brand h2, .section-brand h3 { color: #fff; }
.section-brand a:not(.btn) { color: #fff; } /* :not(.btn) — else white on sky 2.37 (#1002236) */
.section-head { max-width: 720px; margin-bottom: 32px; }
.section-head.center { margin-left: auto; margin-right: auto; } /* only for full-width bands with a single CTA (#1002237 T5) */
@media (max-width: 767px) { .section { padding: 44px 0; } }

/* Fact boxes (RAD page "at a glance") */
.facts { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 600px) { .facts { grid-template-columns: repeat(2, 1fr); } .facts:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact:has(h3 a) { position: relative; }
.fact h3 a::after { content: ""; position: absolute; inset: 0; } /* whole fact card is the link (44px+ target) */
.fact { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; }
.fact h2, .fact h3 { font-size: 1.125rem; }
.fact p { margin: 0; }

/* ---------- USPs ---------- */
.usps { display: grid; grid-template-columns: 1fr; gap: 24px; list-style: none; padding: 0; margin: 0; }
.usp { text-align: center; padding: 8px 12px; }
@media (min-width: 600px) { .usps { grid-template-columns: repeat(3, 1fr); } } /* never 2 + 1 (#1002238 L3) */
.usp-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(98,179,208,.16); color: var(--brand); }
.usp-icon svg { width: 30px; height: 30px; }
.usp h3 { font-size: 1.25rem; margin-bottom: .4em; }
.usp p { margin: 0; }

/* ---------- Class cards ---------- */
.class-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 992px) { .class-cards { grid-template-columns: repeat(3, 1fr); } }
.class-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.class-card:hover { box-shadow: 0 10px 30px rgba(20,40,85,.12); transform: translateY(-2px); }
.class-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.class-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.class-card h3 { font-size: 1.375rem; margin-bottom: .35em; }
.class-card h3 a { color: inherit; text-decoration: none; }
.class-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.class-meta { list-style: none; padding: 0; margin: 0 0 1rem; font: 500 .9375rem/1.5 var(--font-head); color: var(--heading); }
.class-meta li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(79,182,194,.15); }
.class-meta li::before { content: "›"; color: var(--teal); font-weight: 700; }
.class-price { font: 600 1.5rem/1 var(--font-head); color: var(--brand); margin: auto 0 0; padding-top: 6px; }
@media (min-width: 600px) and (max-width: 991px) { /* tablet: one horizontal card per row, not 2 + 1 (#1002238 L3) */
  .class-card { flex-direction: row; } .class-card img { width: 40%; flex: none; aspect-ratio: auto; height: auto; min-height: 100%; } }
.class-price small { font-size: .9375rem; font-weight: 500; color: var(--muted); }

/* ---------- Timetable ({{timetable}} in a page) ---------- */
.timetable-wrap { overflow-x: auto; }
.timetable { width: 100%; border-collapse: collapse; font-family: var(--font-head); font-size: .9375rem; background: #fff; border: 1px solid var(--border); }
.tt-caption { margin: 0; max-width: none; text-align: left; font: .9375rem/1.5 var(--font-body); color: var(--muted); padding-top: 10px; } /* table footnote (was <caption>, #1002219) */
.timetable thead th { background: var(--brand); color: #fff; text-align: left; font-weight: 600; padding: 12px 16px; }
.timetable thead th:last-child { text-align: right; }
.timetable td { padding: 12px 16px; border-top: 1px solid var(--border); color: var(--heading); vertical-align: top; }
.tt-day th { background: rgba(98,179,208,.14); color: var(--brand-ink); text-align: left; padding: 10px 16px;
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: .9375rem; } /* 15px floor (#1002240) */
.tt-time { white-space: nowrap; width: 9.5em; }
.tt-class { font-weight: 500; }
.tt-note { display: block; font: 400 .9375rem/1.4 var(--font-body); color: var(--muted); margin-top: 2px; }
.tt-price { white-space: nowrap; text-align: right; font-weight: 600; color: var(--brand); width: 5em; }
@media (max-width: 560px) { .timetable td, .timetable thead th { padding: 10px; } .tt-time { width: auto; } }
.tt-info td { border-top: 0; padding-top: 0; }
@media (max-width: 767px) { .tt-caption a { display: inline-block; padding: 13px 0; margin: -13px 0; } } /* 44px tap row, same line height (L1) */  /* in-table note (no Grade 6…) sits under the class above it */
/* <=420px: stack time above class, price on the right, so notes get the full width (#1002240 C2) */
@media (max-width: 420px) {
  .timetable { display: flex; flex-direction: column; }
  .tt-caption { padding: 10px 12px; border: 1px solid var(--border); background: #fff; margin-top: -1px; } /* stays inside the table box like the old caption */
  .timetable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .timetable tbody, .tt-day, .tt-day th { display: block; }
  .timetable tbody tr:not(.tt-day) { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 10px 12px; border-top: 1px solid var(--border); }
  .timetable tbody tr.tt-info { border-top: 0; padding-top: 0; }
  .timetable td { padding: 0; border-top: 0; width: auto; }
  .tt-time { grid-row: 1; color: var(--text); font-weight: 400; }
  .tt-class { grid-row: 2; text-wrap: balance; }
  .tt-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .tt-info .tt-time { display: none; }
  .tt-info .tt-class { grid-row: 1; grid-column: 1 / -1; }
}

/* ---------- Steps ({{> join-steps}}) ---------- */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: 1fr;
  gap: 24px; padding: 0; margin: 0 0 24px; }
.step { counter-increment: step; position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 62px 22px 22px; }
.step::before { content: counter(step); position: absolute; top: 18px; left: 22px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: #fff; font: 600 1rem/32px var(--font-head); text-align: center; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step h3 { font-size: 1.125rem; margin-bottom: .4em; }
.step p { margin: 0; }

/* ---------- Notices ---------- */
.notice { border-left: 4px solid var(--brand); background: rgba(39,92,166,.06); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--heading); font-size: .9375rem; max-width: 56ch; } /* 45–75 chars a line (#1002237 T4) */
.notice-soft { border-left-color: var(--sky); background: rgba(98,179,208,.1); }
:is(.class-cards, .timetable-wrap, .steps) + .notice { margin-top: 40px; } /* was touching the grid (#1002264) */

/* ---------- FAQ accordion (native <details>; FAQPage schema built from .faq-item when faq_schema: yes) ---------- */
.faq { max-width: 820px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-box); background: #fff; margin-bottom: 10px; }
.faq-item summary { cursor: pointer; list-style: none; position: relative; padding: 16px 52px 16px 20px;
  font: 600 1.0625rem/1.4 var(--font-head); color: var(--heading); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font: 400 1.5rem/1 var(--font-head); color: var(--brand); }
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { color: var(--brand); }
.faq-a { padding: 0 20px 16px; }
.faq-a > :last-child { margin-bottom: 0; }

/* ---------- CTA band ({{> cta-band}}) ---------- */
.cta-band { background: var(--hero-gradient), var(--brand-deep); color: #fff; padding: 48px 0; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { margin: 0; color: rgba(255,255,255,.92); max-width: 620px; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; max-width: 760px; position: relative; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full, .form-actions, .form-note, .form .alert { grid-column: 1 / -1; }
.form label, .form legend { font: 500 .9375rem/1.3 var(--font-head); color: var(--heading); }
.form .optional { font-weight: 400; color: var(--muted); font-size: .9375rem; }
.form input[type=text], .form input[type=tel], .form input[type=email], .form input[type=date], .form select, .form textarea {
  width: 100%; font: 1rem/1.4 var(--font-body); color: var(--heading); background: #fff; border: 1px solid var(--input-border);
  border-radius: var(--radius); padding: 12px 14px; }
.form textarea { min-height: 130px; resize: vertical; }
.form ::placeholder { color: var(--muted); }
.form input:not([type=checkbox]):not([type=radio]):focus, .form select:focus, .form textarea:focus { outline: none; border: 2px solid var(--brand); padding: 11px 13px; box-shadow: 0 0 0 3px rgba(98,179,208,.45); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form .check { display: flex; align-items: flex-start; gap: 10px; font: 400 .9375rem/1.5 var(--font-body); color: var(--text); }
.form .check { min-height: 44px; align-items: center; }
.check input { margin-top: 0; width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.field-hint { font-size: .9375rem; color: var(--muted); } /* content text floor = 15px; 13px only for eyebrows/badges/crumbs (#1002237 T2) */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.alert { padding: 14px 18px; border-radius: var(--radius); font-size: .9375rem; }
.alert-ok { background: #e8f5ee; border: 1px solid #9fd3b4; color: #1d5b37; }
.alert-err { background: #fdeeee; border: 1px solid #e3a5a5; color: #8a1f1f; }
/* Form errors (#1002241 F1): summary at the top of the form + a message under each field. Same markup from site.js and
   from enquiry.php's no-JS re-render. #8a1f1f on #fdeeee 7.6:1, on white 9.4:1; #b3261e border 6.5:1 on white. */
.error-summary p, .error-summary ul { margin: 0; }
.error-summary .error-summary-title { font: 600 1rem/1.4 var(--font-head); margin-bottom: .35em; }
.error-summary ul { padding-left: 1.2em; }
.error-summary li + li { margin-top: .25em; }
.error-summary a { color: #8a1f1f; text-decoration: underline; font-weight: 500; }
.error-summary:focus { outline: 3px solid var(--brand-deep); outline-offset: 2px; }
.field-error { margin: 0; font: 500 .9375rem/1.4 var(--font-head); color: #8a1f1f; }
.form [aria-invalid=true] { border: 2px solid #b3261e; padding: 11px 13px; } /* focused = the usual blue focus border */
.field .field-hint { margin: 0; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
/* Registration form (/register/, #1002260): fieldset groups with their own 2-col grid, radio/checkbox lists, and the
   child/adult wording swap done in CSS (:has) so it works without JS. The legend is floated so it becomes a grid item. */
.form fieldset.group { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; min-width: 0; }
.form fieldset.group + fieldset.group, .reg-form > .field-full:has(#reg-terms) { border-top: 1px solid var(--border); padding-top: 24px; }
.form fieldset.group > legend { float: left; width: 100%; grid-column: 1 / -1; padding: 0;
  font: 600 1.125rem/1.3 var(--font-head); color: var(--heading); }
.form .checks { display: flex; flex-direction: column; gap: 0; }
.form .checks > legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; }
.form .checks > .field-hint { margin-bottom: 4px; }
.form .choices { display: flex; flex-wrap: wrap; gap: 0 32px; }
.form .check a { text-decoration: underline; }
.for-adult { display: none; }
.reg-form:has(#reg-mode-adult:checked) .for-child { display: none; }
.reg-form:has(#reg-mode-adult:checked) .for-adult { display: inline; }
@media (max-width: 640px) { .form fieldset.group { grid-template-columns: 1fr; } }
/* F3: on phones the sticky Call/WhatsApp bar already covers calling, so the form starts higher */
@media (max-width: 767px) { .page-contact .hero-call { display: none; } }
.contact-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.contact-aside { display: grid; gap: 16px; }
.contact-aside .fact p + p { margin-top: .6em; }
.contact-aside .fact p > a:only-child:not(.btn) { display: inline-block; padding: 12px 0; } /* 44px tap rows (#1002238 L1) */
.contact-aside .hours { margin: 0 0 .6em; }
.page-contact .venue-map { height: 360px; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Split media + text ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split img { border-radius: var(--radius-card); }
.split-rev > :first-child { order: 2; }
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: .5em; }
.ticks li::before { content: "›"; position: absolute; left: 6px; color: var(--teal); font: 700 1.1rem/1.5 var(--font-head); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } .split-rev > :first-child { order: 0; } }

/* Venue / map strip + hours list ({{hours}}) */
.venue { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: stretch; }
.venue-map { min-height: 300px; border: 0; width: 100%; height: 100%; border-radius: var(--radius-card); }
@media (max-width: 860px) { .venue { grid-template-columns: 1fr; } }
.venue .btn-row .btn { flex: 1 1 auto; white-space: nowrap; } /* if the pair wraps, both go full width (#1002238 L2) */
.hours { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 1em; }
.hours div { display: contents; }
.hours dt { font: 600 .9375rem/1.6 var(--font-head); color: var(--heading); }
.hours dd { margin: 0; }

/* ---------- Placeholders: swap = replace the file, keep the slot name (PLACEHOLDERS.md) ---------- */
img[data-placeholder] { background: #dceaf3; }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand); color: #fff; padding: 50px 0 0; border-top: 1px solid rgba(255,255,255,.15); font-size: .9375rem; }
.site-footer a:not(.btn) { color: #fff; }
.site-footer > .container > p:only-child { padding-bottom: 50px; margin: 0; } /* holding page */
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 32px; padding-bottom: 36px; }
.footer-h { color: #fff; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1em; }
.footer-brand .logo { display: inline-block; background: #fff; border-radius: 50%; padding: 3px; margin-bottom: 14px; }
.footer-brand .logo img { width: 64px; height: 64px; }
.footer-badge { display: inline-block; font: 600 .75rem/1 var(--font-head); letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 7px 12px; }
.site-footer address { font-style: normal; margin-bottom: 1em; }
.footer-hours { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin-bottom: .6em; }
.footer-hours div { display: contents; }
.footer-hours dt { font-weight: 700; }
.footer-hours dd { margin: 0; }
.footer-small { font-size: .9375rem; color: rgba(255,255,255,.85); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .4em; }
@media (max-width: 767px) { .footer-links li { margin: 0; } .footer-links a { display: inline-block; padding: 12px 0; min-width: 44px; } } /* 44px rows (#1002238 L1) */
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; padding-bottom: 18px; font-size: .9375rem; color: rgba(255,255,255,.85); }
.footer-bottom p { margin: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Sticky mobile Call + WhatsApp bar (every page) ---------- */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    box-shadow: 0 -2px 16px rgba(0,0,0,.18); padding-bottom: env(safe-area-inset-bottom); background: var(--brand); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px;
    font: 600 1rem/1 var(--font-head); text-decoration: none; letter-spacing: .5px; }
  .mobile-bar-call { background: var(--brand); color: #fff; }
  .mobile-bar-wa { background: var(--sky); color: var(--brand-deep); }
  .mobile-bar-call:hover { color: #fff; } .mobile-bar-wa:hover { color: var(--brand-deep); }
  .has-mobile-bar { padding-bottom: 56px; }
  .nav-open .mobile-bar { display: none; }
  /* Tucked away at the top of the page, slides up once the visitor scrolls down (#1002270). html.bar-off comes from the
     head script and site.js; no JS = always shown. visibility (delayed on hide) keeps the hidden links out of the tab order. */
  .mobile-bar { transition: transform var(--motion-base) var(--ease-graceful), visibility 0s; }
  html.bar-off .mobile-bar { transform: translateY(100%); visibility: hidden; box-shadow: none;
    transition: transform var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base), box-shadow 0s linear var(--motion-base); }
}

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 80px 0; }
.notfound .big { font: 700 5rem/1 var(--font-head); color: var(--brand); margin-bottom: 10px; }
.notfound-links { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 520px; margin: 24px auto 0; }
.notfound-links .btn { display: flex; } /* one primary + outlines, equal widths (#1002238 L7) */
@media (max-width: 480px) { .notfound-links { grid-template-columns: 1fr; } }

/* ---------- Motion (#1002252): scroll reveal + reduced motion. API in README "Motion". ----------
   Content is visible by default. Only once the inline head script has set html.motion (JS on, IntersectionObserver
   available, reduced motion off) does a [data-reveal] element start hidden; site.js adds .is-revealed as it scrolls in. */
html.motion [data-reveal]:not(.reveal-done) {   /* .reveal-done (site.js): back to the element's own transitions */
  transition: opacity var(--reveal-duration, var(--motion-base)) var(--ease-graceful) var(--reveal-delay, 0ms),
    transform var(--reveal-duration, var(--motion-base)) var(--ease-graceful) var(--reveal-delay, 0ms),
    filter var(--reveal-duration, var(--motion-base)) var(--ease-graceful) var(--reveal-delay, 0ms); }
html.motion [data-reveal]:not(.is-revealed) { opacity: 0; transform: translate3d(0, var(--motion-distance), 0); }
html.motion [data-reveal=fade]:not(.is-revealed) { transform: none; }
html.motion [data-reveal=down]:not(.is-revealed) { transform: translate3d(0, calc(-1 * var(--motion-distance)), 0); }
html.motion [data-reveal=left]:not(.is-revealed) { transform: translate3d(var(--motion-distance-lg), 0, 0); } /* moves leftwards */
html.motion [data-reveal=right]:not(.is-revealed) { transform: translate3d(calc(-1 * var(--motion-distance-lg)), 0, 0); }
html.motion [data-reveal=scale]:not(.is-revealed) { transform: scale(var(--motion-scale)); }
html.motion [data-reveal=blur]:not(.is-revealed) { transform: translate3d(0, var(--motion-distance-sm), 0); filter: blur(var(--motion-blur)); }
html.motion [data-reveal=blur] { --reveal-duration: var(--motion-slow); }
/* Sideways slides would make a phone scroll sideways mid-animation: phones get the plain rise instead */
@media (max-width: 767px) {
  html.motion [data-reveal=left]:not(.is-revealed), html.motion [data-reveal=right]:not(.is-revealed) {
    transform: translate3d(0, var(--motion-distance), 0); } }
/* Ambient loops (ANIM-03) only run while on screen: site.js toggles .is-inview. !important because an `animation:`
   shorthand on the element (or its children) would otherwise reset the play state to running. */
html.motion [data-motion-ambient]:not(.is-inview), html.motion [data-motion-ambient]:not(.is-inview) *,
html.motion-idle [data-motion-ambient], html.motion-idle [data-motion-ambient] * {   /* idle 8s = rest (#1002254) */
  animation-play-state: paused !important; }
/* Hero text on load (#1002253): pure CSS, so it plays from first paint even if site.js is slow. build.py numbers the
   hero's blocks 0-4 (never the H1 or hero image: LCP); `backwards` = hidden only during its delay, no transform left after. */
@keyframes reveal-load { from { opacity: 0; transform: translate3d(0, var(--motion-distance-sm), 0); } }
html.motion [data-reveal-load] { animation: reveal-load var(--motion-base) var(--ease-graceful) backwards;
  animation-delay: calc(var(--reveal-i, 0) * var(--motion-stagger) + 60ms); }
[data-reveal-load="1"] { --reveal-i: 1; } [data-reveal-load="2"] { --reveal-i: 2; }
[data-reveal-load="3"] { --reveal-i: 3; } [data-reveal-load="4"] { --reveal-i: 4; }
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; } .deco, .bg-drift { display: none; } }

/* ---------- Decorative motion (#1002254): drifting shapes in dark bands + colour wash on .section-alt ----------
   Markup comes from build.py add_deco() (aria-hidden, first child of the section; data-no-deco opts a section out).
   Contrast (fix-1002254/contrast.py, worst case = every layer at its peak): the light shapes sit in ONE group (.deco-light)
   whose opacity caps them, so overlaps never stack past it; the deep orbs only darken. Change an opacity here = re-run it.
   Moves = transform only, on small elements, under html.motion only (no JS = still shapes), paused off screen
   ([data-motion-ambient]), stopped by the reduced-motion rule. No will-change: running transform animations get their own
   layer anyway. Never behind the home .hero-box (backdrop-filter would re-blur every frame). */
:is(.hero, .page-hero, .cta-band, .section-brand, .section-alt) { position: relative; isolation: isolate; }
:is(.page-hero, .cta-band, .section-brand, .section-alt) > .container { position: relative; z-index: 1; }
.deco, .bg-drift { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero > .deco { z-index: 1; }   /* over the photo, under the box (container z 2) */
.deco-2 { transform: scaleX(-1); }   /* mirrored layout for every 2nd band on a page */
.deco > *, .deco-light > * { position: absolute; display: block; }
.deco-light { inset: 0; opacity: .12; }   /* AA cap: white text 5.8+, --eyebrow-on-dark 4.6+ (contrast.py) */
.deco-orb { width: 520px; aspect-ratio: 1; right: -180px; top: -220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,40,85,.45), rgba(20,40,85,0)); }   /* --brand-ink glow: depth, only darkens */
.deco-orb-2 { width: 400px; right: auto; top: auto; left: -160px; bottom: -200px; }
.deco-ring { width: 280px; aspect-ratio: 1; right: 7%; top: 14%; border: 2px solid var(--sky); border-radius: 50%; }
.deco-ring-2 { width: 120px; right: 26%; top: auto; bottom: -36px; border-width: 3px; }
.deco-dots { width: 128px; height: 80px; left: 3%; bottom: 14%;
  background: radial-gradient(circle, var(--sky) 2px, transparent 2.5px) 0 0 / 16px 16px; }
.deco-wave-wrap { left: -60px; right: -60px; bottom: 10%; height: 40px; }
.deco-wave { width: 100%; height: 100%; display: block; fill: none; stroke: var(--sky); stroke-width: 2px; }
/* Home hero: shapes stay in the side gutters, clear of the box; none on narrow screens (the box fills the hero there) */
.hero > .deco .deco-ring { width: 200px; right: auto; left: 3%; top: 12%; }
.hero > .deco .deco-ring-2 { right: 4%; bottom: 12%; }
.hero > .deco .deco-dots { left: auto; right: 3%; top: 16%; bottom: auto; }
.hero > .deco .deco-orb { width: 360px; right: -180px; top: -180px; }
.hero > .deco .deco-orb-2 { width: 360px; left: -180px; bottom: -180px; }
.hero > .deco .deco-wave-wrap { display: none; }
@media (max-width: 1199px) { .hero > .deco { display: none; } }
/* Phones/tablets: fewer, smaller shapes */
@media (max-width: 767px) {
  .deco-orb { width: 360px; right: -160px; top: -180px; } .deco-orb-2 { width: 300px; left: -150px; bottom: -170px; }
  .deco-ring { width: 180px; right: -50px; top: 10%; } .deco-ring-2, .deco-dots { display: none; } }
/* Colour wash on light alternating sections: two soft blobs (sky, royal) in one .09 group — --muted stays 4.7+ */
.bg-drift { opacity: .09; }
.bg-drift > span { position: absolute; width: min(80vw, 680px); aspect-ratio: 1; left: -18%; top: -40%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--sky), rgba(98,179,208,0)); }
.bg-drift > span + span { left: auto; top: auto; right: -14%; bottom: -45%; width: min(70vw, 560px);
  background: radial-gradient(closest-side, rgba(39,92,166,.6), rgba(39,92,166,0)); }
.bg-drift-2 { transform: scaleX(-1); }
/* The loops: small distances, long --motion-ambient cycles, out of step with each other (negative delays) */
@keyframes deco-drift { to { transform: translate3d(28px, 22px, 0) scale(1.06); } }
@keyframes deco-drift-alt { to { transform: translate3d(-24px, -18px, 0) scale(1.04); } }
@keyframes deco-float { to { transform: translate3d(0, -14px, 0); } }
@keyframes deco-wave { to { transform: translate3d(-50px, 0, 0); } }
@keyframes bg-drift { to { transform: translate3d(9%, 7%, 0) scale(1.08); } }
html.motion .deco-orb { animation: deco-drift calc(var(--motion-ambient) * 1.25) var(--ease-in-out) -6s infinite alternate; }
html.motion .deco-orb-2 { animation-name: deco-drift-alt; animation-delay: -15s; }
html.motion .deco-ring { animation: deco-float var(--motion-ambient) var(--ease-in-out) -4s infinite alternate; }
html.motion .deco-ring-2 { animation: deco-drift-alt calc(var(--motion-ambient) * .75) var(--ease-in-out) -9s infinite alternate; }
html.motion .deco-dots { animation: deco-float calc(var(--motion-ambient) * .85) var(--ease-in-out) -12s infinite alternate-reverse; }
html.motion .deco-wave-wrap { animation: deco-wave calc(var(--motion-ambient) * 1.15) var(--ease-in-out) -7s infinite alternate; }
html.motion .bg-drift > span { animation: bg-drift calc(var(--motion-ambient) * 1.5) var(--ease-in-out) -10s infinite alternate; }
html.motion .bg-drift > span + span { animation-duration: calc(var(--motion-ambient) * 1.8); animation-delay: -25s; animation-direction: alternate-reverse; }

/* Reduced motion: no reveals (the head script never sets html.motion), no transitions, no loops, no moving vectors or
   backgrounds, no smooth scroll. Everything simply sits in its resting place. New motion needs no opt-out of its own. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- Legal pages (/terms/, /privacy/) ---------- */
.legal h2 { font-size: 1.375rem; margin: 1.8em 0 .5em; }
.legal h3 { font-size: 1.0625rem; margin: 1.2em 0 .3em; }
.legal ol, .legal ul { padding-left: 1.3em; }
.legal li { margin-bottom: .4em; }
.legal-meta { margin-top: 2.5em; color: var(--muted); font-size: .9375rem; }
.draft-banner { border-left-color: #B54708; background: #FEF3E2; }