/* Shared responsive tiers: desktop >=1440px; 1025 design 1000–<1440px;
   768 design 750–<1000px; 374 design <750px. */
/* Shared by every home-hero-new caller. Page themes set variables only;
   layout, typography and breakpoints belong here. CMS colours remain inline. */
.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-hero-bg: #f9f9f9;
    --rr-hero-ink: #171245;
}
/* Service detail banners use smooth white unless related-service tabs are rendered. */
.rr-hero--service-individual {
    --rr-hero-bg: #f9f9f9;
    background-color: var(--rr-hero-bg) !important;
}
.rr-hero--service-individual:has(.rr-service-tabs) {
    --rr-hero-bg: #e8e8e8;
}
/* Service detail keeps its original type: 56px title on XLarge, 1.25 subtitle leading. */
@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; }
.rr-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    background-color: var(--rr-hero-bg, #6a59fd);
    color: var(--rr-hero-ink, #fff);
    --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);
}
/* Square photos are 25% smaller than the 463px design (client feedback). */
.rr-hero--square .rr-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 347px);
}
/* Text-only banners follow their content; photos and videos have their own floor. */
.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; }
.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;
    /* Show the whole artwork inside its design frame without stretching or
       cropping it when the hero and image have different aspect ratios. */
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%);
    pointer-events: none;
}
.rr-hero__background--ribbon {
    /* Keep the export's coordinate system for placement, but allow its path
       to continue into the side gutters. The hero clips only at its edges. */
    overflow: visible;
}

/* The ribbon has its own canvas, anchored to the centered content frame.
   Wider viewports reveal more of that canvas without resizing the artwork. */
: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;
}

/* Square-only banners use the same photo frame as the news hero reference. */
.rr-hero--square-reference .rr-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 347px);
}
.rr-hero--square-reference .rr-hero__square-image { max-width: 347px; }
.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__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 configure the shared component rather than redefining it. */
: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; }
.rr-country-hero__swoosh {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 1026 / 608;
    pointer-events: none;
}
@media (max-width: 1439.98px) {
    /* Large tier (1000–1439.98px) is 480px for News, Location, Service detail,
       People, Contact and ESG; Medium and Small rules below override it. */
    .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;
    }
    .rr-country-hero__swoosh {
        top: -98px;
        left: -151px;
        right: auto;
        width: 810px;
        height: auto;
    }
}
@media (max-width: 1439.98px) {
    :is(.rr-hero--square-reference, .rr-article__hero--ribbon) {
        --rr-ribbon-frame: min(100%, 1025px);
        /* Fill the 608px hero vertically at this tier. A proportional desktop
           downscale leaves a visible strip below the complete SVG canvas. */
        --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 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
    }
    .rr-hero__square-image { max-width: 270px; aspect-ratio: 270 / 258; }
    .rr-hero--square-reference .rr-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
    }
    .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); }
}
@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 { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
    .rr-hero__square-image { max-width: 260px; aspect-ratio: 260 / 248; }
    .rr-hero--square-reference .rr-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
    .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;
    }
    :is(.rr-hero--square-reference, .rr-article__hero--ribbon) { --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); }
}
@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;
    }
}
/* A populated refreshHeroImage controls the height even when a square image
   takes display priority. Minimums allow longer content to grow naturally. */
.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 for heroes without refreshHeroImage.
   XLarge >=1440, Large 1000–<1440, Medium 750–<1000, Small <750. */
.rr-hero--services:not(.rr-hero--has-refresh-image) { --rr-hero-min-height: 722px; }
.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):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-hero-min-height: 480px; }
    .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-min-height: 528px; }
    .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-min-height: 683px; }
    .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):not(.rr-hero--has-refresh-image) .rr-hero__inner {
        padding-bottom: 48px;
    }
}

/* Large tier: News, Location, Service detail, People and Contact heroes are
   480px. Padding clears the 56px header and keeps 24px below so the copy fits;
   copy that still cannot fit grows the hero rather than being clipped. */
@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):not(.rr-hero--has-refresh-image) {
        --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):not(.rr-hero--has-refresh-image) .rr-hero__inner {
        padding-top: 80px;
        padding-bottom: 24px;
    }
    /* With related-service tabs, the copy and tabs share the 480px. */
    html.rr-refresh-page .rr-hero--service-individual:has(.rr-service-tabs):not(.rr-hero--has-refresh-image) .rr-hero__inner {
        min-height: 0;
        padding-bottom: 10px;
    }
}