/* VSL HERO PREMIUM
   Canonical hero-only stylesheet.
   Replaces the accumulated experimental hero patches.
   Scoped to #hero; no other website section is changed.
*/

#hero.hero.premium-hero {
    --vsl-hero-navy: #102e72;
    --vsl-hero-blue: #173a86;
    --vsl-hero-teal: #10aebe;
    --vsl-hero-cyan: #25c8d3;
    --vsl-hero-ink: #17304f;
    --vsl-hero-muted: #50647f;
    --vsl-hero-paper: #ffffff;
    --vsl-hero-line: rgba(21, 58, 136, .12);
    --vsl-hero-shadow: 0 24px 70px rgba(16, 46, 114, .16);
    --vsl-hero-ease: cubic-bezier(.22, .8, .24, 1);

    position: relative !important;
    width: 100% !important;
    height: clamp(500px, calc(100svh - 112px), 660px) !important;
    min-height: 500px !important;
    max-height: 660px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #eaf4fa !important;
    isolation: isolate !important;
}

#hero > [data-vsl-story-component],
body > [data-vsl-story-component] {
    display: none !important;
}

/* ---------- Slider and six final scenes ---------- */

#hero .hero-slider,
#hero [data-hero-slider] {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #eaf4fa !important;
    box-shadow: none !important;
}

#hero .hero-slide,
#hero [data-hero-slide] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background-color: #eef6fb !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 62% center !important;
    background-blend-mode: normal !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: scale(1.018) !important;
    transition:
        opacity 620ms var(--vsl-hero-ease),
        transform 1100ms var(--vsl-hero-ease),
        visibility 0s linear 620ms !important;
}

#hero .hero-slide.is-active,
#hero [data-hero-slide].is-active {
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
    transition-delay: 0s !important;
}

#hero .hero-slide.is-leaving,
#hero [data-hero-slide].is-leaving {
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: visible !important;
    transform: scale(1.008) !important;
}

/* Exact approved desktop artwork. */
#hero .hero-slide:nth-child(1) {
    background-image: url("../images/hero/final/scene-01-overview.webp") !important;
}

#hero .hero-slide:nth-child(2) {
    background-image: url("../images/hero/final/scene-02-ct-contrast.webp") !important;
}

#hero .hero-slide:nth-child(3) {
    background-image: url("../images/hero/final/scene-03-pacemakers-stents.webp") !important;
}

#hero .hero-slide:nth-child(4) {
    background-image: url("../images/hero/final/scene-04-ng-enfit.webp") !important;
}

#hero .hero-slide:nth-child(5) {
    background-image: url("../images/hero/final/scene-05-giving-irrigation.webp") !important;
}

#hero .hero-slide:nth-child(6) {
    background-image: url("../images/hero/final/scene-06-nda-ura.webp") !important;
}

/*
 * Light local readability wash only.
 * The right/product side remains almost completely natural.
 */
#hero .hero-slide::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .90) 0%,
            rgba(255, 255, 255, .76) 25%,
            rgba(255, 255, 255, .24) 46%,
            rgba(255, 255, 255, .04) 67%,
            rgba(255, 255, 255, 0) 100%
        ) !important;
    opacity: 1 !important;
}

#hero .hero-slide::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(37, 200, 211, .05),
            transparent 25rem
        ) !important;
    opacity: 1 !important;
}

#hero .hero-slide-overlay,
#hero .hero-overlay,
#hero .hero-shade,
#hero .hero-scrim,
#hero .hero-media::before,
#hero .hero-media::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: transparent !important;
    background-image: none !important;
    pointer-events: none !important;
}

/* Obsolete experimental media layers must never duplicate the final artwork. */
#hero .vsl-stage2-media,
#hero .vsl-stage2-media__image,
#hero .vsl-stage2-legacy-visual,
#hero .hero-story-side,
#hero .hero-bottom-strip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- Copy panel ---------- */

#hero .hero-grid,
#hero .hero-layout {
    position: relative !important;
    z-index: 4 !important;
    width: min(1320px, calc(100% - 48px)) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 26px 0 84px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 540px) 1fr !important;
    align-items: center !important;
    gap: 30px !important;
    pointer-events: none !important;
}

#hero .hero-story-main,
#hero .hero-copy,
#hero .hero-content {
    position: relative !important;
    z-index: 5 !important;
    width: min(540px, 43vw) !important;
    max-width: 540px !important;
    max-height: calc(100% - 24px) !important;
    margin: 0 !important;
    padding: 26px 30px 24px !important;
    overflow: visible !important;
    color: var(--vsl-hero-ink) !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .92),
            rgba(248, 252, 255, .82)
        ) !important;
    border: 1px solid rgba(255, 255, 255, .90) !important;
    border-radius: 26px !important;
    box-shadow:
        var(--vsl-hero-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .98) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

#hero .hero-story-main::before,
#hero .hero-copy::before,
#hero .hero-content::before {
    content: "" !important;
    position: absolute !important;
    top: 24px !important;
    bottom: 24px !important;
    left: 0 !important;
    width: 4px !important;
    border-radius: 0 999px 999px 0 !important;
    background:
        linear-gradient(
            180deg,
            var(--vsl-hero-teal),
            var(--vsl-hero-blue)
        ) !important;
    box-shadow: 0 0 20px rgba(16, 174, 190, .28) !important;
}

#hero .hero-story-main .eyebrow,
#hero .hero-copy .eyebrow,
#hero .hero-content .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    margin: 0 0 15px !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(16, 174, 190, .19) !important;
    border-radius: 999px !important;
    color: #087f97 !important;
    background: rgba(247, 254, 255, .90) !important;
    box-shadow: 0 7px 18px rgba(11, 122, 143, .07) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .09em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

#hero .hero-story-main .eyebrow::before,
#hero .hero-copy .eyebrow::before,
#hero .hero-content .eyebrow::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    border-radius: 50% !important;
    background: var(--vsl-hero-teal) !important;
    box-shadow: 0 0 0 5px rgba(16, 174, 190, .12) !important;
}

#hero .hero-story-main h1,
#hero .hero-copy h1,
#hero .hero-content h1,
#hero .hero-title {
    max-width: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--vsl-hero-navy) !important;
    font-size: clamp(42px, 4.25vw, 64px) !important;
    font-weight: 850 !important;
    line-height: .95 !important;
    letter-spacing: -.055em !important;
    text-shadow: none !important;
    text-wrap: balance !important;
}

#hero .hero-story-main h2,
#hero .hero-copy h2,
#hero .hero-content h2 {
    max-width: 490px !important;
    margin: 14px 0 0 !important;
    color: #0a8298 !important;
    font-size: clamp(16px, 1.45vw, 21px) !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
    letter-spacing: -.02em !important;
    text-shadow: none !important;
}

#hero .hero-story-main > p,
#hero .hero-copy > p,
#hero .hero-content > p,
#hero .hero-lead {
    max-width: 48ch !important;
    margin: 12px 0 0 !important;
    color: var(--vsl-hero-muted) !important;
    font-size: clamp(14px, 1.04vw, 16px) !important;
    font-weight: 520 !important;
    line-height: 1.52 !important;
    text-shadow: none !important;
}

#hero .hero-actions,
#hero .hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 17px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#hero .hero-actions .btn,
#hero .hero-buttons .btn {
    position: relative !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition:
        transform 220ms var(--vsl-hero-ease),
        box-shadow 220ms ease,
        border-color 220ms ease !important;
}

#hero .hero-actions .btn-primary,
#hero .hero-buttons .btn-primary,
#hero .hero-actions .btn:first-child {
    color: #fff !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(
            125deg,
            #173a86 0%,
            #0c75a4 55%,
            #10aebe 100%
        ) !important;
    box-shadow:
        0 14px 30px rgba(9, 76, 148, .22),
        inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

#hero .hero-actions .btn-secondary,
#hero .hero-buttons .btn-secondary {
    color: var(--vsl-hero-blue) !important;
    border: 1px solid var(--vsl-hero-line) !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow: 0 10px 24px rgba(16, 46, 114, .08) !important;
}

#hero .hero-actions .btn:hover,
#hero .hero-buttons .btn:hover {
    transform: translateY(-2px) !important;
}

#hero .hero-actions .btn:first-child::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    transform: translateX(-125%) skewX(-20deg) !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .27),
            transparent
        ) !important;
    transition: transform 650ms var(--vsl-hero-ease) !important;
}

#hero .hero-actions .btn:first-child:hover::after {
    transform: translateX(125%) skewX(-20deg) !important;
}

#hero .hero-mini-points {
    max-width: 510px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 13px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#hero .hero-mini-points > * {
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(21, 58, 136, .09) !important;
    border-radius: 999px !important;
    color: #49617e !important;
    background: rgba(249, 252, 255, .86) !important;
    font-size: 9px !important;
    font-weight: 750 !important;
}

/* ---------- Official slider navigation only ---------- */

#hero .hero-slider-nav {
    position: absolute !important;
    z-index: 20 !important;
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    top: auto !important;
    width: min(1320px, calc(100% - 48px)) !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 8px 10px 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(255, 255, 255, .74) !important;
    border-radius: 17px !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .84),
            rgba(242, 250, 255, .71)
        ) !important;
    box-shadow:
        0 18px 46px rgba(5, 31, 75, .16),
        inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#hero .hero-dots,
#hero [data-hero-dots] {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#hero .hero-dot,
#hero [data-hero-dot] {
    position: relative !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(23, 73, 128, .09) !important;
    border-radius: 11px !important;
    color: #4b6386 !important;
    background: rgba(255, 255, 255, .65) !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
    transition:
        flex-basis 300ms var(--vsl-hero-ease),
        width 300ms var(--vsl-hero-ease),
        color 220ms ease,
        background 220ms ease,
        transform 220ms ease !important;
}

#hero .hero-dot.is-active,
#hero [data-hero-dot].is-active,
#hero [data-hero-dot][aria-current="true"] {
    flex-basis: 52px !important;
    width: 52px !important;
    color: #fff !important;
    border-color: transparent !important;
    background:
        linear-gradient(
            125deg,
            #17449b,
            #09aebd
        ) !important;
    box-shadow: 0 8px 18px rgba(9, 102, 163, .20) !important;
    transform: translateY(-1px) !important;
}

#hero .hero-slider-nav > [data-vsl-hero-controls] {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 0 0 auto !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#hero [data-vsl-hero-progress] {
    position: relative !important;
    inset: auto !important;
    width: clamp(70px, 8vw, 118px) !important;
    height: 3px !important;
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    border-radius: 999px !important;
    background: rgba(13, 64, 126, .13) !important;
}

#hero [data-vsl-hero-progress] > span {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    background:
        linear-gradient(
            90deg,
            var(--vsl-hero-blue),
            var(--vsl-hero-teal)
        ) !important;
}

#hero.vsl-hero-playing [data-vsl-hero-progress] > span {
    animation: vslHeroProgress 7000ms linear forwards !important;
}

#hero [data-vsl-hero-counter] {
    position: static !important;
    inset: auto !important;
    min-width: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: none !important;
    color: #173f73 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#hero [data-vsl-hero-prev],
#hero [data-vsl-hero-next] {
    position: static !important;
    inset: auto !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 1px solid rgba(15, 74, 137, .12) !important;
    border-radius: 12px !important;
    color: #123f7e !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow:
        0 8px 18px rgba(8, 45, 93, .10),
        inset 0 1px 0 #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition:
        color 220ms ease,
        transform 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease !important;
}

#hero [data-vsl-hero-prev]:hover,
#hero [data-vsl-hero-next]:hover {
    color: #fff !important;
    border-color: transparent !important;
    background:
        linear-gradient(
            135deg,
            #154796,
            #08aabd
        ) !important;
    box-shadow: 0 11px 22px rgba(6, 90, 149, .24) !important;
    transform: translateY(-2px) !important;
}

/* Suppress controls that are not children of the official navigation bar. */
#hero > [data-vsl-hero-controls],
#hero .hero-slider > [data-vsl-hero-controls],
#hero .hero-grid [data-vsl-hero-controls],
#hero .hero-bottom-strip [data-vsl-hero-controls],
#hero > [data-vsl-hero-prev],
#hero > [data-vsl-hero-next],
#hero .hero-slider > [data-vsl-hero-prev],
#hero .hero-slider > [data-vsl-hero-next] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* If initialization ever runs twice, only the first official controls block remains. */
#hero .hero-slider-nav > [data-vsl-hero-controls]
    ~ [data-vsl-hero-controls] {
    display: none !important;
}

/* ---------- Motion ---------- */

#hero .hero-story-main > *,
#hero .hero-copy > *,
#hero .hero-content > * {
    opacity: 0;
    transform: translateY(18px);
}

#hero .hero-slide.is-active .hero-story-main > *,
#hero .hero-slide.is-active .hero-copy > *,
#hero .hero-slide.is-active .hero-content > * {
    animation: vslHeroCopyIn 660ms var(--vsl-hero-ease) both;
}

#hero .hero-slide.is-active .hero-story-main > :nth-child(2),
#hero .hero-slide.is-active .hero-copy > :nth-child(2),
#hero .hero-slide.is-active .hero-content > :nth-child(2) {
    animation-delay: 70ms;
}

#hero .hero-slide.is-active .hero-story-main > :nth-child(3),
#hero .hero-slide.is-active .hero-copy > :nth-child(3),
#hero .hero-slide.is-active .hero-content > :nth-child(3) {
    animation-delay: 130ms;
}

#hero .hero-slide.is-active .hero-story-main > :nth-child(4),
#hero .hero-slide.is-active .hero-copy > :nth-child(4),
#hero .hero-slide.is-active .hero-content > :nth-child(4) {
    animation-delay: 190ms;
}

#hero .hero-slide.is-active .hero-story-main > :nth-child(5),
#hero .hero-slide.is-active .hero-copy > :nth-child(5),
#hero .hero-slide.is-active .hero-content > :nth-child(5) {
    animation-delay: 250ms;
}

@keyframes vslHeroCopyIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes vslHeroProgress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* ---------- Short laptops ---------- */

@media (min-width: 721px) and (max-height: 800px) {
    #hero.hero.premium-hero {
        height: clamp(480px, calc(100svh - 112px), 570px) !important;
        min-height: 480px !important;
        max-height: 570px !important;
    }

    #hero .hero-grid,
    #hero .hero-layout {
        padding-top: 18px !important;
        padding-bottom: 76px !important;
    }

    #hero .hero-story-main,
    #hero .hero-copy,
    #hero .hero-content {
        padding: 21px 26px 20px !important;
    }

    #hero .hero-story-main h1,
    #hero .hero-copy h1,
    #hero .hero-content h1,
    #hero .hero-title {
        font-size: clamp(39px, 4vw, 58px) !important;
    }

    #hero .hero-story-main h2,
    #hero .hero-copy h2,
    #hero .hero-content h2 {
        margin-top: 11px !important;
        font-size: clamp(15px, 1.35vw, 19px) !important;
    }

    #hero .hero-story-main > p,
    #hero .hero-copy > p,
    #hero .hero-content > p,
    #hero .hero-lead {
        margin-top: 9px !important;
        font-size: 14px !important;
        line-height: 1.46 !important;
    }

    #hero .hero-actions,
    #hero .hero-buttons {
        margin-top: 13px !important;
    }

    #hero .hero-mini-points {
        margin-top: 10px !important;
    }

    #hero .hero-slider-nav {
        bottom: 10px !important;
        height: 52px !important;
        min-height: 52px !important;
    }
}

/* ---------- Tablet and mobile ---------- */

@media (max-width: 980px) {
    #hero.hero.premium-hero {
        height: calc(100svh - 72px) !important;
        min-height: 650px !important;
        max-height: 780px !important;
    }

    #hero .hero-grid,
    #hero .hero-layout {
        width: calc(100% - 28px) !important;
        grid-template-columns: 1fr !important;
        align-items: end !important;
        padding: 260px 0 80px !important;
    }

    #hero .hero-story-main,
    #hero .hero-copy,
    #hero .hero-content {
        width: min(560px, 100%) !important;
        max-width: none !important;
        max-height: none !important;
        padding: 23px 22px !important;
    }

    #hero [data-vsl-hero-progress] {
        width: 74px !important;
    }
}

@media (max-width: 720px) {
    #hero.hero.premium-hero {
        height: calc(100svh - 68px) !important;
        min-height: 680px !important;
        max-height: 820px !important;
        border-radius: 0 !important;
    }

    /* Exact approved mobile artwork. */
    #hero .hero-slide:nth-child(1) {
        background-image: url("../images/hero/final/scene-01-overview-mobile.webp") !important;
    }

    #hero .hero-slide:nth-child(2) {
        background-image: url("../images/hero/final/scene-02-ct-contrast-mobile.webp") !important;
    }

    #hero .hero-slide:nth-child(3) {
        background-image: url("../images/hero/final/scene-03-pacemakers-stents-mobile.webp") !important;
    }

    #hero .hero-slide:nth-child(4) {
        background-image: url("../images/hero/final/scene-04-ng-enfit-mobile.webp") !important;
    }

    #hero .hero-slide:nth-child(5) {
        background-image: url("../images/hero/final/scene-05-giving-irrigation-mobile.webp") !important;
    }

    #hero .hero-slide:nth-child(6) {
        background-image: url("../images/hero/final/scene-06-nda-ura-mobile.webp") !important;
    }

    #hero .hero-slide,
    #hero [data-hero-slide] {
        background-size: cover !important;
        background-position: center top !important;
    }

    #hero .hero-slide::before {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, .02) 38%,
                rgba(255, 255, 255, .70) 61%,
                rgba(248, 252, 255, .97) 100%
            ) !important;
    }

    #hero .hero-slide::after {
        display: none !important;
        content: none !important;
    }

    #hero .hero-grid,
    #hero .hero-layout {
        width: calc(100% - 24px) !important;
        min-height: 100% !important;
        align-items: end !important;
        padding: 42vh 0 74px !important;
    }

    #hero .hero-story-main,
    #hero .hero-copy,
    #hero .hero-content {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        padding: 19px 17px 20px !important;
        border-radius: 21px !important;
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .94),
                rgba(247, 252, 255, .88)
            ) !important;
        box-shadow:
            0 22px 50px rgba(5, 35, 81, .17),
            inset 0 1px 0 #fff !important;
    }

    #hero .hero-story-main::before,
    #hero .hero-copy::before,
    #hero .hero-content::before {
        top: 20px !important;
        bottom: 20px !important;
        width: 3px !important;
    }

    #hero .hero-story-main .eyebrow,
    #hero .hero-copy .eyebrow,
    #hero .hero-content .eyebrow {
        margin-bottom: 11px !important;
        padding: 6px 9px !important;
        font-size: 8px !important;
    }

    #hero .hero-story-main h1,
    #hero .hero-copy h1,
    #hero .hero-content h1,
    #hero .hero-title {
        font-size: clamp(32px, 10vw, 44px) !important;
        line-height: .96 !important;
        letter-spacing: -.048em !important;
    }

    #hero .hero-story-main h2,
    #hero .hero-copy h2,
    #hero .hero-content h2 {
        margin-top: 10px !important;
        font-size: 14px !important;
        line-height: 1.22 !important;
    }

    #hero .hero-story-main > p,
    #hero .hero-copy > p,
    #hero .hero-content > p,
    #hero .hero-lead {
        margin-top: 8px !important;
        font-size: 12px !important;
        line-height: 1.42 !important;
    }

    #hero .hero-actions,
    #hero .hero-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    #hero .hero-actions .btn,
    #hero .hero-buttons .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 0 9px !important;
        font-size: 10px !important;
    }

    #hero .hero-mini-points {
        display: none !important;
    }

    #hero .hero-slider-nav {
        left: 12px !important;
        right: 12px !important;
        bottom: 10px !important;
        width: auto !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 7px 8px !important;
        transform: none !important;
        border-radius: 15px !important;
    }

    #hero .hero-dots,
    #hero [data-hero-dots] {
        display: none !important;
    }

    #hero .hero-slider-nav > [data-vsl-hero-controls] {
        width: 100% !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }

    #hero [data-vsl-hero-progress] {
        display: none !important;
    }

    #hero [data-vsl-hero-counter] {
        order: 2 !important;
        min-width: 56px !important;
        margin: 0 auto !important;
        font-size: 11px !important;
    }

    #hero [data-vsl-hero-prev] {
        order: 1 !important;
    }

    #hero [data-vsl-hero-next] {
        order: 3 !important;
    }

    #hero [data-vsl-hero-prev],
    #hero [data-vsl-hero-next] {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
    }
}

@media (max-width: 430px) {
    #hero.hero.premium-hero {
        min-height: 660px !important;
    }

    #hero .hero-grid,
    #hero .hero-layout {
        padding-top: 40vh !important;
    }

    #hero .hero-actions,
    #hero .hero-buttons {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Dark mode ---------- */

html[data-theme="dark"] #hero.hero.premium-hero,
html[data-theme="dark"] #hero .hero-slider {
    background: #07132e !important;
}

html[data-theme="dark"] #hero .hero-slide::before {
    background:
        linear-gradient(
            90deg,
            rgba(3, 7, 18, .94) 0%,
            rgba(3, 7, 18, .83) 28%,
            rgba(7, 19, 46, .50) 47%,
            rgba(7, 19, 46, .08) 68%,
            rgba(7, 19, 46, 0) 100%
        ) !important;
}

html[data-theme="dark"] #hero .hero-story-main,
html[data-theme="dark"] #hero .hero-copy,
html[data-theme="dark"] #hero .hero-content {
    color: #f5fbff !important;
    background:
        linear-gradient(
            145deg,
            rgba(6, 16, 31, .88),
            rgba(10, 27, 54, .78)
        ) !important;
    border-color: rgba(255, 255, 255, .11) !important;
}

html[data-theme="dark"] #hero .hero-story-main h1,
html[data-theme="dark"] #hero .hero-copy h1,
html[data-theme="dark"] #hero .hero-content h1,
html[data-theme="dark"] #hero .hero-title {
    color: #f5fbff !important;
}

html[data-theme="dark"] #hero .hero-story-main h2,
html[data-theme="dark"] #hero .hero-copy h2,
html[data-theme="dark"] #hero .hero-content h2 {
    color: #74e5ed !important;
}

html[data-theme="dark"] #hero .hero-story-main > p,
html[data-theme="dark"] #hero .hero-copy > p,
html[data-theme="dark"] #hero .hero-content > p,
html[data-theme="dark"] #hero .hero-lead {
    color: #c2d1e2 !important;
}

/* ---------- Accessibility ---------- */

#hero .hero-actions .btn:focus-visible,
#hero [data-hero-dot]:focus-visible,
#hero [data-vsl-hero-prev]:focus-visible,
#hero [data-vsl-hero-next]:focus-visible {
    outline: 3px solid rgba(16, 174, 190, .42) !important;
    outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
    #hero *,
    #hero *::before,
    #hero *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    #hero .hero-slide,
    #hero [data-hero-slide] {
        transform: none !important;
    }

    #hero [data-vsl-hero-progress] {
        display: none !important;
    }
}