/* ===================================================================
   SIM Dance Studio — Shared Stylesheet
   Full-colour photos, Inter + Playfair Display
   =================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Ampersand font override ----
   Replace ONLY the "&" character (U+0026) globally with a clean,
   upright serif ampersand (no italic flourishes), while leaving all
   other characters intact. */
@font-face {
    font-family: 'AmpItalic';
    font-style: normal;
    font-weight: 400 700;
    src: local('Georgia'),
         local('Times New Roman'),
         local('Cambria'),
         local('Times');
    unicode-range: U+0026;
    font-display: swap;
}

:root {
    /* Dark theme — inverted from the original light palette.
       `--black` is still the "primary foreground" (near-dark #0C0C0C when
       used on light elements like dropdowns), `--white` is still the
       "primary background"; we just flipped their values. The gray scale
       also inverts so gray-50 (formerly near-white) is now near-black,
       and gray-900 (formerly near-black) is now near-white. Every rule
       that references the variables keeps working unchanged. */
    --black: #FAFAFA;       /* now "light foreground" on dark bg */
    --white: #0C0C0C;       /* now "dark background" */
    --gray-50:  #141414;    /* was #F5F5F5 */
    --gray-100: #1F1F1F;    /* was #EBEBEB */
    --gray-200: #333333;    /* was #D4D4D4 */
    --gray-300: #5A5A5A;    /* bumped brighter for visible borders */
    --gray-400: #8A8A8A;    /* bumped for muted labels */
    --gray-500: #A8A8A8;    /* bumped for muted body text readability */
    --gray-600: #C4C4C4;    /* bumped for secondary text */
    --gray-700: #DADADA;    /* was #D4D4D4 */
    --gray-800: #EBEBEB;    /* was #1F1F1F */
    --gray-900: #F5F5F5;    /* was #141414 */
    /* True raw values for cases that need real black/white regardless of theme */
    --ink:   #FAFAFA;
    --page:  #0C0C0C;
    --serif: 'AmpItalic', 'Playfair Display', Georgia, serif;
    --sans: 'AmpItalic', 'Inter', -apple-system, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* One landscape frame for every event image — listing card, detail
       banner, related card — so a single upload crops identically
       everywhere. Change it here and all three follow. */
    --event-ratio: 16 / 10;
}
html { background: var(--white); }

html { scroll-behavior: smooth; }
body {
    background: var(--white);  /* now #0C0C0C via var swap */
    color: var(--black);       /* now #FAFAFA via var swap */
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

/* Form inputs: dark color scheme so browser chrome (calendar, select
   dropdowns) match the theme */
input, textarea, select { color-scheme: dark; }
/* Text selection: white highlight with dark text so selected text stays
   readable. (The inverted dark theme made the old var(--black) bg +
   var(--ink) text resolve to white-on-white = invisible.) */
::selection { background: var(--ink); color: var(--page); }
::-moz-selection { background: var(--ink); color: var(--page); }

/* ===== ANNOUNCEMENT BAR ===== */
:root {
    --announce-h: 44px;
    /* Terracotta — the same warm red the calendar uses for holidays/closures,
       so the bar reads as an alert without introducing a new hue. Change these
       two values to restyle every announcement. */
    --announce-bg: #B0463C;
    --announce-fg: #FFFFFF;
}

.announcement-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 101;
    height: var(--announce-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3rem;
    background: var(--announce-bg);
    color: var(--announce-fg);
    font-family: var(--sans);
}
.announcement-text {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: center;
    max-width: 100%;
    /* Long copy truncates rather than wrapping: the bar height feeds the whole
       page offset below, so it has to stay a constant. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.announcement-close {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
}
.announcement-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.announcement-close svg { width: 16px; height: 16px; }

/* An announcement is live: push the fixed nav and the whole page down by the
   bar height so nothing is covered. `.mobile-dash-tabs` is excluded because it
   is a <nav> pinned to the BOTTOM of the viewport, not the top. */
body.has-announcement { padding-top: var(--announce-h); }
body.has-announcement nav:not(.mobile-dash-tabs) { top: var(--announce-h); }
/* Sticky sub-headers park directly under the nav, so they shift by the same
   amount — otherwise they slide beneath it once the page scrolls. */
body.has-announcement .adm-tabbar { top: calc(70px + var(--announce-h)); }
body.has-announcement .ev-sidebar { top: calc(100px + var(--announce-h)); }

@media (max-width: 780px) {
    .announcement-bar { padding: 0 2.75rem 0 1.25rem; }
    .announcement-text { font-size: 0.78rem; }
    .announcement-close { right: 0.75rem; }
}

/* ===== NAV ===== */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 0 2.5rem;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(12, 12, 12, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Subtle shadow once the user scrolls past the top */
body.nav-scrolled nav,
body:not(:has(.page-hero)):not(:has(.instructor-hero)) nav {
    border-bottom-color: rgba(12, 12, 12, 0.05);
}
body.nav-scrolled nav {
    box-shadow: 0 1px 20px rgba(12, 12, 12, 0.04);
}
.nav-brand {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    overflow: hidden;
    transition: transform 0.3s var(--ease), opacity 0.2s;
    transform-origin: left center;
}
nav .nav-brand:hover { transform: scale(1.04); }
nav .nav-brand:active { opacity: 0.85; }
/* Logo JPG is white-on-black with thick padding. On a dark site, use the
   'screen' blend mode so the JPG's black bg blends to transparent while
   the white letter-marks stay visible. No inversion needed. */
.nav-brand img {
    flex-shrink: 0;
    display: block;
    mix-blend-mode: screen;
}
nav .nav-brand {
    width: 92px;
    height: 46px;
}
nav .nav-brand img {
    width: 115px;
    height: 115px;
}
footer .nav-brand {
    width: 110px;
    height: 56px;
}
footer .nav-brand img {
    width: 140px;
    height: 140px;
}

/* Inner pages with a dark page-hero: make the nav transparent at the top
   so the logo sits naturally on black, and swap the logo blend mode so the
   white letter-marks stay visible against dark. The `.nav-scrolled` class
   (added on scroll past ~120px) brings back the solid white nav treatment.

   The event detail page is deliberately NOT in this list. Both heroes above
   paint a known colour (--black / --white) that this light treatment is tuned
   against; the event banner is an operator-uploaded image of any brightness,
   and a pale poster left the white logo and menu invisible. That page uses the
   solid nav instead, and its banner now sits below the bar rather than under it. */
body:has(.page-hero):not(.nav-scrolled) nav,
body:has(.instructor-hero):not(.nav-scrolled) nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
body:has(.page-hero):not(.nav-scrolled) nav .nav-brand img,
body:has(.instructor-hero):not(.nav-scrolled) nav .nav-brand img {
    /* White-on-black logo: don't invert, use 'screen' so the black
       padding/bg blends to transparent over dark backgrounds. */
    filter: none;
    mix-blend-mode: screen;
}
body:has(.page-hero):not(.nav-scrolled) nav .nav-center > li > a,
body:has(.page-hero):not(.nav-scrolled) nav .nav-account,
body:has(.instructor-hero):not(.nav-scrolled) nav .nav-center > li > a,
body:has(.instructor-hero):not(.nav-scrolled) nav .nav-account {
    color: var(--ink);
}
/* Keep dropdown items in their normal dark color — they sit on a white
   panel regardless of whether the parent nav is transparent or opaque. */
body:has(.page-hero):not(.nav-scrolled) nav .dropdown a,
body:has(.instructor-hero):not(.nav-scrolled) nav .dropdown a {
    color: var(--gray-700, var(--gray-600));
}
body:has(.page-hero):not(.nav-scrolled) nav .dropdown a:hover,
body:has(.instructor-hero):not(.nav-scrolled) nav .dropdown a:hover {
    color: var(--black);
}
body:has(.page-hero):not(.nav-scrolled) nav .nav-cta,
body:has(.instructor-hero):not(.nav-scrolled) nav .nav-cta {
    background: var(--white);
    color: var(--black);
}
body:has(.page-hero):not(.nav-scrolled) .mobile-toggle span,
body:has(.instructor-hero):not(.nav-scrolled) .mobile-toggle span {
    background: var(--white);
}
/* Right-side action group — keeps the account button and CTA together so
   the nav's space-between only spreads logo | menu | actions, not the two
   buttons away from each other. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.nav-center {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    align-items: center;
}
.nav-center > li { position: relative; }
.nav-center a {
    position: relative;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    transition: color 0.25s var(--ease);
    letter-spacing: 0.01em;
    padding: 0.6rem 1rem;
    display: inline-block;
}
/* Slide-in underline on hover */
.nav-center a::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.35rem;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--ease);
    opacity: 0.85;
}
.nav-center a:hover { color: var(--black); }
.nav-center a:hover::after { transform: scaleX(1); }

/* Active page: bold text + short centered underline */
.nav-center a.active {
    color: var(--black);
    font-weight: 600;
}
.nav-center a.active::after {
    transform: scaleX(1);
    height: 2px;
    background: var(--black);
    opacity: 1;
    left: 50%;
    right: auto;
    bottom: 0.3rem;
    width: 16px;
    margin-left: -8px;
    border-radius: 1px;
}

/* CTA button: pill, premium, with subtle arrow on hover */
.nav-cta {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem 0.6rem 1.35rem;
    background: var(--black);
    color: var(--ink);
    border: 1px solid var(--black);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
/* Arrow appears via ::after on hover */
.nav-cta::after {
    content: '→';
    display: inline-block;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.25s var(--ease), max-width 0.3s var(--ease), margin 0.3s var(--ease);
    margin-left: 0;
    font-weight: 500;
}
.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(12, 12, 12, 0.18);
}
.nav-cta:hover::after {
    opacity: 1;
    max-width: 14px;
    margin-left: 0.1rem;
}
.nav-cta:active { transform: translateY(0); }

/* ===== Nav notification bell ===== */
.nav-notif { position: relative; }

.nav-notif-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--black);
    border-radius: 50%;
    transition: background 0.2s;
}
.nav-notif-btn:hover { background: rgba(255,255,255,0.08); }
.nav-notif-btn svg { width: 20px; height: 20px; }

.nav-notif-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem; font-weight: 700;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    border: 1.5px solid var(--page, #0c0c0c);
}
.nav-notif-badge--hidden { display: none; }

.nav-notif-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: 380px;
    background: rgba(20,20,20,0.97);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.5rem 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
    z-index: 200;
}
.nav-notif-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.nav-notif-header {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--gray-500);
    padding: 0.6rem 1.25rem 0.6rem;
    border-bottom: 1px solid var(--gray-200);
}

.nav-notif-item {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
}
.nav-notif-item:last-child { border-bottom: none; }

.nav-notif-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gray-100);
}
.nav-notif-icon svg { width: 17px; height: 17px; color: var(--gray-600); }
.nav-notif-item--voucher .nav-notif-icon { background: rgba(168,85,247,0.12); }
.nav-notif-item--voucher .nav-notif-icon svg { color: #a855f7; }
.nav-notif-item--ticket .nav-notif-icon { background: rgba(245,158,11,0.12); }
.nav-notif-item--ticket .nav-notif-icon svg { color: #f59e0b; }

.nav-notif-title {
    font-size: 0.875rem; font-weight: 600;
    color: var(--black); line-height: 1.3;
}
.nav-notif-body-text {
    font-size: 0.8rem; color: var(--gray-500);
    margin-top: 0.2rem; line-height: 1.5;
}

.nav-notif-empty, .nav-notif-loading {
    padding: 1.5rem 1.25rem;
    font-size: 0.85rem; color: var(--gray-500);
    text-align: center; margin: 0;
}

/* On phones .ah-actions becomes `order: -1; width: 100%`, which moves the
   bell to the far LEFT of its row. A full-width panel anchored by its right
   edge to a 36px button at x=24 then lands ~275px off-screen, leaving only a
   sliver visible. Anchor from the left instead, and match the 640px
   breakpoint where .ah-actions actually reflows (was 600px). */
@media (max-width: 640px) {
    .nav-notif-dropdown {
        width: calc(100vw - 2rem);
        left: -0.5rem;
        right: auto;
    }
}
/* ===== /Nav notification bell ===== */

.mobile-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    width: 28px; height: 28px; position: relative;
    z-index: 201;
}
.mobile-toggle span {
    display: block; width: 20px; height: 1.5px;
    background: var(--black); position: absolute; left: 4px;
    transition: all 0.3s;
}
.mobile-toggle span:nth-child(1) { top: 8px; }
.mobile-toggle span:nth-child(2) { top: 14px; width: 14px; }
.mobile-toggle span:nth-child(3) { top: 20px; }
.mobile-toggle.open span:nth-child(1) { top: 14px; transform: rotate(45deg); width: 20px; }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { top: 14px; transform: rotate(-45deg); width: 20px; }

/* Mobile menu overlay */
.mobile-menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--white);
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* `safe` keeps overflowing menus scrollable instead of clipping the top */
    justify-content: safe center;
    align-items: center;
    gap: 2rem;
    padding: 76px 1.5rem 2rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
/* Close button — the nav's own toggle is buried under this overlay
   (nav is a z-index:100 stacking context), so the menu carries its own. */
.mobile-menu-close {
    /* fixed, not absolute — the overlay scrolls, this must stay pinned */
    position: fixed;
    top: 24px; right: 1.5rem;
    width: 28px; height: 28px;
    padding: 0;
    background: none; border: none; cursor: pointer;
}
.mobile-menu-close span {
    display: block; position: absolute;
    top: 13px; left: 4px;
    width: 20px; height: 1.5px;
    background: var(--black);
}
.mobile-menu-close span:nth-child(1) { transform: rotate(45deg); }
.mobile-menu-close span:nth-child(2) { transform: rotate(-45deg); }
.mobile-menu a {
    font-family: var(--serif);
    font-size: 2.2rem;
    color: var(--black);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.mobile-menu a.active { font-style: italic; }
.mobile-menu .nav-cta {
    font-family: var(--sans);
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* ===== BUTTONS ===== */
.btn {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.85rem 2rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s var(--ease);
    letter-spacing: -0.01em;
}
.btn-dark { background: var(--black); color: var(--ink); }
.btn-dark:hover { opacity: 0.8; }
.btn-outline {
    background: transparent;
    color: var(--black);
    border: 1px solid var(--gray-200);
}
.btn-outline:hover { border-color: var(--black); }
.btn-outline-dark {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--gray-600);
}
.btn-outline-dark:hover { border-color: var(--white); }
.btn-white { background: var(--white); color: var(--black); }
.btn-white:hover { opacity: 0.9; }
.btn svg { width: 14px; height: 14px; }

/* ===== HERO (home) ===== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8rem 3rem 3rem;
    position: relative;
}
/* Stacked rather than a two-column split: the hero photograph is landscape,
   and a 21:9 frame beside a column of copy would either be letterboxed into a
   narrow slot or crop the ends off a thirteen-person line-up. Given the copy
   its own full-width row and the photograph a wide band beneath it, both get
   to keep their natural proportions. */
.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
}
.hero-copy {
    /* Centred, not left-aligned: stacked above a full-width photograph, a
       left-aligned column left the right half of the row empty. */
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.hero-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fade-up 0.8s var(--ease) 0.1s forwards;
}
.hero-title {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin-bottom: 1.75rem;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: reveal 1s var(--ease) forwards;
    white-space: nowrap;
}
.hero-title .line:nth-child(1) span { animation-delay: 0.2s; }
.hero-title .line:nth-child(2) span { animation-delay: 0.35s; }
.hero-title em { font-style: italic; }
.hero-sub {
    font-size: 1.02rem;
    font-weight: 400;
    color: var(--gray-600);
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fade-up 0.8s var(--ease) 0.6s forwards;
}
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    opacity: 0;
    animation: fade-up 0.8s var(--ease) 0.75s forwards;
    flex-wrap: wrap;
}
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hero photo — founder portrait on the right */
.hero-media {
    opacity: 0;
    animation: fade-up 0.9s var(--ease) 0.3s forwards;
}
.hero-photo {
    position: relative;
    /* Matches the crop shipped for this slot (1400x600). The source is only
       1400px wide, so the frame stays inside the container rather than bleeding
       full-width, where it would be upscaled on a large display. */
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: var(--gray-100);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 4s ease;
}
.hero-photo:hover img { transform: scale(1.03); }
.hero-photo-tag {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    right: 1.25rem;
    padding: 0.85rem 1.1rem;
    background: rgba(12, 12, 12, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.hero-photo-eyebrow {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.6);
}
.hero-photo-name {
    font-family: var(--serif);
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}

/* Stats strip — full-width bottom bar */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--gray-100);
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: fade-up 0.8s var(--ease) 1s forwards;
    flex-wrap: wrap;
}
.hero-stats .stat {
    text-align: center;
    padding: 0 0.5rem;
}
.stat-num {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.35rem;
}
.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.stat-divider {
    width: 1px;
    height: 28px;
    background: var(--gray-200);
}
.stat-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
    cursor: pointer;
}
.stat-link:hover { color: var(--black); }
.stat-link .stat-label { color: var(--black); }
.stat-pulse {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
}
.stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
    animation: stat-dot-pulse 2s ease-in-out infinite;
}
@keyframes stat-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.0); }
}

@media (max-width: 900px) {
    .hero { padding: 7rem 1.5rem 2.5rem; min-height: auto; }
    .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .hero-copy { text-align: center; max-width: 600px; margin: 0 auto; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    /* Keeps the 21:9 crop — a portrait frame here would slice the ends
       off the line-up, and the band still shows everyone. */
    .hero-stats {
        gap: 1rem 2rem;
        margin-top: 2.5rem;
        padding-top: 2rem;
    }
    .stat-divider { display: none; }
    .stat-divider.hide-mobile { display: none; }
}
@media (max-width: 520px) {
    .stat-num { font-size: 1.65rem; }
    .hero-stats .stat { flex: 1 1 40%; }
}

/* ===================================================================
   Today's classes strip (home page, below hero)
   =================================================================== */
.today-strip {
    background: linear-gradient(180deg, #0C0C0C 0%, #171717 100%);
    color: var(--ink);
    padding: 1.75rem 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}
.today-strip::before {
    /* subtle radial glow behind the label — adds depth without being flashy */
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(155, 231, 181, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.today-strip .container { max-width: 1240px; margin: 0 auto; position: relative; }
.today-strip-inner {
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr auto;
    align-items: center;
    gap: 2rem;
}
.today-strip-label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}
.today-strip-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(155, 231, 181, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.today-strip-icon svg {
    width: 18px;
    height: 18px;
    color: #9be7b5;
}
.today-strip-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(155, 231, 181, 0.3);
    animation: today-ring-pulse 2.4s ease-out infinite;
}
@keyframes today-ring-pulse {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}
.today-strip-title {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.25rem;
}
.today-strip-sub {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.today-strip-list {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.1rem 0;
    min-width: 0;
    scroll-snap-type: x mandatory;
}
.today-strip-list::-webkit-scrollbar { display: none; }

/* Redesigned pill: avatar circle + stacked time/name/instructor + badge */
.today-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
    flex-shrink: 0;
}
.today-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

.today-pill-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    flex-shrink: 0;
}
.today-pill-main {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.today-pill-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.today-pill-time {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.today-pill-name {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.today-pill-instructor {
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}

/* Next up: glowing white background, green accent dot on the avatar */
.today-pill.next {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.06);
}
.today-pill.next:hover {
    background: #fafafa;
    border-color: var(--white);
    transform: translateY(-2px);
}
.today-pill.next .today-pill-avatar {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}
.today-pill.next .today-pill-time { color: rgba(12, 12, 12, 0.55); }
.today-pill.next .today-pill-instructor { color: rgba(12, 12, 12, 0.55); }

/* Live: green glow + pulsing dot on the avatar */
.today-pill.live {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
}
.today-pill.live .today-pill-avatar {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.35);
    color: #9be7b5;
}

/* Badges inside pills */
.today-pill-next-tag {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--black);
    color: var(--ink);
}
.today-pill-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    color: #9be7b5;
}
.today-pill-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: live-dot-blink 1.4s ease-in-out infinite;
}
@keyframes live-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Past: muted and strikethrough on the name */
.today-pill.past {
    opacity: 0.45;
}
.today-pill.past .today-pill-name {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

.today-strip-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    transition: background 0.2s, border-color 0.2s;
}
.today-strip-cta:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}
.today-strip-cta svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
    .today-strip { padding: 1.25rem 1.25rem; }
    .today-strip-inner { grid-template-columns: 1fr; gap: 1rem; }
    .today-strip-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; }
    .today-pill { min-width: 180px; }
    .today-strip-cta { justify-self: start; }
}

/* ===== PAGE HERO (inner pages) ===== */
.page-hero {
    background: var(--black);
    color: var(--ink);
    padding: 10rem 3rem 6rem;
    text-align: center;
}
.page-hero-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 1.25rem;
}
.page-hero-title {
    font-family: var(--serif);
    font-size: clamp(2.8rem, 6vw, 4.8rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 auto 1.25rem;
    max-width: 820px;
}
.page-hero-title em { font-style: italic; }
.page-hero-sub {
    font-size: 1rem;
    color: var(--gray-400);
    line-height: 1.65;
    max-width: 540px;
    margin: 0 auto;
}

/* ===== MARQUEE ===== */
.marquee {
    padding: 1rem 0;
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    overflow: hidden;
}
.marquee-track {
    display: flex;
    animation: scroll-m 28s linear infinite;
    width: max-content;
}
.marquee-item {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-400);
    white-space: nowrap;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.marquee-item .dot {
    width: 3px; height: 3px;
    background: var(--gray-300);
    border-radius: 50%;
}
@keyframes scroll-m { to { transform: translateX(-50%); } }

/* ===== SECTIONS ===== */
section { padding: 7rem 3rem; }
.container { max-width: 1140px; margin: 0 auto; }
.section-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 1rem;
}
.section-title {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
.section-desc {
    font-size: 0.95rem;
    color: var(--gray-500);
    line-height: 1.65;
    max-width: 480px;
}
.section-head-center {
    text-align: center;
    margin: 0 auto 3.5rem;
    max-width: 640px;
}
.section-head-center .section-desc { margin: 0 auto; }
.section-foot-center {
    text-align: center;
    margin: 3.5rem auto 0;
}

/* Scroll reveals */
.sr {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.sr.visible { opacity: 1; transform: translateY(0); }
.sr-d1 { transition-delay: 0.05s; }
.sr-d2 { transition-delay: 0.1s; }
.sr-d3 { transition-delay: 0.15s; }
.sr-d4 { transition-delay: 0.2s; }
.sr-d5 { transition-delay: 0.25s; }
.sr-d6 { transition-delay: 0.3s; }
.sr-d7 { transition-delay: 0.35s; }
.sr-d8 { transition-delay: 0.4s; }

/* ===== HOME: ABOUT ===== */
.about { background: var(--white); }
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.about-visual {
    aspect-ratio: 4/5;
    background: var(--gray-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.about-visual-text {
    font-family: var(--serif);
    font-size: 5rem;
    color: var(--gray-200);
    font-style: italic;
    user-select: none;
}
.about-year {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--gray-400);
    text-transform: uppercase;
}
.about-content .section-desc { margin-bottom: 2.5rem; }
.about-highlights {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.highlight {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: var(--gray-600);
}
.highlight-dot {
    width: 6px; height: 6px;
    background: var(--black);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== HOME: STYLES ===== */
.styles-section { background: var(--gray-50); }
.styles-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}
/* ===== Photo Bento Grid ===== */
.styles-bento {
    display: grid;
    /* Twelve columns so a row of four (span 3) and a row of three (span 4)
       both fill the full width — see the exactly-seven rule below. */
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 230px;
    gap: 1rem;
}
.styles-bento > .bento-tile { grid-column: span 3; }
/* Seven styles in a plain four-up grid leave a hole in the last column. Widen
   the trailing three so the second row spans the full width instead. Scoped
   with :has() so an eighth style reverts to a clean 4 x 2 on its own. */
.styles-bento:has(> :nth-child(7):last-child) > .bento-tile:nth-child(n + 5) {
    grid-column: span 4;
}
.bento-tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: var(--gray-100);
    text-decoration: none;
    color: var(--ink);
    isolation: isolate;
    transition: transform 0.5s var(--ease);
}
.bento-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.2) contrast(1.05);
    transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}
.bento-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
    transition: opacity 0.5s var(--ease);
}
.bento-tile:hover img {
    transform: scale(1.06);
    filter: grayscale(0) contrast(1.08);
}
.bento-overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--ink);
}
.bento-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.04em;
}
.bento-name {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    transition: transform 0.5s var(--ease);
}
.bento-name em { font-style: italic; color: rgba(255,255,255,0.7); }
.bento-tile:hover .bento-name { transform: translateY(-3px); }
.bento-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--white);
    color: var(--black);
}
.bento-badge-soft {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(255,255,255,0.55);
}

/* ===== HOME: STAGE ===== */
.stage-section { background: var(--black); color: var(--ink); }
.stage-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.stage-content .section-label { color: var(--gray-500); }
.stage-content .section-desc { color: var(--gray-400); margin-bottom: 2rem; }
.stage-features {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
}
.stage-feature {
    font-size: 0.88rem;
    color: var(--gray-300);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.stage-feature .check {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stage-feature .check svg { width: 8px; height: 8px; color: var(--ink); }
.stage-visual {
    /* Portrait again: the rooftop landscape moved to the hero, and this slot
       now holds the 4:5 crew crop. */
    aspect-ratio: 4/5;
    background: var(--gray-800);
    border-radius: 12px;
    /* Without this the border-radius only clips the box itself — the <img>
       inside keeps its square corners and covers them. Every other image
       frame on the site (.about-visual, .hero-photo, .ds-photo, .ih-photo)
       already pairs the two. */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stage-visual-text {
    font-family: var(--serif);
    font-size: 4rem;
    font-style: italic;
    color: var(--gray-700);
    user-select: none;
}

/* ===== PACKAGES (home 3-tier) ===== */
.packages-section { background: var(--white); }
.packages-header { text-align: center; margin-bottom: 3.5rem; }
.packages-header .section-desc { margin: 0 auto; }
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
}
.package-card {
    background: var(--white);
    padding: 2.5rem 2rem;
    position: relative;
}
.package-card.featured { background: var(--black); color: var(--ink); }
.package-tier {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 1.5rem;
}
.package-card.featured .package-tier { color: var(--gray-500); }
.package-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    /* Literal values, not var(--white)/var(--black): the dark theme swaps those
       two, which rendered this badge dark-on-light instead of light-on-dark. */
    background: #FAFAFA;
    color: #0C0C0C;
    border-radius: 999px;
    margin-left: 0.5rem;
    vertical-align: middle;
}
/* The pricing grid uses light cards, where a near-white pill is invisible — it
   was rendering #FAFAFA on an #FAFAFA card. Invert it there. The selector has
   to out-specify `.pricing-card:not(.featured) *`, which forces colour:inherit
   onto every child and was also fading the label to 60% opacity. */
.pricing-card:not(.featured) .package-badge,
.pricing-card:not(.featured) .package-badge * {
    background: #0C0C0C;
    color: #FAFAFA;
    opacity: 1;
}
.package-price {
    font-family: var(--serif);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.3rem;
    letter-spacing: -0.03em;
}
.package-price sup {
    font-size: 1rem;
    font-family: var(--sans);
    font-weight: 500;
    vertical-align: super;
    margin-right: 2px;
}
.package-period {
    font-size: 0.78rem;
    color: var(--gray-400);
    margin-bottom: 2rem;
}
.package-features { list-style: none; margin-bottom: 2rem; }
.package-features li {
    font-size: 0.85rem;
    color: var(--gray-500);
    padding: 0.45rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.package-card.featured .package-features li { color: var(--gray-400); }
.package-features li::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.4;
}
.package-card .btn { width: 100%; justify-content: center; }

/* ===== CTA ===== */
.cta-section { background: var(--gray-50); }
.cta-inner { text-align: center; max-width: 600px; margin: 0 auto; }
.cta-title {
    font-family: var(--serif);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 1rem;
}
.cta-desc {
    font-size: 0.95rem;
    color: var(--gray-500);
    line-height: 1.65;
    margin-bottom: 2rem;
}
.cta-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ===== FOOTER ===== */
footer {
    border-top: 1px solid var(--gray-100);
    padding: 4rem 3rem 2.5rem;
    background: var(--white);
}
.footer-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer-brand-text {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.65;
    margin: 1rem 0 1.5rem;
    max-width: 280px;
}
.footer-socials { display: flex; gap: 0.5rem; }
.social-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--gray-500);
    background: var(--white);
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.3s var(--ease), transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
    overflow: hidden;
    position: relative;
}
.social-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s var(--ease);
    position: relative;
    z-index: 1;
}
.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(12, 12, 12, 0.08);
}
.social-btn:hover svg { transform: scale(1.08); }

/* Brand-colour hovers — revert to monochrome at rest, bloom on hover/focus */
.social-btn[data-social="instagram"]:hover,
.social-btn[data-social="instagram"]:focus-visible {
    color: #FFFFFF;
    border-color: transparent;
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-btn[data-social="facebook"]:hover,
.social-btn[data-social="facebook"]:focus-visible {
    color: #FFFFFF;
    border-color: #1877F2;
    background: #1877F2;
}
.social-btn[data-social="tiktok"]:hover,
.social-btn[data-social="tiktok"]:focus-visible {
    color: #FFFFFF;
    border-color: #000;
    background: #000;
    /* TikTok's signature glow — layered text-shadow fakes the red/cyan offset look */
    box-shadow: 0 6px 14px rgba(12, 12, 12, 0.12),
                2px 0 0 rgba(37, 244, 238, 0.85) inset,
                -2px 0 0 rgba(254, 44, 85, 0.85) inset;
}
.social-btn[data-social="youtube"]:hover,
.social-btn[data-social="youtube"]:focus-visible {
    color: #FFFFFF;
    border-color: #FF0000;
    background: #FF0000;
}
.footer-col h4 {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 1.2rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a {
    font-size: 0.85rem;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-col a:hover { color: var(--black); }
.footer-contact-item {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 0.55rem;
    line-height: 1.55;
}
.footer-contact-item a {
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-contact-item a:hover { color: var(--ink); }
.footer-bottom {
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-bottom p { font-size: 0.75rem; color: var(--gray-400); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-decoration: none;
}
.footer-bottom-links a:hover { color: var(--black); }

/* ===================================================================
   ABOUT PAGE
   =================================================================== */
.story-section { background: var(--white); }
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
    align-items: start;
}
.story-text p {
    font-size: 0.95rem;
    color: var(--gray-500);
    line-height: 1.75;
    margin-bottom: 1.25rem;
}
.story-text p:last-child { margin-bottom: 0; }

.story-feature {
    margin-top: 4rem;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--gray-50);
    aspect-ratio: 16 / 7;
    max-height: 560px;
}
.story-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 0.8s ease;
}
.story-feature:hover img { transform: scale(1.03); }
.story-feature-caption {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    right: 2rem;
    color: var(--ink);
    z-index: 1;
}
.story-feature::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
}
.story-feature-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--gray-200);
}
.story-feature-text {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    line-height: 1.35;
    max-width: 540px;
}
@media (max-width: 768px) {
    .story-feature { aspect-ratio: 4 / 5; margin-top: 2.5rem; }
    .story-feature-caption { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
}

/* ===================================================================
   Founder spotlight section
   =================================================================== */
.founder-section {
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}
.founder-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 4rem;
    align-items: center;
}
.founder-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 16px;
    background: var(--gray-100);
}
.founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.founder-photo-tag {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    right: 1.25rem;
    padding: 1rem 1.1rem;
    background: rgba(12, 12, 12, 0.78);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.founder-photo-eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.65);
}
.founder-photo-name {
    font-family: var(--serif);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
.founder-body p {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 1rem;
    max-width: 560px;
}
.founder-body .section-title { margin-bottom: 1.25rem; }
.founder-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}
.founder-stat-num {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--black);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}
.founder-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-500);
}
@media (max-width: 860px) {
    .founder-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .founder-photo { max-width: 420px; margin: 0 auto; aspect-ratio: 3 / 4; }
    .founder-stats { gap: 1.5rem; }
    .founder-stat-num { font-size: 1.6rem; }
}

.values-section { background: var(--gray-50); }
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.value-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    padding: 2.5rem 1.85rem 2.25rem;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease), color 0.45s var(--ease);
}
.value-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% -10%, rgba(0,0,0,0.04), transparent 55%);
    z-index: -1;
    opacity: 1;
    transition: opacity 0.4s var(--ease);
}
.value-card:hover {
    transform: translateY(-6px);
    border-color: var(--black);
    background: var(--black);
    color: var(--ink);
}
.value-card:hover::before { opacity: 0; }
.value-num {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--gray-100);
    user-select: none;
    transition: color 0.45s var(--ease), transform 0.45s var(--ease);
    z-index: 0;
    letter-spacing: -0.02em;
}
.value-card:hover .value-num {
    color: rgba(255,255,255,0.12);
    transform: translateY(-4px) scale(1.04);
}
.value-icon {
    position: relative;
    z-index: 1;
    width: 44px; height: 44px;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.value-card:hover .value-icon {
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.06);
}
.value-icon svg {
    width: 18px; height: 18px;
    color: var(--black);
    transition: color 0.45s var(--ease);
}
.value-card:hover .value-icon svg { color: var(--ink); }
.value-title {
    position: relative;
    z-index: 1;
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.65rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.value-desc {
    position: relative;
    z-index: 1;
    font-size: 0.88rem;
    color: var(--gray-500);
    line-height: 1.65;
    transition: color 0.45s var(--ease);
}
.value-card:hover .value-desc { color: rgba(255,255,255,0.75); }
.value-rule {
    display: block;
    width: 32px;
    height: 1px;
    background: var(--gray-200);
    margin-top: 1.75rem;
    transition: width 0.5s var(--ease), background 0.45s var(--ease);
}
.value-card:hover .value-rule {
    width: 64px;
    background: var(--white);
}

.timeline-section { background: var(--white); }
.timeline {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 90px;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--gray-100);
}
.timeline-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2.5rem;
    padding: 1.5rem 0;
    position: relative;
}
.timeline-year {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--black);
    letter-spacing: -0.01em;
    padding-top: 0.15rem;
    position: relative;
}
.timeline-year::after {
    content: '';
    position: absolute;
    right: -26px;
    top: 0.65rem;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--black);
    border: 3px solid var(--white);
    z-index: 2;
}
.timeline-content h3 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.timeline-content p {
    font-size: 0.9rem;
    color: var(--gray-500);
    line-height: 1.6;
}

.instructors-section { background: var(--gray-50); }
.instructors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.instructor-card {
    text-align: left;
    display: block;
    color: inherit;
    text-decoration: none;
}
.instructor-card:hover { color: inherit; }
.instructor-card:hover .instructor-name { text-decoration: underline; text-underline-offset: 4px; }
.instructor-photo {
    aspect-ratio: 3/4;
    background: var(--gray-100);
    border-radius: 12px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.4s var(--ease);
}
.instructor-card:hover .instructor-photo { transform: translateY(-4px); }
.instructor-photo span {
    font-family: var(--serif);
    font-size: 3rem;
    color: var(--gray-300);
    font-style: italic;
}
.instructor-name {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
}
.instructor-role {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.6rem;
}
.instructor-bio {
    font-size: 0.82rem;
    color: var(--gray-500);
    line-height: 1.55;
}

.gallery-section { background: var(--white); }
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.gallery-item {
    aspect-ratio: 4/3;
    background: var(--gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s var(--ease);
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item span {
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--gray-300);
    font-style: italic;
}
.gallery-item:nth-child(3n+1) { background: var(--gray-50); }
.gallery-item:nth-child(3n+2) { background: var(--gray-100); }
.gallery-item:nth-child(3n) { background: var(--gray-200); }

/* ===================================================================
   PACKAGES PAGE — 6 tiers
   =================================================================== */
.pricing-section { background: var(--white); }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}
.pricing-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    position: relative;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}
.pricing-card:hover {
    border-color: var(--gray-300);
}
.pricing-card.featured {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}
.pricing-card.featured:hover { border-color: var(--black); }
.pricing-tier {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 1.25rem;
}
.pricing-card.featured .pricing-tier { color: var(--gray-500); }
.pricing-price {
    font-family: var(--serif);
    font-size: 3rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.3rem;
    letter-spacing: -0.03em;
}
.pricing-price sup {
    font-size: 1rem;
    font-family: var(--sans);
    font-weight: 500;
    vertical-align: super;
    margin-right: 2px;
}
.pricing-period {
    font-size: 0.78rem;
    color: var(--gray-400);
    margin-bottom: 1.5rem;
}
.pricing-desc {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.pricing-card.featured .pricing-desc { color: var(--gray-400); }
.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
    flex: 1;
}
.pricing-features li {
    font-size: 0.85rem;
    color: var(--gray-600);
    padding: 0.4rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.pricing-card.featured .pricing-features li { color: var(--gray-300); }
.pricing-features li::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
    margin-top: 0.55rem;
    flex-shrink: 0;
    opacity: 0.5;
}
.pricing-card .btn { width: 100%; justify-content: center; }
.pricing-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    background: var(--white);
    color: var(--black);
    border-radius: 3px;
}

.info-callout-section { background: var(--gray-50); }
.info-callouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}
.info-callout {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    padding: 2.25rem 2.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.info-callout::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, var(--gray-100) 1px, transparent 0);
    background-size: 18px 18px;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
    mask-image: linear-gradient(160deg, transparent 55%, black 100%);
    -webkit-mask-image: linear-gradient(160deg, transparent 55%, black 100%);
}
.info-callout:hover {
    transform: translateY(-4px);
    border-color: var(--gray-200);
    box-shadow: 0 24px 48px -28px rgba(0,0,0,0.18);
}
.info-callout:hover::before { opacity: 1; }

.info-callout.dark {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}
.info-callout.dark::before {
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.18) 1px, transparent 0);
    mask-image: linear-gradient(160deg, transparent 55%, black 100%);
    -webkit-mask-image: linear-gradient(160deg, transparent 55%, black 100%);
}
.info-callout.dark:hover {
    box-shadow: 0 28px 56px -24px rgba(0,0,0,0.45);
}

.info-callout-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}
.info-callout-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: var(--black);
    color: var(--ink);
}
.info-callout.dark .info-callout-tag {
    background: var(--white);
    color: var(--black);
}
.info-callout-icon {
    width: 38px;
    height: 38px;
    color: var(--gray-300);
    transition: color 0.4s var(--ease), transform 0.5s var(--ease);
}
.info-callout-icon svg { width: 100%; height: 100%; display: block; }
.info-callout.dark .info-callout-icon { color: var(--gray-700); }
.info-callout:hover .info-callout-icon {
    color: var(--black);
    transform: rotate(-6deg);
}
.info-callout.dark:hover .info-callout-icon { color: var(--ink); }

.info-callout-amount {
    font-family: var(--serif);
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    color: inherit;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.info-callout-amount sup {
    font-size: 0.32em;
    font-style: italic;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    top: -1.5em;
    margin-right: -0.1em;
}
.info-callout.dark .info-callout-amount sup { color: var(--gray-500); }
.info-callout-unit {
    font-family: var(--sans);
    font-size: 0.28em;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gray-400);
    margin-left: 0.4rem;
    align-self: flex-end;
    padding-bottom: 0.7rem;
}
.info-callout.dark .info-callout-unit { color: var(--gray-500); }

.info-callout-rule {
    height: 1px;
    background: var(--gray-100);
    margin: 1.5rem 0 1.25rem;
    width: 56px;
    position: relative;
    z-index: 1;
}
.info-callout.dark .info-callout-rule { background: var(--gray-800); }

.info-callout-headline {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 0.65rem;
    letter-spacing: -0.005em;
    font-style: italic;
    color: inherit;
    position: relative;
    z-index: 1;
}
.info-callout-text {
    font-size: 0.9rem;
    color: var(--gray-500);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}
.info-callout.dark .info-callout-text { color: var(--gray-300); }

.info-callout-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.85rem 1.25rem;
    border: 1px solid var(--gray-700);
    border-radius: 999px;
    align-self: flex-start;
    transition: gap 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
    position: relative;
    z-index: 1;
}
.info-callout-link svg { width: 14px; height: 14px; }
.info-callout-link:hover {
    gap: 0.7rem;
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

/* New member banner (contact page) */
.new-member-banner {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-left: 3px solid var(--black);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s var(--ease);
}
.new-member-banner:hover {
    background: var(--white);
    border-left-color: var(--black);
    transform: translateX(2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.nmb-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--black);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
}
.nmb-icon svg { width: 20px; height: 20px; }
.nmb-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.15rem;
}
.nmb-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.4;
}
.nmb-arrow { width: 18px; height: 18px; color: var(--gray-400); transition: transform 0.25s var(--ease); }
.new-member-banner:hover .nmb-arrow { transform: translateX(4px); color: var(--black); }

/* ===================================================================
   SCHEDULE PAGE
   =================================================================== */
.schedule-section { background: var(--white); }
.schedule-legend {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2.5rem;
}
.legend-pill {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.legend-pill .dot-color {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-pill:hover { border-color: var(--black); }
.legend-pill.active {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}
.legend-pill-static {
    cursor: default;
    background: #FFEEEA;
    border-color: rgba(176, 70, 60, 0.2);
    color: #B0463C;
}
.legend-pill-static:hover { border-color: rgba(176, 70, 60, 0.2); }
.legend-pill .dot-holiday { background: #D9534F; }
.legend-pill .dot-beginner { background: #3B82F6; }
.legend-pill .dot-intermediate { background: #22C55E; }
.legend-pill .dot-advanced { background: #B392E0; }
.legend-pill .dot-kids { background: #FFD166; }
.legend-pill .dot-open { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.legend-pill .dot-foundation { background: #F5A66B; }
.legend-pill .dot-recital_preparation_class { background: #EF4444; }

.calendar-month-head {
    text-align: center;
    margin-bottom: 2rem;
}
.calendar-month-head h3 {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin: 0;
    min-width: 220px;
    text-align: center;
}
.calendar-month-head p {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin: 0;
}

/* Month navigation — prev/title/next + today button */
.month-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.month-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.month-nav-btn svg { width: 16px; height: 16px; }
.month-nav-btn:hover {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}
.month-nav-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(12, 12, 12, 0.12);
}
.month-nav-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}
.month-nav-hint {
    font-size: 0.72rem;
    color: var(--gray-400);
    font-style: italic;
    letter-spacing: 0.01em;
}
@media (max-width: 540px) {
    .month-nav-hint { display: none; }
}
.month-today-btn {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.month-today-btn:hover {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--gray-100);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
}
.calendar-day {
    background: var(--white);
    padding: 1rem 0.75rem;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.calendar-day-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 0.25rem;
}
.calendar-day-name {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-400);
}
.calendar-day-date {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--black);
}
.class-entry {
    padding: 0.55rem 0.6rem;
    border-radius: 6px;
    background: var(--gray-50);
    border-left: 3px solid var(--gray-300);
    font-size: 0.72rem;
    line-height: 1.35;
    cursor: pointer;
    transition: all 0.2s;
}
.class-entry:hover { transform: translateX(2px); }
.class-entry.hidden { display: none; }
.class-entry .c-time {
    font-weight: 600;
    color: var(--black);
    display: block;
    margin-bottom: 0.15rem;
}
.class-entry .c-name {
    color: var(--gray-700);
    font-weight: 500;
    display: block;
}
.class-entry .c-instructor {
    color: var(--gray-400);
    font-size: 0.68rem;
}
.class-entry[data-level="beginner"] { border-left-color: #3B82F6; }
.class-entry[data-level="intermediate"] { border-left-color: #22C55E; }
.class-entry[data-level="advanced"] { border-left-color: #B392E0; }
.class-entry[data-level="kids"] { border-left-color: #FFD166; }
.class-entry[data-level="open"] { border-left-color: #D1D5DB; }
.class-entry[data-level="foundation"] { border-left-color: #F5A66B; }
.class-entry[data-level="recital_preparation_class"] { border-left-color: #EF4444; }

/* Section headings within schedule page — editorial style with index number */
.view-heading {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 1.5rem;
    margin: 3.5rem 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
}
.view-heading::after {
    /* short accent bar at the start of the divider — editorial flourish */
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--black);
}
.view-heading-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gray-400);
    letter-spacing: -0.01em;
    line-height: 1;
    padding-top: 0.5rem;
    align-self: start;
}
.view-heading-body {
    min-width: 0;
}
.view-heading-eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gray-500);
    margin-bottom: 0.4rem;
}
.view-heading h4 {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--black);
}
.view-heading h4 em {
    font-style: italic;
}
.view-heading .view-heading-desc {
    font-size: 0.8rem;
    color: var(--gray-500);
    text-align: right;
    max-width: 240px;
    line-height: 1.5;
    align-self: end;
    padding-bottom: 0.2rem;
}

@media (max-width: 720px) {
    .view-heading {
        grid-template-columns: auto 1fr;
        gap: 0.75rem 1rem;
    }
    .view-heading .view-heading-desc {
        grid-column: 1 / -1;
        text-align: left;
        max-width: 100%;
        padding-top: 0.5rem;
    }
}
.week-nav-row {
    display: flex;
    justify-content: flex-end;
    margin: -0.5rem 0 1rem;
}
.week-nav {
    display: inline-flex;
    gap: 0.35rem;
}
.week-nav-btn {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    transition: all 0.2s;
}
.week-nav-btn svg { width: 14px; height: 14px; }
.week-nav-btn:hover { border-color: var(--black); color: var(--black); }

/* ===== Month grid ===== */
.month-grid {
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
}
.month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}
.month-header span {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    text-align: center;
    padding: 0.75rem 0;
}
.month-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--gray-100);
}
.month-cell {
    background: var(--white);
    border: none;
    padding: 0.6rem 0.55rem;
    min-height: 78px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.4rem;
    transition: background 0.2s;
    font-family: inherit;
    text-align: left;
}
.month-cell.empty { background: var(--gray-50); cursor: default; }
.month-cell:not(.empty):hover { background: var(--gray-50); }
.mc-date {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--black);
    line-height: 1;
}
.mc-dots {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.mc-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.mc-dot.dot-beginner { background: #3B82F6; }
.mc-dot.dot-intermediate { background: #22C55E; }
.mc-dot.dot-advanced { background: #B392E0; }
.mc-dot.dot-kids { background: #FFD166; }
.mc-dot.dot-open { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.mc-dot.dot-foundation { background: #F5A66B; }
.mc-dot.dot-recital_preparation_class { background: #EF4444; }
.month-cell.today {
    background: #FFF8E7;
}
.month-cell.today:not(.empty):hover { background: #FCEFCC; }
.month-cell.today .mc-date {
    color: var(--black);
    font-weight: 600;
}
.month-cell.selected {
    background: #FFE49C;
}
.month-cell.selected:not(.empty):hover { background: #FFD980; }
.month-cell.selected .mc-date {
    color: var(--black);
    font-weight: 600;
}

/* Holiday — soft coral tint */
.month-cell.holiday {
    background: #FFEEEA;
}
.month-cell.holiday:not(.empty):hover { background: #FFE0D9; }
.month-cell.holiday.selected { background: #FFD7CC; }
.month-cell.holiday .mc-date { color: #B0463C; font-weight: 600; }
.mc-holiday {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #B0463C;
    background: rgba(176, 70, 60, 0.1);
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    align-self: flex-start;
}

/* ===== Week view — buttons ===== */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--gray-100);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
}
button.calendar-day {
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.calendar-day.today {
    background: #FFF8E7;
}
.calendar-day.today .calendar-day-date {
    color: var(--black);
    font-weight: 600;
}
.calendar-day.selected {
    background: #FFE49C;
}
.calendar-day.selected .calendar-day-name { color: var(--gray-700); }
.calendar-day.selected .calendar-day-date { color: var(--black); font-weight: 600; }
.calendar-day.selected .calendar-day-head { border-bottom-color: rgba(0,0,0,0.12); }
.calendar-day.selected .class-entry {
    background: var(--white);
    color: var(--black);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.calendar-day.selected .class-entry .c-time { color: var(--black); }
.calendar-day.selected .class-entry .c-name { color: var(--gray-700); }
.calendar-day.selected .class-entry .c-instructor { color: var(--gray-500); }

/* Holiday — week view */
.calendar-day.holiday {
    background: #FFEEEA;
}
.calendar-day.holiday.selected { background: #FFD7CC; }
.calendar-day.holiday .calendar-day-date { color: #B0463C; font-weight: 600; }
.cd-holiday {
    margin-top: 0.5rem;
    padding: 0.7rem 0.7rem;
    background: var(--white);
    border-left: 3px solid #D9534F;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.cd-holiday-tag {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #B0463C;
}
.cd-holiday-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--black);
    line-height: 1.3;
}

/* ===== Day detail ===== */
.day-detail {
    margin-top: 3rem;
    background: linear-gradient(180deg, #FBFAF6 0%, #F4F1E8 100%);
    color: var(--black);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.day-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.day-detail-kicker {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}
.day-detail-title {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--black);
}
.day-detail-count {
    font-size: 0.8rem;
    color: var(--gray-500);
}
.day-detail-empty {
    padding: 3rem 0;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
}
.day-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.day-class {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-left: 4px solid var(--gray-300);
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.day-class:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.day-class[data-level="beginner"] { border-left-color: #3B82F6; }
.day-class[data-level="intermediate"] { border-left-color: #22C55E; }
.day-class[data-level="advanced"] { border-left-color: #B392E0; }
.day-class[data-level="kids"] { border-left-color: #FFD166; }
.day-class[data-level="open"] { border-left-color: #D1D5DB; }
.day-class[data-level="foundation"] { border-left-color: #F5A66B; }
.day-class[data-level="recital_preparation_class"] { border-left-color: #EF4444; }
.day-class-time {
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--black);
    letter-spacing: -0.01em;
}
.day-class-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.25rem;
}
.day-class-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.day-class-meta .dot-color {
    width: 8px; height: 8px;
    border-radius: 50%;
}
.day-class-meta .dot-beginner { background: #3B82F6; }
.day-class-meta .dot-intermediate { background: #22C55E; }
.day-class-meta .dot-advanced { background: #B392E0; }
.day-class-meta .dot-kids { background: #FFD166; }
.day-class-meta .dot-open { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.day-class-meta .dot-foundation { background: #F5A66B; }
.day-class-meta .dot-recital_preparation_class { background: #EF4444; }
.day-class-book {
    padding: 0.55rem 1.1rem;
    background: var(--black);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.day-class-book:hover { background: var(--gray-800); transform: translateY(-1px); }

/* Past / closed class — no longer bookable */
.day-class.day-class-past {
    background: var(--gray-50);
    opacity: 0.72;
}
.day-class.day-class-past .day-class-name,
.day-class.day-class-past .day-class-meta {
    color: var(--gray-500);
}
.day-class-locked {
    padding: 0.55rem 1rem;
    background: var(--white);
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px dashed var(--gray-200);
    border-radius: 6px;
    font-style: italic;
    cursor: help;
    white-space: nowrap;
}

/* Past days on month + week views — faded so users see they can't book */
.month-cell.past:not(.today):not(.selected) {
    color: var(--gray-300);
    opacity: 0.55;
}
.month-cell.past .mc-dot { opacity: 0.4; }
.calendar-day.past:not(.today):not(.selected) {
    background: var(--gray-50);
    opacity: 0.65;
}
.calendar-day.past .class-entry { opacity: 0.7; }

/* Holiday — day detail */
.day-detail-head.is-holiday .day-detail-kicker { color: #B0463C; }
.holiday-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem;
    background: linear-gradient(135deg, #FFEEEA 0%, #FFE0D9 100%);
    border: 1px solid rgba(176, 70, 60, 0.18);
    border-radius: 12px;
    margin-bottom: 0.8rem;
}
.holiday-banner-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B0463C;
}
.holiday-banner-icon svg { width: 22px; height: 22px; }
.holiday-banner-name {
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--black);
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
}
.holiday-banner-note {
    font-size: 0.88rem;
    color: var(--gray-700);
    line-height: 1.5;
}

/* ===================================================================
   EVENTS PAGE
   =================================================================== */
.events-section { background: var(--white); }
.filter-bar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
}
.filter-pill {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--sans);
}
.filter-pill:hover { border-color: var(--black); color: var(--black); }
.filter-pill.active {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.event-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s var(--ease);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.event-card:hover {
    border-color: var(--gray-300);
    transform: translateY(-4px);
}
.event-card.hidden { display: none; }
.event-image {
    aspect-ratio: var(--event-ratio);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.event-image span {
    font-family: var(--serif);
    font-size: 2.2rem;
    color: var(--gray-300);
    font-style: italic;
}
.event-category {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    background: var(--white);
    color: var(--black);
    border-radius: 3px;
}
.event-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.event-date {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 0.6rem;
}
.event-title {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}
.event-venue {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.event-venue svg { width: 12px; height: 12px; color: var(--gray-400); }
.event-desc {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.55;
    margin-bottom: 1.25rem;
    flex: 1;
}
.event-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
}
.event-link svg { width: 12px; height: 12px; transition: transform 0.2s; }
.event-link:hover svg { transform: translateX(3px); }

.book-dancers-section { background: var(--black); color: var(--ink); }
.book-dancers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
.book-dancers-head .section-label { color: var(--gray-500); }
.book-dancers-head .section-title { color: var(--ink); }
.book-dancers-head .section-desc { color: var(--gray-400); margin-bottom: 2.5rem; }
.service-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.service-type {
    background: var(--gray-900);
    border: 1px solid var(--gray-800);
    border-radius: 10px;
    padding: 1.5rem 1.25rem;
}
.service-type h4 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
    color: var(--ink);
}
.service-type p {
    font-size: 0.8rem;
    color: var(--gray-400);
    line-height: 1.5;
}

/* ===================================================================
   FORM STYLES (contact + events enquiry)
   =================================================================== */
.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.form-field input,
.form-field select,
.form-field textarea {
    font-family: var(--sans);
    font-size: 0.9rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: var(--white);
    color: var(--black);
    transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--black);
}
.form-field textarea { resize: vertical; min-height: 120px; font-family: var(--sans); }
.form--dark .form-field label { color: var(--gray-400); }
.form--dark .form-field input,
.form--dark .form-field select,
.form--dark .form-field textarea {
    background: var(--gray-100);
    color: var(--ink);
    border-color: var(--gray-200);
}
.form--dark .form-field input:focus,
.form--dark .form-field select:focus,
.form--dark .form-field textarea:focus {
    border-color: var(--gray-400);
}
.form .btn { align-self: flex-start; margin-top: 0.5rem; }

/* ===================================================================
   CONTACT PAGE
   =================================================================== */
.contact-info-section { background: var(--white); }
.contact-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.contact-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    transition: all 0.3s;
}
.contact-card:hover {
    border-color: var(--gray-300);
    transform: translateY(-4px);
}
.contact-icon {
    width: 40px; height: 40px;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.contact-icon svg { width: 16px; height: 16px; color: var(--black); }
.contact-card-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 0.5rem;
}
.contact-card-value {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}
.contact-card-extra {
    font-size: 0.82rem;
    color: var(--gray-500);
    line-height: 1.5;
}
.contact-card a {
    color: inherit;
    text-decoration: none;
}
.contact-card a:hover { color: var(--gray-700); }

.contact-form-section { background: var(--gray-50); }
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
.map-placeholder {
    aspect-ratio: 4/4;
    background: var(--gray-100);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    position: relative;
    overflow: hidden;
}
.map-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--gray-200) 1px, transparent 1px),
        linear-gradient(90deg, var(--gray-200) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.5;
}
.map-pin {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.map-pin svg { width: 16px; height: 16px; color: var(--ink); }
.map-text {
    position: relative;
    z-index: 2;
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--black);
    margin-top: 1rem;
}

.follow-section { background: var(--white); text-align: center; }
.follow-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.follow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.4rem;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    text-decoration: none;
    color: var(--gray-700);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}
.follow-link:hover {
    border-color: var(--black);
    color: var(--black);
    transform: translateY(-2px);
}
.follow-link svg { width: 14px; height: 14px; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
    .styles-bento { grid-auto-rows: 200px; }
    .packages-grid { grid-template-columns: 1fr; max-width: 380px; }
    .about-grid, .stage-inner { grid-template-columns: 1fr; gap: 3rem; }
    .about-visual, .stage-visual { max-width: 400px; }

    .story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .instructors-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
    .events-grid { grid-template-columns: repeat(2, 1fr); }
    .book-dancers-grid { grid-template-columns: 1fr; gap: 3rem; }
    .contact-cards { grid-template-columns: repeat(2, 1fr); }
    .contact-form-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .calendar-day { min-height: 200px; }
}

@media (max-width: 768px) {
    nav { padding: 0 1.5rem; }
    .nav-center { display: none; }
    .nav-cta { display: none; }
    .mobile-toggle { display: block; }
    section { padding: 5rem 1.5rem; }
    .hero { padding: 6rem 1.5rem 4rem; }
    .hero-stats { gap: 2rem; flex-wrap: wrap; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }
    .cta-actions { flex-direction: column; align-items: center; }

    .page-hero { padding: 8rem 1.5rem 4rem; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
    .info-callouts { grid-template-columns: 1fr; }
    .service-types { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }

    /* calendar goes vertical on mobile */
    .calendar-grid { grid-template-columns: 1fr; }
    .calendar-day { min-height: auto; }
    /* month cells shrink */
    .month-cell { min-height: 56px; padding: 0.4rem; }
    .mc-date { font-size: 0.85rem; }
    .mc-dot { width: 4px; height: 4px; }
    .month-header span { font-size: 0.6rem; padding: 0.5rem 0; }
    /* day detail */
    .day-detail { padding: 1.5rem; border-radius: 12px; }
    .day-detail-title { font-size: 1.4rem; }
    .day-class {
        grid-template-columns: 1fr auto;
        gap: 0.5rem 1rem;
        padding: 1rem;
    }
    .day-class-time {
        grid-column: 1 / -1;
        font-size: 0.95rem;
        color: var(--gray-300);
    }
    .day-class-book { grid-column: 2; grid-row: 1; }
}

@media (max-width: 480px) {
    .styles-bento { grid-auto-rows: 180px; gap: 0.75rem; }
    .styles-bento > .bento-tile,
    .styles-bento:has(> :nth-child(7):last-child) > .bento-tile:nth-child(n + 5) {
        grid-column: span 6;
    }
    .bento-overlay { padding: 1.1rem; }
    .hero-stats { flex-direction: column; gap: 1.5rem; text-align: center; }
    .values-grid { grid-template-columns: 1fr; }
    .instructors-grid { grid-template-columns: 1fr; }
    .events-grid { grid-template-columns: 1fr; }
    .contact-cards { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .timeline::before { left: 60px; }
    .timeline-item { grid-template-columns: 60px 1fr; gap: 1.5rem; }
}

/* ===================================================================
   IMAGE RENDERING — full colour photos throughout
   =================================================================== */
.about-visual img,
.stage-visual img,
.instructor-photo img,
.gallery-item img,
.event-image img,
.map-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease);
}
.instructor-card:hover .instructor-photo img,
.gallery-item:hover img,
.event-card:hover .event-image img {
    transform: scale(1.04);
}
.stage-visual { background: var(--black); }

/* hide placeholder text once image is present */
.about-visual:has(img) .about-visual-text,
.stage-visual:has(img) .stage-visual-text,
.instructor-photo:has(img) span,
.gallery-item:has(img) span,
.event-image:has(img) span {
    display: none;
}

/* map placeholder with image treatment */
.map-placeholder:has(img) .map-pin,
.map-placeholder:has(img) .map-text { position: relative; z-index: 2; color: var(--ink); }
.map-placeholder:has(img) { position: relative; }
.map-placeholder:has(img)::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.5));
    z-index: 1;
}

/* ===== Nav dropdown ===== */
.nav-center li.has-dropdown { position: relative; }
.nav-center .has-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
/* Don't show the slide-in underline on the dropdown parent — chevron is
   the affordance. Keep the active-dot indicator though. */
.nav-center .has-dropdown > a:not(.active)::after { display: none; }
.nav-center .chev {
    width: 10px;
    height: 10px;
    stroke-width: 2.5;
    transition: transform 0.25s var(--ease);
    opacity: 0.55;
}
.nav-center .has-dropdown:hover > a .chev { transform: rotate(180deg); opacity: 1; }
.nav-center .has-dropdown:hover > a { color: var(--black); }
.nav-center .dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 200px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(12, 12, 12, 0.06);
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(12, 12, 12, 0.12), 0 4px 12px rgba(12, 12, 12, 0.04);
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
    z-index: 100;
}
/* bridge to prevent hover gap */
.nav-center .dropdown::before {
    content: "";
    position: absolute;
    top: -0.8rem;
    left: 0;
    right: 0;
    height: 0.8rem;
}
.nav-center .has-dropdown:hover .dropdown,
.nav-center .has-dropdown:focus-within .dropdown {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s;
}
.nav-center .dropdown a {
    font-size: 0.85rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    color: var(--gray-700, var(--gray-600));
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, padding-left 0.25s var(--ease);
    position: relative;
}
.nav-center .dropdown a::after { display: none; }
.nav-center .dropdown a:hover {
    background: var(--gray-50);
    color: var(--black);
    padding-left: 1.1rem;
}
.nav-center .dropdown a.active {
    background: var(--gray-50);
    color: var(--black);
    font-weight: 600;
}

/* ===== Instructors page ===== */
.instructors-page { padding: 6rem 2rem; background: var(--white); }
.ig-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.ig-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
    text-align: left;
    padding: 0;
    font-family: inherit;
    width: 100%;
}
.ig-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.10);
    border-color: var(--gray-200);
}
.ig-card-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--gray-100);
}
.ig-card-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}
.ig-card:hover .ig-card-photo img { transform: scale(1.04); }
.ig-card-body { padding: 1.5rem 1.5rem 1.75rem; }
.ig-card-name {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}
.ig-card-role {
    font-size: 0.82rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.9rem;
}
.ig-card-bio {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.ig-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--black);
    letter-spacing: 0.02em;
}
.ig-card-cta svg { width: 14px; height: 14px; stroke-width: 2.5; transition: transform 0.3s; }
.ig-card:hover .ig-card-cta svg { transform: translateX(4px); }

/* ===== Instructor modal ===== */
.instructor-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.instructor-modal.open { display: flex; }
.instructor-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s var(--ease);
}
.instructor-modal-panel {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    max-width: 920px;
    width: 100%;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    animation: modalUp 0.35s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalUp {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.instructor-modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.2s, transform 0.2s;
}
.instructor-modal-close:hover { background: var(--black); color: var(--ink); transform: rotate(90deg); }
.instructor-modal-close svg { width: 18px; height: 18px; stroke-width: 2; }
.instructor-modal-video {
    aspect-ratio: 16 / 9;
    background: var(--gray-900);
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}
.instructor-modal-video img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
}
.instructor-modal-video .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 78px; height: 78px;
    border-radius: 50%;
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: none;
    transition: transform 0.3s var(--ease), background 0.3s;
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.instructor-modal-video .play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.instructor-modal-video .play-btn svg { width: 26px; height: 26px; stroke: none; fill: var(--black); margin-left: 4px; }
.instructor-modal-video .video-label {
    position: absolute;
    bottom: 1.25rem; left: 1.5rem;
    color: var(--ink);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    opacity: 0.85;
}
.instructor-modal-body {
    padding: 2.5rem;
}
.instructor-modal-name {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}
.instructor-modal-role {
    font-size: 0.8rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}
.instructor-modal-bio {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 2rem;
}
.instructor-modal-section { margin-bottom: 1.75rem; }
.instructor-modal-section h4 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--black);
    margin-bottom: 0.75rem;
}
.instructor-modal-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.instructor-modal-tag {
    padding: 0.4rem 0.85rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--gray-700);
}
.instructor-modal-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.instructor-modal-list li {
    font-size: 0.9rem;
    color: var(--gray-600);
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.5;
}
.instructor-modal-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--gray-400);
}
body.modal-open { overflow: hidden; }

@media (max-width: 768px) {
    .ig-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .instructor-modal { padding: 0; align-items: stretch; }
    .instructor-modal-panel { max-height: 100vh; border-radius: 0; }
    .instructor-modal-video { border-radius: 0; }
    .instructor-modal-body { padding: 1.75rem 1.5rem 2.5rem; }
    .instructor-modal-name { font-size: 1.8rem; }
}

/* ===================================================================
   Instructor Detail Page (instructor.html?id=xxx)
   =================================================================== */
.instructor-hero {
    padding: 9rem 3rem 4rem;
    background: var(--white);
}
.instructor-hero .container {
    max-width: 1200px;
    margin: 0 auto;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--gray-500);
    text-decoration: none;
    margin-bottom: 3rem;
    transition: color 0.25s, transform 0.25s var(--ease);
    letter-spacing: -0.01em;
}
.back-link svg { width: 14px; height: 14px; stroke-width: 2; transition: transform 0.25s var(--ease); }
.back-link:hover { color: var(--black); }
.back-link:hover svg { transform: translateX(-3px); }

.ih-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 4rem;
    align-items: center;
}
.ih-photo {
    border-radius: 16px;
    overflow: hidden;
    background: var(--gray-100);
    aspect-ratio: 4 / 5;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.ih-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ih-info { display: flex; flex-direction: column; }
.ih-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1.25rem;
}
.ih-name {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 0.5rem;
}
.ih-name em { font-style: italic; }
.ih-role {
    font-size: 0.85rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 1.75rem;
    font-weight: 500;
}
.ih-experience {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    margin: -0.9rem 0 1.6rem;
}
.ih-experience svg { width: 14px; height: 14px; flex-shrink: 0; }
.ih-bio {
    font-size: 1.02rem;
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 2.25rem;
}
.ih-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ===================================================================
   DANCE STYLE DETAIL  (/dance-styles/{slug})
   Mirrors the instructor detail page structure.
   =================================================================== */
.dance-style-hero {
    padding: 9rem 3rem 4rem;
    background: var(--white);
}
.dance-style-hero .container,
.ds-facts-section .container,
.ds-body-section .container,
.ds-elements-section .container,
.ds-more-section .container {
    max-width: 1200px;
    margin: 0 auto;
}
.ds-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 4rem;
    align-items: center;
}
.ds-photo {
    border-radius: 16px;
    overflow: hidden;
    background: var(--gray-100);
    aspect-ratio: 4 / 5;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.ds-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ds-info { display: flex; flex-direction: column; align-items: flex-start; }
.ds-eyebrow {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1.25rem;
}
.ds-name {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 0.35rem;
}
.ds-cn {
    font-size: 1rem;
    color: var(--gray-500);
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}
.ds-flag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--black);
    color: var(--white);
    margin-bottom: 1.5rem;
}
.ds-tagline {
    font-size: 1.02rem;
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: 2.25rem;
}
.ds-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* ===== Quick facts ===== */
.ds-facts-section {
    padding: 4rem 3rem;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.ds-facts-section .section-label { margin-bottom: 1.75rem; }
.ds-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}
.ds-fact {
    background: var(--white);
    padding: 1.25rem 1.4rem;
}
.ds-fact dt {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 0.5rem;
}
.ds-fact dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--gray-700);
    line-height: 1.5;
}

/* ===== Style copy ===== */
.ds-body-section {
    padding: 5rem 3rem;
    background: var(--white);
}
.ds-block {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 3rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--gray-100);
}
.ds-block:first-child { border-top: 0; padding-top: 0; }
.ds-block-title {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}
.ds-block-body p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin: 0 0 1.1rem;
}
.ds-block-body p:last-child { margin-bottom: 0; }

/* ===== Key elements ===== */
.ds-elements-section {
    padding: 4rem 3rem;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.ds-elements-section .section-label { margin-bottom: 1.75rem; }
.ds-elements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-elements li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--gray-700);
}
.ds-elements .check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ds-elements .check svg { width: 11px; height: 11px; }

/* ===== Explore other styles ===== */
.ds-more-section {
    padding: 5rem 3rem;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}
.ds-more-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.ds-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 1rem;
}

/* ===== Specialties + Highlights ===== */
.instructor-detail-section {
    padding: 4rem 3rem;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}
.instructor-detail-section .container {
    max-width: 1200px;
    margin: 0 auto;
}
.id-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}
.id-block { display: flex; flex-direction: column; }
.id-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--black);
    margin-bottom: 1.25rem;
}
.id-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.id-tag {
    padding: 0.5rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--gray-700);
    font-weight: 500;
}
.id-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.id-list li {
    font-size: 0.95rem;
    color: var(--gray-600);
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
}
.id-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--gray-400);
}

/* ===== Showreel ===== */
/* Instagram Reels section — shown below the showreel on instructor detail */
.instructor-reels {
    padding: 5rem 3rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}
.instructor-reels .container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.instructor-reels .section-label { margin-bottom: 0.85rem; }
.instructor-reels .section-title { margin-bottom: 2.5rem; }
.reels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: start;
    /* Instagram's /embed page stops reflowing below ~326px, so keep three
       columns wider than that (1060 - 2 gaps) / 3 ≈ 340px. */
    max-width: 1060px;
    margin: 0 auto;
}
.reels-grid > * { min-width: 0; }

/* When both providers are present each row keeps the grid's full width and
   only the column count changes, so the rows line up on their outer edges
   rather than one sitting inset from the other.

   Columns are capped and start-aligned rather than 1fr: a row holding a single
   Instagram card would otherwise stretch it to the full 1060px, which at this
   card's 341:616 ratio makes it nearly 2000px tall. Two columns at 520px plus
   the gap add up to the same 1060px, so that row still spans the full width. */
.reels-grid-cols-2,
.reels-grid-cols-3 { justify-content: start; }
/* A lone card has no neighbours to line up with, so centre it rather than
   leaving it stranded against the left edge. */
.reels-grid-cols-1 {
    grid-template-columns: minmax(0, 380px);
    justify-content: center;
}
.reels-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 520px)); }
.reels-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Enough air that the two provider rows read as separate groups. */
.instructor-reels .reels-grid + .reels-grid { margin-top: 2.75rem; }

/* Collapsed: only the first three embeds, and any provider row that starts
   past that cut, are held back until the toggle is pressed. */
.showreel-collapsed .reel-extra,
.showreel-collapsed .reel-group-extra { display: none; }

.reel-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.7rem 1.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.reel-more:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.reel-more-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--page);
    font-size: 0.65rem;
    letter-spacing: 0;
}
.reel-more-count[hidden] { display: none; }
.reels-grid-1 { grid-template-columns: minmax(320px, 440px); justify-content: center; }
.reels-grid-2 { grid-template-columns: repeat(2, minmax(280px, 380px)); justify-content: center; }
.reel-wrap {
    width: 100%;
    /* Reel aspect ratio (9:16) + small header bar from IG embed.
       Clip anything beyond this so the caption/comments don't show. */
    aspect-ratio: 9 / 17;
    max-height: 640px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.12);
    background: var(--white);
    position: relative;
}
/* Instagram's /embed renders its own chrome around the clip: an account header
   on top, then the media, then the like/comment bar and caption. None of that
   suits a dark editorial page, so show only the media band — push the iframe up
   by the header height and size the frame to the media itself, letting
   .reel-wrap's overflow:hidden swallow everything below.

   The two values below were measured off the rendered embed at a 340px column
   (header 60px, media 415px). The header is a fixed-height avatar row, so it
   stays 60px at any width, while the media scales with the column — hence a
   fixed offset paired with an aspect-ratio. Nudge --reel-chrome-top if a sliver
   of the header ever shows. */
/* Instagram's embed card, shown whole — account header, media, action bar and
   caption. An earlier version cropped to just the media band; this shows what
   Instagram's own embed code produces.

   Height is measured, not guessed: at a 341px column the card renders 592px
   tall, or 616px when it carries a like count. Sized to the taller of the two
   so nothing is clipped, with the card's own white behind it so the ~24px of
   slack on the shorter ones is invisible. */
.reel-wrap--instagram {
    aspect-ratio: 341 / 616;
    max-height: none;
    background: #fff;
}
.reel-wrap--instagram iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* YouTube is landscape, so it can't share the 9:17 reel frame — give it a
   16:9 card of its own and let the iframe fill it. */
.reel-wrap--youtube {
    aspect-ratio: 16 / 9;
    max-height: none;
    background: var(--black);
}
.reel-wrap--youtube iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* A lone YouTube embed shouldn't be squeezed into the narrow single-reel
   column that .reels-grid-1 sets up for a 9:16 clip. */
.reels-grid-1:has(.reel-wrap--youtube) { grid-template-columns: minmax(320px, 720px); }
.reels-grid-2:has(.reel-wrap--youtube) { grid-template-columns: repeat(2, minmax(280px, 460px)); }
@media (max-width: 900px) {
    .reels-grid, .reels-grid-1, .reels-grid-2 {
        grid-template-columns: 1fr;
        max-width: 440px;
    }
}
@media (max-width: 540px) {
    .instructor-reels { padding: 3.5rem 1.5rem; }
}
/* Instagram's embed stops reflowing below ~326px and starts clipping its own
   content horizontally. A 360px phone with the 1.5rem gutters above lands at
   312px, so pull the gutters in just for this section to stay above the floor. */
@media (max-width: 400px) {
    .instructor-reels { padding-left: 0.6rem; padding-right: 0.6rem; }
}

.instructor-showreel {
    padding: 5rem 3rem;
    background: var(--white);
}
.instructor-showreel .container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.instructor-showreel .section-label { margin-bottom: 0.85rem; }
.instructor-showreel .section-title { margin-bottom: 2.75rem; }
.showreel-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--gray-900);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}
.showreel-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}
.showreel-frame .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 88px; height: 88px;
    border-radius: 50%;
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: none;
    transition: transform 0.3s var(--ease);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.showreel-frame .play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.showreel-frame .play-btn svg { width: 28px; height: 28px; stroke: none; fill: var(--black); margin-left: 4px; }
.showreel-frame .video-label {
    position: absolute;
    bottom: 1.5rem; left: 1.75rem;
    color: var(--ink);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    opacity: 0.85;
}

/* ===================================================================
   Homepage Video Showcase (reserved space — drop in real video later)
   =================================================================== */
.home-video-section {
    padding: 6rem 3rem;
    background: var(--white);
}
.home-video-section .container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.home-video-section .section-label { margin-bottom: 0.85rem; }
.home-video-section .section-title { margin-bottom: 1rem; }
.home-video-section .section-desc {
    max-width: 580px;
    margin: 0 auto 2.75rem;
    color: var(--gray-600);
    font-size: 1rem;
    line-height: 1.65;
}
.home-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--gray-900);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}
/* Make any future <video> or <iframe> fill the frame */
.home-video-frame > video,
.home-video-frame > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}



@media (max-width: 768px) {
    .home-video-section { padding: 4rem 1.5rem; }
    .home-video-section .section-desc { margin-bottom: 2rem; font-size: 0.92rem; }
    .home-video-frame { border-radius: 12px; }
}

/* ===== Other Instructors ===== */
.other-instructors {
    padding: 5rem 3rem 6rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}
.other-instructors .container {
    max-width: 1200px;
    margin: 0 auto;
}
.oi-head {
    text-align: center;
    margin-bottom: 3rem;
}
.oi-head .section-label { margin-bottom: 0.85rem; }
.oi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}
.oi-card {
    text-decoration: none;
    color: inherit;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--gray-100);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    display: flex;
    flex-direction: column;
}
.oi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
.oi-photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--gray-100);
}
.oi-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}
.oi-card:hover .oi-photo img { transform: scale(1.04); }
.oi-body {
    padding: 1.1rem 1.25rem 1.4rem;
}
.oi-body h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}
.oi-body p {
    font-size: 0.72rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
}

@media (max-width: 880px) {
    .instructor-hero { padding: 7rem 1.5rem 3rem; }
    .ih-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .ih-photo { max-width: 420px; aspect-ratio: 4 / 5; }
    .instructor-detail-section { padding: 3rem 1.5rem; }
    .id-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .instructor-showreel { padding: 3.5rem 1.5rem; }
    .other-instructors { padding: 3.5rem 1.5rem 4.5rem; }
    .oi-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    .dance-style-hero { padding: 7rem 1.5rem 3rem; }
    .ds-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .ds-photo { max-width: 420px; }
    .ds-facts-section { padding: 3rem 1.5rem; }
    .ds-body-section { padding: 3.5rem 1.5rem; }
    .ds-block { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
    .ds-elements-section { padding: 3rem 1.5rem; }
    .ds-more-section { padding: 3.5rem 1.5rem 4.5rem; }
    .ds-more-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    .ds-more-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 0.75rem; }
}
@media (max-width: 480px) {
    .oi-grid { grid-template-columns: 1fr; }
}

/* ===== Terms & Conditions trigger ===== */
.terms-trigger-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}
.terms-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    background: transparent;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.25s var(--ease);
}
.terms-trigger svg { width: 16px; height: 16px; }
.terms-trigger:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--ink);
    transform: translateY(-1px);
}

/* ===== Terms & Conditions modal ===== */
.terms-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.terms-modal.open { display: flex; }
.terms-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s var(--ease);
}
.terms-modal-panel {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    animation: modalUp 0.35s var(--ease);
}
.terms-modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.2s, transform 0.2s;
}
.terms-modal-close:hover { background: var(--black); color: var(--ink); transform: rotate(90deg); }
.terms-modal-close svg { width: 18px; height: 18px; stroke-width: 2; }
.terms-modal-head {
    padding: 2.75rem 2.75rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
}
.terms-modal-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gray-500);
    margin-bottom: 0.6rem;
}
.terms-modal-title {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.terms-modal-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--gray-600);
}
.terms-modal-body {
    padding: 2rem 2.75rem 2.75rem;
}
.terms-section {
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--gray-100);
}
.terms-section:last-of-type { border-bottom: none; }
.terms-section h4 {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--black);
    margin-bottom: 0.85rem;
}
.terms-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.terms-section li {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--gray-600);
    padding-left: 1.4rem;
    position: relative;
}
.terms-section li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gray-300);
}
.terms-fine-print {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-100);
    font-size: 0.78rem;
    font-style: italic;
    color: var(--gray-500);
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 768px) {
    .terms-modal { padding: 0; align-items: stretch; }
    .terms-modal-panel { max-height: 100vh; border-radius: 0; }
    .terms-modal-head { padding: 2rem 1.5rem 1.25rem; }
    .terms-modal-title { font-size: 1.5rem; }
    .terms-modal-body { padding: 1.5rem 1.5rem 2rem; }
}

/* ===================================================================
   REGISTER PAGE
   =================================================================== */
.register-section { padding: 3rem 0 6rem; background: var(--gray-50); }
.register-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 18px;
    box-shadow: 0 6px 32px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* Progress */
.reg-progress {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1.75rem 2.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}
.rp-step { text-align: center; }
.rp-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--gray-400);
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;
    transition: all 0.3s var(--ease);
}
.rp-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-400);
    margin-top: 0.4rem;
    transition: color 0.3s var(--ease);
}
.rp-line {
    height: 2px;
    background: var(--gray-200);
    border-radius: 1px;
    margin-top: -1.4rem;
    position: relative;
    overflow: hidden;
}
.rp-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--black);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.rp-line.filled::after { transform: scaleX(1); }
.rp-step.active .rp-num { background: var(--black); color: var(--ink); border-color: var(--black); }
.rp-step.active .rp-label { color: var(--black); }
.rp-step.done .rp-num {
    background: var(--black); color: transparent; border-color: var(--black);
}
.rp-step.done .rp-num::before {
    content: "✓";
    color: var(--ink);
    font-size: 1rem;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Form steps */
.reg-form { padding: 2.5rem; }
.reg-step { display: none; animation: regStepIn 0.4s var(--ease); }
.reg-step.active { display: block; }
@keyframes regStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.reg-step-head { margin-bottom: 1.75rem; }
.reg-step-head h2 {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}
.reg-step-head p {
    font-size: 0.92rem;
    color: var(--gray-500);
    line-height: 1.6;
}
.reg-form .form-row { margin-bottom: 1rem; }
.reg-form .form-field { margin-bottom: 1rem; }
.reg-form .form-field:last-child { margin-bottom: 0; }
.reg-form .form-field textarea { min-height: 90px; }

/* Radio pills */
.radio-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.radio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.radio-pill {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill span {
    display: block;
    padding: 0.7rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--white);
    font-size: 0.85rem;
    color: var(--gray-700);
    text-align: center;
    transition: all 0.18s var(--ease);
}
.radio-pill:hover span { border-color: var(--gray-400); }
.radio-pill input:checked + span {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}
.radio-pill input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }

/* Field error state */
.reg-form .form-field.error label { color: #C03B30; }
.reg-form .form-field.error input,
.reg-form .form-field.error select,
.reg-form .form-field.error textarea { border-color: #C03B30; }
.reg-form .form-field.error .radio-pill span { border-color: #C03B30; }
.field-error-msg {
    font-size: 0.75rem;
    color: #C03B30;
    margin-top: 0.3rem;
}

/* Agree row */
.agree-block {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
}
.agree-row {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--gray-700);
    line-height: 1.55;
}
.agree-row input {
    margin-top: 0.2rem;
    width: 16px; height: 16px;
    accent-color: var(--black);
    cursor: pointer;
    flex-shrink: 0;
}
.agree-row.error span { color: #C03B30; }
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--black);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-btn:hover { opacity: 0.7; }

/* Step actions row */
.reg-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-100);
    gap: 1rem;
}
.reg-actions .btn { margin-top: 0; align-self: auto; }
.reg-actions .btn-outline {
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
}
.reg-actions .btn-outline:hover { background: var(--gray-50); border-color: var(--gray-400); }

/* Payment summary */
.payment-summary {
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.75rem;
}
.ps-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.ps-label {
    font-size: 0.95rem;
    color: var(--gray-700);
    font-weight: 500;
}
.ps-amount {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--black);
}
.ps-included {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.6rem;
}
.ps-included svg { width: 16px; height: 16px; color: var(--black); }
.ps-divider {
    height: 1px;
    background: var(--gray-100);
    margin: 1.1rem 0;
}
.ps-total .ps-label { font-weight: 600; color: var(--black); }
.ps-total .ps-amount { font-size: 1.6rem; font-weight: 500; }

/* Payment methods */
.payment-methods { margin-bottom: 1rem; }
.pm-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    margin-bottom: 0.7rem;
}
.pm-card {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    margin-bottom: 0.6rem;
    background: var(--white);
}
.pm-card-disabled { opacity: 0.55; background: var(--gray-50); }
.pm-card-active { border: 2px solid var(--black); padding: calc(1rem - 1px) calc(1.25rem - 1px); }
.pm-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--gray-50);
    display: flex; align-items: center; justify-content: center;
    color: var(--black);
}
.pm-card-active .pm-icon { background: var(--black); color: var(--ink); }
.pm-card-active .pm-icon svg { width: 22px; height: 22px; }
.pm-icon svg { width: 20px; height: 20px; }
.pm-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.15rem;
}
.pm-sub {
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.45;
}
.pm-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.3rem 0.65rem;
    background: var(--gray-200);
    color: var(--gray-600);
    border-radius: 999px;
    font-weight: 600;
}
.pm-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.3rem 0.65rem;
    background: var(--black);
    color: var(--ink);
    border-radius: 999px;
    font-weight: 600;
}

/* Success step */
.reg-success { text-align: center; padding: 1.5rem 0 0.5rem; }
.reg-success .success-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--black);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    animation: successPop 0.5s var(--ease);
}
@keyframes successPop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}
.reg-success .success-icon svg { width: 32px; height: 32px; }
.reg-success h2 {
    font-family: var(--serif);
    font-size: 2.2rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.reg-success h2 span { font-style: italic; color: var(--gray-600); }
.success-text {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 2rem;
}
.next-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    text-align: left;
}
.next-step-card {
    padding: 1.5rem;
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    background: var(--white);
    text-decoration: none;
    color: inherit;
    transition: all 0.25s var(--ease);
}
.next-step-card:hover {
    border-color: var(--black);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.ns-eyebrow {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-400);
    font-weight: 600;
    margin-bottom: 0.45rem;
}
.next-step-card h4 {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.5rem;
}
.next-step-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin-bottom: 0.85rem;
}
.ns-link {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--black);
}

/* Help footer */
.reg-help {
    max-width: 760px;
    margin: 1.75rem auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.reg-help-item {
    padding: 1.1rem 1.4rem;
    background: transparent;
    border-radius: 10px;
}
.reg-help-item h5 {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--black);
    margin-bottom: 0.35rem;
}
.reg-help-item p {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.55;
}
.reg-help-item a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 768px) {
    .register-section { padding: 1.5rem 0 4rem; }
    .register-card { border-radius: 14px; }
    .reg-progress { padding: 1.25rem 1rem; gap: 0.4rem; }
    .rp-num { width: 32px; height: 32px; font-size: 0.8rem; }
    .rp-label { font-size: 0.6rem; }
    .reg-form { padding: 1.5rem; }
    .reg-form .form-row { grid-template-columns: 1fr; gap: 0; }
    .reg-step-head h2 { font-size: 1.4rem; }
    .radio-grid { grid-template-columns: 1fr 1fr; }
    .reg-actions { flex-direction: column-reverse; align-items: stretch; }
    .reg-actions .btn { justify-content: center; }
    .reg-actions span { display: none; }
    .pm-card { grid-template-columns: 36px 1fr; }
    .pm-card .pm-badge, .pm-card .pm-tag { grid-column: 2; justify-self: start; margin-top: 0.4rem; }
    .next-steps { grid-template-columns: 1fr; }
    .reg-help { grid-template-columns: 1fr; gap: 0.5rem; padding: 0 1rem; }
    .reg-success h2 { font-size: 1.6rem; }
}

/* ===================================================================
   Nav account icon (login / signed-in indicator)
   =================================================================== */
.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: transparent;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.25s var(--ease);
    cursor: pointer;
}
.nav-account svg { width: 16px; height: 16px; }
.nav-account:hover {
    border-color: var(--black);
    background: var(--black);
    color: var(--ink);
}
.nav-account.logged-in {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}
.nav-account.logged-in:hover { opacity: 0.85; }
.nav-account-label { white-space: nowrap; }

.mm-account {
    display: block;
    padding-top: 0.25rem;
    border-top: 1px solid var(--gray-100);
    margin-top: 0.5rem;
}

/* ===================================================================
   Login modal
   =================================================================== */
.login-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.login-modal.open { display: flex; }
.login-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s var(--ease);
}
.login-modal-panel {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    max-width: 460px;
    width: 100%;
    padding: 2.5rem;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    animation: modalUp 0.35s var(--ease);
}
.login-modal-close {
    position: absolute;
    top: 0.85rem; right: 0.85rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.login-modal-close:hover { background: var(--black); color: var(--ink); transform: rotate(90deg); }
.login-modal-close svg { width: 16px; height: 16px; }

.login-state[hidden] { display: none; }

.lm-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gray-500);
    margin-bottom: 0.85rem;
}
.lm-title {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.6rem;
}
.lm-title em { font-style: italic; }
.lm-sub {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin-bottom: 1.5rem;
}
#login-form .form-field { margin-bottom: 1rem; }
.lm-submit {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}
.lm-foot {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-600);
}
.lm-foot a {
    color: var(--black);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Not-found state */
.login-state[data-state="not-found"] {
    text-align: center;
}
.lnf-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--gray-50);
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-700);
}
.lnf-icon svg { width: 30px; height: 30px; }
.login-state[data-state="not-found"] h3 {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}
.login-state[data-state="not-found"] p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.login-state[data-state="not-found"] .btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.85rem;
}
.btn-text {
    background: none;
    border: none;
    color: var(--gray-500);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}
.btn-text:hover { color: var(--black); }

@media (max-width: 540px) {
    .login-modal-panel { padding: 2rem 1.5rem; }
    .nav-account-label { display: none; }
    .nav-account { padding: 0.5rem; }
}

/* ===================================================================
   Booking modal (schedule page — login-required → confirm → success)
   =================================================================== */
.booking-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.booking-modal.open { display: flex; }
.booking-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s var(--ease);
}
.booking-modal-panel {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    padding: 2.5rem;
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
    animation: modalUp 0.35s var(--ease);
    max-height: 90vh;
    overflow-y: auto;
}
.booking-modal-close {
    position: absolute;
    top: 0.85rem; right: 0.85rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    z-index: 2;
}
.booking-modal-close:hover { background: var(--black); color: var(--ink); transform: rotate(90deg); }
.booking-modal-close svg { width: 16px; height: 16px; }

.booking-state[hidden] { display: none; }

.bm-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gray-500);
    margin-bottom: 0.85rem;
}
.bm-title {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.6rem;
}
.bm-title em { font-style: italic; }
.bm-sub {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin-bottom: 1.5rem;
}
.bm-foot {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-600);
}
.bm-foot a {
    color: var(--black);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Class preview on login-required state */
.bm-preview {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.4rem;
}
.bm-preview-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gray-500);
}
.bm-preview-class {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--black);
    margin-top: 0.35rem;
    letter-spacing: -0.01em;
}
.bm-preview-meta {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}

.bm-block-btn { width: 100%; justify-content: center; }

/* Detail card shared by confirm + success */
.bm-detail-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.bm-detail-card-success {
    background: var(--black);
    border-color: var(--black);
    color: var(--ink);
}
.bm-detail-card-success .bm-row-label { color: rgba(255,255,255,0.55); }
.bm-detail-card-success .bm-row-value { color: var(--ink); }
.bm-detail-card-success .bm-row-divider { background: rgba(255,255,255,0.15); }

.bm-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.45rem 0;
}
.bm-row-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-500);
    font-weight: 500;
    white-space: nowrap;
}
.bm-row-value {
    font-size: 0.95rem;
    color: var(--black);
    font-weight: 500;
    text-align: right;
}
.bm-row-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.5rem 0;
}

.bm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}
.bm-actions .btn { flex: 1 1 auto; justify-content: center; }

/* Success icon */
.bm-success-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--black);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    animation: successPop 0.4s var(--ease);
}
.bm-success-icon svg { width: 30px; height: 30px; }
.booking-state[data-bstate="success"] { text-align: center; }
.booking-state[data-bstate="success"] .bm-detail-card { text-align: left; }

@keyframes successPop {
    0%   { transform: scale(0.6); opacity: 0; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 540px) {
    .booking-modal-panel { padding: 2rem 1.5rem; }
    .bm-actions { flex-direction: column-reverse; }
    .bm-actions .btn { width: 100%; }
}

/* ===================================================================
   Purchase modal — package order summary + success
   =================================================================== */
.booking-state[data-pstate="success"] { text-align: center; }
.booking-state[data-pstate="success"] .bm-detail-card { text-align: left; }

.pm-detail-card { padding: 1.35rem 1.4rem; }
.pm-sum-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 0.8rem;
}
.pm-sum-tier {
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--black);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.pm-sum-validity {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
    letter-spacing: 0.02em;
}
.pm-sum-price {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--black);
    line-height: 1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}
.pm-sum-price sup {
    font-size: 0.72rem;
    font-family: var(--sans);
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    top: -0.6em;
}
.pm-sum-features {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.5rem;
    display: grid;
    gap: 0.35rem;
}
.pm-sum-features li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 0.82rem;
    color: var(--gray-700, var(--gray-600));
    line-height: 1.45;
}
.pm-sum-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--black);
}
.bm-row.bm-row-total {
    padding-top: 0.7rem;
    border-top: 1px solid var(--gray-200);
    margin-top: 0.35rem;
}
.bm-row.bm-row-total .bm-row-label {
    color: var(--black);
    font-weight: 600;
}
.bm-row.bm-row-total .bm-row-value {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
}
.pm-success-next {
    text-align: center;
    font-size: 0.82rem;
    color: var(--gray-500);
    margin: -0.25rem 0 1rem;
    letter-spacing: 0.02em;
    font-style: italic;
}

/* ===================================================================
   No-package state — choose single class or view packages
   =================================================================== */
.np-options {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.np-option {
    display: block;
    text-align: left;
    width: 100%;
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.np-option:hover {
    border-color: var(--black);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.np-option-primary {
    background: var(--black);
    border-color: var(--black);
    color: var(--ink);
}
.np-option-primary:hover {
    background: var(--black);
    border-color: var(--black);
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}
.np-option-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.4rem;
}
.np-option-tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--gray-500);
}
.np-option-primary .np-option-tag { color: rgba(255,255,255,0.65); }
.np-option-price {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--black);
    letter-spacing: -0.01em;
}
.np-option-primary .np-option-price { color: var(--ink); }
.np-option-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--gray-600);
    margin-bottom: 0.65rem;
}
.np-option-primary .np-option-desc { color: rgba(255,255,255,0.78); }
.np-option-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--black);
}
.np-option-cta svg { width: 14px; height: 14px; }
.np-option-primary .np-option-cta { color: var(--ink); }

@media (max-width: 540px) {
    .pm-sum-head { flex-direction: column; gap: 0.5rem; }
    .pm-sum-price { font-size: 1.7rem; }
}

/* ===================================================================
   Register page benefits banner
   =================================================================== */
.reg-benefits {
    padding: 0 3rem 3rem;
    background: var(--white);
}
.reg-benefits .container {
    max-width: 1100px;
    margin: 0 auto;
}
.rb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    padding: 2rem;
    background: var(--gray-50);
    border-radius: 16px;
    border: 1px solid var(--gray-100);
}
.rb-item { text-align: left; }
.rb-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    color: var(--black);
    margin-bottom: 0.85rem;
    border: 1px solid var(--gray-100);
}
.rb-icon svg { width: 22px; height: 22px; }
.rb-item h4 {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}
.rb-item p {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
}

@media (max-width: 880px) {
    .reg-benefits { padding: 0 1.5rem 2.5rem; }
    .rb-grid { grid-template-columns: 1fr 1fr; padding: 1.5rem; gap: 1rem; }
}
@media (max-width: 480px) {
    .rb-grid { grid-template-columns: 1fr; }
}

.success-actions {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 2.25rem;
}
.success-actions .btn { padding: 1rem 2rem; }

/* Two-step status list on register success */
.success-next-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 580px;
    margin: 0 auto 1.5rem;
    text-align: left;
}
.success-next-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
}
.success-next-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--black);
    flex-shrink: 0;
}
.success-next-done .success-next-num {
    background: var(--black);
    border-color: var(--black);
    color: var(--ink);
}
.success-next-num svg { width: 14px; height: 14px; }
.success-next-body { flex: 1; min-width: 0; }
.success-next-title {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.15rem;
}
.success-next-desc {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
}
.success-next-tag {
    flex-shrink: 0;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: #fef3c7;
    color: #92400e;
}
.success-next-tag-done {
    background: #d1fae5;
    color: #065f46;
}
@media (max-width: 540px) {
    .success-next-item { padding: 0.85rem 1rem; gap: 0.75rem; }
    .success-next-tag { display: none; }
}

/* ===================================================================
   Account dashboard (account.html)
   =================================================================== */
.account-cta-section {
    padding: 4rem 3rem 6rem;
    background: var(--white);
}
.acc-locked {
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

.account-hero {
    padding: 8rem 3rem 3rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
}
.account-hero .container {
    max-width: 1200px;
    margin: 0 auto;
}
.ah-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.ah-avatar {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--black);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.ah-info { flex: 1; min-width: 0; }
.ah-eyebrow {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gray-500);
    margin-bottom: 0.4rem;
}
.ah-name {
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 0.4rem;
}
.ah-name em { font-style: italic; }
.ah-id {
    font-size: 0.82rem;
    color: var(--gray-500);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.ah-id-sep { color: var(--gray-300); }
.ah-logout {
    flex-shrink: 0;
    padding: 0.65rem 1.25rem;
    font-size: 0.82rem;
}

/* Level chip next to member id */
.level-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--black);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.level-chip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #9be7b5;
    box-shadow: 0 0 0 3px rgba(155, 231, 181, 0.22);
}

/* Level progression card in hero */
.ah-level {
    margin-top: 2rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: var(--gray-50);
}
.ah-level-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.9rem;
}
.ah-level-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gray-500);
    margin-bottom: 0.3rem;
}
.ah-level-tier {
    font-family: var(--serif);
    font-size: 1.65rem;
    color: var(--black);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.ah-level-counts { text-align: right; }
.ah-level-attended {
    font-family: var(--serif);
    font-size: 1.65rem;
    color: var(--black);
    line-height: 1;
    letter-spacing: -0.01em;
}
.ah-level-attended span {
    font-size: 0.95rem;
    color: var(--gray-500);
    margin-left: 0.15rem;
    font-family: var(--sans);
    font-weight: 500;
}
.ah-level-attended-sub {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-500);
    margin-top: 0.35rem;
}
.ah-level-bar {
    position: relative;
    height: 6px;
    background: var(--gray-200);
    border-radius: 999px;
    overflow: hidden;
}
.ah-level-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--black);
    border-radius: 999px;
    transition: width 0.4s var(--ease);
}
.ah-level-note {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 0.75rem;
    line-height: 1.5;
}
.ah-level-note strong { color: var(--black); font-weight: 600; }

/* Horizontal tier ladder */
.ah-level-ladder {
    margin-top: 1.1rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}
.ah-level-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}
.ah-level-step-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gray-200);
    border: 2px solid var(--gray-200);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.ah-level-step.reached .ah-level-step-dot {
    background: var(--black);
    border-color: var(--black);
}
.ah-level-step.current .ah-level-step-dot {
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(12, 12, 12, 0.1);
}
.ah-level-step-name {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
}
.ah-level-step.reached .ah-level-step-name { color: var(--gray-600); }
.ah-level-step.current .ah-level-step-name { color: var(--black); }

@media (max-width: 640px) {
    .ah-level { padding: 1.2rem; }
    .ah-level-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .ah-level-counts { text-align: left; }
    .ah-level-tier, .ah-level-attended { font-size: 1.35rem; }
    .ah-level-ladder { grid-template-columns: repeat(4, 1fr); row-gap: 0.85rem; }
}

.account-stats {
    padding: 2.5rem 3rem;
    background: var(--gray-50);
}
.account-stats .container {
    max-width: 1200px;
    margin: 0 auto;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.stats-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
.stat-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.4rem;
}
.stat-label {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-500);
    margin-bottom: 0.6rem;
}
.stat-value {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--black);
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}
.stat-sub {
    font-size: 0.78rem;
    color: var(--gray-500);
}

.account-section {
    padding: 3rem 3rem;
    background: var(--white);
}
.account-section + .account-section {
    padding-top: 0;
}
.account-section .container {
    max-width: 1200px;
    margin: 0 auto;
}
.acc-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.acc-section-head h2 {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.01em;
}
.link-arrow {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

.acc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* ---- Payment result: totals sit under the full-width items table ---- */
.pr-totals {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    margin-top: 1.75rem;
}
.pr-totals-note {
    margin: 0 auto 0 0;      /* push the note left; totals stay right */
    max-width: 440px;
}
.pr-totals-card {
    width: 100%;
    max-width: 380px;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* ---- Payment result: what's-next closing card ---- */
.pr-next-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.2rem;
}
.pr-next-title {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.pr-next-text {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin: 0;
    max-width: 540px;
}
.pr-next-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .pr-totals { flex-direction: column; align-items: stretch; gap: 1rem; }
    .pr-totals-note { margin: 0; max-width: none; }
    .pr-totals-card { max-width: none; }
    .pr-next-actions { width: 100%; }
    .pr-next-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Package cards */
.pkg-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}
.pkg-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
}
.pkg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.pkg-name {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}
.pkg-purchased {
    font-size: 0.75rem;
    color: var(--gray-500);
}
.pkg-counts { text-align: right; flex-shrink: 0; }
.pkg-remaining {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--black);
}
.pkg-of {
    font-size: 0.72rem;
    color: var(--gray-500);
    display: block;
    margin-top: 0.1rem;
}
.pkg-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--gray-100);
    overflow: hidden;
    margin-bottom: 0.85rem;
}
.pkg-bar-fill {
    height: 100%;
    background: var(--black);
    border-radius: 999px;
    transition: width 0.4s var(--ease);
}
.pkg-expiry {
    font-size: 0.78rem;
    color: var(--gray-500);
}
.pkg-expiry-warn { color: #C0392B; font-weight: 500; }

/* Class rows */
.cls-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.cls-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
}
.cls-date {
    width: 52px;
    flex-shrink: 0;
    text-align: center;
    padding: 0.35rem 0;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
}
.cls-date-past { background: var(--gray-100); }
.cls-day {
    display: block;
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--black);
    line-height: 1;
}
.cls-mo {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    margin-top: 0.25rem;
}
.cls-info { flex: 1; min-width: 0; }
.cls-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.2rem;
}
.cls-meta {
    font-size: 0.78rem;
    color: var(--gray-500);
}
.cls-status {
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cls-status-upcoming { background: var(--black); color: var(--ink); }
.cls-status-done { background: var(--white); color: var(--gray-500); border: 1px solid var(--gray-200); }

/* Actions column (status pill + cancel action stacked) */
.cls-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}
.cls-cancel-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
    text-decoration: underline;
    text-underline-offset: 3px;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}
.cls-cancel-btn:hover { color: #b91c1c; }
.cls-cancel-lock {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-400);
    letter-spacing: 0.04em;
    font-style: italic;
    cursor: help;
}

/* Shared danger button (used in cancel confirm) */
.btn-danger {
    background: #b91c1c;
    color: var(--ink);
    border: 1px solid #b91c1c;
}
.btn-danger:hover {
    background: #991b1b;
    border-color: #991b1b;
    color: var(--ink);
}

@media (max-width: 540px) {
    .cls-actions { flex-direction: row; align-items: center; gap: 0.75rem; }
}

/* ===================================================================
   Instructor dashboard
   =================================================================== */
.level-chip-ins { background: #1e40af; }
.level-chip-ins .level-chip-dot { background: #93c5fd; box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.22); }
.level-chip-adm { background: #7c2d12; }
.level-chip-adm .level-chip-dot { background: #fdba74; box-shadow: 0 0 0 3px rgba(253, 186, 116, 0.22); }

/* Admin section hints */
.adm-hint {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
}

/* Admin data tables */
.adm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    background: var(--white);
}
.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.adm-table thead th {
    text-align: left;
    padding: 0.85rem 1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-600);
    white-space: nowrap;
}
.adm-table tbody td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
    color: var(--black);
}
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: var(--gray-50); }
.adm-name-cell { min-width: 160px; }
.adm-name { display: block; font-weight: 500; color: var(--black); }
.adm-sub {
    font-size: 0.7rem;
    color: var(--gray-500);
    letter-spacing: 0.02em;
}
.adm-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--gray-700, var(--gray-600));
}

/* Override cancel button (admin gets a stronger red pill) */
.adm-cancel-btn {
    border-color: #b91c1c !important;
    color: #b91c1c !important;
    background: #fff !important;
}
.adm-cancel-btn:hover {
    background: #b91c1c !important;
    color: var(--ink) !important;
}

.adm-class-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

@media (max-width: 680px) {
    .adm-table thead { display: none; }
    .adm-table tbody td {
        display: block;
        padding: 0.45rem 1rem;
        border-bottom: 0;
    }
    .adm-table tbody tr {
        display: block;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--gray-100);
    }
    .adm-table tbody tr:last-child { border-bottom: 0; }
}

/* ===================================================================
   Admin tabbed dashboard
   =================================================================== */
.adm-tabbar {
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 70px;
    z-index: 20;
    box-shadow: 0 1px 0 0 var(--gray-100);
    padding: 0; /* override global `section { padding: 7rem 3rem }` */
}
.adm-tabbar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}
.adm-tabs {
    display: flex;
    gap: 0.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
}
.adm-tabs::-webkit-scrollbar { display: none; }

/* Underlined-tab style — clearer affordance than floating pills */
.adm-tab {
    background: none;
    border: 0;
    color: var(--gray-500);
    padding: 0.95rem 1.1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* overlap the tabbar border-bottom */
}
.adm-tab:hover {
    color: var(--black);
    background: var(--gray-50);
}
.adm-tab.active {
    color: var(--black);
    font-weight: 600;
    border-bottom-color: var(--black);
}
.adm-tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(12, 12, 12, 0.12);
    border-radius: 4px;
}

.adm-tab-content {
    padding: 2rem 3rem 3rem;
    background: var(--gray-50);
    min-height: 70vh;
}
.adm-tab-content .container { max-width: 1200px; margin: 0 auto; }

.adm-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.adm-panel-head h3 {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}
.adm-action-btn {
    padding: 0.55rem 1.1rem;
    font-size: 0.82rem;
}

/* Chips used in staff table */
.adm-chip {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.adm-chip-instructor { background: #dbeafe; color: #1e40af; }
.adm-chip-admin { background: #fed7aa; color: #9a3412; }
.adm-chip-group { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }

/* Multi-role checkboxes */
.role-checks {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.role-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--black);
    transition: border-color 0.2s, background 0.2s;
    font-weight: 500;
}
.role-check input { cursor: pointer; accent-color: var(--black); }
.role-check:hover { border-color: var(--black); }
.role-check:has(input:checked) {
    border-color: var(--black);
    background: var(--gray-50);
}

/* Hero actions wrapper (used by logout + view switcher) */
.ah-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.ah-switch-view {
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
}
.adm-tag {
    display: inline-block;
    font-size: 0.62rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--gray-200);
    color: var(--gray-700, var(--gray-600));
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.adm-row-edit {
    background: none;
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.adm-row-edit:hover {
    border-color: var(--black);
    background: var(--black);
    color: var(--ink);
}

/* Sales cards */
.adm-sales-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.adm-sales-summary {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.adm-sales-card-hero { padding: 1.5rem 1.6rem; }
.adm-chart-wrap {
    padding: 1.25rem 1.4rem;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
}
.adm-chart { width: 100%; height: auto; margin-top: 0.5rem; display: block; }
.adm-sales-filter {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.adm-filter-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
}
.adm-filter-label[hidden] { display: none; }
.adm-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--white);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--black);
    min-width: 140px;
    cursor: pointer;
}
.adm-sales-actions { display: flex; gap: 0.5rem; }

/* Students tab — search bar */
.adm-search-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    margin-bottom: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.adm-search-bar:focus-within {
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(12, 12, 12, 0.08);
}
.adm-search-icon {
    width: 16px;
    height: 16px;
    color: var(--gray-500);
    flex-shrink: 0;
}
.adm-search-input {
    flex: 1;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--black);
    background: none;
    padding: 0.25rem 0;
    min-width: 0;
}
.adm-search-input::placeholder { color: var(--gray-400); }
.adm-search-hint {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gray-500);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
@media (max-width: 780px) {
    .adm-sales-summary { grid-template-columns: 1fr; }
    .adm-chart { height: 240px; }
}
.adm-sales-card {
    padding: 1.5rem;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
}
.adm-sales-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}
.adm-sales-value {
    font-family: var(--serif);
    font-size: 2.2rem;
    color: var(--black);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}
.adm-table-mini {
    margin-top: 1rem;
    font-size: 0.78rem;
}
.adm-table-mini thead th,
.adm-table-mini tbody td {
    padding: 0.4rem 0.6rem;
}

/* Admin modal panel (wider) */
.adm-modal-panel {
    max-width: 620px;
}

/* Student edit modal — package list */
.ase-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-500);
    margin: 1.2rem 0 0.5rem;
}
.ase-pkg-list {
    margin-bottom: 0.5rem;
}
.ase-pkg-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    margin-bottom: 0.5rem;
}
.ase-pkg-info { flex: 1; min-width: 0; }
.ase-pkg-name {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.15rem;
}
.ase-pkg-credits { flex-shrink: 0; }
.ase-credit-input {
    width: 60px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
}
.ase-pkg-remove {
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 0.4rem;
    transition: color 0.2s;
}
.ase-pkg-remove:hover { color: #b91c1c; }

/* Danger row edit variant */
.adm-row-danger {
    border-color: #fecaca !important;
    color: #b91c1c !important;
}
.adm-row-danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
    color: var(--ink) !important;
}

/* Schedule grid — 7 day cards */
.adm-schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.adm-day-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
}
.adm-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}
.adm-day-head h4 {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--black);
    font-weight: 500;
}
.adm-day-body { padding: 0.6rem 0.8rem 0.8rem; }
.adm-day-row {
    display: flex;
    gap: 0.8rem;
    padding: 0.5rem 0.4rem;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
}
.adm-day-row:last-child { border-bottom: 0; }
.adm-day-time {
    flex-shrink: 0;
    width: 62px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--black);
    letter-spacing: 0.02em;
}
.adm-day-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.15rem;
}

/* Schedule edit modal rows */
.adm-modal-wide { max-width: 820px; }
.asm-list {
    max-height: 420px;
    overflow-y: auto;
    padding: 0.1rem;
    margin-bottom: 0.5rem;
}
.asm-row {
    display: grid;
    grid-template-columns: 110px 1fr 1fr 130px 32px;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.asm-row input, .asm-row select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
}
.asm-remove {
    background: none;
    border: 1px solid var(--gray-200);
    color: var(--gray-500);
    border-radius: 50%;
    width: 28px; height: 28px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.asm-remove:hover {
    border-color: #b91c1c;
    color: #b91c1c;
}

/* Notifications */
.notif-badge {
    display: inline-block;
    background: #b91c1c;
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    vertical-align: middle;
    letter-spacing: 0.04em;
}
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.notif-row:hover { border-color: var(--gray-300); }
.notif-row.notif-unread {
    background: #fff7ed;
    border-color: #fed7aa;
}
.notif-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gray-300);
    margin-top: 0.45rem;
    flex-shrink: 0;
}
.notif-row.notif-unread .notif-dot { background: #ea580c; }
.notif-body { flex: 1; min-width: 0; }
.notif-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.2rem;
}
.notif-text {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
}
.notif-time {
    font-size: 0.72rem;
    color: var(--gray-500);
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

button.link-arrow {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 680px) {
    .asm-row {
        grid-template-columns: 1fr 1fr;
    }
    .asm-row .asm-remove {
        grid-column: 2;
        justify-self: end;
    }
}

@media (max-width: 780px) {
    .adm-sales-grid { grid-template-columns: 1fr; }
    .adm-tabbar .container { padding: 0 1.5rem; }
    .adm-tab { padding: 0.85rem 0.85rem; font-size: 0.8rem; }
    .adm-tab-content { padding: 1.5rem; }
}

/* Stats period tabs */
.stats-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.stats-tab {
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.stats-tab:hover { border-color: var(--black); color: var(--black); }
.stats-tab.active {
    background: var(--black);
    border-color: var(--black);
    color: var(--ink);
}

/* Class list rows (expandable) */
.ins-class-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* "View more" pagination button — sits at the bottom of a class list */
.ins-view-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}
.ins-view-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.2rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--gray-700, var(--gray-600));
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ins-view-more-btn:hover {
    background: var(--black);
    color: var(--ink);
    border-color: var(--black);
}
.ins-view-more-btn svg { width: 14px; height: 14px; }
.ins-view-more-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.ins-view-more-btn:hover .ins-view-more-count {
    background: rgba(255, 255, 255, 0.18);
    color: var(--ink);
}
.ins-class {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}
.ins-class[open] { border-color: var(--gray-300); background: var(--white); }
.ins-class-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    list-style: none;
}
.ins-class-head::-webkit-details-marker { display: none; }
.ins-class-date {
    width: 52px;
    flex-shrink: 0;
    text-align: center;
    padding: 0.35rem 0;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
}
.ins-class[open] .ins-class-date { background: var(--gray-50); }
.ins-class-body { flex: 1; min-width: 0; }
.ins-class-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.15rem;
}
.ins-class-meta {
    font-size: 0.78rem;
    color: var(--gray-500);
}
.ins-class-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}
.ins-class-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--gray-600);
}
.ins-class-count svg { width: 14px; height: 14px; }
.ins-class-count strong {
    color: var(--black);
    font-weight: 600;
}
.ins-cancel-btn {
    background: none;
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ins-cancel-btn:hover {
    border-color: #b91c1c;
    background: #b91c1c;
    color: var(--ink);
}
.ins-cancel-lock {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-400);
    letter-spacing: 0.04em;
    font-style: italic;
    cursor: help;
    padding: 0.4rem 0.65rem;
    border: 1px dashed var(--gray-200);
    border-radius: 999px;
}
.ins-class-toggle {
    color: var(--gray-400);
    transition: transform 0.25s;
    display: flex;
}
.ins-class-toggle svg { width: 16px; height: 16px; }
.ins-class[open] .ins-class-toggle { transform: rotate(180deg); color: var(--black); }

/* Expanded roster panel */
.ins-class-roster {
    padding: 0.2rem 1.1rem 1.1rem 5.1rem;
    border-top: 1px solid var(--gray-100);
    margin-top: -0.2rem;
}
.roster-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gray-500);
    margin: 0.7rem 0 0.5rem;
}
.roster-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.roster-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    font-size: 0.82rem;
}
.ins-class[open] .roster-row { background: var(--white); border-color: var(--gray-100); }
.roster-name { color: var(--black); font-weight: 500; }
.roster-meta {
    color: var(--gray-500);
    font-size: 0.75rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roster-level {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--black);
    color: var(--ink);
}
.roster-empty {
    font-size: 0.82rem;
    color: var(--gray-500);
    font-style: italic;
}

.ins-class-past .ins-class-head { cursor: pointer; }

@media (max-width: 680px) {
    .ins-class-actions { gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
    .ins-cancel-btn, .ins-cancel-lock { font-size: 0.7rem; padding: 0.35rem 0.7rem; }
    .ins-class-roster { padding-left: 1.1rem; }
    .roster-row { flex-wrap: wrap; }
    .roster-meta { flex-basis: 100%; }
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px dashed var(--gray-200);
}
.empty-state p {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 1rem;
}
.empty-state-sm { padding: 1.5rem 1rem; }
.empty-state-sm p { margin-bottom: 0.4rem; }

/* Profile */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
}
.profile-row {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.profile-row:nth-last-child(-n+2) { border-bottom: none; }
.profile-row:nth-last-child(2) { border-bottom: 1px solid var(--gray-100); }
.pr-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    font-weight: 500;
    flex-shrink: 0;
}
.pr-val {
    font-size: 0.9rem;
    color: var(--gray-800);
    text-align: right;
    word-break: break-word;
}
.profile-help {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--gray-500);
    text-align: center;
}
.profile-help a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* Editable name row */
.profile-row-name { flex-wrap: wrap; }
.pr-name-display {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pr-name-display[hidden] { display: none; }
.pr-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pr-edit-btn svg { width: 12px; height: 12px; }
.pr-edit-btn:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--ink);
}
.pr-name-edit {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1 1 100%;
    margin-top: 0.55rem;
}
.pr-name-edit[hidden] { display: none; }
.pr-name-edit input {
    flex: 1 1 auto;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--white);
    color: var(--black);
    outline: none;
    transition: border-color 0.2s;
}
.pr-name-edit input:focus { border-color: var(--black); }
.pr-save-btn,
.pr-cancel-btn {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.55rem 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.pr-save-btn {
    background: var(--black);
    color: var(--ink);
    border: 1px solid var(--black);
}
.pr-save-btn:hover { background: var(--gray-800); }
.pr-cancel-btn {
    background: var(--white);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
}
.pr-cancel-btn:hover {
    background: var(--gray-50);
    color: var(--black);
}

/* Optional-field hint */
.label-hint {
    color: var(--gray-400);
    font-weight: 400;
    font-size: 0.78em;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.25rem;
}

@media (max-width: 880px) {
    .account-hero { padding: 6.5rem 1.5rem 2.5rem; }
    .ah-row { flex-wrap: wrap; gap: 1rem; }
    .ah-logout { width: 100%; }
    .account-stats { padding: 2rem 1.5rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .account-section { padding: 2.5rem 1.5rem; }
    .acc-grid-2 { grid-template-columns: 1fr; gap: 2.25rem; }
    .pkg-list { grid-template-columns: 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-row:nth-last-child(2) { border-bottom: 1px solid var(--gray-100); }
    .profile-row:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-value { font-size: 2rem; }
    .acc-section-head h2 { font-size: 1.35rem; }
}

/* ===================================================================
   Mobile dashboard tab bar — bottom fixed, mobile + student-only
   =================================================================== */
nav.mobile-dash-tabs {
    display: none; /* hidden on desktop/tablet; shown <780px via media query */
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 80;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    border-bottom: 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.35rem 0.25rem;
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: stretch;
    gap: 0.25rem;
}
.mobile-dash-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.55rem 0.25rem;
    text-decoration: none;
    color: var(--gray-500);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 10px;
    transition: color 0.2s, background 0.2s;
    min-width: 0;
    min-height: 44px; /* touch target */
}
.mobile-dash-tab svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.mobile-dash-tab:hover { color: var(--black); }
.mobile-dash-tab:active { background: var(--gray-100); }
.mobile-dash-tab.active {
    color: var(--black);
}
.mobile-dash-tab.active svg {
    stroke-width: 2.4;
}
.mobile-dash-tab span {
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Show the tab bar + add bottom padding to the page so the last section
   isn't hidden behind it. Only when we're on the account page and the
   bar is actually rendered. */
@media (max-width: 780px) {
    nav.mobile-dash-tabs { display: flex; }
    /* Give the last account-section some breathing room so content
       doesn't sit under the fixed bar */
    body:has(.mobile-dash-tabs) {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }
    /* footer above the tab bar on mobile */
    body:has(.mobile-dash-tabs) footer {
        padding-bottom: 1rem;
    }
}

/* ===================================================================
   FAQ section (packages.html)
   =================================================================== */
.faq-section {
    padding: 5rem 3rem;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}
.faq-section .container {
    max-width: 820px;
    margin: 0 auto;
}
.faq-section .section-head-center { margin-bottom: 3rem; }
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.faq-item {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}
.faq-item[open] {
    background: var(--white);
    border-color: var(--gray-300);
}
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.005em;
    line-height: 1.4;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--black); }
.faq-chev {
    width: 18px;
    height: 18px;
    color: var(--gray-500);
    flex-shrink: 0;
    transition: transform 0.25s var(--ease);
}
.faq-item[open] .faq-chev {
    transform: rotate(180deg);
    color: var(--black);
}
.faq-a {
    padding: 0 1.4rem 1.25rem;
}
.faq-a p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--gray-700, var(--gray-600));
    margin: 0;
}
.faq-a p + p { margin-top: 0.75rem; }
.faq-a a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
.faq-a strong { color: var(--black); font-weight: 600; }

.faq-foot {
    margin-top: 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}
.faq-foot p {
    font-size: 0.9rem;
    color: var(--gray-600);
}
@media (max-width: 680px) {
    .faq-section { padding: 3.5rem 1.5rem; }
    .faq-q { padding: 1rem 1.1rem; font-size: 0.98rem; }
    .faq-a { padding: 0 1.1rem 1rem; }
}

/* ===================================================================
   Legal pages (privacy.html, terms.html)
   =================================================================== */
.legal-page { background: var(--white); }
.legal-hero {
    padding: 8rem 3rem 2.5rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    text-align: center;
}
.legal-hero .container {
    max-width: 860px;
    margin: 0 auto;
}
.legal-body {
    padding: 3rem 3rem 5rem;
}
.legal-body .container {
    max-width: 820px;
    margin: 0 auto;
}
.legal-body h2 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--black);
    letter-spacing: -0.01em;
    margin: 2.5rem 0 1rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--gray-700, var(--gray-600));
    margin-bottom: 1rem;
}
.legal-body ul {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}
.legal-body li { margin-bottom: 0.5rem; }
.legal-body a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
@media (max-width: 680px) {
    .legal-hero { padding: 6.5rem 1.5rem 2rem; }
    .legal-body { padding: 2.5rem 1.5rem 4rem; }
}

/* ===================================================================
   Event detail page (event.html?id=xxx)
   =================================================================== */
.ev-hero {
    /* The banner is no longer full-bleed, so the section has to clear the
       fixed nav itself — previously the image ran underneath it. */
    padding: 8rem 3rem 0;
}
.ev-hero-image {
    position: relative;
    width: 100%;
    /* Same landscape frame as the event cards; max-width matches
       .ev-detail .container so the banner lines up with the copy below it. */
    max-width: 1100px;
    aspect-ratio: var(--event-ratio);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    background: var(--gray-100);
}
.ev-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.ev-hero-image .event-category {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    padding: 0.45rem 0.9rem;
    background: rgba(12, 12, 12, 0.82);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.ev-detail {
    background: var(--white);
    padding: 4rem 3rem 5rem;
}
.ev-detail .container {
    max-width: 1100px;
    margin: 0 auto;
}
.ev-detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    align-items: start;
}
.ev-back {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--gray-500);
    text-decoration: none;
    margin-bottom: 1.2rem;
    letter-spacing: 0.02em;
    transition: color 0.2s;
}
.ev-back:hover { color: var(--black); }
.ev-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}
.ev-meta {
    display: flex;
    gap: 2rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.ev-meta-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.ev-meta-item svg {
    width: 20px;
    height: 20px;
    color: var(--gray-500);
    flex-shrink: 0;
}
.ev-meta-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray-500);
    margin-bottom: 0.2rem;
}
.ev-meta-value {
    font-size: 0.95rem;
    color: var(--black);
    font-weight: 500;
}
.ev-body p {
    font-size: 1rem;
    color: var(--gray-700, var(--gray-600));
    line-height: 1.75;
    margin-bottom: 1.25rem;
    max-width: 100%;
}
.ev-programme {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-100);
}
.ev-section-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--black);
    margin-bottom: 1.5rem;
}
.ev-prog-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ev-prog-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
}
.ev-prog-time {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--black);
    letter-spacing: 0.02em;
}
.ev-prog-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 0.2rem;
}
.ev-prog-desc {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
}
.ev-sidebar {
    position: sticky;
    top: 100px;
}
.ev-cta-card {
    background: var(--black);
    color: var(--ink);
    padding: 2rem 1.75rem;
    border-radius: 14px;
}
.ev-cta-eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.6rem;
}
.ev-cta-title {
    font-family: var(--serif);
    font-size: 1.65rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.85rem;
}
.ev-cta-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 1.5rem;
}
.ev-cta-btn {
    width: 100%;
    justify-content: center;
    background: var(--white);
    color: var(--black);
    border: 1px solid var(--white);
}
.ev-cta-btn:hover {
    background: transparent;
    color: var(--ink);
}
.ev-cta-foot {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}
.ev-cta-foot a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 860px) {
    .ev-detail { padding: 3rem 1.5rem 4rem; }
    .ev-hero { padding: 6.5rem 1.5rem 0; }
    .ev-hero-image .event-category { left: 1rem; top: 1rem; }
    .ev-detail-grid { grid-template-columns: 1fr; gap: 2rem; }
    .ev-sidebar { position: static; }
    .ev-meta { gap: 1rem; }
    .ev-prog-row { grid-template-columns: 90px 1fr; padding: 0.7rem 0.85rem; }
}

/* Event not found / 404 state */
.ev-notfound {
    padding: 8rem 3rem 5rem;
    background: var(--white);
    text-align: center;
}
.ev-notfound .container { max-width: 900px; margin: 0 auto; }
.ev-notfound-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--black);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0.75rem 0 1rem;
}
.ev-notfound-title em { font-family: monospace; font-style: normal; font-size: 0.85em; color: var(--gray-600); word-break: break-all; }
.ev-notfound-sub {
    font-size: 1rem;
    color: var(--gray-600);
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.ev-notfound-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}
.ev-suggest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    text-align: left;
}
.ev-suggest-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
.ev-suggest-card:hover { border-color: var(--gray-300); transform: translateY(-2px); }
.ev-suggest-img { aspect-ratio: var(--event-ratio); overflow: hidden; background: var(--gray-100); }
.ev-suggest-img img { width: 100%; height: 100%; object-fit: cover; }
.ev-suggest-body { padding: 0.9rem 1rem; }
.ev-suggest-date {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    margin-bottom: 0.3rem;
}
.ev-suggest-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--black);
    line-height: 1.4;
}
@media (max-width: 680px) {
    .ev-notfound { padding: 6.5rem 1.5rem 4rem; }
    .ev-suggest-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   DARK THEME — FINAL OVERRIDES
   ----------------------------------------------------------------------------
   Must sit at the bottom of the file so these rules win the cascade against
   the legacy light-theme rules earlier. Any element that was intentionally
   a dark accent section on a light page is remapped to `--gray-50`
   (near-black #141414) so it still reads as "a distinct section" against the
   slightly darker body bg (#0C0C0C).
   ============================================================================ */

/* Section backgrounds that were previously dark accent islands — remap
   background to `--gray-50` (near-black) and force text back to light.
   These sections originally set `color: var(--ink)` which, after the
   var swap, resolves to #0C0C0C (dark) — invisible on dark bg. */
.page-hero,
.stage-section,
.book-dancers-section,
.package-card.featured,
.instructor-hero,
.contact-hero,
.reg-hero,
.footer-cta,
.cta-section {
    background: var(--gray-50);
    color: var(--ink);
}
.page-hero-title,
.instructor-hero h1,
.stage-title,
.cta-title,
.book-dancers-section .section-title {
    color: var(--ink);
}
.page-hero-label,
.page-hero-sub,
.instructor-hero .page-hero-label,
.stage-section p,
.book-dancers-section .section-desc {
    color: var(--gray-500);
}

/* Buttons: re-anchor the "dark" button to be visually solid against dark bg */
.btn-dark {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.btn-dark:hover {
    background: var(--gray-700);
    color: var(--page);
    opacity: 1;
}
.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--gray-200);
}
.btn-outline:hover {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.btn-white {
    background: var(--ink);
    color: var(--page);
    border: 1px solid var(--ink);
}
.btn-white:hover {
    background: transparent;
    color: var(--ink);
}

/* Nav CTA */
nav .nav-cta {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
nav .nav-cta:hover {
    background: var(--gray-800);
    color: var(--page);
}

/* Form controls: dark-themed with visible borders */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="url"], textarea, select {
    background: var(--gray-50);
    color: var(--ink);
    border-color: var(--gray-200);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--ink);
    background: var(--gray-100);
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }

/* Modals + cards that used pure white surfaces */
.booking-modal-panel,
.terms-modal-panel,
.login-modal-panel,
.instructor-modal-panel,
.dropdown {
    background: var(--gray-50);
    color: var(--ink);
    border-color: var(--gray-200);
}
.booking-modal-backdrop,
.terms-modal-backdrop,
.login-modal-backdrop,
.instructor-modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

/* Close buttons inside modals */
.booking-modal-close,
.terms-modal-close,
.login-modal-close,
.instructor-modal-close {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--ink);
}

/* Dropdown nav */
.nav-center .dropdown {
    background: rgba(20, 20, 20, 0.96);
    border-color: var(--gray-200);
}
.nav-center .dropdown a { color: var(--gray-700); }
.nav-center .dropdown a:hover {
    background: var(--gray-100);
    color: var(--ink);
}

/* Mobile menu — dark overlay */
.mobile-menu {
    background: var(--page);
}

/* Footer always stays on dark — make sure it's actually dark */
footer {
    background: var(--page);
    color: var(--ink);
    border-top: 1px solid var(--gray-100);
}

/* Package/pricing cards: subtle dark panels with border instead of white */
.pricing-card,
.package-card:not(.featured),
.pkg-card,
.event-card,
.instructor-card,
.stat-card,
.adm-table-wrap,
.adm-sales-card,
.info-callout:not(.dark),
.next-step-card,
.value-card,
.info-card,
.service-type,
.day-detail,
.stats-tab,
.adm-tab,
.np-option,
.ase-pkg-row,
.roster-row,
.notif-row {
    background: var(--gray-50);
    border-color: var(--gray-100);
}
.pricing-card:hover,
.event-card:hover,
.pkg-card:hover,
.instructor-card:hover { border-color: var(--gray-300); }

/* Admin dashboard specific */
.adm-tab-content { background: var(--page); }
.adm-table {
    background: var(--gray-50);
    color: var(--ink);
}
.adm-table thead th {
    background: var(--gray-100);
    color: var(--gray-600);
    border-bottom-color: var(--gray-200);
}
.adm-table tbody td { border-bottom-color: var(--gray-100); }
.adm-table tbody tr:hover { background: var(--gray-100); }

/* Month + week calendar cells */
/* Bump grid gaps + borders brighter so the cell divisions read clearly */
.calendar-grid { background: var(--gray-300); border-color: var(--gray-300); gap: 1px; }
.calendar-day { background: var(--gray-50); border-color: var(--gray-200); }
.month-grid {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
}
.month-header {
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}
.month-days { background: var(--gray-300); gap: 1px; }
.month-cell { background: var(--gray-50); color: var(--ink); border-color: var(--gray-200); }
.month-cell.empty { background: var(--gray-100); }
.month-cell.empty { background: var(--page); }
.month-cell:hover:not(.empty) { background: var(--gray-100); }
.month-cell.selected {
    background: var(--ink);
    color: var(--page);
}
/* Today cell — clean white inverted (matches active tabs/pills) */
.month-cell.today {
    background: var(--ink);
    color: var(--page);
    box-shadow: 0 0 0 1px var(--ink);
}
.month-cell.today .mc-date { color: var(--page); font-weight: 600; }
.month-cell.today .mc-dot { opacity: 0.8; }
.calendar-day.today {
    background: var(--ink);
    color: var(--page);
}
.calendar-day.today .calendar-day-name,
.calendar-day.today .calendar-day-date { color: var(--page) !important; }
.calendar-day.today .class-entry { color: var(--page); }

/* Legend / filter pills */
.legend-pill, .filter-pill {
    background: var(--gray-50);
    color: var(--gray-600);
    border-color: var(--gray-200);
}
.legend-pill.active, .filter-pill.active {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.legend-pill-static { background: var(--gray-100); }

/* Day-detail view — make row borders visible */
.day-class {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}
.day-class-past { background: var(--gray-100); border-color: var(--gray-200); }
.calendar-day-head { border-bottom-color: var(--gray-200); }
.day-detail { border: 1px solid var(--gray-200); background: var(--gray-50); border-radius: 12px; padding: 1.5rem; }
.day-detail-head { border-bottom: 1px solid var(--gray-200); padding-bottom: 1rem; margin-bottom: 1rem; }
.day-class-locked {
    background: var(--gray-100);
    color: var(--gray-500);
    border-color: var(--gray-200);
}

/* Schedule month/week navigation buttons */
.month-nav-btn, .week-nav-btn, .month-today-btn {
    background: var(--gray-50);
    color: var(--ink);
    border-color: var(--gray-200);
}
.month-nav-btn:hover, .week-nav-btn:hover, .month-today-btn:hover {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}

/* FAQ accordion items */
.faq-item { background: var(--gray-50); border-color: var(--gray-100); }
.faq-item[open] { background: var(--gray-100); }

/* Today's strip on home (already dark, just tighten borders) */
.today-strip { border-top-color: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.06); }

/* Hero photo frame on home stays dark-panel feel */
.hero-photo { background: var(--gray-100); }

/* Legal pages */
.legal-page { background: var(--page); }
.legal-hero { background: var(--gray-50); border-bottom-color: var(--gray-100); }

/* Account dashboard */
.account-hero { background: var(--gray-50); border-bottom-color: var(--gray-100); }
.account-stats, .account-section { background: var(--page); }
.ah-level { background: var(--gray-50); border-color: var(--gray-100); }

/* Event detail */
.ev-detail { background: var(--page); }
.ev-cta-card { background: var(--gray-100); }
.ev-prog-row { background: var(--gray-50); border-color: var(--gray-100); }

/* Profile rows */
.profile-row { border-bottom-color: var(--gray-100); }

/* Stats / filter chips etc. */
.adm-chip { background: var(--gray-100); }
.adm-chip-instructor { background: rgba(30, 64, 175, 0.25); color: #93c5fd; }
.adm-chip-admin { background: rgba(124, 45, 18, 0.35); color: #fdba74; }

/* Admin search bar */
.adm-search-bar { background: var(--gray-50); border-color: var(--gray-200); }
.adm-search-bar:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(250, 250, 250, 0.08); }

/* Social btns start on dark bg */
.social-btn {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--gray-500);
}
.social-btn:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }

/* View-heading accent bar + divider */
.view-heading { border-bottom-color: var(--gray-100); }
.view-heading::after { background: var(--ink); }

/* Feedback / error states that used dark bg */
.field-error-msg { color: #ff6b6b; }
.form-field.error input,
.form-field.error textarea,
.form-field.error select { border-color: #ff6b6b; }

/* -------- Dark-on-dark fixes for hardcoded colors -------- */
/* Decorative big numbers on value cards — were dark grey on light, now
   need to be a visible ghost-white on dark */
.value-num { color: rgba(255, 255, 255, 0.06); }
.value-card:hover .value-num { color: rgba(255, 255, 255, 0.12); }

/* Story feature caption eyebrow (on the "SIM Family" photo overlay) */
.story-feature-eyebrow { color: rgba(255, 255, 255, 0.7); }

/* Stage / home hero section headings — these sit on --gray-50 islands */
.stage-section h2,
.stage-section .section-title,
.stage-content h2 { color: var(--ink); }
.stage-feature {
    color: var(--gray-600);
}
.stage-section p,
.stage-section .section-desc { color: var(--gray-500); }

/* Catch-all for any section-title sitting on a dark accent island */
.page-hero-title em,
.instructor-hero em,
section[class*="-hero"] em { color: var(--ink); }

/* Schedule day headings + weekday labels */
.schedule-legend .dot-color + span,
.calendar-day-name { color: var(--gray-500); }

/* Gallery / quote / testimonial text that was dark-on-light */
.quote-text,
.testimonial-text,
.gallery-caption { color: var(--ink); }

/* Account level ladder muted labels */
.ah-level-step-name { color: var(--gray-500); }
.ah-level-step.reached .ah-level-step-name { color: var(--gray-700); }
.ah-level-step.current .ah-level-step-name { color: var(--ink); }

/* ---- More dark-theme contrast fixes ---- */

/* Value card hover: in light theme it flipped to dark-on-dark accent;
   in dark theme keep the card dark but brighten slightly for feedback. */
.value-card:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--ink);
}
.value-card:hover .value-desc { color: var(--gray-600); }

/* Schedule day-detail times were dark grey — bump for readability */
.day-class-time { color: var(--gray-600); }

/* Book button in day-detail: was black-on-white pill; now white pill
   was inverted causing white-on-white. Make it light-bg dark-text pill. */
.day-class-book {
    background: var(--ink);
    color: var(--page);
    border: 1px solid var(--ink);
}
.day-class-book:hover {
    background: var(--gray-700);
    color: var(--page);
}

/* (Today-cell colors are handled by the dedicated block lower in the
   stylesheet; leaving this slot empty to avoid amber color leaking.) */

/* Light-bg buttons/pills need dark text (non-important so hover states
   that flip to transparent bg can still override to light text) */
.btn-dark:not(:hover), .nav-cta:not(:hover),
.legend-pill.active, .filter-pill.active,
.today-pill.next,
.stats-tab.active,
.pkg-purchase-btn.btn-white:not(:hover),
.ev-cta-btn { color: var(--page); }

.btn-white { color: var(--page); }
.btn-white:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.month-today-btn:hover, .month-nav-btn:hover, .week-nav-btn:hover { color: var(--page); }

/* Admin: tab active state text and row-edit hover need dark text on light */
.adm-tab.active, .adm-row-edit:hover { color: var(--page); }

/* Booking pill & chips that used white/light bg */
.level-chip, .level-chip-ins, .level-chip-adm { color: var(--ink); }
.level-chip-label { color: inherit; }

/* Gallery grid might still have placeholder text */
.gallery-item span { color: var(--gray-600); }

/* Today's strip "Next up" pill — should POP as a light pill on dark strip */
.today-pill.next {
    background: var(--ink) !important;
    color: var(--page) !important;
    border-color: var(--ink) !important;
}
.today-pill.next .today-pill-name,
.today-pill.next .today-pill-time,
.today-pill.next .today-pill-instructor { color: var(--page); }
.today-pill.next .today-pill-time { color: rgba(12, 12, 12, 0.55); }
.today-pill.next .today-pill-instructor { color: rgba(12, 12, 12, 0.55); }
.today-pill.next .today-pill-avatar {
    background: var(--page);
    color: var(--ink);
    border-color: var(--page);
}
.today-pill.next .today-pill-next-tag {
    background: var(--page);
    color: var(--ink);
}

/* Homepage showreel placeholder — dark frame on dark page */
.home-video-frame { background: var(--gray-100); }
.video-label { color: var(--ink); }

/* Featured pricing card + dark info-callout — were dark accents on light
   page; now become lighter accents on dark page to still stand out */
.pricing-card.featured {
    background: var(--gray-100);
    color: var(--ink);
    border-color: var(--gray-200);
}
.pricing-card.featured .pricing-price,
.pricing-card.featured .pricing-price sup { color: var(--ink); }
.info-callout.dark {
    background: var(--gray-100);
    color: var(--ink);
}
.info-callout.dark .info-callout-tag,
.info-callout.dark .info-callout-amount,
.info-callout.dark .info-callout-headline,
.info-callout.dark .info-callout-link { color: var(--ink); }
.info-callout.dark .info-callout-text { color: var(--gray-500); }
.info-callout.dark .info-callout-link { color: var(--ink); }

/* Info-callout icon brightness — default variant was gray-300 (now too
   dark); bump so the icon strokes are visible */
.info-callout-icon { color: var(--gray-600); }
.info-callout:hover .info-callout-icon { color: var(--ink); }
.info-callout.dark .info-callout-icon { color: var(--gray-700); }

/* New-member banner icon: was black-on-black = invisible. Invert to a
   bright pill with dark icon. */
.nmb-icon {
    background: var(--ink);
    color: var(--page);
}
.new-member-banner {
    background: var(--gray-100);
    border-color: var(--gray-200);
    border-left-color: var(--ink);
}
.new-member-banner:hover {
    background: var(--gray-50);
    border-left-color: var(--ink);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.nmb-title { color: var(--ink); }
.nmb-sub { color: var(--gray-500); }
.nmb-arrow { color: var(--gray-500); }
.new-member-banner:hover .nmb-arrow { color: var(--ink); }

/* Contact page "Follow Us" pills — same brand-color hover treatment as footer */
.follow-links { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.follow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.25s, border-color 0.25s, background 0.3s, transform 0.2s, box-shadow 0.25s;
}
.follow-link svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.3s; }
.follow-link:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.follow-link:hover svg { transform: scale(1.08); }

.follow-link[data-social="instagram"]:hover {
    color: #FFFFFF; border-color: transparent;
    background: radial-gradient(circle at 30% 107%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.follow-link[data-social="facebook"]:hover {
    color: #FFFFFF; border-color: #1877F2; background: #1877F2;
}
.follow-link[data-social="tiktok"]:hover {
    color: #FFFFFF; border-color: #000; background: #000;
    box-shadow: 0 6px 14px rgba(12, 12, 12, 0.12),
                2px 0 0 rgba(37, 244, 238, 0.85) inset,
                -2px 0 0 rgba(254, 44, 85, 0.85) inset;
}
.follow-link[data-social="youtube"]:hover {
    color: #FFFFFF; border-color: #FF0000; background: #FF0000;
}

/* Login label in nav needs to be more prominent */
.nav-account {
    color: var(--ink);
    border-color: var(--gray-300);
}
.nav-account-label {
    color: var(--ink);
    font-weight: 600;
}
.nav-account:hover {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.nav-account:hover .nav-account-label { color: var(--page); }
.nav-account.logged-in {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.nav-account.logged-in .nav-account-label { color: var(--page); }

/* ============================================================================
   FINAL THEME PASS — pure black bg, white cards
   ----------------------------------------------------------------------------
   Remove the dark-grey "accent" section backgrounds so the body reads as
   pure black, and flip card surfaces to white so they pop off the page
   like editorial magazine callouts.
   ============================================================================ */

/* Accent sections → let body black show through (no grey islands).
   Catches any <section> via a blanket rule + every known section class. */
section {
    background: var(--page);
}
.page-hero,
.stage-section,
.book-dancers-section,
.instructor-hero,
.contact-hero,
.reg-hero,
.footer-cta,
.cta-section,
.legal-hero,
.account-hero,
.account-stats,
.adm-tab-content,
.ev-detail,
.follow-section,
.faq-section,
.story-section,
.home-video-section,
.values-section,
.instructors-section,
.schedule-section,
.today-strip,
.styles-section,
.info-callout-section,
.contact-form-section,
.register-section,
.pricing-section,
.events-section,
.journey-section,
.timeline-section,
.featured-events,
.legal-body,
.instructors-page,
.instructor-detail-section,
.other-instructors,
.account-section,
.schedule-hero,
.contact-methods,
.home-hero,
.gallery-section,
.map-section,
.packages-hero,
.instructor-showreel,
.instructor-reels {
    background: var(--page);
}
footer { background: var(--page); }

/* === WHITE CARDS === */
.pricing-card:not(.featured),
.event-card,
.pkg-card,
.instructor-card,
.stat-card,
.value-card,
.info-callout:not(.dark),
.next-step-card,
.service-type,
.day-detail,
.faq-item,
.adm-sales-card,
.adm-sales-card-hero,
.ase-pkg-row,
.ev-prog-row,
.ev-suggest-card,
.adm-table-wrap,
.roster-row,
.notif-row,
.ah-level,
.ins-class,
.success-next-item {
    background: var(--ink);
    color: var(--page);
    border-color: rgba(12, 12, 12, 0.08);
}
.pricing-card:not(.featured):hover,
.event-card:hover,
.pkg-card:hover,
.instructor-card:hover { border-color: rgba(12, 12, 12, 0.25); }

/* Any text inside white cards must be dark */
.pricing-card:not(.featured) *,
.event-card *,
.pkg-card *,
.instructor-card *,
.stat-card *,
.value-card *,
.info-callout:not(.dark) *,
.next-step-card *,
.service-type *,
.day-detail *,
.faq-item *,
.adm-sales-card *,
.ev-prog-row *,
.ev-suggest-card *,
.notif-row *,
.ah-level *,
.success-next-item * { color: inherit; }

/* Typography hierarchy inside white cards */
.pricing-card:not(.featured) .pricing-tier,
.pkg-card .pkg-purchased,
.event-card .event-date,
.event-card .event-venue,
.event-card .event-desc,
.event-card .event-category,
.instructor-card .instructor-role,
.instructor-card .instructor-bio,
.stat-card .stat-label,
.stat-card .stat-sub,
.value-card .value-desc,
.info-callout:not(.dark) .info-callout-text,
.info-callout:not(.dark) .info-callout-tag,
.next-step-card .ns-eyebrow,
.service-type p,
.day-detail p,
.faq-item .faq-a p,
.adm-sales-card .adm-sales-label,
.adm-sales-card .adm-sub,
.ev-prog-row .ev-prog-desc,
.ev-suggest-card .ev-suggest-date,
.notif-row .notif-text,
.notif-row .notif-time,
.ah-level-label,
.ah-level-note,
.success-next-desc { color: rgba(12, 12, 12, 0.6); }

/* Headings on white cards */
.pricing-card:not(.featured) .pricing-price,
.pricing-card:not(.featured) .pricing-period,
.pricing-card:not(.featured) .pricing-features li,
.pkg-card .pkg-name,
.event-card .event-title,
.instructor-card .instructor-name,
.stat-card .stat-value,
.value-card .value-title,
.info-callout:not(.dark) .info-callout-headline,
.info-callout:not(.dark) .info-callout-amount,
.info-callout:not(.dark) .info-callout-link,
.next-step-card h4,
.service-type h4,
.day-detail-title,
.faq-item .faq-q,
.adm-sales-card .adm-sales-value,
.ev-prog-row .ev-prog-title,
.ev-prog-row .ev-prog-time,
.ev-suggest-card .ev-suggest-title,
.notif-row .notif-title,
.ah-level-tier,
.ah-level-attended,
.success-next-title { color: var(--page); }

/* Value card hover — keep the pop effect on a dark strip */
.value-card:hover {
    background: var(--page);
    color: var(--ink);
    border-color: var(--ink);
}
.value-card:hover .value-desc { color: rgba(250, 250, 250, 0.75); }
.value-card:hover .value-title { color: var(--ink); }
.value-card:hover .value-num { color: rgba(255, 255, 255, 0.1); }

/* Value-card icons: the default .value-icon svg rule sets color to
   var(--black) (= light) which is invisible on the now-white card.
   Force dark in the default state so all four icons are visible without
   hovering. Hover state still flips to light via existing rule. */
.value-card .value-icon {
    border-color: rgba(12, 12, 12, 0.25);
}
.value-card .value-icon svg { color: var(--page); }
.value-card:hover .value-icon {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
}
.value-card:hover .value-icon svg { color: var(--ink); }

/* "Full schedule →" and similar pill CTAs: default state had a
   0.2 opacity white border (too faint to read as a button) and the
   hover used var(--white) which after the theme swap is dark — so
   hovering made the pill vanish into the page. Brighten the outline
   and invert to a solid white pill on hover. */
.today-strip-cta {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--ink);
}
.today-strip-cta:hover {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.today-strip-cta:hover svg { color: var(--page); }

/* "Register as a new member →" callout button: hover was using
   var(--white) / var(--black) which after the theme swap meant dark
   bg on dark page + light text — the button vanished. Invert to a
   solid white pill with dark text on hover so it clearly lights up. */
.info-callout-link {
    border-color: rgba(250, 250, 250, 0.45);
    color: var(--ink);
}
.info-callout-link:hover {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.info-callout-link:hover svg { color: var(--page); }

/* When the callout is rendered on a white card (.info-callout:not(.dark))
   the pill needs the opposite treatment so it's readable on white too. */
.info-callout:not(.dark) .info-callout-link {
    border-color: rgba(12, 12, 12, 0.35);
    color: var(--page);
}
.info-callout:not(.dark) .info-callout-link:hover {
    background: var(--page);
    color: var(--ink);
    border-color: var(--page);
}
.info-callout:not(.dark) .info-callout-link:hover svg { color: var(--ink); }

/* Higher-specificity hover for the dark callout, with !important so
   the "Register as a new member" text stays visible on hover. Same-
   specificity rules earlier in the file were bleeding the color back
   to white. */
.info-callout.dark .info-callout-link:hover {
    background: var(--ink) !important;
    color: var(--page) !important;
    border-color: var(--ink) !important;
}
.info-callout.dark .info-callout-link:hover svg { color: var(--page) !important; }

/* "Most Popular" badge: make it actually pop. Warm amber with dark
   text and a soft ring so it reads as a real "featured" signal.
   !important needed because a later same-specificity rule forces
   white. */
.pricing-badge,
.pricing-card.featured .pricing-badge {
    background: #FCD34D !important;
    color: #1A1200 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    padding: 0.4rem 0.9rem !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.18) !important;
}

/* Purchase button on non-featured (white) pricing cards: default is
   outlined/faint — add an obvious hover that inverts to a dark pill
   so the user sees it's clickable. */
.pricing-card:not(.featured) .pkg-purchase-btn,
.pricing-card:not(.featured) .btn-outline.pkg-purchase-btn {
    background: transparent;
    color: var(--page);
    border: 1px solid rgba(12, 12, 12, 0.35);
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.pricing-card:not(.featured) .pkg-purchase-btn:hover,
.pricing-card:not(.featured) .btn-outline.pkg-purchase-btn:hover {
    background: var(--page);
    color: var(--ink);
    border-color: var(--page);
    transform: translateY(-1px);
}

/* Purchase button on the featured (dark) pricing card: currently
   white fill — on hover invert to outlined so there's a state change. */
.pricing-card.featured .pkg-purchase-btn {
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.pricing-card.featured .pkg-purchase-btn:hover {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
    transform: translateY(-1px);
}

/* "View Terms & Conditions" pill — hover was turning the bg white
   but the text color was also var(--ink) (white), so the label
   vanished. Force dark text + dark icon on hover. */
.terms-trigger {
    border-color: rgba(250, 250, 250, 0.35);
    color: var(--gray-600);
}
.terms-trigger:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--page);
}
.terms-trigger:hover svg { color: var(--page); }

/* Plain text arrow links ("Full schedule →", etc.) — make the hover
   actually change color so the link is obviously clickable. */
.link-arrow { color: var(--ink); transition: color 0.2s; }
.link-arrow:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--ink);
}

/* Contact cards — Option A: outlined / ghost style. Transparent
   fill, thin light border visible against the pure-black section,
   white text with muted label, icon ring slightly brighter so the
   card reads as a defined unit without a fill color. */
.contact-card {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(250, 250, 250, 0.14);
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.contact-card:hover {
    border-color: rgba(250, 250, 250, 0.35);
    background: rgba(250, 250, 250, 0.02);
    transform: translateY(-4px);
}
.contact-card .contact-card-label {
    color: var(--gray-500);
    letter-spacing: 0.14em;
}
.contact-card .contact-card-value { color: var(--ink); }
.contact-card .contact-card-extra { color: var(--gray-500); }
.contact-card a { color: inherit; text-decoration: none; }
.contact-card a:hover { color: var(--gray-600); }
.contact-card .contact-icon {
    border-color: rgba(250, 250, 250, 0.25);
    background: transparent;
}
.contact-card:hover .contact-icon {
    border-color: rgba(250, 250, 250, 0.45);
}
.contact-card .contact-icon svg { color: var(--ink); }

/* ===== Instructor cards (about.html "Our Story" grid) — editorial ===== */
.instructor-card,
.instructor-card:hover {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--ink);
}
.instructor-card {
    position: relative;
    display: block;
    transition: transform 0.4s var(--ease);
}
.instructor-card .instructor-photo {
    border-radius: 14px;
    margin-bottom: 1.1rem;
    background: var(--gray-100);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    transition: transform 0.4s var(--ease);
}
.instructor-card .instructor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
    filter: grayscale(40%);
}
.instructor-card:hover .instructor-photo img {
    transform: scale(1.04);
    filter: grayscale(0%);
}

/* Thin hairline divider above the name to echo an editorial credit */
.instructor-card .instructor-name {
    position: relative;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
    transition: border-top-color 0.3s;
    display: inline-block;
    padding-right: 0;
}
.instructor-card:hover .instructor-name { border-top-color: var(--ink); }

/* Role pill: tiny caps, soft grey */
.instructor-card .instructor-role {
    color: var(--gray-500);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.instructor-card .instructor-bio {
    color: var(--gray-600);
    font-size: 0.85rem;
    line-height: 1.65;
}

/* ===== Instructors PAGE grid (instructors.html .ig-card) ===== */
.ig-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
    max-width: 1200px;
}
.ig-card,
.ig-card:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: var(--ink);
    transform: none;
    text-decoration: none;
}
.ig-card { position: relative; display: block; overflow: visible; }
.ig-card * { text-decoration: none; }
.ig-card-photo {
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    background: var(--gray-100);
    margin-bottom: 1.15rem;
    transition: transform 0.4s var(--ease);
}
.ig-card-photo img {
    filter: grayscale(40%);
    transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.ig-card:hover .ig-card-photo img {
    transform: scale(1.04);
    filter: grayscale(0%);
}
.ig-card-body { padding: 0; }
.ig-card-name {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 0.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--gray-200);
    display: inline-block;
    transition: border-top-color 0.3s;
}
.ig-card:hover .ig-card-name { border-top-color: var(--ink); }
.ig-card-role {
    color: var(--gray-500);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}
.ig-card-bio {
    color: var(--gray-600);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 1.1rem;
}
.ig-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gray-300);
    transition: border-bottom-color 0.3s, color 0.3s;
}
.ig-card:hover .ig-card-cta {
    color: var(--ink);
    border-bottom-color: var(--ink);
}
.ig-card-cta svg { transition: transform 0.3s var(--ease); }
.ig-card:hover .ig-card-cta svg { transform: translateX(4px); }

@media (max-width: 900px) {
    .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; }
}
@media (max-width: 560px) {
    .ig-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* Progress dividers / borders on white cards */
.day-detail-head,
.pkg-head,
.pricing-card:not(.featured) .pricing-features {
    border-color: rgba(12, 12, 12, 0.08);
}

/* === SPECIFIC BUG FIXES === */

/* Register stepper: circles were var(--black) on var(--white) — both
   flipped to light, making "1 2 3" invisible */
.rp-num {
    background: rgba(250, 250, 250, 0.05);
    border: 1px solid var(--gray-300);
    color: var(--gray-500);
}
.rp-label { color: var(--gray-500); }
.rp-step.active .rp-num {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.rp-step.active .rp-label { color: var(--ink); }
.rp-line { background: var(--gray-200); }
.rp-line::after { background: var(--ink); }
.rp-step.done .rp-num {
    background: var(--ink);
    border-color: var(--ink);
}

/* Login pill in nav — make fully visible */
.nav-account,
.nav-account .nav-account-label {
    color: var(--ink);
}
.nav-account {
    border-color: var(--gray-300);
    background: rgba(250, 250, 250, 0.04);
}
.nav-account svg { color: var(--ink); }

/* When logged in the pill is solid white — the SVG icon and label
   need to be dark so they read on the white background. */
.nav-account.logged-in,
.nav-account.logged-in .nav-account-label { color: var(--page); }
.nav-account.logged-in svg { color: var(--page); }
.nav-account:hover svg { color: var(--page); }

/* Package progress bar lives on a white card but the fill was
   var(--black) (= white after theme swap) which made the used
   portion invisible. Force dark fill on a light track. */
.pkg-card .pkg-bar {
    background: rgba(12, 12, 12, 0.12);
    height: 6px;
}
.pkg-card .pkg-bar-fill {
    background: var(--page);
}

/* ============================================================
   White-on-white selection bugs (register + confirm modals)
   ============================================================ */
/* Gender / "How did you hear" radio pills — selected state used
   var(--black) bg + var(--ink) text = white pill with white text. */
.radio-pill input:checked + span {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
    font-weight: 700;
}
.radio-pill span { color: var(--ink); background: transparent; }

/* "Confirm via WhatsApp" payment card — active icon was white-on-white
   and the "Selected" tag pill too. */
.pm-card-active .pm-icon {
    background: #25D366; /* WhatsApp green for the active method */
    color: #FFFFFF;
}
.pm-card-active .pm-icon svg { color: #FFFFFF; }
.pm-tag {
    background: var(--ink);
    color: var(--page);
    font-weight: 700;
}

/* Welcome / success avatar on the register final step — white circle
   with white checkmark was invisible. */
.reg-success .success-icon {
    background: #10B981;
    color: #FFFFFF;
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.18);
}
.reg-success .success-icon svg { color: #FFFFFF; }

/* ============================================================
   Register success page — flip the "next steps" + "Step 1 / Step 2"
   cards from white to dark to match the overall black theme.
   ============================================================ */
.success-next-item,
.success-next-item.success-next-done {
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    color: var(--ink) !important;
}
.success-next-item .success-next-title { color: var(--ink) !important; }
.success-next-item .success-next-desc { color: var(--gray-500) !important; }
/* READY / NEXT pills — stronger contrast so the labels are clearly
   legible on the pastel chips. */
.success-next-item .success-next-tag {
    background: #FBBF24 !important;
    color: #3B1F00 !important;
    font-weight: 900 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.14em;
    padding: 0.35rem 0.8rem !important;
}
.success-next-item .success-next-tag-done {
    background: #10B981 !important;
    color: #042F1F !important;
}
/* Pending step 2 — dark circle with bright number */
.success-next-item .success-next-num {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--ink);
}
/* Done step — keep the emerald gem for the checkmark */
.success-next-done .success-next-num {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* Step 1 / Step 2 "next-step-card" tiles */
.next-step-card {
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    color: var(--ink) !important;
}
.next-step-card:hover {
    border-color: var(--gray-300) !important;
    background: var(--gray-100) !important;
}
.next-step-card .ns-eyebrow {
    color: var(--gray-500) !important;
    opacity: 1;
}
.next-step-card h4 { color: var(--ink) !important; }
.next-step-card p { color: var(--gray-500) !important; }
.next-step-card a,
.next-step-card .ns-link {
    color: var(--ink) !important;
    border-bottom-color: var(--ink) !important;
}

/* ============================================================
   Gallery page — category sections, filter bar, hover captions
   ============================================================ */
.gallery-filter-section {
    padding: 2.5rem 2rem 0;
    background: var(--page);
}
.gallery-filter-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    max-width: 1100px;
    margin: 0 auto;
}
.gallery-section {
    padding: 4rem 2rem;
    background: var(--page);
}
.gallery-section + .gallery-section { padding-top: 1rem; }
.gallery-section .container { max-width: 1200px; margin: 0 auto; }

.gallery-category-head {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.gallery-category-head .section-label {
    color: var(--gray-500);
    letter-spacing: 0.22em;
    font-weight: 700;
    font-size: 0.72rem;
    margin-bottom: 0.85rem;
    text-transform: uppercase;
}
.gallery-category-title {
    font-family: var(--serif);
    color: var(--ink);
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.gallery-category-title em { font-style: italic; }
.gallery-category-desc {
    color: var(--gray-500);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Items become figures with an overlaid caption. Rounded corners, soft
   hover lift, and a gradient that lights up on hover. */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4 / 3;
    margin: 0;
    cursor: pointer;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(12%) saturate(0.95);
    transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.gallery-item figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    padding: 0.35rem 0.75rem;
    background: rgba(12, 12, 12, 0.78);
    backdrop-filter: blur(8px);
    color: var(--ink);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}
.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.4);
}
.gallery-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0%) saturate(1.05);
}
.gallery-item:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}
.gallery-item:hover::after { opacity: 1; }

/* Filter state — a hidden class fades items out without reflowing too
   abruptly. The category sections also collapse if empty. */
.gallery-item.gallery-hidden {
    display: none;
}
.gallery-section.gallery-section-hidden {
    display: none;
}

/* "Package Required" modal options — the primary "Single class"
   button was var(--black) bg + var(--ink) text (both light after the
   theme swap) so the label + price + arrow all vanished on the white
   pill. Flip to a proper white pill with dark, readable content. */
.np-option-primary {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--page) !important;
}
.np-option-primary:hover {
    background: var(--gray-700) !important;
    border-color: var(--gray-700) !important;
    color: var(--page) !important;
}
.np-option-primary .np-option-tag,
.np-option-primary .np-option-price,
.np-option-primary .np-option-desc,
.np-option-primary .np-option-cta {
    color: var(--page) !important;
}
.np-option-primary .np-option-tag { color: rgba(12, 12, 12, 0.6) !important; }
.np-option-primary .np-option-desc { color: rgba(12, 12, 12, 0.72) !important; }

/* The non-primary "Packages" option sits on the dark modal — make it
   a subtle outlined card rather than a muddy dark-on-dark card. */
.np-option:not(.np-option-primary) {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--ink);
}
.np-option:not(.np-option-primary):hover {
    border-color: var(--ink);
    background: rgba(250, 250, 250, 0.03);
}
.np-option:not(.np-option-primary) .np-option-tag { color: var(--gray-500); }
.np-option:not(.np-option-primary) .np-option-price { color: var(--ink); }
.np-option:not(.np-option-primary) .np-option-desc { color: var(--gray-500); }
.np-option:not(.np-option-primary) .np-option-cta { color: var(--ink); }

/* Highlight the "Branch" row in the confirm modal so the user clearly
   sees which location they're booking at before confirming. */
.bm-row-branch .bm-row-value {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    background: rgba(252, 211, 77, 0.12);
    border: 1px solid rgba(252, 211, 77, 0.35);
    color: #FCD34D;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}
.bm-row-branch .bm-row-value::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FCD34D;
    box-shadow: 0 0 8px #FCD34D;
}

/* Booking-modal warning icon (already-booked state): amber gem circle
   matching the "today" / "next" accent used elsewhere. */
.bm-warn-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: #FCD34D;
    color: #1A1200;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 6px rgba(252, 211, 77, 0.18);
    animation: successPop 0.4s var(--ease);
}
.bm-warn-icon svg { width: 30px; height: 30px; }

/* Register stepper (YOUR DETAILS / ABOUT YOU / PAYMENT) — make every
   state readable. Default: faint outlined dark circle with a visible
   number; active: bright white pill with dark number; done: emerald
   fill with white checkmark. */
.rp-num {
    background: rgba(250, 250, 250, 0.06) !important;
    border: 1.5px solid var(--gray-300) !important;
    color: var(--gray-500) !important;
    font-weight: 700 !important;
}
.rp-step.active .rp-num {
    background: var(--ink) !important;
    color: var(--page) !important;
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 4px rgba(250, 250, 250, 0.08);
}
.rp-step.done .rp-num {
    background: #10B981 !important;
    color: transparent !important;
    border-color: #10B981 !important;
}
.rp-step.done .rp-num::before {
    color: #FFFFFF !important;
    font-weight: 800;
}
.rp-label { color: var(--gray-500) !important; }
.rp-step.active .rp-label { color: var(--ink) !important; font-weight: 800; }
.rp-step.done .rp-label { color: color-mix(in srgb, #10B981 55%, white) !important; }

/* Success "next steps" list (Member account active / Complete WhatsApp):
   done-state circle was white-on-white. Use emerald with white check,
   pending state uses a dark circle with white number. */
.success-next-num {
    background: var(--page);
    color: var(--ink);
    border-color: var(--gray-300);
    font-weight: 700;
}
.success-next-done .success-next-num {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}
.success-next-done .success-next-num svg { color: #FFFFFF; }

/* "STEP 1" / "STEP 2" eyebrow labels + arrow link — make them pop
   on the dark card background. */
.next-step-card .ns-eyebrow {
    color: var(--gray-500) !important;
    font-weight: 800;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    opacity: 1;
}
.next-step-card a,
.next-step-card .ns-link {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: 0.12em;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0.2rem;
    transition: gap 0.2s;
}
.next-step-card a:hover,
.next-step-card .ns-link:hover { gap: 0.7rem; }

/* ============================================================
   "Your Level" card — elevated, editorial, tier-themed
   ============================================================ */
.ah-level[data-tier="newcomer"]  { --tier-color: #E5E7EB; }
.ah-level[data-tier="rookie"]    { --tier-color: #38BDF8; }
.ah-level[data-tier="rising"]    { --tier-color: #10B981; }
.ah-level[data-tier="regular"]   { --tier-color: #A855F7; }
.ah-level[data-tier="dedicated"] { --tier-color: #EC4899; }
.ah-level[data-tier="elite"]     { --tier-color: #F97316; }
.ah-level[data-tier="master"]    { --tier-color: #FCD34D; }

.ah-level {
    --tier-color: #E5E7EB; /* fallback */
    position: relative;
    margin-top: 1.5rem;
    padding: 1.5rem 1.75rem 1.35rem;
    border-radius: 16px;
    border: 0 !important;
    outline: 0 !important;
    /* Obsidian/graphite card — deep charcoal with faint tier-colour
       haze bleeding from corners. Matches the overall black theme. */
    background:
        radial-gradient(700px 220px at 100% -20%, color-mix(in srgb, var(--tier-color) 22%, transparent), transparent 60%),
        radial-gradient(500px 180px at 0% 120%, color-mix(in srgb, var(--tier-color) 14%, transparent), transparent 60%),
        linear-gradient(180deg, #202020 0%, #141414 100%);
    /* Layered glow: a soft tier-coloured halo around the whole card
       + a floating drop shadow so the card clearly reads as an
       elevated panel on the pure-black page without needing a
       visible border. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 40px color-mix(in srgb, var(--tier-color) 14%, transparent),
        0 0 80px color-mix(in srgb, var(--tier-color) 8%, transparent),
        0 20px 40px rgba(0, 0, 0, 0.55),
        0 40px 80px -20px rgba(0, 0, 0, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
/* No left/top accent frames — user wants a clean card with no edge lines */
.ah-level::before,
.ah-level::after { content: none !important; display: none !important; }

.ah-level .ah-level-head {
    align-items: flex-start;
    margin-bottom: 1rem;
}
.ah-level .ah-level-label {
    color: color-mix(in srgb, var(--tier-color) 75%, #FFFFFF);
    font-weight: 800;
    letter-spacing: 0.22em;
    font-size: 0.62rem;
    margin-bottom: 0.35rem;
    text-shadow: 0 0 14px color-mix(in srgb, var(--tier-color) 25%, transparent);
}
.ah-level .ah-level-tier {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
/* Gem-shaped indicator next to the tier name */
.ah-level .ah-level-tier::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #fff 0%, color-mix(in srgb, var(--tier-color) 85%, white) 20%, var(--tier-color) 60%, color-mix(in srgb, var(--tier-color) 70%, #000) 100%);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--tier-color) 20%, transparent),
        0 0 10px color-mix(in srgb, var(--tier-color) 65%, transparent),
        inset 0 -1px 2px color-mix(in srgb, var(--tier-color) 50%, #000);
}
.ah-level .ah-level-counts { text-align: right; }
.ah-level .ah-level-attended {
    font-size: 1.6rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ah-level .ah-level-attended span {
    font-size: 0.85rem;
    color: var(--gray-500);
    font-family: var(--sans);
    font-weight: 500;
}
.ah-level .ah-level-attended-sub {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    font-weight: 800;
    color: color-mix(in srgb, var(--tier-color) 60%, #FFFFFF);
    margin-top: 0.35rem;
}

/* Progress bar — dark inset track with glowing tier-colour fill */
.ah-level .ah-level-bar {
    height: 8px;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    overflow: visible;
}
.ah-level .ah-level-bar-fill {
    height: 100%;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 45%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--tier-color) 70%, #1A1A1A) 0%,
            var(--tier-color) 100%);
    border-radius: 999px;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--tier-color) 22%, transparent),
        0 0 12px color-mix(in srgb, var(--tier-color) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
}
/* Trailing glow at fill edge */
.ah-level .ah-level-bar-fill::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tier-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tier-color) 85%, transparent),
                0 0 18px color-mix(in srgb, var(--tier-color) 45%, transparent);
}

.ah-level .ah-level-note {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin-top: 0.7rem;
    font-weight: 500;
}
.ah-level .ah-level-note strong {
    color: var(--ink);
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    background: color-mix(in srgb, var(--tier-color) 28%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier-color) 45%, transparent);
    border-radius: 999px;
    margin-left: 0.15rem;
    margin-right: 0.15rem;
}

/* Ladder: compact dots and labels */
.ah-level .ah-level-ladder {
    margin-top: 1.25rem;
    padding-top: 1.6rem;
    gap: 0.5rem;
}
.ah-level .ah-level-ladder::before {
    top: 1.6rem;
    height: 1px;
    background: linear-gradient(90deg,
        var(--tier-color) 0%,
        color-mix(in srgb, var(--tier-color) 50%, transparent) 15%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.1) 100%);
    opacity: 0.85;
}
/* Ladder labels on the dark card — lift from black to white */
.ah-level .ah-level-step .ah-level-step-name { color: var(--ink); opacity: 0.45; }
.ah-level .ah-level-step.reached .ah-level-step-name { color: var(--ink); opacity: 1; }
.ah-level .ah-level-step.current .ah-level-step-name { color: var(--ink); opacity: 1; }
.ah-level .ah-level-step-dot {
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
}
.ah-level .ah-level-step.reached .ah-level-step-dot {
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--tier-color) 22%, transparent),
        0 0 10px color-mix(in srgb, var(--tier-color) 60%, transparent);
}
.ah-level .ah-level-step.current .ah-level-step-dot {
    transform: scale(1.5);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--tier-color) 22%, transparent),
        0 0 14px color-mix(in srgb, var(--tier-color) 80%, transparent),
        0 0 26px color-mix(in srgb, var(--tier-color) 38%, transparent);
}
.ah-level .ah-level-step-name {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 0.6rem;
}
.ah-level .ah-level-step.current .ah-level-step-name {
    font-size: 0.68rem;
    font-weight: 800;
}

/* "Member" level chip on the account header. Pill and label were both
   var(--ink) (white) so the text vanished. Flip to a dark pill with
   bright label + glowing status dot in the CURRENT tier's colour so
   the chip stays visually consistent with the level ladder below. */
.level-chip {
    background: #141414;
    color: var(--ink);
    border: 1px solid var(--gray-300);
    --tier-color: #22C55E; /* fallback */
}
.level-chip-label { color: var(--ink); font-weight: 700; }
.level-chip-dot {
    background: var(--tier-color);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--tier-color) 25%, transparent),
        0 0 8px color-mix(in srgb, var(--tier-color) 55%, transparent);
}

/* Per-tier colour mapping — matches the dots in .ah-level-step. */
.level-chip[data-tier="pay-paid"]        { --tier-color: #22C55E; }
.level-chip[data-tier="pay-pending"]     { --tier-color: #F59E0B; }
.level-chip[data-tier="pay-failed"]      { --tier-color: #EF4444; }
.level-chip[data-tier="voucher-active"]  { --tier-color: #22C55E; }
.level-chip[data-tier="voucher-used"]    { --tier-color: #A855F7; }
.level-chip[data-tier="voucher-expired"] { --tier-color: #EF4444; }

.level-chip[data-tier="newcomer"]  { --tier-color: #E5E7EB; }
.level-chip[data-tier="rookie"]    { --tier-color: #38BDF8; }
.level-chip[data-tier="rising"]    { --tier-color: #10B981; }
.level-chip[data-tier="regular"]   { --tier-color: #A855F7; }
.level-chip[data-tier="dedicated"] { --tier-color: #EC4899; }
.level-chip[data-tier="elite"]     { --tier-color: #F97316; }
.level-chip[data-tier="master"]    { --tier-color: #FCD34D; }

/* Book a Class hero button — ensure contrast */
.hero-actions .btn-dark,
.hero-actions .btn {
    background: var(--ink);
    color: var(--page);
    border: 1px solid var(--ink);
}
.hero-actions .btn-dark:hover { background: var(--gray-700); color: var(--page); }
.hero-actions .btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.hero-actions .btn-outline:hover {
    background: var(--ink);
    color: var(--page);
}

/* Calendar — empty cells now blend into page (pure black) */
.month-cell.empty { background: var(--page); }
.month-cell {
    background: var(--gray-50);
    color: var(--ink);
}
.month-cell:hover:not(.empty):not(.today) {
    background: var(--gray-100);
}
/* Today cell — keep the default dark background so class level
   colours remain readable. Mark today with a small white pill
   around the date number instead. Clean, editorial, non-jarring. */
.month-cell.today {
    background: var(--gray-50);
    color: var(--ink);
}
.month-cell.today:not(.empty):hover { background: var(--gray-100); }
.month-cell.today .mc-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    height: 1.8em;
    padding: 0 0.4em;
    background: var(--ink);
    color: var(--page);
    border-radius: 999px;
    font-weight: 700;
    align-self: flex-start;
}

/* Ensure calendar grid lines remain visible on the new pure-black body */
.month-grid {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
}
.month-days { background: var(--gray-300); }
.month-header { background: var(--gray-100); border-bottom: 1px solid var(--gray-300); }

/* Week-view cells + today */
.calendar-day {
    background: var(--gray-50);
    color: var(--ink);
    border-color: var(--gray-300);
}
/* Week view today — keep dark bg, add a small white pill around
   the date number only. Class entries keep their normal dark style
   so level colours on the left border stay fully visible. */
.calendar-day.today {
    background: var(--gray-50);
    color: var(--ink);
}
.calendar-day.today .calendar-day-name { color: var(--gray-500) !important; }
.calendar-day.today .calendar-day-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    height: 1.8em;
    padding: 0 0.45em;
    margin-left: 0.45rem;
    background: var(--ink);
    color: var(--page) !important;
    border-radius: 999px;
    font-weight: 700;
}
.calendar-grid { background: var(--gray-300); }

/* Day-detail — dark editorial panel (no white box). Keeps the page
   visually consistent with the rest of the black-themed site. */
.day-detail {
    background: var(--gray-50);
    color: var(--ink);
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 2rem 2rem 1.75rem;
}
.day-detail-title { color: var(--ink); }
.day-detail-head { border-bottom-color: var(--gray-200); }
.day-detail-kicker, .day-detail-count { color: var(--gray-500); }
.day-detail-empty { color: var(--gray-500); }

.day-class {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-left-width: 3px;
    color: var(--ink);
}
.day-class:hover {
    background: #1A1A1A;
    border-color: var(--gray-300);
}
.day-class .day-class-time { color: var(--ink); font-weight: 600; }
.day-class .day-class-name { color: var(--ink); }
.day-class .day-class-meta { color: var(--gray-500); }

/* Inverted white "Book" pill — the one bright accent in the panel,
   so the CTA clearly reads as clickable. */
.day-class-book {
    background: var(--ink);
    color: var(--page);
    border: 1px solid var(--ink);
    font-weight: 600;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.day-class-book:hover {
    background: transparent;
    color: var(--ink);
    transform: translateY(-1px);
}
.day-class-locked {
    color: var(--gray-500);
    border-color: var(--gray-300);
    background: transparent;
}

/* Past classes inside the dark panel: muted, not white cards */
.day-class.day-class-past {
    background: transparent;
    border-color: var(--gray-200);
    opacity: 0.6;
}
.day-class.day-class-past .day-class-name,
.day-class.day-class-past .day-class-time,
.day-class.day-class-past .day-class-meta { color: var(--gray-500); }

/* Calendar "selected" state — lifted 3D cell. Keep the dark bg so
   level borders on class entries remain visible, and add a layered
   drop shadow + slight translateY so the chosen day visibly pops out
   of the grid. */
.month-cell.selected,
.calendar-day.selected {
    background: linear-gradient(180deg, #262626 0%, #1A1A1A 100%);
    color: var(--ink);
    z-index: 2;
    position: relative;
    border-radius: 10px;
    box-shadow:
        inset 0 2px 0 0 var(--ink),
        inset 0 0 0 1px var(--ink),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(250, 250, 250, 0.06);
    transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.month-cell.selected .mc-date,
.calendar-day.selected .calendar-day-date,
.calendar-day.selected .calendar-day-name {
    color: var(--ink) !important;
    font-weight: 700;
}
.calendar-day.selected .class-entry {
    /* 3D lifted treatment: brighter panel, soft drop-shadow beneath,
       subtle inner top highlight, and a slight translate so the
       selected day's class cards visibly "pop" off the column. */
    background: linear-gradient(180deg, #262626 0%, #1A1A1A 100%);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    /* keep per-level border-left color — do NOT set border-color here */
}
.calendar-day.selected .class-entry:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.65),
        0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.calendar-day.selected .class-entry .c-time,
.calendar-day.selected .class-entry .c-name { color: var(--ink); }
.calendar-day.selected .class-entry .c-instructor { color: var(--gray-500); }
.calendar-day.selected .calendar-day-head {
    /* White tab strip with dark text for the "FRI 24" row on the
       selected column. Sits inside the lifted dark cell and reads
       as the header of the selected day. */
    background: var(--ink);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin: -0.25rem -0.25rem 0.85rem;
    border: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.calendar-day.selected .calendar-day-head .calendar-day-name {
    color: var(--page) !important;
    font-weight: 700;
    opacity: 0.55;
}
.calendar-day.selected .calendar-day-head .calendar-day-date {
    color: var(--page) !important;
    font-weight: 700;
    background: transparent;
    padding: 0;
    margin: 0;
    min-width: auto;
    height: auto;
    display: inline;
    box-shadow: none;
    font-family: var(--serif);
    font-size: 1.15rem;
}

/* Month-view selected cell: date number shown as a white pill with
   dark text (same treatment as the week view's selected header). */
.month-cell.selected .mc-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    height: 1.9em;
    padding: 0 0.5em;
    background: var(--ink);
    color: var(--page) !important;
    border-radius: 999px;
    font-weight: 700;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

/* Today + selected — today's white date pill persists, the selected
   state adds the top accent bar / inset ring like any other picked
   day. Same dark cell bg so level colours stay visible. */
.month-cell.today.selected,
.calendar-day.today.selected {
    background: #1A1A1A;
    box-shadow: inset 0 2px 0 0 var(--ink), inset 0 0 0 1px var(--ink);
}
/* Restore dark text inside today's white date pill when the selected
   rule tries to flip it to white (white-on-white would hide it). */
.month-cell.today.selected .mc-date,
.calendar-day.today.selected .calendar-day-date {
    color: var(--page) !important;
}

/* Hover on the selected dark cell — slight brighten */
.month-cell.selected:not(.empty):hover { background: #262626; }
.calendar-day.selected:hover { background: #262626; }

/* Filter pills above calendar — dark pills on pure black */
.legend-pill, .filter-pill {
    background: rgba(250,250,250,0.04);
    color: var(--gray-600);
    border-color: var(--gray-300);
}
.legend-pill.active, .filter-pill.active {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}
.legend-pill-static { background: rgba(250,250,250,0.04); }

/* Featured pricing card remains dark by contrast with the now-white cards */
.pricing-card.featured {
    background: var(--page);
    color: var(--ink);
    border: 1px solid var(--ink);
}
.pricing-card.featured * { color: inherit; }
.pricing-card.featured .pricing-tier,
.pricing-card.featured .pricing-period,
.pricing-card.featured .pricing-desc,
.pricing-card.featured .pricing-features li { color: rgba(250,250,250,0.7); }
.pricing-card.featured .pricing-price,
.pricing-card.featured .pricing-badge { color: var(--ink); }
.pricing-card.featured .pricing-badge { background: var(--ink); color: var(--page); }
.pricing-card.featured .btn-white {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}

/* Account page — avatar circle was var(--black) bg + var(--ink) text
   (both light) so the initials were white-on-white. Flip so initials
   read on a bright circle. */
.ah-avatar {
    background: var(--ink);
    color: var(--page);
}

/* Level tier ladder — give each of the 7 tiers a distinct gem colour
   with a soft outer glow so the progression feels gamified and the
   current tier stands out. Reached tiers glow brightly, unreached
   tiers render as a thin outlined ring in the same hue. */
/* Position each tier dot ON the divider line at the top of the
   ladder (timeline-style) rather than below it. A hairline connector
   runs the full width of the ladder row and dots sit centred on it. */
.ah-level-ladder {
    gap: 0.5rem;
    position: relative;
    padding-top: 2rem;
    border-top: 0;
}
.ah-level-ladder::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 0; right: 0;
    height: 1px;
    background: var(--gray-200);
    z-index: 0;
}
.ah-level-step {
    position: relative;
    z-index: 1;
    padding-top: 0;
}
.ah-level-step-dot {
    width: 14px; height: 14px;
    border: 0;
    /* Every dot is filled with its full tier colour — no hollow rings,
       no dimmed fills. Reached tiers add a soft outer glow. */
    background: var(--tier-color);
    box-shadow: 0 0 0 2px rgba(12, 12, 12, 0.08);
    transition: transform 0.25s var(--ease), background 0.2s, box-shadow 0.2s;
    /* Pull the dot up so its centre sits on the connector line */
    margin-top: -7px;
}
.ah-level-step.reached .ah-level-step-dot {
    background: var(--tier-color);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--tier-color) 22%, transparent),
        0 0 14px color-mix(in srgb, var(--tier-color) 60%, transparent);
}
.ah-level-step.current .ah-level-step-dot {
    transform: scale(1.5);
    background: var(--tier-color);
    border-color: var(--tier-color);
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--tier-color) 22%, transparent),
        0 0 20px color-mix(in srgb, var(--tier-color) 75%, transparent),
        0 0 36px color-mix(in srgb, var(--tier-color) 35%, transparent);
    animation: tier-pulse 2.4s ease-in-out infinite;
}
@keyframes tier-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 6px color-mix(in srgb, var(--tier-color) 22%, transparent),
            0 0 20px color-mix(in srgb, var(--tier-color) 75%, transparent),
            0 0 36px color-mix(in srgb, var(--tier-color) 35%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 9px color-mix(in srgb, var(--tier-color) 12%, transparent),
            0 0 28px color-mix(in srgb, var(--tier-color) 85%, transparent),
            0 0 48px color-mix(in srgb, var(--tier-color) 45%, transparent);
    }
}

/* Per-tier colours, assigned by position in the 7-step grid */
.ah-level-step:nth-child(1) { --tier-color: #E5E7EB; } /* Newcomer — silver */
.ah-level-step:nth-child(2) { --tier-color: #38BDF8; } /* Rookie — sky */
.ah-level-step:nth-child(3) { --tier-color: #10B981; } /* Rising — emerald */
.ah-level-step:nth-child(4) { --tier-color: #A855F7; } /* Regular — purple */
.ah-level-step:nth-child(5) { --tier-color: #EC4899; } /* Dedicated — rose */
.ah-level-step:nth-child(6) { --tier-color: #F97316; } /* Elite — orange */
.ah-level-step:nth-child(7) { --tier-color: #FCD34D; } /* Master — gold */

/* Tier labels — solid BLACK on the white level card. Bold and high-
   contrast so they read against the bright panel. Unreached tiers
   render at lower opacity for subtle progression without changing
   the color. */
.ah-level-step .ah-level-step-name {
    color: var(--page);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.45;
}
.ah-level-step.reached .ah-level-step-name {
    color: var(--page);
    opacity: 1;
}
.ah-level-step.current .ah-level-step-name {
    color: var(--page);
    font-weight: 800;
    font-size: 0.76rem;
    opacity: 1;
}

/* Booking / purchase success modal details card. The "success" variant
   used var(--black) bg + var(--ink) text which after the theme swap
   is white-on-white — all values vanished. Flip to a dark panel with
   bright text. */
.bm-detail-card,
.bm-detail-card-success {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--ink);
}
.bm-detail-card .bm-row-label,
.bm-detail-card-success .bm-row-label { color: var(--gray-500); }
.bm-detail-card .bm-row-value,
.bm-detail-card-success .bm-row-value { color: var(--ink); }
.bm-detail-card .bm-row-divider,
.bm-detail-card-success .bm-row-divider { background: var(--gray-200); }

/* Success icon: same white-on-white bug — give it a gem green so
   the ✓ clearly reads as "done". */
.bm-success-icon {
    background: #10B981;
    color: #FFFFFF;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.18);
}
.bm-success-icon svg { color: #FFFFFF; }

/* Modal heading / subtext — re-assert readable colours on the dark
   modal panel. */
.bm-title { color: var(--ink); }
.bm-title em { color: var(--ink); }
.bm-sub { color: var(--gray-500); }
.bm-eyebrow { color: var(--gray-500); }

/* Upcoming bookings list (.cls-row cards): the date card and status
   pill inherited white-on-white because of the var swap. Force a
   readable palette inside the dark-theme account section. */
.cls-row {
    background: var(--gray-50);
    border-color: var(--gray-200);
}
.cls-date {
    background: var(--gray-100);
    border-color: var(--gray-300);
}
.cls-date .cls-day { color: var(--ink); }
.cls-date .cls-mo { color: var(--gray-500); }
.cls-date.cls-date-past {
    background: transparent;
    border-color: var(--gray-200);
    opacity: 0.55;
}
.cls-date.cls-date-past .cls-day,
.cls-date.cls-date-past .cls-mo { color: var(--gray-500); }
.cls-row .cls-name { color: var(--ink); }
.cls-row .cls-meta { color: var(--gray-500); }

/* Only the closest upcoming booking carries a "NEXT" pill now.
   Uses the same amber accent as the "today" calendar marker so the
   visual language is consistent across the app. */
.cls-status-upcoming,
.cls-status-next {
    background: #FCD34D;
    color: #1A1200;
    font-weight: 800;
    letter-spacing: 0.16em;
}

/* The row holding the next booking gets a subtle amber-tinted wash
   + amber left accent bar so it reads as "this is the one up next"
   without needing a loud pill on every row. */
.cls-row-next {
    background: linear-gradient(180deg,
        color-mix(in srgb, #FCD34D 10%, #141414) 0%,
        #141414 100%) !important;
    border-color: color-mix(in srgb, #FCD34D 35%, var(--gray-200)) !important;
    box-shadow: inset 3px 0 0 #FCD34D;
}
.cls-status-done {
    background: transparent;
    color: var(--gray-500);
    border: 1px solid var(--gray-300);
}
.cls-cancel-btn { color: var(--gray-500); }
.cls-cancel-btn:hover { color: #ef4444; }
.cls-cancel-lock { color: var(--gray-500); }

/* FAQ — editorial accordion. Drop the white card boxes in favour of
   a hairline-divided list on the pure-black section. Less "wall of
   white", more magazine-style Q&A. */
.faq-list {
    gap: 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}
.faq-item,
.faq-item[open] {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
}
.faq-item:last-child { border-bottom: 0; }
.faq-item .faq-q {
    color: var(--ink);
    font-size: 1.08rem;
    padding: 1.35rem 0.25rem;
    transition: color 0.2s;
}
.faq-item .faq-q:hover { color: var(--gray-600); }
.faq-item[open] .faq-q { color: var(--ink); }
.faq-item .faq-a { padding: 0 0.25rem 1.5rem; }
.faq-item .faq-a p {
    color: var(--gray-500);
    font-size: 0.95rem;
    line-height: 1.7;
}
.faq-item .faq-a a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.faq-item .faq-a strong { color: var(--ink); }
.faq-item .faq-chev {
    color: var(--gray-500);
    transition: transform 0.25s var(--ease), color 0.2s;
}
.faq-item:hover .faq-chev { color: var(--ink); }
.faq-item[open] .faq-chev {
    color: var(--ink);
    transform: rotate(180deg);
}
/* Subtle left-indent accent line when open, so it's clear which
   question is expanded without needing a box. */
.faq-item[open] .faq-q {
    box-shadow: inset 2px 0 0 var(--ink);
    padding-left: 1rem;
}
.faq-item[open] .faq-a { padding-left: 1rem; }

/* Stats tabs on account page — dark surface tabs */
.stats-tab {
    background: rgba(250,250,250,0.04);
    color: var(--gray-500);
    border: 1px solid var(--gray-300);
}
.stats-tab.active {
    background: var(--ink);
    color: var(--page);
    border-color: var(--ink);
}

/* ---- Payment: purchase-list detail affordances ---- */
.adm-name-link {
    color: var(--black);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-300);
}
.adm-name-link:hover {
    border-bottom-color: var(--black);
}
.pay-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--gray-400);
}

/* ===================================================================
   ACCOUNT HERO — MOBILE FIXES
   Appended at the end on purpose: the avatar and tier-ladder rules
   around line 9660 sit outside any media query, so an override placed
   with the other @media (max-width: 640px) account rules (~5807) loses
   to them on equal specificity.
   =================================================================== */
@media (max-width: 640px) {
    /* The greeting shared one flex row with the avatar and the action
       buttons, which are flex-shrink: 0 — leaving the name ~130px and
       wrapping it over three lines. Lift the actions out to their own row
       above the greeting (order: -1) and let the greeting scale with the
       viewport. */
    .ah-row { align-items: flex-start; }
    .ah-avatar {
        width: 56px; height: 56px;
        font-size: 1.35rem;
    }
    .ah-name {
        font-size: clamp(1.5rem, 7vw, 2rem);
        overflow-wrap: break-word;
    }
    .ah-actions {
        order: -1;
        width: 100%;
        margin-bottom: 0.25rem;
    }
    .ah-actions form { flex: 1; }

    /* Seven tiers can't fit one row on a phone, so the ladder wraps to 4 + 3.
       The connector is a single absolutely-positioned line on the container
       that spans only the first row, while every dot is pulled up by half its
       height to straddle it — so row two's dots floated above their labels
       with nothing under them. Draw the connector per step instead so it
       repeats on whatever rows the grid produces. */
    .ah-level-ladder::before,
    .ah-level .ah-level-ladder::before { display: none; }

    .ah-level-ladder,
    .ah-level .ah-level-ladder {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 0.5rem;
        row-gap: 1.6rem;
    }
    .ah-level-step::before {
        content: "";
        position: absolute;
        top: 0;
        left: -0.25rem;
        right: -0.25rem;
        height: 1px;
        background: var(--gray-200);
        z-index: 0;
    }
    .ah-level .ah-level-step::before { background: rgba(255, 255, 255, 0.16); }
    .ah-level-step-dot,
    .ah-level-step-name { position: relative; z-index: 1; }
}

/* ===================================================================
   WHATSAPP
   =================================================================== */
/* Footer icon: the social buttons inherit currentColor, so only the brand
   colour on hover needs saying. */
.social-btn[data-social="whatsapp"]:hover { color: #25D366; }

/* Floating contact button. Sits above page content but below any modal, and
   clears the iOS home indicator via safe-area insets. */
.wa-float {
    position: fixed;
    right: calc(1.5rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover {
    transform: scale(1.07);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35);
}
.wa-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 768px) {
    .wa-float { width: 50px; height: 50px; right: 1rem; bottom: 1rem; }
    .wa-float svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
    .wa-float:hover { transform: none; }
}

/* ===================================================================
   ERROR PAGES
   =================================================================== */
.error-hero { padding-bottom: 7rem; }
.error-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.5rem;
}
.error-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.75rem;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-100);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.error-links a {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
.error-links a:hover { color: var(--ink); }