@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

/* ================================================================
   TOKENS
   ================================================================ */
:root {
    /* Brand — overridden by the club's brand.css (template red shown) */
    --brand: #e4002b;
    --brand-deep: #8f0019;
    --brand-rgb: 228,0,43;
    --on-brand: #ffffff; /* 4.85:1 on the red */
    --brand-on-dark: #ff2b45; /* 5.36:1 on near-black */
    --brand-on-light: #a8001f; /* 7.2:1 on the light background */
    --brand-bright: var(--brand-on-dark); /* derived — see header */
    /* Neutrals */
    --ink: #0a0a0a; /* page background */
    --ink-2: #050505; /* footer, nav drawer */
    --panel: #141414;
    --panel-2: #1b1b1b;
    --line: rgba(255,255,255,.09);
    --line-brand: rgba(var(--brand-rgb),.35);
    --paper: #f6f5f2; /* body text */
    --grey: #9b9b9b;
    --grey-dim: #6b6b6b;
    /* Type — a club wanting different type restates these in brand.css
       and adds its own @import there. */
    --f-display: 'Montserrat', 'Arial Narrow', sans-serif;
    --f-label: 'Montserrat', sans-serif;
    --f-body: 'Open Sans', sans-serif;
    /* Layout */
    --maxw: 1240px;
    --pad: clamp(20px, 5vw, 64px);
    --cut: 22px; /* corner-cut size; 0 = square corners */


    /* Booking status — deliberately independent of --brand */
    --ok: #22c55e;
    --full: #ef4444;
    /* Themeable surfaces (dark defaults) */
    --surface-1: rgba(255,255,255,.03);
    --surface-2: rgba(255,255,255,.02);
    --overlay-header: rgba(8,8,8,.92);
    --overlay-dropdown: rgba(15,15,15,.98);
    --border-soft: rgba(255,255,255,.35);
    --checker-a: #1c1c1c;
    --checker-b: #171717;
    --label-on-placeholder: rgba(255,255,255,.35);
    /* Fixed "always dark" text — never inverts */
    --on-dark: #f6f5f2;
    --on-dark-muted: rgba(246,245,242,.82);
    --on-dark-dim: rgba(246,245,242,.55);
}

/* Light theme — set data-theme="light" on <html> (main.js toggle).
   Colour/surface tokens only; layout is shared by both themes. */
[data-theme="light"] {
    --ink: #f7f6f3;
    --ink-2: #fbfaf7;
    --panel: #ffffff;
    --panel-2: #f1efea;
    --line: rgba(10,8,6,.10);
    --line-brand: rgba(var(--brand-rgb),.30);
    --brand-bright: var(--brand-on-light);
    --paper: #171512;
    --grey: #5a564f;
    --grey-dim: #8b877e;
    --surface-1: rgba(10,8,6,.035);
    --surface-2: rgba(10,8,6,.025);
    --overlay-header: rgba(247,246,243,.86);
    --overlay-dropdown: rgba(255,255,255,.98);
    --border-soft: rgba(10,8,6,.22);
    --checker-a: #efeee9;
    --checker-b: #e6e4dd;
    --label-on-placeholder: rgba(10,8,6,.32);
}



/* ================================================================
   BASE
   ================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -.01em;
    line-height: 1.05;
}

p {
    margin: 0 0 1em;
    color: var(--grey);
}

button {
    font-family: inherit;
    cursor: pointer;
}

::selection {
    background: var(--brand);
    color: var(--on-brand);
}

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
}

/* Corner-cut "strike edge" motif */
.clip {
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.clip-sm {
    --cut: 12px;
}

/* ================================================================
   EYEBROW / BUTTONS
   ================================================================ */
.eyebrow {
    font-family: var(--f-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .32em;
    font-size: 12.5px;
    color: var(--brand-bright);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

    .eyebrow::before {
        content: '';
        width: 26px;
        height: 2px;
        background: var(--brand);
        display: inline-block;
    }

/* Buttons are softened from the template's strike-edge look (Champions,
   2026-09-12): 8px radius instead of the corner cut, .10em tracking
   instead of .14em, and a quiet lift instead of the gloss sweep. */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--f-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 15px;
    padding: 16px 32px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s ease, color .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease, filter .25s ease;
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }

.btn-primary {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 1px 2px rgba(0,0,0,.14);
}

    /* Brightness, not a swap to --brand-bright: in light mode that is the
   deep accent-text shade and would sink --on-brand text. */
    .btn-primary:hover {
        filter: brightness(1.07);
        box-shadow: 0 6px 18px rgba(var(--brand-rgb),.30);
    }

    .btn-primary span {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

.btn-outline {
    background: transparent;
    color: var(--paper);
    border-color: var(--border-soft);
}

    .btn-outline:hover {
        border-color: var(--brand);
        color: var(--brand-bright);
        background: rgba(var(--brand-rgb),.07);
    }

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 11px 20px;
    font-size: 13px;
    border-radius: 7px;
}

/* ================================================================
   HEADER / NAV
   ================================================================ */
.site-header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
}

/* z-index:2 (paired with .ticker's z-index:1) keeps the "More" dropdown
   above the ticker's GPU-promoted animated layer. */
.site-header {
    position: relative;
    z-index: 2;
    padding: 18px 0;
    border-bottom: 1px solid transparent;
    transition: background .35s ease, padding .35s ease, border-color .35s ease;
}

.site-header-wrap.solid .site-header {
    background: var(--overlay-header);
    backdrop-filter: blur(10px);
    padding: 12px 0;
    border-bottom-color: var(--line);
}

/* Home page: transparent header over the dark hero keeps light text
   until .solid kicks in. .main-nav only at desktop — below 1081px it's
   a drawer with its own themed background. */
.site-header-wrap.on-hero:not(.solid) .brand,
.site-header-wrap.on-hero:not(.solid) .nav-toggle {
    --paper: var(--on-dark);
    --grey: var(--on-dark-muted);
    --grey-dim: var(--on-dark-dim);
    --brand-bright: var(--brand-on-dark);
    color: var(--paper);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Theme toggle (sun/moon) */
.theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color .2s ease, color .2s ease;
}

    .theme-toggle:hover {
        border-color: var(--brand);
        color: var(--brand-bright);
    }

    .theme-toggle svg {
        width: 16px;
        height: 16px;
        position: absolute;
        transition: opacity .25s ease, transform .35s ease;
    }

    .theme-toggle .i-sun,
    [data-theme="light"] .theme-toggle .i-moon {
        opacity: 0;
    }

    .theme-toggle .i-sun {
        transform: rotate(-40deg) scale(.6);
    }

[data-theme="light"] .theme-toggle .i-moon {
    transform: rotate(40deg) scale(.6);
}

.theme-toggle .i-moon,
[data-theme="light"] .theme-toggle .i-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Brand lockup */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .brand img {
        height: 46px;
        width: auto;
        transition: height .3s ease;
    }

.site-header-wrap.solid .brand img {
    height: 38px;
}

.brand-word {
    font-family: var(--f-label);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 17px;
    line-height: 1.15;
}

    .brand-word small {
        display: block;
        font-family: var(--f-body);
        font-weight: 500;
        letter-spacing: .1em;
        font-size: 10px;
        color: var(--grey-dim);
    }

/* .brand-wordmark — for WIDE logo lockups: sizes by width with a height
   ceiling and a viewport cap so it can't overflow a phone. Drop the club
   name from .brand-word in the markup (keep only <small>).
   .on-plate — for a logo with a solid light background: shows it as a
   deliberate white badge rather than a slab over the hero photo. */
.brand.brand-wordmark img {
    height: auto;
    width: min(210px, 46vw);
    max-height: 60px;
    object-fit: contain;
}

.site-header-wrap.solid .brand.brand-wordmark img {
    width: min(175px, 40vw);
    max-height: 50px;
}

.brand img.on-plate {
    background: #fff;
    padding: 6px 10px;
    border-radius: 6px;
}

/* UNUSED (kept on purpose) — checker-pattern logo placeholder. */
.brand-logo {
    width: 46px;
    height: 46px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, var(--checker-a) 0 6px, var(--checker-b) 6px 12px);
    border: 1px solid var(--line);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    color: var(--label-on-placeholder);
    transition: width .3s ease, height .3s ease;
}

    .brand-logo svg {
        width: 20px;
        height: 20px;
    }

.site-header-wrap.solid .brand-logo {
    width: 38px;
    height: 38px;
}

/* Main nav */
.main-nav,
.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
}

    .main-nav li {
        position: relative;
    }

    .main-nav a.nav-link {
        font-family: var(--f-label);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 14px;
        padding: 10px 14px;
        color: var(--paper);
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .main-nav a.nav-link::after {
            content: '';
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 5px;
            height: 2px;
            background: var(--brand);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .25s ease;
        }

        .main-nav a.nav-link:hover::after,
        .main-nav li.active > a.nav-link::after {
            transform: scaleX(1);
        }

    .main-nav li.active > a.nav-link {
        color: var(--brand-bright);
    }

.caret {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
}

.has-dropdown:hover .caret {
    transform: rotate(225deg) translateY(2px);
}

/* Dropdown sits on --brand-deep so it carries the accent yet stays dark
   enough for light text, even for bright accents like yellow or neon. */
.dropdown {
    --brand-bright: var(--brand-on-dark);
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    background: var(--brand-deep);
    border: 1px solid rgba(0,0,0,.25);
    border-top: 2px solid var(--brand-bright);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    box-shadow: 0 20px 45px rgba(0,0,0,.4);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown a {
    display: block;
    padding: 11px 14px;
    font-family: var(--f-body);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--on-dark-muted);
    border-left: 2px solid transparent;
}

    .dropdown a:hover {
        color: var(--on-dark);
        border-left-color: var(--brand-bright);
        background: rgba(0,0,0,.18);
    }

.nav-cta {
    margin-left: 10px;
}

.nav-theme {
    margin-left: 8px;
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    z-index: 210;
}

    .nav-toggle span {
        width: 26px;
        height: 2px;
        background: var(--paper);
        transition: transform .3s ease, opacity .3s ease;
    }

    .nav-toggle.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* Desktop: logo + club name on one centred row, logo 3x, nav spread
   evenly across the full width beneath it. */
@media (min-width: 1081px) {
    .site-header-wrap.on-hero:not(.solid) .main-nav {
        --paper: var(--on-dark);
        --grey: var(--on-dark-muted);
        --grey-dim: var(--on-dark-dim);
        --brand-bright: var(--brand-on-dark);
        color: var(--paper);
    }

    .site-header .wrap {
        flex-direction: column;
        justify-content: center;
        gap: 18px;
    }

    .brand img {
        height: 138px;
    }

    .site-header-wrap.solid .brand img {
        height: 114px;
    }

    .main-nav,
    .main-nav > ul {
        width: 100%;
    }

        .main-nav > ul {
            justify-content: space-between;
            gap: 0;
        }

    .nav-cta,
    .nav-theme {
        margin-left: 0;
    }
}

/* Mobile/tablet: centred stacked logo, off-canvas drawer, and the "More"
   links shown inline as a flat list (no tap-to-expand). */
@media (max-width: 1080px) {
    .site-header .wrap {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .brand {
        grid-column: 2;
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

        .brand img {
            height: 115px;
        }

    .site-header-wrap.solid .brand img {
        height: 95px;
    }

    .nav-toggle {
        display: flex;
        grid-column: 3;
        justify-self: end;
    }

    .main-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(360px, 88vw);
        height: 100vh;
        background: var(--ink-2);
        border-left: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: calc(128px) 26px 40px;
        gap: 0;
        transform: translateX(100%);
        transition: transform .4s cubic-bezier(.7,0,.2,1);
        overflow-y: auto;
    }

        .main-nav.open {
            transform: translateX(0);
        }

        .main-nav > ul {
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            width: 100%;
        }

        .main-nav a.nav-link {
            padding: 16px 4px;
            font-size: 16px;
            border-bottom: 1px solid var(--line);
            width: 100%;
            justify-content: space-between;
        }

    .has-dropdown > a.nav-link {
        display: none;
    }

    .dropdown,
    .has-dropdown:hover .dropdown,
    .has-dropdown:focus-within .dropdown {
        transform: none;
    }

    .dropdown {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        box-shadow: none;
    }

        .dropdown a {
            font-family: var(--f-label);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .08em;
            font-size: 16px;
            color: var(--paper);
            padding: 16px 4px;
            border-left: none;
            border-bottom: 1px solid var(--line);
        }

            .dropdown a:hover {
                color: var(--brand-bright);
                background: none;
            }

    .nav-cta {
        margin: 24px 0 0;
    }

    .nav-theme {
        margin: 16px 0 0;
        justify-content: center;
    }
}

/* ================================================================
   TICKER
   ================================================================ */
.ticker {
    position: relative;
    z-index: 1;
    background: var(--brand);
    color: var(--on-brand);
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
}

.ticker-track {
    display: inline-flex;
    align-items: center;
    animation: ticker 26s linear infinite;
}

    .ticker-track span {
        font-family: var(--f-label);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .18em;
        font-size: 14px;
        padding: 14px 28px;
        display: inline-flex;
        align-items: center;
        gap: 16px;
    }

        .ticker-track span::after {
            content: '✕';
            font-size: 12px;
            opacity: .6;
        }

@keyframes ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ================================================================
   ALWAYS-DARK SECTIONS
   Dark in BOTH themes; nested components resolve to on-dark values.
   ================================================================ */
.hero, .hero-jump, .cta-band, .enquiry-card, .photo-panel {
    --ink: #0a0a0a;
    --paper: var(--on-dark);
    --grey: var(--on-dark-muted);
    --grey-dim: var(--on-dark-dim);
    --line: rgba(255,255,255,.14);
    --surface-1: rgba(255,255,255,.03);
    --border-soft: rgba(255,255,255,.35);
    --brand-bright: var(--brand-on-dark);
    color: var(--paper);
}

/* ================================================================
   HERO (home page)
   Top padding = header height + demo bar + ticker.
   ================================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 98px 0 90px;
    overflow: hidden;
    background: var(--ink); /* covers the gap below the photo on mobile */
}

@media (max-width: 1080px) {
    .hero {
        padding-top: calc(190px);
    }
}

@media (min-width: 1081px) {
    .hero {
        padding-top: calc(241px);
    }
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6,6,6,.78) 0%, rgba(6,6,6,.4) 48%, rgba(6,6,6,.25) 75%), linear-gradient(180deg, rgba(6,6,6,.35) 0%, rgba(6,6,6,.2) 40%, rgba(6,6,6,.55) 78%, var(--ink) 100%);
}

/* No photo yet: add .hero-noimg and remove .hero-media. */
.hero.hero-noimg {
    background: radial-gradient(ellipse 60% 60% at 75% 10%, rgba(var(--brand-rgb),.16), transparent 60%), var(--ink);
}

    .hero.hero-noimg::before {
        content: '';
        position: absolute;
        inset: -20% -10%;
        z-index: 0;
        pointer-events: none;
        background-image: repeating-linear-gradient(115deg, rgba(var(--brand-rgb),.05) 0 2px, transparent 2px 90px);
    }

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero .wrap.hero-content {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 56px;
    align-items: center;
}

    /* min-width:0 lets grid tracks shrink, so a long headline word can't
   widen its column and crush the enquiry card. */
    .hero .wrap.hero-content > * {
        min-width: 0;
    }

/* UNUSED (kept on purpose) — centred hero logo badge. */
.hero-logo {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
}

    .hero-logo img {
        height: 120px;
        width: auto;
        max-width: 70%;
        filter: drop-shadow(0 8px 30px rgba(0,0,0,.55));
    }

.hero h1 {
    font-size: clamp(40px, 4.1vw, 59px);
    text-shadow: 0 8px 34px rgba(0,0,0,.55);
}

    .hero h1 .accent {
        color: var(--brand-bright);
    }

.hero-sub {
    font-size: 18px;
    max-width: 520px;
    margin: 22px 0 34px;
    color: var(--paper);
    opacity: .86;
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Kept for reuse — replaced in the hero by .hero-review. */
.hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 48px;
    flex-wrap: wrap;
}

    .hero-stats div b {
        display: block;
        font-family: var(--f-display);
        font-size: 34px;
        color: var(--paper);
        text-shadow: 0 4px 18px rgba(0,0,0,.5);
    }

    .hero-stats div span {
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: 12.5px;
        color: var(--grey-dim);
    }

/* Single member review over the photo — text + shadow, no card box. */
.hero-review {
    margin-top: 48px;
    max-width: 440px;
}

    .hero-review .stars {
        color: var(--brand-bright);
        letter-spacing: 3px;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .hero-review p {
        font-size: 16px;
        font-style: italic;
        line-height: 1.6;
        color: var(--paper);
        text-shadow: 0 2px 16px rgba(0,0,0,.5);
        margin: 0 0 10px;
    }

    .hero-review cite {
        font-style: normal;
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 12px;
        color: var(--grey-dim);
    }

/* Discipline list under the hero sub-line */
.hero-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 0 20px;
}

    .hero-list li {
        position: relative;
        padding-left: 22px;
        font-family: var(--f-label);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .14em;
        font-size: 13px;
        color: var(--paper);
    }

        .hero-list li::before,
        .pain-list li::before {
            content: '';
            position: absolute;
            width: 9px;
            height: 9px;
            background: var(--brand);
            clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
        }

        .hero-list li::before {
            left: 0;
            top: .42em;
        }

@media (max-width: 420px) {
    .hero-list {
        gap: 8px 18px;
    }

        .hero-list li {
            font-size: 12px;
        }
}

/* Social row (hero) — same treatment as the footer icons */
.social-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

    .social-row .social-label {
        font-family: var(--f-label);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .22em;
        font-size: 11.5px;
        color: var(--grey);
        margin: 0;
    }

    .social-row .social-links {
        display: flex;
        gap: 10px;
    }

        .social-row .social-links a {
            width: 38px;
            height: 38px;
            border: 1px solid var(--border-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--paper);
            transition: border-color .2s, color .2s, background .2s;
        }

            .social-row .social-links a:hover {
                border-color: var(--brand);
                color: var(--brand-bright);
                background: rgba(var(--brand-rgb),.10);
            }

        .social-row .social-links svg {
            width: 17px;
            height: 17px;
            display: block;
        }

@media (max-width: 480px) {
    .social-row {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* Scroll cue below the hero */
.hero-jump {
    text-align: center;
    padding: 30px 0;
    background: var(--ink);
    position: relative;
    z-index: 2;
}

.hero-jump-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12.5px;
    color: var(--grey);
    transition: color .25s ease;
}

    .hero-jump-link:hover {
        color: var(--brand-bright);
    }

    .hero-jump-link svg {
        width: 18px;
        height: 18px;
        animation: jumpbounce 1.8s ease-in-out infinite;
    }

@keyframes jumpbounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* Enquiry card (glass) */
.enquiry-card {
    background: rgba(14,14,14,.68);
    border: 1px solid var(--line);
    border-top: 2px solid var(--brand);
    backdrop-filter: blur(14px);
    padding: 34px;
    clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}

    .enquiry-card h3 {
        font-size: 26px;
        margin-bottom: 6px;
    }

    .enquiry-card .eyebrow {
        margin-bottom: 10px;
    }

    .enquiry-card p.lead {
        font-size: 14.5px;
        margin-bottom: 22px;
        color: var(--grey);
    }

/* ================================================================
   FORM FIELDS
   ================================================================ */
.field {
    margin-bottom: 16px;
}

    .field label {
        display: block;
        font-family: var(--f-label);
        font-size: 12.5px;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--grey);
        margin-bottom: 7px;
    }

    .field input, .field select, .field textarea {
        width: 100%;
        background: var(--surface-1);
        border: 1px solid var(--line);
        color: var(--paper);
        padding: 13px 14px;
        font-family: var(--f-body);
        font-size: 15px;
        transition: border-color .2s ease, background .2s ease;
    }

        .field input:focus, .field select:focus, .field textarea:focus {
            border-color: var(--brand);
            background: rgba(var(--brand-rgb),.05);
            outline: none;
        }

    .field select {
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%);
        background-position: calc(100% - 20px) center, calc(100% - 15px) center;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
    }

        /* The OS draws the option list, so it gets fixed colours that are always
   readable regardless of theme or accent. */
        .field select option {
            background: #ffffff;
            color: #0a0a0a;
        }

    .field.readonly input {
        color: var(--grey);
        background: var(--surface-1);
    }

.field-note {
    font-size: 12px;
    color: var(--grey-dim);
    margin-top: 16px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .field-row {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   SECTIONS / LAYOUT
   ================================================================ */
.section {
    padding: 110px 0;
    position: relative;
}

.section-tight {
    padding: 70px 0;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 52px;
    flex-wrap: wrap;
}

    .section-head h2 {
        font-size: clamp(32px, 4.4vw, 54px);
    }

    .section-head p {
        max-width: 420px;
        margin: 0;
    }

.section-cta {
    margin-top: 52px;
    text-align: center;
}

    .section-cta p {
        max-width: 600px;
        margin: 0 auto 22px;
    }

    .section-cta strong {
        color: var(--paper);
    }

.on-panel {
    background: var(--panel);
}

.on-ink-2 {
    background: var(--ink-2);
}

.divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand) 80%, transparent);
    opacity: .5;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}

    .reveal.in {
        opacity: 1;
        transform: translateY(0);
    }

.reveal-delay-1 {
    transition-delay: .08s;
}

.reveal-delay-2 {
    transition-delay: .16s;
}

.reveal-delay-3 {
    transition-delay: .24s;
}

.grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: 26px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Static panel — like .card without the hover lift */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 32px;
}

.panel-tight {
    padding: 22px;
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: border-color .3s ease, transform .3s ease;
}

    .card:hover {
        transform: translateY(-6px);
        border-color: var(--line-brand);
    }

    .card::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: var(--brand);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s ease;
    }

    .card:hover::after {
        transform: scaleX(1);
    }

    .card .tag {
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .14em;
        font-size: 12px;
        color: var(--brand-bright);
        margin-bottom: 14px;
        display: block;
    }

    .card h3 {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .card .thumb {
        height: 180px;
        margin: -32px -32px 22px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(160deg, rgba(var(--brand-rgb),.28), transparent 60%), repeating-linear-gradient(45deg, var(--checker-a) 0 10px, var(--checker-b) 10px 20px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .card .thumb svg {
            width: 64px;
            height: 64px;
            opacity: .85;
        }

        .card .thumb::after,
        .img-placeholder::after {
            content: 'IMAGE PLACEHOLDER';
            position: absolute;
            bottom: 8px;
            right: 10px;
            font-family: var(--f-label);
            font-size: 10px;
            letter-spacing: .14em;
            color: var(--label-on-placeholder);
        }

        .card .thumb.thumb-photo {
            background: #000;
        }

            .card .thumb.thumb-photo::after {
                content: none;
            }

    .card .thumb-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

        .card .thumb-img.top {
            object-position: center top;
        }

/* ---------- Class cards ----------
   Uniform height while closed (stretch + Read More pushed to the bottom);
   once any card opens, the row drops to align-items:start so siblings
   don't stretch to the open card's height. */
.class-card .thumb {
    height: 210px;
}

#classes-preview .section-head {
    display: block;
}

    #classes-preview .section-head > p {
        max-width: 680px;
        margin-top: 20px;
    }

#classes-preview .grid-3,
#classes-preview .grid-4 {
    align-items: stretch;
}

    #classes-preview .grid-3:has(.class-more[open]),
    #classes-preview .grid-4:has(.class-more[open]) {
        align-items: start;
    }

#classes-preview .class-card {
    display: flex;
    flex-direction: column;
}

    #classes-preview .class-card > p {
        margin-bottom: 0;
    }

    #classes-preview .class-card .class-more {
        margin-top: auto;
    }

/* Bias the crop up the image — heads live in the top half. */
#classes-preview .card .thumb-img {
    object-position: center 30%;
}

/* Thumbnail flip: opening Read More rotates the photo to the programme
   logo. Pure CSS via :has(); browsers without it just keep the photo. */
.thumb-flip {
    display: block;
    perspective: 1100px;
    background: #000;
}

.thumb-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.4,.15,.2,1);
}

.thumb-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.thumb-face-back {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(var(--brand-rgb),.16), transparent 72%), #0d0d0d;
}

    .thumb-face-back img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

#classes-preview .class-card:has(.class-more[open]) .thumb-flip-inner {
    transform: rotateY(180deg);
}

/* ---------- Read-more disclosures (class / blog / event cards) ---------- */
.class-more, .blog-more, .event-more {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.event-more {
    margin-top: 14px;
    padding-top: 14px;
}

    .class-more summary, .blog-more summary, .event-more summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--f-label);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 12.5px;
        color: var(--brand-bright);
    }

        .class-more summary::-webkit-details-marker,
        .blog-more summary::-webkit-details-marker,
        .event-more summary::-webkit-details-marker {
            display: none;
        }

        .class-more summary::after, .blog-more summary::after, .event-more summary::after {
            content: '+';
            margin-left: auto;
            font-family: var(--f-body);
            font-size: 19px;
            line-height: 1;
        }

    .class-more[open] summary::after,
    .blog-more[open] summary::after,
    .event-more[open] summary::after {
        content: '\2013';
    }

.class-more-body, .blog-more-body {
    padding-top: 16px;
}

.event-more-body {
    padding-top: 14px;
}

    .class-more-body p, .blog-more-body p, .event-more-body p {
        line-height: 1.7;
        margin-bottom: 18px;
    }

        .class-more-body p,
        .event-more-body p:last-child {
            margin-bottom: 22px;
        }

        .blog-more-body p:last-child {
            margin-bottom: 0;
        }

/* ---------- Check list (benefits) / pain list (problems) ---------- */
.check-lead {
    font-family: var(--f-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12.5px;
    color: var(--paper);
    margin-bottom: 12px !important;
}

.check-list, .pain-list {
    display: grid;
}

.check-list {
    margin: 0 0 22px;
    gap: 10px;
}

.pain-list {
    margin: 0;
    gap: 12px;
}

    .check-list li, .pain-list li {
        position: relative;
        padding-left: 28px;
        color: var(--grey);
        line-height: 1.6;
    }

        .check-list li::before {
            content: '\2713';
            position: absolute;
            left: 0;
            top: 0;
            color: var(--brand-bright);
            font-weight: 700;
            font-size: 15px;
        }

        .pain-list li::before {
            left: 2px;
            top: .62em;
        }

.challenge-card p {
    margin-bottom: 22px;
}

/* Reassurance block closing the challenges section */
.reassure {
    margin: 48px auto 0;
    text-align: center;
    max-width: 760px;
}

    .reassure::before {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: var(--brand);
        margin: 0 auto 26px;
    }

    .reassure h3 {
        font-size: clamp(24px, 3vw, 34px);
        margin-bottom: 18px;
    }

    .reassure p {
        margin-bottom: 14px;
    }

        .reassure p:last-child {
            margin-bottom: 0;
        }

    .reassure .btn {
        margin-top: 28px;
    }

/* ================================================================
   VIDEO EMBED (click-to-play facade — see main.js)
   ================================================================ */
.video-embed {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 60px;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

    .video-embed iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
}

    .video-facade img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(.82);
        transition: transform .6s ease, filter .4s ease;
    }

    .video-facade:hover img,
    .video-facade:focus-visible img {
        transform: scale(1.04);
        filter: brightness(.7);
    }

    .video-facade::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 84px;
        height: 84px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 10px 40px rgba(0,0,0,.45);
        transition: transform .3s ease;
    }

    .video-facade:hover::after,
    .video-facade:focus-visible::after {
        transform: translate(-50%,-50%) scale(1.08);
    }

    .video-facade .play-glyph {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-42%,-50%);
        z-index: 1;
        width: 0;
        height: 0;
        border-left: 26px solid var(--on-brand);
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
    }

@media (max-width: 640px) {
    .video-embed {
        margin-bottom: 40px;
    }

    .video-facade::after {
        width: 64px;
        height: 64px;
    }

    .video-facade .play-glyph {
        border-left-width: 20px;
        border-top-width: 12px;
        border-bottom-width: 12px;
    }
}

/* ================================================================
   ABOUT / STATS / TESTIMONIALS
   ================================================================ */
.about-photo {
    display: block;
    width: 100%;
    height: auto;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

    .stat-strip div {
        padding: 38px 20px;
        text-align: center;
        border-left: 1px solid var(--line);
    }

        .stat-strip div:first-child {
            border-left: none;
        }

    .stat-strip b {
        display: block;
        font-family: var(--f-display);
        font-size: 44px;
        color: var(--brand-bright);
    }

    .stat-strip span {
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: 12.5px;
        color: var(--grey);
    }

.testi {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 30px;
}

    .testi .stars {
        color: var(--brand-bright);
        letter-spacing: 3px;
        margin-bottom: 14px;
        font-size: 15px;
    }

    .testi p {
        color: var(--paper);
        font-size: 15.5px;
    }

    .testi cite {
        font-style: normal;
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 12.5px;
        color: var(--grey-dim);
    }

.rating-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin-bottom: 44px;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 20px 28px;
}

    .rating-badge b {
        font-family: var(--f-display);
        font-size: 40px;
        color: var(--brand-bright);
    }

    .rating-badge .stars {
        color: var(--brand-bright);
        font-size: 18px;
        letter-spacing: 3px;
    }

.rating-source {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12.5px;
    color: var(--grey);
    border: 1px solid var(--line);
    padding: 10px 18px;
}

/* ================================================================
   CTA BAND
   ================================================================ */
.cta-band {
    position: relative;
    padding: 90px 0;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(120deg, var(--brand-deep), var(--ink) 55%);
}

    .cta-band::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 60px);
    }

    .cta-band h2 {
        font-size: clamp(30px, 5vw, 58px);
        margin-bottom: 18px;
        position: relative;
    }

    .cta-band p {
        position: relative;
        max-width: 520px;
        margin: 0 auto 32px;
    }

    .cta-band .hero-actions {
        justify-content: center;
        position: relative;
    }

/* ================================================================
   LOCATIONS
   ================================================================ */
.loc-card {
    background: var(--panel);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color .3s ease, transform .3s ease;
}

    .loc-card:hover {
        transform: translateY(-6px);
        border-color: var(--line-brand);
    }

    .loc-card .photo {
        height: 200px;
        overflow: hidden;
        background: #000;
    }

        .loc-card .photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(1) contrast(1.08) brightness(.92);
            transition: filter .5s ease, transform .5s ease;
        }

    .loc-card:hover .photo img {
        filter: grayscale(.25) contrast(1.08) brightness(1);
        transform: scale(1.05);
    }

    /* Map embed in the photo slot (not greyed — maps need their colour). */
    .loc-card .photo iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

    .loc-card .body {
        padding: 22px;
    }

    .loc-card h4 {
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 19px;
        margin-bottom: 10px;
        color: var(--paper);
    }

    .loc-card address {
        font-style: normal;
        font-size: 14px;
        line-height: 1.7;
        color: var(--grey);
        margin: 0 0 18px;
    }

.loc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Grid cards: push the actions to the bottom so buttons line up. */
.loc-card:not(.loc-wide),
.loc-card:not(.loc-wide) .body {
    display: flex;
    flex-direction: column;
}

    .loc-card:not(.loc-wide) .photo {
        flex: 0 0 auto;
    }

    .loc-card:not(.loc-wide) .body {
        flex: 1;
    }

    .loc-card:not(.loc-wide) .loc-actions {
        margin-top: auto;
    }

.loc-card .maps-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12.5px;
    color: var(--brand-bright);
    border: 1px solid var(--line-brand);
    padding: 10px 16px;
    transition: background .2s ease, color .2s ease;
}

    .loc-card .maps-link:hover {
        background: rgba(var(--brand-rgb),.1);
        color: var(--paper);
        border-color: var(--brand);
    }

    .loc-card .maps-link svg {
        width: 14px;
        height: 14px;
    }

/* .loc-wide — single-venue variant; the map is the card image. */
.loc-card.loc-wide {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
}

    .loc-card.loc-wide .photo {
        height: 100%;
        min-height: 340px;
        background: var(--panel-2);
    }

        .loc-card.loc-wide .photo iframe {
            min-height: 340px;
        }

    .loc-card.loc-wide .body {
        padding: 34px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .loc-card.loc-wide address {
        font-size: 16px;
    }

@media (max-width: 760px) {
    .loc-card.loc-wide {
        grid-template-columns: 1fr;
    }

        .loc-card.loc-wide .photo,
        .loc-card.loc-wide .photo iframe {
            min-height: 260px;
        }

        .loc-card.loc-wide .body {
            padding: 24px;
        }
}

/* ================================================================
   PAGE HERO (inner pages) — same header clearance as .hero
   ================================================================ */
.page-hero {
    padding: calc(164px) 0 70px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 50% 60% at 85% 0%, rgba(var(--brand-rgb),.14), transparent 60%), var(--ink);
    border-bottom: 1px solid var(--line);
}

@media (max-width: 1080px) {
    .page-hero {
        padding-top: calc(190px);
    }
}

@media (min-width: 1081px) {
    .page-hero {
        padding-top: calc(200px);
    }
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(115deg, rgba(var(--brand-rgb),.045) 0 2px, transparent 2px 90px);
}

.page-hero .wrap {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-size: clamp(38px, 6vw, 72px);
}

.page-hero .lead {
    max-width: 600px;
    font-size: 17px;
    margin-top: 16px;
}

.breadcrumb {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12.5px;
    color: var(--grey-dim);
    margin-bottom: 18px;
}

    .breadcrumb a:hover {
        color: var(--brand-bright);
    }

    .breadcrumb .sep {
        margin: 0 8px;
        color: var(--line);
    }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding: 70px 0 26px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 56px;
}

    .footer-grid img {
        height: 44px;
        margin-bottom: 18px;
    }

    .footer-grid h5 {
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .14em;
        font-size: 13px;
        color: var(--grey);
        margin-bottom: 18px;
    }

    .footer-grid li {
        margin-bottom: 10px;
    }

    .footer-grid a {
        color: var(--grey);
        font-size: 14.5px;
    }

        .footer-grid a:hover,
        .footer-legal a:hover {
            color: var(--brand-bright);
        }

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

    .footer-social a {
        width: 38px;
        height: 38px;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color .2s, color .2s;
    }

        .footer-social a:hover {
            border-color: var(--brand);
            color: var(--brand-bright);
        }

    .footer-social svg {
        width: 17px;
        height: 17px;
        display: block;
    }

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

    .footer-bottom p {
        margin: 0;
        font-size: 13px;
        color: var(--grey-dim);
    }

.footer-legal {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

    .footer-legal a {
        font-size: 13px;
        color: var(--grey-dim);
    }

/* ================================================================
   AFFILIATE / POWERED-BY BAND
   Pinned WHITE in both themes (the AMM logo is dark artwork) using the
   local token trick, inverted.
   ================================================================ */
.affiliate-band {
    --paper: #171512;
    --grey: #5a564f;
    --grey-dim: #8b877e;
    --line: rgba(10,8,6,.12);
    --brand-bright: var(--brand-on-light);
    background: #ffffff;
    color: var(--paper);
    border-top: 1px solid var(--line);
    padding: 44px 0;
}

.affiliate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* Single block (powered-by credit only, no governing body). */
.affiliate-grid-single {
    grid-template-columns: 1fr;
}

.affiliate-grid > * + * {
    border-left: 1px solid var(--line);
    padding-left: 48px;
}

.affiliate {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.affiliate-text {
    flex: 1 1 220px;
}

.affiliate-logo {
    flex: none;
    display: block;
}

    .affiliate-logo img {
        height: 58px;
        width: auto;
        max-width: 190px;
        object-fit: contain;
        transition: opacity .25s ease;
    }

a.affiliate-logo:hover img {
    opacity: .78;
}

.affiliate-logo.is-large img {
    height: 116px;
    max-width: 380px;
}

.affiliate-label {
    font-family: var(--f-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 11px;
    color: var(--brand-bright);
    margin: 0 0 6px;
}

.affiliate-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.affiliate-text a {
    color: var(--brand-bright);
}

    .affiliate-text a:hover {
        text-decoration: underline;
    }

/* Wraps between phone and email, never mid-number. */
.affiliate-contact {
    margin-top: 10px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--f-label);
    font-size: 13px;
    letter-spacing: .02em;
}

    .affiliate-contact a {
        white-space: nowrap;
    }

    .affiliate-contact .sep {
        color: var(--grey-dim);
        margin: 0 10px;
    }

@media (max-width: 900px) {
    .affiliate-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

        .affiliate-grid > * + * {
            border-left: none;
            padding-left: 0;
            border-top: 1px solid var(--line);
            padding-top: 32px;
        }
}

@media (max-width: 520px) {
    .affiliate {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .affiliate-logo img {
        height: 48px;
    }

    .affiliate-logo.is-large img {
        height: 88px;
        max-width: 100%;
    }
}

/* ================================================================
   PHOTO PANEL (About Us) — photo behind the text, always dark.
   Scrim keeps text at WCAG AA even over pure white areas; to darken,
   raise all three alpha values together.
   ================================================================ */
.photo-panel {
    --line: rgba(255,255,255,.16);
    --surface-2: rgba(255,255,255,.07);
    --border-soft: rgba(255,255,255,.42);
    position: relative;
    overflow: hidden;
    background: var(--ink);
}

.photo-panel-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .photo-panel-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
    }

.photo-panel-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6,6,6,.90) 0%, rgba(6,6,6,.78) 55%, rgba(6,6,6,.68) 100%), linear-gradient(180deg, rgba(6,6,6,.55) 0%, rgba(6,6,6,0) 22%, rgba(6,6,6,0) 78%, rgba(6,6,6,.55) 100%);
}

.photo-panel-content {
    position: relative;
    z-index: 2;
}

.photo-panel-text {
    max-width: 760px;
}

.photo-panel .photo-credit {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    color: var(--grey-dim);
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin: 30px 0 0;
}

@media (max-width: 760px) {
    .photo-panel-scrim {
        background: linear-gradient(180deg, rgba(6,6,6,.86) 0%, rgba(6,6,6,.80) 100%), linear-gradient(180deg, rgba(6,6,6,.4) 0%, rgba(6,6,6,0) 30%);
    }
}

/* ================================================================
   UTILITIES
   ================================================================ */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mt-0 {
    margin-top: 0;
}

.pill {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--line);
    font-family: var(--f-label);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--grey);
}

    .pill.brand {
        border-color: var(--line-brand);
        color: var(--brand-bright);
    }

/* Filter chips (Timetable / Gallery / Shop) */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.filter-chip {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 13px;
    padding: 11px 20px;
    border: 1px solid var(--line);
    color: var(--grey);
    background: none;
}

    .filter-chip.active,
    .filter-chip:hover {
        border-color: var(--brand);
        color: var(--brand-bright);
        background: rgba(var(--brand-rgb),.06);
    }

/* ================================================================
   SCHEDULE TABLE (Timetable)
   ================================================================ */
.table-wrap {
    overflow-x: auto;
    border-top: 2px solid var(--brand);
}

.schedule {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--line);
}

    .schedule th, .schedule td {
        padding: 16px 18px;
        text-align: left;
        border-bottom: 1px solid var(--line);
        font-size: 14.5px;
    }

    .schedule th {
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 12.5px;
        color: var(--grey);
        background: var(--surface-2);
    }

    .schedule tr:last-child td {
        border-bottom: none;
    }

    .schedule tr:hover td {
        background: rgba(var(--brand-rgb),.05);
    }

    .schedule .class-name {
        color: var(--paper);
        font-weight: 700;
        font-family: var(--f-label);
        letter-spacing: .04em;
        text-transform: uppercase;
        font-size: 14px;
    }

/* ================================================================
   EVENTS / BLOG
   ================================================================ */
.event-card {
    display: flex;
    gap: 22px;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 26px;
    align-items: flex-start;
}

    .event-card:hover {
        border-color: var(--line-brand);
    }

    .event-card h3 {
        font-size: 22px;
        margin-bottom: 6px;
    }

.date-badge {
    flex: 0 0 78px;
    text-align: center;
    background: var(--brand);
    color: var(--on-brand);
    padding: 14px 8px;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

    .date-badge b {
        display: block;
        font-family: var(--f-display);
        font-size: 26px;
        line-height: 1;
    }

    .date-badge span {
        font-family: var(--f-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

.event-meta {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    color: var(--grey-dim);
    margin-bottom: 10px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.blog-card .thumb {
    height: 190px;
}

.blog-meta {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11.5px;
    color: var(--grey-dim);
    margin-bottom: 10px;
}

/* Clamp + reserve title/excerpt height so Read More lines up across a
   row whatever the CRM post lengths are. */
.blog-card h3,
.blog-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card h3 {
    min-height: 2.1em;
    -webkit-line-clamp: 2;
}

.blog-excerpt {
    min-height: 4.8em;
    -webkit-line-clamp: 3;
}

#blog-list .grid-3 {
    align-items: start;
}

/* ================================================================
   ACCORDION (Policies / FAQs)
   ================================================================ */
.acc-group {
    margin-bottom: 14px;
}

    .acc-group summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-left: 3px solid var(--brand);
        padding: 20px 24px;
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 15px;
        color: var(--paper);
    }

        .acc-group summary::-webkit-details-marker {
            display: none;
        }

        .acc-group summary::after {
            content: '+';
            font-family: var(--f-body);
            font-size: 22px;
            color: var(--brand-bright);
            flex: none;
        }

    .acc-group[open] summary::after {
        content: '\2013';
    }

.acc-items, .faq-answer {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-top: none;
}

.acc-items {
    padding: 8px 10px;
}

.acc-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
}

    .acc-item:last-child {
        border-bottom: none;
    }

    .acc-item a {
        color: var(--grey);
    }

        .acc-item a:hover {
            color: var(--brand-bright);
        }

    .acc-item .dl {
        font-family: var(--f-label);
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--brand-bright);
        border: 1px solid var(--line-brand);
        padding: 6px 12px;
        white-space: nowrap;
    }

.faq-answer {
    padding: 18px 24px 22px;
    font-size: 14.5px;
    color: var(--grey);
    line-height: 1.7;
}

    .faq-answer p {
        margin: 0;
    }

        .faq-answer p + p {
            margin-top: 14px;
        }

.faq-band {
    margin-top: 46px;
}

    .faq-band:first-of-type {
        margin-top: 0;
    }

/* ================================================================
   SHOP / PRICING
   ================================================================ */
.product-card {
    display: block;
}

    .product-card .thumb {
        height: 200px;
    }

.price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.price {
    font-family: var(--f-display);
    font-size: 24px;
    color: var(--brand-bright);
}

/* Product detail — gallery reuses .card for its thumb styling only, so
   the hover affordances are switched off and the thumb runs edge to edge. */
.product-gallery {
    cursor: default;
}

    .product-gallery:hover {
        transform: none;
        border-color: var(--line);
    }

    .product-gallery::after {
        display: none;
    }

    .product-gallery .thumb {
        height: 420px;
        margin: -32px;
    }

.product-info .price {
    font-size: 32px;
    display: block;
    margin: 6px 0 20px;
}

.pricing-card {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 36px 30px;
    text-align: center;
    position: relative;
}

    .pricing-card.featured {
        border-color: var(--brand);
        transform: scale(1.03);
    }

        .pricing-card.featured::before {
            content: 'Most Popular';
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--brand);
            color: var(--on-brand);
            font-family: var(--f-label);
            font-size: 11px;
            letter-spacing: .1em;
            text-transform: uppercase;
            padding: 5px 16px;
        }

    .pricing-card .amount {
        font-family: var(--f-display);
        font-size: 48px;
        color: var(--paper);
        margin: 14px 0 4px;
    }

        .pricing-card .amount span {
            font-family: var(--f-label);
            font-size: 14px;
            color: var(--grey);
            text-transform: none;
            letter-spacing: 0;
        }

    .pricing-card ul {
        text-align: left;
        margin: 26px 0;
    }

    .pricing-card li {
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        font-size: 14.5px;
        color: var(--grey);
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

        .pricing-card li::before {
            content: '✕';
            color: var(--brand-bright);
            font-weight: 700;
            transform: rotate(45deg);
        }

/* ================================================================
   MEMBERS AREA
   ================================================================ */
.login-card {
    max-width: 440px;
    margin: 0 auto;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.benefit {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 20px 22px;
    background: var(--panel);
    border: 1px solid var(--line);
}

    .benefit svg {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        color: var(--brand-bright);
    }

    .benefit h4 {
        font-size: 15px;
        margin: 0;
        letter-spacing: .3px;
    }

    .benefit p {
        font-size: 14px;
        margin: 6px 0 0;
    }

/* Numbered setup steps — own component because .card's overflow:hidden
   would clip the badge poking above the top edge. */
.step-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 32px 26px 26px;
    transition: transform .3s ease, border-color .3s ease;
}

    .step-card:hover {
        transform: translateY(-4px);
        border-color: var(--line-brand);
    }

.step-num {
    position: absolute;
    top: -15px;
    left: 24px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--f-label);
    font-weight: 700;
    font-size: 13px;
    clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}

.step-card svg {
    width: 24px;
    height: 24px;
    color: var(--brand-bright);
    margin-bottom: 14px;
}

.step-card h4 {
    font-size: 14.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

.step-card p {
    font-size: 14px;
    color: var(--grey);
    line-height: 1.65;
    margin: 0;
}

/* ================================================================
   TEAM
   ================================================================ */
.team-card {
    background: var(--panel);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color .3s ease, transform .3s ease;
}

    .team-card:hover {
        transform: translateY(-6px);
        border-color: var(--line-brand);
    }

    .team-card .photo {
        height: 280px;
        overflow: hidden;
        background: #000;
    }

        .team-card .photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(.4) contrast(1.05);
            transition: filter .5s ease, transform .5s ease;
        }

    .team-card:hover .photo img {
        filter: grayscale(0) contrast(1.05);
        transform: scale(1.05);
    }

    /* Logo tile instead of a headshot: contained, full colour, soft glow.
   Drop .photo-logo to go back to a photo. */
    .team-card .photo.photo-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(var(--brand-rgb),.13), transparent 70%), var(--panel-2);
    }

        .team-card .photo.photo-logo img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: none;
        }

    .team-card:hover .photo.photo-logo img {
        filter: none;
    }

    .team-card .body {
        padding: 22px;
    }

    .team-card h4 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .team-card .role {
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .1em;
        font-size: 12.5px;
        color: var(--brand-bright);
        margin-bottom: 12px;
        display: block;
    }

    .team-card p {
        font-size: 14px;
        margin-bottom: 0;
    }

    .team-card .creds {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }

    .team-card .cred {
        font-family: var(--f-label);
        font-size: 10.5px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--grey-dim);
        border: 1px solid var(--line);
        padding: 5px 10px;
    }

/* ================================================================
   GALLERY
   ================================================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.gallery-tile {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #000;
}

    .gallery-tile.wide {
        grid-column: span 2;
    }

    .gallery-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(.3) contrast(1.05) brightness(.92);
        transition: filter .4s ease, transform .5s ease;
    }

    .gallery-tile:hover img {
        filter: grayscale(0) contrast(1.05) brightness(1);
        transform: scale(1.06);
    }

    .gallery-tile .cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 14px 16px;
        background: linear-gradient(0deg, rgba(0,0,0,.82), transparent);
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 11.5px;
        color: var(--on-dark);
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .3s ease, transform .3s ease;
    }

    .gallery-tile:hover .cap {
        opacity: 1;
        transform: translateY(0);
    }

/* ================================================================
   ABOUT / FOUNDER
   ================================================================ */
.founder-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 56px;
    align-items: center;
}

.founder-portrait {
    position: relative;
}

    .founder-portrait img {
        width: 100%;
        height: auto;
        filter: grayscale(.25) contrast(1.05);
    }

    .founder-portrait .tagplate {
        position: absolute;
        left: 16px;
        bottom: 16px;
        background: rgba(8,8,8,.82);
        backdrop-filter: blur(6px);
        border: 1px solid var(--line-brand);
        padding: 10px 16px;
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 12.5px;
        color: var(--on-dark);
    }

blockquote {
    margin: 22px 0;
    padding: 20px 24px;
    border-left: 3px solid var(--brand);
    background: var(--surface-2);
    font-family: var(--f-label);
    font-size: 17px;
    letter-spacing: .01em;
    color: var(--paper);
    font-style: normal;
}

.sig {
    font-family: var(--f-display);
    font-size: 22px;
    margin: 22px 0 0;
    color: var(--paper);
}

.sig-role {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
    color: var(--grey-dim);
    margin: 2px 0 0;
}

.creds-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

    .creds-row .cred {
        font-family: var(--f-label);
        font-size: 11.5px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--grey);
        border: 1px solid var(--line);
        padding: 8px 14px;
    }

/* Generic image placeholder (drop a real <img> in later) */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(160deg, rgba(var(--brand-rgb),.22), transparent 60%), repeating-linear-gradient(45deg, var(--checker-a) 0 10px, var(--checker-b) 10px 20px);
}

    .img-placeholder svg {
        width: 48px;
        height: 48px;
        opacity: .85;
        color: var(--brand-bright);
    }

/* ================================================================
   CONTACT
   ================================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 40px;
    align-items: start;
}

.contact-info-card {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 30px;
    margin-bottom: 20px;
}

    .contact-info-card h4 {
        font-size: 17px;
        margin-bottom: 8px;
    }

    .contact-info-card p {
        margin-bottom: 0;
        font-size: 14.5px;
    }

/* ================================================================
   RESPONSIVE (general)
   ================================================================ */
@media (max-width: 980px) {
    .hero {
        min-height: auto;
        padding-bottom: 70px;
    }

        .hero .wrap.hero-content {
            grid-template-columns: 1fr;
        }

    .hero-logo img {
        height: 84px;
    }

    /* Photo capped to a viewport-relative height so it sits behind the
       headline like desktop without an extreme crop; content below fades
       onto .hero's solid --ink background. */
    .hero-media {
        inset: 0 0 auto;
        height: 78vh;
        min-height: 520px;
        max-height: 680px;
    }

        .hero-media .hero-img {
            object-position: center center;
        }

    #classes-preview .card .thumb {
        height: auto;
        aspect-ratio: 4/3;
    }

    .grid-2, .grid-3, .grid-4,
    .gallery-grid,
    .stat-strip,
    .footer-grid,
    .benefits-grid {
        grid-template-columns: 1fr 1fr;
    }

        .stat-strip div:nth-child(3) {
            border-left: none;
        }

    .founder-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .section {
        padding: 76px 0;
    }

    .panel {
        padding: 22px;
    }

    .grid-2, .grid-3, .grid-4,
    .footer-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .gallery-tile.wide {
        grid-column: span 1;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .pricing-card.featured {
        transform: none;
    }

    .event-card {
        flex-direction: column;
    }

    .rating-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-gallery .thumb {
        height: 280px;
    }
}

/* ================================================================
   BOOKING CALENDAR (Timetable page)
   calendar → class list → registration form
   ================================================================ */

/* Notices above the calendar */
.notice {
    padding: 14px 18px;
    border-left: 3px solid var(--line);
    background: var(--surface-1);
    font-size: 12.5px;
    color: var(--grey);
    text-align: left;
    line-height: 1.6;
}

    .notice strong {
        color: var(--paper);
    }

    .notice.warn {
        border-left-color: var(--brand);
        background: rgba(var(--brand-rgb),.07);
    }

    .notice + .notice {
        margin-top: 10px;
    }

.notice-icon {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--brand-bright);
}

.notice.info .notice-icon {
    color: var(--grey);
}

/* Calendar left, day's classes right; stacks below 900px. */
.timetable-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .timetable-layout {
        grid-template-columns: 1fr;
    }
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.cal-head-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cal-head-label svg {
        width: 16px;
        height: 16px;
        color: var(--grey);
    }

.cal-head h2 {
    font-size: 15px;
    letter-spacing: .1em;
}

.cal-nav {
    display: flex;
    gap: 6px;
}

.cal-nav-btn,
.cal-prompt-icon {
    border: 1px solid var(--line);
    background: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-nav-btn {
    width: 34px;
    height: 34px;
    color: var(--grey);
    cursor: pointer;
    padding: 0;
    transition: border-color .2s ease, color .2s ease;
}

    .cal-nav-btn svg {
        width: 12px;
        height: 12px;
    }

    .cal-nav-btn:hover {
        border-color: var(--brand);
        color: var(--brand-bright);
    }

    .cal-nav-btn:disabled {
        opacity: .25;
        pointer-events: none;
    }

.cal-weekdays,
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
}

.cal-weekdays {
    margin-bottom: 10px;
}

    .cal-weekdays span {
        font-family: var(--f-label);
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--grey-dim);
    }

.cal-day {
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-day-num {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--f-label);
    font-weight: 700;
    font-size: 13px;
    color: var(--ok);
    transition: background .2s ease, color .2s ease;
}

.cal-day.full .cal-day-num {
    color: var(--full);
}

.cal-day:not(.disabled):hover .cal-day-num,
.cal-day.selected .cal-day-num {
    background: var(--brand);
    color: var(--on-brand);
}

.cal-day.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

    .cal-day.disabled .cal-day-num {
        color: var(--grey-dim);
        opacity: .3;
    }

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--f-label);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grey-dim);
}

    .cal-legend .swatch {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .cal-legend .dot {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 50%;
    }

        .cal-legend .dot.closed {
            background: none;
            border: 1px solid var(--line);
            border-radius: 2px;
        }

        .cal-legend .dot.ok {
            background: var(--ok);
        }

        .cal-legend .dot.full {
            background: var(--full);
        }

        .cal-legend .dot.sel {
            background: var(--brand);
        }

/* Empty / prompt state */
.cal-prompt {
    text-align: center;
    padding: 56px 30px;
}

.cal-prompt-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    color: var(--grey-dim);
}

    .cal-prompt-icon svg {
        width: 16px;
        height: 16px;
    }

.cal-prompt h3 {
    font-size: 14px;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.cal-prompt p {
    font-size: 13px;
    max-width: 320px;
    margin: 0 auto;
}

/* Class slot cards */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.slot-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

    .slot-card.is-full {
        opacity: .55;
    }

    .slot-card h4 {
        font-size: 16px;
        margin-bottom: 8px;
        letter-spacing: .3px;
    }

    .slot-card.is-full h4 {
        text-decoration: line-through;
        color: var(--grey);
    }

.slot-meta {
    font-family: var(--f-body);
    font-size: 12.5px;
    color: var(--grey);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .slot-meta span b {
        color: var(--grey-dim);
        font-weight: 600;
    }

.slot-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.slot-status {
    font-family: var(--f-label);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid var(--line);
    color: var(--grey);
}

    .slot-status.ok {
        border-color: var(--ok);
        color: var(--ok);
    }

    .slot-status.full {
        border-color: var(--full);
        color: var(--full);
    }

@media (max-width: 640px) {
    .slot-grid {
        grid-template-columns: 1fr;
    }
}

/* Registration / checkout form */
.form-block {
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 22px;
    margin-bottom: 18px;
}

.form-block-title {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12.5px;
    color: var(--paper);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .form-block-title svg {
        width: 15px;
        height: 15px;
        color: var(--brand-bright);
    }

/* Medical questionnaire accordion */
.qa-group {
    background: var(--ink-2);
    border: 1px solid var(--line);
    margin-top: 14px;
}

    .qa-group summary {
        list-style: none;
        cursor: pointer;
        padding: 14px 18px;
        font-family: var(--f-label);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 12px;
        color: var(--paper);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

        .qa-group summary::-webkit-details-marker {
            display: none;
        }

        .qa-group summary svg {
            width: 11px;
            height: 11px;
            color: var(--grey-dim);
            transition: transform .2s ease;
            flex: none;
        }

    .qa-group[open] summary svg {
        transform: rotate(180deg);
    }

.qa-body {
    padding: 4px 18px 18px;
    border-top: 1px solid var(--line);
}

.qa-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

    .qa-row:last-of-type {
        border-bottom: none;
    }

    .qa-row .qa-text {
        color: var(--grey);
        max-width: 66%;
    }

.qa-choices {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

    .qa-choices label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--f-label);
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--grey);
        cursor: pointer;
    }

    .qa-choices input {
        accent-color: var(--brand);
        width: 15px;
        height: 15px;
    }

.qa-notes {
    margin-top: 14px;
}

    .qa-notes label {
        display: block;
        font-family: var(--f-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--grey);
        margin-bottom: 7px;
    }

    .qa-notes textarea {
        width: 100%;
        background: var(--surface-1);
        border: 1px solid var(--line);
        color: var(--paper);
        padding: 12px 14px;
        font-family: var(--f-body);
        font-size: 13.5px;
        resize: vertical;
    }

        .qa-notes textarea:focus {
            border-color: var(--brand);
            outline: none;
        }

@media (max-width: 560px) {
    .qa-row {
        flex-direction: column;
        align-items: flex-start;
    }

        .qa-row .qa-text {
            max-width: 100%;
        }
}

/* Dependent child sub-cards */
.child-card {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 18px;
    margin-bottom: 14px;
}

.child-card-title {
    font-family: var(--f-label);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11.5px;
    color: var(--grey);
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .child-card-title svg {
        width: 13px;
        height: 13px;
        color: var(--grey-dim);
    }

.child-card-remove {
    margin-left: auto;
    width: 22px;
    height: 22px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--grey-dim);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

    .child-card-remove:hover {
        border-color: var(--brand);
        color: var(--brand-bright);
    }

/* Confirmation state */
.booking-confirm {
    text-align: center;
    padding: 40px 20px;
}

.booking-confirm-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border: 1px solid var(--ok);
    color: var(--ok);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .booking-confirm-icon svg {
        width: 22px;
        height: 22px;
    }

.booking-confirm h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.booking-confirm p {
    max-width: 420px;
    margin: 0 auto;
}