
.hero-solutions__subtitle, .hero-solutions__title {
    display: block;
    font-family: "Familjen Grotesk", Arial, Helvetica, sans-serif
}

.hero-solutions__title {
    font-size: 50px;
    line-height: 54px
}

@media(min-width: 375px) {
    .hero-solutions__title {
        font-size: calc(1.5023474178vw + 44.3661971831px)
    }
}

@media(min-width: 1440px) {
    .hero-solutions__title {
        font-size: 66px
    }
}

@media(min-width: 375px) {
    .hero-solutions__title {
        line-height: calc(1.6901408451vw + 47.661971831px)
    }
}

@media(min-width: 1440px) {
    .hero-solutions__title {
        line-height: 72px
    }
}

.hero-solutions__subtitle {
    font-size: 30px;
    line-height: 38px
}

@media(min-width: 375px) {
    .hero-solutions__subtitle {
        font-size: calc(0.7511737089vw + 27.1830985915px)
    }
}

@media(min-width: 1440px) {
    .hero-solutions__subtitle {
        font-size: 38px
    }
}

@media(min-width: 375px) {
    .hero-solutions__subtitle {
        line-height: calc(0.5633802817vw + 35.8873239437px)
    }
}

@media(min-width: 1440px) {
    .hero-solutions__subtitle {
        line-height: 44px
    }
}

.hero-solutions__eyebrow {
    font-family: "Avenir Book", Arial, Helvetica, sans-serif;
    font-size: 1.1875rem;
    line-height: 1.75rem
}

.hero-solutions__eyebrow {
    font-size: 1.5rem;
    line-height: 1.75rem
}

.hero-solutions {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%
}

.hero-solutions__eyebrow {
    -webkit-animation: fadeInSlideUp .5s ease-out .5s forwards;
    animation: fadeInSlideUp .5s ease-out .5s forwards;
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
}

.hero-solutions__title {
    -webkit-animation: fadeInSlideUp .5s ease-out .7s forwards;
    animation: fadeInSlideUp .5s ease-out .7s forwards;
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
}

.hero-solutions__image {
    display: block;
    height: inherit;
    left: 0;
    position: absolute;
    top: 0;
    width: inherit
}

.hero-solutions__image img, .hero-solutions__image picture {
    display: block;
    height: inherit;
    -o-object-fit: cover;
    object-fit: cover;
    width: inherit
}

.hero-solutions__video-container {
    height: inherit;
    position: relative;
    width: inherit
}

.hero-solutions__video-container img {
    display: block;
    height: inherit;
    -o-object-fit: cover;
    object-fit: cover;
    width: inherit
}

.hero-solutions__video {
    z-index: -1
}

@media print, screen and (min-width: 23.4375em) {
    .hero-solutions__video {
        height: inherit;
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        width: inherit;
        z-index: 1
    }
}

.hero-solutions__video::-webkit-media-controls-play-button {
    -webkit-appearance: none;
    display: none !important
}

.hero-solutions__video*::-webkit-media-controls-start-playback-button {
    -webkit-appearance: none;
    display: none !important
}

.hero-solutions__content {
    height: inherit;
    left: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: 1
}

.hero-solutions__tint {
    background-color: #0a1217;
    height: inherit;
    opacity: .25;
    position: absolute;
    width: inherit
}

.hero-solutions__title-container {
    bottom: 20%;
    position: absolute;
    width: inherit
}

.hero-solutions__title-container--inner {
    -webkit-animation: contentFadeIn .5s ease-out .5s forwards;
    animation: contentFadeIn .5s ease-out .5s forwards;
    opacity: 0;
    position: relative
}

@media print, screen and (min-width: 52.125em) {
    .hero-solutions__title-container--inner {
        max-width: 50%
    }
}

.hero-solutions__subtitle-container {
    bottom: -100%;
    position: absolute;
    width: inherit
}

.hero-solutions__subtitle-container--inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2em
}

@media print, screen and (min-width: 52.125em) {
    .hero-solutions__subtitle-container--inner {
        max-width: 50%
    }
}

.hero-solutions__chevron {
    content: url('data:image/svg+xml;utf8,<svg width="27" height="38" viewBox="0 0 27 38" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.204671 1.21134L17.4942 18.8228C17.6023 18.9329 17.6023 19.1131 17.4942 19.2232L0.208537 36.7887C-0.227901 37.2332 0.0752829 38 0.685524 38H9.2231C9.69816 38 10.1559 37.8058 10.4938 37.4634L25.829 21.9122C27.3874 20.3325 27.3913 17.7316 25.8348 16.1478L10.4957 0.540597C10.1559 0.194215 9.69816 0 9.2231 0H0.683591C0.0733498 0 -0.229836 0.766848 0.204671 1.21134Z" fill="%23FF5200"/></svg>');
    height: 2.5rem
}

.hero-solutions__scroll-indicator {
    bottom: -3em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.hero-solutions__scroll-indicator .graphic-cursor-16 {
    -webkit-animation: chevronScroll 2s infinite;
    animation: chevronScroll 2s infinite;
    margin-left: -0.3em
}

.hero-solutions__scroll-indicator .graphic-cursor-16:first-child {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.hero-solutions__scroll-indicator .graphic-cursor-16:nth-child(2) {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s
}

.hero-solutions__scroll-indicator .graphic-cursor-16:last-child {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

@-webkit-keyframes contentFadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes contentFadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes chevronScroll {
    0%, 80%, 100% {
        opacity: 0
    }

    40% {
        opacity: .5
    }
}

@keyframes chevronScroll {
    0%, 80%, 100% {
        opacity: 0
    }

    40% {
        opacity: .5
    }
}

@-webkit-keyframes fadeInSlideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInSlideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}