/* =========================================================
   X5 CONVERGENCE — RESPONSIVE HOMEPAGE
   Replace image URLs in this file / index.php with final assets.
   ========================================================= */

:root {
    --bg: #02070d;
    --bg-soft: #07111c;
    --panel: #07131e;
    --text: #f4f6f8;
    --muted: #a7b1bc;
    --gold: #efbe54;
    --gold-2: #ffd979;
    --blue: #4da2ff;
    --line: rgba(255,255,255,.16);
    --line-blue: rgba(76,158,255,.25);

    --container: 1440px;
    --header-height: 150px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow: 0 20px 60px rgba(0,0,0,.35);
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(12,38,65,.22), transparent 38rem),
        var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
    overflow-x: hidden;
}

/* =========================================================
   X5 FULLSCREEN INTRO
   ========================================================= */

#x5Intro {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: #000 !important;

    z-index: 999999 !important;

    overflow: hidden !important;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* ACTUAL VIDEO */

#x5IntroVideo {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;

    border: 0 !important;
}


/* WHEN VIDEO IS FINISHED */

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




img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

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

/* HEADER */

.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--header-height);
    background: transparent;
}

.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 210px;

    background: linear-gradient(
        180deg,
        rgba(2, 7, 13, 1) 0%,
        rgba(2, 7, 13, 0.92) 35%,
        rgba(2, 7, 13, 0.58) 68%,
        rgba(2, 7, 13, 0) 100%
    );

    pointer-events: none;
    z-index: -1;
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 0;
}

.brand {
    /* SIZED BY HEIGHT, NOT WIDTH — this is the fix for the logo being clipped
       under "CONVERGENCE".

       The logo file is SQUARE, so a width of 150px also made it 150px TALL,
       inside a header that is exactly 150px tall. Scrolled it was worse: a
       104px-wide logo (= 104px tall) in a 92px header, so 12px of the
       wordmark was cut off. On mobile a 135px logo sat in a 100px header.

       Constraining the HEIGHT instead means the whole mark, wordmark
       included, always fits with room to breathe, whatever the header is
       doing. Width follows the aspect ratio on its own. */
    display: flex;
    align-items: center;
    height: 108px;
    flex-shrink: 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.brand img {
    display: block;
    width: auto;
    height: 100%;

    filter: drop-shadow(0 4px 12px rgba(0,0,0,.65));
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 48px);
}

.site-nav > a:not(.btn) {
    position: relative;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.site-nav > a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -16px;
    height: 2px;
    background: var(--gold);
    transition: .2s ease;
}

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

.site-nav > a {
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.3);
    border-radius: 8px;
    padding: 10px;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: white;
    margin: 5px 0;
}

/* BUTTONS */

.btn {
    min-height: 52px;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .02em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

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

.btn--outline {
    border-color: rgba(255,255,255,.5);
    background: rgba(3,9,14,.5);
}

.btn--outline:hover {
    border-color: var(--gold);
}

.btn--header {
    min-height: 42px;
    padding: 0 26px;
    border-color: rgba(239,190,84,.7);
    color: var(--gold);
    background: rgba(0,0,0,.18);
}

/* HERO */

.hero {
    position: relative;
    min-height: 640px;
    padding: calc(var(--header-height) + 84px) 0 70px;
    display: flex;
    align-items: center;
    background-image:
        linear-gradient(180deg, rgba(3,10,18,.08) 0%, rgba(3,10,18,.12) 50%, rgba(2,7,13,.9) 100%),
        url("../images/hero/about_hero_01.png");
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 40%, rgba(26,72,126,.1), transparent 45%),
        linear-gradient(90deg, rgba(0,0,0,.24), transparent 35%, transparent 65%, rgba(0,0,0,.24));
    z-index: -1;
}

.hero__content {
    text-align: center;
}

.hero__eyebrow {
    margin: 0;
    /* Reduced per Kevin: the line runs long, so it was crowding the title. */
    font-size: clamp(26px, 3.1vw, 47px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: .025em;
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
}

.hero__title {
    margin: 2px 0 14px;
    font-size: clamp(44px, 5.4vw, 84px);
    line-height: .95;
    letter-spacing: .01em;
    color: var(--gold);
    text-shadow: 0 10px 30px rgba(0,0,0,.4);
}

.hero__subtitle {
    margin: 0 auto 22px;
    font-size: clamp(16px, 1.8vw, 27px);
    font-weight: 800;
    letter-spacing: .035em;
}

.hero__meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin: 0 0 26px;
    font-size: clamp(14px, 1.25vw, 19px);
    font-weight: 800;
}

.hero__meta span:not(.hero__divider) {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: #f7f8fa;
}

/* Was ::first-letter, which coloured the old character-entity glyph gold.
   The glyphs are real SVG now (includes/icons.php), so the rule has to name
   the icon — left as ::first-letter it would have turned the "S" of
   SEPTEMBER gold instead. */
.hero__meta .x5-icon {
    color: var(--gold);
}

.hero__divider {
    width: 1px;
    height: 34px;
    background: rgba(255,255,255,.38);
}

.hero__actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* GENERAL SECTIONS */

.section {
    padding: 56px 0;
}

.section--compact {
    padding: 28px 0;
}

.section--bordered {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.centered {
    text-align: center;
}

.section-kicker {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .045em;
}

.section-heading {
    margin-bottom: 22px;
}

.section-heading h2,
.why-block h2,
.partner-cta h2 {
    margin: 0;
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1.18;
    letter-spacing: .06em;
}

/* COUNTDOWN */

.countdown-section {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.countdown {
    display: flex;
    justify-content: center;
    align-items: stretch;
    max-width: 680px;
    margin: 12px auto 0;
}

.countdown__item {
    min-width: 135px;
    text-align: center;
    padding: 6px 28px;
    border-right: 1px solid rgba(255,255,255,.28);
}

.countdown__item:last-child {
    border-right: 0;
}

.countdown__item strong {
    display: block;
    color: var(--gold);
    font-size: clamp(31px, 3vw, 46px);
    line-height: 1;
}

.countdown__item span {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 800;
}

/* The state the countdown reaches when the event starts. Until Aug 2026 it
   simply froze at four zeros and kept ticking forever; x5.js now swaps in
   this single line and clears the interval. */
.countdown.is-live {
    display: block;
    color: var(--gold);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 900;
    letter-spacing: .04em;
    text-align: center;
    padding: 6px 0;
}

/* =========================================================
   WHO WE ARE / INDUSTRY TICKER
   ========================================================= */

.industry-ticker {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 12px 0 16px;
}


/* ---------------------------------------------------------
   SCROLLING TRACK
   --------------------------------------------------------- */

.industry-track {
    display: flex;
    align-items: stretch;
    gap: 10px;

    width: max-content;

    animation: industry-scroll 48s linear infinite;
    will-change: transform;
}


/* Pause on hover */

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


/* ---------------------------------------------------------
   INDUSTRY CARDS
   --------------------------------------------------------- */

.industry-card {
    position: relative;

    width: 135px;
    min-width: 135px;
    height: 100px;

    flex: 0 0 135px;

    padding: 12px 8px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 27, 42, 0.92) 0%,
            rgba(3, 10, 17, 0.96) 100%
        );

    box-shadow:
        inset 0 0 24px rgba(77, 162, 255, 0.04),
        0 6px 18px rgba(0, 0, 0, 0.28);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


/* Subtle blue glow inside each card */

.industry-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at 50% 35%,
        rgba(77, 162, 255, 0.12),
        transparent 62%
    );

    pointer-events: none;
}


/* Hover */

.industry-card:hover {
    transform: translateY(-3px);

    border-color: rgba(77, 162, 255, 0.65);

    background:
        linear-gradient(
            180deg,
            rgba(15, 36, 57, 0.98),
            rgba(4, 13, 22, 0.98)
        );
}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.industry-card__icon {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 10px;

    color: var(--blue);

    font-size: 29px;
    line-height: 1;

    text-shadow:
        0 0 10px rgba(77, 162, 255, 0.35);
}


/* ---------------------------------------------------------
   LABEL
   --------------------------------------------------------- */

.industry-card__label {
    position: relative;
    z-index: 2;

    display: block;

    color: #ffffff;

    font-size: 8px;
    font-weight: 900;
    line-height: 1.15;

    letter-spacing: 0.025em;
}


/* ---------------------------------------------------------
   EDGE FADES
   --------------------------------------------------------- */

.industry-ticker::before,
.industry-ticker::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    width: 100px;

    z-index: 10;
    pointer-events: none;
}

.industry-ticker::before {
    left: 0;

    background: linear-gradient(
        90deg,
        var(--bg) 0%,
        rgba(2, 7, 13, 0.85) 35%,
        transparent 100%
    );
}

.industry-ticker::after {
    right: 0;

    background: linear-gradient(
        270deg,
        var(--bg) 0%,
        rgba(2, 7, 13, 0.85) 35%,
        transparent 100%
    );
}


/* ---------------------------------------------------------
   ANIMATION
   --------------------------------------------------------- */

@keyframes industry-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 5px));
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 760px) {

    .industry-card {
        width: 125px;
        min-width: 125px;
        height: 96px;
        flex-basis: 125px;
    }

    .industry-card__icon {
        font-size: 26px;
    }

    .industry-ticker::before,
    .industry-ticker::after {
        width: 60px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .industry-track {
        gap: 8px;
        animation-duration: 42s;
    }

    .industry-card {
        width: 112px;
        min-width: 112px;
        height: 88px;
        flex-basis: 112px;

        padding: 9px 6px;
    }

    .industry-card__icon {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .industry-card__label {
        font-size: 7px;
    }

    .industry-ticker::before,
    .industry-ticker::after {
        width: 30px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .industry-track {
        animation: none;
    }

    .industry-ticker {
        overflow-x: auto;
    }

}

/* EXPERIENCES */

.experience-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: 170px;
    gap: 12px;
}

.experience-card {
    grid-column: span 2;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 30%, rgba(37,84,147,.24), transparent 60%),
        linear-gradient(135deg, #0e2235, #050b11 75%);
    background-image: var(--card-image), linear-gradient(135deg, #0e2235, #050b11 75%);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
}

.experience-card:nth-child(n+6) {
    grid-column: span 2;
}

.experience-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.15) 45%, rgba(0,0,0,.86));
}

.experience-card__content {
    position: absolute;
    inset: auto 18px 15px 18px;
    display: flex;
    align-items: end;
    gap: 10px;
}

.experience-card__icon {
    color: var(--blue);
    font-size: 18px;
}

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

/* STATS */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.stat-card {
    min-height: 90px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 7px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    background: linear-gradient(180deg, rgba(11,22,33,.82), rgba(3,8,13,.82));
}

.stat-card__icon {
    grid-row: 1 / 3;
    color: var(--blue);
    font-size: 28px;
}

.stat-card strong {
    font-size: clamp(22px, 2.2vw, 37px);
    line-height: 1;
}

.stat-card > span:last-child {
    font-size: 9px;
    font-weight: 800;
}

/* WHY X5 */

.split-section {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 52px;
    align-items: center;
}

.why-block__gold {
    margin: 20px 0 0;
    color: var(--gold);
    font-size: clamp(24px, 2.5vw, 38px);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: .025em;
}

.partner-cta {   
    position: relative;
    overflow: hidden;

    min-height: 250px;

    border: 1px solid var(--line);
    border-radius: 8px;

    background-image: url("../images/partners/partner-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.partner-cta__overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(2, 7, 13, 0.90) 0%,
        rgba(2, 7, 13, 0.68) 45%,
        rgba(2, 7, 13, 0.45) 100%
    );

    z-index: 1;
}

.partner-cta__content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.partner-cta p {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .04em;
}

.partner-cta h2 {
    color: var(--gold);
    margin-bottom: 18px;
}

.partner-cta .btn {
    min-width: 240px;
}

.text-link {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 900;
}

/* PARTNER LOGOS */

.partners-strip {
    border-bottom: 1px solid var(--line);
}

.logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    overflow-x: auto;
    padding: 8px 6px 4px;
    scrollbar-width: thin;
}

.logo-row span {
    flex: 0 0 auto;
    font-size: clamp(18px, 1.8vw, 28px);
    font-weight: 800;
    color: #d7dce1;
    opacity: .95;
}

/* FOOTER */

.site-footer {
    padding: 38px 0 12px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, .8fr) 1.4fr;
    gap: 38px;
}

.brand--footer {
    margin-top: 2px;
    /* The footer has no header height to fit inside, so it sets its own.
       Slightly larger than the header mark, which suits the footer. */
    height: 118px;
}

.footer-column h3 {
    margin: 0 0 11px;
    font-size: 10px;
    letter-spacing: .06em;
}

.footer-column > a {
    display: block;
    margin: 7px 0;
    font-size: 10px;
    color: var(--muted);
}

.socials {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}

.socials a {
    /* 34px, up from 25px. The old size was a small tap target on a phone —
       well under the ~44px both Apple and WCAG 2.5.5 ask for. 34px plus the
       12px gap gives a comfortable 46px of clear space per icon without the
       row looking heavy. */
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: white;
    color: #111;
    transition: background .2s ease, transform .2s ease;
}

/* The icons are inline SVG brand marks now, so they size from the box and
   take their colour from it rather than being font glyphs. */
.socials a svg {
    width: 17px;
    height: 17px;
    display: block;
}

.socials a:hover,
.socials a:focus-visible {
    background: var(--gold);
    transform: translateY(-2px);
}

.newsletter label {
    display: block;
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 900;
}

.newsletter__row {
    display: flex;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 5px;
    overflow: hidden;
}

.newsletter input {
    min-width: 0;
    flex: 1;
    padding: 10px 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: white;
    font-size: 10px;
}

.newsletter button {
    width: 42px;
    border: 0;
    background: transparent;
    color: white;
}

.footer-bottom {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: #818a94;
    font-size: 9px;
}

/* ACCESSIBILITY */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
    .industry-grid {
        grid-template-columns: repeat(8, 1fr);
    }

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

@media (max-width: 1050px) {
    :root {
        --header-height: 100px;
    }

    .container {
        width: min(var(--container), calc(100% - 32px));
    }

    .nav-toggle {
        display: block;
        position: relative;
        z-index: 70;
    }

    .site-header::before {
    height: 170px;
    }

    .brand {
    /* Header is 100px tall at this breakpoint, so the logo has to be
       shorter than that. Height-based, same reasoning as the base rule. */
    height: 72px;
    }

    .site-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(360px, 88vw);
        padding: 110px 28px 28px;
        background: rgba(2,7,13,.985);
        border-left: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        transform: translateX(100%);
        transition: transform .25s ease;
        box-shadow: -20px 0 60px rgba(0,0,0,.45);

        /* Sit above page content. Without this the panel relies on DOM order
           alone, which is fragile once anything else on the page is given a
           stacking context. Below .nav-toggle (z-index 70) on purpose, so the
           close button stays reachable while the panel is open. */
        z-index: 60;

        /* Eight nav items plus 110px of top padding overflows a short screen
           — a phone in landscape, or a small handset. Without this the last
           items are simply unreachable. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.nav-open .site-nav {
        transform: translateX(0);
    }

    .site-nav > a:not(.btn) {
        padding: 16px 0;
        border-bottom: 1px solid var(--line);
    }

    .site-nav > a:not(.btn)::after {
        display: none;
    }

    .site-nav .btn {
        margin-top: 24px;
    }

    .experience-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .experience-card {
        grid-column: span 2;
    }

    .split-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

    .footer-connect {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .section {
        padding: 42px 0;
    }

    .hero {
        min-height: 700px;
        padding-top: 130px;
        background-position: center;
    }

    .mobile-hide {
        display: none;
    }

    .hero__subtitle {
        max-width: 520px;
    }

    .hero__meta {
        flex-direction: column;
        gap: 8px;
    }

    .hero__divider {
        display: none;
    }

    .hero__actions {
        max-width: 430px;
        margin-inline: auto;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .countdown {
        width: 100%;
    }

    .countdown__item {
        min-width: 0;
        flex: 1;
        padding: 5px 8px;
    }

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

    .experience-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 170px;
    }

    .experience-card,
    .experience-card:nth-child(n+6) {
        grid-column: span 1;
    }

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

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

    .footer-grid > div:first-child,
    .footer-connect {
        grid-column: 1 / -1;
    }
}

@media (max-width: 500px) {
    .container {
        width: min(var(--container), calc(100% - 24px));
    }

    .brand {
        transform: scale(.82);
        transform-origin: left center;
    }

    .hero {
        min-height: 670px;
    }

    .hero__eyebrow {
        font-size: 25px;
    }

    .hero__title {
        font-size: 43px;
    }

    .hero__subtitle {
        font-size: 15px;
    }

    .countdown__item strong {
        font-size: 27px;
    }

    .countdown__item span {
        font-size: 8px;
    }

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

    .industry-card {
        min-height: 94px;
    }

    .experience-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .partner-cta {
        min-height: 300px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 22px;
    }
}


/* =========================================================
   ICONS  (includes/icons.php)
   ---------------------------------------------------------
   Added Aug 2026 with the SVG icon set that replaced the
   Unicode character entities in the stat cards, the hero meta
   line and the fifteen-industry ticker.

   The single rule below is the whole integration. Sizing in
   `em` means every icon takes its size from the font-size
   already set on its parent — .stat-card__icon (28px),
   .industry-card__icon (29px, 26px and 24px at the two
   breakpoints) and .experience-card__icon (18px) all keep
   working untouched, responsive rules included.

   vertical-align keeps an icon optically centred against
   uppercase text, which sits high in the line box.
   ========================================================= */
.x5-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    flex: none;
    vertical-align: -.125em;
}

/* The ticker and the stat cards stack icon over label, so the
   icon is a block there and the inline nudge is not wanted. */
.industry-card__icon .x5-icon,
.stat-card__icon .x5-icon,
.experience-card__icon .x5-icon {
    display: block;
    vertical-align: baseline;
}