/*
 * 21X Homepage hero — v3 (2026-08): full-bleed NYC skyline video, white centered
 * copy, partner-logo marquee driving across the bottom of the video that decelerates
 * and converges into a grid on scroll. Replaces the 3D WebGL glass logo.
 * Mount + choreography: dist/heroVideo.js. Scoped to the homepage (page-id-44).
 */

/* ---- Pinned hero: the hero sticks for the length of the spacer while the logo
   choreography plays; then it releases and the page scrolls on. (heroVideo.js wraps
   the hero in .tox-hero-pin and appends .tox-hero-spacer.) ---- */
/* Pin REMOVED (client request 2026-09): the hero must scroll along with the page —
   no sticky "hold" in the middle of the scroll. The wrapper/spacer stay in the DOM
   (JS still creates them) but are inert. */
.tox-hero-pin { position: relative; }
.tox-hero-spacer { display: none !important; }

/* ---- Hero shell: a normal full-viewport section that scrolls away ---- */
body.page-id-44 .elementor-element-20c6714 {
    position: relative !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background: #05080d;
}

/* ---- Video background (mounted into the old #container-for-threejs div) ---- */
body.page-id-44 #container-for-threejs {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    overflow: hidden;
    background: #05080d;
}
.tox-herovid__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* No parallax, no scroll-driven blur — the video simply plays while the hero
       scrolls past normally. */
}
/* Contrast overlay so the white copy always reads over the skyline. */
body.page-id-44 .elementor-element-20c6714::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5,8,13,.60) 0%, rgba(5,8,13,.20) 32%, rgba(5,8,13,.30) 62%, rgba(5,8,13,.78) 100%),
        radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(5,8,13,.35) 100%);
    opacity: 1;
}

/* ---- Copy: vertically centred, white, above the video ----
   Extra .e-con class beats the R3 rule (which anchored copy to flex-end). */
body.page-id-44 .elementor-element-20c6714.e-con > .e-con-inner {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Copy scrolls with the section — no separate fly-up (would re-introduce the
       "hold" feeling the client asked us to remove). */
}
/* Headline + subline forced WHITE over the dark video (beats the R3 dark rules). */
body.page-id-44 .elementor-element-20c6714 .elementor-widget-heading .elementor-heading-title,
body.page-id-44 .elementor-element-20c6714 .elementor-element-3d85ee2 .elementor-heading-title,
body.page-id-44 .elementor-element-20c6714 .elementor-element-1851d41 .elementor-heading-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    text-shadow: 0 2px 30px rgba(0,0,0,.45) !important;
}
/* Keep only the "Powering" accent a bright brand gradient (light variant for dark bg). */
body.page-id-44 .elementor-element-20c6714 .text-gradient__blue {
    background: linear-gradient(90deg, #1DACE4 0%, #7cc6f5 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
}
body.page-id-44 .elementor-element-20c6714 .elementor-element-1851d41 .elementor-heading-title {
    color: rgba(233,240,250,.86) !important;
    -webkit-text-fill-color: rgba(233,240,250,.86) !important;
    font-weight: 400 !important;
}
/* "capital markets" ships with a pink-gradient class forced dark by R3 — make it
   white over the video like the rest of the headline. */
body.page-id-44 .elementor-element-20c6714 .text-gradient__pink,
body.page-id-44 .elementor-element-20c6714 .elementor-heading-title .text-gradient__pink {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 30px rgba(0,0,0,.45) !important;
}
/* CTA over video: primary keeps the brand gradient; ghost turns to a white outline. */
body.page-id-44 .tox-hero-cta { justify-content: center !important; }
body.page-id-44 .tox-hero-cta__btn--ghost,
body.page-id-44 .tox-hero-cta__btn--ghost:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(255,255,255,.55) !important;
    background: rgba(255,255,255,.04) !important;
}
body.page-id-44 .tox-hero-cta__btn--ghost:hover {
    border-color: #fff !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(255,255,255,.12) !important;
}

/* The old standalone logo strip below the hero is now redundant — its job moves
   into the hero marquee (and the on-scroll grid). Hidden on the homepage. */
body.page-id-44 .elementor-element-ls_3f195 { display: none !important; }

/* ======================================================================
   Partner logos: marquee across the bottom of the video → grid on scroll
   Built + driven by heroVideo.js. Two states share the same <img> nodes:
   the "flow" state animates a duplicated track; the "grid" state lays them
   out in a centred grid. JS crossfades/positions between them via --tox-hero-conv.
   ====================================================================== */
.tox-hero-logos {
    position: absolute;
    inset: 0;                 /* full hero: marquee sits at the bottom, grid centres */
    z-index: 2;
    pointer-events: none;
    /* logos are the END state — they appear (grid) and stay; no rise-out. */
}
/* MARQUEE (flow) — sits at the bottom of the video, scrolls sideways. On scroll it
   GROWS and rides UP + past out of the top (a diagonal "logo parade"). */
.tox-hero-logos__marquee {
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(72px, 12vh, 140px); /* raised so the logos sit clear of the bottom edge */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    /* Band scrolls away with the hero — no scroll-linked rise (that needed the pin). */
}
.tox-hero-logos__track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: tox-hm-scroll var(--tox-hm-dur, 30s) linear infinite;
    will-change: transform;
}
.tox-hero-logos__track img {
    /* Zoom removed (client request 2026-09) — constant logo size. */
    height: 34px !important;
    width: auto !important; max-width: none !important;
    flex: 0 0 auto;
    opacity: .9;
    filter: brightness(0) invert(1); /* uniform white logos over the skyline */
}
/* Grid retired — the logos now parade past instead of settling into a wall. */
.tox-hero-logos__grid { display: none !important; }
@keyframes tox-hm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* GRID (converged) — a centred wall of the same logos, faded/scaled in on scroll,
   sitting where the (now faded) copy was. */
.tox-hero-logos__grid {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) translateY(calc((1 - var(--tox-hero-conv, 0)) * 28px));
    width: min(1100px, 92vw);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px 30px;
    opacity: var(--tox-hero-conv, 0);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.tox-hero-logos__grid img {
    height: 26px !important; width: 100% !important; object-fit: contain;
    opacity: .9;
    filter: brightness(0) invert(1);
}
/* Caption hidden for now — the logo wall reads clean on its own (ondo-style). */
.tox-hero-logos__cap { display: none; }

@media (max-width: 900px) {
    .tox-hero-logos__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
    .tox-hero-logos__grid { grid-template-columns: repeat(3, 1fr); }
    .tox-hero-logos__track img, .tox-hero-logos__grid img { height: 22px; }
}

/* Reduced motion: no autoplay video (poster only), no marquee animation. */
@media (prefers-reduced-motion: reduce) {
    .tox-hero-logos__track { animation: none; }
}

/* ===== Uniform logo sizing (2026-09) =====
   Logos ranged 34px–624px wide (18x!) because only the HEIGHT was fixed and the
   aspect ratios span 1:1 … 18:1. Give every logo the SAME box and let object-fit
   letterbox inside it — wide wordmarks are width-limited, compact marks
   height-limited, so all occupy equal visual space. */
.tox-hero-logos__track img {
    /* Was a fixed 132x40 box: wide wordmarks got squeezed to 132px wide (Noumena
       rendered ~7px tall). Now each logo gets its own optical height (--lh, set per
       logo from data-lh) and a free width, so all read with equal visual weight. */
    width: auto !important;
    height: calc(var(--lh, 36) * 1px) !important;
    object-fit: contain !important;
    object-position: center !important;
    max-width: none !important;
    flex: 0 0 auto;
}

/* Phones: same per-logo proportions, scaled down. */
@media (max-width: 560px) {
    .tox-hero-logos__track img { height: calc(var(--lh, 36) * 0.62px) !important; }
}