/* ==========================================================================
   Executive Evenings v4 (/executive-evenings-v4) — the "Executive Evening AI Mockup" sheet of
   "GPAU Executive Evenings Page v4 1.xlsx". Spec: docs/superpowers/specs/2026-11-06-executive-evenings-v4-design.md

   Scoped to .ee-*. The page also loads capability-page.css (the Recognition band, .cap-page tokens).
   Theme (user, 2026-11-06): champagne, white and dark petrol / black sections, every accent in gold —
   spec docs/superpowers/specs/2026-11-06-executive-evenings-v4-dark-gold-design.md. The agenda follows the
   invitation PDF's timeline; Let's Connect sits on "Muted gold world map on petrol.png".
   ========================================================================== */

.ee-page {
    --ee-gold: #e2c35b;
    --ee-petrol: #022533;
    --ee-ink: #101c24;
    /* Body copy on champagne and white (5.3:1 on champagne). */
    --ee-text: #5a646d;
    --ee-petrol-deep: #011b26;
    /* Pale yellowish gold for small text on dark; warm grey for body copy on dark. */
    --ee-pale-gold: #e6cf8a;
    --ee-warm: #cfc8b8;
    --ee-champagne: #f6efe1;
    --ee-gold-line: #c9a23f;
    /* Gold for text on light backgrounds: 5:1 on champagne, 5.8:1 on white. */
    --ee-gold-text: #80611b;
    --ee-agenda-ink: #013544;
    --ee-connect: #00292e;
    --ee-line: #e7eaec;
    font-family: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
    color: var(--ee-ink);
}

/* The page's own base. Only the Recognition band sits in .cap-page: on the whole page, its `.cap-page p { margin: 0 }`
   outranked every margin set here. */
.ee-page *,
.ee-page *::before,
.ee-page *::after {
    box-sizing: border-box;
}

/* Zero specificity, so the section rules below can set their own margins. */
:where(.ee-page) :where(h1, h2, h3, p, ul, figure, blockquote) {
    margin: 0;
}

.ee-shell {
    width: min(1190px, calc(100% - 48px));
    margin: 0 auto;
}

.ee-page section {
    scroll-margin-top: 80px;
}

.ee-section-title {
    color: var(--ee-ink);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
}

.ee-section-title--light {
    color: #fff;
}

.ee-eyebrow {
    color: var(--ee-pale-gold);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Outline buttons from the mockup, each with the site's arrow. */
.ee-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 24px;
    border: 2px solid currentColor;
    background: transparent;
    font-family: var(--cap-font-alt, 'Nunito Sans', sans-serif);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.ee-btn .ee-arrow {
    width: 18px;
    height: 18px;
    flex: none;
}

.ee-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

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

.ee-btn--gold:hover,
.ee-btn--gold:focus-visible {
    background: var(--ee-gold);
    color: var(--ee-petrol);
    text-decoration: none;
}

/* ==========================================================================
   1. Hero — the background is out of the flow (no CLS); the copy sits on its dark left side.
   ========================================================================== */

.ee-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ee-petrol);
    color: #fff;
}

.ee-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    z-index: -1;
}

.ee-hero__inner {
    padding: 48px 0 56px;
}

/* "—— GPAU EXECUTIVE EVENINGS SERIES": a gold rule before the eyebrow. */
.ee-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #e6eef0;
    font-size: 15px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ee-hero__eyebrow::before {
    content: "";
    width: 48px;
    height: 2px;
    background: var(--ee-gold);
}

.ee-hero__title {
    margin-top: 28px;
}

.ee-hero__logo {
    display: block;
    width: min(640px, 100%);
    height: auto;
}

.ee-hero__tagline {
    margin-top: 36px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.25;
}

.ee-hero__text {
    margin-top: 12px;
    color: #e6eef0;
    font-size: 18px;
    line-height: 1.5;
}

.ee-hero .ee-btn {
    margin-top: 32px;
}

/* ==========================================================================
   2. About the series
   ========================================================================== */

.ee-about {
    padding: 72px 0;
    background: var(--ee-champagne);
}

.ee-about .ee-eyebrow {
    color: var(--ee-gold-text);
}

/* Stacked (below 1024px); the two-column layout is in the min-width: 1024px block at the end. */
.ee-about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

.ee-about__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ee-about__title {
    margin-top: 10px;
    color: var(--ee-ink);
    font-size: 52px;
    font-weight: 500;
    line-height: 1.1;
}

.ee-about__text {
    margin-top: 18px;
    color: var(--ee-text);
    font-size: 18px;
    line-height: 1.45;
}

.ee-about__points {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ee-text);
    font-size: 17px;
    line-height: 1.4;
}

.ee-about__point {
    position: relative;
    padding-left: 24px;
}

.ee-about__point::before {
    content: "";
    position: absolute;
    top: .5em;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ee-gold-line);
}

/* ==========================================================================
   Videos (about card + Executives Insights): poster + YouTube play button until clicked.
   ========================================================================== */

.ee-video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #0b1a24;
}

/* Square corners (user, 2026-11-06). */
.ee-video--card {
    box-shadow: 0 24px 48px -16px rgba(2, 37, 51, .45);
}

.ee-video__button {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ee-video__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ee-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 60px;
    color: var(--ee-gold);
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}

.ee-video__button:hover .ee-video__play,
.ee-video__button:focus-visible .ee-video__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.ee-video__button:focus-visible {
    outline: 3px solid var(--ee-gold);
    outline-offset: -3px;
}

.ee-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   3. Agenda — the invitation PDF's timeline: gold times, dark circles with a gold ring joined by a gold line.
   ========================================================================== */

.ee-agenda {
    padding: 64px 0 72px;
    background: #fff;
}

.ee-agenda__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-bottom: 44px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--ee-gold-line);
}

.ee-agenda__title {
    color: var(--ee-agenda-ink);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.ee-agenda__rule {
    width: 2px;
    height: 36px;
    background: var(--ee-gold-line);
}

.ee-agenda__when {
    color: var(--ee-agenda-ink);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}

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

.ee-agenda__item {
    position: relative;
    display: grid;
    grid-template-columns: 170px 50px minmax(0, 1fr);
    align-items: start;
    gap: 0 28px;
    padding-bottom: 36px;
}

.ee-agenda__item:last-child {
    padding-bottom: 0;
}

/* The line runs from this circle's centre to the next one's: the next circle's centre is 25px below this item. */
.ee-agenda__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 25px;
    bottom: -25px;
    left: calc(170px + 28px + 24px);
    width: 2px;
    background: var(--ee-gold-line);
}

.ee-agenda__time {
    color: var(--ee-gold-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 50px;
    white-space: nowrap;
}

.ee-agenda__icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 2px solid var(--ee-gold-line);
    border-radius: 50%;
    background: var(--ee-agenda-ink);
}

.ee-agenda__icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The first title line sits on the circle's centre line. */
.ee-agenda__content {
    padding-top: 12px;
}

.ee-agenda__session {
    color: var(--ee-agenda-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 26px;
}

.ee-agenda__line {
    margin-top: 4px;
    color: #1f2d33;
    font-size: 16px;
    line-height: 1.5;
}

.ee-agenda__line strong {
    font-weight: 700;
}

.ee-agenda__person {
    white-space: nowrap;
}

/* ==========================================================================
   4. Speakers
   ========================================================================== */

.ee-speakers {
    padding: 56px 0 64px;
    background: var(--ee-petrol-deep);
}

.ee-speakers .ee-section-title {
    color: #fff;
    text-align: center;
}

.ee-speakers__row {
    position: relative;
    margin-top: 32px;
}

.ee-speakers__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

/* The marquee's second copy and its arrows are for phones only. */
.ee-speakers__grid--copy,
.ee-speakers__arrow {
    display: none;
}

/* Previous / next (phones): the Digital Forum's row arrows in the page's colours, 44px touch targets, centred on
   the photos (190 x 645 / 520 = 236px tall). */
.ee-speakers__arrow {
    position: absolute;
    top: 118px;
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(226, 195, 91, .6);
    border-radius: 4px;
    background: rgba(1, 27, 38, .88);
    color: var(--ee-pale-gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    cursor: pointer;
    transform: translateY(-50%);
}

.ee-speakers__arrow--previous {
    left: -8px;
}

.ee-speakers__arrow--next {
    right: -8px;
}

.ee-speakers__arrow:hover,
.ee-speakers__arrow:focus-visible {
    background: var(--ee-petrol);
}

.ee-speakers__arrow:focus-visible {
    outline: 2px solid var(--ee-gold);
    outline-offset: 2px;
}

.ee-speakers__arrow svg {
    width: 18px;
    height: 18px;
}

.ee-speakers__arrow[hidden] {
    display: none;
}

@keyframes ee-speakers-scroll {
    to {
        transform: translateX(-50%);
    }
}

.ee-speaker {
    outline: none;
}

.ee-speaker__photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 520 / 645;
    background: #0b2a36;
}

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

/* The colour copy fades in over the black and white one. */
.ee-speaker__color {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
}

/* .is-touched: set by the script while a finger is on the card (phones have no hover). */
.ee-speaker:hover .ee-speaker__color,
.ee-speaker:focus-visible .ee-speaker__color,
.ee-speaker.is-touched .ee-speaker__color {
    opacity: 1;
}

.ee-speaker:focus-visible .ee-speaker__photo {
    outline: 3px solid var(--ee-gold);
    outline-offset: 2px;
}

.ee-speaker__name {
    margin-top: 14px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.ee-speaker__role {
    margin-top: 4px;
    color: var(--ee-warm);
    font-size: 14px;
    line-height: 1.4;
}

/* ==========================================================================
   5. Quote
   ========================================================================== */

.ee-quote {
    position: relative;
    overflow: hidden;
    padding: 64px 0;
    background: #fff;
}

/* Thin gold lines in the bottom left corner, as in the user's mockup. */
.ee-quote::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
    height: 150px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150' fill='none' stroke='%23c9a23f' stroke-width='1'%3E%3Cpath d='M0 10 62 56l38 60M0 54l100 62M20 150l112-56 90 56'/%3E%3C/svg%3E") no-repeat left bottom / 100% 100%;
    opacity: .7;
    pointer-events: none;
}

.ee-quote__inner {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 36px;
    margin-block: 0;
}

/* Gold gradient from the <linearGradient id="ee-quote-gold"> in the markup. */
.ee-quote__mark {
    grid-row: span 2;
    width: 120px;
    height: 96px;
}

.ee-quote__text {
    margin: 22px 0 0;
    color: var(--ee-ink);
    font-size: 20px;
    line-height: 1.6;
}

.ee-quote__author {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 18px;
    line-height: 1.4;
}

.ee-quote__author strong {
    color: var(--ee-ink);
    font-weight: 600;
}

/* Deep teal: 6.2:1 on white. */
.ee-quote__author span {
    color: #2f6b62;
}

/* ==========================================================================
   6. Recognition band (capability partial): this page has no PerforAssess cards to line up with, so the band keeps
   the page's 1190px shell at every width (capability-page.css widens it to 1308px from 1420px).
   ========================================================================== */

.ee-page .cap-recognition__inner {
    width: min(1190px, calc(100% - 48px));
}

/* "Explore GPAU" is 35px tall in the capability CSS: 44px here, the minimum touch target. */
.ee-page .cap-btn {
    min-height: 44px;
    padding-inline: 12px 8px;
}

/* ==========================================================================
   7. Executives Insights — thin outline frames at both edges, as in the mockup.
   ========================================================================== */

.ee-insights {
    position: relative;
    overflow: hidden;
    padding: 56px 0 64px;
    background: var(--ee-champagne);
}

.ee-insights::before,
.ee-insights::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 360px;
    border: 1.5px solid rgba(201, 162, 63, .45);
    border-radius: 24px;
    transform: skewY(-35deg);
    pointer-events: none;
}

.ee-insights::before {
    top: 40px;
    left: -170px;
}

.ee-insights::after {
    right: -170px;
    bottom: 40px;
}

.ee-insights__inner {
    position: relative;
    z-index: 1;
}

.ee-insights .ee-video {
    margin-top: 24px;
}

/* ==========================================================================
   8. The Evening in Focus — the mockup's mosaic: two tall photos, two small over a wide one, then a bottom row.
   ========================================================================== */

.ee-gallery {
    padding: 48px 0 64px;
    background: #000;
}

/* Five columns so the bottom row can split 36 / 64 as in the mockup: b spans the 2nd and 3rd (.7 + .64 = the
   same 1.34 as a), f the 1st and 2nd. */
.ee-gallery__grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1.34fr .7fr .64fr 1fr 1fr;
    grid-template-rows: 230px 230px 300px;
    grid-template-areas:
        "a b b c d"
        "a b b e e"
        "f f g g g";
    gap: 16px;
}

/* Square corners, like the videos (user, 2026-11-06). */
.ee-gallery__cell {
    margin: 0;
    overflow: hidden;
    background: #111;
}

.ee-gallery__cell--a { grid-area: a; }
.ee-gallery__cell--b { grid-area: b; }
.ee-gallery__cell--c { grid-area: c; }
.ee-gallery__cell--d { grid-area: d; }
.ee-gallery__cell--e { grid-area: e; }
.ee-gallery__cell--f { grid-area: f; }
.ee-gallery__cell--g { grid-area: g; }

.ee-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ee-gallery__cell:hover .ee-gallery__img {
    transform: scale(1.04);
}

/* ==========================================================================
   9. Let's Connect — the gold world map; the copy sits on its dark left side. Phones and tablets: the copy on petrol,
   the map as a banner under it.
   ========================================================================== */

.ee-connect {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 480px;
    background: var(--ee-connect);
}

.ee-connect__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* Darkens the left side, so the copy stays readable where the bokeh reaches it (narrow desktops). */
.ee-connect::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 41, 46, .9) 0%, rgba(0, 41, 46, .6) 35%, rgba(0, 41, 46, 0) 60%);
    pointer-events: none;
}

.ee-connect__inner {
    position: relative;
    z-index: 2;
    padding: 64px 0;
}

.ee-connect__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 500px;
}

.ee-connect__title {
    color: #fff;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
}

.ee-connect__text {
    margin-top: 14px;
    color: var(--ee-warm);
    font-size: 18px;
    line-height: 1.5;
}

.ee-connect__text + .ee-connect__text {
    margin-top: 4px;
}

.ee-connect .ee-btn {
    margin-top: 28px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {
    .ee-speakers__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 32px;
    }

    .ee-about__title {
        font-size: 44px;
    }
}

@media (max-width: 1023px) {
    .ee-connect {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    /* Cropped to the map, the image's right part. */
    .ee-connect__bg {
        position: static;
        order: 2;
        height: auto;
        aspect-ratio: 16 / 10;
        object-position: 80% center;
    }

    .ee-connect__inner {
        padding: 48px 0 8px;
    }

    .ee-connect::before {
        display: none;
    }

    .ee-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 340px 200px 200px 220px;
        grid-template-areas:
            "a b"
            "c d"
            "e e"
            "f g";
    }
}

@media (max-width: 767px) {
    .ee-hero {
        min-height: 0;
    }

    .ee-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(2, 37, 51, .55) 0%, rgba(2, 37, 51, .85) 100%);
    }

    .ee-hero__media {
        object-position: center;
    }

    .ee-hero__inner {
        padding: 40px 0 48px;
    }

    .ee-hero__eyebrow {
        gap: 12px;
        font-size: 13px;
    }

    .ee-hero__eyebrow::before {
        width: 28px;
    }

    .ee-hero__tagline {
        margin-top: 28px;
        font-size: 22px;
    }

    .ee-hero__text {
        font-size: 16px;
    }

    .ee-section-title {
        font-size: 26px;
    }

    .ee-about,
    .ee-speakers,
    .ee-quote,
    .ee-insights,
    .ee-gallery {
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .ee-about__title {
        font-size: 36px;
    }

    .ee-connect__title {
        font-size: 30px;
    }

    .ee-connect__text {
        font-size: 16px;
    }

    .ee-about__text,
    .ee-about__points {
        font-size: 16px;
    }

    .ee-btn {
        font-size: 16px;
    }

    .ee-agenda {
        padding: 40px 0 48px;
    }

    /* Title over the date: on one line they would wrap and leave the divider hanging. */
    .ee-agenda__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 28px;
        padding-bottom: 16px;
    }

    .ee-agenda__title {
        font-size: 26px;
    }

    .ee-agenda__rule {
        display: none;
    }

    .ee-agenda__when {
        font-size: 20px;
    }

    /* Circle | time over the session. */
    .ee-agenda__item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0 14px;
        padding-bottom: 28px;
    }

    .ee-agenda__item:not(:last-child)::before {
        top: 22px;
        bottom: -22px;
        left: 21px;
    }

    .ee-agenda__icon {
        grid-row: 1 / span 2;
        grid-column: 1;
        width: 44px;
        height: 44px;
    }

    .ee-agenda__icon svg {
        width: 21px;
        height: 21px;
    }

    .ee-agenda__time {
        grid-column: 2;
        font-size: 17px;
        line-height: 44px;
    }

    .ee-agenda__content {
        grid-column: 2;
        padding-top: 0;
    }

    .ee-agenda__session {
        font-size: 17px;
        line-height: 1.4;
    }

    .ee-agenda__line {
        font-size: 15px;
    }

    /* "Badreddin Alharithy | AlBawani Holding" is wider than the column on phones. */
    .ee-agenda__person {
        white-space: normal;
    }

    /* Speakers: the Digital Forum's marquee, edge to edge, fading out at the sides. Two copies of the row, so
       moving the track by half of it (one copy, gap included) loops seamlessly. 40s: about the forum's speed per card. */
    .ee-speakers__marquee {
        margin-inline: -24px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    }

    .ee-speakers__track {
        display: flex;
        width: max-content;
        animation: ee-speakers-scroll 40s linear infinite;
        will-change: transform;
    }

    .ee-speakers.is-paused .ee-speakers__track {
        animation-play-state: paused;
    }

    .ee-speakers__grid,
    .ee-speakers__grid--copy {
        display: flex;
        flex: none;
        gap: 16px;
        padding-right: 16px;
    }

    .ee-speaker {
        flex: 0 0 190px;
        width: 190px;
    }

    .ee-speakers__arrow {
        display: inline-flex;
    }

    .ee-speaker__name {
        font-size: 15px;
    }

    .ee-speaker__role {
        font-size: 13px;
    }

    .ee-quote__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .ee-quote__mark {
        grid-row: auto;
        width: 64px;
        height: 51px;
    }

    .ee-quote__text {
        margin-top: 16px;
        font-size: 17px;
    }

    .ee-quote__author {
        font-size: 16px;
    }

    .ee-quote::before {
        width: 140px;
        height: 96px;
    }

    .ee-insights::before,
    .ee-insights::after {
        display: none;
    }

    .ee-video__play {
        width: 64px;
        height: 46px;
    }

    .ee-gallery__grid {
        grid-template-rows: 260px 150px 180px 160px;
        gap: 10px;
    }
}

/* Event Overview, two columns (user, 2026-11-06): the title on one line, a large video, and the copy starting and
   ending with the video with normal spacing. The copy's type sets its height: 20px / 1.6 text and 18px / 1.6 points
   in a 400px column are 398px tall, the height of a 708px video. --ee-about-u is 1px from a 1152px shell up, and
   shrinks with the section below that (container units), so everything scales together and the alignment holds
   down to 1024px (44px title, 17px text there). */
@media (min-width: 1024px) {
    .ee-about {
        container-type: inline-size;
    }

    .ee-about__inner {
        --ee-about-u: min(1px, (100cqw - 48px) / 1152);
        grid-template-columns: calc(400 * var(--ee-about-u)) calc(708 * var(--ee-about-u));
        justify-content: space-between;
        align-items: start;
        gap: 0;
    }

    .ee-about .ee-eyebrow {
        font-size: calc(14 * var(--ee-about-u));
    }

    .ee-about__title {
        margin-top: calc(10 * var(--ee-about-u));
        font-size: calc(52 * var(--ee-about-u));
        white-space: nowrap;
    }

    .ee-about__text {
        margin-top: calc(16 * var(--ee-about-u));
        font-size: calc(20 * var(--ee-about-u));
        line-height: 1.6;
    }

    .ee-about__points {
        margin-top: calc(16 * var(--ee-about-u));
        gap: calc(8 * var(--ee-about-u));
        font-size: calc(18 * var(--ee-about-u));
        line-height: 1.6;
    }

    .ee-about__point {
        padding-left: calc(24 * var(--ee-about-u));
    }
}

/* 320px phones: the 36px title (275px) would wrap in the 272px column; one line at 34px (user: on one line). */
@media (max-width: 359px) {
    .ee-about__title {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* The speakers' row stands still and scrolls by hand (the arrows scroll it). */
    .ee-speakers__marquee {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .ee-speakers__track {
        animation: none;
        transform: none;
    }

    /* Later than the phone rule of the same weight, so it wins there too. */
    .ee-speakers__grid--copy {
        display: none;
    }

    .ee-btn,
    .ee-video__play,
    .ee-speaker__color,
    .ee-gallery__img {
        transition: none;
    }

    .ee-gallery__cell:hover .ee-gallery__img {
        transform: none;
    }
}