/* Harlem Globetrotters consolidated stylesheet
   Page rules are scoped by body class; the shared system layer is authoritative. */

@layer pages, system;

@layer pages {
/* ============================================================
   index.html — scoped page styles
   ============================================================ */
   body {
       margin: 0;
       font-family: var(--font-body);
   }
   
/* ============================================================
           Brand tokens — from Harlem Globetrotters Brand Guidelines v1.0
           ============================================================ */
        body.page-home {
            --white: #ffffff;
            --oat: #e8e9e0;
            --red: #ff0000;
            --blue: #0066cc;
            --black: #000000;
            --gold: #c7a962;

            --font-display: 'Archivo', 'Impact', sans-serif;
            --font-body: 'Inter', system-ui, sans-serif;

            --stripe: 12px;
            --card-radius: 12px;
        }

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

        html { scroll-behavior: smooth; }

        body.page-home {
            margin: 0;
            font-family: var(--font-body);
            color: var(--black);
            background: var(--oat);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        img { max-width: 100%; display: block; }
        button { font-family: inherit; cursor: pointer; }

        /* Utility stripe — red / white / blue, equal widths */
        .stripe { display: flex; flex-direction: column; }
        .stripe > span { display: block; height: var(--stripe); }
        .stripe > span:nth-child(1) { background: var(--red); }
        .stripe > span:nth-child(2) { background: var(--white); }
        .stripe > span:nth-child(3) { background: var(--blue); }

        /* ============================================================
           ACTION SYSTEM  —  per Sean's action-descriptions deck
           ------------------------------------------------------------
           Four tiers, deliberately different weights so a page never
           has two things shouting at once:

             .act--primary    ticketing. Pill, physical face, compresses
             .act--secondary  learn more / read more. Soft fill sweep
             .act--utility    filter / copy / share. Instant, no flourish
             .act--social     small tactile tiles, not decorative logos

           Depth here is a hard offset edge (0 Npx 0), not a blur. It
           reads as a button face with a side, and it collapses on press
           so the compression is real rather than simulated.
           ============================================================ */
        body.page-home {
            --ease-nudge: cubic-bezier(0.2, 0.9, 0.3, 1.3);
            --act-lift: 3px;
            --red-deep: #cc0000;
            --blue-deep: #0052a3;
        }

        .act {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            font-family: var(--font-display);
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            text-decoration: none;
            border: none;
            cursor: pointer;
            position: relative;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* The arrow is a real element so it can move independently. */
        .act__arrow {
            display: inline-block;
            transition: transform 0.25s var(--ease-nudge);
            will-change: transform;
        }

        /* ---- PRIMARY -------------------------------------------------
           "Should feel like a nudge toward the event." The pill is the
           only fully-rounded shape on the site, so ticketing is never
           confused with anything else. */
        .act--primary {
            background: var(--red);
            color: var(--white);
            padding: 1.05rem 2rem;
            font-size: 1.05rem;
            border-radius: 999px;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.28),
                0 var(--act-lift) 0 var(--red-deep);
            transition:
                transform 0.18s var(--ease-nudge),
                box-shadow 0.18s var(--ease-nudge),
                background 0.18s ease,
                color 0.18s ease;
        }

        .act--primary:hover {
            background: #ff1a1a;
            transform: translateY(-1px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.34),
                0 calc(var(--act-lift) + 1px) 0 var(--red-deep);
        }

        .act--primary:hover .act__arrow { transform: translateX(5px); }

        /* Compression: the face drops onto its own edge. */
        .act--primary:active {
            background: var(--red-deep);
            color: rgba(255, 255, 255, 0.82);
            transform: translateY(var(--act-lift));
            box-shadow:
                inset 0 2px 4px rgba(0, 0, 0, 0.28),
                0 0 0 var(--red-deep);
            transition-duration: 0.06s;
        }

        .act--primary:active .act__arrow { transform: translateX(9px); }

        /* Full-width variant for cards and rails */
        .act--block { display: flex; width: 100%; }

        /* ---- SECONDARY -----------------------------------------------
           Blue, soft fill on hover, slight movement. Deliberately quieter
           than primary so the two never compete. */
        .act--secondary {
            background: transparent;
            color: var(--blue);
            padding: 0.85rem 1.5rem;
            font-size: 0.92rem;
            border: 2px solid var(--blue);
            border-radius: 4px;
            overflow: hidden;
            transition:
                color 0.28s ease,
                transform 0.28s var(--ease-nudge);
        }

        /* The fill sweeps rather than snaps — "soft fill". */
        .act--secondary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--blue);
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 0;
        }

        .act--secondary > * { position: relative; z-index: 1; }

        .act--secondary:hover {
            color: var(--white);
            transform: translateY(-2px);
        }

        .act--secondary:hover::before { transform: scaleX(1); }
        .act--secondary:hover .act__arrow { transform: translateX(4px); }

        .act--secondary:active {
            transform: translateY(0);
            background: var(--blue-deep);
            transition-duration: 0.06s;
        }

        /* ---- UTILITY --------------------------------------------------
           Filters, copy, share, accordion toggles. Immediate and
           functional — hover confirms clickability and nothing more. */
        .act--utility {
            background: var(--white);
            color: var(--blue);
            padding: 0.6rem 1.1rem;
            font-size: 0.82rem;
            letter-spacing: 0.1em;
            border: 1.5px solid rgba(0, 102, 204, 0.28);
            border-radius: 4px;
            transition: background 0.08s linear, color 0.08s linear, border-color 0.08s linear;
        }

        .act--utility:hover {
            background: var(--blue);
            border-color: var(--blue);
            color: var(--white);
        }

        .act--utility[aria-pressed='true'],
        .act--utility.is-active {
            background: var(--blue);
            border-color: var(--blue);
            color: var(--white);
        }

        .act--utility:active { background: var(--blue-deep); border-color: var(--blue-deep); }

        /* ---- SOCIAL ---------------------------------------------------
           Small action buttons, not decorative logos. */
        .act--social {
            width: 44px;
            height: 44px;
            padding: 0;
            border-radius: 6px;
            background: var(--white);
            color: var(--blue);
            border: 1.5px solid rgba(0, 102, 204, 0.25);
            box-shadow: 0 2px 0 rgba(0, 102, 204, 0.18);
            transition:
                transform 0.18s var(--ease-nudge),
                background 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease;
        }

        .act--social svg { width: 20px; height: 20px; fill: currentColor; }

        .act--social:hover {
            background: var(--red);
            border-color: var(--red);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: 0 4px 0 var(--red-deep);
        }

        .act--social:active {
            transform: translateY(2px);
            box-shadow: 0 0 0 var(--red-deep);
            transition-duration: 0.06s;
        }

        /* ---- TEXT LINKS -----------------------------------------------
           "Clearly identifiable. Simple underline or colour transition." */
        .act-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-family: var(--font-display);
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.85rem;
            color: var(--red);
            text-decoration: none;
            padding-bottom: 2px;
            background-image: linear-gradient(var(--red), var(--red));
            background-size: 0% 2px;
            background-position: left bottom;
            background-repeat: no-repeat;
            transition: background-size 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
        }

        .act-link:hover { background-size: 100% 2px; }
        .act-link:hover .act__arrow { transform: translateX(4px); }

        /* ---- FOCUS ----------------------------------------------------
           One visible focus treatment for every action tier. */
        .act:focus-visible,
        .act-link:focus-visible,
        .media-card:focus-visible {
            outline: 3px solid var(--gold);
            outline-offset: 3px;
        }

        /* ============================================================
           DEPTH LANGUAGE  —  see depth-lab.html for the full comparison
           Three treatments, three jobs. No drop shadows.
           ============================================================ */

        /* Pebble grain: the global surface. Stops "flat" without being
           seen. Basketball dimple at a scale you feel, not read. */
        .grain::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image:
                radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.22) 0.9px, transparent 1px),
                radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.14) 0.9px, transparent 1px);
            background-size: 4px 4px, 4px 4px;
            background-position: 0 0, 2px 2px;
        }

        /* Halftone: reserved for large brand fills only. */
        .halftone::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.34) 1.2px, transparent 1.4px);
            background-size: 7px 7px;
            -webkit-mask-image: linear-gradient(200deg, transparent 30%, #000 100%);
            mask-image: linear-gradient(200deg, transparent 30%, #000 100%);
        }

        /* ============================================================
           IMAGE + CARD BEHAVIOUR  —  deck slides 3 and 4
           Image scales inside its frame, card lifts, CTA activates.
           The whole card is the target, not just the text link.
           ============================================================ */
        .media-frame {
            position: relative;
            overflow: hidden;
            background: var(--blue);
            border-radius: var(--card-radius);
        }

        .media-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
            will-change: transform;
        }

        .media-card {
            position: relative;
            display: block;
            text-decoration: none;
            color: inherit;
            background: var(--white);
            transition: transform 0.28s var(--ease-nudge), box-shadow 0.28s ease;
            border-radius: var(--card-radius);
            overflow: hidden;
        }

        /* Depth on lift is a hard brand-blue edge, not a grey blur. */
        .media-card:hover,
        .media-card:focus-visible {
            transform: translateY(-6px);
            box-shadow: 0 6px 0 rgba(0, 102, 204, 0.22);
        }

        .media-card:hover .media-frame img,
        .media-card:focus-visible .media-frame img { transform: scale(1.07); }

        .media-card:hover .act-link,
        .media-card:focus-visible .act-link { background-size: 100% 2px; }

        .media-card:hover .act__arrow,
        .media-card:focus-visible .act__arrow { transform: translateX(4px); }

        .media-card:hover .media-card__title,
        .media-card:focus-visible .media-card__title { color: var(--red); }

        @media (prefers-reduced-motion: reduce) {
            .act, .act__arrow, .act--secondary::before,
            .media-card, .media-frame img, .act-link {
                transition-duration: 0.01ms !important;
            }
            .media-card:hover { transform: none; }
            .media-card:hover .media-frame img { transform: none; }
        }

        /* ============================================================
           Header
           ============================================================ */
        .site-header {
            background: var(--oat);
            padding: 1.25rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .site-header__logo img {
            height: 56px;
            width: auto;
        }

        .site-nav {
            display: flex;
            gap: 2.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--blue);
        }

        .site-nav a {
            text-decoration: none;
            color: inherit;
            transition: color 0.15s ease;
        }

        .site-nav a:hover { color: var(--red); }

        /* Header ticketing button uses the primary action tier at a
           smaller scale — same pill, same compression, less real estate. */
        .buy-tickets-header { padding: 0.7rem 1.4rem; font-size: 0.9rem; }

        /* ============================================================
           Hero — slider on left, nearest-show right rail
           ============================================================ */
        /* ------------------------------------------------------------
           HERO STAGE — the plane the hero and ticket sit on.
           Sean asked for texture behind the hero + geo tool. Three
           layers here, all swappable from the CMS:
             1. --hero-texture   an uploaded image (empty by default)
             2. arena light      radial pool from above, depth by
                                 lighting rather than shadow
             3. pebble grain     via .grain
           ------------------------------------------------------------ */
        .hero-stage {
            position: relative;
            
            z-index: 2;
            
            --hero-texture: none;
            background-image:
                var(--hero-texture),
                radial-gradient(ellipse 60% 50% at 50% -15%, rgba(255, 255, 255, 0.9) 0%, rgba(232, 233, 224, 0) 72%),
                radial-gradient(ellipse 100% 60% at 50% 118%, rgba(0, 0, 0, 0.14) 0%, rgba(232, 233, 224, 0) 68%);
            background-size: cover, auto, auto;
            background-position: center, center, center;
        }

        .hero-stage::after { z-index: 0; }

        .hero {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr 430px;
            gap: 2.5rem;
            padding: 2.5rem 2.5rem 0;
            max-width: 1600px;
            margin: 0 auto;
            /* Bottom-aligned so the ticket's overhang lands below the
               hero photo rather than floating in the middle of it. */
            align-items: center;
        }

        /* Hero media is a variant slot. Slider and video occupy the
           same frame; only one is mounted at a time. */
        .hero__media { position: relative; }

        .hero__media[data-hero-mode='slider'] .hero__video { display: none; }
        .hero__media[data-hero-mode='video'] .hero__slider { display: none; }

        .hero__slider,
        .hero__video {
            position: relative;
            aspect-ratio: 16 / 10;
            background: var(--blue);
            overflow: hidden;
        }

        .hero__video video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero__video::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.1) 0%,
                rgba(0, 0, 0, 0.15) 40%,
                rgba(0, 0, 0, 0.75) 100%
            );
        }

        .hero__video .hero__slide-content {
            position: absolute;
            left: 3rem;
            right: 3rem;
            bottom: 3rem;
            z-index: 2;
            color: var(--white);
            max-width: 90%;
        }

        /* Prototype-only. Stands in for the Umbraco "Hero media" picker. */
        .hero__mode-switch {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.9rem;
        }

        .hero__mode-label {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.68rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            opacity: 0.45;
            margin-right: 0.25rem;
        }

        .hero__slide {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: flex-end;
            padding: 3rem;
            opacity: 0;
            transition: opacity 0.6s ease;
            color: var(--white);
            background-size: cover;
            background-position: center;
        }

        .hero__slide.is-active { opacity: 1; }

        /* Halftone over the scrim. Ramps up toward the bottom where the
           copy sits — it earns its place twice, as print texture and as
           extra legibility behind the headline. */
        .hero__slider::after,
        .hero__video::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 1.2px, transparent 1.45px);
            background-size: 7px 7px;
            -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 45%, #000 100%);
        }

        .hero__slide-content { z-index: 2; }

        /* Legibility scrim so headlines read against varied photography */
        .hero__slide::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.1) 0%,
                rgba(0, 0, 0, 0.15) 40%,
                rgba(0, 0, 0, 0.75) 100%
            );
        }

        .hero__slide-content {
            position: relative;
            z-index: 2;
            max-width: 90%;
        }

        .hero__eyebrow {
            display: inline-block;
            font-family: var(--font-display);
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-size: 0.85rem;
            margin: 0 0 1rem;
            padding: 0.35rem 0.75rem;
            background: var(--red);
            color: var(--white);
        }

        .hero__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(2.5rem, 4.5vw, 4.5rem);
            line-height: 0.9;
            letter-spacing: 0;
            margin: 0 0 1rem;
            text-transform: uppercase;
        }

        .hero__lede {
            font-size: 1.1rem;
            max-width: 480px;
            margin: 0;
            line-height: 1.4;
        }

        /* Slider controls — dots at bottom center */
        .hero__dots {
            position: absolute;
            bottom: 1.25rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.5rem;
            z-index: 3;
        }

        .hero__dot {
            width: 32px;
            height: 4px;
            background: rgba(255, 255, 255, 0.4);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .hero__dot.is-active { background: var(--white); }
        .hero__dot:hover { background: rgba(255, 255, 255, 0.8); }

        /* Slider arrows */
        .hero__arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.35);
            color: var(--white);
            border: none;
            width: 44px;
            height: 44px;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            z-index: 3;
            transition: background 0.2s ease;
        }

        .hero__arrow:hover { background: var(--red); }
        .hero__arrow--prev { left: 1rem; }
        .hero__arrow--next { right: 1rem; }

        /* ============================================================
           THE TICKET  —  geo-targeting tool as physical ticket stock

           Sean: "would LOVE to have the box emulate an actual ticket
           and make that tool feel a bit layered above the Hero area."

           What makes it read as a ticket rather than a card:
             - die-cut notches punched through both edges (real mask,
               so the hero texture shows through the holes)
             - a perforation line of actual dots between body and stub
             - a fixed-height stub carrying the action, like a real one
             - ADMIT ONE set vertically up the edge
             - a barcode block, because every ticket has one
             - a half-degree rotation so it sits ON the page, not IN it

           Depth is layering, not shadow: the ticket starts above the
           hero photo and hangs past the bottom of the hero section
           into the band below, so it clearly occupies its own plane.
           ============================================================ */
        .ticket {
            --perf: 196px;      /* stub height — notch + dotted line sit here */
            --notch: 15px;

            position: relative;
            z-index: 6;
            background: var(--white);
            color: var(--black);
            display: flex;
            flex-direction: column;
            min-height: 400px;
            /* Two overlaps, two planes. The negative left margin pulls
               the ticket over the hero photo; the negative bottom margin
               drops it past the hero into the band below. Occlusion on
               two edges is what sells "layered above" — a shadow would
               only imply it. */
            margin-left: -4rem;
            margin-bottom: -4rem;
            transform: rotate(-0.5deg);
            transform-origin: 60% 50%;

            /* Die-cut. Two circles subtracted from opposite edges. */
            -webkit-mask-image:
                radial-gradient(circle var(--notch) at left bottom var(--perf), transparent calc(var(--notch) - 1px), #000 var(--notch)),
                radial-gradient(circle var(--notch) at right bottom var(--perf), transparent calc(var(--notch) - 1px), #000 var(--notch));
            -webkit-mask-composite: source-in;
            mask-image:
                radial-gradient(circle var(--notch) at left bottom var(--perf), transparent calc(var(--notch) - 1px), #000 var(--notch)),
                radial-gradient(circle var(--notch) at right bottom var(--perf), transparent calc(var(--notch) - 1px), #000 var(--notch));
            mask-composite: intersect;
        }

        /* Brand stripe as the printed header band of the ticket */
        .ticket__head {
            height: 9px;
            flex: none;
            background: linear-gradient(
                to right,
                var(--red) 0%, var(--red) 33.33%,
                var(--white) 33.33%, var(--white) 66.66%,
                var(--blue) 66.66%, var(--blue) 100%
            );
        }

        /* ADMIT ONE up the left edge, ticket-stock microtype */
        .ticket__edge {
            position: absolute;
            left: 0;
            top: 9px;
            bottom: var(--perf);
            width: 26px;
            border-right: 1px solid rgba(0, 0, 0, 0.07);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .ticket__edge span {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.6rem;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            color: var(--black);
            opacity: 0.32;
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            white-space: nowrap;
        }

        .ticket__body {
            flex: 1;
            padding: 1.75rem 1.75rem 1.5rem 2.5rem;
        }

        /* Perforation — dots, not a dashed border. Dashes read as a
           form field; dots read as a tear line. */
        .ticket__perf {
            flex: none;
            height: 1px;
            margin: 0 var(--notch);
            background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.35) 1.1px, transparent 1.3px);
            background-size: 8px 1px;
            background-repeat: repeat-x;
        }

        .ticket__stub {
            flex: none;
            height: var(--perf);
            padding: 1.15rem 1.75rem 1.15rem 2.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 0.6rem;
            background:
                radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 0.9px, transparent 1px) 0 0 / 4px 4px,
                var(--white);
        }

        .ticket__barcode {
            position: absolute;
            right: 1.5rem;
            bottom: calc(var(--perf) + 0.7rem);
            width: 62px;
            height: 20px;
            opacity: 0.5;
            background-image: repeating-linear-gradient(
                to right,
                var(--black) 0 1px, transparent 1px 3px,
                var(--black) 3px 5px, transparent 5px 6px,
                var(--black) 6px 7px, transparent 7px 10px
            );
            pointer-events: none;
        }

        /* ---- ticket content ---------------------------------------- */
        .ticket__eyebrow {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.72rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--red);
            margin: 0 0 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }

        .ticket__city {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 2.6rem;
            line-height: 0.88;
            color: var(--blue);
            margin: 0 0 0.35rem;
            text-transform: uppercase;
        }

        .ticket__venue {
            font-weight: 600;
            font-size: 0.92rem;
            margin: 0 0 1.35rem;
            opacity: 0.85;
        }

        .ticket__when {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            padding: 1.1rem 0 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .ticket__when-label {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.65rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            opacity: 0.5;
            margin: 0 0 0.2rem;
        }

        .ticket__when-value {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.35rem;
            color: var(--blue);
            text-transform: uppercase;
            margin: 0;
        }

        .ticket__availability {
            display: none;
            font-size: 0.8rem;
            color: #167a3a;
            font-weight: 600;
            margin: 0;
            text-align: center;
        }

        .ticket__availability.is-visible { display: block; }

        .ticket__change {
            background: none;
            border: none;
            font-family: inherit;
            font-size: 0.8rem;
            opacity: 0.7;
            padding: 0;
            text-align: center;
            width: 100%;
        }

        .ticket__change strong {
            color: var(--red);
            text-decoration: underline;
            font-weight: 700;
        }

        .ticket__form-label {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.8rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--blue);
            margin: 0 0 0.75rem;
            display: block;
        }

        .ticket__zip-row { display: flex; gap: 0.5rem; }

        .ticket__zip-input {
            flex: 1;
            padding: 0.85rem 1rem;
            border: 2px solid var(--oat);
            border-radius: 4px;
            font-size: 1rem;
            font-family: inherit;
            background: var(--white);
        }

        .ticket__zip-input:focus { border-color: var(--blue); outline: none; }

        .ticket__error {
            color: var(--red);
            font-size: 0.82rem;
            margin: 0.7rem 0 0;
            display: none;
            font-weight: 500;
        }

        .ticket__error.is-visible { display: block; }

        .ticket__note {
            margin: 0;
            font-size: 0.9rem;
            opacity: 0.7;
        }

        /* ---- state machine ----------------------------------------- */
        .ticket[data-state='loading'] .panel-loading,
        .ticket[data-state='found']   .panel-found,
        .ticket[data-state='default'] .panel-default,
        .ticket[data-state='notfound'] .panel-notfound { display: block; }

        .ticket[data-state='loading'] .stub-loading,
        .ticket[data-state='found']   .stub-found,
        .ticket[data-state='default'] .stub-default,
        .ticket[data-state='notfound'] .stub-notfound { display: flex; }

        .ticket .panel-loading, .ticket .panel-found,
        .ticket .panel-default, .ticket .panel-notfound,
        .ticket .stub-loading, .ticket .stub-found,
        .ticket .stub-default, .ticket .stub-notfound { display: none; }

        /* Barcode only makes sense once we have a real show */
        .ticket[data-state='found'] .ticket__barcode { display: block; }
        .ticket__barcode { display: none; }

        .ticket__stub-inner {
            flex-direction: column;
            justify-content: center;
            gap: 0.55rem;
            width: 100%;
        }

        .ticket__spinner {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 3px solid var(--oat);
            border-top-color: var(--red);
            animation: spin 0.8s linear infinite;
            margin: 1.75rem auto 1.25rem;
        }

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

        .panel-loading p {
            text-align: center;
            opacity: 0.6;
            margin: 0;
            font-size: 0.9rem;
        }

        /* ============================================================
           SLIDER MODULES  —  confirming the difference Sean asked about

           They are deliberately NOT the same component:

             IN THE NEWS       horizontal card. Image left, meta +
                               headline + link right. Three across.
                               Scannable. Press coverage is a list you
                               skim, so the image is supporting evidence.

             IN THE SPOTLIGHT  vertical card. Large image on top,
                               caption + link beneath. Three across but
                               much taller images. The image IS the
                               story here, so it gets the room.

           One carousel engine drives both — same arrows, dots, keyboard
           and swipe behaviour — so they feel like one system with two
           card shapes rather than two different widgets.
           ============================================================ */
        .rail {
            padding: 4.5rem 2.5rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        .rail--news { background: var(--white); }
        .rail--spotlight { position: relative; }

        .rail__head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .rail__heading { max-width: 46ch; }

        .rail__title {
            font-family: var(--font-display);
            font-weight: 900;
            text-transform: uppercase;
            font-size: clamp(2rem, 3.6vw, 3.1rem);
            line-height: 0.9;
            color: var(--blue);
            margin: 0;
        }

        .rail__sub {
            margin: 0.6rem 0 0;
            font-size: 0.98rem;
            opacity: 0.75;
            max-width: 56ch;
        }

        .rail__controls { display: flex; gap: 0.5rem; flex: none; }

        .rail__arrow {
            width: 44px;
            height: 44px;
            padding: 0;
            border-radius: 4px;
            font-size: 1.4rem;
            line-height: 1;
        }

        .rail__arrow[disabled] { opacity: 0.3; cursor: default; }
        .rail__arrow[disabled]:hover { background: var(--white); color: var(--blue); border-color: rgba(0,102,204,0.28); }

        /* Track: scroll-snap so touch swipe works with no JS at all,
           and the arrows just drive scrollLeft. */
        .rail__track {
            display: grid;
            grid-auto-flow: column;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scrollbar-width: none;
            padding-bottom: 0.5rem;
        }

        .rail__track::-webkit-scrollbar { display: none; }
        .rail__track > * { scroll-snap-align: start; }

        .rail__dots {
            display: flex;
            gap: 0.4rem;
            justify-content: center;
            margin-top: 1.75rem;
        }

        .rail__dot {
            width: 28px;
            height: 4px;
            border: none;
            padding: 0;
            background: rgba(0, 0, 0, 0.18);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .rail__dot.is-active { background: var(--red); }

        /* ---- NEWS CARD: image left, content right ------------------- */
        /* Three across at desktop, matching the reference. The fourth
           card sits just off the right edge, which is the cue that the
           rail scrolls. */
        .rail--news .rail__track { grid-auto-columns: calc((100% - 3rem) / 3); }

        .news-card {
            display: grid;
            grid-template-columns: 128px 1fr;
            align-items: stretch;
            border: 1px solid rgba(0, 0, 0, 0.09);
        }

        .news-card .media-frame { aspect-ratio: auto; }

        .news-card__content {
            padding: 1.35rem 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .news-card__meta {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.66rem;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            opacity: 0.55;
            flex-wrap: wrap;
            row-gap: 0.15rem;
        }

        .news-card__outlet { color: var(--blue); opacity: 1; font-weight: 900; }

        .news-card__meta i {
            width: 3px;
            height: 3px;
            background: currentColor;
            border-radius: 50%;
            flex: none;
        }

        .news-card__title {
            font-family: var(--font-display);
            font-weight: 900;
            text-transform: uppercase;
            font-size: 1.15rem;
            line-height: 1.02;
            margin: 0;
            color: var(--black);
            transition: color 0.2s ease;
        }

        .news-card .act-link { margin-top: auto; }

        /* ---- SPOTLIGHT CARD: large image above, caption below -------- */
        .rail--spotlight .rail__track { grid-auto-columns: calc((100% - 3rem) / 3); }

        .spot-card { border: none; }

        .spot-card .media-frame { aspect-ratio: 4 / 5; }

        .spot-card__content {
            padding: 1.35rem 1.5rem 1.6rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
            align-items: center;
        }

        .spot-card__kicker {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.66rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--gold);
            margin: 0;
        }

        .spot-card__title {
            font-family: var(--font-display);
            font-weight: 900;
            text-transform: uppercase;
            font-size: 1.5rem;
            line-height: 0.95;
            margin: 0;
            color: var(--blue);
            transition: color 0.2s ease;
        }

        .spot-card__desc {
            margin: 0 0 0.35rem;
            font-size: 0.9rem;
            opacity: 0.75;
            max-width: 34ch;
        }

        /* Court paint behind the spotlight rail — this section has the
           least surrounding photography, so the background plane needs
           to carry something. */
        .rail--spotlight .court-paint {
            position: absolute;
            inset: 0;
            z-index: 0;
            color: var(--blue);
            opacity: 0.09;
            pointer-events: none;
        }

        .rail--spotlight > *:not(.court-paint) { position: relative; z-index: 1; }

        @media (max-width: 1100px) {
            .rail--news .rail__track { grid-auto-columns: minmax(340px, 90%); }
            .rail--spotlight .rail__track { grid-auto-columns: minmax(260px, 70%); }
        }

        @media (max-width: 700px) {
            .rail { padding: 3rem 1.25rem; }
            .rail__head { flex-direction: column; align-items: flex-start; }
            .news-card { grid-template-columns: 110px 1fr; }
            .news-card__content { padding: 1rem 1.1rem; }
            .rail--news .rail__track { grid-auto-columns: minmax(280px, 88%); }
            .rail--spotlight .rail__track { grid-auto-columns: minmax(230px, 78%); }
        }

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

        /* ============================================================
           Objectives — three-up band under the hero
           ============================================================ */
        .objectives {
            background: var(--white);
            padding: 5rem 2.5rem 5.5rem;
            position: relative;
        }

        .objectives__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        .objectives { padding-top: 6.5rem; }

        .objectives__eyebrow {
            font-family: var(--font-display);
            font-weight: 900;
            color: var(--red);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-size: 0.9rem;
            text-align: center;
            margin: 0 0 1rem;
        }

        .objectives__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(2rem, 4vw, 3.5rem);
            color: var(--blue);
            text-align: center;
            margin: 0 0 3rem;
            letter-spacing: -0.005em;
            line-height: 0.95;
            text-transform: uppercase;
        }

        .objectives__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        /* These three are not a sequence, so they don't get 01/02/03.
           The brand stripe marks them instead — same job, brand's own
           vocabulary, and it reads as printed edge rather than a
           decorative counter. */
        .objective {
            text-align: center;
            background: var(--oat);
            padding: 2.5rem 1.75rem 2.25rem;
            position: relative;
            border-radius: var(--card-radius);
            overflow: hidden;
        }

        .objective::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(
                to right,
                var(--red) 0%, var(--red) 33.33%,
                var(--white) 33.33%, var(--white) 66.66%,
                var(--blue) 66.66%, var(--blue) 100%
            );
        }

        .objective__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: var(--blue);
            margin: 0 0 0.75rem;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }

        .objective__desc {
            color: var(--black);
            font-size: 0.95rem;
            line-height: 1.55;
            max-width: 320px;
            margin: 0 auto;
        }

        /* ============================================================
           Emotion / video block / generalize pages
           ============================================================ */
        .emotion {
            padding: 6rem 2.5rem;
            background: var(--oat);
            text-align: center;
        }

        .emotion__eyebrow {
            font-family: var(--font-display);
            font-weight: 900;
            color: var(--red);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-size: 0.9rem;
            margin: 0 0 1rem;
        }

        .emotion__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            color: var(--blue);
            margin: 0 0 1rem;
            letter-spacing: -0.005em;
            line-height: 0.9;
            text-transform: uppercase;
        }

        .emotion__lede {
            font-size: 1.15rem;
            color: var(--black);
            max-width: 640px;
            margin: 0 auto 3rem;
            line-height: 1.55;
        }

        .video-block {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: var(--black);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        }

        .video-block__poster {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease, filter 0.3s ease;
        }

        .video-block:hover .video-block__poster {
            transform: scale(1.02);
            filter: brightness(0.85);
        }

        .video-block__play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: var(--red);
            border: 4px solid var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        /* "Clearly communicate play me." On hover the button gains a
           ring and the triangle nudges forward. No playback on hover. */
        .video-block__play::before {
            content: '';
            position: absolute;
            inset: -14px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.45);
            opacity: 0;
            transform: scale(0.86);
            transition: opacity 0.28s ease, transform 0.28s var(--ease-nudge);
        }

        .video-block__play:hover {
            transform: translate(-50%, -50%) scale(1.06);
            background: var(--blue);
        }

        .video-block__play:hover::before { opacity: 1; transform: scale(1); }
        .video-block__play:hover::after { transform: translateX(3px); }

        .video-block__play::after { transition: transform 0.28s var(--ease-nudge); }

        .video-block__play:active {
            transform: translate(-50%, -50%) scale(0.97);
            transition-duration: 0.06s;
        }

        .video-block__play::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 26px solid var(--white);
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            margin-left: 6px;
        }

        .video-block__caption {
            position: absolute;
            bottom: 2rem;
            left: 2rem;
            right: 2rem;
            color: var(--white);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.25rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-align: left;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        }

        /* When "playing" — swap poster for iframe */
        .video-block.is-playing .video-block__poster,
        .video-block.is-playing .video-block__play,
        .video-block.is-playing .video-block__caption {
            display: none;
        }

        .video-block__iframe {
            display: none;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .video-block.is-playing .video-block__iframe { display: block; }

        /* ============================================================
           Footer
           ============================================================ */
        .site-footer {
            background: var(--black);
            color: rgba(255, 255, 255, 0.7);
            padding: 3rem 2.5rem 2rem;
            text-align: center;
            font-size: 0.85rem;
        }

        .site-footer__logo {
            margin: 0 auto 1.5rem;
            max-width: 200px;
        }

        .site-footer p { margin: 0.5rem 0; }

        .social-row {
            list-style: none;
            display: flex;
            gap: 0.6rem;
            justify-content: center;
            padding: 0;
            margin: 0 0 1.75rem;
        }

        /* ============================================================
           Responsive
           ============================================================ */
        @media (max-width: 1024px) {
            .hero {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .hero__slider,
            .hero__video { aspect-ratio: 16 / 9; }

            /* Stacked: the ticket no longer overhangs sideways, so it
               centres and keeps a modest overhang downward instead. */
            .ticket {
                max-width: 430px;
                width: 100%;
                min-height: 0;
                margin: 0 auto -2.5rem;
                transform: rotate(-0.4deg);
            }

            .objectives__grid {
                grid-template-columns: 1fr;
                gap: 2rem;
                max-width: 500px;
                margin: 0 auto;
            }
        }

        @media (max-width: 640px) {
            .site-header { padding: 1rem 1.25rem; }
            .site-nav { display: none; }
            .site-header__logo img { height: 40px; }

            .hero { padding: 1rem 1.25rem 0; }
            .hero__slider,
            .hero__video { aspect-ratio: 4 / 5; }
            .hero__slide { padding: 1.75rem 1.5rem; }
            /* Arrows collided with the eyebrow at this width, and swipe
               plus dots already covers navigation on touch. */
            .hero__arrow { display: none; }
            .hero__video .hero__slide-content { left: 1.5rem; right: 1.5rem; bottom: 2rem; }
            .ticket { --perf: 186px; transform: none; }
            .ticket__body { padding: 1.35rem 1.35rem 1.25rem 2.2rem; }
            .ticket__stub { padding: 1rem 1.35rem 1rem 2.2rem; }
            .ticket__city { font-size: 2.1rem; }
            .hero__mode-switch { flex-wrap: wrap; }
            .hero__title { font-size: 2rem; }
            .hero__lede { font-size: 0.95rem; }

            .objectives, .emotion { padding: 3.5rem 1.25rem; }

            .video-block__play {
                width: 70px;
                height: 70px;
            }
            .video-block__play::after {
                border-left-width: 18px;
                border-top-width: 11px;
                border-bottom-width: 11px;
                margin-left: 4px;
            }
        }

/* ============================================================
   about-show(1).html — scoped page styles
   ============================================================ */
body.page-about-show{
    --white:#FFFFFF;
    --oat:#E8E9E0;
    --red:#FF0000;
    --blue:#0066CC;
    --black:#000000;
    --gold:#C7A962;
    --oat-shade:#dbdcd2;
  }
  :where(body.page-about-show) *,:where(body.page-about-show) *::before,:where(body.page-about-show) *::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body.page-about-show{
    margin:0;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--black);
    background:var(--oat);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  :where(body.page-about-show) img{max-width:100%;display:block}
  :where(body.page-about-show) a{color:var(--blue);text-decoration:none}
  :where(body.page-about-show) a:hover{text-decoration:underline}
  :where(body.page-about-show) h1,:where(body.page-about-show) h2,:where(body.page-about-show) h3,:where(body.page-about-show) h4{
    font-family:"Archivo",sans-serif;
    font-weight:900;
    font-stretch:75%;
    text-transform:uppercase;
    letter-spacing:-0.01em;
    line-height:0.95;
    margin:0;
    color:var(--blue);
  }
  :where(body.page-about-show) h1{font-size:clamp(2.75rem,7vw,5.5rem)}
  :where(body.page-about-show) h2{font-size:clamp(2.25rem,5vw,4rem)}
  :where(body.page-about-show) h3{font-size:clamp(1.5rem,2.5vw,2.25rem)}
  :where(body.page-about-show) h4{font-size:1.15rem;color:var(--black)}
  :where(body.page-about-show) p{margin:0 0 1em}

  /* Stripe */
  :where(body.page-about-show) .stripe{display:flex;flex-direction:column}
  :where(body.page-about-show) .stripe > span{display:block;height:12px}
  :where(body.page-about-show) .stripe > span:nth-child(1){background:var(--red)}
  :where(body.page-about-show) .stripe > span:nth-child(2){background:var(--white)}
  :where(body.page-about-show) .stripe > span:nth-child(3){background:var(--blue)}

  /* Header */
  :where(body.page-about-show) .header{
    background:var(--white);
    border-bottom:1px solid var(--oat-shade);
    position:sticky;top:0;z-index:50;
  }
  :where(body.page-about-show) .header-inner{
    max-width:1400px;margin:0 auto;
    padding:14px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  :where(body.page-about-show) .brand{display:flex;align-items:center;gap:12px}
  :where(body.page-about-show) .brand img{height:44px;width:auto}
  :where(body.page-about-show) .nav{display:flex;align-items:center;gap:28px}
  :where(body.page-about-show) .nav a{
    color:var(--black);
    font-weight:600;font-size:0.95rem;
    text-transform:uppercase;letter-spacing:0.03em;
  }
  :where(body.page-about-show) .nav a:hover{color:var(--blue);text-decoration:none}
  :where(body.page-about-show) .nav .cta{
    background:var(--red);color:var(--white);
    padding:10px 20px;border-radius:2px;
    letter-spacing:0.05em;
  }
  :where(body.page-about-show) .nav .cta:hover{background:#d90000;color:var(--white)}
  :where(body.page-about-show) .nav-toggle{
    display:none;background:none;border:0;cursor:pointer;
    padding:8px;color:var(--black);
  }
  :where(body.page-about-show) .nav-toggle svg{width:28px;height:28px}

  /* Layout */
  :where(body.page-about-show) .wrap{max-width:1400px;margin:0 auto;padding:0 28px}
  :where(body.page-about-show) section{padding:80px 0}

  /* Hero */
  :where(body.page-about-show) .hero{
    background:var(--oat);
    padding:90px 0 100px;
    position:relative;
  }
  :where(body.page-about-show) .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:60px;align-items:center;
  }
  :where(body.page-about-show) .hero-eyebrow{
    text-transform:uppercase;letter-spacing:0.18em;
    font-size:0.85rem;font-weight:700;
    color:var(--red);margin-bottom:24px;
  }
  :where(body.page-about-show) .hero h1{margin-bottom:28px}
  :where(body.page-about-show) .hero-lede{
    font-size:clamp(1.1rem,1.5vw,1.35rem);
    max-width:52ch;margin-bottom:32px;
  }
  :where(body.page-about-show) .hero-stripe-inline{
    display:flex;height:8px;width:120px;margin:32px 0;
  }
  :where(body.page-about-show) .hero-stripe-inline > span{flex:1;display:block}
  :where(body.page-about-show) .hero-stripe-inline > span:nth-child(1){background:var(--red)}
  :where(body.page-about-show) .hero-stripe-inline > span:nth-child(2){background:var(--white)}
  :where(body.page-about-show) .hero-stripe-inline > span:nth-child(3){background:var(--blue)}
  :where(body.page-about-show) .hero-image{
    aspect-ratio:4/5;
    border-radius:4px;overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.15);
  }
  :where(body.page-about-show) .hero-image img{width:100%;height:100%;object-fit:cover}

  /* Buttons */
  :where(body.page-about-show) .btn{
    display:inline-block;
    padding:16px 32px;
    font-family:"Inter",sans-serif;font-weight:700;
    text-transform:uppercase;letter-spacing:0.08em;
    font-size:0.95rem;
    border:0;border-radius:2px;cursor:pointer;
    transition:transform 0.15s ease, background 0.15s ease;
  }
  :where(body.page-about-show) .btn:hover{text-decoration:none;transform:translateY(-2px)}
  :where(body.page-about-show) .btn-primary{background:var(--red);color:var(--white)}
  :where(body.page-about-show) .btn-primary:hover{background:#d90000;color:var(--white)}
  :where(body.page-about-show) .btn-secondary{
    background:transparent;color:var(--blue);
    border:2px solid var(--blue);padding:14px 30px;
  }
  :where(body.page-about-show) .btn-secondary:hover{background:var(--blue);color:var(--white)}

  /* Highlights — 2x2 grid */
  :where(body.page-about-show) .highlights{background:var(--white)}
  :where(body.page-about-show) .highlights h2{text-align:center;margin-bottom:16px}
  :where(body.page-about-show) .section-lede{
    max-width:60ch;margin:0 auto 56px;
    text-align:center;font-size:1.1rem;
  }
  :where(body.page-about-show) .highlight-grid{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:32px;
  }
  :where(body.page-about-show) .highlight-card{
    background:var(--oat);
    padding:40px 36px;
    border-radius:4px;
    display:flex;flex-direction:column;
    position:relative;
  }
  :where(body.page-about-show) .highlight-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(to right,
      var(--red) 0 33.33%,
      var(--white) 33.33% 66.66%,
      var(--blue) 66.66% 100%);
    border-radius:4px 4px 0 0;
  }
  :where(body.page-about-show) .highlight-icon{
    width:56px;height:56px;
    background:var(--blue);color:var(--white);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:24px;
  }
  :where(body.page-about-show) .highlight-icon svg{width:28px;height:28px;fill:currentColor}
  :where(body.page-about-show) .highlight-card h3{color:var(--blue);margin-bottom:12px;font-size:1.6rem}

  /* Family band — stacked stat callouts */
  :where(body.page-about-show) .family{
    background:var(--blue);color:var(--white);
    padding:100px 0;
  }
  :where(body.page-about-show) .family h2{color:var(--white);text-align:center;margin-bottom:16px}
  :where(body.page-about-show) .family .section-lede{color:rgba(255,255,255,0.85)}
  :where(body.page-about-show) .family-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  }
  :where(body.page-about-show) .family-stat{text-align:center}
  :where(body.page-about-show) .family-stat .big{
    font-family:"Archivo",sans-serif;
    font-weight:900;font-stretch:75%;
    font-size:clamp(3.5rem,7vw,6rem);
    line-height:1;color:var(--white);
    display:block;margin-bottom:12px;
  }
  :where(body.page-about-show) .family-stat .big.gold{color:var(--gold)}
  :where(body.page-about-show) .family-stat .label{
    font-size:0.95rem;text-transform:uppercase;
    letter-spacing:0.1em;font-weight:600;
  }
  :where(body.page-about-show) .family-stat .desc{
    font-size:1rem;opacity:0.85;margin-top:10px;
    max-width:28ch;margin-left:auto;margin-right:auto;
  }

  /* Video block */
  :where(body.page-about-show) .video-section{background:var(--white)}
  :where(body.page-about-show) .video-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:60px;align-items:center;
  }
  :where(body.page-about-show) .video-copy h2{margin-bottom:20px}
  :where(body.page-about-show) .video-copy p{font-size:1.1rem}
  :where(body.page-about-show) .video-frame{
    position:relative;
    aspect-ratio:16/9;
    background:var(--black);
    border-radius:4px;overflow:hidden;
    cursor:pointer;
    box-shadow:0 20px 60px rgba(0,0,0,0.15);
  }
  :where(body.page-about-show) .video-frame img,:where(body.page-about-show) .video-frame video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  }
  :where(body.page-about-show) .video-frame .play-btn{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:88px;height:88px;
    background:var(--red);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 30px rgba(0,0,0,0.4);
    transition:transform 0.15s ease;
    z-index:2;
  }
  :where(body.page-about-show) .video-frame:hover .play-btn{transform:translate(-50%,-50%) scale(1.08)}
  :where(body.page-about-show) .video-frame .play-btn svg{width:32px;height:32px;fill:var(--white);margin-left:4px}
  :where(body.page-about-show) .video-frame.playing .play-btn{display:none}

  /* Before-you-arrive checklist */
  :where(body.page-about-show) .arrive{background:var(--oat)}
  :where(body.page-about-show) .arrive-grid{
    display:grid;grid-template-columns:1fr 1.4fr;
    gap:60px;align-items:start;
  }
  :where(body.page-about-show) .arrive h2{margin-bottom:16px}
  :where(body.page-about-show) .arrive .section-lede{text-align:left;margin:0 0 40px}
  :where(body.page-about-show) .arrive-list{list-style:none;padding:0;margin:0;counter-reset:step}
  :where(body.page-about-show) .arrive-list li{
    padding:24px 0 24px 24px;
    border-bottom:1px solid var(--oat-shade);
    border-left:3px solid var(--red);
    padding-left:24px;
    margin-left:0;
  }
  :where(body.page-about-show) .arrive-list li:last-child{border-bottom:0}
  :where(body.page-about-show) .arrive-list h4{margin:0 0 6px;color:var(--black);font-size:1.15rem}
  :where(body.page-about-show) .arrive-list p{margin:0;font-size:0.98rem}

  /* FAQ accordion */
  :where(body.page-about-show) .faq{background:var(--white)}
  :where(body.page-about-show) .faq h2{text-align:center;margin-bottom:16px}
  :where(body.page-about-show) .faq-list{max-width:900px;margin:56px auto 0}
  :where(body.page-about-show) .faq-item{
    border-bottom:1px solid var(--oat-shade);
  }
  :where(body.page-about-show) .faq-item:first-child{border-top:1px solid var(--oat-shade)}
  :where(body.page-about-show) .faq-q{
    width:100%;
    background:none;border:0;
    padding:24px 0;
    display:flex;justify-content:space-between;align-items:center;gap:20px;
    text-align:left;cursor:pointer;
    font-family:"Inter",sans-serif;font-size:1.15rem;font-weight:600;
    color:var(--black);
  }
  :where(body.page-about-show) .faq-q:hover{color:var(--blue)}
  :where(body.page-about-show) .faq-q .icon{
    flex:0 0 auto;
    width:28px;height:28px;
    border:2px solid var(--blue);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--blue);
    transition:transform 0.2s ease;
  }
  :where(body.page-about-show) .faq-q .icon svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round}
  :where(body.page-about-show) .faq-item.open .faq-q .icon{transform:rotate(45deg)}
  :where(body.page-about-show) .faq-a{
    max-height:0;overflow:hidden;
    transition:max-height 0.25s ease;
  }
  :where(body.page-about-show) .faq-item.open .faq-a{max-height:400px}
  :where(body.page-about-show) .faq-a-inner{padding:0 0 24px;font-size:1rem;max-width:75ch}

  /* CTA */
  :where(body.page-about-show) .cta-band{
    background:var(--black);color:var(--white);
    text-align:center;padding:100px 0;
  }
  :where(body.page-about-show) .cta-band h2{color:var(--white);margin-bottom:20px}
  :where(body.page-about-show) .cta-band p{max-width:56ch;margin:0 auto 40px;font-size:1.15rem}
  :where(body.page-about-show) .cta-band .btn-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

  /* Footer (identical to goodwill) */
  :where(body.page-about-show) .footer{background:var(--black);color:var(--white);padding:60px 0 40px}
  :where(body.page-about-show) .footer-grid{
    display:grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap:40px;margin-bottom:48px;
  }
  :where(body.page-about-show) .footer-brand img{height:40px;margin-bottom:20px;filter:brightness(0) invert(1)}
  :where(body.page-about-show) .footer-brand p{opacity:0.75;font-size:0.9rem;max-width:36ch}
  :where(body.page-about-show) .footer h4{
    color:var(--white);font-family:"Archivo",sans-serif;
    text-transform:uppercase;font-weight:900;font-stretch:75%;
    font-size:1.05rem;margin-bottom:16px;
  }
  :where(body.page-about-show) .footer ul{list-style:none;padding:0;margin:0}
  :where(body.page-about-show) .footer li{margin-bottom:10px}
  :where(body.page-about-show) .footer li a{color:var(--white);opacity:0.75;font-size:0.9rem}
  :where(body.page-about-show) .footer li a:hover{opacity:1;text-decoration:none;color:var(--white)}
  :where(body.page-about-show) .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:28px;border-top:1px solid rgba(255,255,255,0.15);
    font-size:0.85rem;opacity:0.7;
  }
  :where(body.page-about-show) .socials{display:flex;gap:14px}
  :where(body.page-about-show) .socials a{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    background:rgba(255,255,255,0.08);
    border-radius:50%;
    color:var(--white);opacity:1;
    transition:background 0.15s ease;
  }
  :where(body.page-about-show) .socials a:hover{background:var(--red)}
  :where(body.page-about-show) .socials svg{width:16px;height:16px;fill:currentColor}

  /* Responsive */
  @media (max-width: 960px){
    :where(body.page-about-show) .nav-toggle{display:block}
    :where(body.page-about-show) .nav{
      display:none;
      position:absolute;top:100%;left:0;right:0;
      background:var(--white);
      flex-direction:column;align-items:stretch;
      padding:20px 28px;gap:0;
      border-bottom:1px solid var(--oat-shade);
    }
    :where(body.page-about-show) .nav.open{display:flex}
    :where(body.page-about-show) .nav a{padding:14px 0;border-bottom:1px solid var(--oat-shade)}
    :where(body.page-about-show) .nav .cta{margin-top:14px;text-align:center}
    :where(body.page-about-show) .hero-grid{grid-template-columns:1fr;gap:40px}
    :where(body.page-about-show) .hero-image{max-width:480px;margin:0 auto}
    :where(body.page-about-show) .highlight-grid{grid-template-columns:1fr;gap:24px}
    :where(body.page-about-show) .family-grid{grid-template-columns:1fr;gap:40px}
    :where(body.page-about-show) .video-grid{grid-template-columns:1fr;gap:40px}
    :where(body.page-about-show) .arrive-grid{grid-template-columns:1fr;gap:40px}
    :where(body.page-about-show) .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    :where(body.page-about-show) .footer-brand{grid-column:1 / -1}
    :where(body.page-about-show) .footer-bottom{flex-direction:column;gap:16px}
  }
  @media (max-width: 560px){
    :where(body.page-about-show) section{padding:60px 0}
    :where(body.page-about-show) .hero{padding:60px 0 70px}
    :where(body.page-about-show) .footer-grid{grid-template-columns:1fr}
  }

  @media (prefers-reduced-motion: reduce){
    :where(body.page-about-show) *{transition:none !important}
    html{scroll-behavior:auto}
    :where(body.page-about-show) .faq-a{transition:none}
  }

/* ============================================================
   event (3).html — scoped page styles
   ============================================================ */
/* ============================================================
           Brand tokens — same as homepage + tour dates
           ============================================================ */
        body.page-event {
            --white: #ffffff;
            --oat: #e8e9e0;
            --red: #ff0000;
            --blue: #0066cc;
            --black: #000000;
            --gold: #c7a962;

            --font-display: 'Archivo', 'Impact', sans-serif;
            --font-body: 'Inter', system-ui, sans-serif;

            --stripe: 12px;
        }

        :where(body.page-event) *, :where(body.page-event) *::before, :where(body.page-event) *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body.page-event {
            margin: 0;
            font-family: var(--font-body);
            color: var(--black);
            background: var(--oat);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        :where(body.page-event) img { max-width: 100%; display: block; }
        :where(body.page-event) button { font-family: inherit; cursor: pointer; }

        :where(body.page-event) .stripe { display: flex; flex-direction: column; }
        :where(body.page-event) .stripe > span { display: block; height: var(--stripe); }
        :where(body.page-event) .stripe > span:nth-child(1) { background: var(--red); }
        :where(body.page-event) .stripe > span:nth-child(2) { background: var(--white); }
        :where(body.page-event) .stripe > span:nth-child(3) { background: var(--blue); }

        /* ============================================================
           Header
           ============================================================ */
        :where(body.page-event) .site-header {
            background: var(--oat);
            padding: 1.25rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        :where(body.page-event) .site-header__logo img { height: 56px; width: auto; }

        :where(body.page-event) .site-nav {
            display: flex;
            gap: 2.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--blue);
        }

        :where(body.page-event) .site-nav a {
            text-decoration: none;
            color: inherit;
            transition: color 0.15s ease;
        }

        :where(body.page-event) .site-nav a:hover { color: var(--red); }

        :where(body.page-event) .buy-tickets-header {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 0.75rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-size: 0.95rem;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        :where(body.page-event) .buy-tickets-header:hover { background: var(--blue); }

        /* ============================================================
           Breadcrumb
           ============================================================ */
        :where(body.page-event) .breadcrumb {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1.25rem 2.5rem 0;
            font-size: 0.85rem;
            color: var(--black);
            opacity: 0.7;
        }

        :where(body.page-event) .breadcrumb a {
            color: var(--blue);
            text-decoration: none;
            font-weight: 600;
        }

        :where(body.page-event) .breadcrumb a:hover { text-decoration: underline; }

        :where(body.page-event) .breadcrumb__sep { margin: 0 0.5rem; opacity: 0.5; }

        /* ============================================================
           Event hero — flexible content zone
           Split: copy on left, big photo on right
           ============================================================ */
        :where(body.page-event) .event-hero {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem 2.5rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        :where(body.page-event) .event-hero__copy { max-width: 540px; }

        :where(body.page-event) .event-hero__city {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(3rem, 6vw, 5rem);
            line-height: 0.9;
            letter-spacing: -0.01em;
            color: var(--blue);
            margin: 0 0 0.5rem;
            text-transform: uppercase;
        }

        :where(body.page-event) .event-hero__venue {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--black);
            margin: 0 0 2rem;
            letter-spacing: 0.02em;
        }

        :where(body.page-event) .event-hero__meta {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 2rem;
            padding: 1.5rem 0;
            border-top: 2px solid var(--oat);
            border-bottom: 2px solid var(--oat);
        }

        :where(body.page-event) .event-hero__meta-item {
            display: grid;
            grid-template-columns: 100px 1fr;
            gap: 1.5rem;
            align-items: baseline;
            font-size: 1rem;
            color: var(--black);
        }

        :where(body.page-event) .event-hero__meta-label {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--blue);
        }

        :where(body.page-event) .event-hero__meta-value strong {
            display: block;
            font-weight: 600;
        }

        :where(body.page-event) .event-hero__meta-value span {
            display: block;
            font-size: 0.85rem;
            opacity: 0.7;
            margin-top: 0.15rem;
        }

        :where(body.page-event) .event-hero__premium {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--gold);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin: 0 0 1rem;
        }

        :where(body.page-event) .event-hero__cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 1.15rem 2.5rem;
            border: none;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.15rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        :where(body.page-event) .event-hero__cta:hover { background: var(--blue); }

        :where(body.page-event) .event-hero__image {
            position: relative;
            aspect-ratio: 5 / 4;
            overflow: hidden;
            background: var(--blue);
        }

        :where(body.page-event) .event-hero__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ============================================================
           Tour carousel — "You Are Here" strip
           Shows adjacent games in the same tour
           ============================================================ */
        :where(body.page-event) .tour-strip {
            background: var(--white);
            padding: 2rem 2.5rem;
            border-top: 4px solid var(--blue);
            border-bottom: 1px solid var(--oat);
        }

        :where(body.page-event) .tour-strip__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        :where(body.page-event) .tour-strip__label {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--red);
            margin: 0 0 1rem;
        }

        :where(body.page-event) .tour-strip__carousel {
            position: relative;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        :where(body.page-event) .tour-strip__scroll {
            flex: 1;
            /* Without min-width:0 a flex item refuses to shrink below its
               content width, so this never clipped the track — it just grew
               and pushed the whole page sideways on mobile. */
            min-width: 0;
            overflow: hidden;
        }

        :where(body.page-event) .tour-strip__track {
            display: flex;
            gap: 1rem;
            transition: transform 0.4s ease;
        }

        :where(body.page-event) .tour-strip__card {
            flex: 0 0 220px;
            border: 2px solid var(--oat);
            padding: 1.25rem;
            text-align: center;
            text-decoration: none;
            color: var(--black);
            transition: all 0.15s ease;
            position: relative;
            background: var(--white);
        }

        :where(body.page-event) .tour-strip__card:hover {
            border-color: var(--blue);
        }

        :where(body.page-event) .tour-strip__card--current {
            background: var(--blue);
            border-color: var(--blue);
            color: var(--white);
        }

        :where(body.page-event) .tour-strip__here-chip {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--red);
            color: var(--white);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.35rem 0.75rem;
            white-space: nowrap;
        }

        :where(body.page-event) .tour-strip__card-date {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            letter-spacing: 0.02em;
            margin: 0 0 0.15rem;
            line-height: 1;
        }

        :where(body.page-event) .tour-strip__card--current .tour-strip__card-date { color: var(--white); }
        :where(body.page-event) .tour-strip__card:not(.tour-strip__card--current) .tour-strip__card-date { color: var(--blue); }

        :where(body.page-event) .tour-strip__card-dow {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            opacity: 0.8;
            margin: 0 0 0.75rem;
        }

        :where(body.page-event) .tour-strip__card--current .tour-strip__card-dow { color: var(--red); }

        :where(body.page-event) .tour-strip__card-city {
            font-weight: 700;
            font-size: 1rem;
            margin: 0 0 0.15rem;
        }

        :where(body.page-event) .tour-strip__card-venue {
            font-size: 0.8rem;
            opacity: 0.75;
            margin: 0;
        }

        :where(body.page-event) .tour-strip__arrow {
            background: var(--white);
            border: 2px solid var(--blue);
            color: var(--blue);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.25rem;
            flex-shrink: 0;
            transition: all 0.15s ease;
        }

        :where(body.page-event) .tour-strip__arrow:hover {
            background: var(--blue);
            color: var(--white);
        }

        /* ============================================================
           Closest Alternative strip — separate from tour carousel
           Different question: "what if I miss this one?"
           ============================================================ */
        :where(body.page-event) .closest-alt {
            background: var(--oat);
            padding: 1.5rem 2.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        :where(body.page-event) .closest-alt__inner {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        :where(body.page-event) .closest-alt__label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--blue);
            flex-shrink: 0;
        }

        :where(body.page-event) .closest-alt__date {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.25rem;
            color: var(--blue);
            letter-spacing: 0.02em;
            display: flex;
            align-items: baseline;
            gap: 0.75rem;
        }

        :where(body.page-event) .closest-alt__date span:last-child {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            color: var(--red);
        }

        :where(body.page-event) .closest-alt__location {
            flex: 1;
        }

        :where(body.page-event) .closest-alt__city {
            font-weight: 700;
            font-size: 1rem;
            margin: 0 0 0.15rem;
        }

        :where(body.page-event) .closest-alt__venue {
            font-size: 0.85rem;
            opacity: 0.7;
            margin: 0;
        }

        :where(body.page-event) .closest-alt__cta {
            background: transparent;
            border: 2px solid var(--red);
            color: var(--red);
            padding: 0.65rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.85rem;
            text-decoration: none;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }

        :where(body.page-event) .closest-alt__cta:hover {
            background: var(--red);
            color: var(--white);
        }

        /* ============================================================
           Upgrade Your Experience — 3 up
           ============================================================ */
        :where(body.page-event) .upgrades {
            padding: 5rem 2.5rem;
            background: var(--oat);
        }

        :where(body.page-event) .upgrades__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        :where(body.page-event) .upgrades__header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 2rem;
            margin-bottom: 2.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        }

        :where(body.page-event) .upgrades__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 2.5rem;
            color: var(--blue);
            margin: 0;
            letter-spacing: -0.005em;
            text-transform: uppercase;
        }

        :where(body.page-event) .upgrades__view-all {
            color: var(--red);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.9rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
        }

        :where(body.page-event) .upgrades__view-all:hover { text-decoration: underline; }

        :where(body.page-event) .upgrades__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        :where(body.page-event) .upgrade-card {
            background: var(--white);
            overflow: hidden;
            text-decoration: none;
            color: var(--black);
            display: flex;
            flex-direction: column;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        :where(body.page-event) .upgrade-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        :where(body.page-event) .upgrade-card__photo {
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: var(--blue);
        }

        :where(body.page-event) .upgrade-card__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        :where(body.page-event) .upgrade-card__body {
            padding: 1.5rem;
            border-top: 4px solid var(--red);
        }

        :where(body.page-event) .upgrade-card__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.25rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        :where(body.page-event) .upgrade-card__desc {
            font-size: 0.9rem;
            color: var(--black);
            margin: 0;
            line-height: 1.5;
        }

        /* ============================================================
           See What To Expect + FAQ side by side
           ============================================================ */
        :where(body.page-event) .expect-faq {
            padding: 5rem 2.5rem;
            background: var(--white);
        }

        :where(body.page-event) .expect-faq__inner {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }

        /* See What To Expect block */
        :where(body.page-event) .expect {
            background: var(--blue);
            color: var(--white);
            display: flex;
            flex-direction: column;
        }

        :where(body.page-event) .expect__video {
            aspect-ratio: 16 / 9;
            position: relative;
            overflow: hidden;
            background: var(--black);
            cursor: pointer;
        }

        :where(body.page-event) .expect__video img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        :where(body.page-event) .expect__play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--red);
            border: 3px solid var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.2s ease;
        }

        :where(body.page-event) .expect__video:hover .expect__play {
            transform: translate(-50%, -50%) scale(1.08);
            background: var(--white);
        }

        :where(body.page-event) .expect__video:hover .expect__play::after {
            border-left-color: var(--red);
        }

        :where(body.page-event) .expect__play::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 20px solid var(--white);
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-left: 4px;
            transition: border-left-color 0.2s ease;
        }

        :where(body.page-event) .expect__body {
            padding: 2rem;
            flex: 1;
        }

        :where(body.page-event) .expect__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            margin: 0 0 0.75rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        :where(body.page-event) .expect__desc {
            font-size: 0.95rem;
            margin: 0 0 1.5rem;
            line-height: 1.55;
            opacity: 0.95;
        }

        :where(body.page-event) .expect__watch {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--white);
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
            text-decoration: none;
            border-bottom: 2px solid var(--white);
            padding-bottom: 0.25rem;
        }

        /* FAQ block */
        :where(body.page-event) .faq {
            background: var(--white);
            border: 2px solid var(--oat);
            padding: 2rem;
        }

        :where(body.page-event) .faq__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: var(--blue);
            margin: 0 0 1.5rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        :where(body.page-event) .faq__item {
            border-bottom: 1px solid var(--oat);
        }

        :where(body.page-event) .faq__item:last-of-type { border-bottom: none; }

        :where(body.page-event) .faq__question {
            background: none;
            border: none;
            padding: 1.15rem 0;
            width: 100%;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            font-family: inherit;
            font-weight: 600;
            font-size: 1rem;
            color: var(--black);
        }

        :where(body.page-event) .faq__question::after {
            content: '+';
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: var(--red);
            transition: transform 0.2s ease;
        }

        :where(body.page-event) .faq__item.is-open .faq__question::after {
            transform: rotate(45deg);
        }

        :where(body.page-event) .faq__answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            font-size: 0.9rem;
            color: var(--black);
            opacity: 0.85;
        }

        :where(body.page-event) .faq__item.is-open .faq__answer {
            max-height: 500px;
            padding: 0 0 1.15rem;
        }

        :where(body.page-event) .faq__view-all {
            display: inline-block;
            margin-top: 1.5rem;
            color: var(--red);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.9rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
        }

        :where(body.page-event) .faq__view-all:hover { text-decoration: underline; }

        /* ============================================================
           Popular For row
           ============================================================ */
        :where(body.page-event) .popular-for {
            padding: 3rem 2.5rem;
            background: var(--oat);
            border-top: 1px solid rgba(0, 0, 0, 0.06);
        }

        :where(body.page-event) .popular-for__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        :where(body.page-event) .popular-for__label {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--red);
            margin: 0 0 1.5rem;
        }

        :where(body.page-event) .popular-for__grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        :where(body.page-event) .popular-for__item {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1rem;
            color: var(--blue);
            letter-spacing: 0.02em;
            text-transform: uppercase;
            padding: 1rem 0;
            border-top: 3px solid var(--red);
        }

        /* ============================================================
           Text alerts pop-up modal
           ============================================================ */
        :where(body.page-event) .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
            padding: 2rem;
        }

        :where(body.page-event) .modal-overlay.is-open { display: flex; }

        :where(body.page-event) .modal {
            background: var(--white);
            max-width: 500px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        :where(body.page-event) .modal::before {
            content: '';
            display: block;
            height: 8px;
            background: linear-gradient(
                to right,
                var(--red) 0%, var(--red) 33.33%,
                var(--white) 33.33%, var(--white) 66.66%,
                var(--blue) 66.66%, var(--blue) 100%
            );
        }

        :where(body.page-event) .modal__close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--black);
            font-size: 1.75rem;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.5;
            transition: opacity 0.15s ease;
        }

        :where(body.page-event) .modal__close:hover { opacity: 1; }

        :where(body.page-event) .modal__body { padding: 2.5rem 2rem 2rem; }

        :where(body.page-event) .modal__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            text-align: center;
        }

        :where(body.page-event) .modal__lede {
            text-align: center;
            font-size: 0.95rem;
            color: var(--black);
            opacity: 0.85;
            margin: 0 0 1.5rem;
        }

        :where(body.page-event) .modal__benefits {
            list-style: none;
            padding: 0;
            margin: 0 0 1.5rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }

        :where(body.page-event) .modal__benefits li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: var(--black);
        }

        :where(body.page-event) .modal__benefits li::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--red);
            flex-shrink: 0;
        }

        :where(body.page-event) .modal__form {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        :where(body.page-event) .modal__input {
            flex: 1;
            padding: 0.85rem 1rem;
            border: 2px solid var(--oat);
            font-size: 1rem;
            font-family: inherit;
            background: var(--white);
        }

        :where(body.page-event) .modal__submit {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 0.85rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        :where(body.page-event) .modal__submit:hover { background: var(--blue); }

        :where(body.page-event) .modal__disclaimer {
            font-size: 0.7rem;
            color: var(--black);
            opacity: 0.6;
            margin: 0;
            line-height: 1.5;
            text-align: center;
        }

        /* ============================================================
           Footer
           ============================================================ */
        :where(body.page-event) .site-footer {
            background: var(--black);
            color: rgba(255, 255, 255, 0.7);
            padding: 3rem 2.5rem 2rem;
            text-align: center;
            font-size: 0.85rem;
        }

        :where(body.page-event) .site-footer__logo {
            margin: 0 auto 1.5rem;
            max-width: 200px;
        }

        :where(body.page-event) .site-footer p { margin: 0.5rem 0; }

        /* ============================================================
           Responsive
           ============================================================ */
        @media (max-width: 1024px) {
            :where(body.page-event) .event-hero,
            :where(body.page-event) .expect-faq__inner {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            :where(body.page-event) .upgrades__grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
            :where(body.page-event) .popular-for__grid { grid-template-columns: repeat(2, 1fr); }

            :where(body.page-event) .closest-alt__inner {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
        }

        @media (max-width: 640px) {
            :where(body.page-event) .site-header { padding: 1rem 1.25rem; }
            :where(body.page-event) .site-nav { display: none; }
            :where(body.page-event) .site-header__logo img { height: 40px; }

            :where(body.page-event) .breadcrumb, :where(body.page-event) .event-hero, :where(body.page-event) .tour-strip, :where(body.page-event) .closest-alt,
            :where(body.page-event) .upgrades, :where(body.page-event) .expect-faq, :where(body.page-event) .popular-for {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }

            :where(body.page-event) .tour-strip__card { flex-basis: 180px; }

            /* Title + "view all" sat in a space-between row with a 2rem gap
               and no wrap, which was 44px too wide at 390px and made the
               whole page scroll sideways. */
            :where(body.page-event) .upgrades__header {
                flex-wrap: wrap;
                gap: 0.75rem;
                align-items: flex-start;
            }
            :where(body.page-event) .popular-for__grid { grid-template-columns: 1fr; }
            :where(body.page-event) .modal__benefits { grid-template-columns: 1fr; }
        }

/* ============================================================
   goodwill(1).html — scoped page styles
   ============================================================ */
body.page-goodwill{
    --white:#FFFFFF;
    --oat:#E8E9E0;
    --red:#FF0000;
    --blue:#0066CC;
    --black:#000000;
    --gold:#C7A962;
    --oat-shade:#dbdcd2;
  }
  :where(body.page-goodwill) *,:where(body.page-goodwill) *::before,:where(body.page-goodwill) *::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body.page-goodwill{
    margin:0;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--black);
    background:var(--oat);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  :where(body.page-goodwill) img{max-width:100%;display:block}
  :where(body.page-goodwill) a{color:var(--blue);text-decoration:none}
  :where(body.page-goodwill) a:hover{text-decoration:underline}
  :where(body.page-goodwill) h1,:where(body.page-goodwill) h2,:where(body.page-goodwill) h3,:where(body.page-goodwill) h4{
    font-family:"Archivo",sans-serif;
    font-weight:900;
    font-stretch:75%;
    text-transform:uppercase;
    letter-spacing:-0.01em;
    line-height:0.95;
    margin:0;
    color:var(--blue);
  }
  :where(body.page-goodwill) h1{font-size:clamp(2.75rem,7vw,5.5rem)}
  :where(body.page-goodwill) h2{font-size:clamp(2.25rem,5vw,4rem)}
  :where(body.page-goodwill) h3{font-size:clamp(1.5rem,2.5vw,2.25rem)}
  :where(body.page-goodwill) h4{font-size:1.15rem;color:var(--black)}
  :where(body.page-goodwill) p{margin:0 0 1em}

  /* Stripe */
  :where(body.page-goodwill) .stripe{display:flex;flex-direction:column}
  :where(body.page-goodwill) .stripe > span{display:block;height:12px}
  :where(body.page-goodwill) .stripe > span:nth-child(1){background:var(--red)}
  :where(body.page-goodwill) .stripe > span:nth-child(2){background:var(--white)}
  :where(body.page-goodwill) .stripe > span:nth-child(3){background:var(--blue)}

  /* Header */
  :where(body.page-goodwill) .header{
    background:var(--white);
    border-bottom:1px solid var(--oat-shade);
    position:sticky;top:0;z-index:50;
  }
  :where(body.page-goodwill) .header-inner{
    max-width:1400px;margin:0 auto;
    padding:14px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
  }
  :where(body.page-goodwill) .brand{display:flex;align-items:center;gap:12px}
  :where(body.page-goodwill) .brand img{height:44px;width:auto}
  :where(body.page-goodwill) .nav{display:flex;align-items:center;gap:28px}
  :where(body.page-goodwill) .nav a{
    color:var(--black);
    font-weight:600;font-size:0.95rem;
    text-transform:uppercase;letter-spacing:0.03em;
  }
  :where(body.page-goodwill) .nav a:hover{color:var(--blue);text-decoration:none}
  :where(body.page-goodwill) .nav .cta{
    background:var(--red);color:var(--white);
    padding:10px 20px;border-radius:2px;
    letter-spacing:0.05em;
  }
  :where(body.page-goodwill) .nav .cta:hover{background:#d90000;color:var(--white)}
  :where(body.page-goodwill) .nav-toggle{
    display:none;background:none;border:0;cursor:pointer;
    padding:8px;color:var(--black);
  }
  :where(body.page-goodwill) .nav-toggle svg{width:28px;height:28px}

  /* Layout */
  :where(body.page-goodwill) .wrap{max-width:1400px;margin:0 auto;padding:0 28px}
  :where(body.page-goodwill) section{padding:80px 0}

  /* Hero */
  :where(body.page-goodwill) .hero{
    background:var(--oat);
    padding:90px 0 100px;
    position:relative;
    overflow:hidden;
  }
  :where(body.page-goodwill) .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;align-items:center;
  }
  :where(body.page-goodwill) .hero-eyebrow{
    font-family:"Inter",sans-serif;
    text-transform:uppercase;letter-spacing:0.18em;
    font-size:0.85rem;font-weight:700;
    color:var(--red);margin-bottom:24px;
  }
  :where(body.page-goodwill) .hero h1{margin-bottom:28px}
  :where(body.page-goodwill) .hero-lede{
    font-size:clamp(1.1rem,1.5vw,1.35rem);
    max-width:52ch;margin-bottom:32px;
  }
  :where(body.page-goodwill) .hero-stripe-inline{
    display:flex;height:8px;width:120px;margin:32px 0;
  }
  :where(body.page-goodwill) .hero-stripe-inline > span{flex:1;display:block}
  :where(body.page-goodwill) .hero-stripe-inline > span:nth-child(1){background:var(--red)}
  :where(body.page-goodwill) .hero-stripe-inline > span:nth-child(2){background:var(--white)}
  :where(body.page-goodwill) .hero-stripe-inline > span:nth-child(3){background:var(--blue)}
  :where(body.page-goodwill) .hero-image{
    aspect-ratio:4/5;
    border-radius:4px;overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.15);
  }
  :where(body.page-goodwill) .hero-image img{width:100%;height:100%;object-fit:cover}

  /* Buttons */
  :where(body.page-goodwill) .btn{
    display:inline-block;
    padding:16px 32px;
    font-family:"Inter",sans-serif;font-weight:700;
    text-transform:uppercase;letter-spacing:0.08em;
    font-size:0.95rem;
    border:0;border-radius:2px;cursor:pointer;
    transition:transform 0.15s ease, background 0.15s ease;
  }
  :where(body.page-goodwill) .btn:hover{text-decoration:none;transform:translateY(-2px)}
  :where(body.page-goodwill) .btn-primary{background:var(--red);color:var(--white)}
  :where(body.page-goodwill) .btn-primary:hover{background:#d90000;color:var(--white)}
  :where(body.page-goodwill) .btn-secondary{
    background:transparent;color:var(--blue);
    border:2px solid var(--blue);padding:14px 30px;
  }
  :where(body.page-goodwill) .btn-secondary:hover{background:var(--blue);color:var(--white)}

  /* Manifesto pull */
  :where(body.page-goodwill) .manifesto{background:var(--white)}
  :where(body.page-goodwill) .manifesto-inner{
    max-width:960px;margin:0 auto;
    text-align:center;padding:0 28px;
  }
  :where(body.page-goodwill) .manifesto p{
    font-family:"Archivo",sans-serif;
    font-weight:700;font-stretch:75%;
    text-transform:uppercase;
    color:var(--blue);
    font-size:clamp(1.75rem,3.5vw,2.75rem);
    line-height:1.1;letter-spacing:-0.005em;
    margin:0;
  }
  :where(body.page-goodwill) .manifesto .attribution{
    font-family:"Inter",sans-serif;
    font-weight:500;font-size:0.9rem;
    text-transform:uppercase;letter-spacing:0.15em;
    color:var(--black);margin-top:32px;
  }

  /* Impact stats */
  :where(body.page-goodwill) .impact{background:var(--blue);color:var(--white)}
  :where(body.page-goodwill) .impact h2{color:var(--white);text-align:center;margin-bottom:60px}
  :where(body.page-goodwill) .impact-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  }
  :where(body.page-goodwill) .impact-stat{text-align:center;position:relative}
  :where(body.page-goodwill) .impact-stat .num{
    font-family:"Archivo",sans-serif;
    font-weight:900;font-stretch:75%;
    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1;color:var(--white);
    display:block;margin-bottom:12px;
  }
  :where(body.page-goodwill) .impact-stat .num.gold{color:var(--gold)}
  :where(body.page-goodwill) .impact-stat .label{
    font-size:0.9rem;text-transform:uppercase;
    letter-spacing:0.12em;font-weight:600;
    opacity:0.9;
  }

  /* Program pillars */
  :where(body.page-goodwill) .pillars h2{margin-bottom:16px}
  :where(body.page-goodwill) .section-lede{
    max-width:60ch;margin-bottom:56px;
    font-size:1.1rem;
  }
  :where(body.page-goodwill) .pillar-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  }
  :where(body.page-goodwill) .pillar-card{
    background:var(--white);
    border-radius:4px;overflow:hidden;
    display:flex;flex-direction:column;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  :where(body.page-goodwill) .pillar-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,0.1);
  }
  :where(body.page-goodwill) .pillar-image{
    aspect-ratio:4/3;
    background:var(--oat);
    overflow:hidden;
    position:relative;
  }
  :where(body.page-goodwill) .pillar-image::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(to right,
      var(--red) 0 33.33%,
      var(--white) 33.33% 66.66%,
      var(--blue) 66.66% 100%);
    z-index:2;
  }
  :where(body.page-goodwill) .pillar-image img{width:100%;height:100%;object-fit:cover}
  :where(body.page-goodwill) .pillar-body{padding:32px 28px;flex:1;display:flex;flex-direction:column}
  :where(body.page-goodwill) .pillar-body h3{color:var(--blue);margin-bottom:16px;font-size:1.5rem}
  :where(body.page-goodwill) .pillar-body p{margin-bottom:24px;flex:1}
  :where(body.page-goodwill) .pillar-body a{
    font-weight:700;text-transform:uppercase;
    letter-spacing:0.08em;font-size:0.85rem;
    color:var(--blue);
  }
  :where(body.page-goodwill) .pillar-body a::after{
    content:" →";display:inline-block;
    transition:transform 0.15s ease;
  }
  :where(body.page-goodwill) .pillar-body a:hover::after{transform:translateX(4px)}

  /* Photo band (half-bleed) */
  :where(body.page-goodwill) .story{background:var(--white)}
  :where(body.page-goodwill) .story-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:0;align-items:stretch;
  }
  :where(body.page-goodwill) .story-image{aspect-ratio:1/1;overflow:hidden}
  :where(body.page-goodwill) .story-image img{width:100%;height:100%;object-fit:cover}
  :where(body.page-goodwill) .story-copy{
    padding:60px;display:flex;flex-direction:column;justify-content:center;
    background:var(--oat);
  }
  :where(body.page-goodwill) .story-copy h2{margin-bottom:24px}
  :where(body.page-goodwill) .story-copy .btn-secondary{align-self:flex-start;margin-top:16px}

  /* CTA band */
  :where(body.page-goodwill) .cta-band{
    background:var(--black);color:var(--white);
    text-align:center;padding:100px 0;
  }
  :where(body.page-goodwill) .cta-band h2{color:var(--white);margin-bottom:20px}
  :where(body.page-goodwill) .cta-band p{
    max-width:56ch;margin:0 auto 40px;
    font-size:1.15rem;
  }
  :where(body.page-goodwill) .cta-band .btn-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

  /* Footer */
  :where(body.page-goodwill) .footer{background:var(--black);color:var(--white);padding:60px 0 40px}
  :where(body.page-goodwill) .footer-grid{
    display:grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap:40px;margin-bottom:48px;
  }
  :where(body.page-goodwill) .footer-brand img{height:40px;margin-bottom:20px;filter:brightness(0) invert(1)}
  :where(body.page-goodwill) .footer-brand p{opacity:0.75;font-size:0.9rem;max-width:36ch}
  :where(body.page-goodwill) .footer h4{
    color:var(--white);font-family:"Archivo",sans-serif;
    text-transform:uppercase;font-weight:900;font-stretch:75%;
    font-size:1.05rem;margin-bottom:16px;
  }
  :where(body.page-goodwill) .footer ul{list-style:none;padding:0;margin:0}
  :where(body.page-goodwill) .footer li{margin-bottom:10px}
  :where(body.page-goodwill) .footer li a{color:var(--white);opacity:0.75;font-size:0.9rem}
  :where(body.page-goodwill) .footer li a:hover{opacity:1;text-decoration:none;color:var(--white)}
  :where(body.page-goodwill) .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:28px;border-top:1px solid rgba(255,255,255,0.15);
    font-size:0.85rem;opacity:0.7;
  }
  :where(body.page-goodwill) .socials{display:flex;gap:14px}
  :where(body.page-goodwill) .socials a{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    background:rgba(255,255,255,0.08);
    border-radius:50%;
    color:var(--white);opacity:1;
    transition:background 0.15s ease;
  }
  :where(body.page-goodwill) .socials a:hover{background:var(--red)}
  :where(body.page-goodwill) .socials svg{width:16px;height:16px;fill:currentColor}

  /* Responsive */
  @media (max-width: 960px){
    :where(body.page-goodwill) .nav-toggle{display:block}
    :where(body.page-goodwill) .nav{
      display:none;
      position:absolute;top:100%;left:0;right:0;
      background:var(--white);
      flex-direction:column;align-items:stretch;
      padding:20px 28px;gap:0;
      border-bottom:1px solid var(--oat-shade);
    }
    :where(body.page-goodwill) .nav.open{display:flex}
    :where(body.page-goodwill) .nav a{padding:14px 0;border-bottom:1px solid var(--oat-shade)}
    :where(body.page-goodwill) .nav .cta{margin-top:14px;text-align:center}
    :where(body.page-goodwill) .hero-grid{grid-template-columns:1fr;gap:40px}
    :where(body.page-goodwill) .hero-image{max-width:480px;margin:0 auto}
    :where(body.page-goodwill) .impact-grid{grid-template-columns:repeat(2,1fr);gap:32px}
    :where(body.page-goodwill) .pillar-grid{grid-template-columns:1fr;gap:24px}
    :where(body.page-goodwill) .story-grid{grid-template-columns:1fr}
    :where(body.page-goodwill) .story-copy{padding:40px 28px}
    :where(body.page-goodwill) .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    :where(body.page-goodwill) .footer-brand{grid-column:1 / -1}
    :where(body.page-goodwill) .footer-bottom{flex-direction:column;gap:16px}
  }
  @media (max-width: 560px){
    :where(body.page-goodwill) section{padding:60px 0}
    :where(body.page-goodwill) .hero{padding:60px 0 70px}
    :where(body.page-goodwill) .impact-grid{grid-template-columns:1fr;gap:32px}
    :where(body.page-goodwill) .footer-grid{grid-template-columns:1fr}
  }

  @media (prefers-reduced-motion: reduce){
    :where(body.page-goodwill) *{transition:none !important}
    html{scroll-behavior:auto}
  }

/* ============================================================
   press-release (1).html — scoped page styles
   ============================================================ */
body.page-press-release{
    --white:#FFFFFF;--oat:#E8E9E0;--red:#FF0000;--blue:#0066CC;
    --black:#000000;--gold:#C7A962;--oat-shade:#dbdcd2;
  }
  :where(body.page-press-release) *,:where(body.page-press-release) *::before,:where(body.page-press-release) *::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body.page-press-release{margin:0;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--black);background:var(--oat);line-height:1.65;-webkit-font-smoothing:antialiased}
  :where(body.page-press-release) img{max-width:100%;display:block}
  :where(body.page-press-release) a{color:var(--blue);text-decoration:none}
  :where(body.page-press-release) a:hover{text-decoration:underline}
  :where(body.page-press-release) h1,:where(body.page-press-release) h2,:where(body.page-press-release) h3,:where(body.page-press-release) h4{font-family:"Archivo",sans-serif;font-weight:900;font-stretch:75%;
    text-transform:uppercase;letter-spacing:-0.01em;line-height:0.95;margin:0;color:var(--blue)}
  :where(body.page-press-release) h1{font-size:clamp(2rem,4.5vw,3.5rem)}
  :where(body.page-press-release) h2{font-size:clamp(1.5rem,2.5vw,2rem)}
  :where(body.page-press-release) h3{font-size:1.15rem}
  :where(body.page-press-release) p{margin:0 0 1em}

  :where(body.page-press-release) .stripe{display:flex;flex-direction:column}
  :where(body.page-press-release) .stripe > span{display:block;height:12px}
  :where(body.page-press-release) .stripe > span:nth-child(1){background:var(--red)}
  :where(body.page-press-release) .stripe > span:nth-child(2){background:var(--white)}
  :where(body.page-press-release) .stripe > span:nth-child(3){background:var(--blue)}

  :where(body.page-press-release) .header{background:var(--white);border-bottom:1px solid var(--oat-shade);position:sticky;top:0;z-index:50}
  :where(body.page-press-release) .header-inner{max-width:1400px;margin:0 auto;padding:14px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px}
  :where(body.page-press-release) .brand img{height:44px;width:auto;display:block}
  :where(body.page-press-release) .nav{display:flex;align-items:center;gap:28px}
  :where(body.page-press-release) .nav a{color:var(--black);font-weight:600;font-size:0.95rem;
    text-transform:uppercase;letter-spacing:0.03em}
  :where(body.page-press-release) .nav a:hover{color:var(--blue);text-decoration:none}
  :where(body.page-press-release) .nav .cta{background:var(--red);color:var(--white);padding:10px 20px;border-radius:2px;letter-spacing:0.05em}
  :where(body.page-press-release) .nav .cta:hover{background:#d90000;color:var(--white)}
  :where(body.page-press-release) .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--black)}
  :where(body.page-press-release) .nav-toggle svg{width:28px;height:28px}

  :where(body.page-press-release) .wrap{max-width:1200px;margin:0 auto;padding:0 28px}
  :where(body.page-press-release) section{padding:60px 0}

  /* Breadcrumb */
  :where(body.page-press-release) .crumb{
    background:var(--oat);
    padding:24px 0 0;
    font-size:0.85rem;
  }
  :where(body.page-press-release) .crumb-list{
    display:flex;gap:8px;align-items:center;
    text-transform:uppercase;letter-spacing:0.08em;font-weight:600;color:#666;
  }
  :where(body.page-press-release) .crumb-list a{color:var(--blue)}
  :where(body.page-press-release) .crumb-list .sep{color:#999}

  /* Article hero */
  :where(body.page-press-release) .article-hero{
    background:var(--oat);
    padding:32px 0 48px;
    border-bottom:1px solid var(--oat-shade);
  }
  :where(body.page-press-release) .article-hero .cats{
    display:flex;gap:8px;margin-bottom:20px;
  }
  :where(body.page-press-release) .article-hero .cat{
    font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;
    background:var(--red);color:var(--white);padding:5px 12px;border-radius:2px;font-weight:700;
  }
  :where(body.page-press-release) .article-hero h1{margin-bottom:24px;max-width:22ch}
  :where(body.page-press-release) .article-hero .subhead{
    font-size:clamp(1.1rem,1.5vw,1.35rem);
    max-width:60ch;color:#333;margin-bottom:32px;line-height:1.5;
  }
  :where(body.page-press-release) .article-meta{
    display:flex;gap:24px;align-items:center;flex-wrap:wrap;
    padding-top:24px;border-top:1px solid var(--oat-shade);
    font-size:0.9rem;
  }
  :where(body.page-press-release) .article-meta .date{text-transform:uppercase;letter-spacing:0.08em;font-weight:600;color:var(--black)}
  :where(body.page-press-release) .article-meta .dateline{color:#666}

  /* Share row */
  :where(body.page-press-release) .share{
    display:flex;gap:10px;align-items:center;margin-left:auto;
  }
  :where(body.page-press-release) .share span{
    font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em;
    color:#666;font-weight:600;
  }
  :where(body.page-press-release) .share a{
    width:34px;height:34px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--white);border-radius:50%;
    color:var(--blue);
    transition:background 0.15s ease, color 0.15s ease;
  }
  :where(body.page-press-release) .share a:hover{background:var(--blue);color:var(--white);text-decoration:none}
  :where(body.page-press-release) .share svg{width:15px;height:15px;fill:currentColor}

  /* Article body layout */
  :where(body.page-press-release) .article-layout{
    display:grid;grid-template-columns:1fr 320px;
    gap:56px;align-items:start;
  }

  /* Article typography */
  :where(body.page-press-release) .article-body{
    font-size:1.08rem;color:#222;
    max-width:70ch;
  }
  :where(body.page-press-release) .article-body .dateline{
    font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
    font-size:0.85rem;color:var(--black);margin-bottom:24px;
  }
  :where(body.page-press-release) .article-body p{margin-bottom:1.4em}
  :where(body.page-press-release) .article-body p:first-of-type::first-letter{
    font-family:"Archivo",sans-serif;font-weight:900;font-stretch:75%;
    font-size:3.5em;color:var(--blue);
    float:left;line-height:0.9;padding:6px 12px 0 0;
  }
  :where(body.page-press-release) .article-body h2{
    color:var(--blue);margin:48px 0 20px;
    font-size:1.6rem;
  }
  :where(body.page-press-release) .article-body blockquote{
    margin:36px 0;
    padding:20px 28px;
    border-left:4px solid var(--red);
    background:var(--white);
    font-family:"Archivo",sans-serif;font-weight:700;font-stretch:75%;
    font-size:1.3rem;text-transform:uppercase;line-height:1.2;
    color:var(--blue);
  }
  :where(body.page-press-release) .article-body blockquote cite{
    display:block;margin-top:16px;
    font-family:"Inter",sans-serif;font-weight:500;font-style:normal;
    font-size:0.85rem;text-transform:uppercase;letter-spacing:0.1em;
    color:var(--black);
  }
  :where(body.page-press-release) .article-body ul{margin:0 0 1.4em;padding-left:24px}
  :where(body.page-press-release) .article-body li{margin-bottom:8px}
  :where(body.page-press-release) .article-body .end-marker{
    text-align:center;padding:40px 0 0;
    letter-spacing:0.5em;font-family:"Archivo",sans-serif;
    font-weight:900;font-stretch:75%;
    color:var(--red);
  }

  :where(body.page-press-release) .boilerplate{
    margin-top:56px;padding:32px;
    background:var(--white);border-radius:4px;
  }
  :where(body.page-press-release) .boilerplate h3{color:var(--blue);margin-bottom:14px;font-size:1.3rem}
  :where(body.page-press-release) .boilerplate p{font-size:0.98rem;margin:0}

  /* Sidebar */
  :where(body.page-press-release) .side-card{
    background:var(--white);border-radius:4px;
    padding:24px 24px;margin-bottom:20px;
  }
  :where(body.page-press-release) .side-card h3{color:var(--blue);font-size:1.15rem;margin-bottom:16px}
  :where(body.page-press-release) .contact-block .name{font-weight:700;font-size:1rem;margin-bottom:4px}
  :where(body.page-press-release) .contact-block .role{color:#555;font-size:0.85rem;margin-bottom:12px}
  :where(body.page-press-release) .contact-block a{display:block;padding:4px 0;font-size:0.9rem;word-break:break-word}
  :where(body.page-press-release) .side-list{list-style:none;padding:0;margin:0}
  :where(body.page-press-release) .side-list li{
    padding:12px 0;border-bottom:1px solid var(--oat-shade);
    font-size:0.9rem;
  }
  :where(body.page-press-release) .side-list li:last-child{border-bottom:0}
  :where(body.page-press-release) .side-list a{
    display:flex;justify-content:space-between;gap:10px;align-items:center;
    color:var(--black);font-weight:500;
  }
  :where(body.page-press-release) .side-list a:hover{color:var(--blue);text-decoration:none}
  :where(body.page-press-release) .side-list .fmt{
    font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;
    color:#666;font-weight:600;
  }

  /* Related */
  :where(body.page-press-release) .related{background:var(--white);padding:70px 0}
  :where(body.page-press-release) .related h2{margin-bottom:32px}
  :where(body.page-press-release) .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  :where(body.page-press-release) .related-card{
    background:var(--oat);border-radius:4px;
    padding:24px 24px;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  :where(body.page-press-release) .related-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.08);text-decoration:none}
  :where(body.page-press-release) .related-card .date{
    font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em;
    color:var(--red);font-weight:700;margin-bottom:10px;
  }
  :where(body.page-press-release) .related-card h3{
    color:var(--blue);font-size:1.15rem;margin-bottom:10px;line-height:1.05;
  }
  :where(body.page-press-release) .related-card p{font-size:0.9rem;color:#555;margin:0}

  /* Footer */
  :where(body.page-press-release) .footer{background:var(--black);color:var(--white);padding:60px 0 40px}
  :where(body.page-press-release) .footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;margin-bottom:48px}
  :where(body.page-press-release) .footer-brand img{height:40px;margin-bottom:20px;filter:brightness(0) invert(1)}
  :where(body.page-press-release) .footer-brand p{opacity:0.75;font-size:0.9rem;max-width:36ch}
  :where(body.page-press-release) .footer h4{color:var(--white);font-family:"Archivo",sans-serif;
    text-transform:uppercase;font-weight:900;font-stretch:75%;font-size:1.05rem;margin-bottom:16px}
  :where(body.page-press-release) .footer ul{list-style:none;padding:0;margin:0}
  :where(body.page-press-release) .footer li{margin-bottom:10px}
  :where(body.page-press-release) .footer li a{color:var(--white);opacity:0.75;font-size:0.9rem}
  :where(body.page-press-release) .footer li a:hover{opacity:1;text-decoration:none;color:var(--white)}
  :where(body.page-press-release) .footer-bottom{display:flex;justify-content:space-between;align-items:center;
    padding-top:28px;border-top:1px solid rgba(255,255,255,0.15);font-size:0.85rem;opacity:0.7}
  :where(body.page-press-release) .socials{display:flex;gap:14px}
  :where(body.page-press-release) .socials a{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;background:rgba(255,255,255,0.08);border-radius:50%;
    color:var(--white);opacity:1;transition:background 0.15s ease}
  :where(body.page-press-release) .socials a:hover{background:var(--red)}
  :where(body.page-press-release) .socials svg{width:16px;height:16px;fill:currentColor}

  @media (max-width: 960px){
    :where(body.page-press-release) .nav-toggle{display:block}
    :where(body.page-press-release) .nav{display:none;position:absolute;top:100%;left:0;right:0;
      background:var(--white);flex-direction:column;align-items:stretch;
      padding:20px 28px;gap:0;border-bottom:1px solid var(--oat-shade)}
    :where(body.page-press-release) .nav.open{display:flex}
    :where(body.page-press-release) .nav a{padding:14px 0;border-bottom:1px solid var(--oat-shade)}
    :where(body.page-press-release) .nav .cta{margin-top:14px;text-align:center}
    :where(body.page-press-release) .article-layout{grid-template-columns:1fr;gap:40px}
    :where(body.page-press-release) .article-meta{flex-direction:column;align-items:flex-start;gap:16px}
    :where(body.page-press-release) .share{margin-left:0}
    :where(body.page-press-release) .related-grid{grid-template-columns:1fr;gap:16px}
    :where(body.page-press-release) .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    :where(body.page-press-release) .footer-brand{grid-column:1 / -1}
    :where(body.page-press-release) .footer-bottom{flex-direction:column;gap:16px}
  }
  @media (max-width: 560px){
    :where(body.page-press-release) .footer-grid{grid-template-columns:1fr}
    :where(body.page-press-release) .article-body p:first-of-type::first-letter{font-size:2.8em}
  }
  @media (prefers-reduced-motion: reduce){:where(body.page-press-release) *{transition:none !important}html{scroll-behavior:auto}}

/* ============================================================
   press-room (1).html — scoped page styles
   ============================================================ */
body.page-press-room{
    --white:#FFFFFF;--oat:#E8E9E0;--red:#FF0000;--blue:#0066CC;
    --black:#000000;--gold:#C7A962;--oat-shade:#dbdcd2;
  }
  :where(body.page-press-room) *,:where(body.page-press-room) *::before,:where(body.page-press-room) *::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body.page-press-room{margin:0;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--black);background:var(--oat);line-height:1.55;-webkit-font-smoothing:antialiased}
  :where(body.page-press-room) img{max-width:100%;display:block}
  :where(body.page-press-room) a{color:var(--blue);text-decoration:none}
  :where(body.page-press-room) a:hover{text-decoration:underline}
  :where(body.page-press-room) h1,:where(body.page-press-room) h2,:where(body.page-press-room) h3,:where(body.page-press-room) h4{font-family:"Archivo",sans-serif;font-weight:900;font-stretch:75%;
    text-transform:uppercase;letter-spacing:-0.01em;line-height:0.95;margin:0;color:var(--blue)}
  :where(body.page-press-room) h1{font-size:clamp(2.5rem,6vw,4.5rem)}
  :where(body.page-press-room) h2{font-size:clamp(1.75rem,3vw,2.5rem)}
  :where(body.page-press-room) h3{font-size:1.35rem}
  :where(body.page-press-room) h4{font-size:1.05rem;color:var(--black)}
  :where(body.page-press-room) p{margin:0 0 1em}

  :where(body.page-press-room) .stripe{display:flex;flex-direction:column}
  :where(body.page-press-room) .stripe > span{display:block;height:12px}
  :where(body.page-press-room) .stripe > span:nth-child(1){background:var(--red)}
  :where(body.page-press-room) .stripe > span:nth-child(2){background:var(--white)}
  :where(body.page-press-room) .stripe > span:nth-child(3){background:var(--blue)}

  :where(body.page-press-room) .header{background:var(--white);border-bottom:1px solid var(--oat-shade);position:sticky;top:0;z-index:50}
  :where(body.page-press-room) .header-inner{max-width:1400px;margin:0 auto;padding:14px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px}
  :where(body.page-press-room) .brand img{height:44px;width:auto;display:block}
  :where(body.page-press-room) .nav{display:flex;align-items:center;gap:28px}
  :where(body.page-press-room) .nav a{color:var(--black);font-weight:600;font-size:0.95rem;
    text-transform:uppercase;letter-spacing:0.03em}
  :where(body.page-press-room) .nav a:hover{color:var(--blue);text-decoration:none}
  :where(body.page-press-room) .nav .cta{background:var(--red);color:var(--white);padding:10px 20px;border-radius:2px;letter-spacing:0.05em}
  :where(body.page-press-room) .nav .cta:hover{background:#d90000;color:var(--white)}
  :where(body.page-press-room) .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--black)}
  :where(body.page-press-room) .nav-toggle svg{width:28px;height:28px}

  :where(body.page-press-room) .wrap{max-width:1400px;margin:0 auto;padding:0 28px}
  :where(body.page-press-room) section{padding:60px 0}

  /* Restrained hero — typography-forward */
  :where(body.page-press-room) .pr-hero{
    background:var(--oat);
    padding:70px 0 40px;
    border-bottom:1px solid var(--oat-shade);
  }
  :where(body.page-press-room) .pr-hero .eyebrow{
    text-transform:uppercase;letter-spacing:0.18em;
    font-size:0.85rem;font-weight:700;color:var(--red);margin-bottom:20px;
  }
  :where(body.page-press-room) .pr-hero h1{margin-bottom:24px}
  :where(body.page-press-room) .pr-hero p{max-width:60ch;font-size:1.1rem;margin-bottom:0}
  :where(body.page-press-room) .pr-hero-inline{
    display:flex;height:6px;width:100px;margin-top:32px;
  }
  :where(body.page-press-room) .pr-hero-inline > span{flex:1;display:block}
  :where(body.page-press-room) .pr-hero-inline > span:nth-child(1){background:var(--red)}
  :where(body.page-press-room) .pr-hero-inline > span:nth-child(2){background:var(--white)}
  :where(body.page-press-room) .pr-hero-inline > span:nth-child(3){background:var(--blue)}

  /* Two-column layout */
  :where(body.page-press-room) .pr-layout{
    display:grid;grid-template-columns:1.5fr 1fr;
    gap:56px;align-items:start;
  }

  /* Releases feed */
  :where(body.page-press-room) .releases-list{display:flex;flex-direction:column;gap:0}
  :where(body.page-press-room) .release{
    background:var(--white);
    padding:32px 32px;
    border-radius:4px;
    display:grid;grid-template-columns:120px 1fr;gap:28px;
    align-items:start;
    transition:transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom:16px;
  }
  :where(body.page-press-room) .release:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.08)}
  :where(body.page-press-room) .release-date{
    text-align:center;padding:12px 8px;
    background:var(--oat);border-radius:2px;
  }
  :where(body.page-press-room) .release-date .month{
    font-size:0.8rem;text-transform:uppercase;letter-spacing:0.1em;
    color:var(--red);font-weight:700;margin-bottom:4px;
  }
  :where(body.page-press-room) .release-date .day{
    font-family:"Archivo",sans-serif;font-weight:900;font-stretch:75%;
    font-size:2.5rem;color:var(--black);line-height:1;
  }
  :where(body.page-press-room) .release-date .year{
    font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;
    color:#666;margin-top:4px;font-weight:600;
  }
  :where(body.page-press-room) .release-body h3{margin-bottom:10px;font-size:1.4rem}
  :where(body.page-press-room) .release-body h3 a{color:var(--blue)}
  :where(body.page-press-room) .release-body h3 a:hover{text-decoration:underline}
  :where(body.page-press-room) .release-body .cats{
    display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;
  }
  :where(body.page-press-room) .release-body .cat{
    font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;
    background:var(--oat);color:var(--black);padding:4px 10px;border-radius:2px;font-weight:600;
  }
  :where(body.page-press-room) .release-body p{margin:0 0 12px;font-size:0.98rem}
  :where(body.page-press-room) .release-body .more{
    font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
    font-size:0.8rem;color:var(--blue);
  }
  :where(body.page-press-room) .release-body .more::after{content:" →";display:inline-block;transition:transform 0.15s ease}
  :where(body.page-press-room) .release-body .more:hover::after{transform:translateX(4px)}

  /* Sidebar */
  :where(body.page-press-room) .side-card{
    background:var(--white);border-radius:4px;
    padding:28px 28px;margin-bottom:24px;
    position:relative;
  }
  :where(body.page-press-room) .side-card h2{color:var(--blue);font-size:1.5rem;margin-bottom:20px}

  /* Media contact */
  :where(body.page-press-room) .contact-block{padding-bottom:6px}
  :where(body.page-press-room) .contact-block .name{font-weight:700;font-size:1.05rem;margin-bottom:4px}
  :where(body.page-press-room) .contact-block .role{color:#555;font-size:0.9rem;margin-bottom:14px}
  :where(body.page-press-room) .contact-block a{display:block;padding:6px 0;font-size:0.95rem;word-break:break-word}

  /* Assets grid */
  :where(body.page-press-room) .assets-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  :where(body.page-press-room) .asset{
    display:flex;flex-direction:column;
    background:var(--oat);
    padding:16px 14px;
    border-radius:2px;text-align:center;
    color:var(--black);font-weight:600;font-size:0.85rem;
    text-decoration:none;
    transition:background 0.15s ease, color 0.15s ease;
  }
  :where(body.page-press-room) .asset:hover{background:var(--blue);color:var(--white);text-decoration:none}
  :where(body.page-press-room) .asset svg{width:24px;height:24px;margin:0 auto 10px;fill:currentColor}
  :where(body.page-press-room) .asset .fmt{
    font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;
    color:#666;margin-top:6px;font-weight:500;
  }
  :where(body.page-press-room) .asset:hover .fmt{color:rgba(255,255,255,0.8)}

  /* Footer */
  :where(body.page-press-room) .footer{background:var(--black);color:var(--white);padding:60px 0 40px}
  :where(body.page-press-room) .footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;margin-bottom:48px}
  :where(body.page-press-room) .footer-brand img{height:40px;margin-bottom:20px;filter:brightness(0) invert(1)}
  :where(body.page-press-room) .footer-brand p{opacity:0.75;font-size:0.9rem;max-width:36ch}
  :where(body.page-press-room) .footer h4{color:var(--white);font-family:"Archivo",sans-serif;
    text-transform:uppercase;font-weight:900;font-stretch:75%;font-size:1.05rem;margin-bottom:16px}
  :where(body.page-press-room) .footer ul{list-style:none;padding:0;margin:0}
  :where(body.page-press-room) .footer li{margin-bottom:10px}
  :where(body.page-press-room) .footer li a{color:var(--white);opacity:0.75;font-size:0.9rem}
  :where(body.page-press-room) .footer li a:hover{opacity:1;text-decoration:none;color:var(--white)}
  :where(body.page-press-room) .footer-bottom{display:flex;justify-content:space-between;align-items:center;
    padding-top:28px;border-top:1px solid rgba(255,255,255,0.15);font-size:0.85rem;opacity:0.7}
  :where(body.page-press-room) .socials{display:flex;gap:14px}
  :where(body.page-press-room) .socials a{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;background:rgba(255,255,255,0.08);border-radius:50%;
    color:var(--white);opacity:1;transition:background 0.15s ease}
  :where(body.page-press-room) .socials a:hover{background:var(--red)}
  :where(body.page-press-room) .socials svg{width:16px;height:16px;fill:currentColor}

  @media (max-width: 960px){
    :where(body.page-press-room) .nav-toggle{display:block}
    :where(body.page-press-room) .nav{display:none;position:absolute;top:100%;left:0;right:0;
      background:var(--white);flex-direction:column;align-items:stretch;
      padding:20px 28px;gap:0;border-bottom:1px solid var(--oat-shade)}
    :where(body.page-press-room) .nav.open{display:flex}
    :where(body.page-press-room) .nav a{padding:14px 0;border-bottom:1px solid var(--oat-shade)}
    :where(body.page-press-room) .nav .cta{margin-top:14px;text-align:center}
    :where(body.page-press-room) .pr-layout{grid-template-columns:1fr;gap:40px}
    :where(body.page-press-room) .release{grid-template-columns:90px 1fr;gap:20px;padding:24px 22px}
    :where(body.page-press-room) .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    :where(body.page-press-room) .footer-brand{grid-column:1 / -1}
    :where(body.page-press-room) .footer-bottom{flex-direction:column;gap:16px}
  }
  @media (max-width: 560px){
    :where(body.page-press-room) .release{grid-template-columns:1fr;gap:16px}
    :where(body.page-press-room) .release-date{display:flex;justify-content:flex-start;gap:8px;align-items:baseline;text-align:left;padding:8px 12px}
    :where(body.page-press-room) .release-date .day{font-size:1.5rem}
    :where(body.page-press-room) .footer-grid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion: reduce){:where(body.page-press-room) *{transition:none !important}html{scroll-behavior:auto}}

/* ============================================================
   roster (1).html — scoped page styles
   ============================================================ */
/* ============================================================
           Brand tokens — same across all pages
           ============================================================ */
        body.page-roster {
            --white: #ffffff;
            --oat: #e8e9e0;
            --red: #ff0000;
            --blue: #0066cc;
            --black: #000000;
            --gold: #c7a962;

            --font-display: 'Archivo', 'Impact', sans-serif;
            --font-body: 'Inter', system-ui, sans-serif;

            --stripe: 12px;
        }

        :where(body.page-roster) *, :where(body.page-roster) *::before, :where(body.page-roster) *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body.page-roster {
            margin: 0;
            font-family: var(--font-body);
            color: var(--black);
            background: var(--oat);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        :where(body.page-roster) img { max-width: 100%; display: block; }
        :where(body.page-roster) button { font-family: inherit; cursor: pointer; }

        :where(body.page-roster) .stripe { display: flex; flex-direction: column; }
        :where(body.page-roster) .stripe > span { display: block; height: var(--stripe); }
        :where(body.page-roster) .stripe > span:nth-child(1) { background: var(--red); }
        :where(body.page-roster) .stripe > span:nth-child(2) { background: var(--white); }
        :where(body.page-roster) .stripe > span:nth-child(3) { background: var(--blue); }

        /* ============================================================
           Header
           ============================================================ */
        :where(body.page-roster) .site-header {
            background: var(--oat);
            padding: 1.25rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        :where(body.page-roster) .site-header__logo img { height: 56px; width: auto; }

        :where(body.page-roster) .site-nav {
            display: flex;
            gap: 2.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--blue);
        }

        :where(body.page-roster) .site-nav a {
            text-decoration: none;
            color: inherit;
            transition: color 0.15s ease;
        }

        :where(body.page-roster) .site-nav a:hover { color: var(--red); }
        :where(body.page-roster) .site-nav a.is-current { color: var(--red); }

        :where(body.page-roster) .buy-tickets-header {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 0.75rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-size: 0.95rem;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        :where(body.page-roster) .buy-tickets-header:hover { background: var(--blue); }

        /* ============================================================
           Page hero — typography-led, matches brand guide
           ============================================================ */
        :where(body.page-roster) .roster-hero {
            padding: 4rem 2.5rem 3rem;
            max-width: 1400px;
            margin: 0 auto;
            text-align: center;
        }

        :where(body.page-roster) .roster-hero__eyebrow {
            display: inline-block;
            font-family: var(--font-display);
            font-weight: 700;
            color: var(--red);
            letter-spacing: 0.25em;
            text-transform: uppercase;
            font-size: 0.9rem;
            margin: 0 0 1rem;
        }

        :where(body.page-roster) .roster-hero__title {
            font-family: var(--font-display);
            font-weight: 900;
            color: var(--blue);
            font-size: clamp(3rem, 8vw, 7rem);
            line-height: 0.85;
            letter-spacing: -0.005em;
            margin: 0 0 1.5rem;
            text-transform: uppercase;
        }

        :where(body.page-roster) .roster-hero__lede {
            font-size: 1.15rem;
            color: var(--black);
            max-width: 640px;
            margin: 0 auto 2rem;
            line-height: 1.55;
        }

        :where(body.page-roster) .roster-hero__stripe {
            width: 180px;
            margin: 0 auto;
        }

        /* ============================================================
           Filter tabs
           ============================================================ */
        :where(body.page-roster) .roster-filters {
            padding: 0 2.5rem 3rem;
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        :where(body.page-roster) .roster-filter {
            background: transparent;
            border: 2px solid var(--blue);
            color: var(--blue);
            padding: 0.6rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
            border-radius: 999px;
            transition: all 0.15s ease;
        }

        :where(body.page-roster) .roster-filter:hover {
            background: var(--blue);
            color: var(--white);
        }

        :where(body.page-roster) .roster-filter.is-active {
            background: var(--red);
            border-color: var(--red);
            color: var(--white);
        }

        /* ============================================================
           Roster grid + flip cards
           ============================================================ */
        :where(body.page-roster) .roster-grid {
            padding: 0 2.5rem 6rem;
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        /* Flip card — the whole thing
           Perspective on the outer container gives depth to the flip
           preserve-3d on the inner lets the front/back live in 3D space
           backface-visibility hides the "wrong" face during rotation */
        :where(body.page-roster) .player-card {
            perspective: 1200px;
            aspect-ratio: 3 / 4;
            cursor: pointer;
        }

        :where(body.page-roster) .player-card__inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
            transform-style: preserve-3d;
        }

        /* Flip on hover (desktop) or when .is-flipped is set (mobile tap) */
        :where(body.page-roster) .player-card:hover .player-card__inner,
        :where(body.page-roster) .player-card.is-flipped .player-card__inner {
            transform: rotateY(180deg);
        }

        :where(body.page-roster) .player-card__face {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: var(--white);
        }

        /* ============================================================
           Card FRONT — headshot on oat, name below
           ============================================================ */
        :where(body.page-roster) .player-card__front {
            background: var(--white);
        }

        :where(body.page-roster) .player-card__front::before {
            content: '';
            display: block;
            height: 6px;
            background: linear-gradient(
                to right,
                var(--red) 0%, var(--red) 33.33%,
                var(--white) 33.33%, var(--white) 66.66%,
                var(--blue) 66.66%, var(--blue) 100%
            );
        }

        :where(body.page-roster) .player-card__photo {
            flex: 1;
            background: var(--oat);
            position: relative;
            overflow: hidden;
        }

        :where(body.page-roster) .player-card__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
        }

        /* Big jersey number overlaid on the photo, top-right */
        :where(body.page-roster) .player-card__number {
            position: absolute;
            top: 0.75rem;
            right: 1rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 3.5rem;
            color: var(--blue);
            line-height: 0.9;
            letter-spacing: -0.02em;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
            pointer-events: none;
        }

        :where(body.page-roster) .player-card__meta {
            padding: 1.25rem 1.25rem 1.5rem;
            border-top: 2px solid var(--oat);
        }

        :where(body.page-roster) .player-card__name {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: var(--blue);
            margin: 0 0 0.25rem;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            line-height: 1;
        }

        :where(body.page-roster) .player-card__position {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.8rem;
            color: var(--red);
            margin: 0;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        /* ============================================================
           Card BACK — action shot with copy on top
           ============================================================ */
        :where(body.page-roster) .player-card__back {
            transform: rotateY(180deg);
            background: var(--blue);
            color: var(--white);
        }

        :where(body.page-roster) .player-card__back-photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Dark scrim so copy reads over the photo */
        :where(body.page-roster) .player-card__back::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(0, 30, 90, 0.4) 0%,
                rgba(0, 30, 90, 0.7) 50%,
                rgba(0, 15, 45, 0.95) 100%
            );
        }

        :where(body.page-roster) .player-card__back-content {
            position: absolute;
            inset: 0;
            padding: 1.75rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            z-index: 2;
        }

        :where(body.page-roster) .player-card__back-name {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            margin: 0 0 0.25rem;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            line-height: 1;
        }

        :where(body.page-roster) .player-card__back-position {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.75rem;
            color: #ffd93d;
            margin: 0 0 1rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        :where(body.page-roster) .player-card__back-blurb {
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0 0 1.25rem;
            opacity: 0.95;
        }

        :where(body.page-roster) .player-card__back-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 0.75rem 1.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
            align-self: flex-start;
        }

        :where(body.page-roster) .player-card__back-cta:hover { background: var(--white); color: var(--blue); }

        /* ============================================================
           See the team in action band
           ============================================================ */
        :where(body.page-roster) .action-band {
            background: var(--blue);
            padding: 4rem 2.5rem;
            color: var(--white);
        }

        :where(body.page-roster) .action-band__inner {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 3rem;
            align-items: center;
        }

        :where(body.page-roster) .action-band__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(2rem, 4vw, 3.5rem);
            margin: 0 0 0.5rem;
            letter-spacing: -0.005em;
            line-height: 0.9;
            text-transform: uppercase;
        }

        :where(body.page-roster) .action-band__lede {
            font-size: 1.1rem;
            margin: 0;
            opacity: 0.9;
            max-width: 500px;
        }

        :where(body.page-roster) .action-band__cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 1.15rem 2.5rem;
            border: none;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.15rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
            flex-shrink: 0;
        }

        :where(body.page-roster) .action-band__cta:hover { background: var(--white); color: var(--blue); }

        /* ============================================================
           Footer
           ============================================================ */
        :where(body.page-roster) .site-footer {
            background: var(--black);
            color: rgba(255, 255, 255, 0.7);
            padding: 3rem 2.5rem 2rem;
            text-align: center;
            font-size: 0.85rem;
        }

        :where(body.page-roster) .site-footer__logo {
            margin: 0 auto 1.5rem;
            max-width: 200px;
        }

        :where(body.page-roster) .site-footer p { margin: 0.5rem 0; }

        /* ============================================================
           Responsive
           ============================================================ */
        @media (max-width: 1024px) {
            :where(body.page-roster) .roster-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            :where(body.page-roster) .action-band__inner {
                grid-template-columns: 1fr;
                text-align: center;
            }

            :where(body.page-roster) .action-band__cta { justify-self: center; }
        }

        @media (max-width: 768px) {
            :where(body.page-roster) .roster-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
        }

        @media (max-width: 640px) {
            :where(body.page-roster) .site-header { padding: 1rem 1.25rem; }
            :where(body.page-roster) .site-nav { display: none; }
            :where(body.page-roster) .site-header__logo img { height: 40px; }

            :where(body.page-roster) .roster-hero, :where(body.page-roster) .roster-filters, :where(body.page-roster) .roster-grid,
            :where(body.page-roster) .action-band {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }

            :where(body.page-roster) .roster-filter {
                font-size: 0.8rem;
                padding: 0.5rem 1rem;
            }

            :where(body.page-roster) .player-card__number { font-size: 2.75rem; }
            :where(body.page-roster) .player-card__name { font-size: 1.25rem; }
        }

        /* Reduce motion: honor system preference */
        @media (prefers-reduced-motion: reduce) {
            :where(body.page-roster) .player-card__inner { transition: none; }
        }

/* ============================================================
   search (1).html — scoped page styles
   ============================================================ */
body.page-search{
    --white:#FFFFFF;--oat:#E8E9E0;--red:#FF0000;--blue:#0066CC;
    --black:#000000;--gold:#C7A962;--oat-shade:#dbdcd2;
  }
  :where(body.page-search) *,:where(body.page-search) *::before,:where(body.page-search) *::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body.page-search{margin:0;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--black);background:var(--oat);line-height:1.55;-webkit-font-smoothing:antialiased}
  :where(body.page-search) img{max-width:100%;display:block}
  :where(body.page-search) a{color:var(--blue);text-decoration:none}
  :where(body.page-search) a:hover{text-decoration:underline}
  :where(body.page-search) h1,:where(body.page-search) h2,:where(body.page-search) h3,:where(body.page-search) h4{font-family:"Archivo",sans-serif;font-weight:900;font-stretch:75%;
    text-transform:uppercase;letter-spacing:-0.01em;line-height:0.95;margin:0;color:var(--blue)}
  :where(body.page-search) h1{font-size:clamp(2.5rem,6vw,4.5rem)}
  :where(body.page-search) h2{font-size:clamp(1.75rem,3vw,2.5rem)}
  :where(body.page-search) h3{font-size:1.25rem}
  :where(body.page-search) p{margin:0 0 1em}

  :where(body.page-search) .stripe{display:flex;flex-direction:column}
  :where(body.page-search) .stripe > span{display:block;height:12px}
  :where(body.page-search) .stripe > span:nth-child(1){background:var(--red)}
  :where(body.page-search) .stripe > span:nth-child(2){background:var(--white)}
  :where(body.page-search) .stripe > span:nth-child(3){background:var(--blue)}

  /* Header (shared) */
  :where(body.page-search) .header{background:var(--white);border-bottom:1px solid var(--oat-shade);position:sticky;top:0;z-index:50}
  :where(body.page-search) .header-inner{max-width:1400px;margin:0 auto;padding:14px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px}
  :where(body.page-search) .brand img{height:44px;width:auto;display:block}
  :where(body.page-search) .nav{display:flex;align-items:center;gap:28px}
  :where(body.page-search) .nav a{color:var(--black);font-weight:600;font-size:0.95rem;
    text-transform:uppercase;letter-spacing:0.03em}
  :where(body.page-search) .nav a:hover{color:var(--blue);text-decoration:none}
  :where(body.page-search) .nav .cta{background:var(--red);color:var(--white);padding:10px 20px;border-radius:2px;letter-spacing:0.05em}
  :where(body.page-search) .nav .cta:hover{background:#d90000;color:var(--white)}
  :where(body.page-search) .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--black)}
  :where(body.page-search) .nav-toggle svg{width:28px;height:28px}

  :where(body.page-search) .wrap{max-width:1400px;margin:0 auto;padding:0 28px}

  /* Hero — restrained, typography-forward */
  :where(body.page-search) .search-hero{background:var(--oat);padding:60px 0 40px}
  :where(body.page-search) .search-hero h1{margin-bottom:32px}
  :where(body.page-search) .search-form{max-width:820px;position:relative}
  :where(body.page-search) .search-input{
    width:100%;
    padding:22px 68px 22px 24px;
    font-family:"Inter",sans-serif;font-size:1.15rem;
    background:var(--white);
    border:2px solid var(--black);border-radius:2px;
    outline:none;color:var(--black);
  }
  :where(body.page-search) .search-input:focus{border-color:var(--blue)}
  :where(body.page-search) .search-btn{
    position:absolute;right:8px;top:50%;transform:translateY(-50%);
    width:52px;height:52px;
    background:var(--red);color:var(--white);
    border:0;border-radius:2px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  :where(body.page-search) .search-btn:hover{background:#d90000}
  :where(body.page-search) .search-btn svg{width:22px;height:22px;fill:currentColor}
  :where(body.page-search) .search-meta{
    margin-top:20px;font-size:0.95rem;color:#444;
  }
  :where(body.page-search) .search-meta strong{color:var(--black)}

  /* Filter tabs */
  :where(body.page-search) .filters{
    background:var(--oat);padding:0 0 32px;
    border-bottom:1px solid var(--oat-shade);
  }
  :where(body.page-search) .filter-tabs{
    display:flex;gap:6px;flex-wrap:wrap;
  }
  :where(body.page-search) .filter-tab{
    background:transparent;border:0;
    padding:12px 20px;border-radius:2px;
    font-family:"Inter",sans-serif;font-weight:600;
    font-size:0.9rem;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--black);cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
  }
  :where(body.page-search) .filter-tab:hover{background:var(--white)}
  :where(body.page-search) .filter-tab.active{background:var(--blue);color:var(--white)}
  :where(body.page-search) .filter-tab .count{
    display:inline-block;margin-left:6px;
    font-size:0.75rem;opacity:0.7;font-weight:500;
  }
  :where(body.page-search) .filter-tab.active .count{opacity:1}

  /* Results */
  :where(body.page-search) .results{padding:48px 0 100px}
  :where(body.page-search) .results-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  }
  :where(body.page-search) .result-card{
    background:var(--white);border-radius:4px;overflow:hidden;
    display:flex;flex-direction:column;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  :where(body.page-search) .result-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.1)}
  :where(body.page-search) .result-image{aspect-ratio:16/9;background:var(--oat);overflow:hidden;position:relative}
  :where(body.page-search) .result-image img{width:100%;height:100%;object-fit:cover}
  :where(body.page-search) .result-type{
    position:absolute;top:12px;left:12px;
    background:var(--black);color:var(--white);
    padding:5px 10px;border-radius:2px;
    font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;font-weight:700;
  }
  :where(body.page-search) .result-type.game{background:var(--red)}
  :where(body.page-search) .result-type.player{background:var(--blue)}
  :where(body.page-search) .result-type.video{background:var(--black)}
  :where(body.page-search) .result-type.article{background:#666}
  :where(body.page-search) .result-body{padding:20px 22px;flex:1;display:flex;flex-direction:column}
  :where(body.page-search) .result-body h3{font-family:"Archivo",sans-serif;font-weight:900;font-stretch:75%;
    text-transform:uppercase;color:var(--blue);margin-bottom:10px;font-size:1.2rem;line-height:1}
  :where(body.page-search) .result-body .meta{
    font-size:0.85rem;color:#666;margin-bottom:12px;
    text-transform:uppercase;letter-spacing:0.05em;
  }
  :where(body.page-search) .result-body .excerpt{font-size:0.95rem;margin:0;flex:1}
  :where(body.page-search) .result-body .link{
    margin-top:16px;font-weight:700;text-transform:uppercase;
    letter-spacing:0.08em;font-size:0.8rem;color:var(--blue);
  }
  :where(body.page-search) .result-body .link::after{content:" →";transition:transform 0.15s ease;display:inline-block}
  :where(body.page-search) .result-body .link:hover::after{transform:translateX(4px)}

  /* Empty state */
  :where(body.page-search) .empty{
    grid-column:1 / -1;
    text-align:center;padding:80px 20px;
    background:var(--white);border-radius:4px;
  }
  :where(body.page-search) .empty h2{color:var(--black);margin-bottom:12px}
  :where(body.page-search) .empty p{max-width:52ch;margin:0 auto 24px;color:#555}
  :where(body.page-search) .empty .btn{
    background:var(--red);color:var(--white);padding:14px 28px;
    text-transform:uppercase;letter-spacing:0.08em;font-weight:700;
    font-size:0.9rem;border-radius:2px;
  }
  :where(body.page-search) .empty .btn:hover{background:#d90000;color:var(--white);text-decoration:none}

  /* Footer */
  :where(body.page-search) .footer{background:var(--black);color:var(--white);padding:60px 0 40px}
  :where(body.page-search) .footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;margin-bottom:48px}
  :where(body.page-search) .footer-brand img{height:40px;margin-bottom:20px;filter:brightness(0) invert(1)}
  :where(body.page-search) .footer-brand p{opacity:0.75;font-size:0.9rem;max-width:36ch}
  :where(body.page-search) .footer h4{color:var(--white);font-family:"Archivo",sans-serif;
    text-transform:uppercase;font-weight:900;font-stretch:75%;font-size:1.05rem;margin-bottom:16px}
  :where(body.page-search) .footer ul{list-style:none;padding:0;margin:0}
  :where(body.page-search) .footer li{margin-bottom:10px}
  :where(body.page-search) .footer li a{color:var(--white);opacity:0.75;font-size:0.9rem}
  :where(body.page-search) .footer li a:hover{opacity:1;text-decoration:none;color:var(--white)}
  :where(body.page-search) .footer-bottom{display:flex;justify-content:space-between;align-items:center;
    padding-top:28px;border-top:1px solid rgba(255,255,255,0.15);font-size:0.85rem;opacity:0.7}
  :where(body.page-search) .socials{display:flex;gap:14px}
  :where(body.page-search) .socials a{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;background:rgba(255,255,255,0.08);border-radius:50%;
    color:var(--white);opacity:1;transition:background 0.15s ease}
  :where(body.page-search) .socials a:hover{background:var(--red)}
  :where(body.page-search) .socials svg{width:16px;height:16px;fill:currentColor}

  @media (max-width: 960px){
    :where(body.page-search) .nav-toggle{display:block}
    :where(body.page-search) .nav{display:none;position:absolute;top:100%;left:0;right:0;
      background:var(--white);flex-direction:column;align-items:stretch;
      padding:20px 28px;gap:0;border-bottom:1px solid var(--oat-shade)}
    :where(body.page-search) .nav.open{display:flex}
    :where(body.page-search) .nav a{padding:14px 0;border-bottom:1px solid var(--oat-shade)}
    :where(body.page-search) .nav .cta{margin-top:14px;text-align:center}
    :where(body.page-search) .results-grid{grid-template-columns:repeat(2,1fr)}
    :where(body.page-search) .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    :where(body.page-search) .footer-brand{grid-column:1 / -1}
    :where(body.page-search) .footer-bottom{flex-direction:column;gap:16px}
  }
  @media (max-width: 640px){
    :where(body.page-search) .results-grid{grid-template-columns:1fr}
    :where(body.page-search) .footer-grid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion: reduce){:where(body.page-search) *{transition:none !important}html{scroll-behavior:auto}}

/* ============================================================
   tour-dates(1).html — scoped page styles
   ============================================================ */
/* ============================================================
           Brand tokens — same as homepage
           ============================================================ */
        body.page-tour-dates {
            --white: #ffffff;
            --oat: #e8e9e0;
            --red: #ff0000;
            --blue: #0066cc;
            --black: #000000;
            --gold: #c7a962;

            --font-display: 'Archivo', 'Impact', sans-serif;
            --font-body: 'Inter', system-ui, sans-serif;

            --stripe: 12px;
        }

        :where(body.page-tour-dates) *, :where(body.page-tour-dates) *::before, :where(body.page-tour-dates) *::after { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body.page-tour-dates {
            margin: 0;
            font-family: var(--font-body);
            color: var(--black);
            background: var(--oat);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        :where(body.page-tour-dates) img { max-width: 100%; display: block; }
        :where(body.page-tour-dates) button { font-family: inherit; cursor: pointer; }

        /* Utility stripe */
        :where(body.page-tour-dates) .stripe { display: flex; flex-direction: column; }
        :where(body.page-tour-dates) .stripe > span { display: block; height: var(--stripe); }
        :where(body.page-tour-dates) .stripe > span:nth-child(1) { background: var(--red); }
        :where(body.page-tour-dates) .stripe > span:nth-child(2) { background: var(--white); }
        :where(body.page-tour-dates) .stripe > span:nth-child(3) { background: var(--blue); }

        /* ============================================================
           Header — matches homepage
           ============================================================ */
        :where(body.page-tour-dates) .site-header {
            background: var(--oat);
            padding: 1.25rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        :where(body.page-tour-dates) .site-header__logo img { height: 56px; width: auto; }

        :where(body.page-tour-dates) .site-nav {
            display: flex;
            gap: 2.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--blue);
        }

        :where(body.page-tour-dates) .site-nav a {
            text-decoration: none;
            color: inherit;
            transition: color 0.15s ease;
        }

        :where(body.page-tour-dates) .site-nav a:hover { color: var(--red); }
        :where(body.page-tour-dates) .site-nav a.is-current { color: var(--red); }

        :where(body.page-tour-dates) .buy-tickets-header {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 0.75rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-size: 0.95rem;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        :where(body.page-tour-dates) .buy-tickets-header:hover { background: var(--blue); }

        /* ============================================================
           Page hero — much smaller than homepage hero
           Just enough to orient + house the nearest-show card
           ============================================================ */
        :where(body.page-tour-dates) .page-hero {
            padding: 3rem 2.5rem 2rem;
            max-width: 1600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 3rem;
            align-items: end;
        }

        :where(body.page-tour-dates) .page-hero__eyebrow {
            font-family: var(--font-display);
            font-weight: 700;
            color: var(--blue);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-size: 0.85rem;
            margin: 0 0 0.75rem;
        }

        :where(body.page-tour-dates) .page-hero__title {
            font-family: var(--font-display);
            font-weight: 900;
            color: var(--blue);
            font-size: clamp(3rem, 6vw, 5.5rem);
            line-height: 0.9;
            letter-spacing: -0.005em;
            margin: 0 0 1rem;
            text-transform: uppercase;
        }

        :where(body.page-tour-dates) .page-hero__lede {
            font-size: 1.1rem;
            color: var(--black);
            max-width: 540px;
            margin: 0;
            line-height: 1.55;
        }

        /* ============================================================
           Nearest show card — compact variant for the page hero
           ============================================================ */
        :where(body.page-tour-dates) .nearest-show {
            background: var(--white);
            color: var(--black);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }

        :where(body.page-tour-dates) .nearest-show::before {
            content: '';
            display: block;
            height: 6px;
            background: linear-gradient(
                to right,
                var(--red) 0%, var(--red) 33.33%,
                var(--white) 33.33%, var(--white) 66.66%,
                var(--blue) 66.66%, var(--blue) 100%
            );
        }

        :where(body.page-tour-dates) .nearest-show__inner { padding: 1.5rem; }

        :where(body.page-tour-dates) .nearest-show__eyebrow {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--red);
            margin: 0 0 0.5rem;
        }

        :where(body.page-tour-dates) .nearest-show__city {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 2rem;
            line-height: 0.9;
            color: var(--blue);
            margin: 0 0 0.25rem;
            letter-spacing: -0.01em;
            text-transform: uppercase;
        }

        :where(body.page-tour-dates) .nearest-show__venue {
            color: var(--black);
            font-weight: 600;
            font-size: 0.9rem;
            margin: 0 0 1rem;
        }

        :where(body.page-tour-dates) .nearest-show__when {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-top: 1px solid var(--oat);
            border-bottom: 1px solid var(--oat);
            margin-bottom: 1rem;
        }

        :where(body.page-tour-dates) .nearest-show__when-value {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1rem;
            color: var(--blue);
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }

        :where(body.page-tour-dates) .nearest-show__cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 0.85rem;
            border: none;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.95rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            width: 100%;
            transition: background 0.15s ease;
        }

        :where(body.page-tour-dates) .nearest-show__cta:hover { background: var(--blue); }

        /* States — collapsed for space; full logic still works */
        :where(body.page-tour-dates) .nearest-show__default {
            font-size: 0.9rem;
            color: var(--black);
            opacity: 0.7;
            margin: 0;
            text-align: center;
        }

        /* ============================================================
           Find games bar — search + date filter row
           ============================================================ */
        :where(body.page-tour-dates) .find-games {
            background: var(--blue);
            padding: 1.5rem 2.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            color: var(--white);
            flex-wrap: wrap;
        }

        :where(body.page-tour-dates) .find-games__label {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.95rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-right: 0.5rem;
        }

        :where(body.page-tour-dates) .find-games__input {
            flex: 1;
            min-width: 240px;
            padding: 0.75rem 1rem;
            border: none;
            font-size: 1rem;
            font-family: inherit;
            background: var(--white);
            color: var(--black);
        }

        :where(body.page-tour-dates) .find-games__input::placeholder { color: rgba(0, 0, 0, 0.5); }

        :where(body.page-tour-dates) .find-games__select {
            padding: 0.75rem 1rem;
            border: none;
            font-size: 1rem;
            font-family: inherit;
            background: var(--white);
            color: var(--black);
            min-width: 180px;
        }

        :where(body.page-tour-dates) .find-games__reset {
            background: transparent;
            border: 2px solid var(--white);
            color: var(--white);
            padding: 0.65rem 1.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-size: 0.85rem;
            transition: all 0.15s ease;
            margin-left: auto;
        }

        :where(body.page-tour-dates) .find-games__reset:hover {
            background: var(--white);
            color: var(--blue);
        }

        /* ============================================================
           Region filter tabs (ALL / USA / CANADA / etc)
           ============================================================ */
        :where(body.page-tour-dates) .region-filters {
            background: var(--oat);
            padding: 1.5rem 2.5rem;
            border-bottom: 2px solid rgba(0, 0, 0, 0.06);
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        :where(body.page-tour-dates) .region-filter {
            background: transparent;
            border: 2px solid var(--blue);
            color: var(--blue);
            padding: 0.6rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
            border-radius: 999px;
            transition: all 0.15s ease;
        }

        :where(body.page-tour-dates) .region-filter:hover {
            background: var(--blue);
            color: var(--white);
        }

        :where(body.page-tour-dates) .region-filter.is-active {
            background: var(--red);
            border-color: var(--red);
            color: var(--white);
        }

        /* ============================================================
           Games list
           ============================================================ */
        :where(body.page-tour-dates) .games-section {
            padding: 3rem 2.5rem 5rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        :where(body.page-tour-dates) .games-section__header {
            display: flex;
            align-items: baseline;
            gap: 1rem;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        }

        :where(body.page-tour-dates) .games-section__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            color: var(--blue);
            margin: 0;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        :where(body.page-tour-dates) .games-section__count {
            font-family: var(--font-display);
            font-weight: 700;
            color: var(--red);
            font-size: 1.1rem;
        }

        :where(body.page-tour-dates) .games-list {
            display: flex;
            flex-direction: column;
        }

        /* ============================================================
           Game row — the meat of the page
           Grid: [date] [flag] [city/venue] [time] [badge] [cta]
           ============================================================ */
        :where(body.page-tour-dates) .game-row {
            display: grid;
            grid-template-columns: 80px 40px 1fr 140px 220px 160px;
            align-items: center;
            gap: 1.5rem;
            padding: 1.25rem 1rem;
            background: var(--white);
            border-bottom: 1px solid var(--oat);
            transition: background 0.15s ease;
        }

        :where(body.page-tour-dates) .game-row:hover { background: #faf9f5; }

        :where(body.page-tour-dates) .game-row:first-child { border-top: 4px solid var(--blue); }

        /* Date block — big month/day, small day-of-week */
        :where(body.page-tour-dates) .game-row__date {
            background: var(--blue);
            color: var(--white);
            text-align: center;
            padding: 0.5rem;
            width: 70px;
        }

        :where(body.page-tour-dates) .game-row__date-mo {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.8rem;
            letter-spacing: 0.1em;
            display: block;
            line-height: 1;
        }

        :where(body.page-tour-dates) .game-row__date-day {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            display: block;
            line-height: 1;
            margin: 0.25rem 0;
        }

        :where(body.page-tour-dates) .game-row__date-dow {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            display: block;
            line-height: 1;
            opacity: 0.85;
        }

        /* Flag — country indicator */
        /* Was a flag emoji. Emoji are barred by the project's design
           principles and render inconsistently across platforms, so the
           country reads as a typographic code instead. */
        :where(body.page-tour-dates) .game-row__flag {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.78rem;
            letter-spacing: 0.1em;
            color: var(--blue);
            opacity: 0.75;
            text-align: center;
        }

        /* Location — city + venue + address */
        :where(body.page-tour-dates) .game-row__location { min-width: 0; }

        :where(body.page-tour-dates) .game-row__city {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.35rem;
            color: var(--blue);
            margin: 0 0 0.15rem;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            line-height: 1;
        }

        :where(body.page-tour-dates) .game-row__venue {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--black);
            margin: 0 0 0.15rem;
        }

        :where(body.page-tour-dates) .game-row__address {
            font-size: 0.8rem;
            color: var(--black);
            opacity: 0.6;
            margin: 0;
        }

        /* Time block */
        :where(body.page-tour-dates) .game-row__time-block {
            font-size: 0.9rem;
            color: var(--black);
        }

        :where(body.page-tour-dates) .game-row__time {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.15rem;
            color: var(--black);
            margin: 0 0 0.15rem;
            letter-spacing: 0.02em;
        }

        :where(body.page-tour-dates) .game-row__doors {
            font-size: 0.8rem;
            opacity: 0.6;
            margin: 0;
        }

        /* Deals/offers badge column */
        :where(body.page-tour-dates) .game-row__badges {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            min-width: 0;
        }

        :where(body.page-tour-dates) .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.65rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            line-height: 1.2;
        }

        :where(body.page-tour-dates) .badge--featured {
            background: var(--red);
            color: var(--white);
        }

        :where(body.page-tour-dates) .badge--family {
            background: var(--blue);
            color: var(--white);
        }

        :where(body.page-tour-dates) .badge--military {
            background: #2b3a52;
            color: var(--white);
        }

        :where(body.page-tour-dates) .badge--international {
            background: var(--gold);
            color: var(--white);
        }

        :where(body.page-tour-dates) .badge--presale {
            background: var(--black);
            color: var(--gold);
        }

        :where(body.page-tour-dates) .badge--bogo {
            background: var(--white);
            color: var(--red);
            border: 2px solid var(--red);
        }

        /* Buy tickets column */
        :where(body.page-tour-dates) .game-row__cta-col {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            align-items: stretch;
        }

        :where(body.page-tour-dates) .game-row__cta {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 0.75rem 1rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
            text-decoration: none;
            text-align: center;
            transition: background 0.15s ease;
        }

        :where(body.page-tour-dates) .game-row__cta:hover { background: var(--blue); }

        :where(body.page-tour-dates) .game-row__availability {
            font-size: 0.75rem;
            color: #167a3a;
            font-weight: 600;
            text-align: center;
        }

        :where(body.page-tour-dates) .game-row__availability--low {
            color: #c67c00;
        }

        :where(body.page-tour-dates) .game-row__availability--sold {
            color: var(--black);
            opacity: 0.5;
        }

        /* Show more button */
        :where(body.page-tour-dates) .show-more {
            text-align: center;
            margin-top: 2rem;
        }

        :where(body.page-tour-dates) .show-more__btn {
            background: transparent;
            border: 2px solid var(--blue);
            color: var(--blue);
            padding: 1rem 2.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-size: 1rem;
            transition: all 0.15s ease;
        }

        :where(body.page-tour-dates) .show-more__btn:hover {
            background: var(--blue);
            color: var(--white);
        }

        :where(body.page-tour-dates) .show-more__count {
            display: block;
            margin-top: 0.5rem;
            font-size: 0.85rem;
            color: var(--black);
            opacity: 0.6;
        }

        /* Empty state */
        :where(body.page-tour-dates) .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            background: var(--white);
        }

        :where(body.page-tour-dates) .empty-state__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }

        :where(body.page-tour-dates) .empty-state__body {
            color: var(--black);
            opacity: 0.7;
            margin: 0 0 1.5rem;
        }

        /* ============================================================
           Footer
           ============================================================ */
        :where(body.page-tour-dates) .site-footer {
            background: var(--black);
            color: rgba(255, 255, 255, 0.7);
            padding: 3rem 2.5rem 2rem;
            text-align: center;
            font-size: 0.85rem;
        }

        :where(body.page-tour-dates) .site-footer__logo {
            margin: 0 auto 1.5rem;
            max-width: 200px;
        }

        :where(body.page-tour-dates) .site-footer p { margin: 0.5rem 0; }

        /* ============================================================
           Responsive
           ============================================================ */
        @media (max-width: 1200px) {
            :where(body.page-tour-dates) .game-row {
                grid-template-columns: 70px 32px 1fr 120px 180px 140px;
                gap: 1rem;
            }
        }

        @media (max-width: 1024px) {
            :where(body.page-tour-dates) .page-hero {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            :where(body.page-tour-dates) .game-row {
                grid-template-columns: 70px 1fr;
                grid-template-areas:
                    "date location"
                    "date time"
                    "badges badges"
                    "cta cta";
                gap: 0.75rem;
                padding: 1.25rem;
            }

            :where(body.page-tour-dates) .game-row__date { grid-area: date; }
            :where(body.page-tour-dates) .game-row__flag { display: none; }
            :where(body.page-tour-dates) .game-row__location { grid-area: location; }
            :where(body.page-tour-dates) .game-row__time-block { grid-area: time; }
            :where(body.page-tour-dates) .game-row__badges {
                grid-area: badges;
                flex-direction: row;
                flex-wrap: wrap;
            }
            :where(body.page-tour-dates) .game-row__cta-col { grid-area: cta; }
        }

        @media (max-width: 640px) {
            :where(body.page-tour-dates) .site-header { padding: 1rem 1.25rem; }
            :where(body.page-tour-dates) .site-nav { display: none; }
            :where(body.page-tour-dates) .site-header__logo img { height: 40px; }

            :where(body.page-tour-dates) .page-hero { padding: 2rem 1.25rem; }
            :where(body.page-tour-dates) .find-games, :where(body.page-tour-dates) .region-filters { padding: 1rem 1.25rem; }
            :where(body.page-tour-dates) .games-section { padding: 2rem 1.25rem 3rem; }

            :where(body.page-tour-dates) .find-games { flex-direction: column; align-items: stretch; }
            :where(body.page-tour-dates) .find-games__reset { margin-left: 0; }

            :where(body.page-tour-dates) .region-filter {
                font-size: 0.8rem;
                padding: 0.5rem 1rem;
            }
        }

/* ============================================================
   watch (1).html — scoped page styles
   ============================================================ */
/* ============================================================
           Brand tokens — same as other pages
           ============================================================ */
        body.page-watch {
            --white: #ffffff;
            --oat: #e8e9e0;
            --red: #ff0000;
            --blue: #0066cc;
            --black: #000000;
            --gold: #c7a962;

            --font-display: 'Archivo', 'Impact', sans-serif;
            --font-body: 'Inter', system-ui, sans-serif;

            --stripe: 12px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body.page-watch {
            margin: 0;
            font-family: var(--font-body);
            color: var(--black);
            background: var(--oat);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        img, video { max-width: 100%; display: block; }
        button { font-family: inherit; cursor: pointer; }

        .stripe { display: flex; flex-direction: column; }
        .stripe > span { display: block; height: var(--stripe); }
        .stripe > span:nth-child(1) { background: var(--red); }
        .stripe > span:nth-child(2) { background: var(--white); }
        .stripe > span:nth-child(3) { background: var(--blue); }

        /* ============================================================
           Header
           ============================================================ */
        .site-header {
            background: var(--oat);
            padding: 1.25rem 2.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .site-header__logo img { height: 56px; width: auto; }

        .site-nav {
            display: flex;
            gap: 2.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--blue);
        }

        .site-nav a {
            text-decoration: none;
            color: inherit;
            transition: color 0.15s ease;
        }

        .site-nav a:hover { color: var(--red); }
        .site-nav a.is-current { color: var(--red); }

        .buy-tickets-header {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 0.75rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-size: 0.95rem;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        .buy-tickets-header:hover { background: var(--blue); }

        /* ============================================================
           Hero — background video with copy overlay
           ============================================================ */
        .watch-hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            padding: 4rem 2.5rem;
            color: var(--white);
            overflow: hidden;
            background: var(--black);
        }

        .watch-hero__video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        /* Scrim so copy reads over the video */
        .watch-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                90deg,
                rgba(0, 15, 45, 0.85) 0%,
                rgba(0, 15, 45, 0.6) 50%,
                rgba(0, 15, 45, 0.2) 100%
            );
            z-index: 2;
        }

        .watch-hero__inner {
            position: relative;
            z-index: 3;
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
        }

        .watch-hero__copy {
            max-width: 640px;
        }

        .watch-hero__eyebrow {
            display: inline-block;
            font-family: var(--font-display);
            font-weight: 700;
            color: #ffd93d;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            font-size: 0.9rem;
            margin: 0 0 1rem;
        }

        .watch-hero__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(3rem, 7vw, 6rem);
            line-height: 0.85;
            letter-spacing: -0.005em;
            margin: 0 0 1.5rem;
            text-transform: uppercase;
        }

        .watch-hero__title .accent { color: var(--red); }

        .watch-hero__lede {
            font-size: 1.15rem;
            margin: 0 0 2rem;
            line-height: 1.55;
            opacity: 0.95;
            max-width: 540px;
        }

        .watch-hero__ctas {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 1.1rem 2rem;
            border: none;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.05rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        .btn-primary:hover { background: var(--blue); }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: transparent;
            color: var(--white);
            padding: 1.1rem 2rem;
            border: 2px solid var(--white);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.05rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.15s ease;
        }

        .btn-secondary:hover {
            background: var(--white);
            color: var(--blue);
        }

        /* YouTube play icon inside primary CTA */
        .youtube-icon {
            width: 22px;
            height: 22px;
            fill: currentColor;
        }

        /* ============================================================
           Section shared bits
           ============================================================ */
        .section-eyebrow {
            font-family: var(--font-display);
            font-weight: 900;
            color: var(--red);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-size: 0.9rem;
            text-align: center;
            margin: 0 0 1rem;
        }

        .section-title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(2rem, 4.5vw, 3.5rem);
            color: var(--blue);
            text-align: center;
            margin: 0 0 1rem;
            letter-spacing: -0.005em;
            line-height: 0.95;
            text-transform: uppercase;
        }

        .section-lede {
            text-align: center;
            font-size: 1rem;
            color: var(--black);
            opacity: 0.75;
            margin: 0 auto 3rem;
            max-width: 560px;
        }

        /* ============================================================
           Series cards
           ============================================================ */
        .series {
            padding: 6rem 2.5rem;
            background: var(--oat);
        }

        .series__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        .series__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .series-card {
            background: var(--white);
            overflow: hidden;
            text-decoration: none;
            color: var(--black);
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border-top: 6px solid var(--red);
        }

        .series-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .series-card__poster {
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: var(--blue);
            position: relative;
        }

        .series-card__poster img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .series-card:hover .series-card__poster img {
            transform: scale(1.03);
        }

        .series-card__badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: var(--red);
            color: var(--white);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.7rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            padding: 0.35rem 0.75rem;
            z-index: 2;
        }

        .series-card__body {
            padding: 1.75rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .series-card__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            line-height: 1;
        }

        .series-card__meta {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.8rem;
            color: var(--red);
            margin: 0 0 1rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        .series-card__desc {
            color: var(--black);
            font-size: 0.95rem;
            line-height: 1.55;
            margin: 0 0 1.5rem;
            flex: 1;
        }

        .series-card__cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 0.9rem 1.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.9rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
            align-self: stretch;
            text-align: center;
        }

        .series-card__cta:hover { background: var(--blue); }

        /* ============================================================
           Where To Watch — platform cards / generalize pages
           ============================================================ */
        .platforms {
            padding: 6rem 2.5rem;
            background: var(--white);
        }

        .platforms__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        .platforms__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .platform-card {
            border: 2px solid var(--oat);
            padding: 2rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.15s ease;
        }

        .platform-card:hover {
            border-color: var(--blue);
            transform: translateY(-2px);
        }

        .platform-card__logo {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .platform-card__logo svg {
            height: 100%;
            width: auto;
        }

        .platform-card__name {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.25rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .platform-card__desc {
            color: var(--black);
            opacity: 0.8;
            font-size: 0.9rem;
            margin: 0 0 1.5rem;
            line-height: 1.5;
            flex: 1;
        }

        .platform-card__cta {
            background: transparent;
            border: 2px solid var(--red);
            color: var(--red);
            padding: 0.75rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .platform-card__cta:hover {
            background: var(--red);
            color: var(--white);
        }

        /* External link icon */
        .external-icon {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }

        /* ============================================================
           Follow us for more — social
           ============================================================ */
        .follow {
            padding: 5rem 2.5rem;
            background: var(--oat);
        }

        .follow__inner {
            max-width: 1200px;
            margin: 0 auto;
        }

        .follow__grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .social-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            padding: 1.5rem 1rem;
            background: var(--white);
            text-decoration: none;
            color: var(--blue);
            transition: all 0.15s ease;
        }

        .social-card:hover {
            background: var(--blue);
            color: var(--white);
        }

        .social-card__icon {
            width: 32px;
            height: 32px;
            fill: currentColor;
        }

        .social-card__name {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .follow__all {
            text-align: center;
        }

        .follow__all a {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: transparent;
            border: 2px solid var(--blue);
            color: var(--blue);
            padding: 0.85rem 2rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.9rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.15s ease;
        }

        .follow__all a:hover {
            background: var(--blue);
            color: var(--white);
        }

        /* ============================================================
           Never miss an episode — email signup band
           ============================================================ */
        .signup-band {
            background: var(--blue);
            padding: 4rem 2.5rem;
            color: var(--white);
        }

        .signup-band__inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .signup-band__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(2rem, 3.5vw, 3rem);
            margin: 0 0 0.5rem;
            letter-spacing: -0.005em;
            line-height: 0.9;
            text-transform: uppercase;
        }

        .signup-band__lede {
            font-size: 1rem;
            margin: 0;
            opacity: 0.9;
        }

        .signup-band__form {
            display: flex;
            gap: 0.5rem;
        }

        .signup-band__input {
            flex: 1;
            padding: 1rem 1.25rem;
            border: none;
            font-size: 1rem;
            font-family: inherit;
            background: var(--white);
            color: var(--black);
        }

        .signup-band__submit {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 1rem 1.75rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.95rem;
            transition: background 0.15s ease;
        }

        .signup-band__submit:hover { background: var(--black); }

        /* ============================================================
           See them live band — nearest-show reprise
           ============================================================ */
        .live-band {
            background: var(--white);
            padding: 3rem 2.5rem;
            border-top: 4px solid var(--red);
        }

        .live-band__inner {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr auto auto auto;
            gap: 2rem;
            align-items: center;
        }

        .live-band__title-block {
            padding-right: 2rem;
            border-right: 2px solid var(--oat);
        }

        .live-band__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            color: var(--red);
            margin: 0 0 0.25rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            line-height: 1;
        }

        .live-band__subtitle {
            font-size: 0.95rem;
            color: var(--black);
            opacity: 0.75;
            margin: 0;
        }

        .live-band__where {
            text-align: left;
        }

        .live-band__where-label {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.7rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--red);
            margin: 0 0 0.25rem;
        }

        .live-band__where-city {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: var(--blue);
            margin: 0;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            line-height: 1;
        }

        .live-band__where-venue {
            font-size: 0.85rem;
            color: var(--gold);
            margin: 0.15rem 0 0;
            font-weight: 600;
        }

        .live-band__when {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1rem;
            color: var(--blue);
            letter-spacing: 0.02em;
        }

        .live-band__cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 1rem 2rem;
            border: none;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        .live-band__cta:hover { background: var(--blue); }

        /* ============================================================
           Footer
           ============================================================ */
        .site-footer {
            background: var(--black);
            color: rgba(255, 255, 255, 0.7);
            padding: 3rem 2.5rem 2rem;
            text-align: center;
            font-size: 0.85rem;
        }

        .site-footer__logo {
            margin: 0 auto 1.5rem;
            max-width: 200px;
        }

        .site-footer p { margin: 0.5rem 0; }

        /* ============================================================
           Responsive
           ============================================================ */
        @media (max-width: 1024px) {
            .series__grid,
            .platforms__grid {
                grid-template-columns: 1fr;
                max-width: 500px;
                margin: 0 auto;
            }

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

            .signup-band__inner {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .live-band__inner {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                text-align: center;
            }

            .live-band__title-block {
                padding-right: 0;
                border-right: none;
                padding-bottom: 1.5rem;
                border-bottom: 2px solid var(--oat);
            }
        }

        @media (max-width: 640px) {
            .site-header { padding: 1rem 1.25rem; }
            .site-nav { display: none; }
            .site-header__logo img { height: 40px; }

            .watch-hero { padding: 3rem 1.25rem; }
            .watch-hero__ctas { flex-direction: column; align-items: stretch; }

            .series, .platforms, .follow,
            .signup-band, .live-band {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }

            .follow__grid { grid-template-columns: repeat(2, 1fr); }
            .signup-band__form { flex-direction: column; }
        }
}

@layer system {
/* Harlem Globetrotters shared UI system
   Homepage is the visual source of truth for navigation, actions, and cards. */

:root {
    --white: #ffffff;
    --oat: #e8e9e0;
    --red: #ff0000;
    --blue: #0066cc;
    --black: #000000;
    --gold: #c7a962;
    --red-deep: #cc0000;
    --blue-deep: #0052a3;
    --font-display: 'Archivo', 'Impact', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --card-radius: 12px;
    --act-lift: 3px;
    --ease-nudge: cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

/* Shared navigation */
.site-header {
    background: var(--oat);
    padding: 1.25rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-header__logo img {
    height: 56px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--blue);
}

.site-nav a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav a.is-current,
.site-nav a[aria-current='page'] {
    color: var(--red);
    text-decoration: none;
}

/* Shared action foundation */
.act,
.btn,
.btn-primary,
.btn-secondary,
.buy-tickets-header,
.event-hero__cta,
.nearest-show__cta,
.closest-alt__cta,
.game-row__cta,
.show-more__btn,
.find-games__reset,
.modal__submit,
.signup-band__submit,
.live-band__cta,
.action-band__cta,
.search-btn,
.empty .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    position: relative;
    isolation: isolate;
    font-family: var(--font-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.act__arrow {
    display: inline-block;
    transition: transform 0.25s var(--ease-nudge);
    will-change: transform;
}

/* Primary — ticketing and conversion */
.act--primary,
.btn-primary,
.buy-tickets-header,
.event-hero__cta,
.nearest-show__cta,
.game-row__cta,
.modal__submit,
.signup-band__submit,
.live-band__cta,
.action-band__cta,
.search-btn,
.empty .btn {
    background: var(--red);
    color: var(--white);
    padding: 1.05rem 2rem;
    font-size: 1.05rem;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 var(--act-lift) 0 var(--red-deep);
    transition: transform 0.18s var(--ease-nudge), box-shadow 0.18s var(--ease-nudge), background 0.18s ease, color 0.18s ease;
}

.buy-tickets-header {
    padding: 0.7rem 1.4rem;
    font-size: 0.9rem;
    flex: 0 0 auto;
}

/* The search control keeps the primary action's face while remaining
   centered inside its input field. */
.search-btn {
    padding: 0;
    border-radius: 999px;
}

.act--primary:hover,
.btn-primary:hover,
.buy-tickets-header:hover,
.event-hero__cta:hover,
.nearest-show__cta:hover,
.game-row__cta:hover,
.modal__submit:hover,
.signup-band__submit:hover,
.live-band__cta:hover,
.action-band__cta:hover,
.search-btn:hover,
.empty .btn:hover {
    background: #ff1a1a;
    color: var(--white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 calc(var(--act-lift) + 1px) 0 var(--red-deep);
}

.search-btn:hover {
    transform: translateY(calc(-50% - 1px));
}

.act--primary:hover .act__arrow,
.buy-tickets-header:hover .act__arrow {
    transform: translateX(5px);
}

.act--primary:active,
.btn-primary:active,
.buy-tickets-header:active,
.event-hero__cta:active,
.nearest-show__cta:active,
.game-row__cta:active,
.modal__submit:active,
.signup-band__submit:active,
.live-band__cta:active,
.action-band__cta:active,
.search-btn:active,
.empty .btn:active {
    background: var(--red-deep);
    color: rgba(255,255,255,0.82);
    transform: translateY(var(--act-lift));
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.28), 0 0 0 var(--red-deep);
    transition-duration: 0.06s;
}

.search-btn:active {
    transform: translateY(calc(-50% + var(--act-lift)));
}

.act--block { display: flex; width: 100%; }

/* Secondary — exploration and supporting actions */
.act--secondary,
.btn-secondary,
.show-more__btn,
.find-games__reset,
.closest-alt__cta {
    background: transparent;
    color: var(--blue);
    padding: 0.85rem 1.5rem;
    font-size: 0.92rem;
    border: 2px solid var(--blue);
    border-radius: 999px;
    overflow: hidden;
    transition: color 0.28s ease, transform 0.28s var(--ease-nudge), background 0.28s ease;
}

.act--secondary::before,
.btn-secondary::before,
.show-more__btn::before,
.find-games__reset::before,
.closest-alt__cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.act--secondary:hover,
.btn-secondary:hover,
.show-more__btn:hover,
.find-games__reset:hover,
.closest-alt__cta:hover {
    color: var(--white) !important;
    border-color: var(--blue) !important;
    text-decoration: none;
    transform: translateY(-2px);
}

.act--secondary:hover::before,
.btn-secondary:hover::before,
.show-more__btn:hover::before,
.find-games__reset:hover::before,
.closest-alt__cta:hover::before {
    transform: scaleX(1);
}

/* Invert the secondary tier when it sits on a dark brand field. */
.watch-hero .btn-secondary,
.cta-band .btn-secondary {
    color: var(--white);
    border-color: var(--white);
}

.watch-hero .btn-secondary::before,
.cta-band .btn-secondary::before {
    background: var(--white);
}

.watch-hero .btn-secondary:hover,
.cta-band .btn-secondary:hover {
    color: var(--blue) !important;
    border-color: var(--white) !important;
}

/* Utility — filters and controls */
.act--utility,
.roster-filter,
.region-filter,
.filter-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--white);
    color: var(--blue);
    padding: 0.6rem 1.1rem;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1.5px solid rgba(0,102,204,0.28);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.08s linear, color 0.08s linear, border-color 0.08s linear;
}

.act--utility:hover,
.roster-filter:hover,
.region-filter:hover,
.filter-tab:hover,
.act--utility.is-active,
.roster-filter.is-active,
.region-filter.is-active,
.filter-tab.active,
.act--utility[aria-pressed='true'] {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

/* Card-internal links use the homepage's understated action-link tier. */
.act-link,
.series-card__cta,
.platform-card__cta,
.player-card__back-cta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 0.4rem;
    padding: 0 0 2px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    background-color: transparent;
    background-image: linear-gradient(var(--red), var(--red));
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 0;
    transition: background-size 0.28s cubic-bezier(0.4,0,0.2,1), color 0.2s ease;
}

.act-link:hover,
.series-card__cta:hover,
.platform-card__cta:hover,
.player-card__back-cta:hover {
    color: var(--red);
    background-color: transparent;
    background-size: 100% 2px;
}

/* Shared card surface and depth language */
.media-card,
.result-card,
.related-card,
.series-card,
.upgrade-card,
.pillar-card,
.highlight-card,
.side-card,
.platform-card,
.tour-strip__card,
.nearest-show,
.player-card__face {
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    border: 1px solid rgba(0,102,204,0.10);
    box-shadow: none;
}

.media-card,
.result-card,
.related-card,
.series-card,
.upgrade-card,
.pillar-card,
.highlight-card,
.side-card,
.platform-card,
.nearest-show {
    background: var(--white);
}

.media-card,
a.result-card,
a.related-card,
a.series-card,
a.upgrade-card,
a.tour-strip__card,
.pillar-card,
.platform-card {
    transition: transform 0.28s var(--ease-nudge), box-shadow 0.28s ease;
}

.media-card:hover,
.media-card:focus-visible,
a.result-card:hover,
a.result-card:focus-visible,
a.related-card:hover,
a.related-card:focus-visible,
a.series-card:hover,
a.series-card:focus-visible,
a.upgrade-card:hover,
a.upgrade-card:focus-visible,
a.tour-strip__card:hover,
a.tour-strip__card:focus-visible,
.pillar-card:hover,
.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 0 rgba(0,102,204,0.22);
}

.media-frame,
.result-image,
.series-card__poster,
.upgrade-card__photo,
.pillar-image,
.player-card__photo {
    overflow: hidden;
}

.media-frame img,
.result-image img,
.series-card__poster img,
.upgrade-card__photo img,
.pillar-image img,
.player-card__photo img {
    transition: transform 0.55s cubic-bezier(0.22,0.61,0.36,1);
    will-change: transform;
}

.media-card:hover .media-frame img,
.media-card:focus-visible .media-frame img,
.result-card:hover .result-image img,
.series-card:hover .series-card__poster img,
.upgrade-card:hover .upgrade-card__photo img,
.pillar-card:hover .pillar-image img,
.player-card:hover .player-card__photo img {
    transform: scale(1.07);
}

.media-card:hover .media-card__title,
.result-card:hover h3,
.related-card:hover h3,
.series-card:hover .series-card__title,
.upgrade-card:hover .upgrade-card__title,
.pillar-card:hover h3 {
    color: var(--red);
}

.act:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.buy-tickets-header:focus-visible,
.site-nav a:focus-visible,
.media-card:focus-visible,
.result-card:focus-visible,
.related-card:focus-visible,
.series-card:focus-visible,
.upgrade-card:focus-visible,
.tour-strip__card:focus-visible,
button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .site-header {
        padding: 1rem 1.25rem;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .site-header__logo img { height: 44px; }

    .site-nav {
        display: flex;
        order: 3;
        width: 100%;
        gap: 1.25rem;
        padding: 0.15rem 0 0.35rem;
        overflow-x: auto;
        scrollbar-width: thin;
        font-size: 0.82rem;
    }

    .buy-tickets-header {
        margin-left: auto;
        padding: 0.65rem 1rem;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .act,
    .btn,
    .btn-primary,
    .btn-secondary,
    .buy-tickets-header,
    .media-card,
    .result-card,
    .related-card,
    .series-card,
    .upgrade-card,
    .pillar-card,
    .platform-card,
    .tour-strip__card,
    .media-frame img,
    .result-image img,
    .series-card__poster img,
    .upgrade-card__photo img,
    .pillar-image img,
    .player-card__photo img {
        transition-duration: 0.01ms !important;
    }

    .media-card:hover,
    .result-card:hover,
    .related-card:hover,
    .series-card:hover,
    .upgrade-card:hover,
    .pillar-card:hover,
    .platform-card:hover,
    .tour-strip__card:hover {
        transform: none;
    }
}
}
        /* ============================================================
           Upgrade Your Experience — 3 up
           ============================================================ */
        .upgrades {
            padding: 5rem 2.5rem;
            background: var(--oat);
        }

        .upgrades__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        .upgrades__header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 2rem;
            margin-bottom: 2.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        }

        .upgrades__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 2.5rem;
            color: var(--blue);
            margin: 0;
            letter-spacing: -0.005em;
            text-transform: uppercase;
        }

        .upgrades__view-all {
            color: var(--red);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.9rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
        }

        .upgrades__view-all:hover { text-decoration: underline; }

        .upgrades__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .upgrade-card {
            background: var(--white);
            overflow: hidden;
            text-decoration: none;
            color: var(--black);
            display: flex;
            flex-direction: column;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        .upgrade-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .upgrade-card__photo {
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: var(--blue);
        }

        .upgrade-card__photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .upgrade-card__body {
            padding: 1.5rem;
            border-top: 4px solid var(--red);
        }

        .upgrade-card__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.25rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .upgrade-card__desc {
            font-size: 0.9rem;
            color: var(--black);
            margin: 0;
            line-height: 1.5;
        }

        /* ============================================================
           See What To Expect + FAQ side by side
           ============================================================ */
        .expect-faq {
            padding: 5rem 2.5rem;
            background: var(--white);
        }

        .expect-faq__inner {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }

        /* See What To Expect block */
        .expect {
            background: var(--blue);
            color: var(--white);
            display: flex;
            flex-direction: column;
        }

        .expect__video {
            aspect-ratio: 16 / 9;
            position: relative;
            overflow: hidden;
            background: var(--black);
            cursor: pointer;
        }

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

        .expect__play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--red);
            border: 3px solid var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.2s ease;
        }

        .expect__video:hover .expect__play {
            transform: translate(-50%, -50%) scale(1.08);
            background: var(--white);
        }

        .expect__video:hover .expect__play::after {
            border-left-color: var(--red);
        }

        .expect__play::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 20px solid var(--white);
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            margin-left: 4px;
            transition: border-left-color 0.2s ease;
        }

        .expect__body {
            padding: 2rem;
            flex: 1;
        }

        .expect__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            margin: 0 0 0.75rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .expect__desc {
            font-size: 0.95rem;
            margin: 0 0 1.5rem;
            line-height: 1.55;
            opacity: 0.95;
        }

        .expect__watch {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--white);
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
            text-decoration: none;
            border-bottom: 2px solid var(--white);
            padding-bottom: 0.25rem;
        }

        /* FAQ block */
        .faq {
            background: var(--white);
            border: 2px solid var(--oat);
            padding: 2rem;
        }

        .faq__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: var(--blue);
            margin: 0 0 1.5rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .faq__item {
            border-bottom: 1px solid var(--oat);
        }

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

        .faq__question {
            background: none;
            border: none;
            padding: 1.15rem 0;
            width: 100%;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            font-family: inherit;
            font-weight: 600;
            font-size: 1rem;
            color: var(--black);
        }

        .faq__question::after {
            content: '+';
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: var(--red);
            transition: transform 0.2s ease;
        }

        .faq__item.is-open .faq__question::after {
            transform: rotate(45deg);
        }

        .faq__answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            font-size: 0.9rem;
            color: var(--black);
            opacity: 0.85;
        }

        .faq__item.is-open .faq__answer {
            max-height: 500px;
            padding: 0 0 1.15rem;
        }

        .faq__view-all {
            display: inline-block;
            margin-top: 1.5rem;
            color: var(--red);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.9rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
        }

        .faq__view-all:hover { text-decoration: underline; }

        /* ============================================================
           Popular For row
           ============================================================ */
        .popular-for {
            padding: 3rem 2.5rem;
            background: var(--oat);
            border-top: 1px solid rgba(0, 0, 0, 0.06);
        }

        .popular-for__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        .popular-for__label {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--red);
            margin: 0 0 1.5rem;
        }

        .popular-for__grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

        .popular-for__item {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1rem;
            color: var(--blue);
            letter-spacing: 0.02em;
            text-transform: uppercase;
            padding: 1rem 0;
            border-top: 3px solid var(--red);
        }

        /* ============================================================
           Text alerts pop-up modal
           ============================================================ */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
            padding: 2rem;
        }

        .modal-overlay.is-open { display: flex; }

        .modal {
            background: var(--white);
            max-width: 500px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .modal::before {
            content: '';
            display: block;
            height: 8px;
            background: linear-gradient(
                to right,
                var(--red) 0%, var(--red) 33.33%,
                var(--white) 33.33%, var(--white) 66.66%,
                var(--blue) 66.66%, var(--blue) 100%
            );
        }

        .modal__close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--black);
            font-size: 1.75rem;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.5;
            transition: opacity 0.15s ease;
        }

        .modal__close:hover { opacity: 1; }

        .modal__body { padding: 2.5rem 2rem 2rem; }

        .modal__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            text-align: center;
        }

        .modal__lede {
            text-align: center;
            font-size: 0.95rem;
            color: var(--black);
            opacity: 0.85;
            margin: 0 0 1.5rem;
        }

        .modal__benefits {
            list-style: none;
            padding: 0;
            margin: 0 0 1.5rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }

        .modal__benefits li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: var(--black);
        }

        .modal__benefits li::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--red);
            flex-shrink: 0;
        }

        .modal__form {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .modal__input {
            flex: 1;
            padding: 0.85rem 1rem;
            border: 2px solid var(--oat);
            font-size: 1rem;
            font-family: inherit;
            background: var(--white);
        }

        .modal__submit {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 0.85rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        .modal__submit:hover { background: var(--blue); }

        .modal__disclaimer {
            font-size: 0.7rem;
            color: var(--black);
            opacity: 0.6;
            margin: 0;
            line-height: 1.5;
            text-align: center;
        }

        /* ============================================================
           Footer
           ============================================================ */
        .site-footer {
            background: var(--black);
            color: rgba(255, 255, 255, 0.7);
            padding: 3rem 2.5rem 2rem;
            text-align: center;
            font-size: 0.85rem;
        }

        .site-footer__logo {
            margin: 0 auto 1.5rem;
            max-width: 200px;
        }

        .site-footer p { margin: 0.5rem 0; }

        /* ============================================================
           Responsive
           ============================================================ */
        @media (max-width: 1024px) {
            .event-hero,
            .expect-faq__inner {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .upgrades__grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
            .popular-for__grid { grid-template-columns: repeat(2, 1fr); }

            .closest-alt__inner {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
        }

        @media (max-width: 640px) {
            .site-header { padding: 1rem 1.25rem; }
            .site-nav { display: none; }
            .site-header__logo img { height: 40px; }

            .breadcrumb, .event-hero, .tour-strip, .closest-alt,
            .upgrades, .expect-faq, .popular-for {
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }

            .tour-strip__card { flex-basis: 180px; }

            /* Title + "view all" sat in a space-between row with a 2rem gap
               and no wrap, which was 44px too wide at 390px and made the
               whole page scroll sideways. */
            .upgrades__header {
                flex-wrap: wrap;
                gap: 0.75rem;
                align-items: flex-start;
            }
            .popular-for__grid { grid-template-columns: 1fr; }
            .modal__benefits { grid-template-columns: 1fr; }
        }
        
        /* ============================================================
           Hero — background video with copy overlay
           ============================================================ */
        .watch-hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            padding: 4rem 2.5rem;
            color: var(--white);
            overflow: hidden;
            background: var(--black);
        }

        .watch-hero__video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        /* Scrim so copy reads over the video */
        .watch-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                90deg,
                rgba(0, 15, 45, 0.85) 0%,
                rgba(0, 15, 45, 0.6) 50%,
                rgba(0, 15, 45, 0.2) 100%
            );
            z-index: 2;
        }

        .watch-hero__inner {
            position: relative;
            z-index: 3;
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
        }

        .watch-hero__copy {
            max-width: 640px;
        }

        .watch-hero__eyebrow {
            display: inline-block;
            font-family: var(--font-display);
            font-weight: 700;
            color: #ffd93d;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            font-size: 0.9rem;
            margin: 0 0 1rem;
        }

        .watch-hero__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(3rem, 7vw, 6rem);
            line-height: 0.85;
            letter-spacing: -0.005em;
            margin: 0 0 1.5rem;
            text-transform: uppercase;
        }

        .watch-hero__title .accent { color: var(--red); }

        .watch-hero__lede {
            font-size: 1.15rem;
            margin: 0 0 2rem;
            line-height: 1.55;
            opacity: 0.95;
            max-width: 540px;
        }

        .watch-hero__ctas {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 1.1rem 2rem;
            border: none;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.05rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        .btn-primary:hover { background: var(--blue); }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: transparent;
            color: var(--white);
            padding: 1.1rem 2rem;
            border: 2px solid var(--white);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.05rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.15s ease;
        }

        .btn-secondary:hover {
            background: var(--white);
            color: var(--blue);
        }

        /* YouTube play icon inside primary CTA */
        .youtube-icon {
            width: 22px;
            height: 22px;
            fill: currentColor;
        }

        /* ============================================================
           Section shared bits
           ============================================================ */
        .section-eyebrow {
            font-family: var(--font-display);
            font-weight: 900;
            color: var(--red);
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-size: 0.9rem;
            text-align: center;
            margin: 0 0 1rem;
        }

        .section-title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(2rem, 4.5vw, 3.5rem);
            color: var(--blue);
            text-align: center;
            margin: 0 0 1rem;
            letter-spacing: -0.005em;
            line-height: 0.95;
            text-transform: uppercase;
        }

        .section-lede {
            text-align: center;
            font-size: 1rem;
            color: var(--black);
            opacity: 0.75;
            margin: 0 auto 3rem;
            max-width: 560px;
        }

        /* ============================================================
           Series cards
           ============================================================ */
        .series {
            padding: 6rem 2.5rem;
            background: var(--oat);
        }

        .series__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        .series__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .series-card {
            background: var(--white);
            overflow: hidden;
            text-decoration: none;
            color: var(--black);
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border-top: 6px solid var(--red);
        }

        .series-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .series-card__poster {
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: var(--blue);
            position: relative;
        }

        .series-card__poster img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .series-card:hover .series-card__poster img {
            transform: scale(1.03);
        }

        .series-card__badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: var(--red);
            color: var(--white);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.7rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            padding: 0.35rem 0.75rem;
            z-index: 2;
        }

        .series-card__body {
            padding: 1.75rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .series-card__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            line-height: 1;
        }

        .series-card__meta {
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.8rem;
            color: var(--red);
            margin: 0 0 1rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        .series-card__desc {
            color: var(--black);
            font-size: 0.95rem;
            line-height: 1.55;
            margin: 0 0 1.5rem;
            flex: 1;
        }

        .series-card__cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 0.9rem 1.25rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.9rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
            align-self: stretch;
            text-align: center;
        }

        .series-card__cta:hover { background: var(--blue); }

        /* ============================================================
           Where To Watch — platform cards
           ============================================================ */
        .platforms {
            padding: 6rem 2.5rem;
            background: var(--white);
        }

        .platforms__inner {
            max-width: 1400px;
            margin: 0 auto;
        }

        .platforms__grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .platform-card {
            border: 2px solid var(--oat);
            padding: 2rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.15s ease;
        }

        .platform-card:hover {
            border-color: var(--blue);
            transform: translateY(-2px);
        }

        .platform-card__logo {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .platform-card__logo svg {
            height: 100%;
            width: auto;
        }

        .platform-card__name {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.25rem;
            color: var(--blue);
            margin: 0 0 0.5rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        .platform-card__desc {
            color: var(--black);
            opacity: 0.8;
            font-size: 0.9rem;
            margin: 0 0 1.5rem;
            line-height: 1.5;
            flex: 1;
        }

        .platform-card__cta {
            background: transparent;
            border: 2px solid var(--red);
            color: var(--red);
            padding: 0.75rem 1.5rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .platform-card__cta:hover {
            background: var(--red);
            color: var(--white);
        }

        /* External link icon */
        .external-icon {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }

        /* ============================================================
           Follow us for more — social
           ============================================================ */
        .follow {
            padding: 5rem 2.5rem;
            background: var(--oat);
        }

        .follow__inner {
            max-width: 1200px;
            margin: 0 auto;
        }

        .follow__grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .social-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            padding: 1.5rem 1rem;
            background: var(--white);
            text-decoration: none;
            color: var(--blue);
            transition: all 0.15s ease;
        }

        .social-card:hover {
            background: var(--blue);
            color: var(--white);
        }

        .social-card__icon {
            width: 32px;
            height: 32px;
            fill: currentColor;
        }

        .social-card__name {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.85rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .follow__all {
            text-align: center;
        }

        .follow__all a {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: transparent;
            border: 2px solid var(--blue);
            color: var(--blue);
            padding: 0.85rem 2rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.9rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.15s ease;
        }

        .follow__all a:hover {
            background: var(--blue);
            color: var(--white);
        }

        /* ============================================================
           Never miss an episode — email signup band
           ============================================================ */
        .signup-band {
            background: var(--blue);
            padding: 4rem 2.5rem;
            color: var(--white);
        }

        .signup-band__inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .signup-band__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: clamp(2rem, 3.5vw, 3rem);
            margin: 0 0 0.5rem;
            letter-spacing: -0.005em;
            line-height: 0.9;
            text-transform: uppercase;
        }

        .signup-band__lede {
            font-size: 1rem;
            margin: 0;
            opacity: 0.9;
        }

        .signup-band__form {
            display: flex;
            gap: 0.5rem;
        }

        .signup-band__input {
            flex: 1;
            padding: 1rem 1.25rem;
            border: none;
            font-size: 1rem;
            font-family: inherit;
            background: var(--white);
            color: var(--black);
        }

        .signup-band__submit {
            background: var(--red);
            color: var(--white);
            border: none;
            padding: 1rem 1.75rem;
            font-family: var(--font-display);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.95rem;
            transition: background 0.15s ease;
        }

        .signup-band__submit:hover { background: var(--black); }

        /* ============================================================
           See them live band — nearest-show reprise
           ============================================================ */
        .live-band {
            background: var(--white);
            padding: 3rem 2.5rem;
            border-top: 4px solid var(--red);
        }

        .live-band__inner {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr auto auto auto;
            gap: 2rem;
            align-items: center;
        }

        .live-band__title-block {
            padding-right: 2rem;
            border-right: 2px solid var(--oat);
        }

        .live-band__title {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.75rem;
            color: var(--red);
            margin: 0 0 0.25rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            line-height: 1;
        }

        .live-band__subtitle {
            font-size: 0.95rem;
            color: var(--black);
            opacity: 0.75;
            margin: 0;
        }

        .live-band__where {
            text-align: left;
        }

        .live-band__where-label {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 0.7rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--red);
            margin: 0 0 0.25rem;
        }

        .live-band__where-city {
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: var(--blue);
            margin: 0;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            line-height: 1;
        }

        .live-band__where-venue {
            font-size: 0.85rem;
            color: var(--gold);
            margin: 0.15rem 0 0;
            font-weight: 600;
        }

        .live-band__when {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1rem;
            color: var(--blue);
            letter-spacing: 0.02em;
        }

        .live-band__cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--red);
            color: var(--white);
            padding: 1rem 2rem;
            border: none;
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        .live-band__cta:hover { background: var(--blue); }