/* ==========================================================================
   Pages — home hero, benefits overlap, error page
   ========================================================================== */

/* Home hero --------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(540px, 80vh, 700px);
    padding-block: clamp(64px, 9vw, 96px) clamp(112px, 12vw, 144px);
    background: var(--color-secondary);
    color: var(--color-text-inverse);
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;
}

/* hero-bg-mobile.avif is already cropped around the focal area */
@media (max-width: 767px) {
    .hero__media { object-position: center; }
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(var(--overlay) / 0.55), rgb(var(--overlay) / 0.7));
}

@media (min-width: 768px) {
    .hero::before {
        background: linear-gradient(90deg, rgb(var(--overlay) / 0.82) 0%, rgb(var(--overlay) / 0.5) 55%, rgb(var(--overlay) / 0.15) 100%);
    }
}

.hero__content { max-width: 660px; }

.hero .eyebrow { color: var(--color-accent); }

.hero__title {
    font-size: var(--fs-h1);
    color: var(--color-text-inverse);
}

.hero__lead {
    max-width: 560px;
    margin-top: var(--space-5);
    font-size: var(--fs-lg);
    color: rgb(255 255 255 / 0.88);
}

.hero .btn-row { margin-top: var(--space-6); }

@media (max-width: 479.98px) {
    .hero .btn { flex: 1 1 100%; }
}

/* Benefits panel overlapping the hero */
.benefits-overlap {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(64px, 8vw, 88px));
}

/* Error page -------------------------------------------------------------- */
.error-page {
    display: grid;
    place-items: center;
    min-height: 60vh;
    text-align: center;
}

.error-page__code {
    font-family: var(--font-serif);
    font-size: clamp(4rem, 3rem + 5vw, 7rem);
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
}

.error-page .page-hero__title { margin-top: var(--space-4); }
.error-page .page-hero__lead { margin-inline: auto; }
.error-page .btn-row { justify-content: center; margin-top: var(--space-6); }