/**
 * Shared page hero — same treatment as Courses (cover image + dark overlay + white title).
 * Any --page-hero-image url() must be relative to this file: background-image uses var() here,
 * so browser resolves those URLs against this stylesheet, not the HTML page.
 */
.page-hero {
    --page-hero-image: url("../../photos/contactus/website.s_parallax_default_image");
    position: relative;
    overflow: hidden;
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--page-hero-image);
    background-position: 50% 0;
    background-size: cover;
    background-repeat: no-repeat;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.page-hero > .container {
    position: relative;
    z-index: 2;
}

/* Icon + title centered like Staff homework / Payments */
.page-hero.text-center > .container > h1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
}