/*
    ActOne Group Sustainability
    Modern page-level design tokens + CSS Grid layout
    Intended to be loaded AFTER the legacy global app.css.

    Recommended page wrapper:
    <main id="maincontent" class="pg-sustainability">
*/

:root {
    /* =========================================================
       TYPOGRAPHY
       ========================================================= */

    --sust-font-family: "Outfit", Arial, Helvetica, sans-serif;
    --sust-font-weight-light: 300;
    --sust-font-weight-regular: 400;
    --sust-font-weight-medium: 500;
    --sust-font-weight-semibold: 600;
    --sust-font-weight-bold: 700;
    --sust-font-size-xs: 0.75rem;
    --sust-font-size-sm: 0.875rem;
    --sust-font-size-base: 1rem;
    --sust-font-size-md: 1.125rem;
    --sust-font-size-lg: 1.25rem;
    --sust-font-size-xl: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
    --sust-font-size-2xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
    --sust-font-size-3xl: clamp(2.25rem, 1.65rem + 2.4vw, 3.75rem);
    --sust-font-size-hero: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);
    --sust-line-height-tight: 1.1;
    --sust-line-height-heading: 1.2;
    --sust-line-height-body: 1.65;
    --sust-letter-spacing-tight: -0.02em;
    --sust-letter-spacing-normal: 0;
    --sust-letter-spacing-wide: 0.08em;
    --sust-measure-body: 68ch;
    --sust-measure-wide: 82ch;
    /* =========================================================
       PRIMARY
       Base: RGB(127, 169, 174) / #7FA9AE
       ========================================================= */

    --sust-primary-50: #F5F8F9;
    --sust-primary-100: #EBF1F2;
    --sust-primary-200: #D6E3E5;
    --sust-primary-300: #BFD4D6;
    --sust-primary-400: #A3C1C5;
    --sust-primary-500: #7FA9AE;
    --sust-primary-600: #709599;
    --sust-primary-700: #5F7F82;
    --sust-primary-800: #4C6568;
    --sust-primary-900: #394C4E;
    --sust-primary-rgb: 127, 169, 174;
    /* =========================================================
       SECONDARY
       Base: RGB(62, 79, 88) / #3E4F58
       ========================================================= */

    --sust-secondary-50: #F0F1F2;
    --sust-secondary-100: #E0E3E4;
    --sust-secondary-200: #C1C7CA;
    --sust-secondary-300: #9EA7AC;
    --sust-secondary-400: #748087;
    --sust-secondary-500: #3E4F58;
    --sust-secondary-600: #37464D;
    --sust-secondary-700: #2E3B42;
    --sust-secondary-800: #252F35;
    --sust-secondary-900: #1C2428;
    --sust-secondary-rgb: 62, 79, 88;
    /* =========================================================
       ACCENTS / ESG THEMES
       ========================================================= */

    --sust-accent-orange: #D55D21;
    --sust-accent-orange-rgb: 213, 93, 33;
    --sust-accent-plum: #772758;
    --sust-accent-plum-rgb: 119, 39, 88;
    --sust-accent-green: #005C3D;
    --sust-accent-green-rgb: 0, 92, 61;
    /*
       Darker orange for normal-size text/actions on white.
       The brand orange itself remains available for large text,
       icons, borders, decorative elements and focus indicators.
    */
    --sust-accent-orange-strong: #A94713;
    /* ESG semantic aliases */
    --sust-theme-planet: var(--sust-accent-green);
    --sust-theme-people: var(--sust-accent-plum);
    --sust-theme-principles: var(--sust-accent-orange);
    /* =========================================================
       SEMANTIC COLORS
       ========================================================= */

    --sust-color-white: #FFFFFF;
    --sust-color-black: #000000;
    --sust-color-bg: var(--sust-color-white);
    --sust-color-surface: var(--sust-color-white);
    --sust-color-surface-soft: var(--sust-primary-50);
    --sust-color-surface-muted: var(--sust-secondary-50);
    --sust-color-surface-dark: var(--sust-secondary-500);
    --sust-color-heading: var(--sust-secondary-500);
    --sust-color-text: var(--sust-secondary-800);
    --sust-color-text-muted: var(--sust-primary-800);
    --sust-color-text-on-dark: var(--sust-color-white);
    --sust-color-link: var(--sust-secondary-600);
    --sust-color-link-hover: var(--sust-secondary-900);
    --sust-color-border: var(--sust-primary-200);
    --sust-color-border-strong: var(--sust-primary-400);
    --sust-color-focus: var(--sust-accent-orange);
    --sust-color-action: var(--sust-secondary-500);
    --sust-color-action-hover: var(--sust-secondary-700);
    --sust-color-action-active: var(--sust-secondary-900);
    /* =========================================================
       SPACING
       4px-based scale
       ========================================================= */

    --sust-space-0: 0;
    --sust-space-1: 0.25rem;
    --sust-space-2: 0.5rem;
    --sust-space-3: 0.75rem;
    --sust-space-4: 1rem;
    --sust-space-5: 1.25rem;
    --sust-space-6: 1.5rem;
    --sust-space-8: 2rem;
    --sust-space-10: 2.5rem;
    --sust-space-12: 3rem;
    --sust-space-16: 4rem;
    --sust-space-20: 5rem;
    --sust-space-24: 6rem;
    --sust-section-space-sm: clamp(2.5rem, 5vw, 4rem);
    --sust-section-space: clamp(4rem, 7vw, 6.5rem);
    --sust-section-space-lg: clamp(5rem, 9vw, 8rem);
    /* =========================================================
       LAYOUT / CONTAINERS / GRID
       ========================================================= */

    --sust-grid-columns: 12;
    --sust-grid-gap: clamp(1rem, 2vw, 2rem);
    --sust-grid-gap-sm: clamp(0.75rem, 1.5vw, 1.25rem);
    --sust-grid-gap-lg: clamp(1.5rem, 3vw, 3rem);
    --sust-container-max: 76.25rem; /* 1220px */
    --sust-container-narrow: 52rem;
    --sust-container-wide: 90rem;
    --sust-container-padding: clamp(1rem, 3vw, 1.5rem);
    --sust-header-offset: 45px;
    /* =========================================================
       BORDERS / RADII / SHADOWS
       ========================================================= */

    --sust-border-width: 1px;
    --sust-border-width-accent: 4px;
    --sust-radius-sm: 0.25rem;
    --sust-radius-md: 0.5rem;
    --sust-radius-lg: 1rem;
    --sust-radius-xl: 1.5rem;
    --sust-radius-pill: 999rem;
    --sust-shadow-sm: 0 1px 3px rgba(28, 36, 40, 0.08);
    --sust-shadow-md: 0 8px 24px rgba(28, 36, 40, 0.10);
    --sust-shadow-lg: 0 18px 48px rgba(28, 36, 40, 0.14);
    /* =========================================================
       MOTION
       ========================================================= */

    --sust-duration-fast: 150ms;
    --sust-duration-base: 250ms;
    --sust-duration-slow: 400ms;
    --sust-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --sust-motion-distance: 1.5rem;
    --sust-duration-reveal: 650ms;
    --sust-duration-reveal-slow: 850ms;
    --sust-ease-reveal: cubic-bezier(.22, 1, .36, 1);
    --sust-ease-interaction: cubic-bezier(.2, 0, 0, 1);
}

html {
    scroll-behavior: smooth;
}

/* =============================================================
   PAGE SCOPE
   Explicitly overrides legacy Montserrat/Bentham page typography
   without changing the rest of the ActOne site.
   ============================================================= */

.pg-sustainability {
    font-family: var(--sust-font-family);
    font-size: var(--sust-font-size-base);
    line-height: var(--sust-line-height-body);
    color: var(--sust-color-text);
    background: var(--sust-color-bg);
}

    .pg-sustainability :where(h1, h2, h3, h4, h5, h6) {
        font-family: var(--sust-font-family);
        font-style: normal;
        color: var(--sust-color-heading);
        line-height: var(--sust-line-height-heading);
        letter-spacing: var(--sust-letter-spacing-tight);
        text-rendering: optimizeLegibility;
    }

    .pg-sustainability h1,
    .pg-sustainability h2 {
        text-wrap: balance;
    }

    .pg-sustainability h3,
    .pg-sustainability h4,
    .pg-sustainability h5,
    .pg-sustainability h6 {
        text-wrap: pretty;
    }

    .pg-sustainability h1 {
        font-size: var(--sust-font-size-hero);
        font-weight: var(--sust-font-weight-semibold);
    }

    .pg-sustainability h2 {
        font-size: var(--sust-font-size-3xl);
        font-weight: var(--sust-font-weight-semibold);
    }

    .pg-sustainability h3 {
        font-size: var(--sust-font-size-2xl);
        font-weight: var(--sust-font-weight-semibold);
    }

    .pg-sustainability h4 {
        font-size: var(--sust-font-size-xl);
        font-weight: var(--sust-font-weight-semibold);
    }



    .pg-sustainability p,
    .pg-sustainability li {
        font-family: var(--sust-font-family);
    }

    .pg-sustainability p {
        line-height: var(--sust-line-height-body);
    }

    .pg-sustainability a:not(.sust-button) {
        color: var(--sust-color-link);
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.18em;
    }

        .pg-sustainability a:not(.sust-button):hover {
            color: var(--sust-color-link-hover);
        }

    .pg-sustainability :where(a, button, input, select, textarea):focus-visible {
        outline: 3px solid var(--sust-color-focus);
        outline-offset: 3px;
    }


/* =============================================================
   CONTAINERS
   ============================================================= */

.sust-container {
    width: min( calc(100% - (var(--sust-container-padding) * 2)), var(--sust-container-max) );
    margin-inline: auto;
}

.sust-container--narrow {
    max-width: var(--sust-container-narrow);
}

.sust-container--wide {
    max-width: var(--sust-container-wide);
}

.sust-container--fluid {
    width: 100%;
    max-width: none;
    padding-inline: var(--sust-container-padding);
}


/* =============================================================
   CSS GRID
   Namespaced intentionally so the legacy Foundation .row/.columns
   classes can continue to operate elsewhere on the site.
   Mobile-first: columns are full-width unless a breakpoint span
   is explicitly applied.
   ============================================================= */

.sust-row {
    display: grid;
    grid-template-columns: repeat(var(--sust-grid-columns), minmax(0, 1fr));
    gap: var(--sust-grid-gap);
    align-items: start;
    width: 100%;
}

.sust-row--gap-sm {
    gap: var(--sust-grid-gap-sm);
}

.sust-row--gap-lg {
    gap: var(--sust-grid-gap-lg);
}

.sust-row--no-gap {
    gap: 0;
}

.sust-row--center {
    align-items: center;
}

.sust-row--end {
    align-items: end;
}

.sust-row--stretch {
    align-items: stretch;
}

/* Any grid column defaults to full width */
.sust-col,
[class*="sust-col-"] {
    min-width: 0;
    grid-column: 1 / -1;
}

/* Base spans - use when the span should apply at every viewport */
.sust-col-1 {
    grid-column: span 1;
}

.sust-col-2 {
    grid-column: span 2;
}

.sust-col-3 {
    grid-column: span 3;
}

.sust-col-4 {
    grid-column: span 4;
}

.sust-col-5 {
    grid-column: span 5;
}

.sust-col-6 {
    grid-column: span 6;
}

.sust-col-7 {
    grid-column: span 7;
}

.sust-col-8 {
    grid-column: span 8;
}

.sust-col-9 {
    grid-column: span 9;
}

.sust-col-10 {
    grid-column: span 10;
}

.sust-col-11 {
    grid-column: span 11;
}

.sust-col-12 {
    grid-column: span 12;
}

/*
   Medium breakpoint mirrors Foundation 5's 40.063em breakpoint.
   Recommended markup:
   class="sust-col sust-col-md-6"
*/
@media only screen and (min-width: 40.063em) {
    .sust-col-md-1 {
        grid-column: span 1;
    }

    .sust-col-md-2 {
        grid-column: span 2;
    }

    .sust-col-md-3 {
        grid-column: span 3;
    }

    .sust-col-md-4 {
        grid-column: span 4;
    }

    .sust-col-md-5 {
        grid-column: span 5;
    }

    .sust-col-md-6 {
        grid-column: span 6;
    }

    .sust-col-md-7 {
        grid-column: span 7;
    }

    .sust-col-md-8 {
        grid-column: span 8;
    }

    .sust-col-md-9 {
        grid-column: span 9;
    }

    .sust-col-md-10 {
        grid-column: span 10;
    }

    .sust-col-md-11 {
        grid-column: span 11;
    }

    .sust-col-md-12 {
        grid-column: span 12;
    }
}

/* Large breakpoint mirrors Foundation 5's 64.063em breakpoint */
@media only screen and (min-width: 64.063em) {
    .sust-col-lg-1 {
        grid-column: span 1;
    }

    .sust-col-lg-2 {
        grid-column: span 2;
    }

    .sust-col-lg-3 {
        grid-column: span 3;
    }

    .sust-col-lg-4 {
        grid-column: span 4;
    }

    .sust-col-lg-5 {
        grid-column: span 5;
    }

    .sust-col-lg-6 {
        grid-column: span 6;
    }

    .sust-col-lg-7 {
        grid-column: span 7;
    }

    .sust-col-lg-8 {
        grid-column: span 8;
    }

    .sust-col-lg-9 {
        grid-column: span 9;
    }

    .sust-col-lg-10 {
        grid-column: span 10;
    }

    .sust-col-lg-11 {
        grid-column: span 11;
    }

    .sust-col-lg-12 {
        grid-column: span 12;
    }
}


/* =============================================================
   SECTION PRIMITIVES
   ============================================================= */

.sust-section {
    padding-block: var(--sust-section-space);
}

.sust-section--sm {
    padding-block: var(--sust-section-space-sm);
}

.sust-section--lg {
    padding-block: var(--sust-section-space-lg);
}

.sust-section--soft {
    background: var(--sust-color-surface-soft);
}

.sust-section--muted {
    background: var(--sust-color-surface-muted);
}

.sust-section--dark {
    color: var(--sust-color-text-on-dark);
    background: var(--sust-color-surface-dark);
}

    .sust-section--dark :where(h1, h2, h3, h4, h5, h6, p, li) {
        color: inherit;
    }

.sust-prose {
    max-width: var(--sust-measure-body);
}

.sust-prose--wide {
    max-width: var(--sust-measure-wide);
}


/* =============================================================
   BASIC COMPONENT TOKENS / PRIMITIVES
   ============================================================= */

.sust-eyebrow {
    margin-bottom: var(--sust-space-3);
    color: var(--sust-primary-800);
    font-size: var(--sust-font-size-sm);
    font-weight: var(--sust-font-weight-semibold);
    letter-spacing: var(--sust-letter-spacing-wide);
    line-height: 1.2;
    text-transform: uppercase;
}

.sust-card {
    height: 100%;
    padding: clamp(1.25rem, 2vw, 2rem);
    background: var(--sust-color-surface);
    border: var(--sust-border-width) solid var(--sust-color-border);
    border-radius: var(--sust-radius-md);
    box-shadow: var(--sust-shadow-sm);
}

.sust-card--planet {
    border-top: var(--sust-border-width-accent) solid var(--sust-theme-planet);
}

.sust-card--people {
    border-top: var(--sust-border-width-accent) solid var(--sust-theme-people);
}

.sust-card--principles {
    border-top: var(--sust-border-width-accent) solid var(--sust-theme-principles);
}

.sust-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sust-space-2);
    min-height: 2.875rem;
    padding: 0.75rem 1.25rem;
    margin: 0;
    border: 2px solid var(--sust-color-action);
    border-radius: var(--sust-radius-sm);
    background: var(--sust-color-action);
    color: var(--sust-color-white);
    font-family: var(--sust-font-family);
    font-size: var(--sust-font-size-base);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--sust-duration-base) var(--sust-ease-interaction), border-color var(--sust-duration-base) var(--sust-ease-interaction), color var(--sust-duration-base) var(--sust-ease-interaction), transform var(--sust-duration-fast) var(--sust-ease-interaction), box-shadow var(--sust-duration-fast) var(--sust-ease-interaction);
}

@media (hover: hover) and (pointer: fine) {

    .sust-button:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow: var(--sust-shadow-sm);
    }
}

.sust-button:hover {
    border-color: var(--sust-color-action-hover);
    background: var(--sust-color-action-hover);
    color: var(--sust-color-white);
}

.sust-button:active {
    border-color: var(--sust-color-action-active);
    background: var(--sust-color-action-active);
    transform: translate3d(0, 0, 0);
    box-shadow: none;
}

.sust-button--outline {
    background: transparent;
    border-color: var(--sust-primary-800);
    color: var(--sust-primary-800);
}

    .sust-button--outline:hover {
        background: var(--sust-primary-800);
        border-color: var(--sust-primary-800);
        color: var(--sust-color-white);
    }

.sust-kpi {
    display: grid;
    gap: var(--sust-space-2);
}

.sust-kpi__value {
    color: var(--sust-secondary-500);
    font-size: clamp(2.25rem, 4vw, 4rem);
    font-weight: var(--sust-font-weight-bold);
    line-height: 1;
    letter-spacing: var(--sust-letter-spacing-tight);
}

.sust-kpi__label {
    max-width: 24ch;
    color: var(--sust-color-text-muted);
    font-size: var(--sust-font-size-sm);
    line-height: 1.4;
}


/* =============================================================
   PAGE-SPECIFIC STARTING POINT
   ============================================================= */

.interiorhero--sustainability {
    padding: 0;
    margin-block-start: var(--sust-header-offset);
}


/* =============================================================
   ACCESSIBILITY / USER PREFERENCES
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    .pg-sustainability *,
    .pg-sustainability *::before,
    .pg-sustainability *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .pg-sustainability
    [data-sust-reveal],
    .pg-sustainability
    [data-sust-hero-item] {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =============================================================
   SUSTAINABILITY HERO
   ============================================================= */

.sust-hero {
    position: relative;
    margin-block-start: var(--sust-header-offset);
    overflow: hidden;
    background: var(--sust-secondary-500);
}

.sust-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(38rem, 78vh, 52rem);
}


/* =========================
   Content
   ========================= */

.sust-hero__content {
    display: flex;
    align-items: center;
    padding: clamp(3rem, 7vw, 7rem) var(--sust-container-padding);
    color: var(--sust-color-white);
    background: var(--sust-secondary-500);
}

.sust-hero__content-inner {
    width: 100%;
    max-width: 39rem;
    margin-inline: auto;
}

.sust-hero .sust-eyebrow {
    margin-bottom: var(--sust-space-6);
    color: var(--sust-primary-200);
    font-size: var(--sust-font-size-sm);
    font-weight: var(--sust-font-weight-semibold);
    letter-spacing: var(--sust-letter-spacing-wide);
    text-transform: uppercase;
}


/* =========================
   Heading
   ========================= */

.pg-sustainability .sust-hero__title {
    margin: 0 0 var(--sust-space-6);
    color: var(--sust-color-white);
    font-size: clamp(3rem, 5.5vw, 5.75rem);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.sust-hero__title span {
    display: block;
    margin-top: var(--sust-space-3);
    color: var(--sust-primary-300);
}


/* =========================
   Supporting Copy
   ========================= */

.sust-hero__lead {
    max-width: 31rem;
    margin-bottom: var(--sust-space-4);
    color: var(--sust-color-white);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.4;
}

.sust-hero__description {
    max-width: 38rem;
    margin-bottom: var(--sust-space-4);
    color: var(--sust-secondary-100);
    font-size: var(--sust-font-size-md);
    line-height: 1.65;
}

    .sust-hero__description:last-of-type {
        margin-bottom: 0;
    }

.sust-hero__description--proof {
    margin-top: var(--sust-space-6);
    padding-left: var(--sust-space-5);
    border-left: 3px solid var(--sust-primary-300);
    color: var(--sust-secondary-100);
}

    .sust-hero__description--proof strong {
        color: var(--sust-color-white);
        font-weight: var(--sust-font-weight-bold);
    }
/* =========================
   CTA
   ========================= */

.sust-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sust-space-4);
    margin-top: var(--sust-space-8);
}

.sust-button--light {
    background: var(--sust-color-white);
    border-color: var(--sust-color-white);
    color: var(--sust-secondary-700);
}

    .sust-button--light:hover,
    .sust-button--light:focus-visible {
        background: var(--sust-primary-100);
        border-color: var(--sust-primary-100);
        color: var(--sust-secondary-900);
    }


/* =========================
   Image
   ========================= */

.sust-hero__media {
    position: relative;
    min-height: 26rem;
    overflow: hidden;
    background: var(--sust-secondary-700);
}

.sust-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    max-width: none;
    transform-origin: center center;
}


/*
   Subtle transition between image
   and content panel.
*/

.sust-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( to bottom, rgba(var(--sust-secondary-rgb), 0.08), rgba(var(--sust-secondary-rgb), 0.18) );
}


/* =============================================================
   LARGE SCREENS
   ============================================================= */

@media only screen and (min-width: 64.063em) {

    .sust-hero__layout {
        grid-template-columns: minmax(28rem, 5fr) minmax(0, 7fr);
    }

    .sust-hero__content {
        padding-inline-start: clamp( 2.5rem, calc( (100vw - var(--sust-container-max)) / 2 + var(--sust-container-padding) ), 7rem );
        padding-inline-end: clamp(2.5rem, 4vw, 5rem);
    }

    .sust-hero__content-inner {
        max-width: 42rem;
        margin-inline: 0;
        margin-inline-start: auto;
    }

    .sust-hero__media {
        min-height: inherit;
    }
}


/* =============================================================
   VERY LARGE SCREENS
   ============================================================= */

@media only screen and (min-width: 90.063em) {

    .sust-hero__layout {
        grid-template-columns: minmax(32rem, 5fr) minmax(0, 7fr);
    }
}


/* =============================================================
   MOBILE
   ============================================================= */

@media only screen and (max-width: 40em) {

    .sust-hero__layout {
        min-height: auto;
    }

    .sust-hero__content {
        padding-block: var(--sust-space-16) var(--sust-space-12);
    }

    .pg-sustainability .sust-hero__title {
        font-size: clamp(2.75rem, 12vw, 4rem);
    }

    .sust-hero__lead {
        font-size: var(--sust-font-size-lg);
    }

    .sust-hero__description {
        font-size: var(--sust-font-size-base);
    }

    .sust-hero__media {
        min-height: 23rem;
    }

    .sust-hero__image {
        object-position: center center;
    }
}
/* =============================================================
   PROOF AT A GLANCE / KPI BAND
   ============================================================= */

.sust-proof {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 180deg, var(--sust-primary-50) 0%, var(--sust-color-white) 100% );
}


/* =========================
   Section Header
   ========================= */

.sust-proof__header {
    max-width: 48rem;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

    .sust-proof__header .sust-eyebrow {
        margin-bottom: var(--sust-space-3);
    }

.pg-sustainability .sust-proof__header h2 {
    margin: 0;
    color: var(--sust-secondary-500);
}


/* =============================================================
   KPI GRID
   Component-specific grid because five equal items do not map
   cleanly into the general 12-column page grid.
   ============================================================= */

.sust-proof__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sust-space-4);
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding: 0;
    list-style: none;
}


/* =========================
   KPI Item
   ========================= */

.sust-proof__item {
    --proof-accent: var(--sust-primary-500);
    position: relative;
    min-width: 0;
    min-height: 12rem;
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
    overflow: hidden;
    background: var(--sust-color-white);
    border: var(--sust-border-width) solid var(--sust-color-border);
    border-radius: var(--sust-radius-md);
    box-shadow: var(--sust-shadow-sm);
}


    /*
   Decorative accent rule.
   Color reinforces category but is not required
   to understand the metric.
*/

    .sust-proof__item::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 4px;
        background: var(--proof-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 700ms var(--sust-ease-reveal);
    }

    .sust-proof__item.is-revealed::before {
        transform: scaleX(1);
    }

/* =========================
   ESG Accent Assignments
   ========================= */

.sust-proof__item--planet {
    --proof-accent: var(--sust-theme-planet);
}

.sust-proof__item--people {
    --proof-accent: var(--sust-theme-people);
}

.sust-proof__item--learning {
    --proof-accent: var(--sust-primary-600);
}

.sust-proof__item--principles {
    --proof-accent: var(--sust-theme-principles);
}

.sust-proof__item--community {
    --proof-accent: var(--sust-primary-500);
}


/* =============================================================
   STAT
   The value and its description remain together semantically
   as one paragraph.
   ============================================================= */

.sust-proof__stat {
    display: flex;
    flex-direction: column;
    gap: var(--sust-space-5);
    height: 100%;
    margin: 0;
}


/* =========================
   KPI Number
   ========================= */

.sust-proof__value {
    display: block;
    margin: 0;
    color: var(--proof-accent);
    font-family: var(--sust-font-family);
    font-size: clamp(2.75rem, 5vw, 4rem);
    font-weight: var(--sust-font-weight-bold);
    line-height: 0.95;
    letter-spacing: -0.045em;
}


/*
   Percentage / plus symbols remain in the accessible text.
   They are only visually reduced.
*/

.sust-proof__symbol {
    margin-left: 0.05em;
    font-size: 0.55em;
    font-weight: var(--sust-font-weight-semibold);
    vertical-align: top;
}


/* =========================
   KPI Description
   ========================= */

.sust-proof__label {
    display: block;
    max-width: 24ch;
    margin: 0;
    color: var(--sust-secondary-700);
    font-size: var(--sust-font-size-base);
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.45;
}


/* =========================
   Closing Statement
   ========================= */

.sust-proof__closing {
    max-width: 46rem;
    margin: 0 auto;
    color: var(--sust-secondary-600);
    font-size: var(--sust-font-size-md);
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.55;
    text-align: center;
}


/* =============================================================
   VISUALLY HIDDEN
   Reusable accessibility utility
   ============================================================= */

.sust-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =============================================================
   MEDIUM
   2 + 2 + final item centered
   ============================================================= */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {

    .sust-proof__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sust-space-6);
    }

    .sust-proof__item:last-child {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
        min-height: auto;
    }

        .sust-proof__item:last-child
        .sust-proof__stat {
            display: grid;
            grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
            gap: var(--sust-space-8);
            align-items: center;
        }

        .sust-proof__item:last-child
        .sust-proof__label {
            max-width: 32ch;
        }
}


/* =============================================================
   LARGE
   Five equal columns
   ============================================================= */

@media only screen and (min-width: 64.063em) {

    .sust-proof__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: clamp(0.75rem, 1.25vw, 1.25rem);
    }

    .sust-proof__item:last-child {
        grid-column: auto;
        width: auto;
        justify-self: stretch;
    }
}

/* =============================================================
   PEOPLE-CENTERED APPROACH
   ============================================================= */

.sust-approach {
    background: var(--sust-color-white);
}


/* =========================
   Heading Column
   ========================= */

.sust-approach__intro {
    position: relative;
    max-width: 32rem;
}

.pg-sustainability .sust-approach__intro h2 {
    margin: 0;
    color: var(--sust-secondary-500);
}


/*
   Decorative accent underneath the heading.
*/

.sust-approach__intro::after {
    content: "";
    display: block;
    width: 4rem;
    height: 4px;
    margin-top: var(--sust-space-8);
    background: var(--sust-primary-500);
}


/* =========================
   Content Column
   ========================= */

.sust-approach__content {
    max-width: 44rem;
}

    .sust-approach__content > :last-child {
        margin-bottom: 0;
    }

.sust-approach__lead {
    color: var(--sust-secondary-700);
    font-size: clamp( var(--sust-font-size-md), 1rem + 0.4vw, var(--sust-font-size-lg) );
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.6;
    text-wrap: pretty;
}


/* =============================================================
   CONNECTED RESPONSIBILITIES
   ============================================================= */

.sust-approach__principles {
    display: grid;
    gap: var(--sust-space-3);
    margin: var(--sust-space-8) 0;
    padding: 0;
    list-style: none;
}

    .sust-approach__principles li {
        position: relative;
        margin: 0;
        padding-left: var(--sust-space-6);
        color: var(--sust-secondary-700);
        font-size: var(--sust-font-size-base);
        font-weight: var(--sust-font-weight-medium);
        line-height: 1.5;
    }


        /*
   Custom bullet is decorative.
   The actual list semantics come from <ul>/<li>.
*/

        .sust-approach__principles li::before {
            content: "";
            position: absolute;
            top: 0.62em;
            left: 0;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 50%;
            background: var(--sust-primary-500);
        }


/* =========================
   Closing Statement
   ========================= */

.sust-approach__closing {
    margin-top: var(--sust-space-8);
    padding-top: var(--sust-space-6);
    border-top: var(--sust-border-width) solid var(--sust-color-border);
    color: var(--sust-secondary-600);
    font-weight: var(--sust-font-weight-medium);
    text-wrap: pretty;
}


/* =============================================================
   LARGE SCREENS
   ============================================================= */

@media only screen and (min-width: 64.063em) {

    .sust-approach__intro {
        position: sticky;
        top: calc( var(--sust-header-offset) + var(--sust-space-8) );
    }
}

/* =============================================================
   INSIDE THE 2025 REPORT
   ============================================================= */

.sust-report {
    background: var(--sust-primary-50);
}


/* =========================
   Section Header
   ========================= */

.sust-report__header {
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

    .sust-report__header .sust-eyebrow {
        margin-bottom: var(--sust-space-3);
    }

.pg-sustainability .sust-report__header h2 {
    margin: 0;
    color: var(--sust-secondary-500);
    text-wrap: balance;
}


/* =============================================================
   GRID
   ============================================================= */

.sust-report__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sust-space-6);
}


/* =============================================================
   CARD
   ============================================================= */

.sust-report-card {
    --report-accent: var(--sust-primary-500);
    --report-icon-size: clamp(7rem, 16vw, 11rem);
    --report-icon-opacity: 0.045;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: var(--sust-color-white);
    border: var(--sust-border-width) solid var(--sust-color-border);
    border-radius: var(--sust-radius-lg);
    box-shadow: var(--sust-shadow-sm);
    transition: transform var(--sust-duration-base) var(--sust-ease-interaction), box-shadow var(--sust-duration-base) var(--sust-ease-interaction), border-color var(--sust-duration-base) var(--sust-ease-interaction);
}

@media (hover: hover) and (pointer: fine) {

    .sust-report-card:hover {
        transform: translate3d(0, -4px, 0);
        border-color: var(--sust-primary-300);
        box-shadow: var(--sust-shadow-md);
    }
}

/*
   Stronger color area at the top gives each theme
   an identity without relying on color alone.
*/

.sust-report-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 5px;
    background: var(--report-accent);
}

.sust-report-card > * {
    position: relative;
    z-index: 1;
}

.sust-report-card::after {
    content: "";
    position: absolute;
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    width: var(--report-icon-size);
    height: var(--report-icon-size);
    background-color: var(--report-accent);
    opacity: var(--report-icon-opacity);
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: transform 500ms var(--sust-ease-interaction), opacity 500ms var(--sust-ease-interaction);
}

@media (hover: hover) and (pointer: fine) {

    .sust-report-card:hover::after {
        transform: translate3d(-4px, -4px, 0) scale(1.035);
        opacity: 0.085;
    }
}
/* =========================
   Theme Assignments
   ========================= */

.sust-report-card--planet {
    --report-accent: var(--sust-theme-planet);
}

    .sust-report-card--planet::after {
        -webkit-mask-image: url("/sustainability/assets/icons/planet-icon.svg");
        mask-image: url("/sustainability/assets/icons/planet-icon.svg");
    }

.sust-report-card--people {
    --report-accent: var(--sust-theme-people);
}

    .sust-report-card--people::after {
        -webkit-mask-image: url("/sustainability/assets/icons/people-icon.svg");
        mask-image: url("/sustainability/assets/icons/people-icon.svg");
    }

.sust-report-card--principles {
    --report-accent: var(--sust-theme-principles);
}

    .sust-report-card--principles::after {
        -webkit-mask-image: url("/sustainability/assets/icons/shield-icon.svg");
        mask-image: url("/sustainability/assets/icons/shield-icon.svg");
    }

.sust-report-card--community {
    --report-accent: var(--sust-primary-600);
}

    .sust-report-card--community::after {
        -webkit-mask-image: url("/sustainability/assets/icons/communitiy-icon.svg");
        mask-image: url("/sustainability/assets/icons/communitiy-icon.svg");
    }

@media only screen and (max-width: 40em) {
    .sust-report-card::after {
        width: 6.5rem;
        height: 6.5rem;
        opacity: 0.045;
    }
}

@media only screen and (max-width: 30em) {
    .sust-report-card::after {
        display: none;
    }
}

/* =============================================================
   CARD HEADER
   ============================================================= */

.sust-report-card__header {
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) var(--sust-space-6);
}

.sust-report-card__eyebrow {
    margin: 0 0 var(--sust-space-3);
    color: var(--report-accent);
    font-size: var(--sust-font-size-sm);
    font-weight: var(--sust-font-weight-bold);
    letter-spacing: var(--sust-letter-spacing-wide);
    line-height: 1.2;
    text-transform: uppercase;
}

.pg-sustainability .sust-report-card h3 {
    max-width: 20ch;
    margin: 0;
    color: var(--sust-secondary-500);
    font-size: var(--sust-font-size-2xl);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.2;
    text-wrap: balance;
}


/* =============================================================
   CARD BODY
   ============================================================= */

.sust-report-card__body {
    padding: 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
}

    .sust-report-card__body p {
        color: var(--sust-secondary-700);
        line-height: var(--sust-line-height-body);
        text-wrap: pretty;
    }

        .sust-report-card__body p:last-child {
            margin-bottom: 0;
        }

    .sust-report-card__body strong {
        color: var(--sust-secondary-900);
        font-weight: var(--sust-font-weight-bold);
    }


/* =============================================================
   MEDIUM
   2 × 2 layout
   ============================================================= */

@media only screen and (min-width: 40.063em) {

    .sust-report__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =============================================================
   LARGE
   Slightly larger spacing
   ============================================================= */

@media only screen and (min-width: 64.063em) {

    .sust-report__grid {
        gap: var(--sust-space-8);
    }
}

/* =============================================================
   MID-PAGE REPORT CTA
   ============================================================= */

.sust-report-cta {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
    overflow: hidden;
    background: var(--sust-secondary-500);
    color: var(--sust-color-white);
}


    /*
   Large decorative shape.
   Purely visual; no additional markup or accessibility
   treatment is required.
*/

    .sust-report-cta::after {
        content: "";
        position: absolute;
        width: clamp(14rem, 30vw, 28rem);
        aspect-ratio: 1;
        right: clamp(-10rem, -8vw, -5rem);
        bottom: clamp(-12rem, -10vw, -7rem);
        border: clamp(2rem, 5vw, 4rem) solid rgba(var(--sust-primary-rgb), 0.08);
        border-radius: 50%;
        pointer-events: none;
    }


/* =============================================================
   INNER LAYOUT
   ============================================================= */

.sust-report-cta__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sust-space-8);
    align-items: center;
}


/* =========================
   Content
   ========================= */

.sust-report-cta__content {
    max-width: 48rem;
}

.sust-report-cta__eyebrow {
    margin: 0 0 var(--sust-space-4);
    color: var(--sust-primary-200);
    font-size: var(--sust-font-size-sm);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--sust-letter-spacing-wide);
    text-transform: uppercase;
}


.pg-sustainability .sust-report-cta h2 {
    max-width: 18ch;
    margin: 0;
    color: var(--sust-color-white);
    font-size: var(--sust-font-size-3xl);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.1;
    text-wrap: balance;
}


.sust-report-cta__description {
    max-width: 48rem;
    margin: var(--sust-space-6) 0 0;
    color: var(--sust-secondary-100);
    font-size: var(--sust-font-size-md);
    line-height: 1.6;
    text-wrap: pretty;
}


/* =========================
   CTA
   ========================= */

.sust-report-cta__action {
    display: flex;
    align-items: center;
}


    .sust-report-cta__action .sust-button {
        margin: 0;
    }


/* =============================================================
   LARGE SCREENS
   ============================================================= */

@media only screen and (min-width: 64.063em) {

    .sust-report-cta__inner {
        grid-template-columns: minmax(0, 8fr) minmax(15rem, 4fr);
        gap: var(--sust-grid-gap-lg);
    }

    .sust-report-cta__action {
        justify-content: flex-end;
    }
}


/* =============================================================
   MOBILE
   ============================================================= */

@media only screen and (max-width: 40em) {

    .sust-report-cta__action .sust-button {
        width: 100%;
    }
}

/* =============================================================
   TRANSPARENCY / REPORTING
   ============================================================= */

.sust-transparency {
    background: var(--sust-color-white);
}


/* =============================================================
   MAIN CONTENT
   ============================================================= */

.sust-transparency__content {
    max-width: 46rem;
}

.pg-sustainability .sust-transparency__content h2 {
    max-width: 14ch;
    margin: 0 0 var(--sust-space-8);
    color: var(--sust-secondary-500);
    text-wrap: balance;
}


/* =========================
   Prose
   ========================= */

.sust-transparency__prose {
    max-width: 44rem;
}

.sust-transparency__lead {
    color: var(--sust-secondary-700);
    font-size: clamp( var(--sust-font-size-md), 1rem + 0.35vw, var(--sust-font-size-lg) );
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.6;
    text-wrap: pretty;
}


.sust-transparency__closing {
    margin-top: var(--sust-space-6);
}


/* =========================
   Closing Statement
   ========================= */

.sust-transparency__statement {
    margin: var(--sust-space-8) 0 0;
    padding: var(--sust-space-6) 0 0 var(--sust-space-6);
    border-top: var(--sust-border-width) solid var(--sust-color-border);
    border-left: var(--sust-border-width-accent) solid var(--sust-primary-500);
    color: var(--sust-secondary-600);
    font-size: var(--sust-font-size-md);
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.55;
    text-wrap: pretty;
}


    .sust-transparency__statement strong {
        display: block;
        margin-top: var(--sust-space-2);
        color: var(--sust-secondary-800);
        font-weight: var(--sust-font-weight-semibold);
    }


/* =============================================================
   FRAMEWORK PANEL
   ============================================================= */

.sust-transparency-panel {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    background: var(--sust-primary-50);
    border: var(--sust-border-width) solid var(--sust-color-border);
    border-radius: var(--sust-radius-lg);
}


/* =========================
   Panel Header
   ========================= */

.sust-transparency-panel__eyebrow {
    margin: 0 0 var(--sust-space-3);
    color: var(--sust-primary-800);
    font-size: var(--sust-font-size-sm);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--sust-letter-spacing-wide);
    text-transform: uppercase;
}


.pg-sustainability .sust-transparency-panel h3 {
    margin: 0 0 var(--sust-space-8);
    color: var(--sust-secondary-500);
    font-size: var(--sust-font-size-xl);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.25;
    text-wrap: balance;
}


/* =============================================================
   FRAMEWORK LIST
   ============================================================= */

.sust-framework-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}


.sust-framework-list__item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--sust-space-4);
    align-items: center;
    margin: 0;
    padding-block: var(--sust-space-5);
    border-top: var(--sust-border-width) solid var(--sust-primary-200);
}


    .sust-framework-list__item:last-child {
        border-bottom: var(--sust-border-width) solid var(--sust-primary-200);
    }


/* =========================
   Abbreviation
   ========================= */

.sust-framework-list__abbr {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding-inline: var(--sust-space-2);
    color: var(--sust-secondary-700);
    background: var(--sust-color-white);
    border: var(--sust-border-width) solid var(--sust-primary-200);
    border-radius: var(--sust-radius-sm);
    font-size: var(--sust-font-size-sm);
    font-weight: var(--sust-font-weight-bold);
    line-height: 1;
    letter-spacing: 0.04em;
}


/* =========================
   Framework Name
   ========================= */

.sust-framework-list__name {
    color: var(--sust-secondary-700);
    font-size: var(--sust-font-size-base);
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.4;
    text-wrap: pretty;
}


/* =============================================================
   PANEL NOTE
   ============================================================= */

.sust-transparency-panel__note {
    margin-top: var(--sust-space-8);
    padding: var(--sust-space-5);
    background: rgba( var(--sust-primary-rgb), 0.12 );
    border-radius: var(--sust-radius-md);
}


    .sust-transparency-panel__note p {
        margin: 0;
        color: var(--sust-secondary-700);
        font-size: var(--sust-font-size-sm);
        font-weight: var(--sust-font-weight-medium);
        line-height: 1.5;
        text-wrap: pretty;
    }


/* =============================================================
   LARGE
   ============================================================= */

@media only screen and (min-width: 64.063em) {

    .sust-transparency-panel {
        position: sticky;
        top: calc( var(--sust-header-offset) + var(--sust-space-8) );
    }
}


/* =============================================================
   SMALL
   ============================================================= */

@media only screen and (max-width: 40em) {

    .sust-framework-list__item {
        grid-template-columns: 3.75rem minmax(0, 1fr);
    }
}

/* =============================================================
   BUILDING WHAT LASTS
   ============================================================= */

.sust-building {
    position: relative;
    overflow: hidden;
    background: var(--sust-primary-50);
}


/* =============================================================
   LAYOUT
   ============================================================= */

.sust-building__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sust-space-12);
    align-items: center;
}


/* =============================================================
   CONTENT
   ============================================================= */

.sust-building__content {
    max-width: 48rem;
}


.pg-sustainability .sust-building__content h2 {
    max-width: 12ch;
    margin: 0 0 var(--sust-space-8);
    color: var(--sust-secondary-500);
    text-wrap: balance;
}


/* =========================
   Prose
   ========================= */

.sust-building__prose {
    max-width: 44rem;
}


.sust-building__lead {
    color: var(--sust-secondary-700);
    font-size: clamp( var(--sust-font-size-md), 1rem + 0.4vw, var(--sust-font-size-lg) );
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.6;
    text-wrap: pretty;
}


.sust-building__prose p {
    text-wrap: pretty;
}


    .sust-building__prose p:last-child {
        margin-bottom: 0;
    }


/* =============================================================
   ACTIONS
   ============================================================= */

.sust-building__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sust-space-6) var(--sust-space-8);
    align-items: center;
    margin-top: var(--sust-space-10);
}


/* =========================
   Contact Link
   ========================= */

.sust-building__contact {
    display: inline-flex;
    flex-direction: column;
    gap: var(--sust-space-1);
    color: var(--sust-secondary-700);
    text-decoration: none;
}


    .sust-building__contact:hover {
        color: var(--sust-secondary-900);
    }


.sust-building__contact-label {
    color: var(--sust-secondary-600);
    font-size: var(--sust-font-size-sm);
    font-weight: var(--sust-font-weight-medium);
    line-height: 1.3;
}


.sust-building__contact-email {
    font-size: var(--sust-font-size-base);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}


/* =============================================================
   DECORATIVE VISUAL
   ============================================================= */

.sust-building__visual {
    position: relative;
    width: min(100%, 28rem);
    aspect-ratio: 1;
    justify-self: center;
}

.sust-motion-ready
.sust-building__visual {
    opacity: 0;
    transform: scale(.9) rotate(-5deg);
    transition: opacity 900ms var(--sust-ease-reveal), transform 1100ms var(--sust-ease-reveal);
}


    .sust-motion-ready
    .sust-building__visual.is-revealed {
        opacity: 1;
        transform: scale(1) rotate(0);
    }


.sust-building__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}


.sust-building__ring--outer {
    width: 100%;
    height: 100%;
    border: clamp(2rem, 5vw, 4rem) solid rgba(var(--sust-primary-rgb), 0.12);
}


.sust-building__ring--middle {
    width: 68%;
    height: 68%;
    border: clamp(1.25rem, 3vw, 2.5rem) solid rgba(var(--sust-primary-rgb), 0.18);
}


.sust-building__ring--inner {
    width: 34%;
    height: 34%;
    background: rgba(var(--sust-primary-rgb), 0.28);
}


/* =============================================================
   LARGE
   ============================================================= */

@media only screen and (min-width: 64.063em) {

    .sust-building__inner {
        grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
        gap: var(--sust-grid-gap-lg);
    }
}


/* =============================================================
   MOBILE
   ============================================================= */

@media only screen and (max-width: 40em) {

    .sust-building__actions {
        align-items: stretch;
    }

        .sust-building__actions .sust-button {
            width: 100%;
        }

    .sust-building__contact {
        align-items: flex-start;
    }

    .sust-building__visual {
        width: min(75vw, 20rem);
    }
}

/* =============================================================
   FREQUENTLY ASKED QUESTIONS
   ============================================================= */

.sust-faq {
    background: var(--sust-color-white);
}


/* =============================================================
   HEADER
   ============================================================= */

.sust-faq__header {
    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}


    .sust-faq__header .sust-eyebrow {
        margin-bottom: var(--sust-space-3);
    }


.pg-sustainability .sust-faq__header h2 {
    margin: 0;
    color: var(--sust-secondary-500);
    text-wrap: balance;
}


/* =============================================================
   FAQ LIST
   ============================================================= */

.sust-faq__list {
    border-top: var(--sust-border-width) solid var(--sust-color-border);
}


/* =============================================================
   ITEM
   ============================================================= */

.sust-faq__item {
    margin: 0;
    border-bottom: var(--sust-border-width) solid var(--sust-color-border);
}


    /*
   Subtle background treatment when expanded.
*/

    .sust-faq__item[open] {
        background: linear-gradient( 90deg, rgba(var(--sust-primary-rgb), 0.08) 0%, rgba(var(--sust-primary-rgb), 0.02) 100% );
    }


/* =============================================================
   SUMMARY / QUESTION
   ============================================================= */

.sust-faq__question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    gap: var(--sust-space-6);
    align-items: center;
    min-height: 5.25rem;
    padding: var(--sust-space-6) var(--sust-space-4);
    color: var(--sust-secondary-700);
    cursor: pointer;
    list-style: none;
}


    /*
   Remove browser default disclosure triangle.
*/

    .sust-faq__question::-webkit-details-marker {
        display: none;
    }

    .sust-faq__question::marker {
        content: "";
    }


    .sust-faq__question:hover {
        color: var(--sust-secondary-900);
    }


    /*
   Keep the focus treatment attached to the actual
   interactive <summary> element.
*/

    .sust-faq__question:focus-visible {
        position: relative;
        z-index: 1;
        outline: 3px solid var(--sust-color-focus);
        outline-offset: -3px;
    }


/* =========================
   Question Text
   ========================= */

.sust-faq__question-text {
    max-width: 46rem;
    font-size: var(--sust-font-size-md);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.4;
    text-wrap: pretty;
    transition: transform var(--sust-duration-base) var(--sust-ease-interaction), color var(--sust-duration-base) var(--sust-ease-interaction);

    .sust-faq__item[open]
    & {
        transform: translate3d(.25rem, 0, 0);
        color: var(--sust-secondary-900);
    }
}



/* =============================================================
   PLUS / MINUS ICON
   Purely decorative
   ============================================================= */

.sust-faq__icon {
    position: relative;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border: var(--sust-border-width) solid var(--sust-primary-300);
    border-radius: 50%;
    background: var(--sust-color-white);
}


    /*
   Horizontal line
*/

    .sust-faq__icon::before,
    .sust-faq__icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1rem;
        height: 2px;
        background: var(--sust-secondary-600);
        border-radius: var(--sust-radius-pill);
        transform: translate(-50%, -50%);
        transition: transform var(--sust-duration-base) var(--sust-ease-standard);
    }


    /*
   Vertical line creates the +
*/

    .sust-faq__icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }


/*
   When expanded, rotate the vertical line flat.
   + becomes —
*/

.sust-faq__item[open]
.sust-faq__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}


/*
   Expanded-state accent.
*/

.sust-faq__item[open]
.sust-faq__icon {
    border-color: var(--sust-primary-500);
}


/* =============================================================
   ANSWER
   ============================================================= */

.sust-faq__answer {
    max-width: 48rem;
    padding: 0 calc( 2.75rem + var(--sust-space-6) + var(--sust-space-4) ) var(--sust-space-8) var(--sust-space-4);
}


    .sust-faq__answer p {
        margin: 0;
        color: var(--sust-secondary-700);
        font-size: var(--sust-font-size-base);
        line-height: var(--sust-line-height-body);
        text-wrap: pretty;
    }


/* =============================================================
   SMALL
   ============================================================= */

@media only screen and (max-width: 40em) {

    .sust-faq__question {
        grid-template-columns: minmax(0, 1fr) 2.5rem;
        gap: var(--sust-space-4);
        padding-inline: 0;
    }


    .sust-faq__answer {
        padding: 0 calc( 2.5rem + var(--sust-space-4) ) var(--sust-space-6) 0;
    }


    .sust-faq__question-text {
        font-size: var(--sust-font-size-base);
    }
}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .sust-faq__icon::before,
    .sust-faq__icon::after {
        transition: none;
    }
}

/* =============================================================
   FINAL CTA
   ============================================================= */

.sust-final-cta {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 7rem);
    overflow: hidden;
    background: var(--sust-secondary-700);
    color: var(--sust-color-white);
    text-align: center;
}


    /* =============================================================
   SUBTLE BACKGROUND DETAIL
   ============================================================= */

    .sust-final-cta::before,
    .sust-final-cta::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }


    /*
   Large upper-left ring
*/

    .sust-final-cta::before {
        width: clamp(18rem, 35vw, 34rem);
        aspect-ratio: 1;
        top: clamp(-17rem, -15vw, -9rem);
        left: clamp(-16rem, -12vw, -8rem);
        border: clamp(2rem, 4vw, 4rem) solid rgba(var(--sust-primary-rgb), 0.08);
    }


    /*
   Smaller lower-right glow/ring
*/

    .sust-final-cta::after {
        width: clamp(12rem, 24vw, 22rem);
        aspect-ratio: 1;
        right: clamp(-10rem, -8vw, -5rem);
        bottom: clamp(-11rem, -9vw, -6rem);
        background: rgba(var(--sust-primary-rgb), 0.08);
        border: clamp(1.5rem, 3vw, 3rem) solid rgba(var(--sust-primary-rgb), 0.06);
    }


/* =============================================================
   CONTENT
   ============================================================= */

.sust-final-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 50rem;
    margin-inline: auto;
}


/* =========================
   Eyebrow
   ========================= */

.sust-final-cta__eyebrow {
    margin: 0 0 var(--sust-space-4);
    color: var(--sust-primary-200);
    font-size: var(--sust-font-size-sm);
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--sust-letter-spacing-wide);
    text-transform: uppercase;
}


/* =========================
   Heading
   ========================= */

.pg-sustainability .sust-final-cta h2 {
    max-width: 20ch;
    margin: 0 auto;
    color: var(--sust-color-white);
    font-size: clamp( 2.25rem, 1.6rem + 2.5vw, 4rem );
    font-weight: var(--sust-font-weight-semibold);
    line-height: 1.08;
    letter-spacing: var(--sust-letter-spacing-tight);
    text-wrap: balance;
}


/* =========================
   Description
   ========================= */

.sust-final-cta__description {
    max-width: 42rem;
    margin: var(--sust-space-6) auto 0;
    color: var(--sust-secondary-100);
    font-size: var(--sust-font-size-md);
    line-height: 1.6;
    text-wrap: pretty;
}


/* =============================================================
   ACTION
   ============================================================= */

.sust-final-cta__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--sust-space-8);
}


    .sust-final-cta__actions .sust-button {
        margin: 0;
    }


/* =============================================================
   MOBILE
   ============================================================= */

@media only screen and (max-width: 40em) {

    .sust-final-cta {
        padding-block: var(--sust-space-16);
    }


    .sust-final-cta__actions .sust-button {
        width: 100%;
    }
}

/* =============================================================
   SCROLL REVEAL
   Only active when JS has initialized.
   ============================================================= */

.sust-motion-ready [data-sust-reveal] {
    opacity: 0;
    transform: translate3d( 0, var(--sust-motion-distance), 0 );
    transition: opacity var(--sust-duration-reveal) var(--sust-ease-reveal), transform var(--sust-duration-reveal) var(--sust-ease-reveal);
}


.sust-motion-ready [data-sust-reveal="fade"] {
    transform: none;
}


.sust-motion-ready [data-sust-reveal="left"] {
    transform: translate3d( calc(var(--sust-motion-distance) * -1), 0, 0 );
}


.sust-motion-ready [data-sust-reveal="right"] {
    transform: translate3d( var(--sust-motion-distance), 0, 0 );
}


/* Visible */

.sust-motion-ready
[data-sust-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.sust-motion-ready
[data-sust-hero-item] {
    opacity: 0;
    transform: translate3d( 0, 1.5rem, 0 );
    transition: opacity 700ms var(--sust-ease-reveal), transform 700ms var(--sust-ease-reveal);
    transition-delay: var(--sust-hero-delay, 0ms);
}


.sust-motion-ready
.sust-hero.is-loaded
[data-sust-hero-item] {
    opacity: 1;
    transform: translate3d(0, 24px, 0);
}


/* Stagger */

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(1) {
    --sust-hero-delay: 200ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(2) {
    --sust-hero-delay: 300ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(3) {
    --sust-hero-delay: 420ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(4) {
    --sust-hero-delay: 520ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(5) {
    --sust-hero-delay: 620ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(6) {
    --sust-hero-delay: 720ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(7) {
    --sust-hero-delay: 820ms;
}



/* =============================================================
   HERO CONTENT ENTRANCE
   ============================================================= */

.sust-motion-ready
[data-sust-hero-item] {
    opacity: 0;
    transform: translate3d( 0, 1.5rem, 0 );
    transition: opacity 700ms var(--sust-ease-reveal), transform 700ms var(--sust-ease-reveal);
    transition-delay: var(--sust-hero-delay, 0ms);
}


.sust-motion-ready
.sust-hero.is-loaded
[data-sust-hero-item] {
    opacity: 1;
    transform: translate3d(0, 24px, 0);
}


/* =========================
   Stagger
   ========================= */

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(1) {
    --sust-hero-delay: 200ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(2) {
    --sust-hero-delay: 300ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(3) {
    --sust-hero-delay: 420ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(4) {
    --sust-hero-delay: 520ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(5) {
    --sust-hero-delay: 620ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(6) {
    --sust-hero-delay: 720ms;
}

.sust-hero__content-inner
[data-sust-hero-item]:nth-child(7) {
    --sust-hero-delay: 820ms;
}