/* ===== S30 Studio — base + programming page ===== */
:root {
  --black: #0a0a0a;
  --panel: #141414;
  --panel-2: #1c1c1c;
  --line: #2a2a2a;
  --white: #ffffff;
  --muted: #9a9a9a;
  --yellow: #fcdd08;
  --font-display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: #000;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar img { height: 42px; width: auto; }
.topbar .title {
  font-family: var(--font-display);
  letter-spacing: 1px;
  font-size: 20px;
  text-transform: uppercase;
}
.topbar .title span { color: var(--yellow); }

/* ---------- Layout ---------- */
.wrap { max-width: 1000px; margin: 0 auto; padding: 24px; }

.page-head { margin: 8px 0 20px; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 7vw, 60px);
  line-height: 0.95;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.page-head h1 .accent { color: var(--yellow); }
.page-head p { color: var(--muted); margin: 0; max-width: 60ch; }

/* ---------- Controls ---------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 18px;
}
.control-group { display: flex; flex-direction: column; gap: 6px; }
.control-group .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
}
.pills { display: flex; gap: 8px; }
.pill {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--white);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.pill:hover { border-color: var(--yellow); }
.pill.is-active { background: var(--yellow); color: #000; border-color: var(--yellow); }

.week-label {
  display: inline-block;
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--yellow);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* ---------- Day tabs ---------- */
.day-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.daytab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--font-display);
  letter-spacing: 1px;
  font-size: 16px;
  cursor: pointer;
  transition: all .15s ease;
  min-width: 58px;
}
.daytab:hover { border-color: var(--yellow); }
.daytab.is-active { background: var(--white); color: #000; border-color: var(--white); }

/* ---------- Day hero ---------- */
.day-hero {
  --accent: var(--yellow);
  --on-accent: #000;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 22px;
  align-items: center;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.0));
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  margin-bottom: 22px;
}
.day-hero img {
  width: 160px; height: 160px;
  object-fit: cover;
  border-radius: 12px;
}
.day-hero.no-img { grid-template-columns: 1fr; }
.day-hero .eyebrow {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 4px;
}
.day-hero h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.day-hero .blurb { color: var(--muted); margin: 0; max-width: 52ch; }

/* ---------- Block cards ---------- */
.block-card {
  --accent: var(--yellow);
  --on-accent: #000;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 8px;
  margin-bottom: 18px;
}
.block-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.block-badge {
  font-family: var(--font-display);
  letter-spacing: 1px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 18px;
  text-transform: uppercase;
}
.block-format { color: var(--muted); font-size: 14px; font-style: italic; }

.side-label {
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 16px;
  margin: 14px 0 8px;
  color: var(--white);
}

/* ---------- Exercise table ---------- */
.ex-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 15px;
}
.ex-table thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--on-accent);
  background: var(--accent);
  padding: 8px 12px;
}
.ex-table thead th.col-num { text-align: center; }
.ex-table thead th:first-child { border-top-left-radius: 8px; }
.ex-table thead th:last-child { border-top-right-radius: 8px; }
.ex-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.ex-table td.col-ex { font-weight: 600; }
.ex-table td.col-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #d8d8d8;
  white-space: nowrap;
}
.ex-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.ex-table tbody tr:last-child td { border-bottom: none; }

/* ---------- Status / empty ---------- */
.status {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}
.status-error { color: #ff8f8f; }
.empty { color: var(--muted); padding: 24px 4px; }

.spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--yellow);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Members-only gate */
.member-gate { display: flex; justify-content: center; padding: 30px 0 50px; }
.gate-card {
  background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--yellow);
  border-radius: 18px; padding: 40px 34px; max-width: 440px; width: 100%; text-align: center;
}
.gate-lock { font-size: 34px; margin-bottom: 8px; }
.gate-card h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; font-size: 30px; margin: 0 0 10px; }
.gate-card > p { color: var(--muted); margin: 0 0 22px; }
#gateForm { display: flex; flex-direction: column; gap: 12px; }
#gatePass {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; color: var(--white); font-size: 16px; text-align: center; font-family: inherit;
}
#gatePass:focus { outline: none; border-color: var(--yellow); }
.gate-error { color: #ff8f8f; font-size: 14px; min-height: 18px; margin: 12px 0 0; }
.gate-hint { font-size: 14px; color: var(--muted); margin: 18px 0 0; }

.demo-note {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
}
.demo-note strong { color: var(--yellow); }

/* ---------- Responsive (programming) ---------- */
@media (max-width: 620px) {
  .day-hero { grid-template-columns: 1fr; text-align: center; }
  .day-hero img { width: 100%; height: 200px; }
  .ex-table { font-size: 14px; }
  .ex-table td, .ex-table th { padding: 8px; }
}

/* ============================================================
   HOME PAGE
   ============================================================ */

.wrap.narrow { max-width: 760px; }
.center { text-align: center; }

.eyebrow {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--yellow); font-weight: 700; margin: 0 0 10px;
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--yellow);
  color: #000;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid var(--yellow);
  cursor: pointer;
  font-size: 15px;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-lg { padding: 15px 30px; font-size: 17px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn-ghost:hover { background: var(--white); color: #000; }

/* Nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.nav-brand img { height: 40px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--white); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-links a:not(.btn):hover { color: var(--yellow); }
.nav-toggle { display: none; background: none; border: none; color: var(--white); font-size: 26px; cursor: pointer; }

/* Hero */
.hero {
  position: relative;
  padding: clamp(70px, 13vw, 150px) 24px clamp(56px, 9vw, 104px);
  text-align: center;
  background-color: #000;
  background-image:
    radial-gradient(1200px 500px at 50% -10%, rgba(252,221,8,0.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.40), rgba(10,10,10,0.78)),
    url("../img/photos/web/hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}
.hero-inner { max-width: 820px; margin: 0 auto; }
.hero-eyebrow {
  font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 12vw, 118px);
  line-height: 0.9;
  margin: 0 0 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero h1 .accent { color: var(--yellow); }
.hero-sub { font-size: clamp(16px, 2.4vw, 20px); color: #cfcfcf; max-width: 620px; margin: 0 auto 30px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
  margin-top: 48px;
}
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-family: var(--font-display); font-size: 34px; color: var(--white); }
.hero-stats span { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

/* Sections */
.section { padding: clamp(56px, 9vw, 100px) 0; }
.section h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5.5vw, 52px);
  line-height: 1;
  margin: 0 0 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.lead { font-size: 18px; color: #cfcfcf; max-width: 60ch; margin: 0 auto 24px; }
.intro { background: #0d0d0d; }

.feature-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 44px; text-align: left;
}
.feature { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--yellow); border-radius: 14px; padding: 22px; }
.feature h3 { font-family: var(--font-display); letter-spacing: .5px; text-transform: uppercase; font-size: 20px; margin: 0 0 8px; }
.feature p { color: var(--muted); margin: 0; }

/* Class grid */
.class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.class-card {
  --accent: var(--yellow);
  background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--accent);
  border-radius: 16px; padding: 22px;
  transition: transform .15s ease, border-color .15s ease;
}
.class-card:hover { transform: translateY(-4px); }
.class-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.class-style {
  background: var(--accent); color: #0a0a0a;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.class-day { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.class-card h3 { font-family: var(--font-display); letter-spacing: .5px; text-transform: uppercase; font-size: 25px; margin: 0 0 10px; line-height: 1; }
.class-card p { color: var(--muted); margin: 0; font-size: 15px; }

/* Reviews / social proof */
.reviews { background: #0d0d0d; }
.rating-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 38px; max-width: 760px; margin-left: auto; margin-right: auto; }
.rating-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px 24px; text-align: center; }
.rating-card .stars { color: var(--yellow); font-size: 26px; letter-spacing: 3px; }
.rating-num { font-family: var(--font-display); font-size: 52px; line-height: 1; margin: 8px 0 6px; }
.rating-meta { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.rating-link { color: var(--yellow); text-decoration: none; font-weight: 600; font-size: 14px; }
.rating-link:hover { text-decoration: underline; }

/* Review quote cards */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.quote-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: 14px; padding: 22px; }
.quote-card .stars { color: var(--yellow); font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.quote-card p { color: #dedede; margin: 0 0 12px; font-size: 15px; }
.quote-card .quote-name { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Community gallery */
.gallery { background: #0d0d0d; }
.photo-grid { column-count: 3; column-gap: 14px; margin-top: 38px; }
.photo { break-inside: avoid; margin: 0 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.photo img { width: 100%; display: block; transition: transform .3s ease; }
.photo:hover img { transform: scale(1.04); }
@media (max-width: 860px) { .photo-grid { column-count: 2; } }
@media (max-width: 520px) { .photo-grid { column-count: 1; } }

/* Locations */
.locations { background: #0a0a0a; }
.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.loc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.loc-photo { width: 100%; height: 200px; object-fit: cover; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--line); }
.loc-card h3 { font-family: var(--font-display); letter-spacing: 1px; text-transform: uppercase; font-size: 30px; margin: 0 0 10px; color: var(--yellow); }
.loc-addr { color: #cfcfcf; margin: 0 0 14px; }
.loc-meta { list-style: none; padding: 0; margin: 0 0 20px; color: var(--muted); }
.loc-meta li { padding: 4px 0 4px 22px; position: relative; }
.loc-meta li::before { content: "→"; position: absolute; left: 0; color: var(--yellow); }
a.loc-addr { display: block; text-decoration: none; }
a.loc-addr:hover { color: var(--yellow); }
.loc-contact { margin: 0 0 14px; }
.loc-contact a { color: var(--white); text-decoration: none; font-weight: 600; }
.loc-contact a:hover { color: var(--yellow); }
.loc-socials { display: flex; gap: 16px; margin-bottom: 22px; }
.loc-socials a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.loc-socials a:hover { color: var(--yellow); }

/* Pricing (per studio) */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.price-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; text-align: center; }
.price-card h3 { font-family: var(--font-display); letter-spacing: 1px; text-transform: uppercase; font-size: 28px; margin: 0 0 10px; color: var(--yellow); }
.price-amount { margin: 0 0 8px; color: #cfcfcf; font-size: 15px; }
.price-amount strong { font-family: var(--font-display); font-size: 40px; color: var(--white); letter-spacing: 1px; }
.price-amount span { color: var(--muted); }
.price-note { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.price-note em { color: #cfcfcf; font-style: normal; }

/* Membership */
.membership { background: linear-gradient(135deg, rgba(252,221,8,0.06), transparent); }

/* FAQ accordion */
.faq { background: #0d0d0d; }
.faq-list { margin-top: 34px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; background: var(--panel); }
.faq-item summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--yellow); font-size: 26px; font-weight: 400; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--yellow); }
.faq-item > p { padding: 0 22px 20px; color: var(--muted); margin: 0; }
.faq-item a { color: var(--yellow); text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

/* Lead form */
.lead-form { margin-top: 34px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.field { margin-bottom: 18px; display: flex; flex-direction: column; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: .5px; margin-bottom: 7px; color: #dedede; }
.field .optional { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; color: var(--white); font-size: 15px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); }
.form-note { text-align: center; margin: 14px 0 0; min-height: 20px; font-size: 14px; color: var(--muted); }
.form-note.ok { color: var(--yellow); font-weight: 600; }
.form-note.err { color: #ff8f8f; font-weight: 600; }

/* Footer */
.footer { background: #000; border-top: 1px solid var(--line); padding: 56px 0 26px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-logo { height: 44px; width: auto; margin-bottom: 14px; }
.footer-tag { color: var(--muted); margin: 0; }
.footer h4 { font-family: var(--font-display); letter-spacing: 1px; text-transform: uppercase; font-size: 16px; margin: 0 0 14px; }
.footer a { display: block; color: #cfcfcf; text-decoration: none; margin-bottom: 9px; font-size: 15px; }
.footer a:hover { color: var(--yellow); }
.footer-social { color: var(--muted); margin: 10px 0 0; font-size: 14px; }
.footer-copy { text-align: center; color: var(--muted); font-size: 13px; margin: 40px 0 0; border-top: 1px solid var(--line); padding-top: 22px; }

/* Active nav link */
.nav-links a.active { color: var(--yellow); }

/* Sub-page hero */
.subhero {
  padding: clamp(56px, 8vw, 100px) 24px clamp(36px, 5vw, 58px);
  text-align: center;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(1000px 420px at 50% -20%, rgba(252,221,8,0.13), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.45), rgba(10,10,10,0.74)),
    url("../img/photos/web/hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}
.subhero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 9vw, 82px);
  line-height: 0.92; margin: 0 0 18px; text-transform: uppercase; letter-spacing: 1px;
}
.subhero h1 .accent { color: var(--yellow); }
.inline-link { color: var(--yellow); text-decoration: none; }
.inline-link:hover { text-decoration: underline; }

/* How it works */
.howto { background: #0d0d0d; }
.howto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.howto-step { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.howto-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--yellow); color: #000; font-family: var(--font-display); font-size: 20px; margin-bottom: 12px;
}
.howto-step h3 { font-family: var(--font-display); letter-spacing: .5px; text-transform: uppercase; font-size: 18px; margin: 0 0 6px; }
.howto-step p { color: var(--muted); margin: 0; font-size: 14px; }

/* Class detail cards */
.class-details .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.class-detail {
  --accent: var(--yellow);
  background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--accent);
  border-radius: 16px; padding: 26px 28px;
}
.cd-day { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.cd-style { background: var(--accent); color: #0a0a0a; padding: 4px 11px; border-radius: 999px; font-weight: 700; letter-spacing: 1.5px; }
.class-detail h2 {
  font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); line-height: 1;
  margin: 0 0 14px; text-transform: uppercase; letter-spacing: 1px;
}
.class-detail > p { color: #cfcfcf; margin: 0 0 14px; }
.cd-for { font-size: 14px; color: var(--muted); }
.cd-for span { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-right: 8px; font-size: 12px; }

/* Full-width action photo band */
.photo-band { position: relative; height: clamp(240px, 34vw, 400px); overflow: hidden; border-block: 1px solid var(--line); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
.photo-band-caption {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 26px; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7));
}
.photo-band-caption span {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px;
  font-size: clamp(18px, 3.4vw, 30px); color: var(--white); text-align: center;
}

/* CTA band */
.cta-band { background: linear-gradient(135deg, rgba(252,221,8,0.07), transparent); text-align: center; }

/* Timetable */
.tt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.tt-card {
  --accent: var(--yellow);
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: 14px; padding: 20px;
}
.tt-day { font-family: var(--font-display); letter-spacing: 1px; text-transform: uppercase; font-size: 22px; }
.tt-class { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin: 2px 0 14px; }
.tt-times { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-chip {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums;
}
/* Mindbody schedule embed */
.mb-schedule { background: #fff; border-radius: 14px; padding: 10px; min-height: 200px; overflow-x: auto; }
.mb-schedule .mindbody-widget { min-height: 180px; }

.tt-note { color: var(--muted); font-size: 14px; margin: 22px 0 18px; text-align: center; }
.tt-note:not(:empty)::before { content: "★ "; color: var(--yellow); }
.tt-empty { text-align: center; padding: 40px 20px; }
.tt-empty h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; font-size: 26px; margin: 0 0 12px; }
.tt-empty p { color: var(--muted); max-width: 46ch; margin: 0 auto 20px; }

/* Legal pages (terms) */
.legal { text-align: left; }
.legal h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px;
  font-size: 22px; margin: 34px 0 12px; color: var(--white);
}
.legal h2:first-child { margin-top: 0; }
.legal p { color: #cfcfcf; margin: 0 0 12px; }
.legal ul { color: #cfcfcf; margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--white); }
.legal a { color: var(--yellow); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal-contact { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-copy a { display: inline; color: var(--muted); text-decoration: underline; }
.footer-copy a:hover { color: var(--yellow); }

/* Home responsive */
@media (max-width: 860px) {
  .feature-row, .class-grid, .howto-grid, .tt-grid, .quote-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #000; border-bottom: 1px solid var(--line); padding: 8px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 28px; width: 100%; }
  .nav-toggle { display: block; }
  .feature-row, .class-grid, .loc-grid, .field-row, .howto-grid, .tt-grid, .price-grid, .rating-grid, .quote-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-stats { gap: 26px; }
  .class-details .wrap { grid-template-columns: 1fr; }
}