/* Academy websites (functions_site.php, site.php). Three looks: night (dark), day (light) and studio
   (light with dark hero, prices and closing band). --a is the academy's colour from a fixed list, all
   dark enough for white text; on dark surfaces it is lifted towards white for text. */
:root { --a: #5b4bd1; --r: 22px; --wrap: 1160px; --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
.t-night { --bg: #0a0b16; --bg2: #10122a; --card: #15172e; --ink: #f4f5fb; --ink2: #d6d8ea; --muted: #a2a6c3; --line: rgba(255, 255, 255, .09); --at: color-mix(in srgb, var(--a) 55%, #fff); color-scheme: dark; }
.t-day, .t-studio { --bg: #f6f6f9; --bg2: #ffffff; --card: #ffffff; --ink: #0d0e18; --ink2: #33364a; --muted: #5d6075; --line: rgba(13, 14, 24, .09); --at: var(--a); color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.s-wrap { width: min(100% - 40px, var(--wrap)); margin: 0 auto; }
.s-narrow { width: min(100% - 40px, 780px); }
.s-preview { position: fixed; z-index: 60; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(10, 11, 22, .86); color: #fff; font-size: 13px; font-weight: 600; pointer-events: none; }

/* Buttons */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 14px; background: var(--a); color: #fff; font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s; box-shadow: 0 12px 30px -14px var(--a); }
.s-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 36px -14px var(--a); }
.s-btn:active { transform: none; }
.s-btn:focus-visible, .s-links a:focus-visible, .s-days button:focus-visible, summary:focus-visible { outline: 3px solid var(--at); outline-offset: 3px; }
.s-btn--lg { min-height: 56px; padding: 0 28px; font-size: 16.5px; border-radius: 16px; }
.s-btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.s-btn--ghost { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: blur(10px); }
.s-btn--ghost:hover { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.s-btn--soft { background: color-mix(in srgb, var(--a) 12%, var(--card)); color: var(--at); box-shadow: none; }
.s-btn--soft:hover { background: color-mix(in srgb, var(--a) 20%, var(--card)); box-shadow: none; }
.s-btn--light { background: #fff; color: #0d0e18; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .6); }

/* Navigation: transparent over the hero, solid once scrolled */
.s-nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 20px; padding: 14px max(20px, calc((100% - var(--wrap)) / 2)); color: #fff; transition: background .25s, box-shadow .25s, color .25s, padding .25s; }
.s-nav.is-solid { background: color-mix(in srgb, var(--bg2) 86%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); color: var(--ink); box-shadow: 0 1px 0 var(--line); padding-top: 10px; padding-bottom: 10px; }
.s-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -0.02em; font-size: 17px; min-width: 0; margin-right: auto; }
.s-brand img { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; background: #fff; }
.s-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-links { display: flex; gap: 4px; }
.s-links a { padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; text-decoration: none; opacity: .85; }
.s-links a:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.s-burger { display: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.s-burger span { width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s; }
.s-nav.is-open .s-burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.s-nav.is-open .s-burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 900px) {
	.s-burger { display: flex; }
	.s-nav > .s-btn--sm { display: none; }
	.s-links { position: fixed; top: 0; left: 0; right: 0; z-index: -1; flex-direction: column; gap: 2px; padding: 76px 16px 18px; background: var(--bg2); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); transform: translateY(-105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
	.s-nav.is-open { color: var(--ink); }
	.s-nav.is-open .s-links { transform: none; }
	.s-links a { padding: 14px 12px; font-size: 18px; }
}

/* Hero: always dark, the academy's photo or an aurora in its colour */
.s-hero { position: relative; isolation: isolate; min-height: 92vh; min-height: 92svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 130px 0 56px; color: #fff; background: #0a0b16; overflow: hidden; }
.s-hero::before { content: ""; position: absolute; inset: -20%; z-index: -2; background:
	radial-gradient(38% 50% at 18% 30%, color-mix(in srgb, var(--a) 85%, #03c3e3), transparent 70%),
	radial-gradient(40% 55% at 70% 20%, color-mix(in srgb, var(--a) 80%, #9a3ea8), transparent 70%),
	radial-gradient(35% 45% at 85% 80%, color-mix(in srgb, var(--a) 50%, #e0835a), transparent 70%); filter: blur(30px); opacity: .9; animation: s-drift 20s ease-in-out infinite alternate; }
.s-hero.has-img::before { inset: 0; filter: none; opacity: 1; background: var(--hero) center / cover no-repeat; animation: s-zoom 24s ease-out both; }
.s-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 9, 20, .55) 0%, rgba(8, 9, 20, .15) 35%, rgba(8, 9, 20, .82) 100%), linear-gradient(90deg, rgba(8, 9, 20, .55), transparent 70%); }
@keyframes s-drift { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.1); } }
@keyframes s-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .s-hero::before { animation: none; } }
.s-hero-in { width: min(100% - 40px, var(--wrap)); margin: 0 auto; }
.s-hero-place { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); backdrop-filter: blur(10px); }
.s-hero h1 { font-size: clamp(46px, 9.4vw, 128px); font-weight: 900; letter-spacing: -0.055em; line-height: .9; max-width: 14ch; text-shadow: 0 10px 50px rgba(0, 0, 0, .35); animation: s-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.s-hero-lead { margin: 22px 0 0; max-width: 46ch; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .86); animation: s-rise .9s .08s cubic-bezier(.2, .8, .2, 1) both; }
.s-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; animation: s-rise .9s .16s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes s-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .s-hero h1, .s-hero-lead, .s-hero-cta { animation: none; } }
.s-hero-faces { position: absolute; right: max(20px, calc((100% - var(--wrap)) / 2)); bottom: 56px; display: flex; align-items: center; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); backdrop-filter: blur(12px); font-size: 14px; font-weight: 600; }
.s-hero-faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(20, 22, 40, .9); }
.s-hero-faces img + img { margin-left: -12px; }
.s-hero-faces span { margin-left: 12px; }
@media (max-width: 900px) { .s-hero-faces { position: static; margin: 34px 20px 0; align-self: flex-start; } .s-hero { padding-bottom: 36px; } }

/* Sections */
.s-sec { padding: clamp(64px, 9vw, 112px) 0; }
.s-alt { background: var(--bg2); }
.t-night .s-alt { background: var(--bg2); }
.s-kicker { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--at); }
.s-sec h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 850; letter-spacing: -0.045em; }
.s-sub { margin: 14px 0 0; color: var(--muted); font-size: 18px; max-width: 52ch; }
.s-text { margin: 18px 0 0; font-size: 18px; color: var(--ink2); max-width: 62ch; }

/* About + numbers */
.s-about-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .s-about-grid { grid-template-columns: 1fr; } }
.s-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.s-stats div { padding: 24px 22px; border-radius: var(--r); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.s-stats div:first-child { background: var(--a); color: #fff; box-shadow: 0 24px 50px -28px var(--a); }
.s-stats dt { font-size: clamp(34px, 4vw, 48px); font-weight: 900; letter-spacing: -0.05em; line-height: 1; }
.s-stats dd { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }
.s-stats div:first-child dd { color: rgba(255, 255, 255, .82); }

/* Schedule: a week of columns; on phones one day at a time */
.s-days { display: none; gap: 6px; margin: 28px 0 0; overflow-x: auto; scrollbar-width: none; }
.s-days button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink2); font: 600 15px var(--font); cursor: pointer; }
.s-days button[aria-selected="true"] { background: var(--a); color: #fff; box-shadow: none; }
.s-week { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px; margin-top: 34px; overflow-x: auto; padding-bottom: 6px; }
.s-day { min-width: 0; }
.s-day h3 { font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: 0; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.s-day h3 span { padding: 1px 8px; border-radius: 999px; background: var(--a); color: #fff; font-size: 12px; }
.s-day.is-today h3 { color: var(--ink); }
.s-class { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line); margin-bottom: 8px; }
.t-day .s-alt .s-class, .t-studio .s-alt .s-class { background: var(--bg); box-shadow: none; }
.s-day.is-today .s-class { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--a) 55%, transparent); }
.s-class time { flex: none; font-weight: 800; font-size: 15px; color: var(--at); line-height: 1.3; }
.s-class time small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.s-class b { display: block; font-size: 15px; line-height: 1.3; }
.s-class span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
@media (max-width: 760px) {
	.s-days { display: flex; }
	.s-week { display: block; margin-top: 16px; }
	.s-week.is-tabbed .s-day { display: none; }
	.s-week.is-tabbed .s-day.is-shown { display: block; }
	.s-week.is-tabbed .s-day h3 { display: none; }
}

/* Prices */
.t-studio .s-prices, .t-studio .s-band { --card: #15172e; --ink: #f4f5fb; --ink2: #d6d8ea; --muted: #a2a6c3; --line: rgba(255, 255, 255, .1); --at: color-mix(in srgb, var(--a) 55%, #fff); background: #0b0c18; color: var(--ink); }
.s-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 40px; align-items: stretch; }
.s-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.s-plan.is-main { box-shadow: 0 0 0 2px var(--a), 0 30px 60px -30px var(--a); }
.s-plan-tag { position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px; background: var(--a); color: #fff; font-size: 12.5px; font-weight: 700; }
.s-plan h3 { font-size: 20px; font-weight: 750; }
.s-plan-price { margin: 14px 0 0; font-size: 26px; font-weight: 850; letter-spacing: -0.035em; line-height: 1.15; }
.s-plan-desc { margin: 12px 0 0; color: var(--ink2); font-size: 15.5px; }
.s-plan-terms { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }
.s-plan .s-btn { margin-top: auto; width: 100%; }
.s-plan .s-plan-terms + .s-btn, .s-plan .s-plan-desc + .s-btn, .s-plan .s-plan-price + .s-btn { margin-top: 24px; }

/* Instructors */
.s-coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 40px; }
.s-coach { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--a) 70%, #000), #0a0b16); }
.s-coach img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.s-coach:hover img { transform: scale(1.04); }
.s-coach-ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: 64px; font-weight: 900; color: rgba(255, 255, 255, .85); letter-spacing: -0.04em; }
.s-coach figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 18px; background: linear-gradient(180deg, transparent, rgba(6, 7, 16, .88)); color: #fff; }
.s-coach b { display: block; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.s-coach span { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.s-coach span i { width: 22px; height: 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

/* Photos */
.s-photos { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(120px, 16vw, 210px); gap: 10px; margin-top: 40px; }
.s-photos a { border-radius: 18px; overflow: hidden; background: var(--card); }
.s-photos a:first-child { grid-column: span 2; grid-row: span 2; }
.s-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.s-photos a:hover img { transform: scale(1.04); }
@media (max-width: 640px) { .s-photos { grid-template-columns: 1fr 1fr; } }
.s-lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(5, 6, 14, .92); }
.s-lightbox[hidden] { display: none; }
.s-lightbox img { max-height: 88vh; border-radius: 14px; }
.s-lightbox button { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; cursor: pointer; }

/* Video */
.s-video { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.s-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Questions */
.s-faq { margin-top: 32px; display: grid; gap: 10px; }
.s-faq details { border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.s-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary i { color: var(--at); transition: transform .2s; flex: none; }
.s-faq details[open] summary i { transform: rotate(45deg); }
.s-faq details p { margin: 0; padding: 0 22px 22px; color: var(--ink2); }

/* Closing band */
.s-band { padding: clamp(64px, 8vw, 100px) 0; text-align: center; color: #fff; background: radial-gradient(60% 120% at 20% 0%, color-mix(in srgb, var(--a) 70%, #03c3e3), transparent 70%), radial-gradient(60% 120% at 90% 100%, color-mix(in srgb, var(--a) 60%, #9a3ea8), transparent 70%), color-mix(in srgb, var(--a) 70%, #0a0b16); }
.t-studio .s-band { background: radial-gradient(60% 120% at 20% 0%, color-mix(in srgb, var(--a) 70%, #03c3e3), transparent 70%), radial-gradient(60% 120% at 90% 100%, color-mix(in srgb, var(--a) 60%, #9a3ea8), transparent 70%), color-mix(in srgb, var(--a) 70%, #0a0b16); }
.s-band h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 900; letter-spacing: -0.05em; }
.s-band p { margin: 14px auto 28px; max-width: 46ch; font-size: 18px; color: rgba(255, 255, 255, .86); }

/* Contact */
.s-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .s-contact { grid-template-columns: 1fr; } }
.s-contact-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.s-contact-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; }
.s-contact-list i { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--at); background: color-mix(in srgb, var(--a) 12%, var(--card)); }
.s-contact-list a { text-decoration: none; padding-top: 7px; overflow-wrap: anywhere; }
.s-contact-list a:hover { color: var(--at); }
.s-social { display: flex; gap: 8px; margin-top: 24px; }
.s-social a { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; background: var(--card); box-shadow: 0 0 0 1px var(--line); text-decoration: none; transition: background .15s, color .15s; }
.s-social a:hover { background: var(--a); color: #fff; }
.s-map { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 300px; padding: 24px; border-radius: 28px; overflow: hidden; text-decoration: none; color: #fff;
	background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--a) 60%, transparent), transparent 45%),
	repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 34px), #12142a; }
.s-map-pin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--a); box-shadow: 0 0 0 10px color-mix(in srgb, var(--a) 30%, transparent), 0 0 0 22px color-mix(in srgb, var(--a) 14%, transparent); }
.s-map b { font-size: 19px; }
.s-map small { font-size: 14px; color: rgba(255, 255, 255, .75); }
.s-map:hover .s-map-pin { transform: translate(-50%, -54%); transition: transform .2s; }

/* Footer */
.s-foot { padding: 28px 0 40px; font-size: 14px; color: var(--muted); }
.s-foot .s-wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.s-foot a { text-decoration: none; font-weight: 600; }
.s-foot a:hover { color: var(--ink); }
@media (max-width: 560px) { .s-coaches { grid-template-columns: 1fr 1fr; gap: 10px; } .s-coach b { font-size: 15px; } .s-coach figcaption { padding: 30px 12px 12px; } }

/* ---- 2026-10 refresh: stronger hero, readable week, grouped prices, belts earned, phone call to action ---- */
/* Hero: the photo sits further back so the name reads over any picture; full first screen */
.s-hero { min-height: 100vh; min-height: 100svh; }
.s-hero.has-img::after { background:
	linear-gradient(180deg, rgba(8, 9, 20, .62) 0%, rgba(8, 9, 20, .28) 30%, rgba(8, 9, 20, .9) 100%),
	linear-gradient(90deg, rgba(8, 9, 20, .82) 0%, rgba(8, 9, 20, .45) 55%, rgba(8, 9, 20, .2) 100%); }
.s-hero h1 { max-width: 15ch; hyphens: manual; overflow-wrap: normal; }
.s-hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; animation: s-rise .9s .22s cubic-bezier(.2, .8, .2, 1) both; }
.s-hero-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); backdrop-filter: blur(10px); }
.s-hero-chips i { color: color-mix(in srgb, var(--a) 45%, #fff); }
@media (prefers-reduced-motion: reduce) { .s-hero-chips { animation: none; } }

/* Schedule: time above the name so long class names fit; a colour per kind of class; filters */
.s-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.s-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink2); font: 600 14.5px var(--font); cursor: pointer; }
.s-filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.s-filters button:focus-visible { outline: 3px solid var(--at); outline-offset: 3px; }
.s-k { width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--muted)); flex: none; }
.s-class { --k: color-mix(in srgb, var(--a) 70%, #fff); position: relative; overflow: hidden; }
.s-class::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k); opacity: .9; }
.s-k--kids, .s-class--kids { --k: #f59e0b; }
.s-k--women, .s-class--women { --k: #ec4899; }
.s-k--gi, .s-class--gi { --k: #3b82f6; }
.s-k--nogi, .s-class--nogi { --k: #14b8a6; }
.s-k--striking, .s-class--striking { --k: #ef4444; }
.s-k--wrestling, .s-class--wrestling { --k: #a855f7; }
.s-k--judo, .s-class--judo { --k: #84cc16; }
.s-k--open, .s-class--open { --k: #94a3b8; }
.s-class.is-dim { opacity: .28; }
.s-class.is-dim::before { opacity: .4; }
@media (min-width: 761px) {
	.s-week { grid-auto-columns: minmax(140px, 1fr); }
	.s-class { flex-direction: column; gap: 6px; padding: 12px 12px 12px 16px; }
	.s-class time { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
	.s-class time small { display: inline; font-size: 12.5px; }
	.s-class time small::before { content: "– "; }
	.s-class b { font-size: 14.5px; overflow-wrap: anywhere; hyphens: auto; }
}
@media (max-width: 760px) { .s-class { padding-left: 18px; } }

/* Prices: the trial band, one card per membership with its versions, drop-ins as a list */
.s-trial { display: flex; align-items: center; gap: 18px; margin-top: 36px; padding: 18px 18px 18px 22px; border-radius: 22px; text-decoration: none; color: inherit;
	background: linear-gradient(120deg, color-mix(in srgb, var(--a) 26%, var(--card)), var(--card) 70%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 45%, transparent), 0 24px 60px -36px var(--a); transition: transform .15s; }
.s-trial:hover { transform: translateY(-1px); }
.s-trial-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--a); }
.s-trial-main { flex: 1; min-width: 0; }
.s-trial-main b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.s-trial-main small { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); }
.s-trial .s-btn { flex: none; }
@media (max-width: 620px) { .s-trial { flex-wrap: wrap; } .s-trial .s-btn { width: 100%; } }
.s-plans { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top: 18px; }
.s-trial + .s-plans { margin-top: 16px; }
.s-plan-from { margin: 14px 0 -10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.s-plan-opts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.s-plan-opts a, .s-drops a { display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 14px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--a) 7%, var(--bg2)); box-shadow: 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.t-night .s-plan-opts a, .t-studio .s-prices .s-plan-opts a, .t-night .s-drops a, .t-studio .s-prices .s-drops a { background: rgba(255, 255, 255, .04); }
.s-plan-opts a:hover, .s-drops a:hover { background: color-mix(in srgb, var(--a) 18%, var(--card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 50%, transparent); }
.s-plan-opts span, .s-drops span { flex: 1; min-width: 0; }
.s-plan-opts b, .s-drops b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.s-plan-opts small, .s-drops small { display: block; font-size: 12.5px; color: var(--muted); }
.s-plan-opts em, .s-drops em { font-style: normal; font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.s-plan-opts i, .s-drops i { font-size: 12px; color: var(--at); }
.s-drops { margin-top: 30px; }
.s-drops h3 { font-size: 18px; font-weight: 750; }
.s-drops ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }

/* Belts earned here */
.s-belts { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.s-belts li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.s-belts-face { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 22%, var(--card)); }
.s-belts-face img { width: 100%; height: 100%; object-fit: cover; }
.s-belts-face b { font-size: 18px; font-weight: 800; color: var(--at); }
.s-belts-main { flex: 1; min-width: 0; }
.s-belts-main > b { display: block; font-size: 16px; font-weight: 750; }
.s-belts-belt { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13.5px; color: var(--ink2); }
.s-belts-belt i { width: 26px; height: 9px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .35); }
.s-belts time { flex: none; font-size: 13px; color: var(--muted); }
.s-belts-more { margin: 20px 0 0; font-size: 14.5px; }
.s-belts-more a { color: var(--at); font-weight: 700; text-decoration: none; }

/* Phones: the call to action stays at hand once the hero is gone */
.s-sticky { display: none; }
@media (max-width: 760px) {
	.s-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg2) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 -1px 0 var(--line); transform: translateY(110%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
	.s-sticky.is-on { transform: none; }
	.s-sticky .s-btn { width: 100%; }
	.s-foot { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) { .s-sticky { transition: none; } }

/* Membership versions: name and price on one line, its own terms below, the arrow at the end */
.s-plan-opts a { display: grid; grid-template-columns: minmax(0, 1fr) 14px; grid-template-areas: "n i" "p i" "t i"; column-gap: 10px; row-gap: 1px; align-items: center; }
.s-plan-opts a b { grid-area: n; }
.s-plan-opts a em { grid-area: p; font-size: 16px; color: var(--ink); }
.s-plan-opts a b { font-size: 13px; font-weight: 600; color: var(--muted); }
.s-plan-opts a small { grid-area: t; }
.s-plan-opts a i { grid-area: i; }
.s-plan-opts em { white-space: normal; }
.s-plan .s-plan-terms + .s-plan-opts { margin-top: 14px; }
.s-prices .s-plans { align-items: start; }

/* Events and seminars (posted on Beltchecker) */
.s-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 40px; }
.s-event { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.s-event:hover { box-shadow: 0 0 0 2px var(--a); transform: translateY(-1px); }
.s-event time { flex: none; display: grid; place-items: center; width: 64px; height: 68px; border-radius: 16px; background: color-mix(in srgb, var(--a) 14%, transparent); color: var(--at); line-height: 1; }
.s-event time b { font-size: 26px; font-weight: 850; letter-spacing: -0.03em; }
.s-event time span { font-size: 13px; font-weight: 700; text-transform: uppercase; }
.s-event > div { flex: 1; min-width: 0; }
.s-event h3 { font-size: 18px; font-weight: 750; line-height: 1.25; }
.s-event p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.s-event > i { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .s-event { transition: none; } .s-event:hover { transform: none; } }