.broken-text-hero {
    height: calc(100vh - 12.4rem);
    max-height: 900px;
    max-width: 100vw;
    min-height: 720px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

    .broken-text-hero img,
    .broken-text-hero video {
        filter: blur(12px);
        height: calc(100% + 40px);
        margin-left: -20px;
        margin-top: -20px;
        max-width: initial;
        object-fit: cover;
        width: calc(100% + 40px);
        z-index: 0;
    }

    .broken-text-hero video {
        filter: blur(0);
        z-index: 1;
    }

    .broken-text-hero.broken-text-hero--overlay .broken-text-hero__content {
        z-index: 0;
    }

        .broken-text-hero.broken-text-hero--overlay .broken-text-hero__content:after {
            background-color: rgba(0, 0, 0, 0.3);
            content: "";
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: -1;
        }

.broken-text-hero-content {
    align-content: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

    .broken-text-hero-content .broken-text-hero-content__text {
        align-items: center;
        display: flex;
    }

@supports (display: grid) {
    .broken-text-hero-content {
        display: initial;
    }

        .broken-text-hero-content .broken-text-hero-content__text {
            align-items: initial;
            display: initial;
        }
}

.hero.hero--circadian .hero-content__circadian {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
}

.hero-content-circadian-block {
    color: #fff;
    display: inline;
    font-weight: 200;
    letter-spacing: 2px;
    text-transform: uppercase;
}

    .hero-content-circadian-block .hero-content-circadian-block__title {
        padding-left: 16px;
    }

    .hero-content-circadian-block .hero-content-circadian-block__title {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

        .hero-content-circadian-block .hero-content-circadian-block__title :first-child {
            grid-column: 6 / 13;
            grid-row: 1;
        }

        .hero-content-circadian-block .hero-content-circadian-block__title :last-child {
            grid-column: 1 / 6;
            grid-row: 2;
            text-align: right;
        }

@keyframes animateLogo {
    0% {
        bottom: 50%;
        filter: blur(0);
        opacity: 1;
        width: 220px;
    }

    50% {
        bottom: 50%;
        filter: blur(10px);
        opacity: 0;
        width: 220px;
    }

    51% {
        bottom: 32px;
        filter: blur(10px);
        opacity: 0;
        width: 100px;
    }

    100% {
        bottom: 32px;
        filter: blur(0);
        opacity: 1;
        width: 100px;
    }
}

.broken-text-hero-content-logo {
    bottom: 50%;
    filter: blur(1px);
    left: 50%;
    position: absolute;
    transform: translate3d(-50%, 25%, 0);
    transition: .3s ease-in-out;
    width: 220px;
}

@media all and (min-width: 600px) {
    .broken-text-hero-content-logo {
        transform: translate3d(-50%, 0, 0);
    }
}

.broken-text-hero-content-logo.hero-content-logo--loaded {
    animation: animateLogo 3.5s ease forwards;
    filter: blur(0);
}

.broken-text-hero-content-logo svg {
    fill: #fff;
    max-width: 100%;
    transition: .4s ease;
}

.broken-text-hero h1 {
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    font-weight: 400;
    letter-spacing: 1px;
    max-width: 84rem;
    padding: 32px;
    padding: 0 4rem;
}

@supports (display: grid) {
    .broken-text-hero h1 {
        display: grid;
        grid-row-gap: 8px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(12, 48px);
        height: 100%;
        max-width: initial;
        padding: 4rem;
    }
}

.broken-text-hero h1 .h1-text {
    filter: blur(8px);
    font-size: 1.95rem;
    letter-spacing: .525rem;
    margin-left: 1rem;
    opacity: 0;
    transform: translate3d(0, 10%, 0);
    transition: .8s ease-in;
}

@supports (display: grid) {
    .broken-text-hero h1 .h1-text {
        font-size: 1.65rem;
        margin-left: 0;
    }
}

@media screen and (min-height: 600px) {
    .broken-text-hero h1 .h1-text {
        font-size: 4rem;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .h1-text {
            font-size: 1.9rem;
        }
    }
}

.broken-text-hero h1 .h1-text.h1-text--active {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media screen and (min-height: 600px) {
    .broken-text-hero h1 {
        grid-template-rows: repeat(10, 48px);
    }
}

@media screen and (max-width: 600px) {
    .broken-text-hero h1 {
        padding: 2rem;
    }

        .broken-text-hero h1 .h1-text {
            font-size: 1.8rem;
        }
}

@media screen and (min-width: 600px) {
    .broken-text-hero h1 .col-start-1 {
        grid-column-start: 1;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-1 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-2 {
        grid-column-start: 2;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-2 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-3 {
        grid-column-start: 3;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-3 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-4 {
        grid-column-start: 4;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-4 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-5 {
        grid-column-start: 5;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-5 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-6 {
        grid-column-start: 6;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-6 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-7 {
        grid-column-start: 7;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-7 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-8 {
        grid-column-start: 8;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-8 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-9 {
        grid-column-start: 9;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-9 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-10 {
        grid-column-start: 10;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-10 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-11 {
        grid-column-start: 11;
    }

    @supports (display: grid) {
        .broken-text-hero h1 .col-start-11 {
            width: initial;
        }
    }

    .broken-text-hero h1 .col-start-12 {
        grid-column-start: 12;
    }

    .broken-text-hero h1 .col-end-1 {
        grid-column-end: 1;
    }

    .broken-text-hero h1 .col-end-2 {
        grid-column-end: 2;
    }

    .broken-text-hero h1 .col-end-3 {
        grid-column-end: 3;
    }

    .broken-text-hero h1 .col-end-4 {
        grid-column-end: 4;
    }

    .broken-text-hero h1 .col-end-5 {
        grid-column-end: 5;
    }

    .broken-text-hero h1 .col-end-6 {
        grid-column-end: 6;
    }

    .broken-text-hero h1 .col-end-7 {
        grid-column-end: 7;
    }

    .broken-text-hero h1 .col-end-8 {
        grid-column-end: 8;
    }

    .broken-text-hero h1 .col-end-9 {
        grid-column-end: 9;
    }

    .broken-text-hero h1 .col-end-10 {
        grid-column-end: 10;
    }

    .broken-text-hero h1 .col-end-11 {
        grid-column-end: 11;
    }

    .broken-text-hero h1 .col-end-12 {
        grid-column-end: 12;
    }

    .broken-text-hero h1 .col-end-13 {
        grid-column-end: 13;
    }

    .broken-text-hero h1 .row-start-1 {
        grid-row-start: 1;
    }

    .broken-text-hero h1 .row-start-2 {
        grid-row-start: 2;
    }

    .broken-text-hero h1 .row-start-3 {
        grid-row-start: 3;
    }

    .broken-text-hero h1 .row-start-4 {
        grid-row-start: 4;
    }

    .broken-text-hero h1 .row-start-5 {
        grid-row-start: 5;
    }

    .broken-text-hero h1 .row-start-6 {
        grid-row-start: 6;
    }

    .broken-text-hero h1 .row-start-7 {
        grid-row-start: 7;
    }

    .broken-text-hero h1 .row-start-8 {
        grid-row-start: 8;
    }

    .broken-text-hero h1 .row-start-9 {
        grid-row-start: 9;
    }

    .broken-text-hero h1 .row-start-10 {
        grid-row-start: 10;
    }

    .broken-text-hero h1 .row-start-11 {
        grid-row-start: 11;
    }

    .broken-text-hero h1 .row-start-12 {
        grid-row-start: 12;
    }

    .broken-text-hero h1 .row-end-1 {
        grid-row-end: 1;
    }

    .broken-text-hero h1 .row-end-2 {
        grid-row-end: 2;
    }

    .broken-text-hero h1 .row-end-3 {
        grid-row-end: 3;
    }

    .broken-text-hero h1 .row-end-4 {
        grid-row-end: 4;
    }

    .broken-text-hero h1 .row-end-5 {
        grid-row-end: 5;
    }

    .broken-text-hero h1 .row-end-6 {
        grid-row-end: 6;
    }

    .broken-text-hero h1 .row-end-7 {
        grid-row-end: 7;
    }

    .broken-text-hero h1 .row-end-8 {
        grid-row-end: 8;
    }

    .broken-text-hero h1 .row-end-9 {
        grid-row-end: 9;
    }

    .broken-text-hero h1 .row-end-10 {
        grid-row-end: 10;
    }

    .broken-text-hero h1 .row-end-11 {
        grid-row-end: 11;
    }

    .broken-text-hero h1 .row-end-12 {
        grid-row-end: 12;
    }
}

@media screen and (max-width: 600px) {
    .broken-text-hero h1 .col-start-mob-1 {
        grid-column-start: 1;
    }

    .broken-text-hero h1 .col-start-mob-2 {
        grid-column-start: 2;
    }

    .broken-text-hero h1 .col-start-mob-3 {
        grid-column-start: 3;
    }

    .broken-text-hero h1 .col-start-mob-4 {
        grid-column-start: 4;
    }

    .broken-text-hero h1 .col-start-mob-5 {
        grid-column-start: 5;
    }

    .broken-text-hero h1 .col-start-mob-6 {
        grid-column-start: 6;
    }

    .broken-text-hero h1 .col-start-mob-7 {
        grid-column-start: 7;
    }

    .broken-text-hero h1 .col-start-mob-8 {
        grid-column-start: 8;
    }

    .broken-text-hero h1 .col-start-mob-9 {
        grid-column-start: 9;
    }

    .broken-text-hero h1 .col-start-mob-10 {
        grid-column-start: 10;
    }

    .broken-text-hero h1 .col-start-mob-11 {
        grid-column-start: 11;
    }

    .broken-text-hero h1 .col-start-mob-12 {
        grid-column-start: 12;
    }

    .broken-text-hero h1 .col-end-mob-1 {
        grid-column-end: 1;
    }

    .broken-text-hero h1 .col-end-mob-2 {
        grid-column-end: 2;
    }

    .broken-text-hero h1 .col-end-mob-3 {
        grid-column-end: 3;
    }

    .broken-text-hero h1 .col-end-mob-4 {
        grid-column-end: 4;
    }

    .broken-text-hero h1 .col-end-mob-5 {
        grid-column-end: 5;
    }

    .broken-text-hero h1 .col-end-mob-6 {
        grid-column-end: 6;
    }

    .broken-text-hero h1 .col-end-mob-7 {
        grid-column-end: 7;
    }

    .broken-text-hero h1 .col-end-mob-8 {
        grid-column-end: 8;
    }

    .broken-text-hero h1 .col-end-mob-9 {
        grid-column-end: 9;
    }

    .broken-text-hero h1 .col-end-mob-10 {
        grid-column-end: 10;
    }

    .broken-text-hero h1 .col-end-mob-11 {
        grid-column-end: 11;
    }

    .broken-text-hero h1 .col-end-mob-12 {
        grid-column-end: 12;
    }

    .broken-text-hero h1 .col-end-mob-13 {
        grid-column-end: 13;
    }

    .broken-text-hero h1 .row-start-mob-1 {
        grid-row-start: 1;
    }

    .broken-text-hero h1 .row-start-mob-2 {
        grid-row-start: 2;
    }

    .broken-text-hero h1 .row-start-mob-3 {
        grid-row-start: 3;
    }

    .broken-text-hero h1 .row-start-mob-4 {
        grid-row-start: 4;
    }

    .broken-text-hero h1 .row-start-mob-5 {
        grid-row-start: 5;
    }

    .broken-text-hero h1 .row-start-mob-6 {
        grid-row-start: 6;
    }

    .broken-text-hero h1 .row-start-mob-7 {
        grid-row-start: 7;
    }

    .broken-text-hero h1 .row-start-mob-8 {
        grid-row-start: 8;
    }

    .broken-text-hero h1 .row-start-mob-9 {
        grid-row-start: 9;
    }

    .broken-text-hero h1 .row-start-mob-10 {
        grid-row-start: 10;
    }

    .broken-text-hero h1 .row-start-mob-11 {
        grid-row-start: 11;
    }

    .broken-text-hero h1 .row-start-mob-12 {
        grid-row-start: 12;
    }

    .broken-text-hero h1 .row-end-mob-1 {
        grid-row-end: 1;
    }

    .broken-text-hero h1 .row-end-mob-2 {
        grid-row-end: 2;
    }

    .broken-text-hero h1 .row-end-mob-3 {
        grid-row-end: 3;
    }

    .broken-text-hero h1 .row-end-mob-4 {
        grid-row-end: 4;
    }

    .broken-text-hero h1 .row-end-mob-5 {
        grid-row-end: 5;
    }

    .broken-text-hero h1 .row-end-mob-6 {
        grid-row-end: 6;
    }

    .broken-text-hero h1 .row-end-mob-7 {
        grid-row-end: 7;
    }

    .broken-text-hero h1 .row-end-mob-8 {
        grid-row-end: 8;
    }

    .broken-text-hero h1 .row-end-mob-9 {
        grid-row-end: 9;
    }

    .broken-text-hero h1 .row-end-mob-10 {
        grid-row-end: 10;
    }

    .broken-text-hero h1 .row-end-mob-11 {
        grid-row-end: 11;
    }

    .broken-text-hero h1 .row-end-mob-12 {
        grid-row-end: 12;
    }
}