.page-hero {
    background: linear-gradient(135deg,var(--brand),#6a3fd0);
    color: #fff;
    text-align: center;
    padding: 64px 0
}

    .page-hero h1 {
        color: #fff;
        font-size: clamp(1.8rem,4.5vw,2.8rem);
        margin: 0 0 10px
    }

    .page-hero p {
        max-width: 640px;
        margin: 0 auto;
        opacity: .92
    }

.crumbs {
    font-size: .85rem;
    margin-bottom: 12px;
    opacity: .85
}

    .crumbs a:hover {
        text-decoration: underline
    }

.contact select {
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    color: #d6d0f3;
    padding: 11px 12px;
    font: inherit;
    font-size: .88rem
}

    .contact select option {
        color: #2a1a6e;
        background: #fff
    }

#formNote {
    margin: 0;
    font-size: .85rem;
    color: #fff;
    min-height: 1.2em
}

.info a:hover {
    color: var(--accent)
}

.credit {
    font-size: .75rem;
    opacity: .75;
    margin-top: 6px
}

.page-hero.has-img {
    background-color: #3d1a8c;
    background-image: linear-gradient(rgba(42,26,110,.72),rgba(42,26,110,.72)),url(../images/contact-banner.jpg);
    background-size: cover;
    background-position: center 30%;
    padding: 96px 0
}

.mapsec {
    background: var(--soft)
}

.mapbox {
    margin-top: 28px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--line);
    box-shadow: 0 18px 40px rgba(42,26,110,.15)
}

    .mapbox iframe {
        display: block;
        width: 100%;
        height: 400px;
        border: 0
    }

@media(max-width:760px) {
    .page-hero.has-img {
        padding: 64px 0
    }

    .mapbox iframe {
        height: 300px
    }
}