p, li, .dc-desc, .overview-text-p, .hero-desc {
    margin-top: 0;
    color: var(--text-gray);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* ======================================= */
/* HERO VIDEO SECTION                      */
/* ======================================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-top: 0;
    padding: calc(var(--nav-height) + 8px) var(--edge-pad) 8px;
    box-sizing: border-box;
    background-color: #ffffff;
}

.hero-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(20, 83, 188, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(20, 83, 188, 0.1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: var(--edge-pad);
    padding-right: var(--edge-pad);
    box-sizing: border-box;
    background-color: #000000;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.93) 0%, rgba(20, 83, 188, 0.3) 100%);
    z-index: 1;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
}

.hero-title-static {
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1.1;
    font-weight: 700;
    color: white;
    display: block;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.hero-title-rotating {
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 24px;
    color: white;
    display: block;
    white-space: normal;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.txt-rotate { color: var(--brand-red); position: relative; }
.txt-rotate::after { content:'|'; animation: blink 1s infinite; color: white; margin-left: 2px; }

.hero-desc {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    line-height: 1.7;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    text-align: justify;
}

/* ======================================= */
/* MUTE BUTTON                             */
/* ======================================= */
.audio-toggle-btn {
    position: absolute;
    bottom: 40px;
    left: var(--edge-pad);
    z-index: 20;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    outline: none;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.audio-toggle-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}

.audio-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
    border-color: white;
}

/* ======================================= */
/* HERO VIDEO — MOBILE TAP-TO-PLAY         */
/* Only ever visible on mobile before the video plays (the module script
   hides it immediately on desktop, where the video still autoplays) —
   see index.php's hero-video script comment for why there's no <source>
   in the markup at all until this (or desktop's own auto-attach) fires. */
/* ======================================= */
.hero-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(20, 20, 30, 0.45);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}
.hero-video-play-btn svg { width: 30px; height: 30px; fill: #ffffff; margin-left: 4px; }
.hero-video-play-btn:hover { background: rgba(20, 20, 30, 0.65); transform: translate(-50%, -50%) scale(1.06); }

/* Shown by the module script only on mobile, only before the tap that
   loads/plays the video — default state above is hidden so desktop (which
   auto-attaches + plays immediately) never flashes it. */
.hero-video-play-btn.is-visible { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
    .hero-video-play-btn { transition: none; }}

/* ======================================= */
/* HERO BADGE                              */
/* ======================================= */
.hero-date-badge {
    position: absolute;
    right: var(--edge-pad);
    bottom: 40px;
    z-index: 10;
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(0,0,0,0.4);
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: fit-content;
    max-width: 280px;
    border-radius: 12px;
    animation: slideUp 1s ease-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-date-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--grad-main);
    border-radius: 12px 12px 0 0;
}

.hdb-top-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 6px;
    flex-wrap: nowrap;
}

.hdb-square {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1;
    margin-right: 7px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.sq-purple { background: var(--grad-purple); }
.sq-red    { background: var(--grad-red); margin-right: 12px; }

.hdb-main-text {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    line-height: 1.2;
    white-space: normal;
}

.hdb-address {
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #666;
    line-height: 1.4;
    text-align: left;
}

/* ======================================= */
/* OVERVIEW SECTION                        */
/* ======================================= */
.overview-main-wrapper { width: 100%; }

.overview-top-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "heading image" "content image";
    column-gap: 5%;
    row-gap: 0;
}

.overview-heading-block { grid-area: heading; min-width: 0; }
.overview-content-block { grid-area: content; min-width: 0; }
.overview-image-column { grid-area: image; min-width: 0; position: relative; }

.overview-image-column img {
    width: 100%;
    height: auto;
    border-radius: 24px;
    display: block;
    box-shadow: 0 20px 40px rgba(20, 83, 188, 0.15);
    margin-top: 20px;
}

.overview-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.overview-bento-item {
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(20, 83, 188, 0.15);
    /* Grid items default to min-width:auto, which lets the img's own
       intrinsic width bleed through the min-content calculation and
       force the 1fr track wider than the grid — same gotcha already
       fixed once on contact-international-agency.php's map columns. */
    min-width: 0;
}

.overview-bento-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
}

.overview-bento-item:hover img { transform: scale(1.08); }

.overview-bento-tall { grid-column: 1 / 2; grid-row: 1 / 3; }
.overview-bento-wide { grid-column: 2 / 4; grid-row: 1 / 2; aspect-ratio: 16 / 9; }
.overview-bento-square { aspect-ratio: 1 / 1; }

@media (max-width: 600px) {
    .overview-bento-grid {
        grid-template-columns: 1fr;
    }
    .overview-bento-tall,
    .overview-bento-wide,
    .overview-bento-square {
        grid-column: 1;
        grid-row: auto;
    }
    .overview-bento-tall { aspect-ratio: 16 / 9; }}

.overview-heading-block h2,
.overview-text-column h2 {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-tracking);
    margin-bottom: 1.2rem;
    text-align: left;
}

.overview-text-p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    text-align: justify;
}

.overview-closing-line {
    text-align: center;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 2.5rem 0 0;
}

/* ======================================= */
/* AWARDS SECTION                          */
/* ======================================= */
.awards-section {
    background: #ffffff;
    padding: 40px var(--edge-pad);
    box-sizing: border-box;
}

.awards-frame {
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(20, 83, 188, 0.08);
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(20, 83, 188, 0.1);
    padding: var(--edge-pad);
    box-sizing: border-box;
}

.awards-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5%;
    flex-wrap: wrap;
}

.awards-video-column {
    flex: 1;
    min-width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.awards-eyebrow {
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking);
    margin-bottom: 1rem;
    text-align: left;
}

.awards-heading {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    color: var(--text-dark);
    letter-spacing: var(--h2-tracking);
    margin-bottom: 1rem;
    line-height: var(--h2-line-height);
    text-align: left;
}

.awards-divider {
    width: 80px;
    height: 4px;
    background: var(--grad-main);
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

.awards-desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-gray);
    margin-bottom: 1rem;
    text-align: justify;
}

.awards-video-wrapper {
    aspect-ratio: 9 / 16;
    max-width: 250px;
    width: 100%;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none;
    background: transparent;
}

.awards-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.awards-cta-wrapper { margin-top: 2rem; }

.awards-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    min-width: 180px;
    padding-left: 25px;
    padding-right: 8px;
    border-radius: 30px;
    background-color: var(--brand-blue);
    color: var(--primary-light) !important;
    border: 1px solid var(--brand-blue);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
}

.awards-cta-button:hover {
    background: var(--grad-red);
    border-color: transparent;
    transform: scale(1.05);
}

.awards-cta-button svg {
    height: 9px;
    width: 9px;
    fill: #000000;
    display: block;
    transition: fill 0.3s;
}

.awards-cta-button:hover svg { fill: var(--brand-red); }

/* CTA is inline-flex, so it follows the parent's text-align -- center it
   on mobile only, matching the eyebrow/heading centering already applied
   to #awards on mobile in common.css. */
@media (max-width: 600px) {
    .awards-cta-wrapper { text-align: center; }
}

/* ======================================= */
/* CONFERENCE SECTION                      */
/* ======================================= */
.conference-section {
    background: #ffffff;
    padding: 40px var(--edge-pad);
    box-sizing: border-box;
}

.conference-frame {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* "What awaits you" sector cards, merged into the Conference section
   directly below its intro (was a separate #events section further down
   the page) */
.conference-cards-wrap {
    margin-top: 52px;
    padding-top: 44px;
}

@media (max-width: 600px) {
    .conference-cards-wrap { margin-top: 36px; padding-top: 32px; }}

/* "What awaits you at the EGN ConnectX Conference?" heading: shrunk to a
   small, single-line title per request — the default .section-header h2
   scale (clamp up to 3.25rem) was too large/heavy for what's effectively
   a sub-heading here. Wraps again on mobile so it doesn't overflow. */
#events.section-header h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    white-space: nowrap;
}

@media (max-width: 600px) {
    #events.section-header h2 { white-space: normal; }}

/* ======================================= */
/* ECOSYSTEM PARTNERS (static logo grid)   */
/* ======================================= */
/* Static grid (no carousel, no hover effect by explicit request) showing
   EVERY partner-logo file under Images/Confrence/ — 10 unique logos, no
   duplicates (see the HTML comment above the section in index.php).
   Every .track-icon-frame is the same fixed size
   regardless of each logo's own aspect ratio. No visible name label
   (sr-only only) — id/classes kept as explore-tracks/.track-icon-* since
   nothing outside this section references the "Ecosystem Partners" name
   it was renamed to 2026-09-02 (originally "Eco System Partner", fixed
   same day). Card/frame borders and backgrounds removed same day by
   explicit request — just the bare logo sits in the grid now, no box
   lines. */
#explore-tracks .section-header {
    text-align: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* .section-header h2's sitewide default is text-align:left (common.css) —
   override it here since the parent div being centered doesn't cascade
   to the h2's own explicit text-align. */
#explore-tracks .section-header h2 {
    text-align: center;
}

.track-icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.track-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 2px 4px;
    text-decoration: none;
}

/* No hover effect by request — keyboard focus still gets a plain, static
   outline (no transform/shadow) so the grid stays keyboard-accessible. */
.track-icon-card:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

.track-icon-frame {
    width: 148px;
    height: 148px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.track-icon-frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 991px) {
    .track-icon-grid { grid-template-columns: repeat(3, 1fr); }
    .track-icon-frame { width: 120px; height: 120px; }}

@media (max-width: 600px) {
    .track-icon-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .track-icon-card { padding: 2px 4px; }
    .track-icon-frame { width: 96px; height: 96px; padding: 10px; }}

/* --- Homepage Conference section: "Catalyst 2047 · Architecting Viksit
   Bharat" highlight badge, pulled from the dedicated conference.php hero --- */
.conf-catalyst-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 20px;
    margin-bottom: 1.4rem;
    border-radius: 999px;
    background: rgba(20, 83, 188, 0.06);
    border: 1.5px solid rgba(20, 83, 188, 0.2);
}

.conf-catalyst-year {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: var(--grad-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}

.conf-catalyst-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand-purple);
    flex-shrink: 0;
}

.conf-catalyst-tagline {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dark);
}

/* Badge is inline-flex, so text-align on the parent can't center it and
   margin:auto has no effect while it stays inline-level -- switch to a
   block flex box sized to its content so margin:auto can center the box
   itself on mobile. This file loads after common.css (which already does
   this for the conference.php hero) and would otherwise override it here
   with the unconditional inline-flex rule above. */
@media (max-width: 600px) {
    .conf-catalyst-badge {
        display: flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ======================================= */
/* VISITORS SECTION                        */
/* ======================================= */
.visitors-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    background: rgba(20, 83, 188, 0.08);
    border: 1px solid rgba(20, 83, 188, 0.2);
    color: var(--brand-blue);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1.1rem;
}

.visitors-eyebrow svg {
    width: 14px;
    height: 14px;
    fill: var(--brand-blue);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Mobile-only carousel wrapper for #visitors' "Who Should Visit?" cards */
.visitors-carousel {
    position: relative;
}

.visitors-carousel-arrow {
    display: none;
}

.visitors-decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.vd-star {
    position: absolute;
    top: 6px;
    right: 4%;
    width: 150px;
    height: 150px;
    fill: none;
    stroke: var(--brand-blue);
    stroke-width: 1;
    opacity: 0.1;
}

.vd-confetti { position: absolute; border-radius: 4px; opacity: 0.3; }
.vd-confetti.c1 { top: 14px; left: 6%;  width: 13px; height: 13px; background: var(--brand-blue);   transform: rotate(18deg); }
.vd-confetti.c2 { top: 52px; left: 3%;  width: 9px;  height: 9px;  background: var(--brand-red);    transform: rotate(-14deg); }
.vd-confetti.c3 { top: 2px;  left: 12%; width: 8px;  height: 8px;  background: var(--brand-purple); transform: rotate(46deg); }
.vd-confetti.c4 { top: 38px; left: 9%;  width: 7px;  height: 7px;  background: var(--brand-red);    transform: rotate(-30deg); opacity: 0.22; }

.visitors-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 220px;
    margin: 14px auto 20px;
}
.visitors-divider::before,
.visitors-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color));
}
.visitors-divider::after { background: linear-gradient(90deg, var(--border-color), transparent); }
.visitors-divider svg { width: 14px; height: 14px; fill: var(--brand-blue); opacity: 0.7; flex-shrink: 0; }

/* --- Laurel-wreath icon badge (Visitors section only) --- */
.v-icon-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.v-icon-wrap .v-wreath {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.35;
}

.v-wreath ellipse {
    stroke: none;
}

/* --- Short accent rule under each card title --- */
.v-divider {
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    margin: 4px 0 16px;
}

@media (max-width: 600px) {
    .vd-star { width: 90px; height: 90px; top: 0; right: 2%; opacity: 0.08; }
    .vd-confetti.c3, .vd-confetti.c4 { display: none; }}

/* ======================================= */
/* EXHIBITORS GRID                         */
/* ======================================= */
.exhibitors-container { width: 100%; padding-bottom: 20px; }

.exhibitors-container {
    width: 100%;
    background: #ffffff;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(0,0,0,0.05);
}

.exhibitors-more-note {
    text-align: center;
    margin-top: 30px;
    font-weight: 700;
    color: #555;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.exhibitors-more-note-icon { font-size: 2rem; color: var(--brand-blue); line-height: 0; }

/* ======================================= */
/* GALLERY SECTION                         */
/* ======================================= */
.gallery-grid {
    display: grid;
    gap: 6px;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 280px;
    grid-auto-flow: dense;
    min-height: 280px;
}

/* min-width:0 guards against the grid-item-auto-min-width blowout (img's
   intrinsic size otherwise forces the auto-fit track wider than its
   fair share — see .overview-bento-item above for the same fix). */
.gallery-item { overflow: hidden; border-radius: 12px; height: 100%; min-width: 0; }

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.4s ease;
    object-fit: cover;
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-load-more-wrapper { text-align: center; margin-top: 20px; }

@media (max-width: 600px) {
    .gallery-item--hidden { display: none; }}

/* ======================================= */
/* STICKY BOTTOM LEFT VIDEO POPUP          */
/* ======================================= */
.sticky-video-wrapper {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 996;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sticky-video-close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 997;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-red);
    color: #fff;
    border: 2px solid #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.sticky-video-close:hover {
    background: var(--brand-dark);
    transform: scale(1.15);
}

.sticky-video-popup {
    position: relative;
    width: 280px;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 3px solid #ffffff;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    background: #000;
}

.sticky-video-popup video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.sticky-video-popup:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    border-color: var(--brand-blue);
}

@media (max-width: 991px) {

    .overview-top-split {
        grid-template-columns: 1fr;
        grid-template-areas: "image" "heading" "content";
        text-align: left;
    }
    .overview-image-column { width: 100%; margin-bottom: 30px; }

    .awards-wrapper { flex-direction: column; }
    .awards-video-column { order: -1; width: 100%; margin-bottom: 30px; }
    .awards-video-wrapper { max-width: 340px; }}

@media (max-width: 600px) {
    .hero-section {
        height: 75vh;
        min-height: 600px;
    }

    .hero-frame {
        align-items: flex-start;
        padding-top: 150px;
    }

    .hero-content-wrapper { text-align: left; padding-bottom: 100px; }

    .hero-title-static,
    .hero-title-rotating { font-size: 2.2rem; }

    .hero-desc { font-size: 0.95rem; line-height: 1.5; }

    .hero-video {
        object-fit: contain;
        object-position: center;
        background-color: #000;
    }

    .hero-date-badge {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
        right: auto;
        width: 90%;
        margin: 0;
        padding: 10px 13px;
        flex-direction: column;
        align-items: flex-start;
        z-index: 50;
    }

    .hdb-square    { width: 30px; height: 30px; font-size: 1.05rem; }
    .hdb-main-text { font-size: 0.8rem; }

    .audio-toggle-btn {
        bottom: auto;
        top: 90px;
        right: var(--edge-pad);
        left: auto;
        width: 42px;
        height: 42px;
    }

    .sticky-video-wrapper { bottom: 15px; left: 15px; }
    .sticky-video-popup { width: 140px; }

    /* "EGN Connect X Experience" overview: heading -> image auto-carousel -> content, mobile only */
    .overview-top-split {
        grid-template-columns: 1fr;
        grid-template-areas: "heading" "image" "content";
    }

    /* .overview-heading-block is a page-exclusive heading wrapper (not the
       generic .section-header markup, so it isn't covered by common.css's
       sitewide mobile heading-centering rule) — left-aligned on desktop by
       design, but left-aligned text reads oddly once the grid collapses to
       a single mobile column above the image/content. Same centering recipe
       as common.css's sitewide .section-header mobile rule (mirrored here,
       not shared, since this class doesn't exist in common.css). */
    .overview-heading-block {
        text-align: center;
        max-width: 820px;
        margin-inline: auto;
    }
    .overview-heading-block h2 { text-align: center; }
    .overview-heading-block .eyebrow-heading { text-align: center; }
    .overview-bento-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: 16px;
    }
    .overview-bento-grid::-webkit-scrollbar { display: none; }
    .overview-bento-item,
    .overview-bento-tall,
    .overview-bento-wide,
    .overview-bento-square {
        flex: 0 0 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
        scroll-snap-align: start;
    }
    .overview-bento-item:hover img { transform: none; }

    .visitors-carousel { padding: 0 34px; }
    .visitors-carousel-arrow {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.18);
        color: var(--brand-blue);
        padding: 0;
        cursor: pointer;
    }
    .visitors-carousel-arrow svg { width: 18px; height: 18px; fill: currentColor; }
    .visitors-carousel-arrow--prev { left: 0; }
    .visitors-carousel-arrow--next { right: 0; }

    /* "Who Should Visit?" cards: at ~82% of a phone-width carousel slide,
       the card's full desktop padding/icon size (built for a >=260px grid
       column) leaves barely any room for the heading/copy -- rescale the
       card chrome down instead of just squeezing the same sizes into a
       narrower box. */
    #visitors .visitor-card { padding: 30px 22px; }
    #visitors .v-icon-wrap { width: 76px; height: 76px; margin-bottom: 14px; }
    #visitors .v-icon { width: 46px; height: 46px; }
    #visitors .v-icon svg { width: 22px; height: 22px; }
    #visitors .visitor-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
    #visitors .visitor-card p { font-size: 0.88rem; line-height: 1.5; }
    #visitors .v-divider { margin: 2px 0 12px; }

    /* "& MANY MORE..." caption: only makes sense once every logo is showing
       -- keep it hidden while the mobile grid is still truncated behind
       "Load More", then reveal it the moment that button expands the grid
       (see the .exhibitors-grid--expanded toggle in common.css). */
    .exhibitors-more-note { display: none; }
    .exhibitors-grid.exhibitors-grid--expanded ~ .exhibitors-more-note { display: flex; }
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .gallery-item img { width: 100%; }
    p, .dc-desc, .overview-text-p { font-size: 0.95rem; }
    .awards-section { padding: 28px var(--edge-pad); }
    .conference-section { padding: 28px var(--edge-pad); }}

.as-overview-split .overview-image-column {
    flex: 45;
    min-width: 280px;
}

.as-overview-split .overview-text-p {
    line-height: 1.82;
    margin-bottom: 1.2rem;
}

@media (max-width: 991px) {
    .as-overview-split .overview-text-column,
    .as-overview-split .overview-image-column { flex: 1; }}

/* "Get In Touch" (#contact) section header: center the intro copy.
   .section-header/.section-header p default to text-align:left (common.css) —
   override both here since #contact is only styled centered on the main page,
   not on conference.php which shares this same markup/id. */
#contact .section-header {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#contact .section-header h2 { text-align: center; }

#contact .section-header p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Get In Touch: an office-address card sits above the form and a venue
   map card sits below it, so .contact-cta-strip is no longer
   .contact-right-col's :only-child — common.css's shared "pin the form to
   the top" rule for that case no longer matches, and its general
   :only-child sibling rule (margin-top: auto) would otherwise shove the
   form down and leave the map stranded above it. Reset the form's own
   position and let the map grow to fill the rest of the column, so this
   side matches the SDG image column's height instead of leaving a blank
   gap under the address card + form. */
#contact .contact-cta-strip {
    margin-top: 0;
}

#contact .as-location-map-wrap {
    flex: 1;
    min-height: 260px;
}