/* Rouse Refresh ESG page (Views/GrassRootNew.cshtml).
   Figma: "Environment, Social & Governance". Hero layout lives in hero.css;
   this file only owns the text sections below it.
   Tiers: XLarge >=1440, Large 1000–<1440, Medium 750–<1000, Small <750. */
.rr-esg {
    --esg-navy: #171245;
    --esg-purple: #6a59fd;
    --esg-white: #f9f9f9;
    --esg-gutter: 72px;
    --esg-heading-font: 'Archivo', sans-serif;
    --esg-body-font: 'Noto Sans', sans-serif;
    color: var(--esg-navy);
    background: var(--esg-white);
    font: 400 16px/1.15 var(--esg-body-font);
    letter-spacing: 0;
}

.rr-esg *,
.rr-esg *::before,
.rr-esg *::after {
    box-sizing: border-box;
}

.rr-esg__body {
    padding: 80px var(--esg-gutter);
}

.rr-esg__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 80px 24px;
    max-width: 1296px;
    margin: 0 auto;
}

.rr-esg__block {
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-width: 0;
    /* Keep anchored sections clear of the fixed header. */
    scroll-margin-top: 96px;
}

html.rr-refresh-page .rr-esg .rr-esg__title {
    margin: 0;
    color: inherit;
    font: 600 40px/1.05 var(--esg-heading-font) !important;
    letter-spacing: 0;
    text-transform: none;
}

.rr-esg__rte {
    color: inherit;
    font: 400 16px/1.15 var(--esg-body-font);
    overflow-wrap: break-word;
}

    .rr-esg__rte > * {
        margin: 0;
    }

    .rr-esg__rte > * + * {
        margin-top: 24px;
    }

    .rr-esg__rte :is(p, li, span, strong) {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    /* The design sets these paragraphs in regular weight; legacy content wraps some in <strong>. */
    .rr-esg__rte p > strong:only-child {
        font-weight: 400;
    }

    .rr-esg__rte :is(ul, ol) {
        padding-left: 24px;
    }

    .rr-esg__rte ul {
        list-style: disc;
    }

    .rr-esg__rte li + li {
        margin-top: 12px;
    }

    /* Headings inside the body content use Noto Sans. */
    .rr-esg__rte :is(h3, h4, h5, h6) {
        color: inherit;
        font: 500 20px/1.05 var(--esg-body-font) !important;
    }

    .rr-esg__rte a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color .2s ease;
    }

        .rr-esg__rte a:hover,
        .rr-esg__rte a:focus-visible {
            color: var(--esg-purple) !important;
        }

        .rr-esg__rte a:focus-visible {
            outline: 2px solid var(--esg-purple);
            outline-offset: 2px;
        }

    .rr-esg__rte img {
        max-width: 100%;
        height: auto;
    }

@media (prefers-reduced-motion: reduce) {
    .rr-esg__rte a {
        transition: none;
    }
}

@media (max-width: 1439.98px) {
    .rr-esg {
        --esg-gutter: 40px;
    }

    .rr-esg__body {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .rr-esg__grid {
        row-gap: 64px;
    }

    .rr-esg__block {
        gap: 40px;
    }

    html.rr-refresh-page .rr-esg .rr-esg__title {
        font-size: 32px !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 999.98px) {
    .rr-esg {
        --esg-gutter: 20px;
    }

    .rr-esg__body {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .rr-esg__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }

    .rr-esg__block {
        gap: 24px;
    }

    html.rr-refresh-page .rr-esg .rr-esg__title {
        font-size: 24px !important;
    }
}

@media (max-width: 749.98px) {
    .rr-esg {
        --esg-gutter: 16px;
    }

    .rr-esg__body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    html.rr-refresh-page .rr-esg .rr-esg__title {
        font-weight: 600 !important;
    }
}