.scroll-video-track {
    display: none;
}

.scroll-video-cue--mobile {
    display: none;
}

@media screen and (max-width: 1023.98px) {
    html,
    body {
        overflow-x: clip;
    }

    .scroll-video-hero {
        min-height: 0;
        padding: 0 !important;
        overflow: visible;
        background: #06111c;
    }

    .scroll-video-track {
        display: block;
        position: relative;
    }

    .scroll-video-stage {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 100vh;
        height: 100svh;
        overflow: hidden;
        isolation: isolate;
        background: #06111c;
    }

    .scroll-video-media,
    .scroll-video-shade {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .scroll-video-media {
        z-index: -2;
        object-fit: cover;
        object-position: center;
    }

    .scroll-video-shade {
        z-index: -1;
        background:
            linear-gradient(180deg, rgba(1, 12, 22, .38) 0%, rgba(1, 12, 22, .12) 28%, rgba(1, 12, 22, .08) 54%, rgba(1, 12, 22, .62) 100%),
            linear-gradient(90deg, rgba(1, 12, 22, .72) 0%, rgba(1, 12, 22, .36) 72%, rgba(1, 12, 22, .14) 100%);
    }

    .scroll-video-copy {
        position: absolute;
        top: clamp(190px, 27svh, 240px);
        left: 24px;
        width: calc(100% - 48px);
        color: #fff;
        transform: translate3d(0, var(--copy-offset, 0px), 0);
        opacity: var(--copy-opacity, 1);
        will-change: transform, opacity;
    }

    .scroll-video-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 17px;
        color: #ffc631;
        font-family: Archivo, sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .17em;
        opacity: var(--eyebrow-opacity, 1);
        transform: translate3d(0, var(--eyebrow-offset, 15px), 0);
        transition: opacity .15s linear, transform .15s linear;
    }

    .scroll-video-eyebrow::before {
        width: 24px;
        height: 1px;
        background: #ffc631;
        content: "";
    }

    .scroll-video-message {
        position: relative;
    }

    .scroll-video-message--outgoing {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        pointer-events: none;
    }

    .scroll-video-title {
        max-width: 100%;
        font-family: Archivo, sans-serif;
        font-size: clamp(35px, 9.6vw, 52px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.055em;
        text-wrap: balance;
        text-shadow: 0 4px 24px rgba(0, 0, 0, .3);
    }

    .scroll-video-title span {
        color: #ffc631;
    }

    .scroll-video-title [data-scroll-video-title-first],
    .scroll-video-message--outgoing .scroll-video-title span:first-child {
        color: #fff;
    }

    .scroll-video-description {
        max-width: 440px;
        margin-top: 17px;
        color: rgba(255, 255, 255, .9);
        font-size: 15px;
        line-height: 1.6;
        transform: translate3d(0, var(--description-offset, 12px), 0);
    }

    .scroll-video-chapters {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 19px;
        color: rgba(255, 255, 255, .74);
        font-family: Archivo, sans-serif;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .13em;
    }

    .scroll-video-chapter-count {
        display: inline-flex;
        gap: 6px;
        color: #ffc631;
        font-variant-numeric: tabular-nums;
    }

    .scroll-video-chapter-divider {
        color: rgba(255, 255, 255, .45);
    }

    .scroll-video-chapter-track {
        position: relative;
        width: 42px;
        height: 1px;
        overflow: hidden;
        background: rgba(255, 255, 255, .4);
    }

    .scroll-video-chapter-progress {
        position: absolute;
        inset: 0 auto 0 0;
        width: 20%;
        background: #ffc631;
        transform: scaleX(var(--chapter-progress, 0));
        transform-origin: left center;
    }

    .scroll-video-chapter-label {
        color: rgba(255, 255, 255, .82);
        font-size: 8px;
        white-space: nowrap;
    }

    .scroll-video-cta {
        display: inline-flex;
        align-items: center;
        gap: 18px;
        margin-top: 21px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .7);
        color: #fff;
        font-family: Archivo, sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .12em;
        opacity: var(--cta-opacity, .95);
    }

    .scroll-video-cta span {
        color: #ffc631;
        font-size: 17px;
    }

    .scroll-video-note {
        position: absolute;
        bottom: 22px;
        right: 18px;
        color: rgba(255, 255, 255, .76);
        font-family: Archivo, sans-serif;
        font-size: 8px;
        font-weight: 600;
        letter-spacing: .13em;
    }

    .scroll-video-note span {
        margin: 0 5px;
        color: #ffc631;
    }

    .scroll-video-cue {
        position: absolute;
        left: 50%;
        bottom: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        color: #fff;
        font-family: Archivo, sans-serif;
        font-size: 8px;
        font-weight: 600;
        letter-spacing: .17em;
        transform: translateX(-50%);
    }

    .scroll-video-stage > .scroll-video-cue {
        display: none;
    }

    .scroll-video-cue--mobile {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        width: fit-content;
        margin: 17px auto 0;
        transform: none;
    }

    .scroll-video-cue svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: #ffc631;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.5;
        animation: scroll-video-bounce 1.5s ease-in-out infinite;
    }

    .scroll-video-hero > .hero_deco,
    .scroll-video-hero > .container {
        display: none;
    }

    @media screen and (max-height: 640px) {
        .scroll-video-copy {
            top: 140px;
        }

        .scroll-video-eyebrow {
            margin-bottom: 11px;
        }

        .scroll-video-title {
            font-size: clamp(32px, 8.6vw, 42px);
        }

        .scroll-video-description {
            margin-top: 11px;
            font-size: 14px;
        }

        .scroll-video-chapters {
            margin-top: 12px;
        }

        .scroll-video-cta {
            margin-top: 13px;
            padding: 8px 0;
        }
    }
}

@media screen and (min-width: 1024px) {
    html,
    body {
        overflow-x: clip;
    }

    .scroll-video-hero {
        height: auto;
        min-height: 0;
        padding: 0 !important;
        overflow: visible;
        background: #06111c;
    }

    .scroll-video-track {
        display: block;
        position: relative;
        height: 220vh;
    }

    .scroll-video-stage {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 100vh;
        height: 100svh;
        overflow: hidden;
        isolation: isolate;
        background: #06111c;
    }

    .scroll-video-media,
    .scroll-video-shade {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .scroll-video-media {
        z-index: -2;
        object-fit: cover;
        object-position: center;
    }

    .scroll-video-shade {
        z-index: -1;
        background:
            linear-gradient(90deg, rgba(1, 12, 22, .88) 0%, rgba(1, 12, 22, .62) 38%, rgba(1, 12, 22, .08) 78%),
            linear-gradient(0deg, rgba(1, 12, 22, .56) 0%, transparent 35%, rgba(1, 12, 22, .12) 100%);
    }

    .scroll-video-copy {
        position: absolute;
        left: clamp(140px, 10vw, 170px);
        top: 40%;
        width: min(1100px, 82vw);
        color: #fff;
        transform: translate3d(0, var(--copy-offset, 0px), 0);
        transform-origin: left center;
        opacity: var(--copy-opacity, 1);
        will-change: transform, opacity;
    }

    .scroll-video-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 23px;
        color: #ffc631;
        font-family: Archivo, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .2em;
        opacity: var(--eyebrow-opacity, 1);
        transform: translate3d(0, var(--eyebrow-offset, 15px), 0);
        transition: opacity .15s linear, transform .15s linear;
    }

    .scroll-video-eyebrow::before {
        width: 34px;
        height: 1px;
        background: #ffc631;
        content: "";
    }

    .scroll-video-message {
        position: relative;
    }

    .scroll-video-message--outgoing {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        pointer-events: none;
    }

    .scroll-video-title {
        max-width: 1100px;
        font-family: Archivo, sans-serif;
        font-size: clamp(48px, 6.2vw, 96px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.055em;
        text-wrap: balance;
        text-shadow: 0 4px 28px rgba(0, 0, 0, .2);
        opacity: var(--title-opacity, 1);
        transform: scale(var(--title-scale, 1));
        transform-origin: left center;
        transition: opacity .15s linear, transform .15s linear;
    }

    .scroll-video-title span {
        color: #ffc631;
    }

    .scroll-video-title [data-scroll-video-title-first],
    .scroll-video-message--outgoing .scroll-video-title span:first-child {
        color: #fff;
    }

    .scroll-video-description {
        max-width: 510px;
        margin-top: 24px;
        color: rgba(255, 255, 255, .82);
        font-size: clamp(16px, 1.15vw, 19px);
        line-height: 1.7;
        opacity: var(--description-opacity, .95);
        transform: translate3d(0, var(--description-offset, 12px), 0);
        transition: opacity .15s linear, transform .15s linear;
    }

    .scroll-video-chapters {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 25px;
        color: rgba(255, 255, 255, .68);
        font-family: Archivo, sans-serif;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .16em;
    }

    .scroll-video-chapter-count {
        display: inline-flex;
        gap: 7px;
        color: #ffc631;
        font-variant-numeric: tabular-nums;
    }

    .scroll-video-chapter-divider {
        color: rgba(255, 255, 255, .38);
    }

    .scroll-video-chapter-track {
        position: relative;
        width: 74px;
        height: 1px;
        overflow: hidden;
        background: rgba(255, 255, 255, .32);
    }

    .scroll-video-chapter-progress {
        position: absolute;
        inset: 0 auto 0 0;
        width: 20%;
        background: #ffc631;
        transform: scaleX(var(--chapter-progress, 0));
        transform-origin: left center;
    }

    .scroll-video-chapter-label {
        color: rgba(255, 255, 255, .74);
    }

    .scroll-video-cta {
        display: inline-flex;
        align-items: center;
        gap: 28px;
        margin-top: 30px;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .65);
        color: #fff;
        font-family: Archivo, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .14em;
        opacity: var(--cta-opacity, .95);
        transition: color .2s ease, opacity .15s linear;
    }

    .scroll-video-cta span {
        color: #ffc631;
        font-size: 18px;
        transition: transform .2s ease;
    }

    .scroll-video-cta:hover {
        color: #ffc631;
    }

    .scroll-video-cta:hover span {
        transform: translate(3px, -3px);
    }

    .scroll-video-note {
        position: absolute;
        right: clamp(32px, 5vw, 80px);
        bottom: 54px;
        color: rgba(255, 255, 255, .76);
        font-family: Archivo, sans-serif;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .18em;
    }

    .scroll-video-note span {
        margin: 0 8px;
        color: #ffc631;
    }

    .scroll-video-cue {
        position: absolute;
        left: 50%;
        bottom: 28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
        color: #fff;
        font-family: Archivo, sans-serif;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .2em;
        transform: translateX(-50%);
    }

    .scroll-video-cue svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: #ffc631;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.5;
        animation: scroll-video-bounce 1.5s ease-in-out infinite;
    }

    .scroll-video-hero > .hero_deco,
    .scroll-video-hero > .container {
        display: none;
    }

    .scroll-video-copy > .scroll-video-cue--mobile {
        display: none;
    }
}

@keyframes scroll-video-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-video-cue svg {
        animation: none;
    }
}