/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-8yq8b10n27] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--admin-bg, #EEEDFC);
}

.admin-shell-bare[b-8yq8b10n27] {
    /* Login page: no header/sidebar chrome, just the plain canvas —
       AdminLogin.razor centers its own card within this. */
    align-items: center;
    justify-content: center;
}

/* ── Branded header ───────────────────────────────────────── */
.admin-header[b-8yq8b10n27] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.25rem;
    background: var(--admin-surface, #fff);
    border-bottom: 1px solid var(--admin-border, #eadff0);
    box-shadow: var(--admin-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.06));
    position: sticky;
    top: 0;
    z-index: 10;
    /* Actual rendered height (logo + padding + border) — the sidebar's
       sticky offset below must match this exactly, or the sidebar (whose
       natural position sits above that offset at scrollY 0) snaps down
       to it immediately, opening a visible gap under the header even
       before any scrolling happens. Confirmed by measuring both live:
       header bottom = 52px, sidebar was pinned to 61px. */
    --header-height: 52px;
}

.admin-header-logo[b-8yq8b10n27] {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.admin-header-wordmark[b-8yq8b10n27] {
    font-family: var(--font-display, inherit);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--primary, #fa1689);
}

.admin-header-badge[b-8yq8b10n27] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
    background: var(--admin-surface-2, #fff5fa);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-pill, 999px);
    padding: 0.15rem 0.6rem;
}

/* ── Dark-mode switch ─────────────────────────────────────── */
.admin-theme-toggle[b-8yq8b10n27] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
}

.admin-theme-toggle input[b-8yq8b10n27] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-theme-toggle-track[b-8yq8b10n27] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 46px;
    height: 24px;
    padding: 0 5px;
    border-radius: var(--radius-pill, 999px);
    background: var(--admin-hover, #eee);
    border: 1px solid var(--admin-border, #ddd);
    transition: background 0.2s ease;
}

.admin-theme-toggle-track i[b-8yq8b10n27] {
    font-size: 0.65rem;
    color: var(--admin-text-light, #999);
    position: relative;
    z-index: 1;
}

.admin-theme-toggle-thumb[b-8yq8b10n27] {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.admin-theme-toggle input:checked + .admin-theme-toggle-track[b-8yq8b10n27] {
    background: var(--primary, #fa1689);
    border-color: var(--primary, #fa1689);
}

.admin-theme-toggle input:checked + .admin-theme-toggle-track .admin-theme-toggle-thumb[b-8yq8b10n27] {
    transform: translateX(22px);
}

.admin-theme-toggle input:checked + .admin-theme-toggle-track i.fa-sun[b-8yq8b10n27] {
    color: rgba(255, 255, 255, 0.55);
}

.admin-theme-toggle input:checked + .admin-theme-toggle-track i.fa-moon[b-8yq8b10n27] {
    color: #fff;
}

.admin-theme-toggle input:focus-visible + .admin-theme-toggle-track[b-8yq8b10n27] {
    outline: 2px solid var(--primary, #fa1689);
    outline-offset: 2px;
}

/* ── Sidebar + body row ───────────────────────────────────── */
.admin-main-row[b-8yq8b10n27] {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.admin-sidebar[b-8yq8b10n27] {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--admin-surface, #fff);
    border-right: 1px solid var(--admin-border, #eadff0);
    padding: 1rem 0.75rem;
    position: sticky;
    top: 52px; /* must match .admin-header's real rendered height, see above */
    align-self: flex-start;
    height: calc(100vh - 52px);
}

/* NavLink is a framework component — confirmed by inspecting the live DOM
   that its rendered <a> does NOT receive this file's CSS-isolation scope
   attribute the way plain elements written directly in this .razor file
   do. ::deep is required for any selector that needs to match it. */
[b-8yq8b10n27] .admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--admin-text-light, #666);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

[b-8yq8b10n27] .admin-nav-item i {
    width: 1.1rem;
    text-align: center;
    color: var(--admin-text-light, #999);
    flex-shrink: 0;
}

[b-8yq8b10n27] .admin-nav-item:hover {
    background: var(--admin-hover, #f4f4f7);
    color: var(--admin-text, #333);
}

[b-8yq8b10n27] .admin-nav-item.active {
    background: var(--admin-surface-2, #fff5fa);
    color: var(--primary, #fa1689);
}

[b-8yq8b10n27] .admin-nav-item.active i {
    color: var(--primary, #fa1689);
}

/* ── "Page Content" collapsible group ─────────────────────── */
.admin-nav-group[b-8yq8b10n27] {
    display: flex;
    flex-direction: column;
}

.admin-nav-group-toggle[b-8yq8b10n27] {
    justify-content: flex-start;
}

.admin-nav-caret[b-8yq8b10n27] {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.admin-nav-group.expanded .admin-nav-caret[b-8yq8b10n27] {
    transform: rotate(180deg);
}

.admin-nav-subitems[b-8yq8b10n27] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.15rem 0 0.3rem;
}

/* Plain indented links, no bullet/list marker — just a lighter weight
   and extra left indent to read as "nested under Page Content". */
[b-8yq8b10n27] .admin-nav-subitem {
    display: block;
    padding: 0.5rem 0.85rem 0.5rem 2.55rem;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--admin-text-light, #666);
    text-decoration: none;
}

[b-8yq8b10n27] .admin-nav-subitem:hover {
    background: var(--admin-hover, #f4f4f7);
    color: var(--admin-text, #333);
}

[b-8yq8b10n27] .admin-nav-subitem.active {
    background: var(--admin-surface-2, #fff5fa);
    color: var(--primary, #fa1689);
    font-weight: 700;
}

.admin-nav-logout-form[b-8yq8b10n27] {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--admin-border, #eadff0);
}

[b-8yq8b10n27] .admin-nav-logout:hover {
    background: #fdecec;
    color: #c0392b;
}

[b-8yq8b10n27] .admin-nav-logout:hover i {
    color: #c0392b;
}

/* ── Content ──────────────────────────────────────────────── */
.admin-body[b-8yq8b10n27] {
    flex: 1;
    min-width: 0;
}

/* Tablet: sidebar becomes a horizontal top bar instead of a left column —
   still icon + label, just wrapping left-to-right instead of stacked. */
@media (max-width: 820px) {
    .admin-header[b-8yq8b10n27] {
        padding: 0.5rem 0.85rem;
    }

    .admin-main-row[b-8yq8b10n27] {
        flex-direction: column;
    }

    .admin-sidebar[b-8yq8b10n27] {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--admin-border, #eadff0);
    }

    [b-8yq8b10n27] .admin-nav-item {
        width: auto;
    }

    /* The Page Content dropdown needs its own full-width row when open —
       squeezed inline between the other wrapped nav items it'd be unreadable. */
    .admin-nav-group[b-8yq8b10n27] {
        width: 100%;
    }

    .admin-nav-logout-form[b-8yq8b10n27] {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        margin-left: auto;
    }
}

/* Phone: five icon+label items in a wrapping row gets cramped fast — drop
   to icon-only (with an accessible label instead of visible text) so the
   whole nav fits on one compact line. */
@media (max-width: 480px) {
    .admin-header-wordmark[b-8yq8b10n27] {
        font-size: 0.95rem;
    }

    .admin-header-badge[b-8yq8b10n27] {
        display: none;
    }

    .admin-sidebar[b-8yq8b10n27] {
        justify-content: space-between;
        padding: 0.4rem;
        gap: 0;
    }

    [b-8yq8b10n27] .admin-nav-item {
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.5rem 0.4rem;
        font-size: 0.6rem;
        text-align: center;
    }

    [b-8yq8b10n27] .admin-nav-item i {
        font-size: 1rem;
    }

    .admin-nav-logout-form[b-8yq8b10n27] {
        margin-left: 0;
    }
}
/* /Components/Layout/CtaBand.razor.rz.scp.css */
.cta-band[b-ok6sjrgpop] {
    margin-top: var(--space-3xl);
    padding-block: var(--space-2xl);
    background: var(--ink-800);
    color: rgba(255, 255, 255, 0.86);
    position: relative;
    overflow: clip;
    isolation: isolate;
}

/* Brand glow in the corner */
.cta-band[b-ok6sjrgpop]::before {
    content: "";
    position: absolute;
    bottom: -55%;
    right: -8%;
    width: min(620px, 80vw);
    aspect-ratio: 1;
    background: radial-gradient(circle,
                rgba(250, 22, 137, 0.42) 0%,
                transparent 68%);
    z-index: -1;
}

.cta-inner[b-ok6sjrgpop] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.cta-copy[b-ok6sjrgpop] {
    min-width: 0;
}

.cta-band h2[b-ok6sjrgpop] {
    color: #fff;
    font-size: var(--step-3);
    margin-bottom: 0.35rem;
}

.cta-band p[b-ok6sjrgpop] {
    font-size: var(--step-0);
    max-width: 56ch;
    color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 700px) {
    .cta-inner[b-ok6sjrgpop] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/Layout/Footer.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   SITE FOOTER
   ═══════════════════════════════════════════ */

.site-footer[b-54d45n6w6i] {
    margin-top: var(--space-3xl);
    background: var(--surface-cream);
    border-top: 1.5px solid var(--border-subtle);
    color: var(--text-light);
}

.footer-grid[b-54d45n6w6i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
    align-items: start;
}

/* Once there's room for a true 4-across footer, give the mailing-list
   column extra width so the form fields aren't cramped. */
@media (min-width: 1000px) {
    .footer-grid[b-54d45n6w6i] {
        grid-template-columns: 1.75fr 1fr 1.3fr 1fr;
    }
}

.footer-subscribe[b-54d45n6w6i] {
    min-width: 0;
}

/* Keep the form comfortable but stop it sprawling on ultra-wide screens */
.subscribe-form[b-54d45n6w6i],
.subscribe-success[b-54d45n6w6i] {
    max-width: 340px;
}

.subscribe-error[b-54d45n6w6i] {
    color: #c0392b;
    font-size: var(--step--1);
    margin: 0 0 var(--space-xs);
}

.footer-col[b-54d45n6w6i] {
    min-width: 0;
}

.footer-title[b-54d45n6w6i] {
    font-size: var(--step-0);
    font-weight: 800;
    color: var(--ink-800);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-xs);
    text-wrap: balance;
}

.footer-note[b-54d45n6w6i] {
    font-size: var(--step--1);
    color: var(--text-subtle);
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

/* ── Subscribe form ─────────────────────────── */
.subscribe-form[b-54d45n6w6i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.subscribe-names[b-54d45n6w6i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: var(--space-sm);
}

.subscribe-success[b-54d45n6w6i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--space-sm) var(--space-md);
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--success) 35%, transparent);
    border-radius: var(--radius-sm);
    color: #1d7a3a;
    font-size: var(--step--1);
    font-weight: 600;
}

/* ── Brand ──────────────────────────────────── */
.footer-brand[b-54d45n6w6i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
}

.footer-logo[b-54d45n6w6i] {
    width: clamp(110px, 12vw, 150px);
    height: auto;
    object-fit: contain;
}

.footer-tagline[b-54d45n6w6i] {
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary);
    text-transform: uppercase;
}

/* ── Contact ────────────────────────────────── */
.footer-address[b-54d45n6w6i] {
    font-style: normal;
    font-size: var(--step--1);
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.footer-contact-list[b-54d45n6w6i] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: var(--space-md);
}

.footer-contact-list li[b-54d45n6w6i] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--step--1);
}

.footer-contact-list i[b-54d45n6w6i] {
    width: 1rem;
    color: var(--primary);
    flex-shrink: 0;
}

.footer-contact-list a[b-54d45n6w6i] {
    color: var(--text-light);
    text-decoration: none;
    word-break: break-word;
}

.footer-contact-list a:hover[b-54d45n6w6i] {
    color: var(--primary);
    text-decoration: underline;
}

/* ── Socials ────────────────────────────────── */
.footer-socials[b-54d45n6w6i] {
    display: flex;
    gap: 0.6rem;
}

.footer-social[b-54d45n6w6i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
}

.footer-social:hover[b-54d45n6w6i] {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-3px);
}

/* ── Sitemap links ──────────────────────────── */
/* This <ul> has no class, so the global `ul[class]` reset skips it — clear
   the default bullets and 40px indent here (the indent also skewed the
   mobile centring). */
.footer-links ul[b-54d45n6w6i] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links a[b-54d45n6w6i] {
    font-size: var(--step--1);
    color: var(--text-light);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-fast) var(--ease-out);
}

.footer-links a:hover[b-54d45n6w6i] {
    color: var(--primary);
    padding-left: 4px;
}

/* ── Bottom bar ─────────────────────────────── */
.footer-bottom[b-54d45n6w6i] {
    border-top: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.footer-bottom-inner[b-54d45n6w6i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    padding-block: var(--space-md);
    font-size: 0.78rem;
    color: var(--text-subtle);
}

.footer-credit[b-54d45n6w6i] {
    opacity: 0.85;
}

/* Sits between the copyright and the location in the bottom bar. Google and
   Meta both require these URLs to resolve, so they need a permanent home. */
.footer-legal[b-54d45n6w6i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.footer-legal a[b-54d45n6w6i] {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover[b-54d45n6w6i],
.footer-legal a:focus-visible[b-54d45n6w6i] {
    color: var(--primary);
    text-decoration: underline;
}

@media (max-width: 560px) {
    .footer-bottom-inner[b-54d45n6w6i] {
        justify-content: center;
        text-align: center;
    }
}

/* ── Mobile: once the footer stacks into a single column, centre every
   section so the whole footer reads as one tidy centred stack (instead of
   the brand block being centred while the others stay left-aligned). ── */
@media (max-width: 640px) {
    .footer-col[b-54d45n6w6i] {
        text-align: center;
    }

    /* Centre the block-level form/success panel and let it size to content */
    .subscribe-form[b-54d45n6w6i],
    .subscribe-success[b-54d45n6w6i] {
        max-width: 340px;
        margin-inline: auto;
    }

    /* Icon + text rows: centre the row content, keep icon beside the text */
    .footer-contact-list li[b-54d45n6w6i],
    .footer-socials[b-54d45n6w6i],
    .footer-links ul[b-54d45n6w6i] {
        justify-content: center;
        align-items: center;
    }

    /* The links list is a flex column — centre its items horizontally */
    .footer-links ul[b-54d45n6w6i] {
        align-items: center;
    }

    /* Hover nudge shifts links off-centre; drop it on mobile */
    .footer-links a:hover[b-54d45n6w6i] {
        padding-left: 0;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   APP SHELL + HEADER
   ═══════════════════════════════════════════════════════════ */

.page[b-skospf7ysc] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

main[b-skospf7ysc] {
    flex: 1;
}

/* Keyboard-only skip link */
.skip-link[b-skospf7ysc] {
    position: absolute;
    top: -100px;
    left: var(--space-md);
    z-index: 200;
    padding: 0.7rem 1.2rem;
    background: var(--primary);
    color: #fff;
    font-size: var(--step--1);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top var(--dur) var(--ease-out);
}

.skip-link:focus[b-skospf7ysc] {
    top: 0;
    color: #fff;
}

/* ── Header shell ───────────────────────────────────────────── */
.site-header[b-skospf7ysc] {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
}

.header-inner[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: var(--header-h);
    padding-block: 0.5rem;
}

/* ── Book-a-class CTA ───────────────────────────────────────── */
.header-cta[b-skospf7ysc] {
    flex-shrink: 0;
    padding: 0.62rem 1.35rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--grad-pink);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.header-cta:hover[b-skospf7ysc] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ── Logo ───────────────────────────────────────────────────── */
.site-logo[b-skospf7ysc] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.logo-img[b-skospf7ysc] {
    width: auto;
    height: clamp(42px, 5vw, 56px);
    object-fit: contain;
    transition: transform var(--dur) var(--ease-out);
}

.site-logo:hover .logo-img[b-skospf7ysc] {
    transform: scale(1.04);
}

/* ── Desktop nav ────────────────────────────────────────────── */
.primary-nav[b-skospf7ysc] {
    margin-inline: auto;
}

.primary-nav > ul[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.4vw, 1.4rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.primary-nav li[b-skospf7ysc] {
    position: relative;
}

/* NavLink is a child component, so the <a> it renders does not receive this
   stylesheet's scope attribute. ::deep from .primary-nav (which we author)
   is required, otherwise none of these rules match. */
.primary-nav[b-skospf7ysc]  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-700);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}

/* Animated underline */
.primary-nav[b-skospf7ysc]  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-pink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
}

.primary-nav[b-skospf7ysc]  .nav-link:hover,
.primary-nav[b-skospf7ysc]  .nav-link.active {
    color: var(--primary);
}

.primary-nav[b-skospf7ysc]  .nav-link:hover::after,
.primary-nav[b-skospf7ysc]  .nav-link.active::after {
    transform: scaleX(1);
}

/* ── Dropdown ───────────────────────────────────────────────── */
.dropdown[b-skospf7ysc] {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    min-width: 208px;
    padding: 0.45rem;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);

    /* Hidden but animatable, and removed from the a11y tree */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
}

.has-dropdown:hover .dropdown[b-skospf7ysc],
.has-dropdown:focus-within .dropdown[b-skospf7ysc] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Invisible bridge so the pointer can travel to the menu */
.dropdown[b-skospf7ysc]::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -0.6rem;
    height: 0.6rem;
}

.dropdown a[b-skospf7ysc] {
    display: block;
    padding: 0.58rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.dropdown a:hover[b-skospf7ysc] {
    background: var(--pink-50);
    color: var(--primary);
}

/* ── Header actions ─────────────────────────────────────────── */
.header-actions[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    margin-left: auto;
}

.login-link[b-skospf7ysc] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-700);
    text-decoration: none;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    transition: border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
}

.login-link:hover[b-skospf7ysc] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--pink-50);
}

/* Session controls (shown when signed in) */
.logout-form[b-skospf7ysc] {
    margin: 0;
    display: block;
}

/* ── Signed-in user menu ────────────────────────────────────── */
.user-menu[b-skospf7ysc] {
    position: relative;
}

.login-user[b-skospf7ysc] {
    cursor: pointer;
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
}

/* The trigger opens the dropdown on hover/focus, so give it the same
   affordance as the login link (unlike the old static name span). */
.login-user:hover[b-skospf7ysc],
.user-menu:focus-within .login-user[b-skospf7ysc] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--pink-50);
}

.user-caret[b-skospf7ysc] {
    font-size: 0.62rem;
    transition: transform var(--dur) var(--ease-out);
}

.user-menu:hover .user-caret[b-skospf7ysc],
.user-menu:focus-within .user-caret[b-skospf7ysc] {
    transform: rotate(180deg);
}

/* Centred under the trigger, matching the primary-nav dropdowns. */
.user-dropdown[b-skospf7ysc] {
    left: 50%;
    right: auto;
    min-width: 180px;
    transform: translate(-50%, -8px);
}

.user-menu:hover .user-dropdown[b-skospf7ysc],
.user-menu:focus-within .user-dropdown[b-skospf7ysc] {
    transform: translate(-50%, 0);
}

.user-dropdown li + li[b-skospf7ysc] {
    margin-top: 0.15rem;
}

/* Log Out is a form submit button, styled to match the dropdown links */
.dropdown-btn[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.58rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--ink-700);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.dropdown-btn:hover[b-skospf7ysc] {
    background: var(--pink-50);
    color: var(--primary);
}

.user-dropdown a[b-skospf7ysc] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* ── Hamburger ──────────────────────────────────────────────── */
.nav-toggle[b-skospf7ysc] {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.nav-toggle-bars[b-skospf7ysc],
.nav-toggle-bars[b-skospf7ysc]::before,
.nav-toggle-bars[b-skospf7ysc]::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-800);
    transition: transform var(--dur) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle-bars[b-skospf7ysc]::before,
.nav-toggle-bars[b-skospf7ysc]::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars[b-skospf7ysc]::before { transform: translateY(-7px); }
.nav-toggle-bars[b-skospf7ysc]::after  { transform: translateY(7px); }

/* Morph into an X */
.nav-toggle-bars[data-open="true"][b-skospf7ysc] {
    background: transparent;
}

.nav-toggle-bars[data-open="true"][b-skospf7ysc]::before {
    transform: translateY(0) rotate(45deg);
}

.nav-toggle-bars[data-open="true"][b-skospf7ysc]::after {
    transform: translateY(0) rotate(-45deg);
}

/* ── Mobile drawer ──────────────────────────────────────────── */
.nav-scrim[b-skospf7ysc] {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(28, 0, 32, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}

.nav-scrim[data-open="true"][b-skospf7ysc] {
    opacity: 1;
    visibility: visible;
}

.mobile-nav[b-skospf7ysc] {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: min(320px, 84vw);
    height: 100dvh;
    padding: calc(var(--header-h) + var(--space-md)) var(--space-lg) var(--space-lg);
    background: var(--surface);
    border-left: 1px solid var(--border-subtle);
    box-shadow: -12px 0 40px rgba(28, 0, 32, 0.18);
    overflow-y: auto;

    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}

.mobile-nav[data-open="true"][b-skospf7ysc] {
    transform: translateX(0);
    visibility: visible;
}

.mobile-nav ul[b-skospf7ysc] {
    display: flex;
    flex-direction: column;
}

.mobile-nav li + li[b-skospf7ysc] {
    border-top: 1px solid var(--border-subtle);
}

.mobile-nav a:not(.btn)[b-skospf7ysc] {
    display: block;
    padding: 0.7rem 0.2rem;
    font-size: 0.92rem;
    color: var(--ink-700);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-fast) var(--ease-out);
}

.mobile-nav a:not(.btn):hover[b-skospf7ysc] {
    color: var(--primary);
    padding-left: 6px;
}

/* Top-level entries read as headings */
.mobile-nav .m-parent[b-skospf7ysc] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-800);
}

/* Indented jump-links beneath each parent */
.mobile-nav .m-sub[b-skospf7ysc] {
    padding-left: var(--space-sm);
    margin-bottom: var(--space-xs);
    border-left: 2px solid var(--border-subtle);
}

.mobile-nav .m-sub li + li[b-skospf7ysc] {
    border-top: 0;
}

.mobile-nav .m-sub a[b-skospf7ysc] {
    padding-block: 0.45rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-light);
}

/* ── Responsive switch ──────────────────────────────────────── */
@media (max-width: 1040px) {
    .primary-nav[b-skospf7ysc] {
        display: none;
    }

    .nav-toggle[b-skospf7ysc] {
        display: inline-flex;
    }

    .site-logo[b-skospf7ysc] {
        margin-right: auto;
    }
}

/* Below this the drawer's own Book a Class button takes over */
@media (max-width: 640px) {
    .header-cta[b-skospf7ysc] {
        display: none;
    }
}

@media (max-width: 520px) {
    .login-text[b-skospf7ysc] {
        display: none;
    }

    .login-link[b-skospf7ysc] {
        padding: 0.5rem 0.7rem;
    }
}

/* Above the drawer breakpoint the drawer must never appear */
@media (min-width: 1041px) {
    .mobile-nav[b-skospf7ysc],
    .nav-scrim[b-skospf7ysc] {
        display: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ql22jhlh84] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ql22jhlh84] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-ql22jhlh84] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-ql22jhlh84] {
    font-size: 1.1rem;
}

.bi[b-ql22jhlh84] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ql22jhlh84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ql22jhlh84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ql22jhlh84] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-ql22jhlh84] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ql22jhlh84] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ql22jhlh84] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ql22jhlh84]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-ql22jhlh84]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-ql22jhlh84]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-ql22jhlh84] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ql22jhlh84] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ql22jhlh84] {
        display: none;
    }

    .nav-scrollable[b-ql22jhlh84] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/PageHero.razor.rz.scp.css */
.page-hero[b-uwltmf4z4t] {
    position: relative;
    padding-block: var(--space-2xl);
    background: var(--grad-brand);
    color: #fff;
    overflow: clip;
    isolation: isolate;
}

/* Subtle light sweep */
.page-hero[b-uwltmf4z4t]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 0%,
                rgba(255, 255, 255, 0.28) 0%,
                transparent 62%);
    z-index: -1;
}

.page-hero-inner[b-uwltmf4z4t] {
    text-align: center;
}

.page-hero-eyebrow[b-uwltmf4z4t] {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-xs);
}

.page-hero h1[b-uwltmf4z4t] {
    color: #fff;
    font-size: var(--step-4);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

.page-hero-lead[b-uwltmf4z4t] {
    max-width: 62ch;
    margin: var(--space-sm) auto 0;
    font-size: var(--step-1);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.page-hero-extra[b-uwltmf4z4t] {
    margin-top: var(--space-lg);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dnkseo6odw],
.components-reconnect-repeated-attempt-visible[b-dnkseo6odw],
.components-reconnect-failed-visible[b-dnkseo6odw],
.components-pause-visible[b-dnkseo6odw],
.components-resume-failed-visible[b-dnkseo6odw],
.components-rejoining-animation[b-dnkseo6odw] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-retrying[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-failed[b-dnkseo6odw],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dnkseo6odw] {
    display: block;
}


#components-reconnect-modal[b-dnkseo6odw] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-dnkseo6odw 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-dnkseo6odw 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dnkseo6odw 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-dnkseo6odw]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-dnkseo6odw 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-dnkseo6odw {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-dnkseo6odw {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-dnkseo6odw {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-dnkseo6odw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-dnkseo6odw] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-dnkseo6odw] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-dnkseo6odw] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-dnkseo6odw] {
        background-color: #6b9ed2;
    }

/* NOTE: display (none/block) for this element is controlled by the
   show/hide toggle rules above — don't redeclare it here or it'll
   override that cascade and the animation will show even when closed. */
.components-rejoining-animation[b-dnkseo6odw] {
    width: 80px;
    height: 80px;
    text-align: center;
}

.reconnect-logo-flip[b-dnkseo6odw] {
    width: 64px;
    height: 64px;
    margin-top: 8px;
    object-fit: contain;
    animation: reconnect-logo-flip-b-dnkseo6odw 1.4s ease-in-out infinite;
}

@keyframes reconnect-logo-flip-b-dnkseo6odw {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reconnect-logo-flip[b-dnkseo6odw] {
        animation: none;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   About.razor.css
   Blazor CSS isolation — these rules only apply to About.razor.
   (Blazor auto-appends a scope attribute to every element this
   component renders, and rewrites these selectors to match it —
   so nothing here touches Classes, Membership, Contact, etc.)

   Design direction: "Backstage / Spotlight". Pole & aerial
   performers work under stage light and rigging — so the page
   borrows that vocabulary: a spotlight cone + hanging rig-line
   on every instructor card, and cue-sheet mono type for the
   credential/role tags, instead of a generic "glow card" look.
   ═══════════════════════════════════════════════════════════ */


/* Tokens — defined on .ffp (the component's root element) since
   :root never receives Blazor's scope attribute and would be a
   no-op selector in an isolated stylesheet. */
.ffp[b-cxbp5i0xkj] {
    --ab-ink: #17001c;
    --ab-ink-soft: #2c0b33;
    --ab-pink: #fa1689;
    --ab-pink-dark: #d4116f;
    --ab-violet: #a04fd2;
    --ab-violet-deep: #5a1f7a;
    --ab-glow-pink: rgba(250, 22, 137, 0.42);
    --ab-glow-violet: rgba(160, 79, 210, 0.42);
    --ab-display: 'Poppins', 'Helvetica Neue', sans-serif;
    --ab-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    /* Keep the horizontal slide-in reveals from spawning a scrollbar. */
    overflow-x: clip;
}

/* Offset anchored sections (e.g. /about#story) below the sticky header */
.ffp-section[b-cxbp5i0xkj] {
    scroll-margin-top: 90px;
}

/* ── Our Story: centered stack (heading · large video · justified copy) ── */
.story-centered[b-cxbp5i0xkj] {
    max-width: 1040px;
    margin-inline: auto;
    text-align: center;
}

.story-video[b-cxbp5i0xkj] {
    margin: var(--space-xl) auto;
    max-width: 960px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #000;
}

/* Copy sits below the video: readable measure, centred.
   Not justified — without hyphenation, justify stretches the word gaps
   into visible rivers of whitespace at this measure. Ragged-right keeps
   the spacing even and is easier to read. */
.story-prose[b-cxbp5i0xkj] {
    max-width: 780px;
    margin-inline: auto;
    text-wrap: pretty;
}

/* Poster button that opens the full-screen video modal (see effects.js,
   "Full-screen video modal") — replaces the old inline <video controls>. */
.story-video-trigger[b-cxbp5i0xkj] {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.story-video-poster[b-cxbp5i0xkj] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-video-play-icon[b-cxbp5i0xkj] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.story-video-play-icon i[b-cxbp5i0xkj] {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--ab-glow-pink);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15);
    transition: transform 0.2s ease, background 0.2s ease;
}

.story-video-trigger:hover .story-video-play-icon i[b-cxbp5i0xkj],
.story-video-trigger:focus-visible .story-video-play-icon i[b-cxbp5i0xkj] {
    transform: scale(1.08);
    background: var(--ab-pink);
}

/* The video itself, full-screen in a native <dialog> */
.story-video-modal[b-cxbp5i0xkj] {
    position: fixed;
    width: min(1100px, 92vw);
    max-width: 92vw;
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: 0;
    /* visible (not hidden) so the close button can sit above the video,
       fully outside it, instead of overlapping the frame */
    overflow: visible;
    background: #000;
    box-shadow: var(--shadow-lg);
}

.story-video-modal[b-cxbp5i0xkj]::backdrop {
    background: rgba(10, 0, 15, 0.88);
}

.story-video-modal-player[b-cxbp5i0xkj] {
    display: block;
    width: 100%;
    max-height: 92vh;
}

/* Sits above the video frame in the backdrop, not on top of the video */
.story-video-modal-close[b-cxbp5i0xkj] {
    position: absolute;
    top: -3.25rem;
    right: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.story-video-modal-close:hover[b-cxbp5i0xkj],
.story-video-modal-close:focus-visible[b-cxbp5i0xkj] {
    background: var(--ab-pink-dark);
}

/* ── Alternating two-column rows (Story, Mission, Vision, Founder) ──
   Copy on one side, big media on the other; the media side flips per row.
   Kept within the content width (no 100vw breakout) so nothing overflows. */
.about-row[b-cxbp5i0xkj] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2xl);
    text-align: left;
}

.about-row.reverse[b-cxbp5i0xkj] {
    flex-direction: row-reverse;
}

/* Equal columns — image and copy the same width */
.about-row-body[b-cxbp5i0xkj] {
    flex: 1 1 0;
    min-width: 0;
}

/* Text-only row (Mission + Vision side by side) — no media column, so
   each half gets its own centred column instead of a media/copy split. */
.about-row--split .about-row-body[b-cxbp5i0xkj] {
    text-align: center;
}

.about-row--split .ffp-kicker[b-cxbp5i0xkj] {
    justify-content: center;
}

.about-row--split .ffp-h2[b-cxbp5i0xkj]::after {
    left: 50%;
    transform: translateX(-50%);
}

.about-row--split .ffp-prose[b-cxbp5i0xkj],
.about-row--split .ffp-prose p[b-cxbp5i0xkj],
.about-row--split p[b-cxbp5i0xkj] {
    text-align: center;
}

/* A divider between the two halves reads better than the bare gap */
.about-row--split .about-row-body + .about-row-body[b-cxbp5i0xkj] {
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--space-2xl);
}

@media (max-width: 820px) {
    .about-row--split .about-row-body + .about-row-body[b-cxbp5i0xkj] {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border-subtle);
        padding-top: var(--space-lg);
    }
}

.about-row-media[b-cxbp5i0xkj] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;   /* let the inner media fill the column height */
}

/* Media fills its column so it's the same height as the copy */
.about-row .story-video[b-cxbp5i0xkj],
.about-row .ffp-founder-photo[b-cxbp5i0xkj] {
    width: 100%;
    aspect-ratio: auto;
}

/* Fill the row height with the poster button/image (no crop) */
.about-row .story-video-trigger[b-cxbp5i0xkj] {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    background: #000;
}

.about-row .story-video-poster[b-cxbp5i0xkj] {
    object-fit: contain;
}

/* Slightly smaller copy — ragged-right for the same reason as
   .story-prose above. */
.about-row .ffp-prose[b-cxbp5i0xkj],
.about-row .ffp-prose p[b-cxbp5i0xkj] {
    font-size: var(--step-0);
    text-wrap: pretty;
}

/* The standalone video loses its centering margins inside the row */
.about-row .story-video[b-cxbp5i0xkj] {
    margin: 0;
    max-width: none;
    width: 100%;
}

/* Square corners on the big media (no border radius) */
.about-row .story-video[b-cxbp5i0xkj],
.about-row .ffp-founder-photo[b-cxbp5i0xkj] {
    border-radius: 0;
}

/* Numbered circle badge above the heading (matches the reference) */
.about-num[b-cxbp5i0xkj] {
    display: inline-grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--space-md);
    border-radius: 50%;
    background: var(--pink-100);
    color: var(--ab-pink-dark);
    font-family: var(--ab-mono);
    font-size: 1rem;
    font-weight: 700;
}

/* Left-align the label + heading underline inside the row (they default to
   centred elsewhere) so the number, label and heading line up cleanly. */
.about-row .ffp-kicker[b-cxbp5i0xkj] {
    width: auto;
    justify-content: flex-start;
}

.about-row .ffp-h2[b-cxbp5i0xkj]::after {
    left: 0;
    transform: none;
}

/* Slide-in reveal, alternating sides per row. Animates `translate` (not
   `transform`), so it overrides the founder photo's own transform reveal
   cleanly and never fights a hover state. Falls back to fully visible. */
@keyframes about-slide-left-b-cxbp5i0xkj {
    from { opacity: 0; translate: -64px 0; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes about-slide-right-b-cxbp5i0xkj {
    from { opacity: 0; translate: 64px 0; }
    to   { opacity: 1; translate: 0 0; }
}

/* Stack on narrower screens — media above copy */
@media (max-width: 820px) {
    .about-row[b-cxbp5i0xkj],
    .about-row.reverse[b-cxbp5i0xkj] {
        flex-direction: column;
    }

    .about-row-media[b-cxbp5i0xkj] {
        flex: none;
        width: 100%;
    }

    .about-row .ffp-founder-photo[b-cxbp5i0xkj] {
        max-width: 340px;
        margin-inline: auto;
    }
}

/* ── Hero: plain brand gradient ── */
.ffp-hero[b-cxbp5i0xkj] {
    position: relative;
    overflow: hidden;
}

.ffp-hero h1[b-cxbp5i0xkj] {
    position: relative;
    font-family: var(--ab-display);
    letter-spacing: 0.01em;
}

.ffp-hero p[b-cxbp5i0xkj] {
    position: relative;
}

/* ── Section labels: cue-sheet mono kicker with a live cue-light dot ── */
.ffp-kicker[b-cxbp5i0xkj] {
    font-family: var(--ab-mono);
    letter-spacing: 0.22em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
}

.ffp-kicker[b-cxbp5i0xkj]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ab-pink);
    box-shadow: 0 0 8px 2px var(--ab-glow-pink);
}

.ffp-sub[b-cxbp5i0xkj] {
    font-family: var(--ab-mono);
    letter-spacing: 0.03em;
    font-size: var(--step-0);
}

/* ── Content copy: consistent body size across the About page ── */
.ffp-prose p[b-cxbp5i0xkj],
.about-row-body p[b-cxbp5i0xkj] {
    font-size: var(--step-0);
    line-height: 1.85;
}

/* ── Headings: display face + a short glowing beam underline ── */
.ffp-h2[b-cxbp5i0xkj] {
    font-family: var(--ab-display);
    position: relative;
    padding-bottom: 0.85rem;
    letter-spacing: -0.01em;
}

.ffp-h2[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ab-pink), var(--ab-violet));
    box-shadow: 0 0 10px var(--ab-glow-pink);
}

/* ── Prose: editorial drop cap on the opening line of each block ── */
.ffp-prose > p:first-child[b-cxbp5i0xkj]::first-letter {
    font-family: var(--ab-display);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--ab-pink);
    float: left;
    line-height: 0.85;
    padding: 0.1rem 0.35rem 0 0;
}

/* ── About the Founder: portrait beside the story ── */
.ffp-founder[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: var(--space-xl);
    align-items: start;
    text-align: left;
}

.ffp-founder-photo[b-cxbp5i0xkj] {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, var(--ab-ink) 0%, var(--ab-ink-soft) 100%);
    box-shadow: 0 18px 44px var(--ab-glow-pink);
}

/* real photo (when /images/founder.jpg exists) sits above the placeholder */
.ffp-founder-photo img[b-cxbp5i0xkj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

/* spotlight wash, echoing the instructor cards */
.ffp-founder-photo[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 65% 70% at 50% 12%, rgba(255,255,255,0.32), transparent 70%);
    pointer-events: none;
}

.ffp-founder-ph[b-cxbp5i0xkj] {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
}

.ffp-founder-ph i[b-cxbp5i0xkj] {
    font-size: 3rem;
    color: var(--ab-pink);
    filter: drop-shadow(0 0 16px var(--ab-glow-pink));
}

.ffp-founder-ph span[b-cxbp5i0xkj] {
    font-family: var(--ab-display);
    font-weight: 700;
    font-size: 1.05rem;
}

.ffp-founder-ph small[b-cxbp5i0xkj] {
    font-family: var(--ab-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

/* Portrait glides in from the side as it enters the viewport */
@keyframes founder-photo-in-b-cxbp5i0xkj {
    from { opacity: 0; transform: translateX(-28px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
    .ffp-founder[b-cxbp5i0xkj] {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .ffp-founder-photo[b-cxbp5i0xkj] {
        max-width: 300px;
        margin-inline: auto;
    }
}

/* ── Instructor cards: the signature spotlight + rig-line ── */
.ffp-instructor[b-cxbp5i0xkj] {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ffp-instructor:hover[b-cxbp5i0xkj] {
    transform: translateY(-6px);
}

.ffp-instructor:nth-child(odd):hover[b-cxbp5i0xkj] {
    box-shadow: 0 16px 36px var(--ab-glow-pink);
}

.ffp-instructor:nth-child(even):hover[b-cxbp5i0xkj] {
    box-shadow: 0 16px 36px var(--ab-glow-violet);
}

.ffp-instructor-photo[b-cxbp5i0xkj] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ab-ink) 0%, var(--ab-ink-soft) 100%);
}

/* the hanging rig-line, like an aerial silk dropping from the rig */
.ffp-instructor-photo[b-cxbp5i0xkj]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 42%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
}

/* the spotlight cone, brightest at the rig and fading to the floor */
.ffp-instructor-photo[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 70% at 50% 20%, rgba(255,255,255,0.35), transparent 70%);
    transition: opacity 0.3s ease;
    opacity: 0.7;
}

.ffp-instructor:hover .ffp-instructor-photo[b-cxbp5i0xkj]::after {
    opacity: 1;
}

.ffp-instructor-photo > *[b-cxbp5i0xkj] {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45));
}

/* Real instructor portraits fill the media panel (override the 130px
   emoji strip from the global .ffp-instructor-photo). */
.ffp-instructor-photo[b-cxbp5i0xkj] {
    height: 300px;
    padding: 0;
}

.ffp-instructor-photo img[b-cxbp5i0xkj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: none;
}

.ffp-instructor-body h3[b-cxbp5i0xkj] {
    font-family: var(--ab-display);
}

/* role/credential shown as a backstage cue-sheet badge */
.ffp-instructor-role[b-cxbp5i0xkj] {
    display: inline-block;
    font-family: var(--ab-mono);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    border: 1px solid rgba(160, 79, 210, 0.35);
    background: rgba(160, 79, 210, 0.06);
}

.ffp-instructor-body p em[b-cxbp5i0xkj] {
    color: var(--ab-pink-dark);
}

/* ── Instructors carousel (one featured coach at a time) ── */
/* No arrows now — the card uses the full width; dots sit below. */
.ffp-carousel[b-cxbp5i0xkj] {
    position: relative;
    padding-inline: 0;
    /* Gives the photo's flip (below) actual 3D depth on rotation. */
    perspective: 1400px;
}

.ffp-feature[b-cxbp5i0xkj] {
    display: grid;
    grid-template-columns: minmax(320px, 440px) 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

/* Text side still slides in; the photo (below) flips instead — both replay
   on every slide because @key re-creates the whole .ffp-feature element. */
.ffp-feature-body[b-cxbp5i0xkj] {
    animation: feature-slide-b-cxbp5i0xkj 0.5s var(--ease-out) both;
}

@keyframes feature-slide-b-cxbp5i0xkj {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ffp-feature-body[b-cxbp5i0xkj],
    .ffp-feature-photo[b-cxbp5i0xkj] {
        animation: none;
    }
}

/* Portrait rectangle. The photos are all 2:3, so a 2:3 frame shows the
   whole shot with no cropping. object-position is still set per-coach
   inline as a safety net for any non-2:3 image added later. */
.ffp-feature-photo[b-cxbp5i0xkj] {
    position: relative;
    border-radius: var(--radius-lg);
    animation: feature-photo-flip-b-cxbp5i0xkj 0.6s var(--ease-out) both;
}

@keyframes feature-photo-flip-b-cxbp5i0xkj {
    from { opacity: 0; transform: rotateY(-90deg); }
    to   { opacity: 1; transform: rotateY(0deg); }
}

.ffp-feature-photo img[b-cxbp5i0xkj] {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-lg);
    object-fit: cover;
    object-position: center;
    background: linear-gradient(160deg, var(--ab-ink), var(--ab-ink-soft));
    box-shadow: 0 18px 44px var(--ab-glow-pink);
}

/* Glossy highlight that follows the cursor (paired with data-tilt).
   --mx/--my are set by effects.js; inert without JS. */
.ffp-feature-photo[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    pointer-events: none;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                rgba(255, 255, 255, 0.30), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    mix-blend-mode: soft-light;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ffp-feature-photo:hover[b-cxbp5i0xkj]::after { opacity: 1; }
}

.ffp-feature-body[b-cxbp5i0xkj] {
    text-align: left;
}

.ffp-feature-awards[b-cxbp5i0xkj] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-family: var(--ab-mono);
    font-size: 0.78rem;
    color: var(--ab-violet-deep);
}

.ffp-feature-name[b-cxbp5i0xkj] {
    font-family: var(--ab-display);
    font-size: var(--step-3);
    line-height: 1.15;
    margin: 0.2rem 0 0.15rem;
}

.ffp-feature-handle[b-cxbp5i0xkj] {
    font-family: var(--ab-mono);
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.7rem;
}

.ffp-feature-desc[b-cxbp5i0xkj] {
    color: var(--ink-700);
    line-height: 1.75;
    font-size: var(--step-0);
}


/* Position dots */
.ffp-carousel-dots[b-cxbp5i0xkj] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-lg);
}

.ffp-carousel-dot[b-cxbp5i0xkj] {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: color-mix(in srgb, var(--ab-pink) 28%, transparent);
    transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.ffp-carousel-dot:hover[b-cxbp5i0xkj] {
    background: color-mix(in srgb, var(--ab-pink) 55%, transparent);
}

.ffp-carousel-dot.active[b-cxbp5i0xkj] {
    background: var(--ab-pink);
    transform: scale(1.35);
}

/* Social links row */
.ffp-instructor-socials[b-cxbp5i0xkj] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.ffp-instructor-socials a[b-cxbp5i0xkj] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--ab-pink);
    background: var(--pink-50);
    transition: background-color 0.2s var(--ease-out),
                color 0.2s var(--ease-out),
                transform 0.2s var(--ease-out);
}

.ffp-instructor-socials a:hover[b-cxbp5i0xkj] {
    background: var(--ab-pink);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 760px) {
    .ffp-carousel[b-cxbp5i0xkj] { padding-inline: 0; }

    .ffp-feature[b-cxbp5i0xkj] {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-lg);
    }

    .ffp-feature-photo[b-cxbp5i0xkj] {
        max-width: 340px;
    }

    .ffp-feature-body[b-cxbp5i0xkj] {
        text-align: center;
    }

    .ffp-feature-awards[b-cxbp5i0xkj] {
        align-items: center;
    }

    .ffp-instructor-socials[b-cxbp5i0xkj] {
        justify-content: center;
    }
}

/* Each card fades up as it scrolls into view. Opacity-only keeps the
   hover-lift transform above working (a filled transform animation would
   otherwise override :hover). */
@keyframes instructor-in-b-cxbp5i0xkj {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Pole specs: cue-sheet list with a glowing chevron marker ── */
.ffp-prose ul[b-cxbp5i0xkj] {
    list-style: none;
    margin-left: 0;
}

.ffp-prose li[b-cxbp5i0xkj] {
    position: relative;
    padding-left: 1.4rem;
    font-family: var(--ab-mono);
    font-size: var(--step-0);
}

.ffp-prose li[b-cxbp5i0xkj]::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--ab-pink);
    font-weight: 700;
    text-shadow: 0 0 6px var(--ab-glow-pink);
}

.ffp-prose li strong[b-cxbp5i0xkj] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── CTA: brand pill button gets a sweeping spotlight on hover ── */
.ffp-btn[b-cxbp5i0xkj] {
    position: relative;
    overflow: hidden;
}

.ffp-btn[b-cxbp5i0xkj]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

.ffp-btn:hover[b-cxbp5i0xkj]::after {
    left: 130%;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .ffp-prose > p:first-child[b-cxbp5i0xkj]::first-letter {
        font-size: 2.1rem;
    }

    .ffp-instructor-photo[b-cxbp5i0xkj]::before {
        height: 34%;
    }
}

/* ── Respect reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ffp-instructor[b-cxbp5i0xkj],
    .ffp-instructor-photo[b-cxbp5i0xkj]::after,
    .ffp-btn[b-cxbp5i0xkj]::after {
        transition: none;
    }

    .ffp-instructor:hover[b-cxbp5i0xkj] {
        transform: none;
    }
}
/* JS-driven reveals (effects.js). Replaces the scroll-driven versions that
   only ran in Chromium. Scoped under html.js-reveals so nothing is hidden
   when the script hasn't run. */
html.js-reveals .about-row-media[b-cxbp5i0xkj],
html.js-reveals .ffp-founder-photo[b-cxbp5i0xkj] {
    opacity: 0;
    translate: -32px 0;
    transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
}

html.js-reveals .about-row:nth-child(even) .about-row-media[b-cxbp5i0xkj] {
    translate: 32px 0;
}

html.js-reveals .about-row-media.is-revealed[b-cxbp5i0xkj],
html.js-reveals .ffp-founder-photo.is-revealed[b-cxbp5i0xkj] {
    opacity: 1;
    translate: 0 0;
}

/* Opacity only — a transform here would override the card's hover lift. */
html.js-reveals .ffp-instructor[b-cxbp5i0xkj] {
    opacity: 0;
    transition: opacity 0.6s var(--ease-out) var(--reveal-delay, 0ms);
}

html.js-reveals .ffp-instructor.is-revealed[b-cxbp5i0xkj] { opacity: 1; }
/* /Components/Pages/Admin/AdminLogin.razor.rz.scp.css */
.admin-login-wrap[b-c9xf080nof] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.admin-login-card[b-c9xf080nof] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 360px;
    padding: 2rem;
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    background: var(--admin-surface, #fff);
    box-shadow: var(--admin-shadow-md, 0 6px 22px rgba(250, 22, 137, 0.14));
    text-align: center;
}

.admin-login-logo[b-c9xf080nof] {
    object-fit: contain;
    margin-bottom: 0.25rem;
}

.admin-login-card h1[b-c9xf080nof] {
    font-size: 1.3rem;
    margin: 0;
    color: var(--admin-text, #222);
}

.admin-login-sub[b-c9xf080nof] {
    font-size: 0.85rem;
    color: var(--admin-text-light, #888);
    margin: 0 0 0.5rem;
}

.admin-login-error[b-c9xf080nof] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--status-failed-bg);
    color: var(--status-failed-fg);
    border-radius: 6px;
    font-size: 0.82rem;
    margin: 0;
}

.field[b-c9xf080nof] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
}

.field .label[b-c9xf080nof] {
    font-size: 0.78rem;
    color: var(--admin-text-light, #888);
}

.field .input[b-c9xf080nof] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--admin-border, #ccc);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--admin-surface, #fff);
    color: var(--admin-text, #222);
}

.field .input:focus[b-c9xf080nof] {
    outline: none;
    border-color: var(--primary, #fa1689);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #fa1689) 15%, transparent);
}
/* /Components/Pages/Admin/ContentEditor.razor.rz.scp.css */
.content-editor-wrap[b-c9ls4yee76] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.content-editor-head[b-c9ls4yee76] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.content-editor-head h1[b-c9ls4yee76] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0;
    color: var(--admin-text, #222);
}

.content-editor-status[b-c9ls4yee76] {
    font-size: 0.82rem;
    color: #0f5132;
    white-space: nowrap;
}

.content-editor-section[b-c9ls4yee76] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* A plain div header instead of <fieldset>/<legend> — the browser's
   default legend rendering breaks the fieldset border right around the
   text, which read as a stray line trailing off after the title. This
   gives full control: a small eyebrow-style label with its own
   underline, consistent everywhere. */
.content-editor-section-head[b-c9ls4yee76] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--admin-border, #f0e6ee);
}

.content-editor-section-head h2[b-c9ls4yee76] {
    font-family: var(--font-display, inherit);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary, #fa1689);
    margin: 0;
}

.content-editor-field[b-c9ls4yee76] {
    margin-bottom: 1rem;
}

.content-editor-field:last-child[b-c9ls4yee76] {
    margin-bottom: 0;
}

.content-editor-field label[b-c9ls4yee76] {
    display: block;
    font-size: 0.78rem;
    color: var(--admin-text-light, #888);
    margin-bottom: 0.3rem;
}

.content-editor-flag[b-c9ls4yee76] {
    margin-left: 0.5rem;
    font-size: 0.72rem;
    color: #92400e;
}

.content-editor-input[b-c9ls4yee76] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--admin-border, #ccc);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--admin-surface, #fff);
    color: var(--admin-text, #222);
}

.content-editor-input:focus[b-c9ls4yee76] {
    outline: none;
    border-color: var(--primary, #fa1689);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #fa1689) 15%, transparent);
}

.content-editor-image[b-c9ls4yee76] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.content-editor-preview[b-c9ls4yee76] {
    max-width: 220px;
    max-height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--admin-border, #eadff0);
}

.content-editor-error[b-c9ls4yee76] {
    color: #842029;
    font-size: 0.8rem;
}
/* /Components/Pages/Admin/ContentListEditor.razor.rz.scp.css */
.cle-items[b-ytplxdtho0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cle-item[b-ytplxdtho0] {
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--admin-shadow-xs, 0 1px 3px rgba(250, 22, 137, 0.08));
    padding: 1rem;
    background: var(--admin-surface, #fff);
    cursor: grab;
    transition: opacity 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cle-item:active[b-ytplxdtho0] {
    cursor: grabbing;
}

/* Text fields inside keep the normal text-input cursor — grabbing the
   card is still just "click anywhere that isn't already interactive". */
.cle-item textarea[b-ytplxdtho0],
.cle-item input[b-ytplxdtho0] {
    cursor: auto;
}

/* The card being picked up — dim it so the drop target reads clearly. */
.cle-item-dragging[b-ytplxdtho0] {
    opacity: 0.4;
}

/* Whatever card the pointer is currently over — a pink dashed outline
   signals "drop here" without needing a separate insertion-line element. */
.cle-item-drop-target[b-ytplxdtho0] {
    border-color: var(--primary, #fa1689);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #fa1689) 30%, transparent);
}

.cle-item-head[b-ytplxdtho0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

/* Decorative only — the whole card is the drag surface now, this is
   just the visual cue that it's grabbable. */
.cle-item-grip[b-ytplxdtho0] {
    color: var(--admin-text-light, #bbb);
}

.cle-item-num[b-ytplxdtho0] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--admin-text-light, #888);
}

.cle-item-actions[b-ytplxdtho0] {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.cle-item-remove[b-ytplxdtho0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm, 8px);
    color: var(--admin-text-light, #999);
    background: transparent;
    border: 1px solid var(--admin-border, #eadff0);
}

.cle-item-remove:hover[b-ytplxdtho0] {
    color: #c0392b;
    background: #fdecec;
    border-color: #f5b7b1;
}

.cle-field[b-ytplxdtho0] {
    margin-bottom: 0.6rem;
}

.cle-field label[b-ytplxdtho0] {
    display: block;
    font-size: 0.75rem;
    color: var(--admin-text-light, #888);
    margin-bottom: 0.2rem;
}

.cle-field textarea[b-ytplxdtho0] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--admin-border, #ccc);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--admin-surface, #fff);
    color: var(--admin-text, #222);
}

.cle-field textarea:focus[b-ytplxdtho0] {
    outline: none;
    border-color: var(--primary, #fa1689);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #fa1689) 15%, transparent);
}

.content-editor-image[b-ytplxdtho0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.content-editor-preview[b-ytplxdtho0] {
    max-width: 220px;
    max-height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--admin-border, #e0e0e0);
}

.content-editor-error[b-ytplxdtho0] {
    color: #842029;
    font-size: 0.8rem;
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
.dash-wrap[b-kftb1a0q31] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

.dash-head[b-kftb1a0q31] {
    margin-bottom: 1.5rem;
}

.dash-head h1[b-kftb1a0q31] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text, #222);
}

.dash-head p[b-kftb1a0q31] {
    color: var(--admin-text-light, #888);
    margin: 0;
    font-size: 0.9rem;
}

/* ── Stat cards ───────────────────────────────────────────── */
.dash-stats[b-kftb1a0q31] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-stat[b-kftb1a0q31] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    padding: 1rem 1.1rem;
}

.dash-stat-icon[b-kftb1a0q31] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.dash-stat-pink .dash-stat-icon[b-kftb1a0q31] { background: var(--primary, #fa1689); }
.dash-stat-green .dash-stat-icon[b-kftb1a0q31] { background: #16b981; }
.dash-stat-purple .dash-stat-icon[b-kftb1a0q31] { background: #7c5cfa; }
.dash-stat-blue .dash-stat-icon[b-kftb1a0q31] { background: #2f8fe0; }
.dash-stat-amber .dash-stat-icon[b-kftb1a0q31] { background: #f5a623; }

.dash-stat-body[b-kftb1a0q31] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-stat-value[b-kftb1a0q31] {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--admin-text, #222);
    line-height: 1.2;
}

.dash-stat-label[b-kftb1a0q31] {
    font-size: 0.78rem;
    color: var(--admin-text-light, #888);
}

/* ── Content grid ─────────────────────────────────────────── */
.dash-grid[b-kftb1a0q31] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.dash-side[b-kftb1a0q31] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dash-card[b-kftb1a0q31] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    padding: 1.1rem 1.25rem 1.25rem;
}

.dash-card-head[b-kftb1a0q31] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.dash-card-head h2[b-kftb1a0q31] {
    font-family: var(--font-display, inherit);
    font-size: 1rem;
    margin: 0;
    color: var(--admin-text, #222);
}

.dash-card-link[b-kftb1a0q31] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary, #fa1689);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.dash-card-link:hover[b-kftb1a0q31] {
    text-decoration: underline;
}

.dash-table-wrap[b-kftb1a0q31] {
    box-shadow: none;
    border: 1px solid var(--admin-border, #eee);
}

/* ── Recent-activity mini lists ───────────────────────────── */
.dash-list[b-kftb1a0q31] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-list li[b-kftb1a0q31] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--admin-border, #f0f0f0);
    font-size: 0.85rem;
}

.dash-list li:last-child[b-kftb1a0q31] {
    border-bottom: none;
    padding-bottom: 0;
}

.dash-list-title[b-kftb1a0q31] {
    font-weight: 600;
    color: var(--admin-text, #333);
    flex-shrink: 0;
}

.dash-list-sub[b-kftb1a0q31] {
    color: var(--admin-text-light, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.dash-list-date[b-kftb1a0q31] {
    color: var(--admin-text-light, #aaa);
    font-size: 0.78rem;
    flex-shrink: 0;
}

/* ── Shared table look (same as the other admin review pages —
     CSS isolation means it has to be repeated per component) ── */
.admin-review-empty[b-kftb1a0q31] {
    color: var(--admin-text-light, #888);
    padding: 1.5rem 0;
    text-align: center;
}

.admin-review-table-wrap[b-kftb1a0q31] {
    background: var(--admin-surface, #fff);
    overflow-x: auto;
    border-radius: var(--radius-md, 12px);
}

.admin-review-table[b-kftb1a0q31] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-review-table th[b-kftb1a0q31],
.admin-review-table td[b-kftb1a0q31] {
    padding: 0.6rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--admin-border, #eee);
    color: var(--admin-text, #222);
}

.admin-review-table thead th[b-kftb1a0q31] {
    background: var(--admin-surface-2, #fafafa);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
}

.admin-review-table tbody tr:last-child td[b-kftb1a0q31] {
    border-bottom: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
    .dash-grid[b-kftb1a0q31] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dash-stats[b-kftb1a0q31] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .dash-list li[b-kftb1a0q31] {
        flex-wrap: wrap;
    }

    .dash-list-sub[b-kftb1a0q31] {
        white-space: normal;
    }
}
/* /Components/Pages/Admin/Inquiries.razor.rz.scp.css */
.admin-review-wrap[b-tfwyz10meh] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

/* One card for the whole page — header and table are both inside it
   (previously two separate white boxes stacked with a gap between). */
.admin-review-card[b-tfwyz10meh] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    overflow: hidden;
}

.admin-review-head[b-tfwyz10meh] {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--admin-border, #eee);
}

.admin-review-head h1[b-tfwyz10meh] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text, #222);
}

.admin-review-head p[b-tfwyz10meh] {
    color: var(--admin-text-light, #888);
    margin: 0;
    font-size: 0.9rem;
}

.admin-review-empty[b-tfwyz10meh] {
    color: var(--admin-text-light, #888);
    padding: 2rem 0;
    text-align: center;
}

.admin-review-table-wrap[b-tfwyz10meh] {
    overflow-x: auto;
    margin: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--admin-border, #e5dde8);
    border-radius: var(--radius-sm, 8px);
}

.admin-review-table[b-tfwyz10meh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-review-table th[b-tfwyz10meh],
.admin-review-table td[b-tfwyz10meh] {
    padding: 0.85rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--admin-border, #eee);
    border-right: 1px solid var(--admin-border, #eee);
    vertical-align: top;
    color: var(--admin-text, #222);
}

.admin-review-table th:last-child[b-tfwyz10meh],
.admin-review-table td:last-child[b-tfwyz10meh] {
    border-right: none;
}

.admin-review-table thead th[b-tfwyz10meh] {
    background: var(--admin-surface-2, #fafafa);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
    white-space: nowrap;
}

.admin-review-table tbody tr:last-child td[b-tfwyz10meh] {
    border-bottom: none;
}

/* ── Sortable column headers ─────────────────────────────── */
.admin-review-table th.sortable[b-tfwyz10meh] {
    cursor: pointer;
    user-select: none;
}

.admin-review-table th.sortable:hover[b-tfwyz10meh] {
    color: var(--primary, #fa1689);
}

.admin-review-table th .sort-icon[b-tfwyz10meh] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.35;
}

.admin-review-table th.sort-active[b-tfwyz10meh] {
    color: var(--primary, #fa1689);
}

.admin-review-table th.sort-active .sort-icon[b-tfwyz10meh] {
    opacity: 1;
}

.admin-review-message[b-tfwyz10meh] {
    max-width: 320px;
    white-space: pre-wrap;
}
/* /Components/Pages/Admin/PaymentReview.razor.rz.scp.css */
/* Wider than the other admin pages: this table carries eight columns
   (reference, booking, payment type, sender, payment ref, amount, proof,
   two actions) and was overflowing 1100px into a horizontal scroll. */
.admin-review-wrap[b-eh0lmfcpdc] {
    max-width: min(1600px, 96vw);
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

/* One card for the whole page — header and table are both inside it
   (previously two separate white boxes stacked with a gap between). */
.admin-review-card[b-eh0lmfcpdc] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    overflow: hidden;
}

.admin-review-head[b-eh0lmfcpdc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--admin-border, #eee);
}

.admin-review-head h1[b-eh0lmfcpdc] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text, #222);
}

.admin-review-head p[b-eh0lmfcpdc] {
    color: var(--admin-text-light, #888);
    margin: 0;
    font-size: 0.9rem;
}

.admin-review-empty[b-eh0lmfcpdc] {
    color: var(--admin-text-light, #888);
    padding: 2rem 0;
    text-align: center;
}

.admin-review-table-wrap[b-eh0lmfcpdc] {
    overflow-x: auto;
    margin: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--admin-border, #e5dde8);
}

.admin-review-table[b-eh0lmfcpdc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-review-table th[b-eh0lmfcpdc],
.admin-review-table td[b-eh0lmfcpdc] {
    padding: 0.85rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--admin-border, #eee);
    border-right: 1px solid var(--admin-border, #eee);
    color: var(--admin-text, #222);
}

.admin-review-table th:last-child[b-eh0lmfcpdc],
.admin-review-table td:last-child[b-eh0lmfcpdc] {
    border-right: none;
}

.admin-review-table thead th[b-eh0lmfcpdc] {
    background: var(--admin-surface-2, #fafafa);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
}

.admin-review-table tbody tr:last-child td[b-eh0lmfcpdc] {
    border-bottom: none;
}

/* ── Sortable column headers ─────────────────────────────── */
.admin-review-table th.sortable[b-eh0lmfcpdc] {
    cursor: pointer;
    user-select: none;
}

.admin-review-table th.sortable:hover[b-eh0lmfcpdc] {
    color: var(--primary, #fa1689);
}

.admin-review-table th .sort-icon[b-eh0lmfcpdc] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.35;
}

.admin-review-table th.sort-active[b-eh0lmfcpdc] {
    color: var(--primary, #fa1689);
}

.admin-review-table th.sort-active .sort-icon[b-eh0lmfcpdc] {
    opacity: 1;
}

.admin-review-noproof[b-eh0lmfcpdc] {
    color: var(--admin-text-light, #ccc);
}

.admin-review-actions[b-eh0lmfcpdc] {
    display: flex;
    gap: 0.4rem;
    white-space: nowrap;
}

/* The global .btn is sized for page CTAs — its padding, uppercase tracking
   and min-height push this column past the table width, so the second
   button ends up clipped behind the horizontal scroll. Compact them to
   table scale instead. */
/* Squared and equal-width so the pair reads as one control, matching the
   square-edged treatment used elsewhere. The global .btn is a pill sized
   for page CTAs. */
.admin-review-actions .btn[b-eh0lmfcpdc] {
    padding: 0.4rem 0.9rem;
    min-width: 5.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    min-height: 0;
    border-radius: 0;
    text-align: center;
}

@media (max-width: 700px) {
    /* Stack rather than shrink further — side-by-side at this width makes
       both buttons too small to hit reliably. */
    .admin-review-actions[b-eh0lmfcpdc] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Admin/Subscribers.razor.rz.scp.css */
.admin-review-wrap[b-9bvk97cv02] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

/* One card for the whole page — header and table are both inside it
   (previously two separate white boxes stacked with a gap between). */
.admin-review-card[b-9bvk97cv02] {
    background: var(--admin-surface, #fff);
    border: 1px solid var(--admin-border, #eadff0);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--admin-shadow, 0 3px 12px rgba(250, 22, 137, 0.10));
    overflow: hidden;
}

.admin-review-head[b-9bvk97cv02] {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--admin-border, #eee);
}

.admin-review-head h1[b-9bvk97cv02] {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--admin-text, #222);
}

.admin-review-head p[b-9bvk97cv02] {
    color: var(--admin-text-light, #888);
    margin: 0;
    font-size: 0.9rem;
}

.admin-review-empty[b-9bvk97cv02] {
    color: var(--admin-text-light, #888);
    padding: 2rem 0;
    text-align: center;
}

.admin-review-table-wrap[b-9bvk97cv02] {
    overflow-x: auto;
    margin: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--admin-border, #e5dde8);
    border-radius: var(--radius-sm, 8px);
}

.admin-review-table[b-9bvk97cv02] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-review-table th[b-9bvk97cv02],
.admin-review-table td[b-9bvk97cv02] {
    padding: 0.85rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--admin-border, #eee);
    border-right: 1px solid var(--admin-border, #eee);
    color: var(--admin-text, #222);
}

.admin-review-table th:last-child[b-9bvk97cv02],
.admin-review-table td:last-child[b-9bvk97cv02] {
    border-right: none;
}

.admin-review-table thead th[b-9bvk97cv02] {
    background: var(--admin-surface-2, #fafafa);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--admin-text-light, #888);
}

.admin-review-table tbody tr:last-child td[b-9bvk97cv02] {
    border-bottom: none;
}

/* ── Sortable column headers ─────────────────────────────── */
.admin-review-table th.sortable[b-9bvk97cv02] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.admin-review-table th.sortable:hover[b-9bvk97cv02] {
    color: var(--primary, #fa1689);
}

.admin-review-table th .sort-icon[b-9bvk97cv02] {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.35;
}

.admin-review-table th.sort-active[b-9bvk97cv02] {
    color: var(--primary, #fa1689);
}

.admin-review-table th.sort-active .sort-icon[b-9bvk97cv02] {
    opacity: 1;
}
/* /Components/Pages/Blog.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   BLOG
   ═══════════════════════════════════════════ */

/* ── Shared meta row ────────────────────────── */
.post-meta[b-cm2ffbgrmv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.post-date[b-cm2ffbgrmv] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* ── Featured post ──────────────────────────── */
.featured-post[b-cm2ffbgrmv] {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.featured-media[b-cm2ffbgrmv] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 250px;
    font-size: clamp(3.5rem, 9vw, 6rem);
    background: var(--grad-brand);
    overflow: hidden;
}

/* Drop-in photo overlays the emoji; if it's absent/fails, onerror removes it
   and the emoji shows through. Shared by the featured + post media tiles. */
.media-photo[b-cm2ffbgrmv] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.featured-body[b-cm2ffbgrmv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xl);
}

.featured-body h2[b-cm2ffbgrmv] {
    font-size: var(--step-3);
    color: var(--primary);
}

.featured-body p[b-cm2ffbgrmv] {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-light);
    max-width: 56ch;
    margin-bottom: var(--space-sm);
}

/* ── Post cards ─────────────────────────────── */
.posts-section[b-cm2ffbgrmv] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.post-card[b-cm2ffbgrmv] {
    display: flex;
    flex-direction: column;
}

.post-media[b-cm2ffbgrmv] {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    background: linear-gradient(135deg, var(--pink-400), var(--plum-400));
    overflow: hidden;
}

.post-body[b-cm2ffbgrmv] {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    gap: var(--space-2xs);
    padding: var(--space-lg);
}

.post-body h3[b-cm2ffbgrmv] {
    font-size: var(--step-1);
    color: var(--ink-800);
}

.post-body p[b-cm2ffbgrmv] {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: var(--space-md);
}

.posts-note[b-cm2ffbgrmv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: var(--space-xl);
    font-size: var(--step--1);
    color: var(--text-light);
}

.posts-note i[b-cm2ffbgrmv] {
    color: var(--primary);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 820px) {
    .featured-post[b-cm2ffbgrmv] {
        grid-template-columns: 1fr;
    }

    .featured-media[b-cm2ffbgrmv] {
        min-height: 170px;
    }

    .featured-body[b-cm2ffbgrmv] {
        padding: var(--space-lg);
    }
}
/* /Components/Pages/BookingDetail.razor.rz.scp.css */
/* ── Booking Wrapper ─────────────────────────────────── */
.booking-wrapper[b-oanx12vtwm] {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    position: relative;
}

.booking-title[b-oanx12vtwm] {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #2a002e;
}

/* ── Validation ──────────────────────────────────────── */
.input-error[b-oanx12vtwm] {
    border-bottom-color: #c0392b !important;
    background: #fff5f5;
}

.field-error[b-oanx12vtwm] {
    font-size: 0.75rem;
    color: #c0392b;
    margin-top: 0.15rem;
}

/* ── Pill Stepper ────────────────────────────────────── */
.stepper-wrapper[b-oanx12vtwm] {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.stepper[b-oanx12vtwm] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 5px;
    gap: 3px;
    box-shadow: 0 4px 20px rgba(250, 22, 137, 0.18);
}

.step-pill[b-oanx12vtwm] {
    padding: 0.48rem 1.2rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: default;
    border: none;
    background: transparent;
    color: #bbb;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    line-height: 1.4;
}

.step-pill.active[b-oanx12vtwm] {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(250, 22, 137, 0.35);
}

.step-pill.completed[b-oanx12vtwm] {
    color: #555;
    cursor: pointer;
}

.step-pill.completed:hover[b-oanx12vtwm] {
    background: rgba(250, 22, 137, 0.08);
    color: var(--primary);
}

.step-pill.pending[b-oanx12vtwm] {
    color: #ccc;
    cursor: default;
}

/* ── Form Card ───────────────────────────────────────── */
.form-card[b-oanx12vtwm] { border: 1px solid var(--border); border-radius: 6px; padding: 1.5rem 2rem; margin-bottom: 1.5rem; background: #fff; }
.section-label[b-oanx12vtwm] { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 1.25rem; }
.form-grid[b-oanx12vtwm] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3[b-oanx12vtwm] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.field-group[b-oanx12vtwm] { display: flex; flex-direction: column; gap: 0.3rem; }
.field-group.span-full[b-oanx12vtwm] { grid-column: 1 / -1; }

.field-label[b-oanx12vtwm] { font-size: 0.75rem; color: var(--text-light); font-weight: 500; }

.field-input[b-oanx12vtwm] {
    background: var(--bg-field); border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--text);
    outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box;
}
.field-input:focus[b-oanx12vtwm] { border-bottom-color: var(--primary); }

.field-select[b-oanx12vtwm] {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}

/* ── Summary Box ─────────────────────────────────────── */
.summary-box[b-oanx12vtwm] { margin-top: 1.5rem; background: #fff0f7; border: 1px solid rgba(250,22,137,0.25); border-radius: var(--radius); padding: 1rem 1.25rem; }
.summary-title[b-oanx12vtwm] { font-size: 0.78rem; font-weight: 600; color: var(--primary); letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.summary-row[b-oanx12vtwm] { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 0.3rem 0; color: var(--text-light); border-bottom: 1px dashed rgba(250,22,137,0.2); }
.summary-row:last-child[b-oanx12vtwm] { border-bottom: none; }
.summary-row strong[b-oanx12vtwm] { color: var(--text); }
.summary-total[b-oanx12vtwm] { font-weight: 700; color: var(--primary); }

/* ── Review ──────────────────────────────────────────── */
.review-section[b-oanx12vtwm] { margin-bottom: 0.5rem; }
.review-heading[b-oanx12vtwm] { font-size: 0.8rem; font-weight: 600; color: var(--primary); letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.review-grid[b-oanx12vtwm] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; }
.review-item[b-oanx12vtwm] { display: flex; flex-direction: column; gap: 0.2rem; }
.review-label[b-oanx12vtwm] { font-size: 0.75rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; }
.review-value[b-oanx12vtwm] { font-size: 0.95rem; color: var(--text); font-weight: 500; }
.review-amount[b-oanx12vtwm] { font-size: 1.1rem; color: var(--primary-dark); font-weight: 700; }
.review-divider[b-oanx12vtwm] { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ── Status Badge ────────────────────────────────────── */
.status-badge[b-oanx12vtwm] { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.status-pending[b-oanx12vtwm]       { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.status-pendingreview[b-oanx12vtwm] { background: var(--status-review-bg); color: var(--status-review-fg); }
.status-paid[b-oanx12vtwm]          { background: var(--status-paid-bg); color: var(--status-paid-fg); }
.status-failed[b-oanx12vtwm]        { background: var(--status-failed-bg); color: var(--status-failed-fg); }

/* ── Step Hint ───────────────────────────────────────── */
.step-hint[b-oanx12vtwm] {
    text-align: center;
    font-size: 0.82rem;
    color: #999;
    margin-top: 0.5rem;
    font-style: italic;
}

.step-hint strong[b-oanx12vtwm] { color: var(--primary); }

/* ── Buttons ─────────────────────────────────────────── */
.btn-row[b-oanx12vtwm] { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.btn[b-oanx12vtwm] { padding: 0.6rem 1.6rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; border-radius: var(--radius); cursor: pointer; transition: all 0.2s; }
.btn-outline[b-oanx12vtwm] { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline:hover[b-oanx12vtwm] { background: var(--primary); color: #fff; }
.btn-primary[b-oanx12vtwm] { background: var(--primary); border: 1.5px solid var(--primary); color: #fff; }
.btn-primary:hover[b-oanx12vtwm] { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.error-msg[b-oanx12vtwm] { color: #c0392b; font-size: 0.85rem; margin: -0.5rem 0 0.75rem; }

/* ── Checkout Layout (Step 3) ────────────────────────── */
.checkout-layout[b-oanx12vtwm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.checkout-review[b-oanx12vtwm],
.checkout-payment[b-oanx12vtwm] {
    margin-bottom: 0;
}

.checkout-payment .field-group[b-oanx12vtwm] {
    margin-bottom: 0.5rem;
}

/* ── Payment Methods ─────────────────────────────────── */
.payment-methods[b-oanx12vtwm] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.payment-method-option[b-oanx12vtwm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid var(--border, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    font-size: 0.9rem;
    background: #fff;
}

.payment-method-option.selected[b-oanx12vtwm] {
    border-color: var(--primary, #C9A84C);
    background: #fffbf0;
}

.payment-method-option input[type="radio"][b-oanx12vtwm] {
    accent-color: var(--primary, #C9A84C);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Payment Method Icons ─────────────────────────────── */
.pm-img[b-oanx12vtwm] {
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.pm-icon[b-oanx12vtwm] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--primary, #C9A84C);
    flex-shrink: 0;
}

.pm-label[b-oanx12vtwm] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
}

/* ── Privacy Policy ──────────────────────────────────── */
.pm-privacy[b-oanx12vtwm] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #eee);
}

.pm-check-row[b-oanx12vtwm] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
}

.pm-check-row input[type="checkbox"][b-oanx12vtwm] {
    accent-color: var(--primary, #C9A84C);
    margin-top: 2px;
    flex-shrink: 0;
}

.pm-check-row a[b-oanx12vtwm] {
    color: var(--primary, #C9A84C);
    text-decoration: underline;
}

/* ── Review Note ─────────────────────────────────────── */
.pm-review-note[b-oanx12vtwm] {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-light, #888);
}

/* ── Proof-of-Payment File Input ─────────────────────── */
.file-input[b-oanx12vtwm] {
    display: block;
    width: 100%;
    font-size: 0.85rem;
}

.file-hint[b-oanx12vtwm] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-light, #888);
}

/* ── PAY Button ──────────────────────────────────────── */
.btn-pay[b-oanx12vtwm] {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #fa1689 0%, #d4116f 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(250, 22, 137, 0.35);
}
.btn-pay:hover[b-oanx12vtwm] {
    background: linear-gradient(135deg, #d4116f 0%, #b00e5c 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(250, 22, 137, 0.45);
}

/* ── BACK Button Row ─────────────────────────────────── */
.btn-row-back[b-oanx12vtwm] {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5rem;
}

/* ── Success Modal ───────────────────────────────────── */
.success-overlay[b-oanx12vtwm] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 999; }
.success-card[b-oanx12vtwm] { background: #fff; border-radius: 8px; padding: 2.5rem; max-width: 480px; width: 90%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.success-icon[b-oanx12vtwm] { width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.success-card h3[b-oanx12vtwm] { font-size: 1.4rem; margin-bottom: 0.75rem; }
.success-card p[b-oanx12vtwm] { font-size: 0.92rem; color: var(--text-light); line-height: 1.6; margin-bottom: 0.5rem; }
.success-sub[b-oanx12vtwm] { margin-bottom: 0.25rem !important; }
.success-ref[b-oanx12vtwm] { font-size: 0.82rem; color: #aaa; margin-bottom: 1.5rem !important; }

/* ── Payment Method Sub-label ────────────────────────── */
.pm-sublabel[b-oanx12vtwm] {
    display: block;
    font-size: 0.72rem;
    color: var(--text-light);
    margin-top: 1px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .checkout-layout[b-oanx12vtwm] { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .form-grid[b-oanx12vtwm], .form-grid-3[b-oanx12vtwm], .review-grid[b-oanx12vtwm] { grid-template-columns: 1fr; }
    .step-label[b-oanx12vtwm] { display: none; }
    .step-line[b-oanx12vtwm] { min-width: 40px; }
}

/* ── Where to send payment (QR + account details) ── */
.pay-to[b-oanx12vtwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.15rem 1rem;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: #fffdfa;
    text-align: center;
}

.pay-to-qr[b-oanx12vtwm] {
    width: min(210px, 65%);
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

.pay-to-hint[b-oanx12vtwm] {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Label/value rows — a <dl>, since that's what these pairs are. */
.pay-to-details[b-oanx12vtwm] {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.pay-to-row[b-oanx12vtwm] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.88rem;
    border-bottom: 1px dashed var(--border);
}

.pay-to-row:last-child[b-oanx12vtwm] {
    border-bottom: none;
}

.pay-to-row dt[b-oanx12vtwm] {
    color: var(--text-light);
    white-space: nowrap;
}

.pay-to-row dd[b-oanx12vtwm] {
    margin: 0;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.pay-to-instructions[b-oanx12vtwm] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

.pay-to-note[b-oanx12vtwm] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-light);
}

/* ── Ticket cards ──────────────────────────────────────────────
   Notches are real transparent cut-outs (mask), not solid circles, so
   they work over the page's pink gradient. Each card sets its own
   --tear-y and --notch-r below. */
.checkout-review[b-oanx12vtwm],
.summary-box[b-oanx12vtwm] {
    position: relative;
    -webkit-mask-image:
        radial-gradient(circle var(--notch-r) at left var(--tear-y), transparent 97%, #000 100%),
        radial-gradient(circle var(--notch-r) at right var(--tear-y), transparent 97%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle var(--notch-r) at left var(--tear-y), transparent 97%, #000 100%),
        radial-gradient(circle var(--notch-r) at right var(--tear-y), transparent 97%, #000 100%);
    mask-composite: intersect;
}

.checkout-review[b-oanx12vtwm]::before,
.summary-box[b-oanx12vtwm]::before {
    content: "";
    position: absolute;
    top: var(--tear-y);
    left: calc(var(--notch-r) + 8px);
    right: calc(var(--notch-r) + 8px);
    border-top: 2px dashed var(--border);
    pointer-events: none;
}

.checkout-review[b-oanx12vtwm] {
    --tear-y: 3.1rem;
    --notch-r: 13px;
    border-radius: 10px;
}

/* Smaller notches — this card is narrower than the review panel. */
.summary-box[b-oanx12vtwm] {
    --tear-y: 2.45rem;
    --notch-r: 10px;
}

/* Match the summary's existing pink dashed row separators. */
.summary-box[b-oanx12vtwm]::before {
    border-top-color: rgba(250, 22, 137, 0.25);
}

/* Section splits become perforations too, matching the tear line. */
.checkout-review .review-divider[b-oanx12vtwm] {
    border-top-style: dashed;
}
/* /Components/Pages/Classes.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   CLASSES — timetable & pricing
   ═══════════════════════════════════════════ */

/* (Class-types accordion removed — the section now uses the reusable
   .split-* layout defined in app.css.) */

/* ── Per instructor ─────────────────────────── */
/* Perspective on the grid, not the photo itself, is what gives the
   .reveal-flip animation actual 3D depth instead of a flat squash. */
#per-instructor .auto-grid[b-4tpwsw7b5b] {
    perspective: 1200px;
}

.instructor-card[b-4tpwsw7b5b] {
    display: flex;
    flex-direction: column;
}

.instructor-photo[b-4tpwsw7b5b] {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--plum-500), var(--pink-500));
}

.instructor-photo img[b-4tpwsw7b5b] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.instructor-body[b-4tpwsw7b5b] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-2xs);
    padding: var(--space-lg);
    align-items: center;
    text-align: center;
}

.instructor-body h3[b-4tpwsw7b5b] {
    font-size: var(--step-1);
    color: var(--ink-800);
}

.instructor-role[b-4tpwsw7b5b] {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--secondary);
}

.instructor-classes[b-4tpwsw7b5b] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin-block: var(--space-xs) var(--space-md);
}

.instructor-classes li[b-4tpwsw7b5b] {
    padding: 0.22rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pink-700);
    background: var(--pink-100);
    border-radius: var(--radius-pill);
}

/* ── Timetable ──────────────────────────────── */
.timetable-section[b-4tpwsw7b5b] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* Let the timetable run wider than the standard 1180px container so the
   week grid has more room to breathe. */
.timetable-section .container[b-4tpwsw7b5b] {
    max-width: min(96vw, 1560px);
}

/* ── FullCalendar timetable ─────────────────── */
/* The calendar DOM is built by JS, so it doesn't carry this stylesheet's
   scope attribute — reach its .fc-* classes with ::deep. */
.timetable-calendar[b-4tpwsw7b5b] {
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    font-size: var(--step--1);
}

/* Brand the toolbar buttons (default FullCalendar blue → studio pink) */
.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-button-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    text-transform: capitalize;
    font-weight: 600;
    box-shadow: none;
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-button-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-button-primary:disabled {
    background: color-mix(in srgb, var(--primary) 45%, #fff);
    border-color: transparent;
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-toolbar-title {
    font-size: var(--step-1);
    color: var(--ink-800);
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-col-header-cell-cushion,
.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-timegrid-axis-cushion,
.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-list-day-text {
    color: var(--ink-700);
    text-decoration: none;
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-event {
    border: none;
    padding: 1px 3px;
    font-weight: 600;
}

.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-today-button {
    text-transform: capitalize;
}

/* Highlight the current day column subtly, in brand tint */
.timetable-calendar[b-4tpwsw7b5b]  .fc .fc-day-today {
    background: var(--surface-tint) !important;
}

@media (max-width: 640px) {
    .timetable-calendar[b-4tpwsw7b5b]  .fc .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.timetable-note[b-4tpwsw7b5b] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    justify-content: center;
    margin-top: var(--space-md);
    font-size: var(--step--1);
    color: var(--text-light);
}

.timetable-note i[b-4tpwsw7b5b] {
    color: var(--primary);
}

/* ── Pricing ────────────────────────────────── */
.price-card[b-4tpwsw7b5b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
}

.price-card.featured[b-4tpwsw7b5b] {
    border-color: var(--primary);
    border-width: 2px;
    background: linear-gradient(165deg, #fff 55%, var(--pink-50) 100%);
    box-shadow: var(--shadow-md);
}

.price-card .badge[b-4tpwsw7b5b] {
    align-self: center;
}

.price-name[b-4tpwsw7b5b] {
    font-size: var(--step-1);
    color: var(--ink-800);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.price-amount[b-4tpwsw7b5b] {
    font-size: var(--step-3);
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}

.price-amount small[b-4tpwsw7b5b] {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--secondary);
}

.price-desc[b-4tpwsw7b5b] {
    font-size: var(--step--1);
    color: var(--text-light);
    margin-bottom: var(--space-md);
}
/* /Components/Pages/ContactUs.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   CONTACT US
   ═══════════════════════════════════════════ */

/* Light band so the whole contact block reads separate from the pink
   "Beyond the timetable" section below it. */
.contact-section[b-w2hsolrxvj] {
    background: var(--surface-cream);
}

/* ── Two columns: (info + message intro) | (map + form) ─────── */
.contact-two-col[b-w2hsolrxvj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.contact-col[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    /* Let the column shrink below its content's intrinsic width so the grid
       track can't be propped wider than the viewport (form inputs and the
       map iframe otherwise force horizontal overflow on narrow screens). */
    min-width: 0;
}

/* Form controls default to an intrinsic min-width — clamp them so they
   shrink with the column instead of overflowing it. */
.contact-col .input[b-w2hsolrxvj],
.contact-col textarea[b-w2hsolrxvj],
.contact-col select[b-w2hsolrxvj],
.contact-col .field[b-w2hsolrxvj] {
    min-width: 0;
    max-width: 100%;
}

/* Info as a plain icon list — no cards */
.contact-info[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-line[b-w2hsolrxvj] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    min-width: 0;
}

/* Let the text column shrink and long values (email, URLs) wrap instead of
   forcing the row wider than the screen. */
.contact-line > *[b-w2hsolrxvj] {
    min-width: 0;
}

.contact-line p[b-w2hsolrxvj],
.contact-line a[b-w2hsolrxvj] {
    overflow-wrap: anywhere;
}

.contact-line-icon[b-w2hsolrxvj] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pink-50);
    color: var(--primary);
    font-size: 1.15rem;
}

.contact-line h2[b-w2hsolrxvj] {
    margin: 0 0 0.15rem;
    font-size: var(--step-1);
    color: var(--ink-800);
}

.contact-line p[b-w2hsolrxvj] {
    margin: 0;
    color: var(--text-light);
}

.contact-line a[b-w2hsolrxvj] {
    font-weight: 600;
}

/* Map fills the right column */
.contact-map[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .contact-two-col[b-w2hsolrxvj] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

/* ── Map ────────────────────────────────────── */
.map-frame[b-w2hsolrxvj] {
    position: relative;
    flex: 1;
    min-height: 380px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.map-frame iframe[b-w2hsolrxvj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-note[b-w2hsolrxvj] {
    margin-top: var(--space-sm);
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-light);
}

.map-note i[b-w2hsolrxvj] {
    margin-right: 0.4rem;
    color: var(--primary);
}

.map-note a[b-w2hsolrxvj] {
    font-weight: 600;
}

@media (max-width: 640px) {
    .map-frame[b-w2hsolrxvj] {
        aspect-ratio: 4 / 3;
        /* Drop the 380px floor: with it, aspect-ratio widens the frame to
           380×4/3 = 507px and overflows narrow screens. Letting the width
           (100% of the column) drive the height keeps it inside the page. */
        min-height: 0;
        flex: none;
        width: 100%;
    }
}

/* ── Detail tiles ───────────────────────────── */
.contact-tile[b-w2hsolrxvj] {
    padding: var(--space-lg);
    text-align: center;
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.contact-tile:hover[b-w2hsolrxvj] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.contact-icon[b-w2hsolrxvj] {
    display: grid;
    place-items: center;
    width: 50px;
    aspect-ratio: 1;
    margin: 0 auto var(--space-sm);
    border-radius: 50%;
    background: var(--pink-50);
    color: var(--primary);
    font-size: 1.15rem;
}

.contact-tile h2[b-w2hsolrxvj] {
    font-size: var(--step-0);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary);
    margin-bottom: 0.4rem;
}

.contact-tile p[b-w2hsolrxvj] {
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
}

.contact-tile a[b-w2hsolrxvj] {
    color: var(--secondary);
    text-decoration: none;
    word-break: break-word;
}

.contact-tile a:hover[b-w2hsolrxvj] {
    text-decoration: underline;
}

/* ── Form layout ────────────────────────────── */
.form-section[b-w2hsolrxvj] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.contact-grid[b-w2hsolrxvj] {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.contact-intro > .prose[b-w2hsolrxvj] {
    margin-block: var(--space-md) var(--space-lg);
}

.contact-socials[b-w2hsolrxvj] {
    display: flex;
    gap: 0.7rem;
}

.contact-socials a[b-w2hsolrxvj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
}

.contact-socials a:hover[b-w2hsolrxvj] {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-3px);
}

/* ── The form itself ────────────────────────── */
.contact-form-wrap[b-w2hsolrxvj] {
    padding: var(--space-xl);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* The <form> is rendered by the EditForm child component, so it does not
   receive this stylesheet's scope attribute — reach it with ::deep. */
.contact-form-wrap[b-w2hsolrxvj]  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-row[b-w2hsolrxvj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--space-md);
}

.form-disclaimer[b-w2hsolrxvj] {
    text-align: center;
    margin-top: calc(-1 * var(--space-2xs));
}

.form-error[b-w2hsolrxvj] {
    text-align: center;
    color: #c0392b;
}

/* ValidationMessage is also a child component. */
.contact-form-wrap[b-w2hsolrxvj]  .validation-message {
    font-size: var(--step--1);
    color: var(--danger);
}

/* ── Success state ──────────────────────────── */
.form-success[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    text-align: center;
}

.success-icon[b-w2hsolrxvj] {
    display: grid;
    place-items: center;
    width: 62px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    font-size: 1.8rem;
}

.form-success h3[b-w2hsolrxvj] {
    color: var(--primary);
    font-size: var(--step-2);
}

.form-success p[b-w2hsolrxvj] {
    font-size: var(--step--1);
    color: var(--text-light);
    max-width: 44ch;
    line-height: 1.7;
}

/* ── Other services ─────────────────────────── */
.service-card[b-w2hsolrxvj] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--space-lg);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

/* Gradient accent strip along the top */
.service-card[b-w2hsolrxvj]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--grad-pink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
}

.service-card:hover[b-w2hsolrxvj] {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.service-card:hover[b-w2hsolrxvj]::before {
    transform: scaleX(1);
}

.service-num[b-w2hsolrxvj] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--primary);
    opacity: 0.45;
}

.service-card h3[b-w2hsolrxvj] {
    font-size: var(--step-1);
    color: var(--ink-800);
    margin: 0;
}

.service-card p[b-w2hsolrxvj] {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

.service-arrow[b-w2hsolrxvj] {
    margin-top: var(--space-sm);
    color: var(--primary);
    transform: translateX(-4px);
    opacity: 0;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.service-card:hover .service-arrow[b-w2hsolrxvj] {
    transform: translateX(0);
    opacity: 1;
}

.services-pointer[b-w2hsolrxvj] {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-light);
}

/* ── FAQ (native disclosure widgets) ────────── */
.faq[b-w2hsolrxvj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq-item[b-w2hsolrxvj] {
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.faq-item:hover[b-w2hsolrxvj] {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    box-shadow: var(--shadow-sm);
}

.faq-item summary[b-w2hsolrxvj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--ink-800);
    cursor: pointer;
    list-style: none;
}

.faq-item summary[b-w2hsolrxvj]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-w2hsolrxvj]::marker {
    content: "";
}

.faq-icon[b-w2hsolrxvj] {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary);
    transition: transform var(--dur) var(--ease-out);
}

.faq-item[open] .faq-icon[b-w2hsolrxvj] {
    transform: rotate(45deg);
}

.faq-item[open] summary[b-w2hsolrxvj] {
    color: var(--primary);
}

.faq-item p[b-w2hsolrxvj] {
    padding: 0 var(--space-lg) var(--space-md);
    font-size: var(--step--1);
    line-height: 1.75;
    color: var(--text-light);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 880px) {
    .contact-grid[b-w2hsolrxvj] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 520px) {
    .contact-form-wrap[b-w2hsolrxvj] {
        padding: var(--space-lg) var(--space-md);
    }
}
/* /Components/Pages/Events.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   EVENTS
   ═══════════════════════════════════════════ */

/* ── Announcement bar ───────────────────────── */
.announce-bar[b-3fj7y63amc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.announce-tag[b-3fj7y63amc] {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: #fff;
    background: var(--grad-pink);
    border-radius: var(--radius-pill);
}

.announce-bar p[b-3fj7y63amc] {
    flex: 1;
    min-width: 220px;
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
}

.blog-teaser[b-3fj7y63amc] {
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

/* ── Featured event ─────────────────────────── */
.feature-event[b-3fj7y63amc] {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.feature-media[b-3fj7y63amc] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
    font-size: clamp(4rem, 10vw, 7rem);
    background: var(--grad-brand);
}

/* Past-event photo fills the media panel */
.feature-media img[b-3fj7y63amc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The showcase poster is portrait — show it whole (no crop) on a black mat
   that blends with the poster's own background. */
.past-event .feature-media[b-3fj7y63amc] {
    background: #050505;
}

.past-event .feature-media img[b-3fj7y63amc] {
    object-fit: contain;
}

.past-badge[b-3fj7y63amc] {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 0.3rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(28, 0, 32, 0.72);
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.feature-body[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-xl);
}

.feature-body h2[b-3fj7y63amc] {
    font-size: var(--step-3);
    color: var(--primary);
}

.feature-lead[b-3fj7y63amc] {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-light);
    max-width: 52ch;
}

.feature-meta[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    padding-block: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.feature-meta li[b-3fj7y63amc] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: var(--step--1);
    color: var(--text-light);
}

.feature-meta i[b-3fj7y63amc] {
    width: 1rem;
    color: var(--primary);
    flex-shrink: 0;
}

.feature-meta strong[b-3fj7y63amc] {
    color: var(--ink-800);
    margin-right: 0.35rem;
}

/* ── Upcoming events ────────────────────────── */
.upcoming-section[b-3fj7y63amc] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.event-card[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
}

.event-date[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: var(--grad-pink);
    color: #fff;
}

.event-month[b-3fj7y63amc] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.9;
}

.event-day[b-3fj7y63amc] {
    font-size: var(--step-2);
    font-weight: 800;
    line-height: 1.1;
}

.event-body[b-3fj7y63amc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    padding: var(--space-lg);
    align-items: flex-start;
}

.event-body h3[b-3fj7y63amc] {
    color: var(--ink-800);
    font-size: var(--step-1);
}

.event-body p[b-3fj7y63amc] {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-light);
}

/* ── Steps ──────────────────────────────────── */
.step-card[b-3fj7y63amc] {
    position: relative;
    padding: var(--space-lg);
    padding-top: var(--space-xl);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.step-num[b-3fj7y63amc] {
    position: absolute;
    top: calc(-1 * var(--space-sm));
    left: var(--space-lg);
    display: grid;
    place-items: center;
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--grad-pink);
    color: #fff;
    font-size: var(--step-0);
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}

.step-card h3[b-3fj7y63amc] {
    font-size: var(--step-1);
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.step-card p[b-3fj7y63amc] {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-light);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 820px) {
    .feature-event[b-3fj7y63amc] {
        grid-template-columns: 1fr;
    }

    .feature-media[b-3fj7y63amc] {
        min-height: 180px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   HOMEPAGE
   ═══════════════════════════════════════════════════════════ */

/* ── SECTION 1 · VSL JUMBOTRON ─────────────────────────────── */
/* Full-bleed showcase band: copy sets up the video, video dominates. */
.jumbotron[b-fm6wgpyh6q] {
    position: relative;
    padding-block: var(--space-2xl) var(--space-3xl);
    background: linear-gradient(165deg,
                var(--ink-900) 0%,
                var(--ink-800) 42%,
                #4a0f3d 100%);
    overflow: clip;
    isolation: isolate;
}

/* Brand glow bleeding in from the top corners */
.jumbotron[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    top: -30%;
    left: 50%;
    translate: -50% 0;
    width: min(1100px, 130vw);
    aspect-ratio: 1;
    background: radial-gradient(circle,
                rgba(250, 22, 137, 0.34) 0%,
                rgba(160, 79, 210, 0.18) 42%,
                transparent 68%);
    pointer-events: none;
    z-index: -1;
}

/* (Bottom fade removed — the diagonal slice now defines the lower edge.) */


/* ── Ambient background video ───────────────────────────────── */
.jumbo-bg[b-fm6wgpyh6q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    /* Tone it down so the copy stays legible on top */
    opacity: 0.55;
    filter: saturate(1.15);
}

/* Darkening scrim between the video and the text */
.jumbo-scrim[b-fm6wgpyh6q] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(28, 0, 32, 0.30) 0%, rgba(28, 0, 32, 0.78) 78%),
        linear-gradient(180deg, rgba(28, 0, 32, 0.55) 0%, rgba(28, 0, 32, 0.35) 45%, rgba(28, 0, 32, 0.80) 100%);
}

/* Content must sit above the video + scrim */
.jumbo-inner[b-fm6wgpyh6q] {
    position: relative;
    z-index: 3;
}

/* If the visitor prefers less motion, hold a still frame instead */
@media (prefers-reduced-motion: reduce) {
    .jumbo-bg[b-fm6wgpyh6q] {
        display: none;
    }

    .jumbotron[b-fm6wgpyh6q] {
        background-image: linear-gradient(rgba(28, 0, 32, 0.72), rgba(28, 0, 32, 0.72)),
                          url("/images/vsl-poster.jpg");
        background-size: cover;
        background-position: center;
    }
}

.jumbo-inner[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: min(58vh, 520px);
    justify-content: center;
}

/* ── Copy above the video ──────────────────────────────────── */
.jumbo-copy[b-fm6wgpyh6q] {
    max-width: 44rem;
    margin-bottom: var(--space-xl);
}

.jumbo-eyebrow[b-fm6wgpyh6q] {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--pink-300);
    margin-bottom: var(--space-sm);
}

.jumbo-title[b-fm6wgpyh6q] {
    font-size: clamp(2.1rem, 1.35rem + 3.6vw, 4.15rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #fff;
    text-wrap: balance;
    margin-bottom: var(--space-md);
}

.jumbo-title em[b-fm6wgpyh6q] {
    display: block;
    font-style: normal;
    background: linear-gradient(100deg, var(--pink-400) 0%, var(--plum-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Typewriter reveal: each line clips in from the right, one after
   another, then a blinking caret picks up where the last line ends.
   clip-path (not width) is used so it doesn't depend on knowing the
   text's pixel width in this font. ── */
.type-line[b-fm6wgpyh6q] {
    display: block;
    clip-path: inset(0 100% 0 0);
    animation-fill-mode: forwards;
    animation-timing-function: steps(var(--type-steps, 10), end);
}

.type-line-1[b-fm6wgpyh6q] { --type-steps: 12; animation: type-reveal-b-fm6wgpyh6q 0.72s steps(12, end) 0.2s forwards; }
.type-line-2[b-fm6wgpyh6q] { --type-steps: 15; animation: type-reveal-b-fm6wgpyh6q 0.9s steps(15, end) 1.07s forwards; }
.type-line-3[b-fm6wgpyh6q] { --type-steps: 10; animation: type-reveal-b-fm6wgpyh6q 0.6s steps(10, end) 2.12s forwards; }

@keyframes type-reveal-b-fm6wgpyh6q {
    to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .type-line[b-fm6wgpyh6q] {
        clip-path: none;
        animation: none;
    }
}

.jumbo-lead[b-fm6wgpyh6q] {
    font-size: var(--step-1);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.76);
    max-width: 38rem;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    text-wrap: pretty;
}

.jumbo-actions[b-fm6wgpyh6q] {
    --gap: var(--space-sm);
    justify-content: center;
}

/* Ghost button that reads correctly on the dark band */
.jumbo-btn-ghost[b-fm6wgpyh6q] {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
}

.jumbo-btn-ghost:hover[b-fm6wgpyh6q] {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ── The VSL player ────────────────────────────────────────── */
.vsl-frame[b-fm6wgpyh6q] {
    position: relative;
    width: 100%;
    max-width: 60rem;      /* the star of the section */
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #000;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.10),
                0 0 70px -12px rgba(250, 22, 137, 0.45);
}

.vsl-poster[b-fm6wgpyh6q] {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    cursor: pointer;
}

.vsl-poster-img[b-fm6wgpyh6q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.vsl-poster[b-fm6wgpyh6q]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(28, 0, 32, 0.18) 0%,
                rgba(28, 0, 32, 0.62) 100%);
}

.vsl-poster:hover .vsl-poster-img[b-fm6wgpyh6q] {
    transform: scale(1.04);
}

.vsl-play[b-fm6wgpyh6q] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(66px, 8vw, 96px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary);
    font-size: clamp(1.25rem, 1.9vw, 1.85rem);
    padding-left: 5px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: transform var(--dur) var(--ease-spring),
                background-color var(--dur) var(--ease-out);
}

/* Pulsing ring */
.vsl-play[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: vsl-pulse-b-fm6wgpyh6q 2.4s var(--ease-out) infinite;
}

@keyframes vsl-pulse-b-fm6wgpyh6q {
    0%   { transform: scale(0.9); opacity: 0.9; }
    70%  { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
}

.vsl-poster:hover .vsl-play[b-fm6wgpyh6q] {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}

.vsl-label[b-fm6wgpyh6q] {
    position: absolute;
    left: 50%;
    bottom: var(--space-lg);
    transform: translateX(-50%);
    z-index: 2;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.vsl-embed[b-fm6wgpyh6q],
.vsl-player[b-fm6wgpyh6q] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
    object-fit: contain;
}

/* Dismiss the opened player and return to the copy */
.jumbo-close[b-fm6wgpyh6q] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-md);
    padding: 0.5rem 1.1rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-pill);
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}

.jumbo-close:hover[b-fm6wgpyh6q] {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ── Proof points under the video ──────────────────────────── */
.jumbo-proof[b-fm6wgpyh6q] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs) var(--space-xl);
    margin-top: var(--space-lg);
    font-size: var(--step--1);
    color: rgba(255, 255, 255, 0.7);
}

.jumbo-proof li[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.jumbo-proof li[b-fm6wgpyh6q]::before {
    content: "✓";
    font-weight: 800;
    color: var(--pink-300);
}

.jumbo-proof strong[b-fm6wgpyh6q] {
    color: #fff;
    font-weight: 700;
}

/* ── Quick booking: two simple cards ───────────────────────────── */
.book-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.book-card[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: var(--space-xl);
    /* Translucent frosted card so the pink section shows through */
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.book-card:hover[b-fm6wgpyh6q] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.book-card h3[b-fm6wgpyh6q] {
    margin: 0;
    color: var(--primary);
    font-size: var(--step-2);
}

.book-card p[b-fm6wgpyh6q] {
    margin: 0 0 var(--space-md);
    color: var(--text-light);
}

.book-card .btn[b-fm6wgpyh6q] {
    margin-top: auto;
}

@media (max-width: 640px) {
    .book-grid[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
    }
}

/* ── Jumbotron responsive ──────────────────────────────────── */
@media (max-width: 700px) {
    .jumbotron[b-fm6wgpyh6q] {
        padding-block: var(--space-xl) var(--space-2xl);
    }

    .vsl-frame[b-fm6wgpyh6q] {
        border-radius: var(--radius-lg);
    }

    .jumbo-proof[b-fm6wgpyh6q] {
        gap: var(--space-2xs) var(--space-md);
    }
}

/* ── SECTION 2 · Intro ─────────────────────────────────────── */
.intro-prose[b-fm6wgpyh6q] {
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* ── SECTION 2b · Showcase / gallery ──────────────────────────
   Fixed 7 columns so 14 posters land as an even 2x7 block. Square-edged
   on purpose — these are printed-poster artwork, and rounded corners
   clipped the designs' own borders. */
/* Breaks out of the 1440px .container so 7 posters can be meaningfully
   bigger without dropping a column. Clamped to 96vw so it never touches
   the viewport edge. */
.gallery-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2xs);
    width: min(96vw, 1900px);
    margin-inline: calc(50% - min(48vw, 950px));
}

.gg-cell[b-fm6wgpyh6q] {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    margin: 0;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--ink-800);
    cursor: pointer;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.gg-cell:hover[b-fm6wgpyh6q],
.gg-cell:focus-visible[b-fm6wgpyh6q] {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 18px 36px rgba(28, 0, 32, 0.35);
    z-index: 2;
    outline: none;
}

.gg-cell img[b-fm6wgpyh6q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out),
                filter var(--dur) var(--ease-out);
}

.gg-cell:hover img[b-fm6wgpyh6q],
.gg-cell:focus-visible img[b-fm6wgpyh6q] {
    transform: scale(1.08);
    filter: saturate(1.15);
}

/* Magnifier badge — the only affordance that this opens a viewer. */
.gg-zoom[b-fm6wgpyh6q] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring);
    pointer-events: none;
}

.gg-cell:hover .gg-zoom[b-fm6wgpyh6q],
.gg-cell:focus-visible .gg-zoom[b-fm6wgpyh6q] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gg-caption[b-fm6wgpyh6q] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--space-sm) 0.6rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-align: left;
    background: linear-gradient(180deg, transparent, rgba(28, 0, 32, 0.85));
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}

.gg-cell:hover .gg-caption[b-fm6wgpyh6q],
.gg-cell:focus-visible .gg-caption[b-fm6wgpyh6q] {
    opacity: 1;
}

/* Touch has no hover, so these would otherwise never appear. */
@media (hover: none) {
    .gg-caption[b-fm6wgpyh6q] { opacity: 1; }
    .gg-zoom[b-fm6wgpyh6q] { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}

/* Staggered entrance. Applied only when motion is welcome, and the base
   state above is already the visible one — so if the animation never
   runs, the posters still show rather than staying blank. */
@keyframes gg-rise-b-fm6wgpyh6q {
    from { opacity: 0; transform: translateY(26px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 7 across gets too cramped below desktop — step down rather than let
   the posters shrink into thumbnails. */
@media (max-width: 1100px) {
    .gallery-grid[b-fm6wgpyh6q] {
        grid-template-columns: repeat(5, 1fr);
        width: auto;
        margin-inline: 0;
        gap: var(--space-sm);
    }
}

@media (max-width: 820px) {
    .gallery-grid[b-fm6wgpyh6q] { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
    .gallery-grid[b-fm6wgpyh6q] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xs);
    }
}

.gallery-tile[b-fm6wgpyh6q] {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(150deg, var(--pink-400), var(--plum-500));
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.gallery-tile:hover[b-fm6wgpyh6q],
.gallery-tile:focus-visible[b-fm6wgpyh6q] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.gallery-tile:nth-child(even)[b-fm6wgpyh6q] {
    background: linear-gradient(150deg, var(--plum-500), var(--pink-600));
}

/* Light sweep across the tile on hover */
.gallery-tile[b-fm6wgpyh6q]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease-out);
    pointer-events: none;
}

.gallery-tile:hover[b-fm6wgpyh6q]::before,
.gallery-tile:focus-visible[b-fm6wgpyh6q]::before {
    transform: translateX(120%);
}

/* Uniform IG grid — legacy mosaic spans are neutralised. */
.tile-tall[b-fm6wgpyh6q],
.tile-wide[b-fm6wgpyh6q] {
    grid-row: auto;
    grid-column: auto;
}

/* Real photo fills the tile; gentle zoom on hover. */
.gallery-img[b-fm6wgpyh6q] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.gallery-tile:hover .gallery-img[b-fm6wgpyh6q],
.gallery-tile:focus-visible .gallery-img[b-fm6wgpyh6q] {
    transform: scale(1.06);
}

/* "Expand" affordance revealed on hover */
.gallery-view[b-fm6wgpyh6q] {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary);
    font-size: 1.15rem;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring);
    pointer-events: none;
}

.gallery-tile:hover .gallery-view[b-fm6wgpyh6q],
.gallery-tile:focus-visible .gallery-view[b-fm6wgpyh6q] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-cap[b-fm6wgpyh6q] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 3;
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(28, 0, 32, 0.75));
}

@media (max-width: 620px) {
    /* Keep the three-column IG layout, just tighten the caption */
    .gallery-cap[b-fm6wgpyh6q] {
        font-size: 0.72rem;
        padding: var(--space-2xs) var(--space-sm);
    }
}

/* ── Gallery lightbox / carousel ───────────────────────────── */
.gallery-modal[b-fm6wgpyh6q] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(17, 0, 22, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}

.gallery-modal.is-open[b-fm6wgpyh6q] {
    opacity: 1;
    visibility: visible;
}

.gm-stage[b-fm6wgpyh6q] {
    position: relative;
    margin: 0;
    /* Sized by the image, not a fixed width — posters are portrait, and a
       fixed landscape box either cropped them or letterboxed them badly. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    max-width: min(94vw, 1100px);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.4s var(--ease-spring);
}

.gallery-modal.is-open .gm-stage[b-fm6wgpyh6q] {
    transform: none;
}

/* No aspect-ratio and no background: the frame is whatever the poster is,
   so nothing is cropped and there are no letterbox bars around it. */
.gm-slide[b-fm6wgpyh6q] {
    position: relative;
    display: grid;
    place-items: center;
    max-height: 82vh;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: gm-slide-in-b-fm6wgpyh6q 0.45s var(--ease-out);
}

@keyframes gm-slide-in-b-fm6wgpyh6q {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: none; }
}

/* Whole photo shown in the lightbox (no crop) on a dark backdrop. */
/* Natural size, bounded by the viewport — never upscaled past 100%, never
   taller than the screen, so tall posters and wide shots both fit whole. */
.gm-img[b-fm6wgpyh6q] {
    display: block;
    width: auto;
    height: auto;
    max-width: min(94vw, 1100px);
    max-height: 82vh;
    object-fit: contain;
}

.gm-caption[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: #fff;
    font-weight: 600;
}

.gm-count[b-fm6wgpyh6q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
}

.gm-close[b-fm6wgpyh6q],
.gm-nav[b-fm6wgpyh6q] {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.gm-close:hover[b-fm6wgpyh6q],
.gm-nav:hover[b-fm6wgpyh6q] {
    background: rgba(255, 255, 255, 0.3);
}

.gm-close[b-fm6wgpyh6q] {
    top: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
}

.gm-close:hover[b-fm6wgpyh6q] {
    transform: rotate(90deg);
}

.gm-nav[b-fm6wgpyh6q] {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
}

.gm-nav:hover[b-fm6wgpyh6q] {
    transform: translateY(-50%) scale(1.08);
}

.gm-prev[b-fm6wgpyh6q] { left: clamp(0.5rem, 2vw, 1.5rem); }
.gm-next[b-fm6wgpyh6q] { right: clamp(0.5rem, 2vw, 1.5rem); }

.gm-dots[b-fm6wgpyh6q] {
    position: absolute;
    left: 50%;
    bottom: clamp(0.75rem, 3vw, 2rem);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.5rem;
}

.gm-dot[b-fm6wgpyh6q] {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.4);
    transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.gm-dot:hover[b-fm6wgpyh6q] {
    background: rgba(255, 255, 255, 0.7);
}

.gm-dot.active[b-fm6wgpyh6q] {
    background: #fff;
    transform: scale(1.4);
}

@media (prefers-reduced-motion: reduce) {
    .gallery-art[b-fm6wgpyh6q] { animation: none; }
    .gm-slide[b-fm6wgpyh6q] { animation: none; }
    .gallery-modal[b-fm6wgpyh6q],
    .gm-stage[b-fm6wgpyh6q],
    .gm-close[b-fm6wgpyh6q],
    .gm-nav[b-fm6wgpyh6q],
    .gm-dot[b-fm6wgpyh6q] { transition: none; }
    .gm-stage[b-fm6wgpyh6q] { transform: none; }
}

/* ── SECTION 3 · Why choose us ─────────────────────────────── */
.why[b-fm6wgpyh6q] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.why-card[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.why-card h3[b-fm6wgpyh6q] {
    color: var(--primary);
}

.why-card p[b-fm6wgpyh6q] {
    font-size: var(--step--1);
    color: var(--text-light);
    line-height: 1.7;
}

.why-icon[b-fm6wgpyh6q] {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--space-2xs);
}

.section-cta[b-fm6wgpyh6q] {
    margin-top: var(--space-xl);
}

/* ── SECTION 4 · Explore trio ──────────────────────────────── */
/* Alternating editorial rows — media on one side, copy on the other,
   flipping sides down the page. Reads more premium than three tiles. */
.explore-rows[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.explore-row[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

/* Flip every second row so the media alternates left/right */
.explore-row:nth-child(even)[b-fm6wgpyh6q] {
    flex-direction: row-reverse;
}

.explore-media[b-fm6wgpyh6q] {
    position: relative;
    flex: 0 0 54%;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    font-size: clamp(3rem, 7vw, 5rem);
    box-shadow: var(--shadow-md);
    /* Soft tint rather than the full brand gradient: this shows wherever the
       media doesn't reach — the sides of a portrait image set to "Show whole
       image", and the whole panel while a slot is still empty. A saturated
       gradient overpowered the photo next to it. */
    background: var(--explore-mat, color-mix(in srgb, var(--primary) 6%, #fff));
    overflow: hidden;
}

/* Rendered by ContentMedia (picture, video or slideshow), so these need
   ::deep — Blazor scopes child-component output separately. */
.explore-media[b-fm6wgpyh6q]  .media-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* The three panels used to carry distinct brand gradients. They now share the
   soft mat above so the section reads consistently whatever media each slot
   holds — the panels are told apart by their photo and copy, not their
   backdrop. Kept as classes: the markup uses them and they're a hook for
   per-panel styling later. */

.explore-body[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    flex: 1;
}

.explore-index[b-fm6wgpyh6q] {
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.explore-body h3[b-fm6wgpyh6q] {
    color: var(--ink-800);
    margin: 0;
}

.explore-body p[b-fm6wgpyh6q] {
    font-size: var(--step-0);
    line-height: 1.7;
    color: var(--text-light);
}

/* Each row slides in from the side its media sits on, so the motion
   follows the alternating layout instead of fighting it. Scroll-driven
   (no JS); the unanimated state is the visible one, so unsupported
   browsers and reduced-motion just show the row. */
@keyframes explore-in-left-b-fm6wgpyh6q {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes explore-in-right-b-fm6wgpyh6q {
    from { opacity: 0; transform: translateX(48px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Photo lifts and warms slightly on hover — same language as the gallery. */
.explore-media[b-fm6wgpyh6q] {
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.explore-row:hover .explore-media[b-fm6wgpyh6q] {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.explore-row:hover .explore-media[b-fm6wgpyh6q]  .media-photo {
    transform: scale(1.05);
    filter: saturate(1.12);
}

.explore-media[b-fm6wgpyh6q]  .media-photo {
    transition: transform var(--dur-slow) var(--ease-out),
                filter var(--dur) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .explore-media[b-fm6wgpyh6q],
    .explore-media[b-fm6wgpyh6q]  .media-photo { transition: none; }

    .explore-row:hover .explore-media[b-fm6wgpyh6q],
    .explore-row:hover .explore-media[b-fm6wgpyh6q]  .media-photo { transform: none; }
}

/* Stack on smaller screens — media always sits above the copy */
@media (max-width: 760px) {
    .explore-row[b-fm6wgpyh6q],
    .explore-row:nth-child(even)[b-fm6wgpyh6q] {
        flex-direction: column;
    }

    .explore-media[b-fm6wgpyh6q] {
        flex: none;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* ── SECTION 5 · About teaser + studio specs ───────────────── */
.teaser-grid[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-2xl);
    align-items: center;
}

.teaser-copy > .prose[b-fm6wgpyh6q] {
    margin-block: var(--space-md) var(--space-lg);
}

.studio-specs[b-fm6wgpyh6q] {
    padding: var(--space-lg);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.specs-title[b-fm6wgpyh6q] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--step-1);
    color: var(--primary);
    margin-bottom: var(--space-md);
}

.specs-list[b-fm6wgpyh6q] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-lg);
}

.specs-list li[b-fm6wgpyh6q] {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--space-sm);
    padding-block: 0.6rem;
    font-size: var(--step--1);
    border-bottom: 1px solid var(--border-subtle);
}

.specs-list li:last-child[b-fm6wgpyh6q] {
    border-bottom: 0;
}

.spec-k[b-fm6wgpyh6q] {
    font-weight: 700;
    color: var(--ink-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    padding-top: 0.15rem;
}

.spec-v[b-fm6wgpyh6q] {
    color: var(--text-light);
    line-height: 1.55;
}

/* ── SECTION 6 · Testimonials ──────────────────────────────── */
.testimonials[b-fm6wgpyh6q] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* Plain section block — no card. Quote sits large and centred on the band. */
.quote-block[b-fm6wgpyh6q] {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    color: var(--ink-800);
}

.quote-block blockquote[b-fm6wgpyh6q] {
    margin: 0;
}

.quote-block blockquote p[b-fm6wgpyh6q] {
    font-size: var(--step-2);
    line-height: 1.6;
    max-width: 54ch;
    margin-inline: auto;
    color: var(--ink-700);
    font-style: italic;
}

.quote-block figcaption[b-fm6wgpyh6q] {
    margin-top: var(--space-md);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: var(--step--1);
    color: var(--primary);
}

.quote-dots[b-fm6wgpyh6q] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-lg);
}

.quote-dot[b-fm6wgpyh6q] {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    cursor: pointer;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 30%, transparent);
    transition: background-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}

.quote-dot:hover[b-fm6wgpyh6q] {
    background: color-mix(in srgb, var(--primary) 55%, transparent);
}

.quote-dot.active[b-fm6wgpyh6q] {
    background: var(--primary);
    transform: scale(1.45);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .teaser-grid[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 600px) {
    .quote-block blockquote p[b-fm6wgpyh6q] {
        font-size: var(--step-1);
    }

    .specs-list li[b-fm6wgpyh6q] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

/* Fades each quote in as it swaps (the @key forces a fresh node). */
.quote-fade[b-fm6wgpyh6q] {
    animation: quote-in-b-fm6wgpyh6q 0.5s var(--ease-out) both;
}

@keyframes quote-in-b-fm6wgpyh6q {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .quote-fade[b-fm6wgpyh6q] { animation: none; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════ */

.login-section[b-g5dhjou7e9] {
    display: grid;
    place-items: center;
    min-height: 70vh;
}

.login-wrap[b-g5dhjou7e9] {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 300px);
    gap: var(--space-xl);
    align-items: center;
    justify-content: center;
}

/* ── Card ───────────────────────────────────── */
.login-card[b-g5dhjou7e9] {
    padding: var(--space-xl);
    text-align: center;
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.login-logo[b-g5dhjou7e9] {
    width: clamp(84px, 10vw, 108px);
    height: auto;
    margin: 0 auto var(--space-sm);
    object-fit: contain;
}

.login-card h1[b-g5dhjou7e9] {
    font-size: var(--step-3);
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.login-sub[b-g5dhjou7e9] {
    font-size: var(--step--1);
    color: var(--text-light);
    margin-bottom: var(--space-lg);
}

.login-notice[b-g5dhjou7e9] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--ink-700);
    background: var(--pink-50);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.login-notice i[b-g5dhjou7e9] {
    flex-shrink: 0;
    margin-top: 0.25em;
    color: var(--primary);
}

/* ── Sign-in provider buttons ───────────────── */
.provider-buttons[b-g5dhjou7e9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: left;
}

.provider-btn[b-g5dhjou7e9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-subtle);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}

.provider-btn:hover[b-g5dhjou7e9] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.provider-btn i[b-g5dhjou7e9] {
    font-size: 1rem;
}

.provider-google[b-g5dhjou7e9] {
    color: var(--ink-800);
    background: #fff;
}

.provider-google i[b-g5dhjou7e9] {
    color: #ea4335;
}

.provider-facebook[b-g5dhjou7e9] {
    color: #fff;
    background: #1877f2;
    border-color: #1877f2;
}

.provider-email[b-g5dhjou7e9] {
    color: var(--ink-700);
    background: var(--surface);
}

/* Genuinely inert until Entra is configured — href is omitted in markup,
   this just gives it the visual "not available yet" treatment to match. */
.provider-btn.is-disabled[b-g5dhjou7e9] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.provider-divider[b-g5dhjou7e9] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 0.15rem;
    text-align: center;
}

.provider-divider[b-g5dhjou7e9]::before,
.provider-divider[b-g5dhjou7e9]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.provider-divider span[b-g5dhjou7e9] {
    padding-inline: 0.75rem;
    font-size: var(--step--2);
    color: var(--text-subtle);
}

.login-alt[b-g5dhjou7e9] {
    margin-top: var(--space-md);
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-subtle);
}

/* ── Aside ──────────────────────────────────── */
.login-aside[b-g5dhjou7e9] {
    padding: var(--space-lg);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.login-aside h2[b-g5dhjou7e9] {
    font-size: var(--step-1);
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.login-perks[b-g5dhjou7e9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: var(--space-lg);
}

.login-perks li[b-g5dhjou7e9] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text-light);
}

.login-perks i[b-g5dhjou7e9] {
    flex-shrink: 0;
    margin-top: 0.28em;
    font-size: 0.7rem;
    color: var(--primary);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 820px) {
    .login-wrap[b-g5dhjou7e9] {
        grid-template-columns: minmax(0, 440px);
    }

    /* Perks read better below the form on narrow screens */
    .login-aside[b-g5dhjou7e9] {
        order: 2;
    }
}

@media (max-width: 520px) {
    .login-card[b-g5dhjou7e9] {
        padding: var(--space-lg) var(--space-md);
    }
}
/* /Components/Pages/Membership.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   MEMBERSHIP
   ═══════════════════════════════════════════ */

/* ── Pass cards ─────────────────────────────── */
.pass-card[b-a7sdkqirvw] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.pass-card:hover[b-a7sdkqirvw] {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.pass-card.featured[b-a7sdkqirvw] {
    border: 2px solid var(--primary);
    background: linear-gradient(170deg, #fff 50%, var(--pink-50) 100%);
    box-shadow: var(--shadow-md);
}

.pass-ribbon[b-a7sdkqirvw] {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0.28rem 0.9rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: #fff;
    background: var(--grad-pink);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

.pass-body[b-a7sdkqirvw] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-2xs);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    text-align: center;
}

.pass-name[b-a7sdkqirvw] {
    font-size: var(--step-1);
    font-weight: 800;
    color: var(--ink-800);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pass-validity[b-a7sdkqirvw] {
    font-size: var(--step--1);
    color: var(--text-subtle);
}

.pass-price[b-a7sdkqirvw] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
    margin-block: var(--space-sm);
    font-size: var(--step-4);
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
}

.pass-currency[b-a7sdkqirvw] {
    font-size: 0.5em;
    font-weight: 700;
    color: var(--secondary);
}

/* ── Perks ──────────────────────────────────── */
.pass-perks[b-a7sdkqirvw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
    text-align: left;
}

.pass-perks li[b-a7sdkqirvw] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: var(--step--1);
    color: var(--text-light);
    line-height: 1.55;
}

.pass-perks i[b-a7sdkqirvw] {
    flex-shrink: 0;
    margin-top: 0.28em;
    font-size: 0.7rem;
    color: var(--primary);
}

.pass-footnote[b-a7sdkqirvw] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 68ch;
    margin: var(--space-xl) auto 0;
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
    text-align: left;
}

.pass-footnote i[b-a7sdkqirvw] {
    flex-shrink: 0;
    margin-top: 0.3em;
    color: var(--primary);
}

/* ── Comparison table ───────────────────────── */
.compare-section[b-a7sdkqirvw] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.compare-section .table th[scope="row"][b-a7sdkqirvw] {
    background: var(--surface-tint);
    color: var(--ink-800);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--step--1);
}

/* ── FAQ (native disclosure widgets) ────────── */
.faq[b-a7sdkqirvw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq-item[b-a7sdkqirvw] {
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.faq-item:hover[b-a7sdkqirvw] {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    box-shadow: var(--shadow-sm);
}

.faq-item summary[b-a7sdkqirvw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--ink-800);
    cursor: pointer;
    list-style: none;
}

/* Hide the default triangle marker */
.faq-item summary[b-a7sdkqirvw]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-a7sdkqirvw]::marker {
    content: "";
}

.faq-icon[b-a7sdkqirvw] {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--primary);
    transition: transform var(--dur) var(--ease-out);
}

.faq-item[open] .faq-icon[b-a7sdkqirvw] {
    transform: rotate(45deg);
}

.faq-item[open] summary[b-a7sdkqirvw] {
    color: var(--primary);
}

.faq-item p[b-a7sdkqirvw] {
    padding: 0 var(--space-lg) var(--space-md);
    font-size: var(--step--1);
    line-height: 1.75;
    color: var(--text-light);
}
/* /Components/Pages/MyBookings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   MY BOOKINGS
   ═══════════════════════════════════════════════════════════ */

.mb-wrapper[b-2bkt6bsd69] {
    max-width: 900px;
    margin-inline: auto;
    padding: var(--space-2xl, 3rem) var(--space-md) var(--space-2xl, 3rem);
}

.mb-head[b-2bkt6bsd69] {
    margin-bottom: var(--space-lg);
    text-align: center;
}

.mb-title[b-2bkt6bsd69] {
    margin: 0 0 0.35rem;
    font-size: var(--step-3, 2rem);
    color: var(--ink-900, var(--ink-800));
}

.mb-sub[b-2bkt6bsd69] {
    margin: 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

/* ── Empty / loading state ──────────────────────────────────── */
.mb-empty[b-2bkt6bsd69] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl, 3rem) var(--space-md);
    text-align: center;
    color: var(--text-light);
    background: var(--surface);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}

/* ── Table ──────────────────────────────────────────────────── */
.mb-table-wrap[b-2bkt6bsd69] {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.mb-table[b-2bkt6bsd69] {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.mb-table thead th[b-2bkt6bsd69] {
    padding: 0.9rem 1.1rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--surface-tint);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.mb-table tbody td[b-2bkt6bsd69] {
    padding: 0.95rem 1.1rem;
    color: var(--ink-700);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    vertical-align: middle;
}

.mb-table tbody tr:last-child td[b-2bkt6bsd69] {
    border-bottom: none;
}

.mb-table tbody tr[b-2bkt6bsd69] {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.mb-table tbody tr:hover[b-2bkt6bsd69] {
    background: var(--pink-50);
}

/* Column accents */
.mb-td-ref[b-2bkt6bsd69] {
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--primary-dark);
}

.mb-td-type[b-2bkt6bsd69] {
    font-weight: 600;
    color: var(--ink-800);
}

.mb-col-amount[b-2bkt6bsd69] {
    text-align: right;
}

.mb-td-amount[b-2bkt6bsd69] {
    font-weight: 700;
    color: var(--ink-800);
}

/* ── Status badge ───────────────────────────────────────────── */
.mb-badge[b-2bkt6bsd69] {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.mb-badge-paid[b-2bkt6bsd69] {
    color: var(--status-paid-fg);
    background: var(--status-paid-bg);
}

.mb-badge-pending[b-2bkt6bsd69] {
    color: #664d03;
    background: var(--status-pending-bg);
}

.mb-badge-pendingreview[b-2bkt6bsd69] {
    color: var(--status-review-fg);
    background: var(--status-review-bg);
}

.mb-badge-failed[b-2bkt6bsd69] {
    color: var(--status-failed-fg);
    background: var(--status-failed-bg);
}

/* ── Buttons ────────────────────────────────────────────────── */
.mb-btn[b-2bkt6bsd69] {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.mb-btn-primary[b-2bkt6bsd69] {
    color: #fff;
    background: var(--grad-pink);
    box-shadow: var(--shadow-sm);
}

.mb-btn-primary:hover[b-2bkt6bsd69] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
/* /Components/Pages/PaymentSuccess.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   PAYMENT SUCCESS — booking ticket
   ═══════════════════════════════════════════════════════════ */

.ps-page[b-ls7lpw9b7h] {
    max-width: 620px;
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-md) var(--space-3xl);
    color: var(--ink-700);
}

/* ── Loading ────────────────────────────────────────────────── */
.ps-loading[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-height: 320px;
    color: var(--text-light);
    font-size: var(--step-0);
}

.ps-spinner[b-ls7lpw9b7h] {
    width: 44px;
    height: 44px;
    border: 3px solid var(--pink-100);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: ps-spin-b-ls7lpw9b7h 0.75s linear infinite;
}

@keyframes ps-spin-b-ls7lpw9b7h { to { transform: rotate(360deg); } }

/* ── Hero ───────────────────────────────────────────────────── */
.ps-hero[b-ls7lpw9b7h] {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.ps-check[b-ls7lpw9b7h] {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto var(--space-md);
    color: #fff;
    background: var(--grad-pink);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    animation: ps-pop-b-ls7lpw9b7h 0.5s var(--ease-spring) both;
}

.ps-check svg[b-ls7lpw9b7h] { width: 44px; height: 44px; }

.ps-check-path[b-ls7lpw9b7h] {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: ps-draw-b-ls7lpw9b7h 0.45s var(--ease-out) 0.35s forwards;
}

@keyframes ps-pop-b-ls7lpw9b7h {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes ps-draw-b-ls7lpw9b7h { to { stroke-dashoffset: 0; } }

.ps-title[b-ls7lpw9b7h] {
    margin: 0 0 var(--space-xs);
    font-size: var(--step-4);
    font-weight: 800;
    color: var(--ink-800);
}

.ps-subtitle[b-ls7lpw9b7h] {
    max-width: 46ch;
    margin: 0 auto;
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--text-light);
}

.ps-subtitle strong[b-ls7lpw9b7h] { color: var(--ink-700); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   TICKET
   ═══════════════════════════════════════════════════════════ */

/* Notch radius, shared by the pieces so the cut-outs line up. */
.ps-ticket[b-ls7lpw9b7h] {
    --notch: 15px;
    /* drop-shadow (not box-shadow) so the shadow follows the notched
       silhouette rather than the original rectangle. */
    filter: drop-shadow(0 12px 26px rgba(250, 22, 137, 0.16));
    animation: ps-fadein-b-ls7lpw9b7h 0.4s var(--ease-out) 0.15s both;
}

@keyframes ps-fadein-b-ls7lpw9b7h {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Main body (top of the ticket) ──────────────────────────── */
.ps-ticket-main[b-ls7lpw9b7h] {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

    /* Punch a semicircle out of each bottom corner — the top half of the
       perforation notches. mask-composite: intersect keeps everything
       EXCEPT the union of the two circles. */
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0% 100%, transparent 96%, #000 100%),
        radial-gradient(circle var(--notch) at 100% 100%, transparent 96%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle var(--notch) at 0% 100%, transparent 96%, #000 100%),
        radial-gradient(circle var(--notch) at 100% 100%, transparent 96%, #000 100%);
    mask-composite: intersect;
}

/* Header band */
.ps-card-band[b-ls7lpw9b7h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--surface-tint);
    border-bottom: 1px solid var(--border-subtle);
}

.ps-band-ref-group[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ps-band-label[b-ls7lpw9b7h] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
}

.ps-band-ref[b-ls7lpw9b7h] {
    font-size: var(--step-1);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--primary-dark);
}

/* Paid badge */
.ps-badge[b-ls7lpw9b7h] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.ps-badge-dot[b-ls7lpw9b7h] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ps-badge-paid[b-ls7lpw9b7h]          { color: var(--status-paid-fg); background: var(--status-paid-bg); }
.ps-badge-pendingreview[b-ls7lpw9b7h] { color: var(--status-review-fg); background: var(--status-review-bg); }
.ps-badge-failed[b-ls7lpw9b7h]        { color: var(--status-failed-fg); background: var(--status-failed-bg); }

/* Body */
.ps-body[b-ls7lpw9b7h] {
    padding: var(--space-lg);
    padding-bottom: var(--space-xl);
    position: relative;
}

/* Dashed tear line, inset so it sits between the two notches. */
.ps-body[b-ls7lpw9b7h]::after {
    content: "";
    position: absolute;
    left: calc(var(--notch) + 6px);
    right: calc(var(--notch) + 6px);
    bottom: 0;
    border-top: 2px dashed var(--border-subtle);
}

.ps-section-label[b-ls7lpw9b7h] {
    margin: 0 0 var(--space-md);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.ps-grid[b-ls7lpw9b7h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-lg);
}

.ps-item[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ps-label[b-ls7lpw9b7h] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

.ps-value[b-ls7lpw9b7h] {
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--ink-800);
    overflow-wrap: anywhere;
}

.ps-divider[b-ls7lpw9b7h] {
    height: 1px;
    margin: var(--space-lg) 0;
    background: var(--border-subtle);
}

/* ── Tear-off stub (bottom of the ticket) ───────────────────── */
.ps-ticket-stub[b-ls7lpw9b7h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--ink-800);
    color: #fff;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);

    /* Bottom half of the perforation notches, matching the main piece. */
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0% 0%, transparent 96%, #000 100%),
        radial-gradient(circle var(--notch) at 100% 0%, transparent 96%, #000 100%);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle var(--notch) at 0% 0%, transparent 96%, #000 100%),
        radial-gradient(circle var(--notch) at 100% 0%, transparent 96%, #000 100%);
    mask-composite: intersect;
}

.ps-stub-amount[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ps-stub-amount-label[b-ls7lpw9b7h] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pink-200);
}

.ps-stub-amount-value[b-ls7lpw9b7h] {
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.ps-stub-admit[b-ls7lpw9b7h] {
    margin-top: 0.15rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.ps-stub-code[b-ls7lpw9b7h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

/* Faux barcode built from an irregular repeating gradient. */
.ps-barcode[b-ls7lpw9b7h] {
    width: 132px;
    height: 42px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg,
            #fff 0 2px, transparent 2px 4px,
            #fff 4px 7px, transparent 7px 8px,
            #fff 8px 9px, transparent 9px 12px,
            #fff 12px 15px, transparent 15px 17px,
            #fff 17px 18px, transparent 18px 21px);
}

.ps-stub-ref[b-ls7lpw9b7h] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Actions ────────────────────────────────────────────────── */
.ps-actions[b-ls7lpw9b7h] {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    flex-wrap: wrap;
}

.ps-btn[b-ls7lpw9b7h] {
    flex: 1 1 auto;
    min-width: 170px;
    max-width: 260px;
    padding: 0.8rem 1.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}

.ps-btn-primary[b-ls7lpw9b7h] {
    color: #fff;
    background: var(--grad-pink);
    border: none;
    box-shadow: var(--shadow-sm);
}

.ps-btn-primary:hover[b-ls7lpw9b7h] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ps-btn-outline[b-ls7lpw9b7h] {
    color: var(--primary);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
}

.ps-btn-outline:hover[b-ls7lpw9b7h] {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--pink-50);
}

/* ── Help line ──────────────────────────────────────────────── */
.ps-help[b-ls7lpw9b7h] {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-light);
}

.ps-help a[b-ls7lpw9b7h] { font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 540px) {
    .ps-grid[b-ls7lpw9b7h] { grid-template-columns: 1fr; }

    .ps-ticket-stub[b-ls7lpw9b7h] { flex-direction: column; align-items: stretch; text-align: left; }

    .ps-stub-code[b-ls7lpw9b7h] { align-items: flex-start; }

    .ps-barcode[b-ls7lpw9b7h] { width: 100%; }

    .ps-actions[b-ls7lpw9b7h] { flex-direction: column; align-items: stretch; }

    .ps-btn[b-ls7lpw9b7h] { max-width: none; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ps-check[b-ls7lpw9b7h],
    .ps-check-path[b-ls7lpw9b7h],
    .ps-ticket[b-ls7lpw9b7h],
    .ps-spinner[b-ls7lpw9b7h] { animation: none; }

    .ps-check-path[b-ls7lpw9b7h] { stroke-dashoffset: 0; }
}

/* ── "Save this link" (guests only) ── */
.ps-keep[b-ls7lpw9b7h] {
    margin: 1.5rem auto 0;
    max-width: 34rem;
    padding: 1.1rem 1.25rem;
    border: 1.5px dashed var(--border, #f0d6e4);
    border-radius: 10px;
    background: #fffdfa;
    text-align: left;
}

.ps-keep-title[b-ls7lpw9b7h] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--primary);
}

.ps-keep-text[b-ls7lpw9b7h] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-light);
}

.ps-keep-link[b-ls7lpw9b7h] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.ps-keep-input[b-ls7lpw9b7h] {
    flex: 1;
    min-width: 0;               /* lets the input shrink instead of overflowing */
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
    font-family: ui-monospace, monospace;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border, #f0d6e4);
    border-radius: 6px;
}

.ps-keep-copy[b-ls7lpw9b7h] {
    flex: 0 0 auto;
    padding-inline: 1rem;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .ps-keep-link[b-ls7lpw9b7h] { flex-direction: column; }
}
/* /Components/Pages/Rentals.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   RENTALS & OTHER SERVICES
   ═══════════════════════════════════════════ */

/* ── Rental cards ───────────────────────────── */
.rental-card[b-ivij6oywww] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.rental-card h3[b-ivij6oywww] {
    color: var(--primary);
}

.rental-card p[b-ivij6oywww] {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-light);
}

.rental-rate[b-ivij6oywww] {
    margin-block: var(--space-xs) var(--space-md);
    font-weight: 700;
    color: var(--secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.74rem !important;
}

/* ── Other services ─────────────────────────── */
.services-section[b-ivij6oywww] {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.service-card[b-ivij6oywww] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.service-card:hover[b-ivij6oywww] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.service-icon[b-ivij6oywww] {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.service-card h3[b-ivij6oywww] {
    font-size: var(--step-0);
    color: var(--ink-800);
    margin-bottom: 0.25rem;
}

.service-card p[b-ivij6oywww] {
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
}

/* ── Equipment list: one bordered panel with divided rows instead of
   four repeated cards — same visual language as the spec-list below. ── */
.equipment-list[b-ivij6oywww] {
    max-width: 720px;
    margin: 0 auto;
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.equipment-row[b-ivij6oywww] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color var(--dur) var(--ease-out);
}

.equipment-row:last-child[b-ivij6oywww] {
    border-bottom: 0;
}

.equipment-row:hover[b-ivij6oywww] {
    background: var(--bg-field);
}

.equipment-num[b-ivij6oywww] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--pink-100);
    color: var(--primary);
    font-weight: 800;
    font-size: 1.05rem;
}

.equipment-body h3[b-ivij6oywww] {
    font-size: var(--step-0);
    color: var(--ink-800);
    margin: 0 0 0.2rem;
}

.equipment-body p[b-ivij6oywww] {
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-light);
    margin: 0;
}

@media (max-width: 500px) {
    .equipment-row[b-ivij6oywww] {
        gap: var(--space-sm);
        padding: var(--space-md);
    }
}

.services-pointer[b-ivij6oywww] {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: var(--step--1);
    color: var(--text-light);
}

/* ── Studio specs ───────────────────────────── */
.specs-grid[b-ivij6oywww] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-2xl);
    align-items: center;
}

.spec-list[b-ivij6oywww] {
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    background: var(--surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.spec-list li[b-ivij6oywww] {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--space-sm);
    padding-block: 0.65rem;
    font-size: var(--step--1);
    border-bottom: 1px solid var(--border-subtle);
}

.spec-list li:last-child[b-ivij6oywww] {
    border-bottom: 0;
}

.spec-k[b-ivij6oywww] {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-700);
    padding-top: 0.15rem;
}

.spec-v[b-ivij6oywww] {
    color: var(--text-light);
    line-height: 1.55;
}

@media (max-width: 860px) {
    .specs-grid[b-ivij6oywww] {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 600px) {
    .spec-list li[b-ivij6oywww] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}
/* /Components/Shared/ContentMedia.razor.rz.scp.css */
/* Image, video and slideshow all fill their panel identically, so swapping
   the media kind in the CMS never changes the surrounding layout. */
.cm-image[b-gl2sk957ir],
.cm-video[b-gl2sk957ir],
.cm-slideshow[b-gl2sk957ir] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-slideshow[b-gl2sk957ir] {
    position: relative;
    overflow: hidden;
}

/* "Show whole image" — for posters and flyers, where cover would crop the
   wording off the top and bottom. */
.cm-image.cm-fit-contain[b-gl2sk957ir],
.cm-video.cm-fit-contain[b-gl2sk957ir],
.cm-slideshow.cm-fit-contain .cm-slide[b-gl2sk957ir] {
    object-fit: contain;
}

/* Transparent by default so whatever the host panel paints shows through
   unchanged, rather than stacking a second veil on top of it. Set --cm-mat
   on a containing element to give contained media its own backdrop. */
.cm-image.cm-fit-contain[b-gl2sk957ir],
.cm-video.cm-fit-contain[b-gl2sk957ir],
.cm-slideshow.cm-fit-contain[b-gl2sk957ir] {
    background: var(--cm-mat, transparent);
}

.cm-slide[b-gl2sk957ir] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 900ms ease;
}

.cm-slide.is-active[b-gl2sk957ir] {
    opacity: 1;
}

/* Slide indicator — same visual language as .quote-dots and .gm-dots, but
   sitting over the image rather than under it, so it needs the scrim and a
   light palette to stay legible on any photo. */
.cm-dots[b-gl2sk957ir] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.25rem 0 0.9rem;
    background: linear-gradient(to top, rgb(0 0 0 / 0.35), transparent);
    pointer-events: none;
}

.cm-dot[b-gl2sk957ir] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.5);
    transition: background-color var(--dur, 0.25s) var(--ease-out, ease),
                transform var(--dur, 0.25s) var(--ease-out, ease);
}

.cm-dot.is-active[b-gl2sk957ir] {
    background: #fff;
    transform: scale(1.45);
}

/* Without motion, the slideshow becomes a static first frame — the JS in
   effects.js checks the same query and never starts the timer. */
@media (prefers-reduced-motion: reduce) {
    .cm-slide[b-gl2sk957ir],
    .cm-dot[b-gl2sk957ir] {
        transition: none;
    }

    /* Nothing rotates here, so an indicator would promise motion that never
       arrives — and the dots are deliberately not clickable. */
    .cm-dots[b-gl2sk957ir] {
        display: none;
    }
}