/* Homepage-only full-width Cover hero. */
.home .page-main {
    width: 100%;
    max-width: none
}

.home .site-page>.entry-content>:not(.hero-wide) {
    width: min(var(--width), calc(100% - 40px));
    margin-inline: auto
}

.home .hero-wide.wp-block-cover {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: stretch;
    min-height: 780px;
    padding: 64px 20px 28px;
    overflow: hidden;
    background: #03090f;
    border-bottom: 1px solid var(--border)
}

.home .hero-wide>.wp-block-cover__image-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
    z-index: 0
}

.home .hero-wide>.wp-block-cover__background {
    position: absolute;
    inset: 0;
    opacity: 1;
    background: linear-gradient(90deg, rgba(3, 9, 15, .94) 0%, rgba(3, 9, 15, .8) 32%, rgba(3, 9, 15, .2) 62%, rgba(3, 9, 15, .08) 100%), linear-gradient(0deg, rgba(3, 9, 15, .85), transparent 40%);
    z-index: 1
}

.home .hero-wide>.wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    width: min(var(--width), 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 24px;
    align-items: center;
    color: var(--text)
}

.hero-copy {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 600px
}

.home .hero-copy h1 {
    font-size: clamp(48px, 5.8vw, 80px);
    line-height: 1.08;
    margin: 22px 0 30px
}

.home .hero-copy p {
    color: #e3e8ed;
    max-width: 590px
}

.home .hero-copy .eyebrow {
    color: var(--accent);
    font-size: 13px;
    letter-spacing: .12em
}

.home .hero-copy .wp-block-buttons {
    margin-top: 28px
}

.hero-brands {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: 100%;
    max-width: 460px;
    padding: 16px 20px;
    /*  background: rgba(3, 9, 15, .88);
    border: 1px solid #164561;
    border-top: 2px solid #00a3f5;
    border-radius: 3px */
}

.home .hero-brands .hero-brand-title {
    margin: 0 0 12px;
    color: #f2f4f6;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase
}

.hero-brand-logos {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: center;
    gap: 10px 12px
}

.hero-brand-logos>.wp-block-group__inner-container {
    display: contents
}

.hero-brand-logos .wp-block-image {
    grid-column: span 2;
    margin: 0 !important;
    min-width: 0;
    text-align: center
}

.hero-brand-logos .wp-block-image:nth-child(6) {
    grid-column: 2 / span 2
}

.hero-brand-logos .wp-block-image img {
    display: block;
    width: 100%;
    height: 38px;
    object-fit: contain;
    mix-blend-mode: screen
}

@media(min-width:1800px) {
    .home .hero-wide.wp-block-cover {
        min-height: 860px
    }
}

@media(max-width:1000px) and (min-width:701px) {
    .home .hero-wide.wp-block-cover {
        min-height: 760px
    }

    .home .hero-copy h1 {
        font-size: 52px
    }

    .hero-brands {
        max-width: 420px;
        grid-column: 1 / -1
    }
}

@media(max-width:700px) {
    .home .hero-wide.wp-block-cover {
        min-height: 0;
        padding: 300px 20px 28px
    }

    .home .hero-wide>.wp-block-cover__image-background {
        height: 400px;
        object-position: right top
    }

    .home .hero-wide>.wp-block-cover__background {
        background: linear-gradient(180deg, rgba(3, 9, 15, .05), rgba(3, 9, 15, .12) 180px, #03090f 390px)
    }

    .home .hero-wide>.wp-block-cover__inner-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 28px
    }

    .home .hero-copy h1 {
        font-size: clamp(42px, 10vw, 60px);
        margin-block: 18px 24px
    }

    .hero-brands {
        max-width: none;
        padding: 16px
    }

    .hero-brand-logos {
        gap: 10px 8px
    }

    .hero-brand-logos .wp-block-image img {
        height: 30px
    }

    .home .hero-copy .eyebrow {
        font-size: 11px
    }

    .home .hero-copy p {
        font-size: 15px
    }
}

.home .hero-wide>.wp-block-cover__background.has-background-dim.has-background-dim-0 {
    opacity: 1
}

.home .hero-copy h1 {
    max-width: 520px;
    text-wrap: balance
}

/* A single desktop logo row, inset 80px from the hero's right edge. */
@media(min-width:701px) {
    .home .hero-wide {
        container-type: inline-size
    }

    .home .hero-brands {
        grid-column: 1 / -1;
        width: min(740px, calc(100cqw - 120px));
        max-width: none;
        margin-right: calc(60px - max(0px, (100cqw - var(--width))/2))
    }

    .hero-brand-logos {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 12px
    }

    .hero-brand-logos .wp-block-image,
    .hero-brand-logos .wp-block-image:nth-child(6) {
        grid-column: auto
    }
}