.hero {
    background: var(--color-navy);
    background-size: cover;
    background-position: center;
    color: var(--color-off-white);
    position: relative;
    min-height: var(--hero-height-without-cta);
}

.hero .wrap {
    position: relative;
    z-index: 1;
    min-height: inherit;
    display: flex;
    align-items: center;
}

.hero h1 {
    color: var(--color-off-white);
    margin: 0;
}

.hero-center {
    align-self: center;
}

.legal p + h4,
.legal ul + h4,
.legal ul + h4 {
  margin-top: var(--space-5);
}

@media (max-width: 980px) {
    .hero {
        padding: 36px 0;
        min-height: var(--hero-height-without-cta-mobile);
    }
}