.list-with-us-hero {
    background: rgba(22, 41, 73, 0.9) url('../../images/nav-bg.png') center/cover no-repeat;
    background-blend-mode: multiply;
    padding-bottom: var(--panel-space);
}

/* Shrink the blue panel on desktop and vertically centre the title/tagline
   inside the *visible* portion of it (i.e. above where the Get Started card
   overlaps via margin-top: -80px). The header reserves the top --header-size
   already, so balancing padding-bottom against the card overlap centres the
   inner content within the visible blue. Mobile keeps the default
   .page-hero min-height of 500px to preserve the original look there. */
@media (min-width: 992px) {
    .list-with-us-hero {
        min-height: 460px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: var(--panel-space);
    }
    /* The inner wrapper's space-p-bottom (80px) would skew flex centring —
       neutralise on desktop so the hero owns vertical layout. */
    .list-with-us-hero > .space-p-bottom {
        padding-bottom: 0 !important;
    }
}

.list-with-us-card {
    position: relative;
    margin-top: calc(var(--panel-space) * -1);
}

.list-with-us-card .form-control,
.list-with-us-card .form-select {
    height: auto;
}

@media (max-width: 991px) {
    /* .page-hero's generic 500px min-height leaves a lot of empty navy above
       the title on phones — let content drive the height instead. */
    .list-with-us-hero {
        min-height: 0;
    }
    .list-with-us-card {
        margin-top: calc(var(--panel-space) * -0.5);
    }
}