/*
 * Hand-written overrides that sit on top of the theme.
 *
 * These came across as an inline <style> block on the live page and are
 * already commented — the notes explaining each fix are the original
 * author's. Kept as one file because they read as one list of fixes.
 */

/* Events section: its dark look came only from a background-image gradient
       over a transparent background-color; with contain:paint + the scroll-jack
       transform, a strip of the cream <body> showed through behind the last card
       (the "white bar"). Give it a solid dark background-color to fill any gap
       (the gradient + skyline SVG still layer on top for the transition). */
    .main-events { background-color: #181818; }

    .img-grayscale {
        filter: grayscale(100%);
    }

    .img-grayscale:hover {
        filter: grayscale(0%);
    }

    .main-social {
        padding-inline: var(--offset-x);
    }

    .social-feed-container {
        margin-top: 115px;
        padding-inline: var(--offset-x);
    }

    /* Speaker cards: the name sits in the solid black area BELOW the photo, so the
       decorative scrim gradient just showed as a murky semi-transparent bar over the
       photo bottom — remove it for a clean photo → red line → name-box edge.
       (Scoped to speaker cards only; home/event/video cards keep their scrim.) */
    .speakers__card-scrim,
    .event-speakers__card-scrim {
        background: none;
    }

    /* Theme-red accent line at the photo's bottom edge (top of the name box) on
       hover / keyboard focus. */
    .speakers__card .speakers__card-scrim::after,
    .event-speakers__card .event-speakers__card-scrim::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px;
        height: 3px;
        background-color: rgb(225, 37, 27);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .speakers__card:hover .speakers__card-scrim::after,
    .speakers__card:focus-within .speakers__card-scrim::after,
    .event-speakers__card:hover .event-speakers__card-scrim::after,
    .event-speakers__card:focus-within .event-speakers__card-scrim::after {
        opacity: 1;
    }

    /* World map: interactive pins + click-to-fullscreen */
    .js-map-interactive { cursor: zoom-in; }
    .main-about__map { position: relative; }
    .js-world-map .js-map-pin { cursor: pointer; }

    /* City popup shown when a map pin is clicked (layers above the fullscreen overlay) */
    .map-popup {
        position: fixed;
        z-index: 10001;
        display: none;
        min-width: 200px;
        max-width: 280px;
        padding: 16px 18px 18px;
        background: #fff;
        color: #181818;
        border-radius: 6px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    }
    .map-popup.is-open { display: block; }
    .map-popup__close {
        position: absolute;
        top: 6px;
        right: 8px;
        width: 24px;
        height: 24px;
        font-size: 22px;
        line-height: 1;
        color: #888;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .map-popup__close:hover { color: #181818; }
    .map-popup__city {
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgb(225, 37, 27);
        font-weight: 700;
        margin: 0 20px 6px 0;
    }
    .map-popup__event { font-size: 16px; font-weight: 700; line-height: 1.25; margin: 0 0 4px; }
    .map-popup__date { font-size: 13px; color: #555; margin: 0 0 12px; }
    .map-popup__more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-weight: 700;
        color: #fff;
        background: rgb(225, 37, 27);
        padding: 8px 14px;
        border-radius: 4px;
        text-decoration: none;
    }
    .map-popup__more:hover { background: rgb(196, 30, 22); }
    .map-popup__empty { font-size: 13px; color: #666; margin: 0; }

    .main-about__map-expand {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: #181818;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(24, 24, 24, 0.15);
        border-radius: 4px;
        cursor: pointer;
        z-index: 2;
        transition: background 0.2s;
    }
    .main-about__map-expand:hover { background: rgba(255, 255, 255, 0.95); }

    .map-fs {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: none;
        padding: 6vh 5vw;
        box-sizing: border-box;
        background: rgb(241, 237, 228);
    }
    .map-fs.is-open { display: flex; align-items: center; justify-content: center; }
    .map-fs__inner { width: 100%; max-width: 1500px; }
    .map-fs__map { width: 100%; }
    .map-fs__map .main-about__map-svg { width: 100%; height: auto; }
    .map-fs__map .main-about__map-title,
    .map-fs__map .main-about__map-legend-text { color: #181818; }
    .map-fs__close {
        position: fixed;
        top: 16px;
        right: 26px;
        width: 44px;
        height: 44px;
        font-size: 34px;
        line-height: 1;
        color: #181818;
        background: none;
        border: 0;
        cursor: pointer;
        z-index: 1;
    }
    body.map-fs-open { overflow: hidden; }

    /* Partner logos are wrapped in a link; make the link fill its grid cell so the
       theme's uniform-cell sizing (grid + object-fit: contain) aligns every logo. */
    .partners-list__item > a,
    .event-partners__item > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .main-partners__wall-item > a {
        position: absolute;
        inset: 0;
        display: block;
    }
    /* Keep every logo contained within its cell (no distortion / overflow). */
    .partners-list__item-img,
    .main-partners__wall-image,
    .event-partners-img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
    }

    /* Sponsor popup (opened by clicking a partner logo) */
    .partner-popup[hidden] { display: none; }
    .partner-popup {
        position: fixed;
        inset: 0;
        z-index: 10002;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .partner-popup__backdrop { position: absolute; inset: 0; background: rgba(24, 24, 24, 0.6); }
    .partner-popup__card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 420px;
        max-height: 85vh;
        overflow-y: auto;
        background: #fff;
        color: #181818;
        border-radius: 8px;
        padding: 28px 28px 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
    .partner-popup__close {
        position: absolute;
        top: 10px;
        right: 12px;
        width: 30px;
        height: 30px;
        font-size: 26px;
        line-height: 1;
        color: #999;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .partner-popup__close:hover { color: #181818; }
    .partner-popup__eyebrow {
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgb(225, 37, 27);
        font-weight: 700;
        margin: 0 0 6px;
    }
    .partner-popup__name { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0 0 12px; }
    .partner-popup__desc { font-size: 15px; line-height: 1.5; color: #333; margin: 0 0 16px; }
    .partner-popup__label {
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #888;
        font-weight: 700;
        margin: 0 0 4px;
    }
    .partner-popup__products-text { font-size: 14px; line-height: 1.45; color: #333; margin: 0 0 20px; }
    .partner-popup__more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        font-weight: 700;
        color: #fff;
        background: rgb(225, 37, 27);
        padding: 11px 20px;
        border-radius: 4px;
        text-decoration: none;
    }
    .partner-popup__more:hover { background: rgb(196, 30, 22); }
    body.partner-popup-open { overflow: hidden; }

    /* Name search box (speakers + partners) — was a fixed 32px/14px, which read as
       visibly undersized next to the "All partners" dropdown and the Show-by boxes.
       Don't hardcode a height to match them: the theme scales those controls' padding
       with the viewport (~32px tall at 1440px, ~48px above ~1450px), so any fixed value
       only lines up at one width. Stretching to the flex row tracks them everywhere. */
    .speakers-search {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        align-self: stretch;
        min-height: 32px;
        padding: 0 16px;
        border: 1px solid rgb(204, 204, 204);
        border-radius: 0;
        background: transparent;
        width: 240px;
        max-width: 100%;
    }
    .speakers-search__icon { display: inline-flex; width: 15px; height: 15px; color: #888; flex: none; }
    .speakers-search__icon svg { width: 100%; height: 100%; }
    .speakers-search__input {
        border: 0;
        outline: 0;
        background: transparent;
        font: inherit;
        font-size: 16px;   /* match the Country / City / Show-by controls */
        color: #181818;
        width: 100%;
    }
    /* Hide the native search clear so we can use our own reset button. */
    .speakers-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
    .speakers-search__input::placeholder { color: #999; }
    .speakers-search__reset {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        flex: none;
        padding: 0;
        border: 0;
        background: none;
        color: #888;
        cursor: pointer;
        transition: color .2s;
    }
    .speakers-search__reset:hover { color: #181818; }
    .speakers-search__reset[hidden] { display: none; }
    .speakers-search__reset svg { width: 10px; height: 10px; }
    @media (max-width: 767px) {
        /* Shares a row with .speakers-filter__btn--mobile, so align-self: stretch
           above already matches it — only the placement needs overriding here. */
        .speakers-search { margin-left: 0; width: 100%; padding: 0 12px; }
    }

    /* Partners page reuses .speakers-search styling; the partners controls row is
       space-between with no gap, so leave room before the "Show by" control. */
    .partners-search { margin-right: 20px; }
    @media (max-width: 767px) {
        .partners-controls { flex-wrap: wrap; gap: 12px 16px; }
        /* The row wraps here, so the search sits alone on its own flex line and has
           nothing to stretch against — give it the explicit height of
           .partners-controls__filter, which stacks directly above it. */
        .partners-search { margin-right: 0; order: 3; height: 44px; }
    }

    /* Breadcrumb path (HOME > PARTNERS / SEARCH ...) was overlapping the logo:
       the logo overhangs the 64px header by ~67px, but the breadcrumb only
       offsets by --header-height. Push it clear of the logo on tablet/desktop. */
    @media screen and (min-width: 768px) {
        .breadcrumbs { margin-top: 152px; }
    }

    /* Search page: the input has no background in the theme, so the browser's
       default white fill rendered as a solid white box over the cream page. The
       design is an underlined field — keep it transparent. */
    .search__input { background: transparent; }

    /* Search page: the results area reserved a full viewport height (100vh) even
       when empty, leaving a huge blank gap under "No results found". Reduce the
       reserved minimum so the page collapses to the content. */
    .search-list { min-height: 40vh; }

    /* Event "How it was" gallery: its padding-top was overridden to 0, so the
       heading sat flush against the agenda above. Restore top spacing to match
       the section rhythm. */
    .event-gallery { padding-top: clamp(64px, 10vw, 120px); }

    /* Event gallery images shipped with rounded corners (12px, 20px on mobile),
       which reads as out of theme against the site's square-cornered imagery.
       Square the image; the grid-item wrapper (which clips it via overflow:hidden)
       is squared in the masonry override further down. */
    .event-gallery__grid-img { border-radius: 0; }

    /* Home event cards: on hover the image zooms (scale 1.05) and its light
       bottom edge poked a thin pale strip below the scrim, above the black
       caption. Cover that seam with a bar that is black normally (invisible over
       the black card) and turns the theme red on hover. */
    .main-events__card { position: relative; }
    .main-events__card-scrim::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 6px;
        background-color: #181818;
        z-index: 3;
        transition: background-color 0.3s ease;
    }
    .main-events__card:hover .main-events__card-scrim::after,
    .main-events__card:focus-within .main-events__card-scrim::after {
        background-color: rgb(225, 37, 27);
    }

    /* Back-to-top arrow: a solid disc, which settles the whole question.

       It sits at the BOTTOM (position:fixed) while the header colour class
       reflects the section at the TOP, so a transparent button turned
       dark-on-dark / light-on-light and vanished. mix-blend-mode:difference
       cannot help — the button has a transform (its show/hide slide) which
       creates a stacking context, so difference has no page backdrop to invert
       against. What was here instead read the background behind the button on
       scroll and toggled .is-on-light to flip the arrow between white and dark,
       with a drop-shadow for the photos where the answer was ambiguous.

       It was still hard to see: over a dark filter panel a white arrow with a
       dark shadow is a white arrow on dark, technically legible and easy to
       miss. A disc of its own carries its own contrast and needs nothing
       measured, so .is-on-light no longer changes the colour — the script may
       still set the class and it does nothing.

       Red, and it has to be. This site is cream, #181818 and #e1251b: a dark
       disc disappears into a dark event card and a pale one disappears into the
       cream between them, so the only colour that holds on both is the red.
       The chat bubble below is red too — they read as a pair of controls in the
       same corner, which is what they are. */
    /* Deepan - the disc's colour arrives as a property, so the section decides
       it and there is one declaration rather than two competing ones.

       Worth recording what nearly went in here instead. I had this as a
       second `!important` rule on `.header--red .header__scroll-top-btn`,
       measured it, read red back, and was about to write that the cascade had
       ignored specificity. It had not: this button carries
       `transition: background-color .25s`, and every reading I took was of a
       colour part-way through that animation. Left to settle it was dark all
       along. The property version is kept because it is simpler, not because
       the other one was broken. */
    .header__scroll-top-btn {
        background-color: var(--scroll-top-disc, #e1251b) !important;
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(24, 24, 24, .3);
        transition: transform .4s ease-in-out, background-color .25s ease-in-out;
    }
    .header__scroll-top-btn svg,
    .header__scroll-top-btn.is-on-light svg {
        color: #fff !important;
        filter: none;
    }

    /* Deepan - except on the red sections, where red is no colour at all.

       The disc was put here because the theme leaves the button transparent
       on a desktop and tints only the glyph, and on this archive the arrow
       was hard to pick out. Red held on the dark sections and on the cream
       ones — and disappeared completely on the Mission block, which is that
       same red: all you could see was the shadow and a white arrow floating
       over the words.

       The theme already tells us which kind of section we are over, and it
       is right about it — `header--red` is on the header through the whole
       Mission block at every width, checked. So the one case that needs
       saying is this one, and the glyph is already white.

       Both selectors because the theme writes both; the class is on the
       header here, but its own rules hedge and there is no reason to be
       less careful. */
    .header--red,
    body.header--red {
        --scroll-top-disc: #181818;
    }

    @media (any-hover: hover), (hover: hover) and (pointer: fine) {
        .header__scroll-top-btn:hover { background-color: #181818 !important; }
    }

    /* World-map legend: center the two legend items under the map instead of
       left-aligning them (they were butting up against the section's red block). */
    .main-about__map-legend {
        justify-content: center;
        text-align: center;
    }

    /* Header bar was over-wide on large screens (552px, ~220px of empty space
       around the Menu button). Tighten it when closed; the open state keeps its
       own width so the nav-item slide-out is unaffected. */
    @media screen and (min-width: 1441px) {
        .header__menu:not(.header__menu--opened) { width: 430px; }
    }
    /* When a dropdown is open but it's NOT the Menu (i.e. Social or Search), the
       menu's reserved slide-out width is just an empty strip — clicking Social
       after Menu left a wide gap where the menu links had been. Hug the buttons
       in that case. Kept off the Menu-open state so its nav-item slide-out still
       has room. (:has unsupported -> rule ignored, harmless.) */
    .header__menu.header__menu--opened:not(:has(.header__nav-wrapper.is-active)) {
        width: -moz-max-content !important;
        width: max-content !important;
    }
    /* When a dropdown is closed the theme only fades its panel's opacity to 0 but
       leaves it visibility:visible, full width and pointer-events:auto — so the
       Menu items lingered on screen (and kept catching clicks) after switching to
       Social. Force every non-active panel fully hidden so it truly collapses. */
    .header__menu .js-dropdown-wrapper:not(.is-active) .js-dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Hover highlight for the Menu and Social Networks buttons (theme red).
       The theme only dimmed them to 40% opacity on hover. */
    .header__menu-btn:not(:disabled):hover,
    .header__menu-btn:not(:disabled):focus-visible {
        background-color: rgb(225, 37, 27);
    }
    .header__social-btn:not(:disabled):hover,
    .header__social-btn:not(:disabled):focus-visible {
        background-color: rgb(196, 30, 22);
    }
    /* Keep content fully opaque (override the theme's opacity:.4 dim) and make
       the Menu button's text + hamburger lines white on the red highlight. */
    .header__menu-btn:not(:disabled):hover span,
    .header__menu-btn:not(:disabled):hover svg,
    .header__social-btn:not(:disabled):hover span,
    .header__social-btn:not(:disabled):hover svg {
        opacity: 1;
    }
    .header__menu-btn:not(:disabled):hover .header__btn-text,
    .header__menu-btn:not(:disabled):hover .slide-btn__inner,
    .header__menu-btn:not(:disabled):hover .slide-btn__hover-elem {
        color: #fff;
    }
    .header__menu-btn:not(:disabled):hover .header__btn-el::before,
    .header__menu-btn:not(:disabled):hover .header__btn-el::after {
        background-color: #fff;
    }

    /* "About events" column: the shared text wrapper uses space-between (right
       for the stat columns: number top / label bottom), but that pushed the red
       eyebrow line far above the "About events" label. Top-align just this first
       column so the line hugs the label like every other section, with a small
       gap before the description. */
    .main-about__top-container-item:first-child .main-about__item-text-wrapper {
        justify-content: flex-start;
    }
    .main-about__top-container-item:first-child .main-about__item-text-wrapper .main-about__item-text + .main-about__item-text {
        margin-top: 16px;
    }

    /* Home events filter — "Show more" button for the "All years" view (first 20,
       then load the next page). The filter is position:sticky, top:80% and floats
       near the viewport bottom over the whole section. Scoping its sticky container
       to just the cards (.main-events__scroll) makes it unstick at the list bottom,
       so the "Show more" row below it is never covered by the year selector. The
       "All years" option itself reuses .main-events__filter-year-button so it
       already matches the year pills. */
    .main-events__scroll {
        display: flex;
        flex-direction: column;
        gap: inherit;
    }
    .main-events__more {
        display: flex;
        justify-content: center;
        margin-top: 0;
        padding-bottom: 8px;
        position: relative;
        z-index: 2;
    }
    .main-events__more[hidden] {
        display: none;
    }
    .main-events__more-btn {
        align-items: center;
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 100px;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        height: 50px;
        justify-content: center;
        min-width: 200px;
        overflow: hidden;
        padding-inline: 44px;
        transition: background-color 0.4s cubic-bezier(0.25, 0.25, 0, 1),
                    color 0.4s cubic-bezier(0.25, 0.25, 0, 1),
                    border-color 0.4s cubic-bezier(0.25, 0.25, 0, 1);
    }
    .main-events__more-btn:hover {
        background-color: #fff;
        border-color: #fff;
        color: #181818;
    }

    /* Event agenda — "break" slots (registration, coffee/lunch, closing) have no
       speakers, so they render as muted, non-clickable dividers between the
       clickable topic rows (which carry chevrons + speaker avatars). */
    .event-agenda__break {
        align-items: baseline;
        border-bottom: 1px solid #18181824;
        color: #18181882;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
        padding: clamp(14px, 1.5vw, 18px) 32px clamp(14px, 1.5vw, 18px) 0;
    }
    .event-agenda__break-time {
        color: #e1251bb3;
        flex-shrink: 0;
        font-size: clamp(.8rem, 1vw, .92rem);
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .event-agenda__break-title {
        font-size: clamp(.95rem, 1.1vw, 1.08rem);
        font-weight: 500;
    }

    /* Event speaker card — link the speaker to the topic they present. */
    .event-speakers__card-topic {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: rgba(255, 255, 255, 0.82);
        display: -webkit-box;
        font-size: clamp(.8rem, .95vw, .9rem);
        line-height: 1.35;
        margin-top: 12px;
        overflow: hidden;
    }
    .event-speakers__card-topic-label {
        color: rgba(255, 255, 255, 0.55);
        display: block;
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .09em;
        margin-bottom: 3px;
        text-transform: uppercase;
    }

    /* Home events filter — the Country / City / Year dropdown panels can list many
       options and ran off-screen with no way to reach the lower ones. Cap the
       panel height and let it scroll. */
    .main-events__filter-location-menu {
        max-height: min(58vh, 360px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Event Format: the description text sat flush against its image (0px gap),
       so the copy read as if it overlapped the photo. Add breathing room and let
       the text column absorb it so the promo image keeps its size. */
    .main-formats__item-info {
        gap: clamp(16px, 2vw, 30px);
    }
    .main-formats__item-info-description {
        min-width: 0;
    }

    /* Event hero breadcrumb: it used to sit at the top of the vertically-centred
       title block, so on tall screens it floated orphaned mid-hero and on short
       ones it rode up under the logo. Stretch the inner to the full hero height,
       pin the breadcrumb to the top (clearing the overhanging logo), and let the
       title block re-centre in the space below it. Alignment with the title comes
       for free from the inner's padding-inline. */
    .event-heading__inner {
        align-self: stretch;
        justify-content: flex-start;
    }
    .event-heading__breadcrumbs {
        flex: 0 0 auto;
        margin-top: clamp(10px, 1.4vh, 24px);
    }
    .event-heading__content {
        margin-block: auto;
    }
    /* Mid widths (64px header): the logo sits lowest relative to the smaller hero
       top-padding here, so give the breadcrumb a little extra clearance. */
    @media (min-width: 768px) and (max-width: 1439px) {
        .event-heading__breadcrumbs {
            margin-top: 36px;
        }
    }

    /* "How it was" gallery — uniform CSS grid. The earlier CSS multi-column
       (column-count) masonry filled columns greedily to the balanced height, so a
       gallery like 26 photos / 5 cols became 6·6·6·6·2 — the last column nearly
       empty, leaving a big blank strip on the right. CSS grid fills ROW-major and
       stays uniform. ~95% of the photos are ~3:2 landscape, so 3:2 cells with
       object-fit: cover crop almost nothing (only the few 1.9-wide / portrait ones
       get a small centred trim). Markup + lightbox (data-index) unchanged. */
    .event-gallery__grid {
        display: grid !important;
        column-count: auto !important;   /* cancel the old masonry */
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    @media (min-width: 768px)  { .event-gallery__grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1200px) { .event-gallery__grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 1800px) { .event-gallery__grid { grid-template-columns: repeat(5, 1fr); } }

    .event-gallery__grid-item {
        flex: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;            /* grid `gap` handles spacing now */
        aspect-ratio: 3 / 2;
        overflow: hidden;
        border-radius: 0;
    }
    .event-gallery__grid-item picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .event-gallery__grid-img {
        aspect-ratio: auto !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        display: block;
    }

    /* Partners filters: per-option match counts (A–Z + logo type) rendered a touch
       muted so the option label still leads. */
    .filter-name__item-count { opacity: 0.55; font-variant-numeric: tabular-nums; }

    /* Partners "Export CSV" button — plain text-btn by default; give it a square
       bordered look so it reads as an action, matching the square-corner theme. */
    .partners-export {
        margin-left: auto;
        align-self: center;
        padding: 10px 16px;
        border: 1px solid currentColor;
        background: transparent;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color .15s, color .15s;
    }
    .partners-export:hover { background: #181818; color: #f1ede4; }

    /* Per-partner logo-size override (admin "Logo size" on the event↔partner pivot).
       Only applies when a size is set; otherwise the section's default size stands. */
    .event-partners__item.ep-logo--sm .event-partners-img { max-width: 90px; }
    .event-partners__item.ep-logo--md .event-partners-img { max-width: 150px; }
    .event-partners__item.ep-logo--lg .event-partners-img { max-width: 220px; }

    /* Speakers with no photo on file: a clean initials monogram instead of a
       broken-image icon (x-speaker-photo falls back to this). Sized to the 3:4
       card-image area so card heights stay uniform. */
    .speaker-photo-placeholder {
        aspect-ratio: 3 / 4;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #202020;
        overflow: hidden;
        container-type: inline-size;
    }
    .speaker-photo-placeholder__initials {
        color: rgba(255, 255, 255, 0.22);
        font-weight: 700;
        /* Scale to the placeholder's own width so it fits big cards and small
           agenda thumbnails alike. */
        font-size: min(4rem, 42cqw);
        letter-spacing: 0.04em;
        line-height: 1;
    }

    /* Speaker popup: the close (×) button sits at the top of the popup body,
       which itself scrolls (overflow:auto, max-height 90vh). On long bios the
       button scrolled out of reach. Pin it to the top of the scroll area so it
       is always reachable. It precedes .speaker-info in the DOM, so it needs a
       z-index (sticky is positioned) to stay above the later-painting content,
       plus the popup background so content scrolls cleanly beneath it. */
    .speaker-popup__close-btn {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #f1ede4;
        /* Stay pinned to the top-right of the scroll area, not just top-left flow. */
        align-self: flex-end;
        margin-left: auto;
        flex: 0 0 auto;
    }

    /* Event hero video (WP "image-video" header): a YouTube iframe can't object-fit,
       so scale it to cover the hero box exactly like the image slideshow does. */
    .event-heading__media--video {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
    }
    .event-heading__media-video {
        position: absolute;
        top: 50%;
        left: 50%;
        /* Deepan - scaled past the edges so YouTube's own furniture falls
           outside the box.

           A background film should show the film and nothing else, and an
           embed cannot be asked for that: `controls=0` takes the progress bar
           and the buttons away, but the title along the top and the "More
           videos" and logo along the bottom come back whenever the player is
           paused or the pointer is near, and `modestbranding` has not hidden
           the title for years. Both bands sit within about 7% of an edge, so
           over-scaling by a fifth pushes them out of sight and leaves the
           middle — which is where the picture is — untouched. */
        transform: translate(-50%, -50%) scale(1.2);
        width: 100%;
        height: 100%;
        min-width: 177.78vh;   /* cover 16:9 */
        min-height: 56.25vw;
        border: 0;
    }

    /* Pipedrive contact form: the embed's background is transparent (the form is
       designed "Light" in Pipedrive), so inside our red Contact pop-up it inherited
       the red — making the dark labels + red Submit button unreadable. Give the form
       its own white card. .pipedriveWebForms is Pipedrive's container div in OUR DOM
       (only the <iframe> inside it is cross-origin), so styling it here is fine. */
    .contact-form__pipedrive,
    .contact-form__pipedrive .pipedriveWebForms {
        background: #fff !important;
    }
    .contact-form__pipedrive {
        padding: 20px;
        border-radius: 0;
    }

    /* Search results: make each card's top black bar a uniform height per row so the
       photos line up. Speaker name + role clamp to 2 lines (names still show in full
       up to two lines); subgrid — where supported — sizes every card in a row to its
       tallest bar at any viewport, for both event and speaker cards. Older browsers
       just keep the clamped text and the original ragged bars (harmless). */
    .search-list__container .speakers__card-name,
    .search-list__container .speakers__card-position {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    @supports (grid-template-rows: subgrid) {
        .search-list__container > a {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 2;
        }
    }

    /* ============================================================
       Site typeface: ABC Normal
         Body copy -> ABC Normal Regular (400)
         Headings  -> ABC Normal Medium  (600)  — clean, not heavy
       The theme sets font-family:Satoshi once on <body> (inherited
       everywhere) and uses weight 400 for body / 600 for headings.
       We (a) publish an "ABC Normal" family and set it on <body>, and
       (b) re-point the theme's own "Satoshi" family at the same files
       so any explicit font-family:Satoshi rule switches over too.
       This file loads after the compiled theme CSS, so it wins by
       source order (weights >=500 map to Medium to stay "not heavy").
       ============================================================ */
    @font-face{font-family:"ABC Normal";font-style:normal;font-weight:400;font-display:swap;src:url(/build/fonts/ABCNormal-Regular.woff2) format("woff2"),url(/build/fonts/ABCNormal-Regular.woff) format("woff")}
    @font-face{font-family:"ABC Normal";font-style:normal;font-weight:500;font-display:swap;src:url(/build/fonts/ABCNormal-Medium.woff2) format("woff2"),url(/build/fonts/ABCNormal-Medium.woff) format("woff")}
    @font-face{font-family:"ABC Normal";font-style:normal;font-weight:600;font-display:swap;src:url(/build/fonts/ABCNormal-Medium.woff2) format("woff2"),url(/build/fonts/ABCNormal-Medium.woff) format("woff")}
    @font-face{font-family:"ABC Normal";font-style:normal;font-weight:700;font-display:swap;src:url(/build/fonts/ABCNormal-Medium.woff2) format("woff2"),url(/build/fonts/ABCNormal-Medium.woff) format("woff")}
    /* Re-point the theme's Satoshi family at ABC Normal (same weights the theme declares). */
    @font-face{font-family:"Satoshi";font-style:normal;font-weight:400;font-display:swap;src:url(/build/fonts/ABCNormal-Regular.woff2) format("woff2"),url(/build/fonts/ABCNormal-Regular.woff) format("woff")}
    @font-face{font-family:"Satoshi";font-style:normal;font-weight:600;font-display:swap;src:url(/build/fonts/ABCNormal-Medium.woff2) format("woff2"),url(/build/fonts/ABCNormal-Medium.woff) format("woff")}
    /* Fallback is the system sans (full Unicode) — NOT Satoshi: ABC Normal covers all
       Latin/punctuation the site uses; only rare non-Latin glyphs (e.g. Georgian city
       names) fall through, and Satoshi is Latin-only too, so listing it just triggers a
       wasted 25KB download for glyphs it can't render either. */
    body{font-family:"ABC Normal",sans-serif}

    /* Footer copyright: show the Title-Case source text ("© 2026 Zak Exhibitions
       & Conferences") instead of the theme's all-caps. */
    .footer__copyright-item { text-transform: none; }

    /* Hero video play button — hide the "00:00" running-time label; keep the play icon. */
    .main-about__heading-play-time { display: none; }

    /* Video popup: the theme centres the 16:9 video but pins the controls to the
       viewport bottom (position:absolute; bottom:0). On tall / portrait viewports that
       leaves a big gap and the controls fall off-screen. Stack the controls directly
       under the video as one centred group, and cap the video height so it always fits. */
    .video-popup__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
    .video-popup__video-container { height: auto; max-height: calc(100vh - 130px); flex: 0 1 auto; }
    .video-popup__video { width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 130px); margin: 0; }
    .video-popup__controls { position: static; width: 100%; flex: 0 0 auto; }

    /* Highlight the popup close button: accent-red outline + tint at rest, solid red
       fill on hover (the theme's hover went dark #181818, invisible on the dark popup). */
    .video-popup__close-btn { border-color: #ec3013; background-color: rgba(236, 48, 19, .14); color: #fff; }
    .video-popup__close-btn:not(:disabled):hover,
    .video-popup__close-btn:focus-visible { background-color: #ec3013; border-color: #ec3013; color: #fff; outline: none; }

    /* ===================================================================
       Events filter — type-to-search inside the Country / City dropdowns
       The dropdown menu is dark (#181818, white text), so this is the dark
       counterpart of .speakers-search. The search box is a flex-none header;
       the option list scrolls beneath it when long.
       =================================================================== */
    .events-filter__search {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: none;
        margin: 0 16px 12px;
        padding: 0 12px;
        min-height: 40px;
        border: 1px solid rgba(255, 255, 255, .45);
        background: rgba(255, 255, 255, .05);
    }
    .events-filter__search:focus-within { border-color: #ec3013; }
    .events-filter__search-icon { display: inline-flex; width: 14px; height: 14px; color: rgba(255, 255, 255, .6); flex: none; }
    .events-filter__search-icon svg { width: 100%; height: 100%; }
    .events-filter__search-input {
        border: 0; outline: 0; background: transparent; font: inherit;
        font-size: 15px; color: #fff; width: 100%; padding: 8px 0;
    }
    .events-filter__search-input::placeholder { color: rgba(255, 255, 255, .5); }
    .events-filter__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
    /* Red-highlighted clear (X) for the search box */
    .events-filter__search-clear {
        display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; flex: none; padding: 0; border: 0;
        background: #ec3013; color: #fff; cursor: pointer; transition: background .2s;
    }
    .events-filter__search-clear:hover { background: #c8280f; }
    .events-filter__search-clear[hidden] { display: none; }
    .events-filter__search-clear svg { width: 8px; height: 8px; }
    .events-filter__search-empty { color: rgba(255, 255, 255, .6); font-size: 14px; padding: 4px 16px 8px; }
    .events-filter__search-empty[hidden] { display: none; }
    /* Let long option lists scroll under the sticky search box */
    .js-main-events__filter-country-menu .main-events__filter-location-menu-rows,
    .main-events__filter-location-menu--city .js-events-filter-list-cities { overflow-y: auto; }

    /* Red-highlighted clear (X) for the Country / City filter reset button.
       Theme default is a bare white X; make it a solid red chip so it reads as an
       active "clear" affordance. Square corners stay on-theme. */
    .main-events__filter-reset {
        width: 18px; height: 18px; right: 8px;
        background-color: #ec3013; border-radius: 0;
    }
    .main-events__filter-reset .main-events__filter-reset-btn-el { --size: 10px; }
    .main-events__filter-reset .main-events__filter-reset-btn-el:before,
    .main-events__filter-reset .main-events__filter-reset-btn-el:after { background-color: #fff; }
    .main-events__filter-reset:not(:disabled):hover {
        opacity: 1;
        background-color: #c8280f;
        transform: translateY(-50%) rotate(90deg) scale(1.08);
    }

    /* Left-align partner logos on EVENT pages (the theme centres each logo in its
       grid cell). The logo lives in a full-width flex <picture> (justify-content:
       center) inside the cell link, so BOTH the link and the picture must align to
       the start. Scoped to .event-partners so the /partners listing stays centred. */
    .event-partners__item > a { justify-content: flex-start; }
    .event-partners__item picture { justify-content: flex-start; }
    .event-partners-img { object-position: left center; }
    /* The "Presenting Partner" row centres a lone logo via a high-specificity
       :not(:has()) rule — match it exactly so this override wins by source order. */
    .event-partners__list.event-partners__list--presenting:not(:has(>:nth-child(2))) { justify-content: flex-start; }

    /* Partner grid: 6 logos per row on desktop (theme default is 5). Scoped to
       min-width:1200px so the tablet 4-col (≤1199) and mobile 3-col (≤767) tiers
       from the compiled theme CSS are left untouched. */
    @media (min-width: 1200px) {
        .event-partners__list { grid-template-columns: repeat(6, 1fr); }
    }

    /* Event page: designed placeholder when an event has no speakers yet, in
       place of a bare "Speakers & Panelists" heading over an empty grid. */
    /* Deepan - the wrapper carries the page gutter, as `__list` and
       `__heading` do; without it the card sat flush left while the heading
       above it was inset. And smaller than the live site draws it: at 720
       wide with 48px of padding it read as the main event of the page,
       which is the opposite of what it says. */
    .event-speakers__empty-wrap {
        padding-inline: var(--offset-x);
        width: 100%;
    }

    .event-speakers__empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 520px;
        margin: 6px auto 0 0;
        padding: 30px 26px;
        border: 1px solid rgba(24, 24, 24, .14);
        border-top: 3px solid #e1251b;
        background: #ffffff;
        box-shadow: 0 2px 14px rgba(24, 24, 24, .05);
    }
    .event-speakers__empty-icon {
        width: 34px;
        height: 34px;
        color: #e1251b;
        margin-bottom: 12px;
    }
    .event-speakers__empty-title {
        margin: 0 0 4px;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: .01em;
        line-height: 1.2;
        color: #181818;
    }
    .event-speakers__empty-sub {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.5;
        color: #6b6864;
        max-width: 44ch;
    }
    @media (max-width: 767px) {
        .event-speakers__empty { padding: 24px 18px; }
        .event-speakers__empty-icon { width: 30px; height: 30px; margin-bottom: 10px; }
        .event-speakers__empty-title { font-size: 18px; }
        .event-speakers__empty-sub { font-size: 13.5px; }
    }
    /* Deepan - the back-to-top arrow, kept clear of the chat bubble.
       Both are fixed to the bottom-right corner and the chat's z-index is
       2147483647, so on a phone the 48px arrow sat entirely inside the 104px
       bubble and could not be seen or pressed at all. The offsets are custom
       properties now and `layout/js` measures the bubble and sets them; the
       fallbacks are the theme's own numbers, which is what a page with no chat
       on it goes back to. */
    .header__scroll-top-btn {
        bottom: var(--scroll-top-bottom, 24px);
        right: var(--scroll-top-right, 24px);
    }

    @media (max-width: 900px) and (orientation: landscape),
           screen and (max-width: 767px) {
        .header__scroll-top-btn {
            bottom: var(--scroll-top-bottom, 16px);
            right: var(--scroll-top-right, 16px);
        }
    }

    /* Deepan - the footer's bottom row keeps clear of the chat bubble.
       That row is a flex with space-between, so the copyright sits hard against
       the right edge — exactly where the bubble is fixed, and "© 2026 Zak
       Exhibitions & Conferences" lost its last few words behind it. The
       clearance is measured and published by `layout/js` alongside the arrow's
       offsets, so it is the bubble's real width rather than a guess, and a page
       with no chat falls back to nothing.

       On a phone too. The row stacks there and I took that to mean the
       copyright moved out of the way — it does not: `.footer__copyright` is
       still a row of its own starting at the left margin, and at 375px it runs
       to within 43px of the right edge while the bubble takes 116. So the
       padding applies at every width, and the pair is allowed to wrap onto two
       lines rather than be squeezed. */
    .footer__bar { padding-right: var(--chat-clearance, 0px); }
    .footer__copyright { flex-wrap: wrap; }


    /* Deepan - the cream band is a height, not a share of the section.

       The theme paints the foot of this section with

           linear-gradient(180deg, #181818 90%, #f1ede4 0)

       so the cream is a *proportion*: a tenth of however tall the section is.
       That was tuned against a section of about 3,700px, where a tenth comes
       out at 373px and sits just under the 328px skyline that lies on top of
       it. Show more makes the section five times taller, and a tenth of that
       is some 1,800px of cream above the skyline — the white the section fills
       with after a few pages.

       Pinned to the skyline's own height instead, the transition is the same
       at any length. The band is drawn as a flat two-stop gradient because a
       background layer needs to be an image to be sized; the black behind it
       is the `background-color` above, which is why that is not repeated here.
       Each width gets its own skyline, and each skyline its own height:
       1920x494, 1280x328, 768x328, 360x164. */
    .main-events {
        background-image:
            url(/build/square-bg.svg),
            linear-gradient(#f1ede4, #f1ede4);
        background-position: 0 100%, 0 100%;
        background-repeat: no-repeat, no-repeat;
        background-size: auto, 100% 494px;
    }

    @media screen and (max-width: 1440px) {
        .main-events {
            background-image:
                url(/build/square-bg-laptop.svg),
                linear-gradient(#f1ede4, #f1ede4);
            background-size: auto, 100% 328px;
        }
    }

    @media screen and (max-width: 1199px) {
        .main-events {
            background-image:
                url(/build/square-bg-tablet.svg),
                linear-gradient(#f1ede4, #f1ede4);
            background-size: auto, 100% 328px;
        }
    }

    @media (max-width: 900px) and (orientation: landscape), screen and (max-width: 767px) {
        .main-events {
            background-image:
                url(/build/square-bg-mobile.svg),
                linear-gradient(#f1ede4, #f1ede4);
            background-size: auto, 100% 164px;
        }
    }

/* ---- The Register now tab ------------------------------------------------ */

/*
 * Deepan - down the right edge of an edition's page, halfway up the window.
 *
 * Fixed rather than absolute: the point of it is to be reachable from anywhere
 * in a page that runs to eight sections, and a tab that scrolls away is a tab
 * somebody has to go looking for.
 *
 * `writing-mode: vertical-rl` with `rotate(180deg)` reads bottom-to-top, which
 * is the way an upright tab on a right edge is read. Turning the text with a
 * transform instead would leave the box the wrong shape and need the whole
 * thing nudged back by half its own height.
 *
 * Under the scroll-to-top disc and the chat bubble in the stacking order, and
 * well clear of both in position — those two sit at the bottom right, this sits
 * at the middle of the edge.
 */
.event-register {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 60;

    display: block;
    padding: 22px 11px;
    border-radius: 8px 0 0 8px;

    background: #e1251b;
    color: #fff;
    text-decoration: none;

    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
    transition: padding-right .18s ease, background-color .18s ease;
}

.event-register:hover,
.event-register:focus-visible {
    background: #c8280f;
    padding-right: 15px;
    color: #fff;
}

.event-register:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.event-register__text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * On a narrow screen it is smaller and a little higher, so it does not sit on
 * top of the chat bubble on a short phone.
 */
@media (max-width: 767px) {
    .event-register {
        top: 42%;
        padding: 16px 8px;
    }

    .event-register__text {
        font-size: 11px;
        letter-spacing: .12em;
    }
}
