/* Shared responsive tiers:
   XL: >=1440px
   L: 1000–1439.98px
   M: 750–999.98px
   S: <750px
*/

/* Page themes */
.rr-about {
    --rr-hero-bg: #07333d;
}

.rr-people {
    --rr-hero-bg: #07333d;
}

.rr-insights {
    --rr-hero-bg: #e8e8e8;
    --rr-hero-ink: #171245;
}

.rr-contact,
.rr-talk,
.rr-service-individual,
.rr-esg {
    --rr-hero-bg: #f9f9f9;
    --rr-hero-ink: #171245;
}

/* Service detail typography */
@media (min-width: 1440px) {
    .rr-hero--service-individual {
        --rr-hero-title-size: 56px;
    }
}

html.rr-refresh-page .rr-hero.rr-hero--service-individual .rr-hero__text {
    line-height: 1.25;
}

html.rr-refresh-page main.home:has(.rr-hero) {
    padding-top: 0 !important;
}

/* Shared hero */
.rr-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: var(--rr-hero-bg, #f9f9f9);
    color: var(--rr-hero-ink, #f9f9f9);
    --rr-hero-gutter: 72px;
    --rr-hero-min-height: 0px;
    min-height: var(--rr-hero-min-height);
}

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

        .rr-hero .rr-hero__inner {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: center;
            gap: 64px;
            width: 100%;
            max-width: 1440px;
            min-height: var(--rr-hero-min-height);
            margin: 0 auto;
            padding: var(--rr-hero-padding-top, 140px) var(--rr-hero-gutter) var(--rr-hero-padding-bottom, 80px);
        }

.rr-hero--cutout .rr-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 463px);
}

.rr-hero--square .rr-hero__inner,
.rr-hero--square-reference .rr-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 347px);
}

.rr-hero--square {
    --rr-hero-min-height: 608px;
}

.rr-hero .rr-hero__content {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
    max-width: var(--rr-hero-content-width, 650px);
    padding: 0;
}

html.rr-refresh-page .rr-hero .rr-hero__title {
    margin: 0;
    color: inherit;
    font: 600 var(--rr-hero-title-size, 72px)/1.1 var(--uat-heading-font, 'Archivo', Arial, sans-serif);
    letter-spacing: -.02em;
    overflow-wrap: break-word;
    text-transform: none;
}

html.rr-refresh-page .rr-hero .rr-hero__text {
    max-width: 640px;
    margin: 24px 0 0;
    color: inherit;
    font: 400 20px/1.4 var(--uat-body-font, 'Noto Sans', Arial, sans-serif);
    letter-spacing: normal;
    white-space: pre-line;
}

.rr-hero .rr-hero__text > * {
    color: inherit;
    font: inherit;
    margin: 0;
}

    .rr-hero .rr-hero__text > * + * {
        margin-top: 12px;
    }

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

.rr-hero .rr-btn {
    margin-top: 32px;
}

/* Shared background artwork */
.rr-hero__background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    display: block;
    width: min(100%, var(--rr-design-width, 1440px));
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%);
    pointer-events: none;
}

.rr-hero__background--ribbon {
    overflow: visible;
}

/* Fixed ribbon canvas anchored to the centred content frame */
:is(.rr-hero--square-reference, .rr-article__hero--ribbon) {
    --rr-ribbon-frame: 1440px;
    --rr-ribbon-width: 1470px;
    --rr-ribbon-offset: 340px;
}

    :is(.rr-hero--square-reference, .rr-article__hero--ribbon) .rr-hero__background {
        top: 0;
        bottom: auto;
        left: calc( 50% - var(--rr-ribbon-frame) / 2 + var(--rr-ribbon-offset) );
        width: var(--rr-ribbon-width);
        height: auto;
        transform: none;
        object-position: left top;
    }

/* Shared hero media */
.rr-hero__square-image {
    position: relative;
    z-index: 1;
    display: block;
    justify-self: end;
    width: 100%;
    max-width: 347px;
    height: auto;
    aspect-ratio: 347 / 331;
    object-fit: cover;
    border-radius: 20px;
}

.rr-hero--square-reference .rr-hero__square-image {
    max-width: 347px;
}

.rr-hero__image {
    position: absolute;
    right: var(--rr-hero-gutter);
    bottom: 0;
    display: block;
    width: 46%;
    height: 85%;
    max-width: 603px;
    max-height: 734px;
    object-fit: contain;
    object-position: bottom center;
}

/* Page variants */
:is(.rr-hero--news, .rr-hero--webinar, .rr-hero--location) {
    --rr-hero-padding-top: 136px;
    --rr-hero-padding-bottom: 80px;
    --rr-hero-content-width: 685px;
}

.rr-hero.rr-hero--news {
    --rr-hero-bg: #f9f9f9;
    --rr-hero-ink: #171245;
    --rr-hero-min-height: 722px;
    --rr-hero-title-size: 56px;
}

.rr-hero.rr-hero--webinar {
    --rr-hero-bg: #171245;
    --rr-hero-ink: #f9f9f9;
    --rr-hero-min-height: 722px;
    --rr-hero-title-size: 56px;
}

.rr-hero.rr-hero--location {
    --rr-hero-bg: #07333d;
    --rr-hero-ink: #f9f9f9;
    --rr-hero-min-height: 608px;
    --rr-hero-title-size: 80px;
}

.rr-hero--news .rr-hero__inner {
    z-index: 1;
}

.rr-hero--news .rr-hero__background {
    z-index: 0;
}

.rr-hero .rr-hero__content .rr-article__tag {
    margin-top: 24px;
}

@media (max-width: 1439.98px) {
    .rr-hero.rr-hero--news {
        --rr-hero-min-height: 480px;
    }

    .rr-hero.rr-hero--webinar {
        --rr-hero-min-height: 590px;
    }

    .rr-hero.rr-hero--location {
        --rr-hero-min-height: 480px;
        --rr-hero-title-size: 56px;
    }
}

@media (max-width: 999.98px) {
    .rr-hero.rr-hero--news {
        --rr-hero-min-height: 506px;
        --rr-hero-title-size: 40px;
    }

    .rr-hero.rr-hero--webinar {
        --rr-hero-min-height: 568px;
        --rr-hero-title-size: 40px;
    }

    .rr-hero.rr-hero--location {
        --rr-hero-min-height: 544px;
        --rr-hero-title-size: 40px;
    }

    :is(.rr-hero--news, .rr-hero--webinar, .rr-hero--location) {
        --rr-hero-padding-top: 120px;
        --rr-hero-padding-bottom: 64px;
    }
}

@media (max-width: 749.98px) {
    .rr-hero.rr-hero--news {
        --rr-hero-min-height: 899px;
        --rr-hero-title-size: 48px;
    }

    .rr-hero.rr-hero--webinar {
        --rr-hero-min-height: 908px;
        --rr-hero-title-size: 32px;
    }

    .rr-hero.rr-hero--location {
        --rr-hero-min-height: 791px;
        --rr-hero-title-size: 32px;
    }

    :is(.rr-hero--news, .rr-hero--webinar, .rr-hero--location) {
        --rr-hero-padding-top: 80px;
        --rr-hero-padding-bottom: 64px;
    }
}

/* Large shared layout */
@media (max-width: 1439.98px) {
    :is(.rr-hero--square-reference, .rr-article__hero--ribbon) {
        --rr-ribbon-frame: min(100%, 1025px);
        --rr-ribbon-width: 1170px;
        --rr-ribbon-offset: 202px;
    }

    .rr-hero {
        --rr-hero-gutter: 40px;
    }

        .rr-hero .rr-hero__inner {
            gap: 40px;
        }

    .rr-hero--cutout .rr-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    }

    .rr-hero--square .rr-hero__inner,
    .rr-hero--square-reference .rr-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
    }

    .rr-hero__square-image,
    .rr-hero--square-reference .rr-hero__square-image {
        max-width: 270px;
        aspect-ratio: 270 / 258;
    }

    html.rr-refresh-page .rr-hero .rr-hero__title {
        font-size: var(--rr-hero-title-size, 56px);
    }
}

/* Medium shared layout */
@media (max-width: 999.98px) {
    .rr-hero {
        --rr-hero-gutter: 24px;
    }

    .rr-hero--square {
        --rr-hero-min-height: 560px;
    }

    .rr-hero .rr-hero__inner {
        padding-top: var(--rr-hero-padding-top, 120px);
        gap: 24px;
    }

    html.rr-refresh-page .rr-hero .rr-hero__title {
        font-size: var(--rr-hero-title-size, 44px);
    }

    .rr-hero--square .rr-hero__inner,
    .rr-hero--square-reference .rr-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    }

    .rr-hero__square-image,
    .rr-hero--square-reference .rr-hero__square-image {
        max-width: 260px;
        aspect-ratio: 260 / 248;
    }
}

@media (min-width: 750px) and (max-width: 999.98px) {
    :is(.rr-hero--square-reference, .rr-article__hero--ribbon) {
        --rr-ribbon-frame: min(100%, 768px);
        --rr-ribbon-width: 1055px;
        --rr-ribbon-offset: 28px;
        --rr-hero-gutter: 40px;
    }

    html.rr-refresh-page .rr-hero.rr-hero--square-reference:not(.rr-hero--has-refresh-image) .rr-hero__inner {
        gap: 32px;
        padding-top: 120px;
        padding-bottom: 64px;
    }

    html.rr-refresh-page .rr-hero--square-reference .rr-hero__title {
        font-size: var(--rr-hero-title-size, 56px);
    }
}

/* Small shared layout */
@media (max-width: 749.98px) {
    :is(.rr-hero--square-reference, .rr-article__hero--ribbon) {
        --rr-ribbon-frame: min(100%, 374px);
        --rr-ribbon-width: 513.763021px;
        --rr-ribbon-offset: 13.635417px;
    }

    .rr-hero {
        --rr-hero-gutter: 16px;
    }

    .rr-hero--square {
        --rr-hero-min-height: 0px;
    }

    .rr-hero .rr-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding-top: var(--rr-hero-padding-top, 80px);
        padding-bottom: var(--rr-hero-padding-bottom, 48px);
    }

    .rr-hero--square-reference .rr-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .rr-hero--square-reference .rr-hero__square-image {
        max-width: 315px;
        aspect-ratio: 1;
    }

    html.rr-refresh-page .rr-hero .rr-hero__title {
        font-size: var(--rr-hero-title-size, 42px);
    }

    html.rr-refresh-page .rr-hero .rr-hero__text {
        font-size: 18px;
    }

    .rr-hero__square-image {
        order: -1;
        justify-self: center;
        width: 75%;
        max-width: 315px;
        aspect-ratio: 1;
        border-radius: 16px;
    }

    .rr-hero__image {
        position: relative;
        right: auto;
        justify-self: center;
        width: 100%;
        height: 360px;
        max-width: 420px;
        margin-bottom: -48px;
    }
}

/* Cutout height schedule.
   Universal square-image rules below take priority when a square is displayed. */
.rr-hero--has-refresh-image {
    --rr-hero-min-height: 862px;
}

@media (max-width: 1439.98px) {
    .rr-hero--has-refresh-image {
        --rr-hero-min-height: 614px;
    }
}

@media (max-width: 999.98px) {
    .rr-hero--has-refresh-image {
        --rr-hero-min-height: 591px;
    }
}

@media (max-width: 749.98px) {
    .rr-hero--has-refresh-image {
        --rr-hero-min-height: 734px;
    }
}

/* Page reference heights */
.rr-hero--services:not(.rr-hero--has-refresh-image),
.rr-hero--service-individual:not(.rr-hero--has-refresh-image) {
    --rr-hero-min-height: 722px;
}

.rr-people .rr-hero:not(.rr-hero--has-refresh-image) {
    --rr-hero-min-height: 642px;
}

.rr-contact .rr-hero:not(.rr-hero--has-refresh-image) {
    --rr-hero-min-height: 608px;
}

:is(.rr-hero--services, .rr-hero--service-individual, .rr-people .rr-hero, .rr-contact .rr-hero, .rr-esg .rr-hero):not(.rr-hero--has-refresh-image) .rr-hero__inner {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 1439.98px) {
    .rr-hero--services:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 608px;
    }

    .rr-hero--service-individual:not(.rr-hero--has-refresh-image),
    .rr-people .rr-hero:not(.rr-hero--has-refresh-image),
    .rr-contact .rr-hero:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 480px;
    }
}

@media (max-width: 999.98px) {
    .rr-hero--services:not(.rr-hero--has-refresh-image),
    .rr-hero--service-individual:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 528px;
    }

    .rr-people .rr-hero:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 506px;
    }

    .rr-contact .rr-hero:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 541px;
    }
}

@media (max-width: 749.98px) {
    .rr-hero--services:not(.rr-hero--has-refresh-image),
    .rr-hero--service-individual:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 683px;
    }

    .rr-people .rr-hero:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 867px;
    }

    .rr-contact .rr-hero:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 807px;
    }

    :is(.rr-hero--services, .rr-hero--service-individual, .rr-people .rr-hero, .rr-contact .rr-hero, .rr-esg .rr-hero):not(.rr-hero--has-refresh-image) .rr-hero__inner {
        padding-bottom: 48px;
    }
}

/* Large non-square heroes */
@media (min-width: 1000px) and (max-width: 1439.98px) {
    html.rr-refresh-page :is(.rr-hero--news, .rr-hero--location, .rr-hero--service-individual, .rr-people .rr-hero, .rr-contact .rr-hero, .rr-esg .rr-hero):not(.rr-hero--has-refresh-image):not(.rr-hero--square) {
        --rr-hero-min-height: 480px;
    }

        html.rr-refresh-page :is(.rr-hero--news, .rr-hero--location, .rr-hero--service-individual, .rr-people .rr-hero, .rr-contact .rr-hero, .rr-esg .rr-hero):not(.rr-hero--has-refresh-image):not(.rr-hero--square) .rr-hero__inner {
            padding-top: 80px;
            padding-bottom: 24px;
        }

    html.rr-refresh-page .rr-hero--service-individual:has(.rr-service-tabs):not(.rr-hero--has-refresh-image):not(.rr-hero--square) .rr-hero__inner {
        min-height: 0;
        padding-bottom: 10px;
    }
}

/* ESG: preserve page-specific typography and non-square height schedule */
.rr-esg .rr-hero:not(.rr-hero--has-refresh-image) {
    --rr-hero-min-height: 608px;
    --rr-hero-title-size: 80px;
    --rr-hero-content-width: 685px;
}

@media (max-width: 1439.98px) {
    .rr-esg .rr-hero:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 480px;
        --rr-hero-title-size: 56px;
    }
}

@media (max-width: 999.98px) {
    .rr-esg .rr-hero:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 541px;
        --rr-hero-title-size: 40px;
    }
}

@media (max-width: 749.98px) {
    .rr-esg .rr-hero:not(.rr-hero--has-refresh-image) {
        --rr-hero-min-height: 0px;
        --rr-hero-title-size: 32px;
    }
}

/* Universal square-image design.
   Keep after page variants so square photos use the same frame everywhere. */
html.rr-refresh-page .rr-hero.rr-hero--square {
    --rr-hero-min-height: 608px;
    --rr-hero-padding-top: 136px;
    --rr-hero-padding-bottom: 80px;
    --rr-hero-content-width: 685px;
    --rr-ribbon-frame: 1440px;
    --rr-ribbon-width: 1470px;
    --rr-ribbon-offset: 440px;
}

    html.rr-refresh-page .rr-hero.rr-hero--square .rr-hero__inner {
        padding-top: var(--rr-hero-padding-top);
        padding-bottom: var(--rr-hero-padding-bottom);
    }

/* Desktop square-image ribbons fit the complete banner height. Their natural aspect
   ratio determines the width, so artwork is not cropped vertically or stretched
   to fill wider viewports. The centred design frame still owns placement. */
html.rr-refresh-page .rr-hero--square .rr-hero__background {
    top: 0;
    bottom: auto;
    right: auto;
    left: calc( 50% - var(--rr-ribbon-frame) / 2 + var(--rr-ribbon-offset) );
    width: auto;
    height: 100%;
    display: block;
    transform: none;
    clip-path: none;
    object-fit: contain;
    object-position: left top;
}

@media (max-width: 1439.98px) {
    html.rr-refresh-page .rr-hero.rr-hero--square {
        --rr-hero-min-height: 480px;
        --rr-hero-padding-top: 80px;
        --rr-hero-padding-bottom: 24px;
        --rr-ribbon-frame: min(100%, 1025px);
        --rr-ribbon-width: 1170px;
        --rr-ribbon-offset: 282px;
    }
}

@media (max-width: 999.98px) {
    html.rr-refresh-page .rr-hero.rr-hero--square {
        --rr-hero-min-height: 544px;
        --rr-hero-padding-top: 120px;
        --rr-hero-padding-bottom: 64px;
        --rr-ribbon-frame: min(100%, 768px);
        --rr-ribbon-width: 1055px;
        --rr-ribbon-offset: 28px;
    }
}

@media (max-width: 749.98px) {
    html.rr-refresh-page .rr-hero.rr-hero--square {
        --rr-hero-min-height: 791px;
        --rr-hero-padding-top: 80px;
        --rr-hero-padding-bottom: 64px;
        --rr-ribbon-frame: min(100%, 374px);
        --rr-ribbon-width: 513.763021px;
        --rr-ribbon-offset: -100px;
    }

    /* Follow the existing 75%-wide, max-315px photo instead of the text-driven
       banner height. Keep the artwork's natural ratio and top edge at y=0. */
    html.rr-refresh-page .rr-hero--square .rr-hero__background {
        height: calc(var(--rr-hero-padding-top) + min(75vw - 24px, 315px) + 24px);
    }
}