/* ==========================================================================
   CSS Design System (Variables)
   ========================================================================== */
:root {
    /* This is a light-only design. `only light` opts the page out of
       browser-level auto-dark (Chrome / Samsung Internet "force dark web
       contents"), which otherwise inverts colours algorithmically and
       wrecks contrast — dark-blue headings turn pale blue, body text goes
       muddy grey, the brand red desaturates. Mirrored by
       <meta name="color-scheme" content="light"> in header.php. */
    color-scheme: only light;

    /* Colors */
    --color-primary: #d01847;
    /* Ascendis Red (base) */
    --color-primary-dark: #ad132a;
    /* Darker Ascendis Red for hover */
    --color-secondary: #012842;
    /* Dark Base — "gri albastru" from the agreed KV */
    --color-heading: #012842;
    /* Big titles — same "gri albastru", kept as its own token so headings
       can diverge from the dark-section background later if needed. */
    --color-text: #333333;
    --color-text-light: #555555;
    --color-bg: #faf8fa;
    /* Page background — light end of the KV gradient (fallback for --color-bg-gradient) */
    --color-bg-gradient: linear-gradient(180deg, #efe8ef 0%, #faf8fa 100%);
    --color-bg-alt: #f1f1f1;
    --color-white: #ffffff;

    /* Typography */
    --font-primary: 'Manrope', sans-serif;
    --font-secondary: 'Inter', sans-serif;

    /* Responsive Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    --text-6xl: 4rem;
    /* Base hero size for mobile/tablet */

    /* Spacing System */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);

    /* Layout */
    --container-max: 1200px;
    --container-padding: var(--space-4);

    /* Z-index */
    --z-header: 1000;

    /* Header offset — used by any content that sits below the fixed header
       (e.g. legal pages) so the offset stays tied to one source instead of
       a hand-picked padding value per page. */
    --header-height: 96px;

    /* Icon tint recipes, centralized. Every icon that needs to match a
       color token uses one of these instead of re-deriving its own filter. */
    --icon-filter-primary: invert(19%) sepia(77%) saturate(4820%) hue-rotate(335deg) brightness(84%) contrast(94%);
    --icon-filter-muted: invert(34%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(87%) contrast(85%);
    --icon-filter-dark: invert(4%) sepia(8%) saturate(13%) hue-rotate(314deg) brightness(97%) contrast(85%);
    --icon-filter-white: brightness(0) invert(1);

    /* Muted-white text scale for dark sections. Every faded-white text
       color should resolve to one of these four steps. */
    --on-dark-1: 0.85;
    --on-dark-2: 0.7;
    --on-dark-3: 0.55;
    --on-dark-4: 0.35;

    /* One step deeper than --color-secondary, for gradients only.
       Dark end of the KV "K" gradient (#0e1226 -> #012842). */
    --color-secondary-deep: #0e1226;

    /* KV "K" element gradient — dark blue-black to blue-gray. */
    --k-gradient: linear-gradient(180deg, #0e1226 0%, #012842 100%);
}

/* Breakpoints Configuration */
@media (min-width: 768px) {
    :root {
        --text-5xl: 3.5rem;
        --text-6xl: 4rem;
        --container-padding: var(--space-8);
    }
}

@media (min-width: 1024px) {
    :root {
        --text-5xl: 4rem;
        --text-6xl: 5rem;
        /* Adjusted for Manrope width */
    }
}

/* ==========================================================================
   Reset & Basics
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

/* Smooth in-page navigation for the header anchor links, offset so the
   target section clears the fixed header instead of hiding beneath it. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    /* Reserve the scrollbar gutter permanently so hiding the scrollbar while
       the page-transition curtain is up (.rk-curtain-active) — and the video
       modal's scroll lock — never shifts the layout. */
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: var(--font-secondary);
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-bg);
    background-image: var(--color-bg-gradient);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    margin-top: 0;
    color: var(--color-heading);
    /* Baseline weight; components override it deliberately where the
       heading plays a different role (.section-title: 800, .section-subtitle: 300). */
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Generic fade-in-on-load utility for <img>. Add the class to any image;
   main.js flips .is-loaded once it's actually loaded (or immediately if it
   was already cached). Reusable by any future module, not sponsors-specific. */
.fade-in-img {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fade-in-img.is-loaded {
    opacity: 1;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    padding: var(--space-6) 0;
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
    background-color: transparent;
}

.site-header.scrolled,
.site-header.inner-header {
    background-color: var(--color-white);
    padding: var(--space-4) 0;
    box-shadow: var(--shadow-md);
}

.header-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Organizer logos are absolutely centered on the header, independent of nav
   and CTA width — nav stays pinned left in both states. They're always
   visible; two colour pairs (light = white/red, for the transparent header
   over the dark hero; dark = red/navy, for the condensed white header)
   crossfade into each other via opacity as `.scrolled`/`.inner-header` toggle. */
.site-branding {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.brand-link {
    display: block;
}

.main-navigation {
    display: flex;
    justify-content: flex-start;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
}

.header-organizers {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: opacity 0.4s ease;
}

/* Stacked exactly on top of the (in-flow) light pair — both lockups render
   at identical dimensions, so this lines up without any JS measuring. */
.header-organizers--dark {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.site-header.scrolled .header-organizers--light,
.site-header.inner-header .header-organizers--light {
    opacity: 0;
}

.site-header.scrolled .header-organizers--dark,
.site-header.inner-header .header-organizers--dark {
    opacity: 1;
}

/* Mobile-only mark pair (see the ≤767px block below) — hidden everywhere
   else, where the full light/dark lockups are used instead. */
.header-organizers--marks {
    display: none;
}

.org-logo {
    height: 34px;
    width: auto;
    display: block;
}

.org-sep {
    font-size: var(--text-lg);
    color: rgba(1, 40, 66, 0.35);
    /* --color-secondary @ 35% — dark pair, on the light sticky header */
    font-weight: 300;
}

.org-sep--light {
    color: rgba(255, 255, 255, var(--on-dark-4));
}

/* Navigation */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-8);
}

.nav-menu a {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    transition: color 0.3s ease;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.nav-menu a:hover::after {
    width: 100%;
}

.site-header.scrolled .nav-menu a,
.site-header.inner-header .nav-menu a {
    color: var(--color-secondary);
}

.site-header.scrolled .nav-menu a:hover,
.site-header.inner-header .nav-menu a:hover {
    color: var(--color-primary);
}

.mobile-nav-cta {
    display: none;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: var(--space-2);
    z-index: 1001;
    position: relative;
    width: 44px;
    height: 44px;
    transition: color 0.3s ease;
}

.site-header.scrolled .menu-toggle,
.site-header.inner-header .menu-toggle {
    color: var(--color-secondary);
}

.menu-toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle svg {
    width: 28px;
    height: 28px;
    display: block;
}

.icon-menu {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0) scale(1);
}

.icon-close {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
}

.menu-toggle.is-active .icon-menu {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
}

.menu-toggle.is-active .icon-close {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0) scale(1);
}

.menu-toggle.is-active,
.site-header.scrolled .menu-toggle.is-active,
.site-header.inner-header .menu-toggle.is-active {
    color: var(--color-white) !important;
}

/* Desktop only (≥1281px — below that, nav lives in the drawer, handled in
   the mobile/tablet block further down and untouched here). Calup on the
   left, nav grouped together with the CTA on the right — one flexible
   spacer column absorbs whatever room is left between them. Identical in
   the transparent and condensed header; only colour changes on scroll
   (background, calup light/dark pair, nav text), never the arrangement. */
@media (min-width: 1281px) {
    .header-inner {
        display: grid;
        align-items: center;
        column-gap: var(--space-6);
        grid-template-columns: auto 1fr auto auto;
    }

    .site-branding {
        display: block;
        position: relative;
        /* just the containing block for the --dark crossfade overlay */
        left: auto;
        top: auto;
        transform: none;
        grid-column: 1;
        justify-self: start;
    }

    .main-navigation {
        grid-column: 3;
    }

    .header-actions {
        grid-column: 4;
    }

    .org-logo {
        height: 45px;
    }
}

/* Responsive Header (Mobile Menu) */
@media (max-width: 1280px) {
    :root {
        --header-height: 88px;
        /* taller: stacked organizer lockups on mobile */
    }

    /* Stack the organizer lockups on mobile: logo / × / logo */
    .header-organizers {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .org-logo {
        height: 18px;
    }

    .org-sep {
        font-size: var(--text-sm);
        line-height: 1;
    }

    /* Mobile: same always-visible, crossfading calup as desktop — just
       pinned left in normal flow (stacked) instead of centered/absolute.
       Stays `position: relative` (rather than `static`) so it's still the
       containing block .header-organizers--dark stacks on top of. */
    .site-branding {
        display: flex;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        flex: 1;
        justify-content: flex-start;
    }

    /* Nav is a fixed drawer here (out of flow), so .site-branding (flex:1)
       and .header-actions are the only two in-flow children — this keeps
       actions pinned right regardless. */
    .header-inner {
        justify-content: flex-end;
    }

    .menu-toggle {
        display: block;
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 420px;
        height: 100vh;
        background: rgba(173, 19, 42, 0.96);
        /* Premium Dark Red — brand --color-primary-dark */
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        padding: var(--space-24) var(--space-10) var(--space-10);
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .nav-menu {
        flex-direction: column;
        gap: var(--space-8);
        align-items: flex-start;
        width: 100%;
    }

    .nav-menu a,
    .site-header.scrolled .nav-menu a,
    .site-header.inner-header .nav-menu a {
        color: var(--color-white);
        font-size: var(--text-4xl);
        font-weight: 800;
        letter-spacing: -1px;
        display: block;
        width: 100%;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-menu a:hover,
    .site-header.scrolled .nav-menu a:hover,
    .site-header.inner-header .nav-menu a:hover {
        color: var(--color-white);
        transform: translateX(12px);
    }

    .nav-menu a::after {
        display: none;
    }

    .nav-menu li.mobile-nav-cta {
        display: block;
        margin-top: var(--space-6);
        width: 100%;
    }

    .nav-menu .mobile-nav-cta a,
    .site-header.scrolled .nav-menu .mobile-nav-cta a,
    .site-header.inner-header .nav-menu .mobile-nav-cta a {
        font-size: var(--text-lg);
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        border: 2px solid var(--color-white);
        padding: var(--space-4) var(--space-8);
        border-radius: var(--radius-full);
        text-align: center;
        display: flex;
        justify-content: center;
        width: 100%;
        transition: all 0.3s ease;
    }

    .nav-menu .mobile-nav-cta a:hover,
    .site-header.scrolled .nav-menu .mobile-nav-cta a:hover,
    .site-header.inner-header .nav-menu .mobile-nav-cta a:hover {
        background-color: var(--color-white);
        color: var(--color-primary);
        transform: translateY(-2px);
    }
}

/* Tablet (768–1280px): enough width for the calup as a single row instead
   of the mobile-stacked logo/×/logo — calup stays left (inherited from the
   shared block above via .site-branding's flex:1), CTA + hamburger stay
   grouped on the right (inherited via .header-inner's justify-content). */
@media (min-width: 768px) and (max-width: 1280px) {
    :root {
        --header-height: 76px;
    }

    .header-organizers {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
    }

    .org-logo {
        height: 45px;
        /* same as desktop */
    }

    .org-sep {
        font-size: var(--text-lg);
        line-height: normal;
    }
}

/* Mobile (≤767px): marks only — no wordmarks — icon / × / icon on one row,
   vertically centered. Both marks are self-coloured (the Ascendis sail and
   the UP! bubble are red regardless of background), so unlike the tablet/
   desktop lockups this doesn't need a light/dark image pair — only the ×
   separator still needs to track the header's background. */
@media (max-width: 767px) {
    :root {
        --header-height: 64px;
    }

    .header-organizers--light,
    .header-organizers--dark {
        display: none;
    }

    /* "Book your seat" stays visible in the header bar next to the hamburger
       on phones. It was overflowing the viewport at the default .btn-sm size,
       so it's shrunk here — tighter padding, smaller type, no letter-spacing,
       and forced onto a single line — and the actions gap is reduced so the
       marks lockup keeps enough room. (Scoped as `.header-actions .header-cta`
       to beat `.btn`'s own rules at equal specificity.) */
    .header-actions {
        gap: var(--space-2);
    }

    .header-actions .header-cta {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .header-organizers--marks {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
    }

    .org-logo--mark {
        height: 32px;
        width: auto;
        display: block;
    }

    .header-organizers--marks .org-sep {
        color: rgba(255, 255, 255, var(--on-dark-4));
    }

    .site-header.scrolled .header-organizers--marks .org-sep,
    .site-header.inner-header .header-organizers--marks .org-sep {
        color: rgba(1, 40, 66, 0.35);
    }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding-top: 80px;
    overflow: hidden;
}

/* Background lives on its own layer (rather than directly on .hero-section)
   so it can be blurred on mobile without also blurring the text/content
   sitting on top of it. */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(14, 18, 38, 0.5) 0%, rgba(14, 18, 38, 0.15) 40%, rgba(14, 18, 38, 0) 100%), url('../images/hero-background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Shared with .video-parallax-eyebrow below — same label style wherever it
   sits on a dark section, so the two can't drift apart independently. */
.hero-eyebrow,
.video-parallax-eyebrow {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-4);
    color: rgba(255, 255, 255, var(--on-dark-2));
    font-weight: 800;
}

.hero-title {
    font-family: var(--font-primary);
    font-size: var(--text-6xl);
    line-height: 1.05;
    margin-bottom: var(--space-4);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: var(--color-white);
}

.hero-subtitle {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    line-height: 1.4;
    margin-bottom: var(--space-10);
    color: rgba(255, 255, 255, var(--on-dark-1));
    font-weight: 300;
}

.hero-events-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
    /* GSAP applies a transform to this element for the scroll parallax, which creates its
       own stacking context. Without an explicit z-index here, later siblings that also get
       a transform (.hero-cta-wrapper, .hero-benefits) would paint on top of it in DOM order,
       hiding the open .event-card behind them despite its own z-index. */
    position: relative;
    z-index: 5;
}

.event-pill {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

button.event-pill {
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: background 0.3s ease, border-color 0.3s ease;
}

button.event-pill:hover,
button.event-pill[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.event-pill-wrapper {
    position: relative;
}

.event-card {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    /* Width follows the content: each card is only as wide as its own venue
       name (kept on one line), clamped so a long name never overflows the
       viewport and a short one never looks cramped. */
    width: fit-content;
    min-width: 300px;
    max-width: min(460px, calc(100vw - var(--space-8)));
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: var(--space-5);
    z-index: 100;
    text-align: left;

    /* Initial state for GSAP */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Invisible bridge to prevent hover loss when moving mouse from pill to card */
.event-card::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 100%;
    height: 16px;
    background: transparent;
}

.event-card::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: var(--color-white);
}

/* Desktop only: flip the card to open downward when the pill sits near the top of the viewport */
@media (min-width: 1281px) {
    .event-card.card-flip-down {
        top: calc(100% + 12px);
        bottom: auto;
    }

    .event-card.card-flip-down::before {
        top: -16px;
        bottom: auto;
    }

    .event-card.card-flip-down::after {
        top: -6px;
        bottom: auto;
    }
}

.card-header {
    margin-bottom: var(--space-4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: var(--space-3);
}

.venue-name {
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--color-secondary);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    line-height: 1.3;
    white-space: nowrap;
}

/* building-2 (Lucide) — the venue itself. The address below keeps map-pin. */
.venue-name .venue-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    filter: var(--icon-filter-primary);
}

/* The address doubles as the "open in Google Maps" link — no separate
   button in the footer. */
.venue-address {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    text-decoration: none;
    transition: color 0.2s ease;
}

a.venue-address:hover,
a.venue-address:focus-visible {
    color: var(--color-primary);
}

a.venue-address:hover .detail-icon,
a.venue-address:focus-visible .detail-icon {
    opacity: 1;
    filter: var(--icon-filter-primary);
}

.venue-address .detail-icon {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.card-body {
    margin-bottom: var(--space-5);
}

/* The card now carries just location (header) + date. The date is shown as a
   compact, branded "save the date" block so the slimmed-down card still feels
   deliberate: red gradient day badge (echoes the booking-section glow) beside
   the weekday in Manrope 800 and the full date underneath. */
.event-card-date {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.event-card-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    box-shadow: 0 6px 16px rgba(208, 24, 71, 0.28);
    line-height: 1;
}

.ecd-month {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

.ecd-day {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-top: 2px;
}

.event-card-date-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ecd-weekday {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--color-secondary);
}

.ecd-full {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    letter-spacing: 0.02em;
}

.card-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
}

/* Keep the "Book your seat — <city>" label on a single line inside the
   320px card: tighter tracking/padding and a smaller label. Solid red by
   default, ghost (outline) on hover. */
.card-footer .btn {
    white-space: nowrap;
    letter-spacing: 0.3px;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    font-size: var(--text-xs);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.card-footer .btn:hover {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

/* Inline emphasis link within body copy (e.g. the speaker bio paragraph). */
.text-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

.text-link:hover {
    color: var(--color-primary-dark);
}

.event-date {
    font-weight: 800;
    color: var(--color-white);
}

.event-sep {
    opacity: 0.5;
}

.hero-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, var(--on-dark-4));
    font-weight: 400;
}

.benefit-sep svg {
    display: block;
    opacity: 0.3;
}

.hero-organizers-top {
    display: none;
    /* hidden on tablet/desktop — the header now carries its own calup; shown again on mobile below (≤768px) */
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-8);
}

.org-logo-sm {
    height: 54px;
    width: auto;
    display: block;
}

.org-sep-sm {
    font-size: var(--text-2xl);
    color: rgba(255, 255, 255, var(--on-dark-4));
    font-weight: 300;
}

/* Below this, mobile-only — tablet (768–1280px) now keeps the desktop hero
   layout untouched (text left-aligned, pills row, no forced centering). */
@media (max-width: 767px) {
    .hero-section {
        padding: 10rem 0 6rem;
    }

    .hero-section::before {
        background-image: linear-gradient(180deg, rgba(14, 18, 38, 0.78) 0%, rgba(14, 18, 38, 0.3) 55%, rgba(14, 18, 38, 0.05) 100%), url('../images/hero-background.webp');
        background-position: 75% top;
        background-attachment: scroll;
    }

    .hero-organizers-top {
        margin-top: var(--space-8);
        justify-content: center;
    }

    .org-logo-sm {
        height: 36px;
    }

    .hero-title {
        font-size: var(--text-4xl);
        margin-bottom: var(--space-4);
    }

    .hero-subtitle {
        font-size: var(--text-xl);
        margin-bottom: var(--space-8);
    }

    .hero-events-pills {
        flex-direction: column;
        position: relative;
        /* Anchor for mobile cards */
    }

    .event-pill-wrapper {
        width: 100%;
        position: static;
        /* Allow card to be positioned relative to hero-events-pills */
    }

    .event-pill {
        width: 100%;
        justify-content: center;
    }

    .event-card {
        top: 0;
        bottom: auto;
        left: 0;
        transform: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 100%;
        /* Ensure it covers all pills */
        z-index: 60;
    }

    /* Full-width card on phones — let the venue name wrap instead of forcing
       one line and risking horizontal overflow. */
    .venue-name {
        white-space: normal;
        align-items: flex-start;
    }

    .venue-name .venue-icon {
        margin-top: 3px;
    }

    .event-card::after,
    .event-card::before {
        display: none;
    }

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

    .hero-cta-wrapper {
        align-items: center;
        margin-bottom: var(--space-8);
    }

    .hero-benefits {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-section::before {
        /* Slight blur softens the tightly-cropped photo on small screens;
           scaled up so the blur doesn't reveal edges outside the section. */
        filter: blur(2px);
        transform: scale(1.03);
    }

    /* Mobile hero was cramped: 100vh forced the content taller than the
       screen, pushing the city pills + CTA down behind the cookie bar.
       Let the section grow with its content instead, tighten the vertical
       rhythm, and reserve room at the bottom for the floating cookie bar
       (--cookie-bar-h is kept in sync by the cookie-consent script; 0 when
       hidden). */
    .hero-section {
        min-height: 100svh;
        padding: 7rem 0 calc(2rem + var(--cookie-bar-h, 0px));
        transition: padding-bottom 0.3s ease;
    }

    .hero-organizers-top {
        display: flex;
        margin-top: var(--space-4);
        margin-bottom: var(--space-6);
        gap: var(--space-4);
    }

    .hero-eyebrow {
        margin-bottom: var(--space-3);
        letter-spacing: 1.5px;
    }

    .hero-title {
        font-size: 2.15rem;
        line-height: 1.1;
        letter-spacing: -0.5px;
    }

    .hero-subtitle {
        font-size: var(--text-lg);
        margin-bottom: var(--space-6);
    }

    .hero-subtitle br {
        display: none;
    }

    .hero-events-pills {
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }

    .hero-cta-wrapper {
        margin-bottom: var(--space-6);
    }

    .hero-benefits {
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-3);
        row-gap: var(--space-2);
        font-size: var(--text-xs);
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    font-family: var(--font-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-sm {
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-5) var(--space-12);
    font-size: var(--text-lg);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    transform: translateY(-2px);
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow: none;
}

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

.btn-outline-primary:hover {
    transform: translateY(-2px);
    background-color: var(--color-primary);
    color: var(--color-white);
}

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

.btn-outline-white:hover {
    transform: translateY(-2px);
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* ==========================================================================
   Speaker Section
   ========================================================================== */
.speaker-section {
    /* Aligned with .outcomes-section: the two "featured" sections share the
       roomier tier, standard content sections use --space-12 instead. */
    padding: var(--space-16) 0;
    background-color: var(--color-white);
    color: var(--color-text);
}

.speaker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
}

@media (min-width: 1024px) {
    .speaker-grid {
        grid-template-columns: 5fr 7fr;
        /* 5 columns for image, 7 for text */
        gap: var(--space-20);
        align-items: stretch;
    }

    .speaker-image-wrapper {
        aspect-ratio: auto;
    }
}

/* Image Visual */
.speaker-visual {
    height: 100%;
}

.speaker-image-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 3 / 4;
    height: 100%;
}

.speaker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Typography */
.section-eyebrow {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--space-3);
    color: var(--color-primary);
    font-weight: 800;
}

.section-title {
    font-size: var(--text-5xl);
    line-height: 1.1;
    margin-bottom: var(--space-2);
    font-weight: 800;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* On narrow viewports the longest single word ("TRANSFORMATIONS") would
   otherwise break mid-word; scale the heading down so words stay intact. */
@media (max-width: 600px) {
    .section-title {
        font-size: clamp(1.55rem, 7vw, var(--text-5xl));
    }
}

.section-subtitle {
    font-family: var(--font-secondary);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-text-light);
    margin-bottom: var(--space-6);
    font-weight: 300;
    /* Deliberately its own thing: an italic, light-weight editorial aside
       under the Speaker heading, not the shared "lede" role below. */
}

/* Shared "lede" role — the supporting paragraph under a section title
   (about-intro, agenda-subtitle, video-parallax-description). Written
   explicitly instead of leaving it to inherited body defaults, so the
   three can't drift apart from each other silently. */
.lede {
    font-family: var(--font-secondary);
    font-weight: 400;
}

.speaker-bio {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.speaker-bio p {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

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

/* Credibility Strip */
.credibility-strip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
    padding: var(--space-5);
    background-color: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

/* Below this width the 3 stats can't sit on one line, so stack them
   1-per-row instead of letting them wrap into an uneven 2+1 split. */
@media (min-width: 480px) {
    .credibility-strip {
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
    }
}

@media (min-width: 768px) {
    .credibility-strip {
        gap: var(--space-10);
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.1);
    display: none;
}

@media (min-width: 480px) {
    .stat-divider {
        display: block;
    }
}

.stat-number {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-1);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat-number small {
    font-size: var(--text-sm);
    font-weight: 600;
}

/* Modifier for stat values too long to sit at the default --text-3xl (e.g. "WorldWide"). */
.stat-number--sm {
    font-size: var(--text-2xl);
}

.stat-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-light);
    font-weight: 600;
}

.speaker-cta svg {
    margin-left: var(--space-2);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    background-color: var(--color-secondary);
    color: rgba(255, 255, 255, var(--on-dark-2));
    padding: var(--space-16) 0 var(--space-8);
    font-size: var(--text-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Below 1300px the floating buttons (back-to-top / cookie reopen) sit fixed
   in the bottom corners close enough to the footer content to cover it when
   scrolled to the very bottom. Reserve room. Wider than that, the container
   margins already clear them. */
@media (max-width: 1299px) {
    .site-footer {
        padding-bottom: calc(48px + var(--space-5) + var(--space-6));
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
    }
}

/* Footer Brand */
.footer-organizers {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.footer-org-logo {
    height: 34px;
    width: auto;
    display: block;
}

.footer-org-sep {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, var(--on-dark-4));
    font-weight: 300;
}

.footer-tagline {
    font-family: var(--font-primary);
    color: var(--color-white);
    font-size: var(--text-base);
    letter-spacing: 1px;
    margin-bottom: var(--space-3);
    font-weight: 700;
    text-transform: uppercase;
}

.footer-event-info {
    line-height: 1.6;
    margin: 0;
    margin-top: var(--space-5);
}

.footer-event-row {
    margin-bottom: var(--space-2);
    color: var(--color-white);
}

.footer-event-row:last-child {
    margin-bottom: 0;
}

/* Footer Links */
.footer-links-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    justify-items: start;
    text-align: left;
}

/* Tablet + desktop: two-column footer, right column aligns to the right. */
@media (min-width: 768px) {
    .footer-links-wrapper {
        justify-items: end;
        text-align: right;
    }
}

.footer-heading {
    display: block;
    color: var(--color-white);
    font-family: var(--font-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: var(--space-2);
}

/* Legal links on a single row, separated by a divider. */
.footer-list-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

@media (min-width: 768px) {
    .footer-list-inline {
        justify-content: flex-end;
    }
}

.footer-list-inline li {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.footer-list-inline li:not(:last-child)::after {
    content: "|";
    margin-left: var(--space-3);
    color: rgba(255, 255, 255, 0.2);
}

.footer-list a {
    color: rgba(255, 255, 255, var(--on-dark-2));
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-list a:hover {
    color: var(--color-primary);
}

.footer-highlight {
    color: var(--color-white) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

.footer-highlight:hover {
    color: var(--color-primary) !important;
}

/* Footer Bottom */
.footer-bottom {
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}


/* ==========================================================================
   Video Parallax Section
   ========================================================================== */
.video-parallax-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-secondary);
    background-image: url('../images/ron-kaufman-stage-blur.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--color-white);
    /* Separation from the next section comes from padding alone, same as
       every other section — no extra margin stacked on top of it. */
    padding: var(--space-12) 0;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .video-parallax-section {
        background-attachment: scroll;
        /* Disable on mobile/tablet for performance/iOS issues */
    }
}

.video-parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(14, 18, 38, 0.9);
    /* Darker overlay for better contrast */
    z-index: 1;
}

.video-parallax-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 0 var(--space-4);
}

.video-parallax-eyebrow {
    margin-bottom: var(--space-3);
}

.video-parallax-title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    line-height: 1.2;
    margin-bottom: var(--space-4);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-white);
}

.video-parallax-description {
    font-size: var(--text-base);
    line-height: 1.5;
    margin-bottom: var(--space-6);
    color: rgba(255, 255, 255, var(--on-dark-1));
}

.btn-play-video {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-play-video:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-white);
}

.play-icon {
    width: 24px;
    height: 24px;
    margin-left: 4px;
    /* visually center play icon */
    filter: var(--icon-filter-white);
}

/* ==========================================================================
   About Event Section
   ========================================================================== */
.about-event-section {
    /* Joins the "featured" tier (see .speaker-section / .outcomes-section):
       this section now carries its own visual weight, not a plain filler. */
    padding: var(--space-16) 0;
}

.about-event-container {
    max-width: 1140px;
}

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

/* Header matches every other section header on the page (.agenda-header,
   .outcomes-header): centered eyebrow + title, nothing bespoke. */
.about-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-16);
}

.about-intro {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--color-text-light);
    margin: var(--space-2) 0 0;
}

/* Two content groups — Workshop Objectives / Key Benefits — built from the
   same eyebrow + title + icon-list vocabulary used everywhere else on this
   page (.section-eyebrow, .agenda-badge, .lede), just without a boxed card. */
.about-groups {
    display: flex;
    flex-direction: column;
}

.about-group {
    padding: var(--space-10) 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.about-group:first-child {
    padding-top: 0;
    border-top: none;
}

.about-group:last-child {
    padding-bottom: 0;
}

.about-group-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-10);
}

.about-group-title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-secondary);
    margin: 0;
}

.about-group-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-light);
    margin: var(--space-2) 0 0;
}

/* Same recipe as .agenda-badge, reused here for the "12 essential areas" tag. */
.about-group-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-bg-alt);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-secondary);
    margin-top: var(--space-4);
}

.about-group-badge-icon {
    filter: var(--icon-filter-primary);
    width: 14px;
    height: 14px;
}

.about-group-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
}

@media (min-width: 768px) {
    .about-group-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
}

.about-group-item-icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-4);
    background-color: rgba(208, 24, 71, 0.08);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-group-item-icon .card-icon {
    width: 26px;
    height: 26px;
    filter: var(--icon-filter-primary);
}

.about-group-item-title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--color-secondary);
    margin: 0 0 var(--space-3);
}

.about-group-item p {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0 0 var(--space-3);
}

.about-group-item>*:last-child {
    margin-bottom: 0;
}

.about-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.about-group-list li {
    position: relative;
    padding-left: var(--space-4);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-light);
}

.about-group-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* ==========================================================================
   Agenda Section
   ========================================================================== */
.agenda-section {
    padding: var(--space-12) 0;
    background-color: var(--color-white);
    color: var(--color-text);
}

.agenda-header {
    text-align: center;
    margin-bottom: var(--space-8);
    max-width: 800px;
    margin-inline: auto;
}

.agenda-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-bg-alt);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: var(--space-2);
}

.agenda-badge img {
    /* Primary color #d01847 filter */
    filter: var(--icon-filter-primary);
    width: 14px;
    height: 14px;
}

.agenda-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-light);
    line-height: 1.5;
}

.agenda-timeline {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.timeline-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

@media (min-width: 768px) {
    .timeline-item {
        gap: var(--space-4);
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
    }
}

.timeline-marker {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    border: 2px solid var(--color-secondary);
    /* Default to secondary (less important than sessions) */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-icon {
    width: 14px;
    height: 14px;
    /* Default dark filter for secondary elements */
    filter: var(--icon-filter-dark);
}

.timeline-content {
    flex: 1;
    min-width: 0;
    /* Title, time and duration all on one line */
    display: flex;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    flex-wrap: wrap;
}

/* Wrapper kept for markup compatibility — its children join the flex row above */
.timeline-row {
    display: contents;
}

.timeline-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0;
}

.timeline-time {
    order: 2;
    /* after the duration */
    flex: 0 0 auto;
    width: 8.5em;
    /* fixed so every row's time box is identical width */
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    /* equal-width digits */
    white-space: nowrap;
    /* prevent time from wrapping */
}

/* 1. MOST IMPORTANT: Session Items */
.session-item .timeline-marker {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.session-item .timeline-icon {
    /* Pure white filter */
    filter: var(--icon-filter-white);
}

.session-item .timeline-title {
    font-weight: 800;
}

/* 3. LEAST IMPORTANT: Break items styling */
.break-item .timeline-marker {
    background-color: var(--color-bg-alt);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--color-text-light);
}

.break-icon {
    /* Gray/light text color filter (#555555) */
    filter: var(--icon-filter-muted);
}

.break-item .timeline-title,
.break-item .timeline-time {
    color: var(--color-text-light);
}

@media (min-width: 768px) {
    .timeline-marker {
        width: 36px;
        height: 36px;
    }

    .timeline-icon {
        width: 16px;
        height: 16px;
    }
}

.timeline-duration {
    order: 1;
    /* before the time */
    flex: 0 0 auto;
    margin-left: auto;
    /* push the duration + time group to the right edge */
    margin-right: var(--space-3);
    /* extra breathing room before the time */
    width: 1em;
    /* wide enough for the longest value ("1h 30m") so nothing overflows */
    text-align: right;
    font-size: 0.75rem;
    color: var(--color-text-light);
    font-weight: 500;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   Video Modal
   ========================================================================== */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.video-modal-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    z-index: 2;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.video-modal[aria-hidden="false"] .video-modal-container {
    transform: scale(1);
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--color-white);
}

.video-modal-close img {
    width: 24px;
    height: 24px;
    filter: var(--icon-filter-white);
    transition: transform 0.3s ease;
}

.video-modal-close:hover img {
    transform: rotate(90deg);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    background-color: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   SPONSORS SECTION
   ========================================================================== */

.sponsors-section {
    padding: var(--space-12) 0;
    background-color: var(--color-bg-alt);
    color: var(--color-text);
    overflow: hidden;
}

.sponsors-header {
    text-align: center;
    margin-bottom: var(--space-8);
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Single-row sponsor logos. Auto-switches to an infinite marquee (JS toggles
   .is-marquee) when the row doesn't fit the available width — see main.js. */
.sponsors-row {
    width: 100%;
    overflow: hidden;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.sponsors-row.is-marquee {
    max-width: none;
    padding-inline: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sponsors-row-track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--space-12);
    /* Headroom so the hover scale/shadow on .sponsor-logo img isn't clipped
       by .sponsors-row's overflow:hidden (needed for the marquee/mask). */
    padding-block: var(--space-3);
    width: 100%;
}

.sponsors-row.is-marquee .sponsors-row-track {
    justify-content: flex-start;
    width: max-content;
    padding-inline: var(--space-12);
    animation-name: sponsors-marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.sponsors-row.is-marquee:hover .sponsors-row-track {
    animation-play-state: paused;
}

@keyframes sponsors-marquee {
    from {
        transform: translateX(0);
    }

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

@media (prefers-reduced-motion: reduce) {
    .sponsors-row.is-marquee .sponsors-row-track {
        animation: none;
    }

    .sponsors-row.is-marquee {
        overflow-x: auto;
    }
}

.sponsor-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 48px;
}

@media (min-width: 768px) {
    .sponsor-logo {
        height: 64px;
    }
}

.sponsor-logo img {
    max-height: 100%;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.4s ease;
}

.sponsor-logo:hover img,
.sponsor-logo:focus-visible img {
    transform: scale(1.06);
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.12));
}

.sponsor-logo.has-tooltip {
    border-radius: var(--radius-sm);
}

.sponsor-logo.has-tooltip:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* Portaled to <body> by JS (see main.js), so it can escape the marquee's
   overflow:hidden / mask instead of getting clipped. */
.rk-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    max-width: 340px;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-family: var(--font-secondary);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rk-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.rk-tooltip.is-below {
    transform: translateY(-8px) scale(0.95);
}

.rk-tooltip.is-below.is-visible {
    transform: translateY(0) scale(1);
}

.rk-tooltip-title {
    display: block;
    font-size: var(--text-base);
    line-height: 1.4;
    font-weight: 700;
}

.rk-tooltip-desc {
    display: block;
    margin-top: 2px;
    font-size: var(--text-base);
    line-height: 1.4;
    font-weight: 400;
    color: rgba(255, 255, 255, var(--on-dark-2));
}

.rk-tooltip-arrow {
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: var(--color-secondary);
    transform: translateX(-50%) rotate(45deg);
}

.rk-tooltip.is-below .rk-tooltip-arrow {
    bottom: auto;
    top: -4px;
}

/* ==========================================================================
   Outcomes / Why Attend Section — interactive switcher
   ========================================================================== */
.outcomes-section {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-deep) 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative glow blobs */
.outcomes-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.outcomes-glow-1 {
    top: -180px;
    right: -160px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(208, 24, 71, 0.35) 0%, transparent 70%);
}

.outcomes-glow-2 {
    bottom: -220px;
    left: -180px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(208, 24, 71, 0.18) 0%, transparent 70%);
}

.outcomes-section .container {
    position: relative;
    z-index: 1;
}

.outcomes-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.outcomes-section .section-title {
    color: var(--color-white);
}

/* Rooftop — the "house" sits: roof / 12 blocks / base foundation.
   A custom pentagon ("roof") drawn as an SVG path with rounded corners, so it
   carries the exact same fill and 1px border as .outcome-card-base while a
   clip-path could not. preserveAspectRatio="none" lets it stay wide and
   compact; vector-effect keeps the stroke a crisp 1px at any size. */
.outcomes-roof {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: clamp(96px, 12vw, 150px);
    padding: 0 clamp(20px, 6vw, 64px) clamp(12px, 2vw, 20px);
    margin-bottom: clamp(6px, 1.4vw, var(--space-3));
    text-align: center;
}

/* same backdrop blur as .outcome-card, masked to the pentagon interior so
   it never leaks past the SVG border */
.outcomes-roof::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    backdrop-filter: blur(6px);
    clip-path: polygon(50% 9%, 98% 63%, 98% 96%, 2% 96%, 2% 63%);
}

.outcomes-roof-shape {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible; /* keep the 1px stroke from clipping at the edges */
    /* exact match to .outcome-card / .outcome-card-base */
    fill: rgba(208, 24, 71, 0.10);
    stroke: rgba(208, 24, 71, 0.35);
    stroke-width: 1;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.outcomes-roof:hover .outcomes-roof-shape {
    fill: rgba(208, 24, 71, 0.16);
}

.outcomes-roof-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
}

.outcomes-roof-title {
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(0.95rem, 1.9vw, var(--text-xl));
    line-height: 1.25;
    color: var(--color-white);
}

.outcomes-roof-desc {
    margin: clamp(3px, 0.8vw, 6px) 0 0;
    font-family: var(--font-secondary);
    font-size: clamp(0.78rem, 1.5vw, var(--text-base));
    line-height: 1.45;
    color: rgba(255, 255, 255, var(--on-dark-3));
}

@media (max-width: 600px) {
    .outcomes-roof {
        min-height: 132px;
        padding: 0 14% 10px;
    }
}

/* 12 building blocks in 3 groups of 4, then the full-width base card.
   Tablet / desktop: the groups are invisible — it reads as one uniform 4×3
   grid, exactly as before. Mobile: each group becomes a visible panel with
   its 4 cards at 2-per-row, so text stays legible without losing the grouping. */
.outcomes-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.4vw, var(--space-3));
}

.outcomes-group-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 1.4vw, var(--space-3));
}

@media (max-width: 700px) {
    .outcomes-grid {
        gap: clamp(12px, 3.5vw, 20px);
    }

    .outcomes-group {
        padding: clamp(10px, 3vw, 16px);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, 0.02);
    }

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

.outcome-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 0.8vw, 6px);
    min-width: 0;
    padding: clamp(10px, 2vw, var(--space-4));
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    overflow-wrap: anywhere;
    backdrop-filter: blur(6px);
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Full-width base card — the foundation the 12 blocks rest on */
.outcome-card-base {
    align-items: center;
    text-align: center;
    gap: clamp(4px, 1vw, 8px);
    padding: clamp(14px, 2.4vw, var(--space-6));
    background: rgba(208, 24, 71, 0.10);
    border-color: rgba(208, 24, 71, 0.35);
}

.outcome-card-base .outcome-card-title {
    font-size: clamp(0.95rem, 1.9vw, var(--text-xl));
}

.outcome-card-base .outcome-card-desc {
    font-size: clamp(0.78rem, 1.5vw, var(--text-base));
}

.outcome-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

/* Base card: same hover as the roof — only the red fill brightens, no lift */
.outcome-card-base:hover {
    background: rgba(208, 24, 71, 0.16);
    transform: none;
}

.outcome-card-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(0.82rem, 1.6vw, var(--text-lg));
    line-height: 1.25;
    color: var(--color-white);
    margin: 0;
}

.outcome-card-num {
    color: var(--color-primary);
    font-weight: 800;
    font-size: clamp(0.75rem, 1.4vw, var(--text-base));
}

.outcome-card-desc {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: clamp(0.7rem, 1.35vw, var(--text-sm));
    line-height: 1.45;
    color: rgba(255, 255, 255, var(--on-dark-3));
}

/* Closing statement */
.outcomes-cta {
    position: relative;
    max-width: 760px;
    margin: var(--space-12) auto 0;
    padding-top: var(--space-10);
    text-align: center;
    font-family: var(--font-secondary);
    font-size: var(--text-xl);
    line-height: 1.6;
    color: rgba(255, 255, 255, var(--on-dark-2));
}

.outcomes-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
}

.outcomes-cta-highlight {
    color: var(--color-white);
    font-weight: 800;
    position: relative;
    white-space: nowrap;
}

.outcomes-cta-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 6px;
    background: rgba(208, 24, 71, 0.35);
    z-index: -1;
    border-radius: 2px;
}

/* ==========================================================================
   Audience Section — "Reserve your seat if you're:" — always-expanded list
   (rendered on the front page and the booking page; no open/close interaction)
   ========================================================================== */
.audience-section {
    padding: var(--space-12) 0;
    background-color: var(--color-white);
}

.audience-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-8);
}

.audience-list {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .audience-list {
        max-width: 1160px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }
}

.audience-row {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-2);
    position: relative;
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.audience-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
    transform: scaleY(0);
    transition: transform 0.35s ease;
}

.audience-row.is-open {
    background-color: var(--color-bg-alt);
    padding-left: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.audience-row.is-open::before {
    transform: scaleY(1);
}

.audience-row-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    background-color: var(--color-white);
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--text-xs);
    color: rgba(0, 0, 0, 0.35);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.audience-row.is-open .audience-row-num {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.audience-row-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-top: 2px;
}

.audience-row-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.3;
    color: var(--color-secondary);
    transition: color 0.3s ease;
}

.audience-row.is-open .audience-row-title {
    color: var(--color-primary);
}

.audience-row-desc {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-light);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease 0.05s, margin-top 0.4s ease;
}

.audience-row.is-open .audience-row-desc {
    max-height: 120px;
    opacity: 1;
    margin-top: var(--space-1);
}

.audience-cta {
    margin-top: var(--space-8);
    text-align: center;
}

/* ==========================================================================
   Responsive section rhythm
   Standard content sections use --space-12 top/bottom; Speaker and Outcomes
   are the two "featured" sections at --space-16. Neither tier had a mobile
   reduction before — on a phone that's a lot of dead space top and bottom.
   ========================================================================== */
@media (max-width: 768px) {

    .speaker-section,
    .outcomes-section,
    .about-event-section {
        padding: var(--space-10) 0;
    }

    .video-parallax-section,
    .agenda-section,
    .audience-section,
    .sponsors-section {
        padding: var(--space-8) 0;
    }
}

/* ==========================================================================
   "Book Your Seat" page template (page-templates/template-book.php)
   Compact context band above the moved #audience + #book sections. The
   band also supplies the fixed-header top offset those sections lack.
   ========================================================================== */
.book-page-hero {
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-8);
    background: var(--color-bg-gradient, var(--color-bg));
}

.book-page-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.book-page-hero .section-title {
    margin-top: var(--space-2);
}

.book-page-hero-lede {
    margin: var(--space-3) auto 0;
    color: var(--color-text-light);
    max-width: 620px;
}

/* The audience section normally rides between two other white sections; as
   the first block after the hero band on this page it needs a touch less
   top padding so the rhythm doesn't feel heavy. */
.book-page .audience-section {
    padding-top: var(--space-10);
}

@media (max-width: 768px) {
    .book-page-hero {
        padding-top: calc(var(--header-height) + var(--space-6));
        padding-bottom: var(--space-6);
    }
}

/* ==========================================================================
   Legal / Static Content Pages (Privacy Policy, Terms and Conditions)
   Reuses the same tokens as the rest of the site instead of the ad-hoc
   inline styles + undefined variables these pages used to carry.
   ========================================================================== */
.legal-page {
    padding-top: calc(var(--header-height) + var(--space-16));
    padding-bottom: var(--space-20);
}

.legal-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.legal-content {
    color: var(--color-text-light);
    font-size: var(--text-lg);
    line-height: 1.8;
}

.legal-lead {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-10);
}

.legal-content h2 {
    font-size: var(--text-3xl);
    color: var(--color-secondary);
    margin-top: var(--space-12);
    margin-bottom: var(--space-5);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-size: var(--text-2xl);
    color: var(--color-secondary);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    font-weight: 700;
}

.legal-content p {
    margin: 0 0 var(--space-6);
}

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

.legal-content strong {
    color: var(--color-secondary);
    font-weight: 700;
}

.legal-content a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.3s ease;
}

.legal-content a:hover {
    color: var(--color-primary-dark);
}

.legal-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.legal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.legal-list li {
    position: relative;
    padding-left: var(--space-6);
}

.legal-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.legal-lang-switch {
    margin-top: var(--space-12);
    text-align: center;
}

.legal-lang-switch a {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-bg-alt);
    color: var(--color-secondary);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.legal-lang-switch a:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.legal-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--space-8);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(0, 0, 0, 0.12);
    vertical-align: top;
}

.legal-table th {
    background-color: var(--color-bg-alt);
    color: var(--color-secondary);
    font-weight: 700;
}

.legal-table code {
    font-size: 0.9em;
    word-break: break-word;
}

@media (max-width: 768px) {
    .legal-page {
        padding-top: calc(var(--header-height) + var(--space-10));
        padding-bottom: var(--space-12);
    }
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */

.back-to-top {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 1100;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-secondary);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--color-primary);
    transform: translateY(-2px);
}

.back-to-top svg {
    width: 22px;
    height: 22px;
}

/* ==========================================================================
   Case Study Page (template-case-study.php)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.cs-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--color-secondary);
    color: var(--color-white);
    overflow: hidden;
    padding-top: var(--header-height);
}

.cs-hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, rgba(14, 18, 38, 0.85) 0%, rgba(1, 40, 66, 0.6) 60%, rgba(208, 24, 71, 0.12) 100%),
        url('../images/hero-background.webp');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    z-index: 0;
}

.cs-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-16);
    align-items: center;
    padding-top: var(--space-16);
    padding-bottom: var(--space-20);
}

.cs-eyebrow {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
    padding: 4px 12px;
    background: rgba(208, 24, 71, 0.15);
    border: 1px solid rgba(208, 24, 71, 0.3);
    border-radius: var(--radius-full);
}

.cs-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--color-white);
    margin-bottom: var(--space-6);
    letter-spacing: -1px;
}

.cs-hero-sub {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    max-width: 520px;
    margin-bottom: var(--space-10);
    font-weight: 400;
}

.cs-hero-cta {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-8);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.cs-hero-note {
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

/* --------------------------------------------------------------------------
   PDF Mockup (decorative)
   -------------------------------------------------------------------------- */
.cs-hero-preview {
    flex-shrink: 0;
}

.cs-pdf-mockup {
    position: relative;
    width: 220px;
}

.cs-pdf-cover {
    width: 220px;
    height: 310px;
    background: linear-gradient(160deg, #1a2a40 0%, #012842 40%, #0e1226 100%);
    border-radius: 4px 10px 10px 4px;
    position: relative;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        -4px 0 0 0 rgba(0, 0, 0, 0.3),
        12px 24px 48px rgba(0, 0, 0, 0.5),
        4px 8px 20px rgba(208, 24, 71, 0.15);
    overflow: hidden;
}

/* Spine highlight */
.cs-pdf-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #d01847 0%, #ad132a 100%);
    border-radius: 4px 0 0 4px;
}

/* Red accent bar */
.cs-pdf-cover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #d01847 0%, #ad132a 100%);
}

.cs-pdf-cover-brand {
    font-family: var(--font-primary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: auto;
}

.cs-pdf-cover-label {
    font-family: var(--font-secondary);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.5rem;
}

.cs-pdf-cover-title {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.cs-pdf-cover-shine {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.cs-pdf-shadow {
    position: absolute;
    bottom: -16px;
    left: 8px;
    right: 8px;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, transparent 80%);
    filter: blur(8px);
}

/* --------------------------------------------------------------------------
   Content — What's inside (pillars)
   -------------------------------------------------------------------------- */
.cs-content-section {
    padding: var(--space-24) 0;
    background: var(--color-white);
}

.cs-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-16);
}

.cs-section-intro {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--color-text-light);
    line-height: 1.65;
    margin: 0;
}

.cs-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.cs-pillar {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    border: 1px solid rgba(1, 40, 66, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.cs-pillar:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(208, 24, 71, 0.15);
}

.cs-pillar-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(208, 24, 71, 0.1) 0%, rgba(208, 24, 71, 0.04) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: var(--space-5);
}

.cs-pillar-title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-3);
}

.cs-pillar-text {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: var(--color-text-light);
    line-height: 1.65;
    margin: 0;
}

/* --------------------------------------------------------------------------
   About section
   -------------------------------------------------------------------------- */
.cs-about-section {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, #0e1226 0%, #012842 100%);
    color: var(--color-white);
}

.cs-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.cs-about-text .section-eyebrow {
    color: var(--color-primary);
    opacity: 1;
}

.cs-about-text .section-title {
    color: var(--color-white);
}

.cs-about-text p {
    font-family: var(--font-secondary);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.cs-about-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.cs-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.cs-stat:hover {
    background: rgba(208, 24, 71, 0.08);
    border-color: rgba(208, 24, 71, 0.2);
}

.cs-stat-number {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.cs-stat-label {
    display: block;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Bottom CTA Banner
   -------------------------------------------------------------------------- */
.cs-cta-banner {
    padding: var(--space-20) 0;
    background: var(--color-bg);
    text-align: center;
}

.cs-cta-content {
    max-width: 640px;
    margin: 0 auto;
}

.cs-cta-title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-heading);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.cs-cta-sub {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-8);
    line-height: 1.5;
}

.cs-cta-btn {
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-10);
    gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Responsive — Case Study Page
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .cs-hero-inner {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .cs-hero-preview {
        display: none;
    }

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

    .cs-about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
}

@media (max-width: 640px) {
    .cs-hero {
        min-height: auto;
        padding-top: var(--header-height);
        padding-bottom: var(--space-16);
    }

    .cs-hero-inner {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    .cs-pillars-grid {
        grid-template-columns: 1fr;
    }

    .cs-about-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cs-cta-title {
        font-size: var(--text-2xl);
    }
}

/* ==========================================================================
   Book Your Seat Section
   Dark "featured" tier (see .outcomes-section) — form card floats on top.
   ========================================================================== */
.booking-section {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary-deep) 100%);
    position: relative;
    overflow: hidden;
}

.booking-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.booking-glow-1 {
    top: -160px;
    left: -160px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(208, 24, 71, 0.3) 0%, transparent 70%);
}

.booking-glow-2 {
    bottom: -200px;
    right: -180px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(208, 24, 71, 0.16) 0%, transparent 70%);
}

.booking-container {
    position: relative;
    z-index: 1;
}

.booking-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-12);
}

.booking-section .section-title {
    color: var(--color-white);
}

.booking-subtitle {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, var(--on-dark-2));
}

.booking-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 960px) {
    .booking-grid {
        grid-template-columns: 0.85fr 1.15fr;
        gap: var(--space-12);
    }
}

/* ------------------------------ Info column ------------------------------ */
.booking-pricing {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.booking-price-cards {
    display: flex;
    gap: var(--space-4);
}

.booking-price-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    text-align: center;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
    position: relative;
}

/* "Ended" phase: the card stays visible but its content is dimmed and a
   diagonal rubber stamp is laid across the whole card. */
.booking-price-card.is-ended {
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

/* Fade only the card's own content — the stamp stays fully opaque so it
   reads clearly against the dimmed price behind it. */
.booking-price-card.is-ended> :not(.booking-price-stamp) {
    opacity: 0.3;
    filter: grayscale(40%);
}

.booking-price-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%) rotate(-12deg);
    padding: 6px 18px;
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    color: #bcd4e4;
    border: 3px solid #6f97b0;
    border-radius: 6px;
    background: var(--color-secondary);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
    pointer-events: none;

    /* Grunge / distressed rubber-stamp texture: an SVG fractal-noise mask
       punches a few scattered transparent flecks out of the whole chip
       (bg, border and text together) so the ink looks slightly uneven.
       Kept subtle — most of the chip stays solid. */
    --stamp-grunge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='90'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.95'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20-2.6%202.45'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--stamp-grunge);
    mask-image: var(--stamp-grunge);
    -webkit-mask-size: 160px 90px;
    mask-size: 160px 90px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
}

.booking-price-card.is-active {
    border-color: var(--color-primary);
    background: rgba(208, 24, 71, 0.14);
    transform: translateY(-2px);
}

.booking-price-card.is-featured {
    box-shadow: 0 0 0 1px rgba(208, 24, 71, 0.35), 0 12px 34px -12px rgba(208, 24, 71, 0.5);
    animation: eb-pulse 2.8s ease-in-out infinite;
}

@keyframes eb-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(208, 24, 71, 0.3), 0 10px 26px -12px rgba(208, 24, 71, 0.4);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(208, 24, 71, 0.6), 0 16px 40px -10px rgba(208, 24, 71, 0.65);
    }
}

@media (prefers-reduced-motion: reduce) {
    .booking-price-card.is-featured {
        animation: none;
    }
}

.booking-price-card.is-disabled {
    opacity: 0.45;
    filter: grayscale(45%);
}

.booking-price-badge {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.booking-price-badge--muted {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, var(--on-dark-3));
    margin-bottom: var(--space-3);
}

.booking-price-badge--hot {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(208, 24, 71, 0.2);
    border: 1px solid rgba(208, 24, 71, 0.55);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.booking-price-value {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--text-3xl);
    color: var(--color-white);
    line-height: 1;
}

.booking-price-value .price-currency {
    font-size: var(--text-xl);
    vertical-align: top;
}

.booking-price-card .price-unit {
    display: block;
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, var(--on-dark-3));
    text-transform: none;
    letter-spacing: 0;
    margin-top: var(--space-2);
}

.booking-price-vat {
    display: inline-block;
    margin-left: var(--space-2);
    vertical-align: middle;
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, var(--on-dark-4));
}

.booking-countdown-card {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px dashed rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.14));
    text-align: center;
}

.booking-countdown {
    display: flex;
    gap: var(--space-2);
    width: 100%;
}

.booking-countdown-unit {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.booking-countdown-unit span {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

.booking-countdown-unit small {
    font-family: var(--font-secondary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, var(--on-dark-4));
}

.booking-countdown-note {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, var(--on-dark-2));
}

.booking-benefits {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.booking-benefits li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, var(--on-dark-1));
}

.booking-benefit-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: invert(20%) sepia(64%) saturate(4453%) hue-rotate(330deg) brightness(90%) contrast(92%);
}

.booking-contact-note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, var(--on-dark-1));
}

.booking-contact-note .detail-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    opacity: var(--on-dark-2);
}

.booking-contact-note strong {
    color: var(--color-white);
}

/* ------------------------------ Form card ------------------------------ */
.booking-form-card {
    position: relative;
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding: var(--space-8);
}

.booking-form-card [hidden] {
    display: none !important;
}

.booking-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

@media (min-width: 480px) {
    .booking-form-row--2 {
        grid-template-columns: 1fr 1fr;
    }
}

.booking-form-group {
    margin-bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.booking-form-row .booking-form-group {
    margin-bottom: 0;
}

/* Field sizing/coloring intentionally matches .lead-form-* (the "Download
   Case Study" modal, inc/leads-download/assets/modal.css) so the two forms
   on the page read as the same design, not two different ones. */
.booking-form-label {
    font-family: var(--font-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-secondary);
    letter-spacing: 0.01em;
}

.booking-required {
    color: var(--color-primary);
}

.booking-form-input {
    font-family: var(--font-secondary);
    font-size: 0.9375rem;
    color: #1a1a2e;
    background: #f7f8fc;
    border: 1.5px solid #e1e4ed;
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    outline: none;
}

.booking-form-input:focus {
    border-color: var(--color-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(208, 24, 71, 0.1);
}

.booking-form-input.is-error {
    border-color: var(--color-primary);
    background: #fff8f9;
}

.booking-form-input::placeholder {
    color: #b0b7c3;
}

/* City rows + qty stepper */
.booking-city-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.booking-city-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1.5px solid rgba(1, 40, 66, 0.14);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.booking-city-chip.is-active {
    border-color: var(--color-primary);
    background: rgba(208, 24, 71, 0.06);
}

.booking-city-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.booking-city-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 5px;
    border: 1.5px solid rgba(1, 40, 66, 0.3);
    background-color: var(--color-bg-alt);
    position: relative;
    transition: all 0.2s ease;
}

.booking-city-checkbox:hover {
    border-color: var(--color-primary);
}

.booking-city-checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.booking-city-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.booking-city-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    gap: 2px;
}

.booking-city-name {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-secondary);
}

.booking-city-date {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--color-text-light);
}

.booking-city-chip.is-active .booking-city-name {
    color: var(--color-primary-dark);
}

.booking-city-qty {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
    border-left: 1.5px solid rgba(1, 40, 66, 0.1);
}

.booking-qty-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-secondary);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.booking-qty-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.booking-qty-input {
    width: 34px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-secondary);
    -moz-appearance: textfield;
    appearance: textfield;
}

.booking-qty-input::-webkit-outer-spin-button,
.booking-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Live summary */
.booking-summary {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-2) 0 var(--space-6);
}

.booking-summary-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.booking-summary-line {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.booking-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(1, 40, 66, 0.12);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-secondary);
}

.booking-summary-total strong {
    font-size: var(--text-xl);
    color: var(--color-primary-dark);
}

.booking-summary-total small {
    font-family: var(--font-secondary);
    font-size: var(--text-xs);
    color: var(--color-text-light);
    font-weight: 400;
}

/* Consent + errors — same language as the lead-capture modal form */
.booking-consent-group {
    margin-bottom: var(--space-5);
}

.booking-consent-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.booking-consent-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
    border-radius: 4px;
}

.booking-consent-text {
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
}

.booking-consent-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.booking-consent-text a:hover {
    color: var(--color-primary-dark);
}

.booking-field-error {
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.booking-field-error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
}

.booking-form-error {
    background: #fff0f3;
    border: 1.5px solid rgba(208, 24, 71, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-secondary);
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: var(--space-5);
    line-height: 1.4;
}

.booking-submit-btn {
    width: 100%;
    border: none;
}

.booking-submit-btn.is-loading {
    opacity: 0.8;
    cursor: default;
}

.booking-submit-spinner svg {
    animation: booking-spin 0.8s linear infinite;
}

@keyframes booking-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Success state */
#booking-success-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.booking-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(30, 130, 52, 0.1);
    color: #1e8234;
    margin-bottom: var(--space-4);
}

.booking-success-title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    color: var(--color-secondary);
    margin-bottom: var(--space-2);
}

.booking-success-text {
    font-family: var(--font-secondary);
    color: var(--color-text-light);
    max-width: 380px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .booking-form-card {
        padding: var(--space-6) var(--space-5);
    }

    .booking-price-cards {
        flex-direction: column;
    }
}

/* ==========================================================================
   Page transitions — brand "curtain" overlay
   Driven by assets/js/page-transitions.js. Only opacity animates (GPU-
   composited), so it stays cheap. One fixed element, no per-node work.
   ========================================================================== */
.rk-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    /* above the fixed header (--z-header) and every modal */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    background: var(--k-gradient);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The organizer lockup from the (non-sticky) home header, centred on the
   curtain. JS gives it a small scale-in; this is the resting state. */
.rk-transition-logos {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-6);
    max-width: 90vw;
}

/* Loading spinner under the lockup — the curtain now stays up until the next
   page has fully loaded, so this is a genuine progress cue. Pure CSS rotation
   (one transform), paused via .is-idle once the curtain has lifted. */
.rk-transition-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.9);
    animation: rk-spin 0.7s linear infinite;
    will-change: transform;
}

@keyframes rk-spin {
    to {
        transform: rotate(360deg);
    }
}

.rk-transition-overlay.is-idle .rk-transition-spinner {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .rk-transition-spinner {
        animation: none;
    }
}

.rk-transition-logos .org-logo {
    height: 72px;
    max-width: 42vw;
    object-fit: contain;
}

.rk-transition-logos .org-sep {
    font-size: var(--text-3xl);
}

@media (max-width: 640px) {
    .rk-transition-logos {
        gap: var(--space-4);
        padding: 0 var(--space-4);
        max-width: 94vw;
    }

    .rk-transition-logos .org-logo {
        height: 44px;
        /* Two logos + separator + gaps must clear the narrowest phones —
           the vw cap keeps the lockup inside the viewport when the height
           alone would make it too wide. */
        max-width: 34vw;
        flex-shrink: 1;
        min-width: 0;
    }

    .rk-transition-logos .org-sep {
        font-size: var(--text-xl);
    }
}

/* Initial paint state: the curtain is down. JS lifts it on load; if JS never
   runs, this keyframe still clears it so content is never trapped behind it. */
.rk-transition-overlay.is-covering {
    opacity: 1;
    visibility: visible;
    animation: rk-curtain-safety 0.5s ease 0.6s forwards;
}

@keyframes rk-curtain-safety {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Hide the scrollbar while the curtain covers the screen. Scrolling itself
   stays enabled (the deep-link jump needs it); scrollbar-gutter: stable on
   <html> keeps this from shifting the layout. */
html.rk-curtain-active {
    scrollbar-width: none;
    /* Firefox */
}

html.rk-curtain-active::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

@media (prefers-reduced-motion: reduce) {

    /* No animated reveal — just make sure nothing is ever covered. */
    .rk-transition-overlay,
    .rk-transition-overlay.is-covering {
        animation: none;
        opacity: 0;
        visibility: hidden;
    }
}