/* ==========================================================================
   X5 CONVERGENCE — PAGE & COMPONENT STYLES
   --------------------------------------------------------------------------
   Loaded AFTER x5.css and inherits its tokens (--gold, --blue, --line,
   --radius-*, --header-height, --shadow). x5.css is NOT modified.
   All new selectors are new class names, so nothing here fights the original.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HIDDEN ATTRIBUTE
   x5.css sets display on .btn and others, which beats the browser default for
   [hidden] and leaves hidden buttons on screen. This restores it globally.
   -------------------------------------------------------------------------- */

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   ACCESSIBILITY BASELINE
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2147483647;
    padding: 14px 22px;
    background: var(--gold);
    color: #111;
    font-weight: 900;
}

.skip-link:focus { left: 12px; top: 12px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.is-placeholder { opacity: .45; cursor: default; }

/* --------------------------------------------------------------------------
   INTRO VIDEO
   x5.css already styles #x5Intro and #x5IntroVideo. These rules add the
   skip button and the hidden state only.
   -------------------------------------------------------------------------- */

#x5Intro[hidden] { display: none !important; }

#x5IntroSkip {
    position: absolute;
    right: clamp(16px, 4vw, 44px);
    bottom: clamp(16px, 4vw, 44px);
    z-index: 2;
    padding: 12px 24px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.45);
    color: #fff;
    font: 900 12px/1 Arial, Helvetica, sans-serif;
    letter-spacing: .06em;
    cursor: pointer;
    transition: .2s ease;
}

#x5IntroSkip:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #111;
}

#x5Intro.is-finished {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   HERO — FIVE-BUTTON ROW
   -------------------------------------------------------------------------- */

.hero__actions--five {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__actions--five .btn {
    flex: 0 1 auto;
    min-height: 52px;
    padding: 0 24px;
    font-size: 12px;
}

@media (max-width: 760px) {
    .hero__actions--five { flex-direction: column; align-items: stretch; }
    .hero__actions--five .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   WHO WE ARE — PHOTO BUTTONS
   -------------------------------------------------------------------------- */

.whowe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 34px;
}

.whowe-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 240px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 8px;
    overflow: hidden;
    color: var(--text);
    box-shadow: var(--shadow);
    background: linear-gradient(135deg, #0e2235, #050b11 75%);
    transition: transform .2s ease, border-color .2s ease;
}

.whowe-card__media {
    position: absolute;
    inset: 0;
    background-image: var(--card-image);
    background-size: cover;
    background-position: center;
    opacity: .55;
    transition: .25s ease;
}

.whowe-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.2) 45%, rgba(0,0,0,.9));
}

.whowe-card__label,
.whowe-card__blurb { position: relative; z-index: 1; }

.whowe-card__label {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--gold);
}

.whowe-card__blurb {
    margin-top: 5px;
    font-size: 11px;
    color: var(--muted);
}

.whowe-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239,190,84,.6);
}

.whowe-card:hover .whowe-card__media { opacity: .8; }

@media (max-width: 1050px) { .whowe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .whowe-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   INDUSTRY TICKER — cards became <a>
   -------------------------------------------------------------------------- */

a.industry-card { text-decoration: none; color: inherit; }

a.industry-card:hover .industry-card__label { color: var(--gold); }

.industry-ticker:focus-within .industry-track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   EXPERIENCE GRID — 12 tiles, 3 rows of 4
   Overrides the original 10-column / span-2 layout for this variant only.
   -------------------------------------------------------------------------- */

.experience-grid--12 {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
}

.experience-grid--12 .experience-card,
.experience-grid--12 .experience-card:nth-child(n+6) {
    grid-column: span 1;
    display: block;
    color: var(--text);
    transition: transform .2s ease, border-color .2s ease;
}

.experience-grid--12 .experience-card__content {
    display: flex;
    align-items: end;
    gap: 10px;
}

.experience-grid--12 .experience-card h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.15;
}

.experience-grid--12 .experience-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239,190,84,.6);
}

/* 12th tile has no artwork yet */
.experience-card--pending {
    border-style: dashed;
    border-color: rgba(239,190,84,.4);
}

@media (max-width: 1050px) { .experience-grid--12 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .experience-grid--12 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 165px; } }

/* --------------------------------------------------------------------------
   THE AUDIENCE
   -------------------------------------------------------------------------- */

.section-kicker--gold { color: var(--gold); }

.audience-headline {
    color: var(--gold);
    font-size: clamp(26px, 4vw, 52px);
    line-height: 1.1;
}

.audience-lede {
    max-width: 760px;
    margin: 16px auto 0;
    color: var(--muted);
    font-size: 14px;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 34px;
}

.audience-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 18px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(11,22,33,.82), rgba(3,8,13,.82));
    text-align: center;
}

.audience-card strong {
    font-size: clamp(20px, 2.2vw, 34px);
    line-height: 1;
    color: var(--gold);
}

.audience-card__label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}

.audience-card__note {
    font-size: 11px;
    color: var(--muted);
}

@media (max-width: 1050px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .audience-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SHARED PAGE TEMPLATE
   ========================================================================== */

.container--narrow {
    width: min(900px, calc(100% - 48px));
    margin-inline: auto;
}

/* ---------- PAGE HERO ---------------------------------------------------- */

.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding: calc(var(--header-height) + 70px) 0 70px;
    text-align: center;
    isolation: isolate;
}

.page-hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    opacity: .45;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(2,7,13,.72) 0%, rgba(2,7,13,.86) 60%, rgba(2,7,13,.97) 100%);
}

.page-hero__content { position: relative; }

.page-hero__title {
    margin: 12px 0 0;
    font-size: clamp(30px, 5.5vw, 66px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: .015em;
}

.page-hero__rule {
    width: min(560px, 80%);
    height: 2px;
    margin: 26px auto;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.page-hero__text {
    max-width: 720px;
    margin: 0 auto 30px;
    color: var(--muted);
    font-size: 15px;
}

.page-hero__text p + p { margin-top: 12px; }

.btn--sm {
    min-height: 46px;
    padding: 0 26px;
    font-size: 12px;
}

/* ---------- GRAPHICS BAND ------------------------------------------------ */

.graphics-grid { display: grid; gap: 12px; }

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

.graphic-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 8px;
    overflow: hidden;
    background-image: var(--slot-image), linear-gradient(135deg, #0e2235, #050b11 75%);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
}

.graphic-slot--empty {
    border-style: dashed;
    border-color: rgba(239,190,84,.35);
    background-image:
        repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 14px, transparent 14px 28px),
        linear-gradient(135deg, #0e2235, #050b11 75%);
}

.graphic-slot__label {
    padding-inline: 12px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    color: var(--gold);
    text-align: center;
}

.graphic-slot__note {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
}

.graphic-slot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 9px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-align: center;
    background: rgba(2,7,13,.82);
}

@media (max-width: 1050px) {
    .graphics-grid--3,
    .graphics-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
    .graphics-grid--3,
    .graphics-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- STATEMENT BLOCK ---------------------------------------------- */

.statement-headline {
    margin: 0;
    font-size: clamp(24px, 3.6vw, 44px);
    font-weight: 900;
    line-height: 1.12;
}

.statement-rule {
    width: 100%;
    max-width: 640px;
    height: 1px;
    margin: 24px auto;
    background: var(--line);
}

.statement-text {
    max-width: 700px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 14px;
}

.statement-text + .statement-text { margin-top: 14px; }

/* ---------- FORMS -------------------------------------------------------- */

.form-section { scroll-margin-top: calc(var(--header-height) + 10px); }

.form-section__title {
    font-size: clamp(20px, 3vw, 34px);
    letter-spacing: .03em;
}

.form-section__intro {
    max-width: 620px;
    margin: 12px auto 0;
    color: var(--muted);
    font-size: 13px;
}

.x5-form {
    margin-top: 32px;
    padding: clamp(20px, 4vw, 38px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(11,22,33,.82), rgba(3,8,13,.82));
}

.x5-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.x5-field--wide { grid-column: 1 / -1; }

.x5-field { display: flex; flex-direction: column; gap: 7px; }

.x5-field > label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.req { color: var(--gold); margin-left: 4px; }

/* The :not() list must exclude BOTH tick-box types. It originally excluded
   only checkboxes, so every RADIO in a form was given width:100% and 13px of
   padding — the control swelled to fill its box and pushed its own label out
   past the border. That is what "Booth configuration", "Preferred format" and
   "Package interest" were doing.

   It has to be fixed here rather than in .x5-choice: this selector is
   (0,2,1) and .x5-choice input is (0,1,1), so anything set there loses to
   this regardless of source order. Chips escaped the bug only because their
   input is position:absolute and invisible, so the wrong width did no visible
   harm.

   Add any future non-text input type to this list. */
.x5-field input:not([type="checkbox"]):not([type="radio"]),
.x5-field select,
.x5-field textarea {
    width: 100%;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 16px;            /* 16px stops iOS zooming on focus */
    color: var(--text);
    background: rgba(0,0,0,.34);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .2s ease, background .2s ease;
}

.x5-field textarea { resize: vertical; min-height: 130px; }
.x5-field select   { appearance: none; cursor: pointer; }
.x5-field option   { background: #07131e; color: var(--text); }

.x5-field input:not([type="checkbox"]):focus,
.x5-field select:focus,
.x5-field textarea:focus {
    border-color: var(--gold);
    background: rgba(0,0,0,.5);
}

/* consent checkbox */
.x5-field--check > label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    cursor: pointer;
}

.x5-field--check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--gold);
    cursor: pointer;
}

.x5-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.x5-form__submit {
    width: 100%;
    margin-top: 24px;
    cursor: pointer;
}

.x5-form__submit[disabled] { opacity: .55; cursor: progress; transform: none; }

.x5-form__legal {
    margin: 14px 0 0;
    font-size: 11px;
    color: rgba(255,255,255,.42);
    text-align: center;
}

.form-status {
    display: none;
    margin-top: 22px;
    padding: 15px 18px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.form-status.is-visible { display: block; }

.form-status--ok    { border-left: 3px solid #4ade80; background: rgba(74,222,128,.09); }
.form-status--error { border-left: 3px solid #f87171; background: rgba(248,113,113,.09); }

@media (max-width: 760px) {
    .x5-form__grid { grid-template-columns: 1fr; }
}

/* ---------- FOOTER ADDITION ---------------------------------------------- */

.footer-event {
    margin-top: 12px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .whowe-card,
    .experience-grid--12 .experience-card,
    #x5IntroSkip { transition: none; }

    .whowe-card:hover,
    .experience-grid--12 .experience-card:hover { transform: none; }
}

/* ==========================================================================
   INFO CARDS  —  content lifted from the previous site's side rails.
   Kevin's layout is a single scrolling column, so these run full width at
   the bottom of each page instead of sitting in a sidebar.
   ========================================================================== */

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: start;
}

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

.info-card {
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(11,22,33,.82), rgba(3,8,13,.82));
    height: 100%;
}

.info-card__title {
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gold);
}

.info-card__note {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--muted);
}

.gold { color: var(--gold); }

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

.info-list li {
    position: relative;
    padding: 7px 0 7px 18px;
    font-size: 13px;
    color: var(--muted);
}

.info-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 6px;
    height: 1px;
    background: var(--gold);
}

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

.info-dates li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: 12px;
}

.info-dates li:last-child { border-bottom: 0; }

.info-dates__l { color: var(--muted); }

.info-dates__v {
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
}

.info-links {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.info-links a {
    display: block;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--gold);
}

@media (max-width: 1050px) { .info-grid, .info-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .info-grid, .info-grid--2, .info-grid--4 { grid-template-columns: 1fr; } }

/* ---- Audience section additions ----------------------------------------- */

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

.audience-card__kicker {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    color: var(--muted);
}

.audience-card__label {
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audience-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 1050px) { .audience-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 700px)  { .audience-split  { grid-template-columns: 1fr; } }

/* ==========================================================================
   SINGLE-PAGE LAYOUT
   The whole site is one scrolling page, so anchors must clear the fixed
   header and sections need visible separation.
   ========================================================================== */

/* A conversion section (speakers / exhibit / sponsors / partners). */
.page-section {
    position: relative;
    border-top: 1px solid var(--line);
}

/* The page-hero inside a section is no longer a full-viewport hero — it is a
   section opener, so it needs far less vertical space than the landing hero. */
.page-section .page-hero {
    min-height: 0;
    padding: var(--sp-6, 90px) 0 50px;
}

.page-section .page-hero__title {
    font-size: clamp(26px, 4.6vw, 54px);
}

/* --------------------------------------------------------------------------
   A SEGMENT ON ITS OWN PAGE  (become-a-speaker / exhibit-at-x5 /
   become-a-sponsor / partner-with-us)
   --------------------------------------------------------------------------
   The same .page-section markup now runs in two places. On the landing page
   it was a section opener part-way down a scroll; on its own page it is the
   first thing under a FIXED 150px header, so the rules above would tuck the
   headline underneath it. These three rules undo the "mid-scroll" treatment
   and give the segment back the full page-hero it is sized for.
   -------------------------------------------------------------------------- */

.page-segment .page-section {
    border-top: 0;
}

.page-segment .page-section::before {
    display: none;
}

.page-segment .page-section .page-hero {
    padding-top: calc(var(--header-height) + 56px);
    padding-bottom: 60px;
}

.page-segment .page-section .page-hero__title {
    font-size: clamp(30px, 5.5vw, 66px);
}

/* Section counter down the left edge, so a long scroll still feels navigable. */
.page-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent 45%);
    opacity: .5;
}

/* Current section in the nav. */
.site-nav > a.is-current {
    color: var(--gold);
}

/* ABOUT is deliberately gold in the tab row (Jeremy, Aug 2026) so it reads as
   the way in to the story rather than as one more application tab. */
.site-nav > a.nav-link--gold {
    color: var(--gold);
}

.site-nav > a.nav-link--gold:hover,
.site-nav > a.nav-link--gold:focus {
    color: var(--gold-2);
}

.site-nav > a:not(.btn).is-current::after {
    left: 0;
    right: 0;
}

/* --------------------------------------------------------------------------
   STICKY HEADER
   x5.css positions the header absolute, which was right when each section was
   its own page. On one long page the nav has to stay reachable, so it becomes
   fixed — and therefore needs a solid background once you leave the hero,
   otherwise nav text sits on top of section content.
   -------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    transition: height .25s ease, background .25s ease;
}

.site-header.is-scrolled {
    height: 92px;
    background: rgba(2, 7, 13, .93);
    border-bottom: 1px solid var(--line);
    /* NOTE: backdrop-filter is deliberately NOT set here — see ::after below.
       This is what broke the mobile menu. */
}

/* THE MOBILE MENU BUG.
   -------------------------------------------------------------------------
   backdrop-filter used to sit on .site-header itself. Any element with a
   filter, backdrop-filter or transform becomes the CONTAINING BLOCK for its
   position:fixed descendants — so the mobile nav panel (.site-nav, which is
   fixed and sized "inset: 0 0 0 auto" to fill the viewport height) was being
   measured against the 92px-tall header instead of the screen.

   The result: at the top of a page the menu opened correctly, but the moment
   you scrolled 80px and the header gained .is-scrolled, the panel collapsed
   into a 92px sliver. It looked like the button had simply stopped working.

   Moving the blur onto a pseudo-element keeps the visual effect and leaves
   the header itself free of a containing block, so the panel fills the
   screen again at any scroll position. */
.site-header.is-scrolled::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
}

/* The big gradient scrim is only needed over the hero. */
.site-header.is-scrolled::before { opacity: 0; }

/* Header shrinks to 92px when scrolled, so the logo shrinks with it.
   Height, not width — see the note on .brand in x5.css. */
.site-header.is-scrolled .brand { height: 68px; }

/* Anchors offset against the SHRUNK header, since that is what is on screen
   by the time any anchor is used. */
[id] { scroll-margin-top: 112px; }

@media (max-width: 760px) {
    .page-section .page-hero { padding: 70px 0 40px; }
    .site-header.is-scrolled { height: 76px; }
    /* 68px in a 76px header leaves only 4px of clearance, which reads as
       clipped even though it technically fits. */
    .site-header.is-scrolled .brand { height: 56px; }
    [id] { scroll-margin-top: 92px; }
}

/* --------------------------------------------------------------------------
   IMAGE OVERRIDES
   x5.css points .partner-cta at partner-bg.png (2.1 MB). On a single-page
   site every image loads at once, so it now uses the 244 KB JPG instead.
   x5.css itself is left untouched; the PNG originals are kept in
   assets/images/experiences-png-originals/ (do not upload that folder).
   -------------------------------------------------------------------------- */

/* Hero — x5.css line 301 points at about_hero_01.png, which was converted to
   JPG (2.4 MB -> 278 KB). The gradient layer is repeated here because
   background-image replaces ALL layers, it does not merge them. */
.hero {
    background-image:
        linear-gradient(180deg, rgba(3, 10, 18, .08) 0%, rgba(3, 10, 18, .12) 50%, rgba(2, 7, 13, .9) 100%),
        url("../images/hero/about_hero_01.jpg");
}

/* Partner CTA — x5.css line 866 points at partner-bg.png, same conversion. */
.partner-cta {
    background-image: url("../images/partners/partner-bg.jpg");
}

/* Placeholder line under the team photograph until the names and bios land. */
.team-photo__note {
    margin: 16px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   SPONSOR LOGOS
   --------------------------------------------------------------------------
   Two presentations of the same list:
     .sponsor-ticker  landing page, reuses the industry-ticker mechanics
     .sponsor-grid    Become a Sponsor page, static and readable

   .sponsor-card is shared by both so a logo looks identical either way.
   -------------------------------------------------------------------------- */

.sponsor-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    min-width: 170px;
    height: 90px;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;

    /* Backstop, not the fix — see .sponsor-card picture below for why a logo
       was overflowing the card in the first place. Kept anyway: cheap
       insurance against a future logo with an extreme aspect ratio. */
    overflow: hidden;

    /* WHITE CARD, deliberately.

       The supplied logos are almost all dark artwork on a white background
       (JPGs and non-alpha PNGs). Dropped straight onto this near-black site
       they would either read as white rectangles, or — if the background were
       stripped — the dark lettering would disappear against the page.

       Standing each logo on its own white card is the normal answer for a
       dark-themed sponsor wall: it normalises eight logos that share no
       common colour, weight or padding, and reads as a deliberate design
       rather than an accident. Replace this with a transparent treatment only
       if every sponsor supplies a light/monochrome version. */
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Aug 2026: every sponsor logo has a matching .webp, so x5_picture() always
   wraps the <img> in a <picture> here — and nothing in this file styled
   <picture> itself. Left alone, <picture> is an inline element with no
   width or height of its own; as an unstretched flex item (.sponsor-card
   uses align-items:center, not stretch) it shrinks to whatever size its
   content wants. That leaves the <img>'s "max-width/max-height:100%" below
   with no definite box to be a percentage OF, so browsers treat it as no
   constraint at all — the logo rendered at its full native pixel size and
   spilled out of the card, exactly what the screenshots showed.

   Giving <picture> an explicit 100%x100% flex box fixes the cause: now
   there IS a definite size for the img's percentages to resolve against. */
.sponsor-card picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.sponsor-card img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

a.sponsor-card:hover,
a.sponsor-card:focus-visible {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(239, 190, 84, .22);
}

/* ---- Ticker variant ------------------------------------------------------
   Inherits the industry ticker's track, edge fades, hover-pause and reduced
   motion handling; only the card size differs, because a logo needs a wider
   box than an icon. */
.sponsor-ticker .industry-track,
.sponsor-track {
    align-items: center;
    gap: 14px;
}

.sponsor-ticker .sponsor-card {
    flex: 0 0 170px;
}

/* ---- Grid variant -------------------------------------------------------- */
.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 28px;
    justify-items: center;
}

.sponsor-grid__item {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sponsor-grid .sponsor-card {
    width: 100%;
    min-width: 0;
}

.sponsor-grid__tier {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

/* With animation disabled the track stops moving, and because the ticker is
   overflow:hidden that would leave every logo past the fold permanently
   unreachable — content present in the DOM but impossible to see. Let it
   scroll by hand instead, and drop the duplicate copies so the same logo is
   not encountered several times. */
@media (prefers-reduced-motion: reduce) {
    .sponsor-ticker {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .sponsor-ticker .sponsor-card[aria-hidden="true"] {
        display: none;
    }
}

@media (max-width: 620px) {
    .sponsor-card { width: 140px; min-width: 140px; height: 78px; }
    .sponsor-ticker .sponsor-card { flex: 0 0 140px; }
    .sponsor-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* --------------------------------------------------------------------------
   LEGAL PAGES (privacy policy)
   --------------------------------------------------------------------------
   Long-form prose, which nothing else on this site is. The rest of the page
   styling is built for short marketing copy in centred blocks; a policy needs
   left-aligned text, a comfortable measure, and clear heading hierarchy or it
   becomes unreadable.
   -------------------------------------------------------------------------- */

.legal-copy {
    text-align: left;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.legal-copy h2 {
    margin: 44px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--gold);
    font-size: clamp(18px, 2vw, 23px);
    letter-spacing: .02em;
}

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

.legal-copy h3 {
    margin: 26px 0 8px;
    color: var(--text);
    font-size: 15px;
    letter-spacing: .02em;
}

.legal-copy p { margin: 0 0 14px; }

.legal-copy ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.legal-copy li { margin-bottom: 7px; }

.legal-copy strong { color: var(--text); }

.legal-copy a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The consent/basis table needs to stay readable on a phone. */
.legal-copy .x5-table { margin: 0 0 22px; }
.legal-copy .x5-table td { vertical-align: top; }

@media (max-width: 620px) {
    .legal-copy { font-size: 14.5px; }
    .legal-copy .x5-table,
    .legal-copy .x5-table tbody,
    .legal-copy .x5-table tr,
    .legal-copy .x5-table td { display: block; width: 100%; }
    .legal-copy .x5-table thead { display: none; }

    /* .x5-table carries min-width:640px so the wide packages table can scroll
       inside .table-wrap. This table is NOT in a scroll wrapper — it is
       stacked into cards above — so that min-width has to be cancelled or it
       forces 640px of width on a 375px screen. body has overflow-x:hidden, so
       the overflow would be CLIPPED rather than scrollable, putting the right
       half of the privacy policy permanently out of reach. */
    .legal-copy .x5-table { min-width: 0; }
    .legal-copy .x5-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--line);
        border-radius: 6px;
        overflow: hidden;
    }
}

/* --------------------------------------------------------------------------
   ABOUT — WHY UTAH, WHY NOW
   The about hero is the landing hero with a different picture behind it, so
   it inherits every .hero rule and only replaces the image layer. The image
   itself comes from about.php as --hero-image, which means swapping in
   Kevin's national park shot never needs a CSS edit.

   The scrim is heavier than the landing one: this hero carries body copy,
   not just a headline, and a park photograph is far busier than the abstract
   landing image.
   -------------------------------------------------------------------------- */

.hero--about {
    /* BRIGHTNESS IS SET HERE, not in the image file. Three stops, top to
       bottom. Raise a number to darken, lower it to brighten.

       These started at .30 / .55 / .95, which buried the photograph — the
       page was asked to be brighter (21 Aug) and this is the change. The
       bottom stop stays heavy on purpose: it is what blends the hero into the
       section beneath it, and lifting it leaves a visible seam.

       If it needs to go brighter again, take the middle stop down before the
       first one — that is the band the body copy sits in and it carries most
       of the perceived weight. */
    background-image:
        linear-gradient(180deg, rgba(3, 10, 18, .12) 0%, rgba(3, 10, 18, .34) 45%, rgba(2, 7, 13, .92) 100%),
        var(--hero-image);
    background-position: center 40%;
}

/* Two stacked statements under the headline. Constrained to the same width
   as the landing subtitle so the hero keeps its centred column. */
.hero__about {
    max-width: 760px;
    margin: 26px auto 0;
    display: grid;
    gap: 26px;
}

.hero__about-title {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: clamp(18px, 1.9vw, 26px);
    font-weight: 900;
    letter-spacing: .06em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}

.hero__about-block p {
    margin: 0;
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .015em;
    color: #f7f8fa;
    /* Two shadows, not one: a tight dark halo so each letter keeps its edge
       against the sky, and a wider soft one for general separation. With the
       scrim lightened above, this is what keeps the copy readable — the
       background is doing less of the work now. */
    text-shadow:
        0 1px 3px rgba(0, 0, 0, .9),
        0 2px 18px rgba(0, 0, 0, .8);
}

/* The about hero has more to say than the landing one, so it needs the room
   the landing hero spends on the button row. */
.page-about .hero {
    min-height: 720px;
}

@media (max-width: 760px) {
    .hero__about {
        margin-top: 20px;
        gap: 20px;
        text-align: left;
    }

    .page-about .hero { min-height: 0; }
}

/* ==========================================================================
   THE THREE CLUSTERS  (ONE EVENT. THREE CLUSTERS.)
   ========================================================================== */

.cluster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.cluster-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 28px 26px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow);
    background: linear-gradient(135deg, #0e2235, #050b11 75%);
    transition: transform .2s ease, border-color .2s ease;
}

.cluster-card__media {
    position: absolute;
    inset: 0;
    background-image: var(--card-image);
    background-size: cover;
    background-position: center;
    opacity: .55;
    transition: .25s ease;
}

.cluster-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3) 40%, rgba(2, 7, 13, .95));
}

.cluster-card__body {
    position: relative;
    z-index: 1;
    display: block;
}

.cluster-card__number {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    color: var(--muted);
}

.cluster-card__name {
    display: block;
    margin: 8px 0 10px;
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .03em;
    color: var(--gold);
}

.cluster-card__fields {
    display: block;
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
}

.cluster-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 190, 84, .6);
}

.cluster-card:hover .cluster-card__media { opacity: .78; }

/* --------------------------------------------------------------------------
   PLAIN CLUSTER BUTTONS
   Aug 2026 (Jeremy): no images behind the clusters, and no click. These are
   <div>s now, so they must not lift on hover or wear a pointer — nothing
   here should suggest there is somewhere to go.
   -------------------------------------------------------------------------- */

.cluster-card--plain {
    /* Shorter without a picture to fill: the text is the whole card. */
    min-height: 0;
    justify-content: center;
    padding: 34px 26px;
    cursor: default;
    background: linear-gradient(135deg, #0e2235, #050b11 75%);
}

.cluster-card--plain::after { content: none; }

.cluster-card--plain:hover {
    transform: none;
    border-color: rgba(255, 255, 255, .28);
}

.cluster-card--plain .cluster-card__body { text-align: center; }

/* A second heading inside a section that already has one. */
.section-heading--mid {
    margin-top: 54px;
}

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

/* ==========================================================================
   LEADERSHIP
   Two groups (Founding Team, Executive Leadership), matching the previous
   site: square black-and-white portrait, gold role label and name overlaid
   across the bottom.
   ========================================================================== */

.people-heading {
    font-size: clamp(24px, 3.4vw, 44px);
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.people-heading span { color: var(--gold); }

.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.person-card {
    position: relative;
    margin: 0;
    /* Landscape, matching the previous site. Keeps long role titles on one
       line and stops the portraits reading like passport photos. */
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #0e2235, #050b11 75%);
    box-shadow: var(--shadow);
    transition: border-color .2s ease, transform .2s ease;
}

.person-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Square sources into a 4:3 frame: bias upward so faces stay centred
       and the crop takes from the chest, not the forehead. */
    object-position: center 22%;
    /* Black and white, per Kevin. Applied in CSS as well as baked into the
       files, so a colour photo dropped in later still matches the set. */
    filter: grayscale(100%) contrast(1.04);
}

.person-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .82) 100%);
    pointer-events: none;
}

.person-card figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 18px 16px;
}

.person-card__role {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.person-card__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    color: #fff;
}

.person-card:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 190, 84, .55);
}

/* Awaiting a photo */
.person-card--pending {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    border-color: rgba(239, 190, 84, .34);
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 14px, transparent 14px 28px),
        linear-gradient(135deg, #0e2235, #050b11 75%);
}

.person-card__pending {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .34);
}

@media (max-width: 620px) {
    .people-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .person-card { aspect-ratio: 1 / 1; }
    .person-card figcaption { padding: 12px 12px 11px; }
    .person-card__name { font-size: 12px; }
    .person-card__role { font-size: 8px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
    .person-card:hover { transform: none; }
}

/* ==========================================================================
   CLUSTER LEADERSHIP
   Initials avatars rather than photos — headshots for 50+ people are not
   realistic, and initials keep every card consistent as the roster fills.
   ========================================================================== */

.section-heading--group { margin-top: 68px; }

.cluster-lead-heading {
    margin: 40px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold);
}

.lead-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.lead-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 20px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(11, 22, 33, .82), rgba(3, 8, 13, .82));
    transition: border-color .2s ease, transform .2s ease;
}

.lead-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(239, 190, 84, .12);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--gold);
}

.lead-card__remit {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.lead-card__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.25;
    color: #fff;
    text-transform: uppercase;
}

.lead-card:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 190, 84, .45);
}

/* Seat not yet filled */
.lead-card--pending {
    border-style: dashed;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .015);
}

.lead-card--pending .lead-card__avatar {
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .3);
    font-size: 18px;
}

.lead-card--pending .lead-card__remit { color: rgba(255, 255, 255, .34); }

.lead-card--pending .lead-card__name {
    color: rgba(255, 255, 255, .34);
    font-weight: 600;
}

.lead-card--pending:hover {
    transform: none;
    border-color: rgba(255, 255, 255, .22);
}

.lead-foot {
    margin: 44px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--muted);
}

.lead-foot strong {
    color: var(--gold);
    font-size: 15px;
}

.lead-foot span { opacity: .4; margin: 0 8px; }

@media (max-width: 620px) {
    .lead-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .lead-card { padding: 16px 14px 15px; }
    .lead-card__avatar { width: 38px; height: 38px; font-size: 12px; margin-bottom: 10px; }
    .lead-card__name { font-size: 12px; }
    .lead-foot span { display: block; height: 0; overflow: hidden; margin: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lead-card:hover { transform: none; }
}

/* ==========================================================================
   AUDIENCE CLUSTER LINKS + BUTTON ROW
   ========================================================================== */

.audience-card--link {
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease;
}

.audience-card--link:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 190, 84, .6);
}

.audience-card__cta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--gold);
}

.audience-card__cta.is-pending { color: rgba(255, 255, 255, .3); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .btn-row { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   PUBLICATION COVERS
   Each cluster in THE AUDIENCE expands to show every publication reaching it.
   Built on <details>, so it works without JavaScript.
   ========================================================================== */

.audience-detail {
    display: flex;
    min-width: 0;
}

/* When a cluster is open it takes the full row, so the covers have room and
   the other two clusters reflow below rather than being squeezed. */
.audience-detail[open] {
    grid-column: 1 / -1;
    flex-direction: column;
}

.audience-card--toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    cursor: pointer;
    list-style: none;
    transition: border-color .2s ease, transform .2s ease;
}

/* Hide the native disclosure triangle. */
.audience-card--toggle::-webkit-details-marker { display: none; }
.audience-card--toggle::marker { content: ""; }

.audience-card--toggle:hover {
    border-color: rgba(239, 190, 84, .6);
    transform: translateY(-3px);
}

.audience-detail[open] .audience-card--toggle {
    transform: none;
    border-color: rgba(239, 190, 84, .6);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Swap the label between open and closed. */
.audience-card__cta .is-open   { display: none; }
.audience-detail[open] .audience-card__cta .is-closed { display: none; }
.audience-detail[open] .audience-card__cta .is-open   { display: inline; }

.covers-panel {
    padding: 26px 24px 22px;
    border: 1px solid rgba(239, 190, 84, .6);
    border-top: 0;
    border-radius: 0 0 7px 7px;
    background: linear-gradient(180deg, rgba(11, 22, 33, .9), rgba(3, 8, 13, .9));
}

.covers-group + .covers-group { margin-top: 26px; }

.covers-group__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.covers-group__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .1);
    order: 1;
}

.covers-group__title span {
    order: 2;
    font-size: 10px;
    color: var(--muted);
}

.covers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.covers-grid li {
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    overflow: hidden;
    background: #0a121c;
}

.covers-grid img {
    display: block;
    width: 100%;
    height: 100%;
    /* The source files vary from 77px to 420px wide and are a mix of covers,
       wordmarks and logos. 'contain' keeps every one legible and uncropped;
       'cover' would slice the tops off the wordmarks. */
    object-fit: contain;
    background: #fff;
    transition: transform .2s ease;
}

.covers-grid li:hover img { transform: scale(1.05); }

.covers-panel__foot {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 700px) {
    .covers-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .covers-panel { padding: 20px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .audience-card--toggle:hover { transform: none; }
    .covers-grid li:hover img    { transform: none; }
}

/* ==========================================================================
   RESTRUCTURE: nav buttons, map, team photo, venues, lead rows, modals
   ========================================================================== */

/* ---- WHO WE ARE solid navigation buttons -------------------------------- */

.nav-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.nav-button-row .btn { min-height: 54px; padding: 0 28px; }

@media (max-width: 640px) {
    .nav-button-row { flex-direction: column; align-items: stretch; }
}

/* ---- Flagship dates + activation map ------------------------------------ */

.flagship-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 44px 0 26px;
    font-size: clamp(13px, 1.6vw, 18px);
    font-weight: 900;
    letter-spacing: .1em;
    color: var(--gold);
    text-align: center;
}

.flagship-dates__divider {
    width: 40px;
    height: 1px;
    background: rgba(239, 190, 84, .5);
}

.flagship-map {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    overflow: hidden;
    background: #05090f;
    box-shadow: var(--shadow);
}

.flagship-map img { display: block; width: 100%; height: auto; }

/* Kevin: the Annual Convergence map is a placeholder for now, so it is shown
   at half size and centred rather than full bleed. The Exhibit section still
   uses the full-width map. */
.flagship-map--half {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .flagship-map--half { max-width: 100%; }
}

.flagship-map figcaption {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.btn-row--map { margin-top: 22px; }

/* ---- X5 team photo ------------------------------------------------------ */

.team-photo {
    margin: 30px 0 26px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.team-photo img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(100%);
}

/* ---- Cluster leadership as list rows, not buttons ----------------------- */

.lead-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lead-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.lead-row__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
}

.lead-row__title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

/* Space reserved for a bio line even when empty, so rows stay aligned. */
.lead-row__desc {
    min-height: 1.4em;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.lead-row--pending .lead-row__name  { color: rgba(255, 255, 255, .34); font-weight: 600; }
.lead-row--pending .lead-row__title { color: rgba(255, 255, 255, .3); }

/* ---- Venues + floor plans ----------------------------------------------- */

.venue-grid {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.venue {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(11, 22, 33, .82), rgba(3, 8, 13, .82));
}

.venue__head {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}

.venue__head::-webkit-details-marker { display: none; }
.venue__head::marker { content: ""; }

.venue__media {
    position: relative;
    flex: 0 0 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    background-color: #0d1826;
    background-image: var(--venue-image);
    background-size: cover;
    background-position: center;
}

.venue__media--pending {
    border: 1px dashed rgba(239, 190, 84, .3);
    background-image:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 12px, transparent 12px 24px);
}

.venue__pending {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .34);
}

.venue__number {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(2, 7, 13, .8);
    font-size: 10px;
    font-weight: 900;
    color: var(--gold);
}

.venue__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.venue__city {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    color: var(--muted);
}

.venue__name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.venue__clusters { font-size: 12px; color: var(--muted); }

.venue__cta {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--gold);
}

.venue__cta .is-open { display: none; }
.venue[open] .venue__cta .is-closed { display: none; }
.venue[open] .venue__cta .is-open   { display: inline; }

/* A venue with no floor plan renders as a plain row: no pointer, no marker. */
.venue--static .venue__head { cursor: default; }

.venue__plan { padding: 0 14px 16px; }

/* Kevin: halve the plans so the list of venues stays readable as an overview.
   Multi-level venues stack their plans, each captioned. */
.venue__plan-item {
    margin: 0 auto;
    max-width: 50%;
}

.venue__plan-item + .venue__plan-item { margin-top: 18px; }

.venue__plan img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .1);
}

.venue__plan-item figcaption {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
}

/* Half-width plans get unreadably small on a phone. */
@media (max-width: 900px) {
    .venue__plan-item { max-width: 100%; }
}

.venue__plan-pending {
    padding: 34px 20px;
    border: 1px dashed rgba(239, 190, 84, .3);
    border-radius: 6px;
    text-align: center;
}

.venue__plan-pending span {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    color: var(--gold);
}

.venue__plan-pending p {
    margin: 10px auto 0;
    max-width: 420px;
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 620px) {
    .venue__head { flex-direction: column; align-items: stretch; gap: 12px; }
    .venue__media { flex: none; width: 100%; }
}

/* ---- Draft saving ------------------------------------------------------- */

.draft-note {
    display: none;
    margin: 14px 0 0;
    padding: 11px 16px;
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    background: rgba(239, 190, 84, .07);
    font-size: 12px;
    color: var(--muted);
}

.draft-note.is-visible { display: block; }

.draft-clear { margin: 10px 0 0; text-align: right; }

.draft-clear a {
    font-size: 11px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .38);
    text-decoration: underline;
}

.draft-clear a:hover { color: var(--gold); }

/* ---- Pop-up forms ------------------------------------------------------- */

.x5-modal {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid rgba(239, 190, 84, .35);
    border-radius: 12px;
    background: #071018;
    color: var(--text);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    overflow: auto;
}

.x5-modal::backdrop {
    background: rgba(2, 7, 13, .82);
    backdrop-filter: blur(4px);
}

.x5-modal__close-form { position: sticky; top: 0; z-index: 2; height: 0; }

.x5-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.x5-modal__close:hover { background: var(--gold); color: #111; border-color: var(--gold); }

.x5-modal__body { padding: clamp(24px, 5vw, 38px); }

.x5-modal__body h2 {
    margin: 6px 0 0;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 900;
}

.x5-modal__lede {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.x5-form--modal {
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: none;
}

@media (max-width: 560px) {
    .x5-form--modal .x5-form__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   STEPPED FORMS
   Step rail on the left, one step at a time on the right. Without JavaScript
   every step is visible and the rail is a contents list.
   ========================================================================== */

.form-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 32px;
}

.step-rail { position: sticky; top: 120px; }

.step-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.step-list__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background .2s ease, border-color .2s ease;
}

.step-list__item.is-current {
    border-color: rgba(239, 190, 84, .45);
    background: rgba(239, 190, 84, .06);
}

.step-list__item.is-done { cursor: pointer; }
.step-list__item.is-done:hover { background: rgba(255, 255, 255, .04); }

.step-list__num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
    color: var(--muted);
}

.step-list__item.is-current .step-list__num {
    border-color: var(--gold);
    background: var(--gold);
    color: #111;
}

.step-list__item.is-done .step-list__num {
    border-color: rgba(239, 190, 84, .6);
    color: var(--gold);
}

/* Completed steps stay numbered — a tick swapped in via ::after needs a CSS
   escape that is easy to get wrong, and the number is clearer anyway. */
.step-list__item.is-done .step-list__num {
    background: rgba(239, 190, 84, .16);
}

.step-list__text { display: flex; flex-direction: column; gap: 2px; }

.step-list__label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

.step-list__hint { font-size: 11px; color: var(--muted); }

.step-help {
    margin-top: 20px;
    padding: 20px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .02);
}

.step-help h3 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
}

.step-help p { margin: 0 0 14px; font-size: 12px; color: var(--muted); }

.form-main { min-width: 0; }

.x5-step { margin: 0; padding: 0; border: 0; }

.x5-step[hidden] { display: none; }

.x5-step__legend {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
}

.x5-step__count {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}

.x5-step__label {
    display: block;
    margin-top: 5px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

/* Navigation */

.x5-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.x5-nav__progress {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--muted);
}

.x5-nav .btn { min-height: 48px; padding: 0 26px; }
.x5-nav .x5-form__submit { width: auto; margin-top: 0; }

/* Review panel on the last step */

.x5-review {
    margin-top: 24px;
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .02);
}

.x5-review h4 {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.x5-review dl {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 8px 18px;
    margin: 0;
}

.x5-review dt {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 2px;
}

.x5-review dd {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    word-break: break-word;
}

.x5-form__legal .js-clear-draft {
    color: rgba(255, 255, 255, .4);
    text-decoration: underline;
    margin-left: 6px;
}

.x5-form__legal .js-clear-draft:hover { color: var(--gold); }

@media (max-width: 900px) {
    .form-layout { grid-template-columns: 1fr; }
    .step-rail { position: static; }
    .step-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
    .step-list__item { flex: 0 0 auto; padding: 10px 12px; }
    .step-list__hint { display: none; }
    .step-help { display: none; }
}

@media (max-width: 560px) {
    .x5-nav { flex-wrap: wrap; }
    .x5-nav__progress { order: -1; flex-basis: 100%; text-align: left; }
    .x5-nav .btn { flex: 1; }
    .x5-review dl { grid-template-columns: 1fr; gap: 2px 0; }
    .x5-review dd { margin-bottom: 10px; }
}

/* ==========================================================================
   UPCOMING EVENTS + FEATURE IMAGES
   ========================================================================== */

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.event-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(11, 22, 33, .82), rgba(3, 8, 13, .82));
    transition: border-color .2s ease, transform .2s ease;
}

.event-card:hover { transform: translateY(-3px); border-color: rgba(239, 190, 84, .5); }

.event-card__date {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
}

.event-card__name {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.event-card__location {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.event-card__blurb {
    flex: 1;
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

.event-card__cta {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--gold);
}

.event-card--pending {
    border-style: dashed;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .015);
}

.event-card--pending:hover { transform: none; border-color: rgba(255, 255, 255, .2); }
.event-card--pending .event-card__date  { color: rgba(255, 255, 255, .3); }
.event-card--pending .event-card__name  { color: rgba(255, 255, 255, .34); font-size: 16px; }
.event-card--pending .event-card__blurb { color: rgba(255, 255, 255, .28); }

/* ---- Feature image (composite graphics that carry their own labels) ----- */

.feature-image {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    overflow: hidden;
    background: #05090f;
    box-shadow: var(--shadow);
}

.feature-image img { display: block; width: 100%; height: auto; }

.feature-image figcaption {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.venue__dates {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--gold);
    /* Hill Aerospace Museum's entry is a day-by-day schedule laid out with
       <br>, not one date range — this gives those lines room to breathe
       without touching the single-line venues, which are unaffected since a
       line-height only matters once there is more than one line. */
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .event-card:hover { transform: none; }
}

/* ==========================================================================
   FORM PAGE RIGHT RAIL + PACKAGES TABLE
   ========================================================================== */

.form-layout--rail {
    grid-template-columns: 250px minmax(0, 1fr) 290px;
}

.info-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-rail .info-card { padding: 22px 20px; }

.info-rail .info-list li { font-size: 12.5px; padding: 6px 0 6px 16px; }

.info-rail .info-list li strong { color: var(--gold); font-weight: 800; }

.info-card__btn { width: 100%; margin-top: 16px; }

@media (max-width: 1240px) {
    .form-layout--rail { grid-template-columns: 240px minmax(0, 1fr); }
    .info-rail {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

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

/* ---- Packages table ----------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(11, 22, 33, .82), rgba(3, 8, 13, .82));
}

.x5-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.x5-table th {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
}

.x5-table td {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    vertical-align: top;
}

.x5-table tr:last-child td { border-bottom: 0; }

.x5-table__pkg {
    width: 130px;
    color: #fff !important;
    font-weight: 800;
    white-space: nowrap;
}

.x5-table__price {
    width: 150px;
    color: var(--gold) !important;
    font-weight: 800;
    white-space: nowrap;
}

.venue__note {
    font-size: 11px;
    font-style: italic;
    color: var(--gold);
}

/* ==========================================================================
   APPLICATION FORMS — FIELD TYPES
   The previous build's form engine supported choice grids, chips, help text,
   character counts and inline notes. These are those, in the site's own
   palette rather than the old stylesheet's.
   ========================================================================== */

/* ---------- Groups within a step ---------------------------------------- */

.x5-group + .x5-group { margin-top: 30px; }

.x5-group__label {
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ---------- Labels, help text, counters ---------------------------------- */

.x5-field__label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.x5-help {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .45);
}

.x5-count {
    align-self: flex-end;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .35);
}

.x5-count.is-near { color: var(--gold); }

.x5-field--note { gap: 0; }

.x5-note {
    margin: 0;
    padding: 13px 15px;
    border-left: 2px solid var(--gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(239, 190, 84, .07);
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}

.x5-note a { color: var(--gold); }

/* ---------- Choice grids: radio and multi-select checkbox ---------------- */

.x5-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.x5-choices--1 { grid-template-columns: minmax(0, 1fr); }
.x5-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.x5-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.x5-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .28);
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.x5-choice:hover { border-color: rgba(239, 190, 84, .5); }

.x5-choice input {
    /* !important is deliberate and worth the ugliness: this is the rule that
       was silently overridden above, and a radio that swells to fill its row
       destroys the layout of every choice grid on the site. Pin it. */
    flex: 0 0 auto !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px;
    padding: 0 !important;
    margin: 1px 0 0;
    accent-color: var(--gold);
    cursor: pointer;
}

/* The label text takes the rest of the row and wraps inside the border
   instead of running past it. */
.x5-choice > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.x5-choice:has(input:checked) {
    border-color: var(--gold);
    background: rgba(239, 190, 84, .11);
}

.x5-choice:focus-within {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.x5-choices.is-invalid {
    padding: 8px;
    margin: -8px;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .7);
}

/* ---------- Stepped-form navigation -------------------------------------
   BACK was .btn--outline: white-ish text on a near-black translucent panel,
   which on the dark form background was hard to read. It now matches NEXT.

   Styled here rather than by changing the class in the markup so that BACK
   and NEXT cannot drift apart, and so a single rule covers all four forms.  */

.js-step-back {
    color: #111;
    border-color: transparent;
    background: linear-gradient(180deg, var(--gold-2), #dca536);
    box-shadow: 0 10px 28px rgba(239, 190, 84, .18);
}

.js-step-back:hover,
.js-step-back:focus-visible {
    border-color: transparent;
    background: linear-gradient(180deg, #ffe391, var(--gold));
}

/* ---------- Chips: one-tap answers --------------------------------------- */

.x5-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.x5-chip {
    position: relative;
    padding: 9px 17px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.x5-chip:hover { border-color: rgba(239, 190, 84, .5); color: var(--text); }

.x5-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.x5-chip:has(input:checked) {
    border-color: var(--gold);
    background: rgba(239, 190, 84, .14);
    color: var(--gold);
}

.x5-chip:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- File drop ----------------------------------------------------- */

.x5-drop {
    display: block;
    padding: 22px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .22);
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    cursor: pointer;
}

.x5-drop:hover { border-color: var(--gold); }
.x5-drop strong { color: var(--text); }
.x5-drop input[type="file"] { display: block; margin: 10px auto 0; font-size: 11px; }
.x5-drop__name { display: block; margin-top: 6px; color: var(--gold); }

/* ---------- Review: one block per step, each with an Edit link ------------ */

.x5-review__block + .x5-review__block {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.x5-review__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.x5-review__head h5 {
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
}

.x5-review__edit {
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.x5-review__edit:hover { border-color: var(--gold); color: var(--gold); }

/* ==========================================================================
   ACKNOWLEDGEMENT PANEL
   The on-screen twin of the automatic reply email. Same words, same order,
   same logo — so a visitor sees the confirmation before the email lands.
   ========================================================================== */

.x5-ack {
    max-width: 620px;
    margin: 32px auto 0;
    padding: clamp(30px, 5vw, 52px) clamp(22px, 4vw, 44px);
    border: 1px solid rgba(239, 190, 84, .34);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 50% 0%, rgba(239, 190, 84, .12), transparent 70%),
        linear-gradient(180deg, rgba(11, 22, 33, .92), rgba(3, 8, 13, .92));
    text-align: center;
}

/* The success line at the top of the acknowledgement panel. Gold pill, tick,
   uppercase — the same visual language as the section kickers, so it reads as
   part of the site rather than as a browser alert. */
.x5-ack__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 18px;
    padding: 9px 20px;
    border: 1px solid rgba(239, 190, 84, .45);
    border-radius: 999px;
    background: rgba(239, 190, 84, .12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.x5-ack__badge span {
    font-size: 14px;
    line-height: 1;
}

.x5-ack__logo {
    width: 86px;
    height: auto;
    margin-bottom: 26px;
}

.x5-ack__line {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.x5-ack__line--lead {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--text);
}

.x5-ack__signoff {
    margin: 26px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--gold);
}

.x5-ack__note {
    margin: 18px 0 24px;
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .42);
}

/* ---------- Narrow screens ------------------------------------------------ */

@media (max-width: 760px) {
    .x5-choices,
    .x5-choices--3,
    .x5-choices--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Browsers without :has() lose the selected-state highlight, so keep the
   native control visible enough to read the state from. */
@supports not selector(:has(*)) {
    .x5-chip input {
        position: static;
        opacity: 1;
        width: auto;
        height: auto;
        margin-right: 7px;
    }
}

/* The acknowledgement inside a pop-up sits flush — the dialog is the frame. */
.x5-modal .x5-ack {
    margin-top: 20px;
    padding: 30px 24px;
}

.x5-modal /* The success line at the top of the acknowledgement panel. Gold pill, tick,
   uppercase — the same visual language as the section kickers, so it reads as
   part of the site rather than as a browser alert. */
.x5-ack__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 18px;
    padding: 9px 20px;
    border: 1px solid rgba(239, 190, 84, .45);
    border-radius: 999px;
    background: rgba(239, 190, 84, .12);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.x5-ack__badge span {
    font-size: 14px;
    line-height: 1;
}

.x5-ack__logo { width: 64px; margin-bottom: 20px; }


/* ---- Section-closing call to action -------------------------------------
   Kevin asked for breathing room under the buttons that close the Exhibit
   and Sponsors sections, which previously ran straight into the next block. */
.section-cta {
    margin-top: 8px;
    padding-bottom: 64px;
}