.hero-slider {
    height: clamp(620px, 76vh, 790px);
    min-height: 620px;
    position: relative;
    overflow: hidden;
    background: #102a43;
    isolation: isolate
}

.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0
}

.hero-slide {
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2
}

.hero-media,
.hero-wash {
    position: absolute;
    inset: 0
}

.hero-media {
    z-index: -3;
    overflow: hidden
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04)
}

.hero-slide.is-active .hero-media img {
    animation: kenburns 8s ease-out forwards
}

.hero-slide:nth-child(2n) .hero-media img {
    transform-origin: 70% 40%
}

.hero-slide:nth-child(3n) .hero-media img {
    transform-origin: 35% 55%
}

.hero-wash {
    z-index: -2;
    background: linear-gradient(90deg, rgba(8, 29, 48, .90) 0%, rgba(16, 42, 67, .78) 38%, rgba(16, 42, 67, .38) 61%, rgba(16, 42, 67, .06) 82%)
}

.hero-wash:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 29, 48, .05), rgba(8, 29, 48, .22))
}

.hero-slider .hero-content {
    position: relative;
    z-index: 1;
    padding: 88px 0 112px;
    max-width: none
}

.hero-slider .hero-content>* {
    max-width: 800px
}

.hero-slider h1 {
    font-size: clamp(48px, 6.6vw, 92px);
    line-height: .96;
    letter-spacing: -.06em;
    margin: 0 0 28px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .18)
}

.hero-slider h1 em {
    font-style: normal;
    color: #146EF5
}

.hero-slider .lead {
    font-size: 18px;
    color: #e3edf5;
    max-width: 680px
}

.hero-slider .actions {
    margin-top: 30px
}

.hero-slider .eyebrow {
    color: #75baff
}

.hero-slider .button.ghost {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-color: rgba(255, 255, 255, .58);
    backdrop-filter: blur(7px)
}

.hero-slider .button.ghost:hover {
    background: #fff;
    color: #102a43
}

.hero-controls {
    position: absolute;
    left: 50%;
    bottom: 32px;
    z-index: 5;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none
}

.hero-dots,
.hero-arrows {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto
}

.hero-dot {
    width: 34px;
    height: 4px;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .38);
    padding: 0;
    cursor: pointer;
    transition: .25s
}

.hero-dot.is-active {
    width: 58px;
    background: #146ef5
}

.hero-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(16, 42, 67, .44);
    color: #fff;
    font-size: 19px;
    cursor: pointer
}

.hero-arrow:hover {
    background: #146ef5;
    color: #fff
}

.hero-progress {
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    z-index: 5;
    background: rgba(16, 42, 67, .1)
}

.hero-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #146ef5, #00a6a6)
}

.hero-slider.is-running .hero-progress span {
    animation: slideprogress 7s linear forwards
}

@keyframes kenburns {
    from {
        transform: scale(1.04)
    }

    to {
        transform: scale(1.13)
    }
}

@keyframes slideprogress {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@media(max-width:900px) {
    .hero-slider {
        height: 680px
    }

    .hero-wash {
        background: linear-gradient(90deg, rgba(8, 29, 48, .91), rgba(16, 42, 67, .65))
    }

    .hero-slider .hero-content {
        padding-bottom: 125px
    }

    .hero-slider h1 {
        font-size: clamp(43px, 10vw, 68px)
    }

    .hero-slider .lead {
        font-size: 16px
    }
}

@media(max-width:620px) {
    .hero-slider {
        height: 720px
    }

    .hero-slider .actions {
        flex-direction: column;
        align-items: flex-start
    }

    .hero-arrows {
        display: none
    }

    .hero-dot {
        width: 25px
    }

    .hero-dot.is-active {
        width: 44px
    }
}

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

    .hero-slide,
    .hero-media img,
    .hero-progress span {
        animation: none !important;
        transition: none !important
    }
}