/* Shared hero container geometry sourced from the existing ITR-5 hero. */
html body.overview-page main > .overview-hero,
html body.home-page main > .home-hero,
html body.itr2-page.itr2-page:not(.home-page) main > .hero,
html body.itr-page:not(.itr3-page) main > .itr-hero,
html body.itr-page.itr3-page main > .hero,
html body.itr4-page main > .hero,
html body.itr6-page main > .itr6-hero,
html body.itr7-page main > .itr7-hero,
    html body.itru-page main > .itru-hero {
        width: min(1620px, calc(100% - 48px)) !important;
    max-width: none !important;
    min-height: 367px !important;
    height: auto !important;
    margin: 20px auto 0 !important;
    padding: 40px 0 !important;
    border-radius: 36px !important;
    box-sizing: border-box !important;
}

/* Final spacing lock for legacy ITR-1 to ITR-4 overrides. */
html body.itr-page main > .itr-hero,
html body.itr2-page.itr2-page main > .hero,
html body.itr2-page.itr2-page.itr4-page main > .hero {
    margin-top: 20px !important;
    width: min(1620px, calc(100% - 48px)) !important;
    max-width: none !important;
    padding: 40px 0 !important;
    border-radius: 36px !important;
}

/* Remove wrapper padding so the declared header-to-hero gap is exact. */
html body.itr-page main,
html body.itr2-page main {
    padding-top: 0 !important;
}

html body.itr-page main,
html body.itr2-page main {
    row-gap: 0 !important;
    gap: 0 !important;
}

/* Exact spacing between the hero and the first content section. */
html body.itr-page main > .itr-hero + .itr-section,
html body.itr2-page main > .hero + .section {
    margin-top: 28px !important;
    padding-top: 0 !important;
}

html body.itr2-page.itr2-page.itr2-page:not(.home-page) main > .hero + .section {
    margin-top: 28px !important;
    padding-top: 0 !important;
}

html body.itr-page.itr-page main > .itr-hero,
html body.itr2-page.itr2-page.itr2-page main > .hero,
html body.itr-page.itr-page.itr3-page main > .itr-hero,
html body.itr2-page.itr2-page.itr4-page main > .hero {
    margin-top: 32px !important;
}

/* Canonical ITR-5 hero system applied to every ITR hero variant. */
html body.overview-page main > .overview-hero,
html body.home-page main > .home-hero,
html body.itr2-page main > .hero,
html body.itr-page main > .itr-hero,
html body.itr-page.itr3-page main > .hero,
html body.itr4-page main > .hero,
html body.itr5-page main > .hero,
html body.itr6-page main > .itr6-hero,
html body.itr7-page main > .itr7-hero,
html body.itru-page main > .itru-hero {
    width: min(1620px, calc(100% - 48px)) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 367px !important;
    margin: 32px auto 0 !important;
    padding: 40px 0 !important;
    border-radius: 36px !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
    color: #ffffff !important;
    background: linear-gradient(90deg, #123224 0%, #2d8a55 100%) !important;
}

/* ITR-5: keep the hero exactly 28px below the top blue divider line. */
html body.itr5-page main > .hero {
    margin-top: 28px !important;
}

html body.overview-page main > .overview-hero .overview-hero-inner,
html body.home-page main > .home-hero > *,
html body.itr2-page main > .hero .hero-inner,
html body.itr-page main > .itr-hero .itr-hero-inner,
html body.itr4-page main > .hero .hero-inner,
html body.itr5-page main > .hero .hero-inner,
html body.itr6-page main > .itr6-hero .itr6-hero-inner,
html body.itr7-page main > .itr7-hero .itr7-hero-inner,
html body.itru-page main > .itru-hero .itru-hero-inner {
    width: min(980px, calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.overview-page main > .overview-hero h1,
html body.home-page main > .home-hero h1,
html body.itr2-page main > .hero h1,
html body.itr-page main > .itr-hero h1,
html body.itr4-page main > .hero h1,
html body.itr5-page main > .hero h1,
html body.itr6-page main > .itr6-hero h1,
html body.itr7-page main > .itr7-hero h1,
html body.itru-page main > .itru-hero h1 {
    font-size: clamp(3.2rem, 4.7vw, 5.8rem) !important;
    line-height: 0.96 !important;
    margin-top: 24px !important;
}

/* Keep the two-line home hero title clear at desktop widths. */
html body.home-page main > .home-hero h1 {
    font-size: clamp(3rem, 3.8vw, 3.8rem) !important;
    line-height: 1.12 !important;
}

html body.overview-page main > .overview-hero p,
html body.home-page main > .home-hero > p,
html body.itr2-page main > .hero p,
html body.itr-page main > .itr-hero p,
html body.itr4-page main > .hero p,
html body.itr5-page main > .hero p,
html body.itr6-page main > .itr6-hero p,
html body.itr7-page main > .itr7-hero p,
html body.itru-page main > .itru-hero p {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    margin-top: 18px !important;
}

html body.overview-page main > .overview-hero .overview-hero-chip,
html body.home-page main > .home-hero .home-hero-badge,
html body.itr-page main > .itr-hero .itr-hero-chip,
html body.itr6-page main > .itr6-hero .itr6-hero-chip,
html body.itr7-page main > .itr7-hero .itr7-hero-chip {
    padding: 6px 18px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}

html body.overview-page main > .overview-hero .overview-hero-subtitle,
html body.home-page main > .home-hero h2,
html body.itr2-page main > .hero .hero-subtitle,
html body.itr-page main > .itr-hero .itr-hero-subtitle,
html body.itr4-page main > .hero .hero-subtitle,
html body.itr5-page main > .hero .hero-subtitle,
html body.itr6-page main > .itr6-hero .itr6-hero-subtitle,
html body.itr7-page main > .itr7-hero .itr7-hero-subtitle {
    font-size: clamp(1.35rem, 2vw, 2.1rem) !important;
    line-height: 1.15 !important;
    color: #e0b142 !important;
    margin-top: 16px !important;
}

@media (max-width: 720px) {
    html body.overview-page main > .overview-hero,
    html body.home-page main > .home-hero,
    html body.itr2-page.itr2-page:not(.home-page) main > .hero,
    html body.itr-page:not(.itr3-page) main > .itr-hero,
    html body.itr-page.itr3-page main > .hero,
    html body.itr4-page main > .hero,
    html body.itr6-page main > .itr6-hero,
    html body.itr7-page main > .itr7-hero,
    html body.itru-page main > .itru-hero {
        width: calc(100% - 20px) !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 32px auto 0 !important;
        padding: 28px 16px !important;
        border-radius: 24px !important;
    }

    html body.overview-page main > .overview-hero,
    html body.home-page main > .home-hero,
    html body.itr2-page main > .hero,
    html body.itr-page main > .itr-hero,
    html body.itr4-page main > .hero,
    html body.itr5-page main > .hero,
    html body.itr6-page main > .itr6-hero,
    html body.itr7-page main > .itr7-hero,
    html body.itru-page main > .itru-hero {
        width: calc(100% - 20px) !important;
        min-height: 0 !important;
        margin: 20px auto 0 !important;
        padding: 28px 16px !important;
        border-radius: 24px !important;
    }

    html body.overview-page main > .overview-hero h1,
    html body.home-page main > .home-hero h1,
    html body.itr2-page main > .hero h1,
    html body.itr-page main > .itr-hero h1,
    html body.itr4-page main > .hero h1,
    html body.itr5-page main > .hero h1,
    html body.itr6-page main > .itr6-hero h1,
    html body.itr7-page main > .itr7-hero h1,
    html body.itru-page main > .itru-hero h1 { font-size: 2.55rem !important; }

    html body.overview-page main > .overview-hero .overview-hero-subtitle,
    html body.home-page main > .home-hero h2,
    html body.itr2-page main > .hero .hero-subtitle,
    html body.itr-page main > .itr-hero .itr-hero-subtitle,
    html body.itr4-page main > .hero .hero-subtitle,
    html body.itr5-page main > .hero .hero-subtitle,
    html body.itr6-page main > .itr6-hero .itr6-hero-subtitle,
    html body.itr7-page main > .itr7-hero .itr7-hero-subtitle { font-size: 1.35rem !important; }

    html body.overview-page main > .overview-hero p,
    html body.home-page main > .home-hero > p,
    html body.itr2-page main > .hero p,
    html body.itr-page main > .itr-hero p,
    html body.itr4-page main > .hero p,
    html body.itr5-page main > .hero p,
    html body.itr6-page main > .itr6-hero p,
    html body.itr7-page main > .itr7-hero p,
    html body.itru-page main > .itru-hero p { font-size: 14px !important; }

    /* Index already has a mobile page wrapper with the reference side gap. */
    html body.home-page main > .home-hero {
        width: 100% !important;
        margin-left: 10px !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 720px) {
    html body.itr-page.itr-page main > .itr-hero,
    html body.itr2-page.itr2-page.itr2-page main > .hero,
    html body.itr-page.itr-page.itr3-page main > .itr-hero,
    html body.itr2-page.itr2-page.itr4-page main > .hero {
        margin-top: 20px !important;
    }

    html body.itr-page main,
    html body.itr2-page main { padding-top: 0 !important; gap: 0 !important; row-gap: 0 !important; }
}

@media (max-width: 720px) {
    html body.itr-page main > .itr-hero,
    html body.itr2-page.itr2-page main > .hero,
    html body.itr2-page.itr2-page.itr4-page main > .hero {
        width: calc(100% - 20px) !important;
        margin: 20px auto 0 !important;
        padding: 28px 16px !important;
        border-radius: 24px !important;
    }
}