:root {
    --site-hero-height: clamp(33rem, 59vh, 36rem);
    --site-hero-padding-block: clamp(3rem, 5vw, 4.5rem);
    --site-hero-padding-inline: 1.5rem;
}

/*
 * Authoritative geometry for every public landing-page hero.
 * Page styles may control their internal layout, but not the hero height,
 * outer spacing or vertical content origin.
 */
.home-hero,
.site-hero {
    box-sizing: border-box;
    width: 100%;
    height: var(--site-hero-height);
    min-height: var(--site-hero-height);
    max-height: var(--site-hero-height);
    padding: var(--site-hero-padding-block) var(--site-hero-padding-inline);
    align-items: start;
    justify-items: center;
}

.home-hero__content,
.site-hero__inner {
    width: min(82rem, 100%);
    margin-inline: auto;
    padding-block: 0;
    align-self: start;
    align-content: start;
}

@media (max-width: 760px) {
    :root {
        --site-hero-height: 36rem;
        --site-hero-padding-block: 3rem;
        --site-hero-padding-inline: 1rem;
    }
}